https://www.cael.org/hubfs/hub_generated/template_assets/1/3841520616/1744222176884/template_jquery.js

1/*! slidereveal - v1.1.0 - 2016-01-24
2* https://github.com/nnattawat/slidereveal
3* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
4(function ($) {
5  // Private attributes and method
6  var getPadding = function($el, side) {
7    var padding = $el.css('padding-' + side);
8    return padding ? +padding.substring(0, padding.length - 2) : 0;
9  };
10
11  var sidePosition = function($el) {
12    var paddingLeft = getPadding($el, 'left');
13    var paddingRight = getPadding($el, 'right');
14    return ($el.width() + paddingLeft + paddingRight) + "px";
15  };
16
17  var SlideReveal = function($el, options) {
18    // Define default setting
19    var setting = {
20      width: 250,
21      push: true,
22      position: "left",
23      speed: 300, //ms
24      trigger: undefined,
25      autoEscape: true,
26      show: function(){},
27      shown: function(){},
28      hidden: function(){},
29      hide: function(){},
30      top: 0,
31      overlay: false,
32      "zIndex": 1049,
33      overlayColor: 'rgba(0,0,0,0.5)'
34    };
35
36    // Attributes
37    this.setting = $.extend(setting, options);
38    this.element = $el;
39
40    this.init();
41  };
42
43  // Public methods
44  $.extend(SlideReveal.prototype, {
45    init: function() {
46      var self = this;
47      var setting = this.setting;
48      var $el = this.element;
49
50      var transition = "all ease " + setting.speed + "ms";
51      $el.css({
52        position: "fixed",
53        width: setting.width,
54        transition: transition,
55        height: "100%",
56        top: setting.top
57      })
58      .css(setting.position, "-" + sidePosition($el));
59
60      if (setting.overlay) {
61        $el.css('z-index', setting.zIndex);
62        $("body").prepend("<div class='slide-reveal-overlay'></div>");
63        $(".slide-reveal-overlay")
64        .hide()
65        .css({
66          position: 'fixed',
67          top: 0,
68          left: 0,
69          height: '100%',
70          width: '100%',
71          'z-index': setting.zIndex - 1,
72          'background-color': setting.overlayColor,
73        }).click(function() {
74          self.hide();
75        });
76      }
77
78      // Add close stage
79      $el.data("slide-reveal", false);
80
81      if (setting.push){
82        $("body").css({
83          position: "relative",
84          "overflow-x": "hidden",
85          transition: transition,
86          left: "0px"
87        });
88      }
89
90      // Attach trigger using click event
91      if (setting.trigger && setting.trigger.length > 0) {
92        setting.trigger.click( function() {
93          if (!$el.data("slide-reveal")) { // Show
94            self.show();
95          } else { // Hide
96            self.hide();
97          }
98        });
99      }
100
101      // Bind hide event to ESC
102      if (setting.autoEscape) {
103        $(document).keydown( function(e) {
104          if ($('input:focus, textarea:focus').length === 0) {
105            if (e.keyCode === 27 && $el.data("slide-reveal")) { //ESC
106              self.hide();
107            }
108          }
109        });
110      }
111    },
112
113    show: function(triggerEvents) {
114      var setting = this.setting;
115      var $el = this.element;
116
117      // trigger show() method
118      if (triggerEvents === undefined || triggerEvents) { setting.show($el); }
119
120      // show overlay
121      if (setting.overlay) {
122        $(".slide-reveal-overlay").show();
123      }
124
125      // slide the panel
126      $el.css(setting.position, "0px");
127      if (setting.push) {
128        if (setting.position === "left") {
129          $("body").css("left", sidePosition($el));
130        } else {
131          $("body").css("left", "-" + sidePosition($el));
132        }
133      }
134      $el.data("slide-reveal", true);
135
136      // trigger shown() method
137      if (triggerEvents === undefined || triggerEvents) {
138        setTimeout(function() {
139          setting.shown($el);
140        }, setting.speed);
141      }
142    },
143
144    hide: function(triggerEvents) {
145      var setting = this.setting;
146      var $el = this.element;
147
148      // trigger hide() method
149      if (triggerEvents === undefined || triggerEvents) { setting.hide($el); }
150
151      // hide the panel
152      if (setting.push) {
153        $("body").css("left", "0px");
154      }
155      $el.css(setting.position, "-" + sidePosition($el));
156      $el.data("slide-reveal", false);
157
158      // trigger hidden() method
159      if (triggerEvents === undefined || triggerEvents) {
160        setTimeout(function(){
161          // hide overlay
162          if (setting.overlay) {
163            $(".slide-reveal-overlay").hide();
164          }
165
166          setting.hidden($el);
167        }, setting.speed);
168      }
169    },
170
171    toggle: function(triggerEvents) {
172      var $el = this.element;
173      if ($el.data('slide-reveal')) {
174        this.hide(triggerEvents);
175      } else {
176        this.show(triggerEvents);
177      }
178    }
179  });
180
181  // jQuery collection methods
182  $.fn.slideReveal = function (options, triggerEvents) {
183    if (options !== undefined && typeof(options) === "string") {
184      this.each(function() {
185        var slideReveal = $(this).data('slide-reveal-model');
186
187        if (options === "show") {
188          slideReveal.show(triggerEvents);
189        } else if (options === "hide") {
190          slideReveal.hide(triggerEvents);
191        } else if (options === 'toggle') {
192          slideReveal.toggle(triggerEvents);
193        }
194      });
195    } else {
196      this.each(function() {
197        if ($(this).data('slide-reveal-model')) {
198          $(this).data('slide-reveal-model').remove();
199        }
200        $(this).data('slide-reveal-model', new SlideReveal($(this), options));
201      });
202    }
203
204    return this;
205  };
206
207}(jQuery));