https://washoecountylibrary.us/_files/js/vendor/bigSlide.js

1/*! bigSlide - v0.8.0 - 2015-04-28
2* http://ascott1.github.io/bigSlide.js/
3* Copyright (c) 2015 Adam D. Scott; Licensed MIT */
4(function (factory) {
5  'use strict';
6  if (typeof define === 'function' && define.amd) {
7    // AMD. Register as an anonymous module.
8    define(['jquery'], factory);
9  } else if (typeof exports === 'object') {
10    // Node/CommonJS
11    module.exports = factory(require('jquery'));
12  } else {
13    // Browser globals
14    factory(jQuery);
15  }
16}(function($) {
17  'use strict';
18
19  $.fn.bigSlide = function(options) {
20    // store the menuLink in a way that is globally accessible
21    var menuLink = this;
22
23    // plugin settings
24    var settings = $.extend({
25      'menu': ('#menu'),
26      'push': ('.push'),
27      'side': 'right',
28      'menuWidth': '15.625em',
29      'speed': '300',
30      'state': 'closed',
31      'activeBtn': 'active',
32      'easyClose': false,
33      'beforeOpen': function () {},
34      'afterOpen': function() {},
35      'beforeClose': function() {},
36      'afterClose': function() {}
37    }, options);
38
39    // store the menu's state in the model
40    var model = {
41      'state': settings.state
42    };
43
44    // talk back and forth between the view and state
45    var controller = {
46      init: function(){
47        view.init();
48      },
49      // update the menu's state
50      changeState: function(){
51        if (model.state === 'closed') {
52          model.state = 'open'
53        } else {
54          model.state = 'closed'
55        }
56      },
57      // check the menu's state
58      getState: function(){
59        return model.state;
60      }
61    };
62
63    // the view contains all of the visual interactions
64    var view = {
65      init: function(){
66        // cache DOM values
67        this.$menu = $(settings.menu);
68        this.$push = $(settings.push);
69        this.width = settings.menuWidth;
70
71        // CSS for how the menu will be positioned off screen
72        var positionOffScreen = {
73          'position': 'fixed',
74          'top': '0',
75          'bottom': '0',
76          'height': '100%'
77        };
78
79        // manually add the settings values
80        positionOffScreen[settings.side] = '-' + settings.menuWidth;
81        positionOffScreen.width = settings.menuWidth;
82
83        // add the css values to position things offscreen
84        if (settings.state === 'closed') {
85          this.$menu.css(positionOffScreen);
86          this.$push.css(settings.side, '0');
87        }
88
89        // css for the sliding animation
90        var animateSlide = {
91          '-webkit-transition': settings.side + ' ' + settings.speed + 'ms ease',
92          '-moz-transition': settings.side + ' ' + settings.speed + 'ms ease',
93          '-ms-transition': settings.side + ' ' + settings.speed + 'ms ease',
94          '-o-transition': settings.side + ' ' + settings.speed + 'ms ease',
95          'transition': settings.side + ' ' + settings.speed + 'ms ease'
96        };
97
98        // add the animation css
99        this.$menu.css(animateSlide);
100        this.$push.css(animateSlide);
101
102        // register a click listener for desktop & touchstart for mobile
103        menuLink.on('click.bigSlide touchstart.bigSlide', function(e) {
104          e.preventDefault();
105          if (controller.getState() === 'open') {
106            view.toggleClose();
107          } else {
108            view.toggleOpen();
109          }
110        });
111
112        // this makes my eyes blead, but adding it back in as it's a highly requested feature
113        if (settings.easyClose) {
114          $('body').on('click.bigSlide', function(e) {
115           if (!$(e.target).parents().andSelf().is(menuLink) && controller.getState() === 'open')  {
116             view.toggleClose();
117           }
118          });
119        }
120      },
121
122      // toggle the menu open
123      toggleOpen: function() {
124        settings.beforeOpen();
125        controller.changeState();
126        this.$menu.css(settings.side, '0');
127        this.$push.css(settings.side, this.width);
128        menuLink.addClass(settings.activeBtn);
129        settings.afterOpen();
130      },
131
132      // toggle the menu closed
133      toggleClose: function() {
134        settings.beforeClose();
135        controller.changeState();
136        this.$menu.css(settings.side, '-' + this.width);
137        this.$push.css(settings.side, '0');
138        menuLink.removeClass(settings.activeBtn);
139        settings.afterClose();
140      }
141
142    }
143
144    controller.init();
145
146  };
147
148}));