1// ----------------------------------- 2// Slidebars 3// Version 0.10.3 4// http://plugins.adchsm.me/slidebars/ 5// 6// Written by Adam Smith 7// http://www.adchsm.me/ 8// 9// Released under MIT License 10// http://plugins.adchsm.me/slidebars/license.txt 11// 12// --------------------- 13// Index of Slidebars.js 14// 15// 001 - Default Settings 16// 002 - Feature Detection 17// 003 - User Agents 18// 004 - Setup 19// 005 - Animation 20// 006 - Operations 21// 007 - API 22// 008 - User Input 23 24;( function ( $ ) { 25 26 $.slidebars = function ( options ) { 27 28 // ---------------------- 29 // 001 - Default Settings 30 31 var settings = $.extend( { 32 siteClose: true, // true or false - Enable closing of Slidebars by clicking on #sb-site. 33 scrollLock: false, // true or false - Prevent scrolling of site when a Slidebar is open. 34 disableOver: false, // integer or false - Hide Slidebars over a specific width. 35 hideControlClasses: false // true or false - Hide controls at same width as disableOver. 36 }, options ); 37 38 // ----------------------- 39 // 002 - Feature Detection 40 41 var test = document.createElement( 'div' ).style, // Create element to test on. 42 supportTransition = false, // Variable for testing transitions. 43 supportTransform = false; // variable for testing transforms. 44 45 // Test for CSS Transitions 46 if ( test.MozTransition === '' || test.WebkitTransition === '' || test.OTransition === '' || test.transition === '' ) supportTransition = true; 47 48 // Test for CSS Transforms 49 if ( test.MozTransform === '' || test.WebkitTransform === '' || test.OTransform === '' || test.transform === '' ) supportTransform = true; 50 51 // ----------------- 52 // 003 - User Agents 53 54 var ua = navigator.userAgent, // Get user agent string. 55 android = false, // Variable for storing android version. 56 iOS = false; // Variable for storing iOS version. 57 58 if ( /Android/.test( ua ) ) { // Detect Android in user agent string. 59 android = ua.substr( ua.indexOf( 'Android' )+8, 3 ); // Set version of Android. 60 } else if ( /(iPhone|iPod|iPad)/.test( ua ) ) { // Detect iOS in user agent string. 61 iOS = ua.substr( ua.indexOf( 'OS ' )+3, 3 ).replace( '_', '.' ); // Set version of iOS. 62 } 63 64 if ( android && android < 3 || iOS && iOS < 5 ) $( 'html' ).addClass( 'sb-static' ); // Add helper class for older versions of Android & iOS. 65 66 // ----------- 67 // 004 - Setup 68 69 // Site container 70 var $site = $( '#sb-site, .sb-site-container' ); // Cache the selector. 71 72 // Left Slidebar 73 if ( $( '.sb-left' ).length ) { // Check if the left Slidebar exists. 74 var $left = $( '.sb-left' ), // Cache the selector. 75 leftActive = false; // Used to check whether the left Slidebar is open or closed. 76 } 77 78 // Right Slidebar 79 if ( $( '.sb-right' ).length ) { // Check if the right Slidebar exists. 80 var $right = $( '.sb-right' ), // Cache the selector. 81 rightActive = false; // Used to check whether the right Slidebar is open or closed. 82 } 83 84 var init = false, // Initialisation variable. 85 windowWidth = $( window ).width(), // Get width of window. 86 $controls = $( '.sb-toggle-left, .sb-toggle-right, .sb-open-left, .sb-open-right, .sb-close' ), // Cache the control classes. 87 $slide = $( '.sb-slide' ); // Cache users elements to animate. 88 89 // Initailise Slidebars 90 function initialise () { 91 if ( ! settings.disableOver || ( typeof settings.disableOver === 'number' && settings.disableOver >= windowWidth ) ) { // False or larger than window size. 92 init = true; // true enabled Slidebars to open. 93 $( 'html' ).addClass( 'sb-init' ); // Add helper class. 94 if ( settings.hideControlClasses ) $controls.removeClass( 'sb-hide' ); // Remove class just incase Slidebars was originally disabled. 95 css(); // Set required inline styles. 96 } else if ( typeof settings.disableOver === 'number' && settings.disableOver < windowWidth ) { // Less than window size. 97 init = false; // false stop Slidebars from opening. 98 $( 'html' ).removeClass( 'sb-init' ); // Remove helper class. 99 if ( settings.hideControlClasses ) $controls.addClass( 'sb-hide' ); // Hide controls 100 $site.css( 'minHeight', '' ); // Remove minimum height. 101 if ( leftActive || rightActive ) close(); // Close Slidebars if open. 102 } 103 } 104 initialise(); 105 106 // Inline CSS 107 function css() { 108 // Site container height. 109 $site.css( 'minHeight', '' ); 110 var siteHeight = parseInt( $site.css( 'height' ), 10 ), 111 htmlHeight = parseInt( $( 'html' ).css( 'height' ), 10 ); 112 if ( siteHeight < htmlHeight ) $site.css( 'minHeight', $( 'html' ).css( 'height' ) ); // Test height for vh support.. 113 114 // Custom Slidebar widths. 115 if ( $left && $left.hasClass( 'sb-width-custom' ) ) $left.css( 'width', $left.attr( 'data-sb-width' ) ); // Set user custom width. 116 if ( $right && $right.hasClass( 'sb-width-custom' ) ) $right.css( 'width', $right.attr( 'data-sb-width' ) ); // Set user custom width. 117 118 // Set off-canvas margins for Slidebars with push and overlay animations. 119 if ( $left && ( $left.hasClass( 'sb-style-push' ) || $left.hasClass( 'sb-style-overlay' ) ) ) $left.css( 'marginLeft', '-' + $left.css( 'width' ) ); 120 if ( $right && ( $right.hasClass( 'sb-style-push' ) || $right.hasClass( 'sb-style-overlay' ) ) ) $right.css( 'marginRight', '-' + $right.css( 'width' ) ); 121 122 // Site scroll locking. 123 if ( settings.scrollLock ) $( 'html' ).addClass( 'sb-scroll-lock' ); 124 } 125 126 // Resize Functions 127 $( window ).resize( function () { 128 var resizedWindowWidth = $( window ).width();
128 // Get resized window width. 129 if ( windowWidth !== resizedWindowWidth ) { // Slidebars is running and window was actually resized. 130 windowWidth = resizedWindowWidth; // Set the new window width. 131 initialise(); // Call initalise to see if Slidebars should still be running. 132 if ( leftActive ) open( 'left' ); // If left Slidebar is open, calling open will ensure it is the correct size. 133 if ( rightActive ) open( 'right' ); // If right Slidebar is open, calling open will ensure it is the correct size. 134 } 135 } ); 136 // I may include a height check along side a width check here in future. 137 138 // --------------- 139 // 005 - Animation 140 141 var animation; // Animation type. 142 143 // Set animation type. 144 if ( supportTransition && supportTransform ) { // Browser supports css transitions and transforms. 145 animation = 'translate'; // Translate for browsers that support it. 146 if ( android && android < 4.4 ) animation = 'side'; // Android supports both, but can't translate any fixed positions, so use left instead. 147 } else { 148 animation = 'jQuery'; // Browsers that don't support css transitions and transitions. 149 } 150 151 // Animate mixin. 152 function animate( object, amount, side ) { 153 154 // Choose selectors depending on animation style. 155 var selector; 156 157 if ( object.hasClass( 'sb-style-push' ) ) { 158 selector = $site.add( object ).add( $slide ); // Push - Animate site, Slidebar and user elements. 159 } else if ( object.hasClass( 'sb-style-overlay' ) ) { 160 selector = object; // Overlay - Animate Slidebar only. 161 } else { 162 selector = $site.add( $slide ); // Reveal - Animate site and user elements. 163 } 164 165 // Apply animation 166 if ( animation === 'translate' ) { 167 if ( amount === '0px' ) { 168 removeAnimation(); 169 } else { 170 selector.css( 'transform', 'translate( ' + amount + ' )' ); // Apply the animation. 171 } 172 173 } else if ( animation === 'side' ) { 174 if ( amount === '0px' ) { 175 removeAnimation(); 176 } else { 177 if ( amount[0] === '-' ) amount = amount.substr( 1 ); // Remove the '-' from the passed amount for side animations. 178 selector.css( side, '0px' ); // Add a 0 value so css transition works. 179 setTimeout( function () { // Set a timeout to allow the 0 value to be applied above. 180 selector.css( side, amount ); // Apply the animation. 181 }, 1 ); 182 } 183 184 } else if ( animation === 'jQuery' ) { 185 if ( amount[0] === '-' ) amount = amount.substr( 1 ); // Remove the '-' from the passed amount for jQuery animations. 186 var properties = {}; 187 properties[side] = amount; 188 selector.stop().animate( properties, 400 ); // Stop any current jQuery animation before starting another. 189 } 190 191 // Remove animation 192 function removeAnimation () { 193 selector.removeAttr( 'style' ); 194 css(); 195 } 196 } 197 198 // ---------------- 199 // 006 - Operations 200 201 // Open a Slidebar 202 function open( side ) { 203 // Check to see if opposite Slidebar is open. 204 if ( side === 'left' && $left && rightActive || side === 'right' && $right && leftActive ) { // It's open, close it, then continue. 205 close(); 206 setTimeout( proceed, 400 ); 207 } else { // Its not open, continue. 208 proceed(); 209 } 210 211 // Open 212 function proceed() { 213 if ( init && side === 'left' && $left ) { // Slidebars is initiated, left is in use and called to open. 214 $( 'html' ).addClass( 'sb-active sb-active-left' ); // Add active classes. 215 $left.addClass( 'sb-active' ); 216 animate( $left, $left.css( 'width' ), 'left' ); // Animation 217 setTimeout( function () { leftActive = true; }, 400 ); // Set active variables. 218 } else if ( init && side === 'right' && $right ) { // Slidebars is initiated, right is in use and called to open. 219 $( 'html' ).addClass( 'sb-active sb-active-right' ); // Add active classes. 220 $right.addClass( 'sb-active' ); 221 animate( $right, '-' + $right.css( 'width' ), 'right' ); // Animation 222 setTimeout( function () { rightActive = true; }, 400 ); // Set active variables. 223 } 224 } 225 } 226 227 // Close either Slidebar 228 function close( url, target ) { 229 if ( leftActive || rightActive ) { // If a Slidebar is open. 230 if ( leftActive ) { 231 animate( $left, '0px', 'left' ); // Animation 232 leftActive = false;
233 } 234 if ( rightActive ) { 235 animate( $right, '0px', 'right' ); // Animation 236 rightActive = false; 237 } 238 239 setTimeout( function () { // Wait for closing animation to finish. 240 $( 'html' ).removeClass( 'sb-active sb-active-left sb-active-right' ); // Remove active classes. 241 if ( $left ) $left.removeClass( 'sb-active' ); 242 if ( $right ) $right.removeClass( 'sb-active' ); 243 if ( typeof url !== 'undefined' ) { // If a link has been passed to the function, go to it. 244 if ( typeof target === undefined ) target = '_self'; // Set to _self if undefined. 245 window.open( url, target ); // Open the url. 246 } 247 }, 400 ); 248 } 249 } 250 251 // Toggle either Slidebar 252 function toggle( side ) { 253 if ( side === 'left' && $left ) { // If left Slidebar is called and in use. 254 if ( ! leftActive ) { 255 open( 'left' ); // Slidebar is closed, open it. 256 } else { 257 close(); // Slidebar is open, close it. 258 } 259 } 260 if ( side === 'right' && $right ) { // If right Slidebar is called and in use. 261 if ( ! rightActive ) { 262 open( 'right' ); // Slidebar is closed, open it. 263 } else { 264 close(); // Slidebar is open, close it. 265 } 266 } 267 } 268 269 // --------- 270 // 007 - API 271 272 this.slidebars = { 273 open: open, // Maps user variable name to the open method. 274 close: close, // Maps user variable name to the close method. 275 toggle: toggle, // Maps user variable name to the toggle method. 276 init: function () { // Returns true or false whether Slidebars are running or not. 277 return init; // Returns true or false whether Slidebars are running. 278 }, 279 active: function ( side ) { // Returns true or false whether Slidebar is open or closed. 280 if ( side === 'left' && $left ) return leftActive; 281 if ( side === 'right' && $right ) return rightActive; 282 }, 283 destroy: function ( side ) { // Removes the Slidebar from the DOM. 284 if ( side === 'left' && $left ) { 285 if ( leftActive ) close(); // Close if its open. 286 setTimeout( function () { 287 $left.remove(); // Remove it. 288 $left = false; // Set variable to false so it cannot be opened again. 289 }, 400 ); 290 } 291 if ( side === 'right' && $right) { 292 if ( rightActive ) close(); // Close if its open. 293 setTimeout( function () { 294 $right.remove(); // Remove it. 295 $right = false; // Set variable to false so it cannot be opened again. 296 }, 400 ); 297 } 298 } 299 }; 300 301 // ---------------- 302 // 008 - User Input 303 304 function eventHandler( event, selector ) { 305 event.stopPropagation(); // Stop event bubbling. 306 event.preventDefault(); // Prevent default behaviour. 307 if ( event.type === 'touchend' ) selector.off( 'click' ); // If event type was touch, turn off clicks to prevent phantom clicks. 308 } 309 310 // Toggle left Slidebar 311 $( '.sb-toggle-left' ).on( 'touchend click', function ( event ) { 312 eventHandler( event, $( this ) ); // Handle the event. 313 toggle( 'left' ); // Toggle the left Slidbar. 314 } ); 315
316 // Toggle right Slidebar 317 $( '.sb-toggle-right' ).on( 'touchend click', function ( event ) { 318 eventHandler( event, $( this ) ); // Handle the event. 319 toggle( 'right' ); // Toggle the right Slidbar. 320 } ); 321 322 // Open left Slidebar 323 $( '.sb-open-left' ).on( 'touchend click', function ( event ) { 324 eventHandler( event, $( this ) ); // Handle the event. 325 open( 'left' ); // Open the left Slidebar. 326 } ); 327 328 // Open right Slidebar 329 $( '.sb-open-right' ).on( 'touchend click', function ( event ) { 330 eventHandler( event, $( this ) ); // Handle the event. 331 open( 'right' ); // Open the right Slidebar. 332 } ); 333 334 // Close Slidebar 335 $( '.sb-close' ).on( 'touchend click', function ( event ) { 336 if ( $( this ).is( 'a' ) || $( this ).children().is( 'a' ) ) { // Is a link or contains a link. 337 if ( event.type === 'click' ) { // Make sure the user wanted to follow the link. 338 event.stopPropagation(); // Stop events propagating 339 event.preventDefault(); // Stop default behaviour 340 341 var link = ( $( this ).is( 'a' ) ? $( this ) : $( this ).find( 'a' ) ), // Get the link selector. 342 url = link.attr( 'href' ), // Get the link url. 343 target = ( link.attr( 'target' ) ? link.attr( 'target' ) : '_self' ); // Set target, default to _self if not provided 344 345 close( url, target ); // Close Slidebar and pass link target. 346 } 347 } else { // Just a normal control class. 348 eventHandler( event, $( this ) ); // Handle the event. 349 close(); // Close Slidebar. 350 } 351 } ); 352 353 // Close Slidebar via site 354 $site.on( 'touchend click', function ( event ) { 355 if ( settings.siteClose && ( leftActive || rightActive ) ) { // If settings permit closing by site and left or right Slidebar is open. 356 eventHandler( event, $( this ) ); // Handle the event. 357 close(); // Close it. 358 } 359 } ); 360 361 }; // End Slidebars function. 362 363} ) ( jQuery );
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.