Disable hiding of hamburger menu upon resize <= 1024px width

app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee

@@ -0,0 +1,29 @@
+# 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.
+#
+# 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) ->
+  {
+    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)
+
+      # 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
+  }