https://milogroup.eu/application/themes/segregatory/js/slidereveal.js

1/*! slidereveal - v1.1.1 - 2016-03-04
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: "right",
23      speed: 200, //ms
24      trigger: undefined,
25      autoEscape: false,
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-in-out " + 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
63        self.overlayElement = $("<div class='slide-reveal-overlay'></div>")
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        $("body").prepend(self.overlayElement);
78      }
79
80      // Add close stage
81      $el.data("slide-reveal", false);
82
83      if (setting.push){
84        $("body").css({
85          position: "relative",
86          "overflow-x": "hidden",
87          transition: transition,
88          left: "0px"
89        });
90      }
91
92      // Attach trigger using click event
93      if (setting.trigger && setting.trigger.length > 0) {
94        setting.trigger.on('click.slideReveal', function() {
95          if (!$el.data("slide-reveal")) { // Show
96            self.show();
97          } else { // Hide
98            self.hide();
99          }
100        });
101      }
102
103      // Bind hide event to ESC
104      if (setting.autoEscape) {
105        $(document).on('keydown.slideReveal', function(e) {
106          if ($('input:focus, textarea:focus').length === 0) {
107            if (e.keyCode === 27 && $el.data("slide-reveal")) { // ESC
108              self.hide();
109            }
110          }
111        });
112      }
113    },
114
115    show: function(triggerEvents) {
116      var setting = this.setting;
117      var $el = this.element;
118      var $overlayElement = this.overlayElement;
119
120      // trigger show() method
121      if (triggerEvents === undefined || triggerEvents) { setting.show($el); }
122
123      // show overlay
124      if (setting.overlay) {
125        $overlayElement.show();
126      }
127
128      // slide the panel
129      $el.css(setting.position, "0px");
130      if (setting.push) {
131        if (setting.position === "left") {
132          $("body").css("left", sidePosition($el));
133        } else {
134          $("body").css("left", "-" + sidePosition($el));
135        }
136      }
137      $el.data("slide-reveal", true);
138
139      // trigger shown() method
140      if (triggerEvents === undefined || triggerEvents) {
141        setTimeout(function() {
142          setting.shown($el);
143        }, setting.speed);
144      }
145    },
146
147    hide: function(triggerEvents) {
148      var setting = this.setting;
149      var $el = this.element;
150      var $overlayElement = this.overlayElement;
151
152      // trigger hide() method
153      if (triggerEvents === undefined || triggerEvents) { setting.hide($el); }
154
155      // hide the panel
156      if (setting.push) {
157        $("body").css("left", "0px");
158      }
159      $el.css(setting.position, "-" + sidePosition($el));
160      $el.data("slide-reveal", false);
161
162      // trigger hidden() method
163      if (triggerEvents === undefined || triggerEvents) {
164        setTimeout(function(){
165          // hide overlay
166          if (setting.overlay) {
167            $overlayElement.hide();
168          }
169
170          setting.hidden($el);
171        }, setting.speed);
172      }
173    },
174
175    toggle: function(triggerEvents) {
176      var $el = this.element;
177      if ($el.data('slide-reveal')) {
178        this.hide(triggerEvents);
179      } else {
180        this.show(triggerEvents);
181      }
182    },
183
184    remove: function() {
185      this.element.removeData('slide-reveal-model');
186      if (this.setting.trigger && this.setting.trigger.length > 0) {
187        this.setting.trigger.off('.slideReveal');
188      }
189      if (this.overlayElement && this.overlayElement.length > 0) {
190        this.overlayElement.remove();
191      }
192    }
193
194  });
195
196  // jQuery collection methods
197  $.fn.slideReveal = function (options, triggerEvents) {
198    if (options !== undefined && typeof(options) === "string") {
199      this.each(function() {
200        var slideReveal = $(this).data('slide-reveal-model');
201
202        if (options === "show") {
203          slideReveal.show(triggerEvents);
204        } else if (options === "hide") {
205          slideReveal.hide(triggerEvents);
206        } else if (options === 'toggle') {
207          slideReveal.toggle(triggerEvents);
208        }
209      });
210    } else {
211      this.each(function() {
212        if ($(this).data('slide-reveal-model')) {
213          $(this).data('slide-reveal-model').remove();
214        }
215        $(this).data('slide-reveal-model', new SlideReveal($(this), options));
216      });
217    }
218
219    return this;
220  };
221
222}(jQuery));