1/*! 2 * Slidebars - A jQuery framework for off-canvas menus and sidebars. 3 * Version: 2.0 Beta 12 4 * Url: http://plugins.adchsm.me/slidebars/ 5 * Author: Adam Charles Smith 6 * Author url: http://www.adchsm.com/ 7 * License: GPL General Pubic License v2.0 8 * License url: http://www.gnu.org/licenses/gpl-2.0.html 9 */ 10 11var slidebars = function () { 12 13 /** 14 * Setup 15 */ 16 17 // Cache all canvas elements 18 var canvas = $( '[canvas]' ), 19 20 // Instances of Slidebars 21 offCanvas = {}, 22 23 // Variables, permitted sides, styles and transitions 24 initialized = false, 25 registered = false, 26 sides = [ 'top', 'right', 'bottom', 'left' ], 27 styles = [ 'reveal', 'push', 'overlay' ], 28 29 // Functions 30 registerSlidebar = function ( id, side, style, element ) { 31 // Check to see if the Slidebar already exists 32 if ( offCanvas.hasOwnProperty( id ) ) { 33 throw "Error attempting to register Slidebar, a Slidebar with ID '" + id + "' already exists."; 34 } 35 36 // Register the Slidebar 37 offCanvas[ id ] = { 38 'id': id, 39 'side': side, 40 'style': style, 41 'element': element, 42 'active': false 43 }; 44 }, 45 getAnimationProperties = function ( id ) { 46 // Set variables 47 var elements = $(), 48 amount = '0px, 0px', 49 duration = parseFloat( offCanvas[ id ].element.css( 'transitionDuration' ), 10 ) * 1000; 50 51 // Elements to animate 52 if ( offCanvas[ id ].style === 'reveal' || offCanvas[ id ].style === 'push' ) { 53 elements = elements.add( canvas ); 54 } 55 56 if ( offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'overlay' ) { 57 elements = elements.add( offCanvas[ id ].element ); 58 } 59 60 // Amount to animate 61 if ( offCanvas[ id ].active ) { 62 if ( offCanvas[ id ].side === 'top' ) { 63 amount = '0px, ' + offCanvas[ id ].element.css( 'height' ); 64 } else if ( offCanvas[ id ].side === 'right' ) { 65 amount = '-' + offCanvas[ id ].element.css( 'width' ) + ', 0px'; 66 } else if ( offCanvas[ id ].side === 'bottom' ) { 67 amount = '0px, -' + offCanvas[ id ].element.css( 'height' ); 68 } else if ( offCanvas[ id ].side === 'left' ) { 69 amount = offCanvas[ id ].element.css( 'width' ) + ', 0px'; 70 } 71 } 72 73 // Return animation properties 74 return { 'elements': elements, 'amount': amount, 'duration': duration }; 75 }; 76 77 /** 78 * Initialize 79 */ 80 81 this.init = function ( callback ) { 82 // Check Slidebars hasn't been initialized 83 if ( initialized ) { 84 throw 'You have already initialized Slidebars.'; 85 } 86 87 // Loop through and register Slidebars 88 if ( ! registered ) { 89 $( '[off-canvas]' ).each( function () { 90 // Get the Slidebar parameters 91 var parameters = $( this ).attr( 'off-canvas' ).split( ' ', 3 ); 92 93 // Make sure a valid id, side and style are specified 94 if ( parameters[ 0 ] && sides.indexOf( parameters[ 1 ] ) !== -1 && styles.indexOf( parameters[ 2 ] ) !== -1 ) { 95 // Register Slidebar 96 registerSlidebar( parameters[ 0 ], parameters[ 1 ], parameters[ 2 ], $( this ) ); 97 } else { 98 throw "Error attempting to register Slidebar, please specifiy a valid space separated 'id side style'."; 99 } 100 } ); 101 102 // Set registered variable 103 registered = true; 104 } 105 106 // Set init variable 107 initialized = true; 108 109 // Set CSS 110 this.css(); 111 112 // Trigger event 113 $( events ).trigger( 'init' ); 114 115 // Run callback 116 if ( typeof callback === 'function' ) { 117 callback(); 118 } 119 }; 120 121 this.exit = function ( callback ) { 122 // Check Slidebars has been initialized 123 if ( ! initialized ) { 124 throw 'You need to initialize Slidebars first.'; 125 } 126 127 // Exit 128 var exit = function () { 129 // Set init variable 130 initialized = false;
131 132 // Trigger event 133 $( events ).trigger( 'exit' ); 134 135 // Run callback 136 if ( typeof callback === 'function' ) { 137 callback(); 138 } 139 }; 140 141 // Call exit, close open Slidebar if active 142 if ( this.active( 'slidebar' ) ) { 143 this.close( exit ); 144 } else { 145 exit(); 146 } 147 }; 148 149 /** 150 * CSS 151 */ 152 153 this.css = function ( callback ) { 154 // Check Slidebars has been initialized 155 if ( ! initialized ) { 156 throw 'You need to initialize Slidebars first.'; 157 } 158 159 // Loop through Slidebars to set negative margins 160 for ( var id in offCanvas ) { 161 // Check Slidebar has the correct id 162 if ( offCanvas.hasOwnProperty( id ) ) { 163 // Calculate offset 164 var offset; 165 166 if ( offCanvas[ id ].side === 'top' || offCanvas[ id ].side === 'bottom' ) { 167 offset = offCanvas[ id ].element.css( 'height' ); 168 } else { 169 offset = offCanvas[ id ].element.css( 'width' ); 170 } 171 172 // Push and overlay style 173 if ( offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'overlay' ) { 174 offCanvas[ id ].element.css( 'margin-' + offCanvas[ id ].side, '-' + offset ); 175 } 176 } 177 } 178 179 // Reposition open Slidebars 180 if ( this.active( 'slidebar' ) ) { 181 this.open( this.active( 'slidebar' ) ); 182 } 183 184 // Trigger event 185 $( events ).trigger( 'css' ); 186 187 // Run callback 188 if ( typeof callback === 'function' ) { 189 callback(); 190 } 191 }; 192 193 /** 194 * Controls 195 */ 196 197 this.open = function ( id, callback ) { 198 // Check Slidebars has been initialized 199 if ( ! initialized ) { 200 throw 'You need to initialize Slidebars first.'; 201 } 202 203 // If no id was passed, throw error 204 if ( ! id ) { 205 throw "Error trying to open Slidebar, you must specify an ID."; 206 } 207 208 // Check to see if the Slidebar exists 209 if ( ! offCanvas.hasOwnProperty( id ) ) { 210 throw "Error trying to open Slidebar, there is no Slidebar with ID '" + id + "'."; 211 } 212 213 // Open 214 var open = function () { 215 // Set active state to true 216 offCanvas[ id ].active = true; 217 218 // Display the Slidebar 219 offCanvas[ id ].element.css( 'display', 'block' ); 220 221 // Trigger event 222 $( events ).trigger( 'opening', [ offCanvas[ id ].id ] ); 223 224 // Get animation properties 225 var animationProperties = getAnimationProperties( id ); 226 227 // Apply css 228 animationProperties.elements.css( { 229 'transition-duration': animationProperties.duration + 'ms', 230 'transform': 'translate(' + animationProperties.amount + ')' 231 } ); 232 233 // Transition completed 234 setTimeout( function () { 235 // Trigger event 236 $( events ).trigger( 'opened', [ offCanvas[ id ].id ] ); 237 238 // Run callback 239 if ( typeof callback === 'function' ) { 240 callback(); 241 } 242 }, animationProperties.duration ); 243 }; 244 245 // Call open, close open Slidebar if active 246 if ( this.active( 'slidebar' ) && this.active( 'slidebar' ) !== id ) { 247 this.close( open ); 248 } else { 249 open(); 250 } 251 }; 252 253 this.close = function ( id, callback ) { 254 // Shift callback arguments 255 if ( typeof id === 'function' ) { 256 callback = id; 257 id = null; 258 } 259 260 // Check Slidebars has been initialized 261 if ( ! initialized ) { 262 throw 'You need to initialize Slidebars first.'; 263 } 264 265 // Check to see if the Slidebar exists 266 if ( id && ! offCanvas.hasOwnProperty( id ) ) { 267 throw "Error trying to close Slidebar, there is no Slidebar with ID '" + id + "'."; 268 } 269 270 // If no id was passed, check to see if any Slidebar is open 271 if ( ! id ) { 272 // Loop through Slidebars to find active one 273 for ( var key in offCanvas ) { 274 // Check Slidebar has the correct id 275 if ( offCanvas.hasOwnProperty( key ) ) { 276 // If it's active, set id 277 if ( offCanvas[ key ].active ) { 278 id = key; 279 break; 280 } 281 } 282 } 283 } 284 285 // Close a Slidebar 286 if ( id && offCanvas[ id ].active ) { 287 // Set active state to false 288 offCanvas[ id ].active = false;
289 290 // Trigger event 291 $( events ).trigger( 'closing', [ offCanvas[ id ].id ] ); 292 293 // Get animation properties 294 var animationProperties = getAnimationProperties( id ); 295 296 // Apply css 297 animationProperties.elements.css( 'transform', '' ); 298 299 // Transition completetion 300 setTimeout( function () { 301 // Remove transition duration 302 animationProperties.elements.css( 'transition-duration', '' ); 303 304 // Hide the Slidebar 305 offCanvas[ id ].element.css( 'display', 'none' ); 306 307 // Trigger event 308 $( events ).trigger( 'closed', [ offCanvas[ id ].id ] ); 309 310 // Run callback 311 if ( typeof callback === 'function' ) { 312 callback(); 313 } 314 }, animationProperties.duration ); 315 } 316 }; 317 318 this.toggle = function ( id, callback ) { 319 // Check Slidebars has been initialized 320 if ( ! initialized ) { 321 throw 'You need to initialize Slidebars first.'; 322 } 323 324 // If no id was passed, throw error 325 if ( ! id ) { 326 throw "Error trying to toggle Slidebar, you must specify an ID."; 327 } 328 329 // Check to see if the Slidebar exists 330 if ( ! offCanvas.hasOwnProperty( id ) ) { 331 throw "Error trying to toggle Slidebar, there is no Slidebar with ID '" + id + "'."; 332 } 333 334 // Check its state 335 if ( offCanvas[ id ].active ) { 336 // It's open, close it 337 this.close( id, function () { 338 // Run callback 339 if ( typeof callback === 'function' ) { 340 callback(); 341 } 342 } ); 343 } else { 344 // It's closed, open it 345 this.open( id, function () { 346 // Run callback 347 if ( typeof callback === 'function' ) { 348 callback(); 349 } 350 } ); 351 } 352 }; 353 354 /** 355 * Active 356 */ 357 358 this.active = function ( query, callback ) { 359 // Shift callback arguments 360 if ( typeof query === 'function' ) { 361 callback = query; 362 query = null; 363 } 364 365 // Variable to return 366 var active = false; 367 368 // Check init 369 if ( ! query ) { 370 active = initialized; 371 } else 372 373 // Check all Slidebars 374 if ( query === 'slidebar' ) { 375 // Check Slidebars has been initialized 376 if ( ! initialized ) { 377 throw 'You need to initialize Slidebars first.'; 378 } 379 380 // Loop through Slidebars 381 for ( var id in offCanvas ) { 382 // Check Slidebar has the correct id 383 if ( offCanvas.hasOwnProperty( id ) ) { 384 // Check if it's active 385 if ( offCanvas[ id ].active ) { 386 // Set the active id 387 active = offCanvas[ id ].id; 388 break; 389 } 390 } 391 } 392 } else 393 394 // Check specific id 395 { 396 // Check Slidebars has been initialized 397 if ( ! initialized ) { 398 throw 'You need to initialize Slidebars first.'; 399 } 400 401 // Check to see if the Slidebar exists 402 if ( ! offCanvas.hasOwnProperty( query ) ) { 403 throw "Error retrieving state of Slidebar, there is no Slidebar with ID '" + query + "'."; 404 } 405 406 // Set the active state 407 active = offCanvas[ query ].active; 408 } 409 410 // Run callback 411 if ( typeof callback === 'function' ) { 412 callback(); 413 } 414 415 // Return 416 return active; 417 }; 418 419 /** 420 * Manage 421 */ 422 423 this.create = function ( id, side, style, content, callback ) { 424 // Shift callback arguments 425 if ( typeof content === 'function' ) { 426 callback = content; 427 content = null; 428 } 429 430 // Check Slidebars has been initialized 431 if ( ! initialized ) { 432 throw 'You need to initialize Slidebars first.'; 433 } 434 435 // Make sure a valid id, side and style are specified 436 if ( id && sides.indexOf( side ) !== -1 && styles.indexOf( style ) !== -1 ) { 437 // Check to see if the Slidebar exists 438 if ( offCanvas.hasOwnProperty( id ) ) { 439 throw "Error attempting to create Slidebar, a Slidebar with ID '" + id + "' already exists."; 440 } 441 442 // Create new element 443 $( '<div id="' + id + '" off-canvas="' + id + ' ' + side + ' ' + style + '"></div>' ).appendTo( 'body' ); 444 445 // Add content to the Slidebar 446 if ( content ) { 447 $( '#' + id ).html( content ); 448 } 449 450 // Register the Slidebar 451 registerSlidebar( id, side, style, $( '#' + id ) ); 452 453 // Reset CSS 454 this.css(); 455 456 // Trigger event 457 $( events ).trigger( 'created', [ offCanvas[ id ].id ] ); 458 459 // Run callback 460 if ( typeof callback === 'function' ) { 461 callback(); 462 } 463 } else { 464 throw "Error attempting to create Slidebar, please specifiy a valid space separated 'id side style'."; 465 } 466 }; 467 468 this.destroy = function ( id, callback ) { 469 // Check Slidebars has been initialized 470 if ( ! initialized ) { 471 throw 'You need to initialize Slidebars first.'; 472 } 473 474 // If no id was passed, throw error 475 if ( ! id ) {
476 throw "Error trying to destroy Slidebar, you must specify an ID."; 477 } 478 479 // Check to see if the Slidebar exists 480 if ( ! offCanvas.hasOwnProperty( id ) ) { 481 throw "Error trying to destroy Slidebar, there is no Slidebar with ID '" + id + "'."; 482 } 483 484 // Destruction 485 var destroy = function () { 486 // Trigger event 487 $( events ).trigger( 'destroyed', [ offCanvas[ id ].id ] ); 488 489 // Remove the element 490 offCanvas[ id ].element.remove(); 491 492 // Remove Slidebar from instances 493 delete offCanvas[ id ]; 494 495 // Run callback 496 if ( typeof callback === 'function' ) { 497 callback(); 498 } 499 }; 500 501 // Call destroy, close open Slidebar if active 502 if ( offCanvas[ id ].active ) { 503 this.close( id, destroy ); 504 } else { 505 destroy(); 506 } 507 }; 508 509 /** 510 * Events 511 */ 512 513 // Public 514 this.events = {}; 515 516 // Private 517 var events = this.events; 518 519 /** 520 * Resizes 521 */ 522 523 window.onresize = this.css.bind( this ); 524};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.