Added the option to keep mobile menu in its place

codefog · Dec 5, 2017 · bf674df · bf674df
1 parent 0889d95
commit bf674df
Show file tree

Hide file tree

Showing 9 changed files with 1,233 additions and 5 deletions.
diff --git a/assets/js/mobile-menu.jquery.js b/assets/js/mobile-menu.jquery.js
@@ -19,6 +19,7 @@
             'animationSpeed': 500, // The animation speed in milliseconds
             'breakPoint': 0, // The breakpoint to show the menu
             'disableNavigation': false, // Disable the collapsible navigation
+            'keepInPlace': false, // Keeps the menu in place
             'menuActiveClass': 'active', // The menu active CSS class
             'menuSubNavigationHideCssClass': 'submenu_hide', // The sub navigation inactive CSS class
             'menuSubNavigationShowCssClass': 'submenu_show', // The sub navigation active CSS class
@@ -117,7 +118,9 @@
             this.element.addClass('position_' + this.settings.position);
 
             // Append the menu to <body>
-            this.element.appendTo('body');
+            if (!this.settings.keepInPlace) {
+                this.element.appendTo('body');
+            }
 
             switch (this.settings.position) {
                 case 'left':

diff --git a/assets/js/mobile-menu.jquery.min.js b/assets/js/mobile-menu.jquery.min.js
diff --git a/dca/tl_module.php b/dca/tl_module.php
@@ -20,7 +20,7 @@
 $GLOBALS['TL_DCA']['tl_module']['palettes']['mobile_menu'] = '
 {title_legend},name,type;
 {config_legend},mobile_menu_trigger,mobile_menu_html;
-{mobile_menu_display_legend},mobile_menu_phones,mobile_menu_tablets,mobile_menu_breakpoint,mobile_menu_parentTogglers,mobile_menu_disableNavigation,mobile_menu_closeOnLinkClick;
+{mobile_menu_display_legend},mobile_menu_phones,mobile_menu_tablets,mobile_menu_breakpoint,mobile_menu_parentTogglers,mobile_menu_disableNavigation,mobile_menu_closeOnLinkClick,mobile_menu_keepInPlace;
 {mobile_menu_design_legend},mobile_menu_position,mobile_menu_size,mobile_menu_overlay,mobile_menu_offCanvas,mobile_menu_noShadow,mobile_menu_animation;
 {template_legend:hide},customTpl;
 {protected_legend:hide},protected;
@@ -79,7 +79,16 @@
     'label'                   => &$GLOBALS['TL_LANG']['tl_module']['mobile_menu_closeOnLinkClick'],
     'exclude'                 => true,
     'inputType'               => 'checkbox',
-    'eval'                    => array('tl_class'=>'w50 m12'),
+    'eval'                    => array('tl_class'=>'w50'),
+    'sql'                     => "char(1) NOT NULL default ''"
+);
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['mobile_menu_keepInPlace'] = array
+(
+    'label'                   => &$GLOBALS['TL_LANG']['tl_module']['mobile_menu_keepInPlace'],
+    'exclude'                 => true,
+    'inputType'               => 'checkbox',
+    'eval'                    => array('tl_class'=>'w50'),
     'sql'                     => "char(1) NOT NULL default ''"
 );
 

diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,26 @@
+'use strict';
+
+const gulp = require('gulp');
+const uglify = require('gulp-uglify');
+const cleanCSS = require('gulp-clean-css');
+const rename = require('gulp-rename');
+
+gulp.task('scripts', function () {
+    return gulp.src('assets/js/mobile-menu.jquery.js')
+        .pipe(uglify())
+        .pipe(rename(function(path) {
+            path.extname = '.min' + path.extname;
+        }))
+        .pipe(gulp.dest('assets/js'));
+});
+
+gulp.task('styles', function () {
+    return gulp.src('assets/css/mobile-menu.css')
+        .pipe(cleanCSS({restructuring: false}))
+        .pipe(rename(function(path) {
+            path.extname = '.min' + path.extname;
+        }))
+        .pipe(gulp.dest('assets/css'));
+});
+
+gulp.task('default', ['scripts', 'styles']);
diff --git a/languages/en/tl_module.php b/languages/en/tl_module.php
@@ -38,6 +38,10 @@
     'Close menu on link click',
     'Close the mobile menu if any link inside it is clicked. This is especially useful for one-page navigation scroll.'
 ];
+$GLOBALS['TL_LANG']['tl_module']['mobile_menu_keepInPlace']   = [
+    'Keep menu in place',
+    'Do not move the menu to the &lt;body&gt; element at the bottom. <strong>Note:</strong> this setting is dedicated for users who would like to change the menu default behavior.'
+];
 $GLOBALS['TL_LANG']['tl_module']['mobile_menu_position']          = ['Position', 'Here you can choose the menu position.'];
 $GLOBALS['TL_LANG']['tl_module']['mobile_menu_size']              = [
     'Custom menu size (%s)',

diff --git a/package.json b/package.json
@@ -0,0 +1,8 @@
+{
+    "dependencies": {
+        "gulp": "^3.9.1",
+        "gulp-clean-css": "^3.9.0",
+        "gulp-rename": "^1.2.2",
+        "gulp-uglify": "^2.1.0"
+    }
+}
diff --git a/src/MobileMenuModule.php b/src/MobileMenuModule.php
@@ -66,6 +66,7 @@ protected function compile()
         $this->Template->disableNavigation = $this->mobile_menu_disableNavigation;
         $this->Template->parentTogglers    = $this->mobile_menu_parentTogglers;
         $this->Template->closeOnLinkClick  = $this->mobile_menu_closeOnLinkClick;
+        $this->Template->keepInPlace       = $this->mobile_menu_keepInPlace;
 
         $breakPoint = 0;
 

diff --git a/templates/modules/mod_mobile_menu.html5 b/templates/modules/mod_mobile_menu.html5
@@ -26,6 +26,7 @@
         'disableNavigation': <?= $this->disableNavigation ? 'true' : 'false' ?>,
         'parentTogglers': <?= $this->parentTogglers ? 'true' : 'false' ?>,
         'closeOnLinkClick': <?= $this->closeOnLinkClick ? 'true' : 'false' ?>,
+        'keepInPlace': <?= $this->keepInPlace ? 'true' : 'false' ?>,
         'position': '<?= $this->position ?>',
         <?php if ($this->size): ?>'size': '<?= $this->size ?>',<?php endif; ?>
         'trigger': $('#mobile-menu-<?= $this->id; ?>-trigger')