1// ----------------------------------- 2// Slidebars 3// Version 0.10 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 // Set minimum height. 109 $site.css('minHeight', ''); // Reset minimum height. 110 $site.css('minHeight', $('html').height() + 'px'); // Set minimum height of the site to the minimum height of the html. 111 112 // Custom Slidebar widths. 113 if ($left && $left.hasClass('sb-width-custom')) $left.css('width', $left.attr('data-sb-width')); // Set user custom width. 114 if ($right && $right.hasClass('sb-width-custom')) $right.css('width', $right.attr('data-sb-width')); // Set user custom width. 115 116 // Set off-canvas margins for Slidebars with push and overlay animations. 117 if ($left && ($left.hasClass('sb-style-push') || $left.hasClass('sb-style-overlay'))) $left.css('marginLeft', '-' + $left.css('width')); 118 if ($right && ($right.hasClass('sb-style-push') || $right.hasClass('sb-style-overlay'))) $right.css('marginRight', '-' + $right.css('width')); 119 120 // Site scroll locking. 121 if (settings.scrollLock) $('html').addClass('sb-scroll-lock'); 122 } 123 124 // Resize Functions 125 $(window).resize(function() { 126 var resizedWindowWidth = $(window).width();
126 // Get resized window width. 127 if (windowWidth !== resizedWindowWidth) { // Slidebars is running and window was actually resized. 128 windowWidth = resizedWindowWidth; // Set the new window width. 129 initialise(); // Call initalise to see if Slidebars should still be running. 130 if (leftActive) open('left'); // If left Slidebar is open, calling open will ensure it is the correct size. 131 if (rightActive) open('right'); // If right Slidebar is open, calling open will ensure it is the correct size. 132 } 133 }); 134 // I may include a height check along side a width check here in future. 135 136 // --------------- 137 // 005 - Animation 138 139 var animation; // Animation type. 140 141 // Set animation type. 142 if (supportTransition && supportTransform) { // Browser supports css transitions and transforms. 143 animation = 'translate'; // Translate for browsers that support it. 144 if (android && android < 4.4) animation = 'side'; // Android supports both, but can't translate any fixed positions, so use left instead. 145 } else { 146 animation = 'jQuery'; // Browsers that don't support css transitions and transitions. 147 } 148 149 // Animate mixin. 150 function animate(object, amount, side) { 151 // Choose selectors depending on animation style. 152 var selector; 153 154 if (object.hasClass('sb-style-push')) { 155 selector = $site.add(object).add($slide); // Push - Animate site, Slidebar and user elements. 156 } else if (object.hasClass('sb-style-overlay')) { 157 selector = object; // Overlay - Animate Slidebar only. 158 } else { 159 selector = $site.add($slide); // Reveal - Animate site and user elements. 160 } 161 162 // Apply animation 163 if (animation === 'translate') { 164 selector.css('transform', 'translate(' + amount + ')'); // Apply the animation. 165 166 } else if (animation === 'side') { 167 if (amount[0] === '-') amount = amount.substr(1); // Remove the '-' from the passed amount for side animations. 168 if (amount !== '0px') selector.css(side, '0px'); // Add a 0 value so css transition works. 169 setTimeout(function() { // Set a timeout to allow the 0 value to be applied above. 170 selector.css(side, amount); // Apply the animation. 171 }, 1); 172 173 } else if (animation === 'jQuery') { 174 if (amount[0] === '-') amount = amount.substr(1); // Remove the '-' from the passed amount for jQuery animations. 175 var properties = {}; 176 properties[side] = amount; 177 selector.stop().animate(properties, 400); // Stop any current jQuery animation before starting another. 178 } 179 180 // If closed, remove the inline styling on completion of the animation. 181 setTimeout(function() { 182 if (amount === '0px') { 183 selector.removeAttr('style'); 184 css(); 185 } 186 }, 400); 187 } 188 189 // ---------------- 190 // 006 - Operations 191 192 // Open a Slidebar 193 function open(side) { 194 // Check to see if opposite Slidebar is open. 195 if (side === 'left' && $left && rightActive || side === 'right' && $right && leftActive) { // It's open, close it, then continue. 196 close(); 197 setTimeout(proceed, 400); 198 } else { // Its not open, continue. 199 proceed(); 200 } 201 202 // Open 203 function proceed() { 204 if (init && side === 'left' && $left) { // Slidebars is initiated, left is in use and called to open. 205 $('html').addClass('sb-active sb-active-left'); // Add active classes. 206 $left.addClass('sb-active'); 207 animate($left, $left.css('width'), 'left'); // Animation 208 setTimeout(function() { leftActive = true; }, 400); // Set active variables. 209 } else if (init && side === 'right' && $right) { // Slidebars is initiated, right is in use and called to open. 210 $('html').addClass('sb-active sb-active-right'); // Add active classes. 211 $right.addClass('sb-active'); 212 animate($right, '-' + $right.css('width'), 'right'); // Animation 213 setTimeout(function() { rightActive = true; }, 400); // Set active variables. 214 } 215 } 216 } 217 218 // Close either Slidebar 219 function close(link) { 220 if (leftActive || rightActive) { // If a Slidebar is open. 221 if (leftActive) { 222 animate($left, '0px', 'left'); // Animation 223 leftActive = false; 224 } 225 if (rightActive) { 226 animate($right, '0px', 'right'); // Animation 227 rightActive = false;
228 } 229 230 setTimeout(function() { // Wait for closing animation to finish. 231 $('html').removeClass('sb-active sb-active-left sb-active-right'); // Remove active classes. 232 if ($left) $left.removeClass('sb-active'); 233 if ($right) $right.removeClass('sb-active'); 234 if (typeof link !== 'undefined') window.location = link; // If a link has been passed to the function, go to it. 235 }, 400); 236 } 237 } 238 239 // Toggle either Slidebar 240 function toggle(side) { 241 if (side === 'left' && $left) { // If left Slidebar is called and in use. 242 if (!leftActive) { 243 open('left'); // Slidebar is closed, open it. 244 } else { 245 close(); // Slidebar is open, close it. 246 } 247 } 248 if (side === 'right' && $right) { // If right Slidebar is called and in use. 249 if (!rightActive) { 250 open('right'); // Slidebar is closed, open it. 251 } else { 252 close(); // Slidebar is open, close it. 253 } 254 } 255 } 256 257 // --------- 258 // 007 - API 259 260 this.slidebars = { 261 open: open, // Maps user variable name to the open method. 262 close: close, // Maps user variable name to the close method. 263 toggle: toggle, // Maps user variable name to the toggle method. 264 init: function() { // Returns true or false whether Slidebars are running or not. 265 return init; // Returns true or false whether Slidebars are running. 266 }, 267 active: function(side) { // Returns true or false whether Slidebar is open or closed. 268 if (side === 'left' && $left) return leftActive; 269 if (side === 'right' && $right) return rightActive; 270 }, 271 destroy: function(side) { // Removes the Slidebar from the DOM. 272 if (side === 'left' && $left) { 273 if (leftActive) close(); // Close if its open. 274 setTimeout(function() { 275 $left.remove(); // Remove it. 276 $left = false; // Set variable to false so it cannot be opened again. 277 }, 400); 278 } 279 if (side === 'right' && $right) { 280 if (rightActive) close(); // Close if its open. 281 setTimeout(function() { 282 $right.remove(); // Remove it. 283 $right = false; // Set variable to false so it cannot be opened again. 284 }, 400); 285 } 286 } 287 }; 288 289 // ---------------- 290 // 008 - User Input 291 292 function eventHandler(event, selector) { 293 event.stopPropagation(); // Stop event bubbling. 294 event.preventDefault(); // Prevent default behaviour 295 if (event.type === 'touchend') selector.off('click'); // If event type was touch turn off clicks to prevent phantom clicks. 296 } 297 298 // Toggle left Slidebar 299 $('.sb-toggle-left').on('touchend click', function(event) { 300 eventHandler(event, $(this)); // Handle the event. 301 toggle('left'); // Toggle the left Slidbar. 302 }); 303 304 // Toggle right Slidebar 305 $('.sb-toggle-right').on('touchend click', function(event) { 306 eventHandler(event, $(this)); // Handle the event. 307 toggle('right'); // Toggle the right Slidbar. 308 }); 309 310 // Open left Slidebar 311 $('.sb-open-left').on('touchend click', function(event) { 312 eventHandler(event, $(this)); // Handle the event. 313 open('left'); // Open the left Slidebar. 314 }); 315 316 // Open right Slidebar 317 $('.sb-open-right').on('touchend click', function(event) { 318 eventHandler(event, $(this)); // Handle the event. 319 open('right'); // Open the right Slidebar. 320 }); 321 322 // Close a Slidebar 323 $('.sb-close').on('touchend click', function(event) { 324 eventHandler(event, $(this)); // Handle the event. 325 var link; 326 327 // Close Slidebar via link 328 if ( $(this).parents('.sb-slidebar') ) { 329 if ( $(this).is('a') ) { 330 link = $(this).attr('href'); 331 } else if ( $(this).children('a') ) { 332 link = $(this).children('a').attr('href'); 333 } 334 } 335 336 close(link); // Close Slidebar and pass link. 337 }); 338 339 // Close Slidebar via site 340 $site.on('touchend click', function(event) { 341 if (settings.siteClose && (leftActive || rightActive)) { // If settings permit closing by site and left or right Slidebar is open. 342 eventHandler(event, $(this)); // Handle the event. 343 close(); // Close it. 344 } 345 }); 346 347 }; // End Slidebars function. 348 349}) (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.