https://zcj.ro/js/headers/slidebar.js

1/*!
2 * Version: 1.2 Development
3 */
4
5
6
7var slidebars = function () {
8
9  /**
10   * Setup
11   */
12
13  // Cache all canvas elements
14  var canvas = $( '[data-canvas]' ),
15
16  // Object of Slidebars
17  offCanvas = {},
18
19  // Variables, permitted sides and styles
20  init = false,
21  registered = false,
22  sides = [ 'top', 'right', 'bottom', 'left' ],
23  styles = [ 'reveal', 'push', 'overlay', 'shift' ],
24
25  /**
26   * Get Animation Properties
27   */
28
29  getAnimationProperties = function ( id ) {
30    // Variables
31    var elements = $(),
32    amount = '0px, 0px',
33    duration = parseFloat( offCanvas[ id ].element.css( 'transitionDuration' ), 10 ) * 1000;
34
35    // Elements to animate
36    if ( offCanvas[ id ].style === 'reveal' || offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'shift' ) {
37      elements = elements.add( canvas );
38    }
39
40    if ( offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'overlay' || offCanvas[ id ].style === 'shift' ) {
41      elements = elements.add( offCanvas[ id ].element );
42    }
43
44    // Amount to animate
45    if ( offCanvas[ id ].active ) {
46      if ( offCanvas[ id ].side === 'top' ) {
47        amount = '0px, ' + offCanvas[ id ].element.css( 'height' );
48      } else if ( offCanvas[ id ].side === 'right' ) {
49        amount = '-' + offCanvas[ id ].element.css( 'width' ) + ', 0px';
50      } else if ( offCanvas[ id ].side === 'bottom' ) {
51        amount = '0px, -' + offCanvas[ id ].element.css( 'height' );
52      } else if ( offCanvas[ id ].side === 'left' ) {
53        amount = offCanvas[ id ].element.css( 'width' ) + ', 0px';
54      }
55    }
56
57    // Return animation properties
58    return { 'elements': elements, 'amount': amount, 'duration': duration };
59  },
60
61  /**
62   * Slidebars Registration
63   */
64
65  registerSlidebar = function ( id, side, style, element ) {
66    // Check if Slidebar is registered
67    if ( isRegisteredSlidebar( id ) ) {
68      throw "Error registering Slidebar, a Slidebar with id '" + id + "' already exists.";
69    }
70
71    // Register the Slidebar
72    offCanvas[ id ] = {
73      'id': id,
74      'side': side,
75      'style': style,
76      'element': element,
77      'active': false
78    };
79  },
80
81  isRegisteredSlidebar = function ( id ) {
82    // Return if Slidebar is registered
83    if ( offCanvas.hasOwnProperty( id ) ) {
84      return true;
85    } else {
86      return false;
87    }
88  };
89
90  /**
91   * Initialization
92   */
93
94  this.init = function ( callback ) {
95    // Check if Slidebars has been initialized
96    if ( init ) {
97      throw "Slidebars has already been initialized.";
98    }
99
100    // Loop through and register Slidebars
101    if ( ! registered ) {
102      $( '[data-off-canvas]' ).each( function () {
103        // Get Slidebar parameters
104        var parameters = $( this ).data( 'off-canvas' ).split( ' ', 3 );
105        //console.log(parameters);
106        // Make sure a valid id, side and style are specified
107        if ( ! parameters || ! parameters[ 0 ] || sides.indexOf( parameters[ 1 ] ) === -1 || styles.indexOf( parameters[ 2 ] ) === -1 ) {
108          throw "Error registering Slidebar, please specifiy a valid id, side and style'.";
109        }
110
111        // Register Slidebar
112        registerSlidebar( parameters[ 0 ], parameters[ 1 ], parameters[ 2 ], $( this ) );
113      } );
114
115      // Set registered variable
116      registered = true;
117    }
118
119    // Set initialized variable
120    init = true;
121
122    // Set CSS
123    this.css();
124
125    // Trigger event
126    $( events ).trigger( 'init' );
127
128    // Run callback
129    if ( typeof callback === 'function' ) {
130      callback();
131    }
132  };
133
134  this.exit = function ( callback ) {
135    // Check if Slidebars has been initialized
136    if ( ! init ) {
137      throw "Slidebars hasn't been initialized.";
138    }
139
140    // Exit
141    var exit = function () {
142      // Set init variable
143      init = false;
144
145      // Trigger event
146      $( events ).trigger( 'exit' );
147
148      // Run callback
149      if ( typeof callback === 'function' ) {
150        callback();
151      }
152    };
153
154    // Call exit, close open Slidebar if active
155    if ( this.getActiveSlidebar() ) {
156      this.close( exit );
157    } else {
158      exit();
159    }
160  };
161
162  /**
163   * CSS
164   */
165
166  this.css = function ( callback ) {
167    // Check if Slidebars has been initialized
168    if ( ! init ) {
169      throw "Slidebars hasn't been initialized.";
170    }
171
172    // Loop through Slidebars to set negative margins
173    for ( var id in offCanvas ) {
174      // Check if Slidebar is registered
175      if ( isRegisteredSlidebar( id ) ) {
176        // Calculate offset
177        var offset;
178
179        if ( offCanvas[ id ].side === 'top' || offCanvas[ id ].side === 'bottom' ) {
180          offset = offCanvas[ id ].element.css( 'height' );
181        } else {
182          offset = offCanvas[ id ].element.css( 'width' );
183        }
184
185        // Apply negative margins
186        if ( offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'overlay' || offCanvas[ id ].style === 'shift' ) {
187          offCanvas[ id ].element.css( 'margin-' + offCanvas[ id ].side, '-' + offset );
188        }
189      }
190    }
191
192    // Reposition open Slidebars
193    if ( this.getActiveSlidebar() ) {
194      this.open( this.getActiveSlidebar() );
195    }
196
197    // Trigger event
198    $( events ).trigger( 'css' );
199
200    // Run callback
201    if ( typeof callback === 'function' ) {
202      callback();
203    }
204  };
205
206  /**
207   * Controls
208   */
209
210  this.open = function ( id, callback ) {
211    // Check if Slidebars has been initialized
212    if ( ! init ) {
213      throw "Slidebars hasn't been initialized.";
214    }
215
216    // Check if id wasn't passed
217    if ( ! id ) {
218      throw "You must pass a Slidebar id.";
219    }
220
221    // Check if Slidebar is registered
222    if ( ! isRegisteredSlidebar( id ) ) {
223      throw "Error opening Slidebar, there is no Slidebar with id '" + id + "'.";
224    }
225
226    // Open
227    var open = function () {
228      // Set active state to true
229      offCanvas[ id ].active = true;
230
231      // Display the Slidebar
232      offCanvas[ id ].element.css( 'display', 'block' );
233
234      // Trigger event
235      $( events ).trigger( 'opening', [ offCanvas[ id ].id ] );
236
237      // Get animation properties
238      var animationProperties = getAnimationProperties( id );
239
240      // Apply css
241      animationProperties.elements.css( {
242        'transition-duration': animationProperties.duration + 'ms',
243        'transform': 'translate(' + animationProperties.amount + ')'
244      } );
245
246      // Transition completed
247      setTimeout( function () {
248        // Trigger event
249        $( events ).trigger( 'opened', [ offCanvas[ id ].id ] );
250
251        // Run callback
252        if ( typeof callback === 'function' ) {
253          callback();
254        }
255      }, animationProperties.duration );
256    };
257
258    // Call open, close open Slidebar if active
259    if ( this.getActiveSlidebar() && this.getActiveSlidebar() !== id ) {
260      this.close( open );
261    } else {
262      open();
263    }
264  };
265
266  this.close = function ( id, callback ) {
267    // Shift callback arguments
268    if ( typeof id === 'function' ) {
269      callback = id;
270      id = null;
271    }
272
273    // Check if Slidebars has been initialized
274    if ( ! init ) {
275      throw "Slidebars hasn't been initialized.";
276    }
277
278    // Check if id was passed but isn't a registered Slidebar
279    if ( id && ! isRegisteredSlidebar( id ) ) {
280      throw "Error closing Slidebar, there is no Slidebar with id '" + id + "'.";
281    }
282
283    // If no id was passed, get the active Slidebar
284    if ( ! id ) {
285      id = this.getActiveSlidebar();
286    }
287
288    // Close a Slidebar
289    if ( id && offCanvas[ id ].active ) {
290      // Set active state to false
291      offCanvas[ id ].active = false;
292
293      // Trigger event
294      $( events ).trigger( 'closing', [ offCanvas[ id ].id ] );
295
296      // Get animation properties
297      var animationProperties = getAnimationProperties( id );
298
299      // Apply css
300      animationProperties.elements.css( 'transform', '' );
301
302      // Transition completetion
303      setTimeout( function () {
304        // Remove transition duration
305        animationProperties.elements.css( 'transition-duration', '' );
306
307        // Hide the Slidebar
308        offCanvas[ id ].element.css( 'display', '' );
309
310        // Trigger event
311        $( events ).trigger( 'closed', [ offCanvas[ id ].id ] );
312
313        // Run callback
314        if ( typeof callback === 'function' ) {
315          callback();
316        }
317      }, animationProperties.duration );
318    }
319  };
320
321  this.toggle = function ( id, callback ) {
322    // Check if Slidebars has been initialized
323    if ( ! init ) {
324      throw "Slidebars hasn't been initialized.";
325    }
326
327    // Check if id wasn't passed
328    if ( ! id ) {
329      throw "You must pass a Slidebar id.";
330    }
331
332    // Check if Slidebar is registered
333    if ( ! isRegisteredSlidebar( id ) ) {
334      throw "Error toggling Slidebar, there is no Slidebar with id '" + id + "'.";
335    }
336
337    // Check Slidebar state
338    if ( offCanvas[ id ].active ) {
339      // It's open, close it
340      this.close( id, function () {
341        // Run callback
342        if ( typeof callback === 'function' ) {
343          callback();
344        }
345      } );
346    } else {
347      // It's closed, open it
348      this.open( id, function () {
349        // Run callback
350        if ( typeof callback === 'function' ) {
351          callback();
352        }
353      } );
354    }
355  };
356
357  /**
358   * Active States
359   */
360
361  this.isActive = function () {
362    // Return init state
363    return init;
364  };
365
366  this.isActiveSlidebar = function ( id ) {
367    // Check if Slidebars has been initialized
368    if ( ! init ) {
369      throw "Slidebars hasn't been initialized.";
370    }
371
372    // Check if id wasn't passed
373    if ( ! id ) {
374      throw "You must provide a Slidebar id.";
375    }
376
377    // Check if Slidebar is registered
378    if ( ! isRegisteredSlidebar( id ) ) {
379      throw "Error retrieving Slidebar, there is no Slidebar with id '" + id + "'.";
380    }
381
382    // Return the active state
383    return offCanvas[ id ].active;
384  };
385
386  this.getActiveSlidebar = function () {
387    // Check if Slidebars has been initialized
388    if ( ! init ) {
389      throw "Slidebars hasn't been initialized.";
390    }
391
392    // Variable to return
393    var active = false;
394
395    // Loop through Slidebars
396    for ( var id in offCanvas ) {
397      // Check if Slidebar is registered
398      if ( isRegisteredSlidebar( id ) ) {
399        // Check if it's active
400        if ( offCanvas[ id ].active ) {
401          // Set the active id
402          active = offCanvas[ id ].id;
403          break;
404        }
405      }
406    }
407    //console.log(active);
408    // Return
409    return active;
410
411  };
412
413  this.getSlidebars = function () {
414    // Check if Slidebars has been initialized
415    if ( ! init ) {
416      throw "Slidebars hasn't been initialized.";
417    }
418
419    // Create an array for the Slidebars
420    var slidebarsArray = [];
421
422    // Loop through Slidebars
423    for ( var id in offCanvas ) {
424      // Check if Slidebar is registered
425      if ( isRegisteredSlidebar( id ) ) {
426        // Add Slidebar id to array
427        slidebarsArray.push( offCanvas[ id ].id );
428      }
429    }
430
431    // Return
432    return slidebarsArray;
433  };
434
435  this.getSlidebar = function ( id ) {
436    // Check if Slidebars has been initialized
437    if ( ! init ) {
438      throw "Slidebars hasn't been initialized.";
439    }
440
441    // Check if id wasn't passed
442    if ( ! id ) {
443      throw "You must pass a Slidebar id.";
444    }
445
446    // Check if Slidebar is registered
447    if ( ! isRegisteredSlidebar( id ) ) {
448      throw "Error retrieving Slidebar, there is no Slidebar with id '" + id + "'.";
449    }
450
451    // Return the Slidebar's properties
452    return offCanvas[ id ];
453  };
454
455  /**
456   * Events
457   */
458
459  this.events = {};
460  var events = this.events;
461
462  /**
463   * Resizes
464   */
465
466  $( window ).on( 'resize', this.css.bind( this ) );
467};