From 178ca854faca019b01a35a0213b3613c9df24b6f Mon Sep 17 00:00:00 2001
From: Stuart Colville <scolville@mozilla.com>
Date: Fri, 11 Oct 2019 16:37:31 +0100
Subject: [PATCH] Fix jumpy footer by disabling in-view for touch devices
 (#504)

* Fix jumpy footer by disabling in-view for touch devices

* Run prettier
---
 _assets/css/_sidebar.scss |  6 +++---
 _assets/js/inview.js      |  5 +++++
 _assets/js/main.js        | 21 +++++++++++++++++----
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/_assets/css/_sidebar.scss b/_assets/css/_sidebar.scss
index 55ad2017..3d26f3d9 100644
--- a/_assets/css/_sidebar.scss
+++ b/_assets/css/_sidebar.scss
@@ -29,7 +29,7 @@ Stylesheet: Side Bar Page Stylesheet
   }
 }
 
-.site.sidebar.scroll-menu-enabled .site-header {
+.site.sidebar:not(.touch-device) .site-header {
   position: fixed;
 }
 
@@ -41,7 +41,7 @@ $sidebar-nav-width: rem-calc(240);
   background-color: $lighter-gray;
 
   @include breakpoint(medium down) {
-    &:not(.scroll-menu-enabled) {
+    &.touch-device {
       .site-wrapper {
         padding-top: 0;
       }
@@ -52,7 +52,7 @@ $sidebar-nav-width: rem-calc(240);
       }
     }
 
-    &.scroll-menu-enabled .sidenav {
+    &:not(.touch-device) .sidenav {
       height: rem-calc(90);
       left: 0;
       padding-top: rem-calc(40);
diff --git a/_assets/js/inview.js b/_assets/js/inview.js
index 327368cd..b5a08198 100644
--- a/_assets/js/inview.js
+++ b/_assets/js/inview.js
@@ -1,4 +1,9 @@
 (function(d) {
+  if (typeof window !== 'undefined' && 'ontouchstart' in window) {
+    console.debug('Inview disabled for touch device.');
+    return;
+  }
+
   var p = {},
     e,
     a,
diff --git a/_assets/js/main.js b/_assets/js/main.js
index 93139521..8b254c04 100644
--- a/_assets/js/main.js
+++ b/_assets/js/main.js
@@ -3,6 +3,7 @@
  * lance@glance.ca
  *
  */
+window.is_touch_device = 'ontouchstart' in document.documentElement;
 
 jQuery(document).ready(function($) {
   // SETTINGS
@@ -16,7 +17,9 @@ jQuery(document).ready(function($) {
   // Device
   // ------
 
-  var is_touch_device = 'ontouchstart' in document.documentElement;
+  if (is_touch_device) {
+    $('body').addClass('touch-device');
+  }
 
   $('body').on('mousedown', function() {
     $('body').addClass('using-mouse');
@@ -84,7 +87,7 @@ jQuery(document).ready(function($) {
   // **    the plugin code is found in parallax.js     **
   // *****                                         ******
 
-  if (typeof window !== 'undefined' && !('ontouchstart' in window)) {
+  if (!is_touch_device) {
     console.debug('Parallax effects enabled');
     if ($('.parallax').length) {
       $('.parallax').parallax({ offsetIntertia: -0.15 });
@@ -337,7 +340,7 @@ jQuery(document).ready(function($) {
 
   $.fn.persistantMenu = function() {
     // Don't enable the scroll hidden menu for touch devices.
-    if (typeof window !== 'undefined' && 'ontouchstart' in window) {
+    if (is_touch_device) {
       console.debug('No-op persistantMenu for touch enabled devices');
       return {
         kill: function() {
@@ -346,7 +349,6 @@ jQuery(document).ready(function($) {
       };
     }
 
-    $('body').addClass('scroll-menu-enabled');
     var $container = this;
     var $window = $(window);
     var scrollTop = $window.scrollTop();
@@ -551,6 +553,10 @@ jQuery(document).ready(function($) {
   // ------
 
   $.fn.showOnView = function(options) {
+    if (is_touch_device) {
+      console.debug('showOnView disabled for touch device');
+      return;
+    }
     var settings = $.extend(
       {
         count: 'once',
@@ -819,6 +825,13 @@ jQuery(document).ready(function($) {
         $tile_content.removeClass('hover');
         $tile_background.removeClass('hover');
       });
+
+    // Fallback for touch devices using full-width layout.
+    if (is_touch_device) {
+      $('#anatomy-of-an-extension-graphic, #anatomy-control').addClass(
+        'step-one step-two'
+      );
+    }
   };
 
   // 9. Popups