diff options
| author | Mitch Riedstra <Mitch@riedstra.us> | 2017-10-24 16:59:48 -0400 |
|---|---|---|
| committer | Mitch Riedstra <Mitch@riedstra.us> | 2017-10-24 16:59:48 -0400 |
| commit | 3e8b34be2fdeccf16c8b46f1ee518f970853768d (patch) | |
| tree | abcb7d0cb260790a2b4a746e3959f2e7ee3a33f7 /app/dispatch/static/materialize/js/sideNav.js | |
| parent | 4ee5893fd9c82228c62306fc7f5babdfc602e4c4 (diff) | |
| download | dispatch-tracker-3e8b34be2fdeccf16c8b46f1ee518f970853768d.tar.gz dispatch-tracker-3e8b34be2fdeccf16c8b46f1ee518f970853768d.tar.xz | |
Adding in materialize source and templates
Diffstat (limited to 'app/dispatch/static/materialize/js/sideNav.js')
| -rw-r--r-- | app/dispatch/static/materialize/js/sideNav.js | 414 |
1 files changed, 414 insertions, 0 deletions
diff --git a/app/dispatch/static/materialize/js/sideNav.js b/app/dispatch/static/materialize/js/sideNav.js new file mode 100644 index 0000000..bfda17a --- /dev/null +++ b/app/dispatch/static/materialize/js/sideNav.js @@ -0,0 +1,414 @@ +(function ($) {
+
+ var methods = {
+ init : function(options) {
+ var defaults = {
+ menuWidth: 300,
+ edge: 'left',
+ closeOnClick: false,
+ draggable: true,
+ onOpen: null,
+ onClose: null
+ };
+ options = $.extend(defaults, options);
+
+ $(this).each(function(){
+ var $this = $(this);
+ var menuId = $this.attr('data-activates');
+ var menu = $("#"+ menuId);
+
+ // Set to width
+ if (options.menuWidth != 300) {
+ menu.css('width', options.menuWidth);
+ }
+
+ // Add Touch Area
+ var $dragTarget = $('.drag-target[data-sidenav="' + menuId + '"]');
+ if (options.draggable) {
+ // Regenerate dragTarget
+ if ($dragTarget.length) {
+ $dragTarget.remove();
+ }
+
+ $dragTarget = $('<div class="drag-target"></div>').attr('data-sidenav', menuId);
+ $('body').append($dragTarget);
+ } else {
+ $dragTarget = $();
+ }
+
+ if (options.edge == 'left') {
+ menu.css('transform', 'translateX(-100%)');
+ $dragTarget.css({'left': 0}); // Add Touch Area
+ }
+ else {
+ menu.addClass('right-aligned') // Change text-alignment to right
+ .css('transform', 'translateX(100%)');
+ $dragTarget.css({'right': 0}); // Add Touch Area
+ }
+
+ // If fixed sidenav, bring menu out
+ if (menu.hasClass('fixed')) {
+ if (window.innerWidth > 992) {
+ menu.css('transform', 'translateX(0)');
+ }
+ }
+
+ // Window resize to reset on large screens fixed
+ if (menu.hasClass('fixed')) {
+ $(window).resize( function() {
+ if (window.innerWidth > 992) {
+ // Close menu if window is resized bigger than 992 and user has fixed sidenav
+ if ($('#sidenav-overlay').length !== 0 && menuOut) {
+ removeMenu(true);
+ }
+ else {
+ // menu.removeAttr('style');
+ menu.css('transform', 'translateX(0%)');
+ // menu.css('width', options.menuWidth);
+ }
+ }
+ else if (menuOut === false){
+ if (options.edge === 'left') {
+ menu.css('transform', 'translateX(-100%)');
+ } else {
+ menu.css('transform', 'translateX(100%)');
+ }
+
+ }
+
+ });
+ }
+
+ // if closeOnClick, then add close event for all a tags in side sideNav
+ if (options.closeOnClick === true) {
+ menu.on("click.itemclick", "a:not(.collapsible-header)", function(){
+ if (!(window.innerWidth > 992 && menu.hasClass('fixed'))){
+ removeMenu();
+ }
+ });
+ }
+
+ var removeMenu = function(restoreNav) {
+ panning = false;
+ menuOut = false;
+ // Reenable scrolling
+ $('body').css({
+ overflow: '',
+ width: ''
+ });
+
+ $('#sidenav-overlay').velocity({opacity: 0}, {duration: 200,
+ queue: false, easing: 'easeOutQuad',
+ complete: function() {
+ $(this).remove();
+ } });
+ if (options.edge === 'left') {
+ // Reset phantom div
+ $dragTarget.css({width: '', right: '', left: '0'});
+ menu.velocity(
+ {'translateX': '-100%'},
+ { duration: 200,
+ queue: false,
+ easing: 'easeOutCubic',
+ complete: function() {
+ if (restoreNav === true) {
+ // Restore Fixed sidenav
+ menu.removeAttr('style');
+ menu.css('width', options.menuWidth);
+ }
+ }
+
+ });
+ }
+ else {
+ // Reset phantom div
+ $dragTarget.css({width: '', right: '0', left: ''});
+ menu.velocity(
+ {'translateX': '100%'},
+ { duration: 200,
+ queue: false,
+ easing: 'easeOutCubic',
+ complete: function() {
+ if (restoreNav === true) {
+ // Restore Fixed sidenav
+ menu.removeAttr('style');
+ menu.css('width', options.menuWidth);
+ }
+ }
+ });
+ }
+
+ // Callback
+ if (typeof(options.onClose) === 'function') {
+ options.onClose.call(this, menu);
+ }
+ }
+
+
+
+ // Touch Event
+ var panning = false;
+ var menuOut = false;
+
+ if (options.draggable) {
+ $dragTarget.on('click', function(){
+ if (menuOut) {
+ removeMenu();
+ }
+ });
+
+ $dragTarget.hammer({
+ prevent_default: false
+ }).on('pan', function(e) {
+
+ if (e.gesture.pointerType == "touch") {
+
+ var direction = e.gesture.direction;
+ var x = e.gesture.center.x;
+ var y = e.gesture.center.y;
+ var velocityX = e.gesture.velocityX;
+
+ // Vertical scroll bugfix
+ if (x === 0 && y === 0) {
+ return;
+ }
+
+ // Disable Scrolling
+ var $body = $('body');
+ var $overlay = $('#sidenav-overlay');
+ var oldWidth = $body.innerWidth();
+ $body.css('overflow', 'hidden');
+ $body.width(oldWidth);
+
+ // If overlay does not exist, create one and if it is clicked, close menu
+ if ($overlay.length === 0) {
+ $overlay = $('<div id="sidenav-overlay"></div>');
+ $overlay.css('opacity', 0).click( function(){
+ removeMenu();
+ });
+
+ // Run 'onOpen' when sidenav is opened via touch/swipe if applicable
+ if (typeof(options.onOpen) === 'function') {
+ options.onOpen.call(this, menu);
+ }
+
+ $('body').append($overlay);
+ }
+
+ // Keep within boundaries
+ if (options.edge === 'left') {
+ if (x > options.menuWidth) { x = options.menuWidth; }
+ else if (x < 0) { x = 0; }
+ }
+
+ if (options.edge === 'left') {
+ // Left Direction
+ if (x < (options.menuWidth / 2)) { menuOut = false; }
+ // Right Direction
+ else if (x >= (options.menuWidth / 2)) { menuOut = true; }
+ menu.css('transform', 'translateX(' + (x - options.menuWidth) + 'px)');
+ }
+ else {
+ // Left Direction
+ if (x < (window.innerWidth - options.menuWidth / 2)) {
+ menuOut = true;
+ }
+ // Right Direction
+ else if (x >= (window.innerWidth - options.menuWidth / 2)) {
+ menuOut = false;
+ }
+ var rightPos = (x - options.menuWidth / 2);
+ if (rightPos < 0) {
+ rightPos = 0;
+ }
+
+ menu.css('transform', 'translateX(' + rightPos + 'px)');
+ }
+
+
+ // Percentage overlay
+ var overlayPerc;
+ if (options.edge === 'left') {
+ overlayPerc = x / options.menuWidth;
+ $overlay.velocity({opacity: overlayPerc }, {duration: 10, queue: false, easing: 'easeOutQuad'});
+ }
+ else {
+ overlayPerc = Math.abs((x - window.innerWidth) / options.menuWidth);
+ $overlay.velocity({opacity: overlayPerc }, {duration: 10, queue: false, easing: 'easeOutQuad'});
+ }
+ }
+
+ }).on('panend', function(e) {
+
+ if (e.gesture.pointerType == "touch") {
+ var $overlay = $('#sidenav-overlay');
+ var velocityX = e.gesture.velocityX;
+ var x = e.gesture.center.x;
+ var leftPos = x - options.menuWidth;
+ var rightPos = x - options.menuWidth / 2;
+ if (leftPos > 0 ) {
+ leftPos = 0;
+ }
+ if (rightPos < 0) {
+ rightPos = 0;
+ }
+ panning = false;
+
+ if (options.edge === 'left') {
+ // If velocityX <= 0.3 then the user is flinging the menu closed so ignore menuOut
+ if ((menuOut && velocityX <= 0.3) || velocityX < -0.5) {
+ // Return menu to open
+ if (leftPos !== 0) {
+ menu.velocity({'translateX': [0, leftPos]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+ }
+
+ $overlay.velocity({opacity: 1 }, {duration: 50, queue: false, easing: 'easeOutQuad'});
+ $dragTarget.css({width: '50%', right: 0, left: ''});
+ menuOut = true;
+ }
+ else if (!menuOut || velocityX > 0.3) {
+ // Enable Scrolling
+ $('body').css({
+ overflow: '',
+ width: ''
+ });
+ // Slide menu closed
+ menu.velocity({'translateX': [-1 * options.menuWidth - 10, leftPos]}, {duration: 200, queue: false, easing: 'easeOutQuad'});
+ $overlay.velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
+ complete: function () {
+ // Run 'onClose' when sidenav is closed via touch/swipe if applicable
+ if (typeof(options.onClose) === 'function') {
+ options.onClose.call(this, menu);
+ }
+
+ $(this).remove();
+ }});
+ $dragTarget.css({width: '10px', right: '', left: 0});
+ }
+ }
+ else {
+ if ((menuOut && velocityX >= -0.3) || velocityX > 0.5) {
+ // Return menu to open
+ if (rightPos !== 0) {
+ menu.velocity({'translateX': [0, rightPos]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+ }
+
+ $overlay.velocity({opacity: 1 }, {duration: 50, queue: false, easing: 'easeOutQuad'});
+ $dragTarget.css({width: '50%', right: '', left: 0});
+ menuOut = true;
+ }
+ else if (!menuOut || velocityX < -0.3) {
+ // Enable Scrolling
+ $('body').css({
+ overflow: '',
+ width: ''
+ });
+
+ // Slide menu closed
+ menu.velocity({'translateX': [options.menuWidth + 10, rightPos]}, {duration: 200, queue: false, easing: 'easeOutQuad'});
+ $overlay.velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
+ complete: function () {
+ // Run 'onClose' when sidenav is closed via touch/swipe if applicable
+ if (typeof(options.onClose) === 'function') {
+ options.onClose.call(this, menu);
+ }
+
+ $(this).remove();
+ }});
+ $dragTarget.css({width: '10px', right: 0, left: ''});
+ }
+ }
+
+ }
+ });
+ }
+
+ $this.off('click.sidenav').on('click.sidenav', function() {
+ if (menuOut === true) {
+ menuOut = false;
+ panning = false;
+ removeMenu();
+ }
+ else {
+
+ // Disable Scrolling
+ var $body = $('body');
+ var $overlay = $('<div id="sidenav-overlay"></div>');
+ var oldWidth = $body.innerWidth();
+ $body.css('overflow', 'hidden');
+ $body.width(oldWidth);
+
+ // Push current drag target on top of DOM tree
+ $('body').append($dragTarget);
+
+ if (options.edge === 'left') {
+ $dragTarget.css({width: '50%', right: 0, left: ''});
+ menu.velocity({'translateX': [0, -1 * options.menuWidth]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+ }
+ else {
+ $dragTarget.css({width: '50%', right: '', left: 0});
+ menu.velocity({'translateX': [0, options.menuWidth]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+ }
+
+ // Overlay close on click
+ $overlay.css('opacity', 0)
+ .click(function() {
+ menuOut = false;
+ panning = false;
+ removeMenu();
+ $overlay.velocity({opacity: 0}, {duration: 300, queue: false, easing: 'easeOutQuad',
+ complete: function() {
+ $(this).remove();
+ }
+ });
+ });
+
+ // Append body
+ $('body').append($overlay);
+ $overlay.velocity({opacity: 1}, {duration: 300, queue: false, easing: 'easeOutQuad',
+ complete: function () {
+ menuOut = true;
+ panning = false;
+ }
+ });
+
+ // Callback
+ if (typeof(options.onOpen) === 'function') {
+ options.onOpen.call(this, menu);
+ }
+ }
+
+ return false;
+ });
+ });
+
+
+ },
+ destroy: function () {
+ var $overlay = $('#sidenav-overlay');
+ var $dragTarget = $('.drag-target[data-sidenav="' + $(this).attr('data-activates') + '"]');
+ $overlay.trigger('click');
+ $dragTarget.remove();
+ $(this).off('click');
+ $overlay.remove();
+ },
+ show : function() {
+ this.trigger('click');
+ },
+ hide : function() {
+ $('#sidenav-overlay').trigger('click');
+ }
+ };
+
+
+ $.fn.sideNav = function(methodOrOptions) {
+ if ( methods[methodOrOptions] ) {
+ return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
+ } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
+ // Default to "init"
+ return methods.init.apply( this, arguments );
+ } else {
+ $.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.sideNav' );
+ }
+ }; // Plugin end
+}( jQuery ));
|