From 14eaa4920407df84ec3ddfa31aeae1759b120178 Mon Sep 17 00:00:00 2001 From: Kristina Lim Date: Thu, 25 Oct 2018 19:29:07 +0800 Subject: [PATCH 1/2] Disable hiding the off-canvas upon window resize. In some browsers for mobile devices, the address bar is automatically hidden when scrolling down the page. This is not workable if the height of the contents of the off-canvas exceeds the height of the screen, because the latter portion of the contents stays hidden to the user. https://github.com/openfoodfoundation/angular-foundation/blob/0.9.0-20180826174721/src/offcanvas/offcanvas.js --- .../directives/off_canvas_wrap.js.coffee | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee diff --git a/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee b/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee new file mode 100644 index 00000000000..68c4b331d81 --- /dev/null +++ b/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee @@ -0,0 +1,22 @@ +# Extend the "offCanvasWrap" directive in "angular-foundation" to disable hiding of the off-canvas +# upon window resize. +# +# In some browsers for mobile devices, the address bar is automatically hidden when scrolling down +# the page. This is not workable if the height of the contents of the off-canvas exceeds the height +# of the screen, because the latter portion of the contents stays hidden to the user. +# +# https://github.com/openfoodfoundation/angular-foundation/blob/0.9.0-20180826174721/src/offcanvas/offcanvas.js +angular.module('mm.foundation.offcanvas').directive 'offCanvasWrap', ($window) -> + { + restrict: 'C' + priority: 1 + link: ($scope, element, attrs) -> + win = angular.element($window) + + # Get the scope used by the "offCanvasWrap" directive: + # https://github.com/openfoodfoundation/angular-foundation/blob/0.9.0-20180826174721/src/offcanvas/offcanvas.js#L2 + isolatedScope = element.isolateScope() + + # Unbind hiding of the off-canvas upon window resize. + win.unbind('resize.body', isolatedScope.hide) + } From 2cc594dc98c2ef7ef522bbbbf84eeee024b69b07 Mon Sep 17 00:00:00 2001 From: Kristina Lim Date: Thu, 25 Oct 2018 20:34:52 +0800 Subject: [PATCH 2/2] Proceed to hide off-canvas when resized to >1024px --- .../darkswarm/directives/off_canvas_wrap.js.coffee | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee b/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee index 68c4b331d81..dea2448d34f 100644 --- a/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee +++ b/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee @@ -5,6 +5,9 @@ # the page. This is not workable if the height of the contents of the off-canvas exceeds the height # of the screen, because the latter portion of the contents stays hidden to the user. # +# However, for screens over 1024px width for which the off-canvas is not styled to be visible, we +# can proceed to hide this. +# # https://github.com/openfoodfoundation/angular-foundation/blob/0.9.0-20180826174721/src/offcanvas/offcanvas.js angular.module('mm.foundation.offcanvas').directive 'offCanvasWrap', ($window) -> { @@ -19,4 +22,8 @@ angular.module('mm.foundation.offcanvas').directive 'offCanvasWrap', ($window) - # Unbind hiding of the off-canvas upon window resize. win.unbind('resize.body', isolatedScope.hide) + + # Bind hiding of the off-canvas that only happens when screen width is over 1024px. + win.bind 'resize.body', -> + isolatedScope.hide() if $(window).width() > 1024 }