1 2// ----------------------------------- 3// Slidebars 4// Version 0.9.4 5// http://plugins.adchsm.me/slidebars/ 6// 7// Written by Adam Smith 8// http://www.adchsm.me/ 9// 10// Released under MIT License 11// http://plugins.adchsm.me/slidebars/license.txt 12// 13// --------------------- 14// Index of Slidebars.js 15// 16// 001 - Default Settings 17// 002 - Feature Detection 18// 003 - User Agents 19// 004 - Setup 20// 005 - Animation 21// 006 - Operations 22// 007 - API 23// 008 - User Input 24 25;(function($) { 26 27 $.slidebars = function(options) { 28 29 // ---------------------- 30 // 001 - Default Settings 31 32 var settings = $.extend({ 33 siteClose: true, // true or false - Enable closing of Slidebars by clicking on #sb-site. 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 if (!$('#sb-site').length) $('body').children().wrapAll('<div id="sb-site" />'); // Check if content is wrapped with sb-site, wrap if it isn't. 71 var $site = $('#sb-site'); // Cache the selector. 72 if (!$site.parent().is('body')) $site.appendTo('body'); // Check its location and move if necessary. 73 74 // Left Slidebar 75 if ($('.sb-left').length) { // Check if the left Slidebar exists. 76 var $left = $('.sb-left'), // Cache the selector. 77 leftActive = false; // Used to check whether the left Slidebar is open or closed. 78 $left.addClass('sb-slidebar'); // Make sure the Slidebar has the base class. 79 if (!$left.parent().is('body')) $left.appendTo('body'); // Check its location and move if necessary. 80 } 81 82 // Right Slidebar 83 if ($('.sb-right').length) { // Check if the right Slidebar exists. 84 var $right = $('.sb-right'), // Cache the selector. 85 rightActive = false; // Used to check whether the right Slidebar is open or closed. 86 $right.addClass('sb-slidebar'); // Make sure the Slidebar has the base class. 87 if (!$right.parent().is('body')) $right.appendTo('body'); // Check its location and move if necessary. 88 } 89 90 var init = false, 91 windowWidth = $(window).width(), // Get width of window. 92 $controls = $('.sb-toggle-left, .sb-toggle-right, .sb-open-left, .sb-open-right, .sb-close'), // Cache the control classes. 93 $slide = $('.sb-slide'); // Cache users elements to animate. 94 95 // Initailise Slidebars 96 function initialise() { 97 if (!settings.disableOver || (typeof settings.disableOver === 'number' && settings.disableOver >= windowWidth)) { // False or larger than window size. 98 init = true; // true enabled Slidebars to open. 99 $('html').addClass('sb-init'); // Add helper class. 100 if (settings.hideControlClasses) $controls.removeClass('sb-hide'); // Remove class just incase Slidebars was originally disabled. 101 } else if (typeof settings.disableOver === 'number' && settings.disableOver < windowWidth) { // Less than window size. 102 init = false; // false stop Slidebars from opening. 103 $('html').removeClass('sb-init'); // Remove helper class. 104 if (settings.hideControlClasses) $controls.addClass('sb-hide'); // Hide controls 105 if (leftActive || rightActive) close(); // Close Slidebars if open. 106 } 107 } 108 initialise(); 109 110 // Inline CSS 111 function css() { 112 // Set minimum height. 113 //$site.css('minHeight', ''); // Reset minimum height. 114 //$site.css('minHeight', $('body').height() + 'px'); // Set minimum height of the site to the minimum height of the body. 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 // Custom Slidebar Widths 121 if ($left && $left.hasClass('sb-width-custom')) $left.css('width', $left.attr('data-sb-width')); // Set user custom width. 122 if ($right && $right.hasClass('sb-width-custom')) $right.css('width', $right.attr('data-sb-width')); // Set user custom width. 123 } 124 css(); 125 126 // Resize Functions 127 $(window).resize(function() { 128 var resizedWindowWidth = $(window).width();
128 // Get resized window width. 129 if (windowWidth !== resizedWindowWidth) { // 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 css(); // Reset minimum heights and negative margins. 133 if (leftActive) open('left'); // If left Slidebar is open, calling open will ensure it is the correct size. 134 if (rightActive) open('right'); // If right Slidebar is open, calling open will ensure it is the correct size. 135 } 136 }); 137 // I may include a height check along side a width check here in future. 138 139 // --------------- 140 // 005 - Animation 141 142 var animation; // Animation type. 143 144 // Set Animation Type 145 if (supportTransition && supportTransform) { // Browser supports css transitions and transforms. 146 animation = 'translate'; // Translate for browsers that support it. 147 if (android && android < 4.4) animation = 'side'; // Android supports both, but can't translate any fixed positions, so use left instead. 148 } else { 149 animation = 'jQuery'; // Browsers that don't support css transitions and transitions. 150 } 151 152 // Animate Mixin 153 function animate(object, amount, side) { 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 selector.css('transform', 'translate(' + amount + ')'); 168 169 } else if (animation === 'side') { 170 if (amount[0] === '-') amount = amount.substr(1); // Remove the '-' from the passed amount for side animations. 171 selector.css(side, amount); 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 $('.form-control').focus(); 214 $(this).val(""); 215 setTimeout(function() { rightActive = true; }, 400); // Set active variables. 216 } 217 } 218 } 219 220 // Close either Slidebar 221 function close(link) { 222 if (leftActive || rightActive) { // If a Slidebar is open. 223 if (leftActive) { 224 animate($left, '0px', 'left'); // Animation 225 leftActive = false; 226 } 227 if (rightActive) { 228 animate($right, '0px', 'right'); // Animation 229 rightActive = false; 230 } 231 232 setTimeout(function() { // Wait for closing animation to finish. 233 $('html').removeClass('sb-active sb-active-left sb-active-right'); // Remove active classes. 234 if ($left) $left.removeClass('sb-active'); 235 if ($right) $right.removeClass('sb-active'); 236 if (link) window.location = link; // If a link has been passed to the function, go to it. 237 }, 400); 238 } 239 } 240 241 // Toggle either Slidebar 242 function toggle(side) { 243 if (side === 'left' && $left) { // If left Slidebar is called and in use. 244 if (!leftActive) { 245 open('left'); // Slidebar is closed, open it. 246 } else { 247 close(); // Slidebar is open, close it. 248 } 249 } 250 if (side === 'right' && $right) { // If right Slidebar is called and in use. 251 if (!rightActive) { 252 open('right'); // Slidebar is closed, open it. 253 } else { 254 close(); // Slidebar is open, close it. 255 } 256 } 257 } 258 259 // --------- 260 // 007 - API 261 262 this.open = open; // Maps user variable name to the open method. 263 this.close = close; // Maps user variable name to the close method. 264 this.toggle = toggle; // Maps user variable name to the toggle method. 265 this.init = function() { // Returns true or false whether Slidebars are running or not. 266 return init; 267 }; 268 this.active = function(side) { // Returns true or false whether Slidebar is open or closed. 269 if (side === 'left' && $left) return leftActive; 270 if (side === 'right' && $right) return rightActive; 271 }; 272 273 // ---------------- 274 // 008 - User Input 275 276 function eventHandler(event, selector) { 277 event.stopPropagation(); // Stop event bubbling. 278 event.preventDefault(); // Prevent default behaviour 279 if (event.type === 'touchend') selector.off('click'); // If event type was touch turn off clicks to prevent phantom clicks. 280 } 281 282 // Toggle Left Slidebar 283 $('.sb-toggle-left').on('touchend click', function(event) { 284 eventHandler(event, $(this)); // Handle the event. 285 toggle('left'); // Toggle the left Slidbar. 286 }); 287 288 // Toggle Right Slidebar 289 $('.sb-toggle-right').on('touchend click', function(event) { 290 eventHandler(event, $(this)); // Handle the event. 291 toggle('right'); // Toggle the right Slidbar. 292 }); 293 294 // Open Left Slidebar 295 $('.sb-open-left').on('touchend click', function(event) { 296 eventHandler(event, $(this)); // Handle the event. 297 open('left'); // Open the left Slidebar. 298 }); 299 300 // Open Right Slidebar 301 $('.sb-open-right').on('touchend click', function(event) { 302 eventHandler(event, $(this)); // Handle the event. 303 open('right'); // Open the right Slidebar. 304 }); 305 306 // Close a Slidebar 307 $('.sb-close').on('touchend click', function(event) { 308 eventHandler(event, $(this)); // Handle the event. 309 close(); // Close either Slidebar. 310 }); 311 312 // Close Slidebar via Link 313 $('.sb-slidebar a').not('.sb-disable-close').on('click', function(event) { 314 eventHandler(event, $(this)); // Handle the event. 315 close( $(this).attr('href') ); // Close the Slidebar and pass link. 316 }); 317 318 // Close Slidebar via Site 319 $site.on('touchend click', function(event) { 320 if (settings.siteClose && (leftActive || rightActive)) { // If settings permit closing by site and left or right Slidebar is open. 321 eventHandler(event, $(this)); // Handle the event. 322 close(); // Close it. 323 } 324 }); 325 326 }; // End slidebars function. 327 328}) (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.