1/* 2 * Sidr 3 * https://github.com/artberri/sidr 4 * 5 * Copyright (c) 2013 Alberto Varela 6 * Licensed under the MIT license. 7 */ 8 9;(function( $ ){ 10 11 var sidrMoving = false, 12 sidrOpened = false; 13 14 // Private methods 15 var privateMethods = { 16 // Check for valids urls 17 // From : http://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-an-url 18 isUrl: function (str) { 19 var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol 20 '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name 21 '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address 22 '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path 23 '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string 24 '(\\#[-a-z\\d_]*)?$','i'); // fragment locator 25 if(!pattern.test(str)) { 26 return false; 27 } else { 28 return true; 29 } 30 }, 31 // Loads the content into the menu bar 32 loadContent: function($menu, content) { 33 $menu.html(content); 34 }, 35 // Add sidr prefixes 36 addPrefix: function($element) { 37 var elementId = $element.attr('id'), 38 elementClass = $element.attr('class'); 39 40 if(typeof elementId === 'string' && '' !== elementId) { 41 $element.attr('id', elementId.replace(/([A-Za-z0-9_.\-]+)/g, 'sidr-id-$1')); 42 } 43 if(typeof elementClass === 'string' && '' !== elementClass && 'sidr-inner' !== elementClass) { 44 $element.attr('class', elementClass.replace(/([A-Za-z0-9_.\-]+)/g, 'sidr-class-$1')); 45 } 46 $element.removeAttr('style'); 47 }, 48 execute: function(action, name, callback) { 49 // Check arguments 50 if(typeof name === 'function') { 51 callback = name; 52 name = 'sidr'; 53 } 54 else if(!name) { 55 name = 'sidr'; 56 } 57 58 // Declaring 59 var $menu = $('#' + name), 60 $body = $($menu.data('body')), 61 $html = $('html'), 62 menuWidth = $menu.outerWidth(true), 63 speed = $menu.data('speed'), 64 side = $menu.data('side'), 65 displace = $menu.data('displace'), 66 onOpen = $menu.data('onOpen'), 67 onClose = $menu.data('onClose'), 68 bodyAnimation, 69 menuAnimation, 70 scrollTop, 71 bodyClass = (name === 'sidr' ? 'sidr-open' : 'sidr-open ' + name + '-open'); 72 73 // Open Sidr 74 if('open' === action || ('toggle' === action && !$menu.is(':visible'))) { 75 // Check if we can open it 76 if( $menu.is(':visible') || sidrMoving ) { 77 return; 78 } 79 80 // If another menu opened close first 81 if(sidrOpened !== false) { 82 methods.close(sidrOpened, function() { 83 methods.open(name); 84 }); 85 86 return; 87 } 88 89 // Lock sidr 90 sidrMoving = true; 91 92 // Left or right? 93 if(side === 'left') { 94 bodyAnimation = {left: menuWidth + 'px'}; 95 menuAnimation = {left: '0px'}; 96 } 97 else { 98 bodyAnimation = {right: menuWidth + 'px'}; 99 menuAnimation = {right: '0px'}; 100 } 101 102 // Prepare page if container is body 103 if($body.is('body')){ 104 scrollTop = $html.scrollTop(); 105 $html.css('overflow-x', 'hidden').scrollTop(scrollTop); 106 } 107 108 // Open menu 109 if(displace){ 110 $body.addClass('sidr-animating').css({ 111 width: $body.width(), 112 position: 'absolute' 113 }).animate(bodyAnimation, speed, function() { 114 $(this).addClass(bodyClass); 115 }); 116 } 117 else { 118 setTimeout(function() { 119 $(this).addClass(bodyClass); 120 }, speed); 121 } 122 $menu.css('display', 'block').animate(menuAnimation, speed, function() { 123 sidrMoving = false; 124 sidrOpened = name; 125 // Callback 126 if(typeof callback === 'function') { 127 callback(name); 128 } 129 $body.removeClass('sidr-animating'); 130 }); 131 132 // onOpen callback 133 onOpen(); 134 } 135 // Close Sidr 136 else { 137 // Check if we can close it 138 if( !$menu.is(':visible') || sidrMoving ) { 139 return; 140 } 141 142 // Lock sidr 143 sidrMoving = true; 144 145 // Right or left menu? 146 if(side === 'left') { 147 bodyAnimation = {left: 0}; 148 menuAnimation = {left: '-' + menuWidth + 'px'}; 149 } 150 else { 151 bodyAnimation = {right: 0}; 152 menuAnimation = {right: '-' + menuWidth + 'px'}; 153 } 154 155 // Close menu 156 if($body.is('body')){ 157 scrollTop = $html.scrollTop(); 158 $html.removeAttr('style').scrollTop(scrollTop); 159 } 160 $body.addClass('sidr-animating').animate(bodyAnimation, speed).removeClass(bodyClass); 161 $menu.animate(menuAnimation, speed, function() { 162 $menu.removeAttr('style').hide(); 163 $body.removeAttr('style'); 164 $('html').removeAttr('style'); 165 sidrMoving = false; 166 sidrOpened = false; 167 // Callback 168 if(typeof callback === 'function') { 169 callback(name); 170 } 171 $body.removeClass('sidr-animating'); 172 }); 173 174 // onClose callback 175 onClose(); 176 } 177 } 178 }; 179 180 // Sidr public methods 181 var methods = { 182 open: function(name, callback) { 183 privateMethods.execute('open', name, callback); 184 }, 185 close: function(name, callback) { 186 privateMethods.execute('close', name, callback); 187 }, 188 toggle: function(name, callback) { 189 privateMethods.execute('toggle', name, callback); 190 }, 191 // I made a typo, so I mantain this method to keep backward compatibilty with 1.1.1v and previous 192 toogle: function(name, callback) { 193 privateMethods.execute('toggle', name, callback); 194 } 195 }; 196 197 $.sidr = function( method ) { 198 199 if ( methods[method] ) { 200 return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); 201 } 202 else if ( typeof method === 'function' || typeof method === 'string' || ! method ) { 203 return methods.toggle.apply( this, arguments ); 204 } 205 else { 206 $.error( 'Method ' + method + ' does not exist on jQuery.sidr' ); 207 } 208 209 }; 210 211 $.fn.sidr = function( options ) { 212 213 var settings = $.extend( { 214 name : 'sidr', // Name for the 'sidr' 215 speed : 200, // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds) 216 side : 'left', // Accepts 'left' or 'right' 217 source : null, // Override the source of the content. 218 renaming : true, // The ids and classes will be prepended with a prefix when loading existent content 219 body : 'body', // Page container selector, 220 displace: true, // Displace the body content or not 221 onOpen : function() {}, // Callback when sidr opened 222 onClose : function() {} // Callback when sidr closed 223 }, options); 224 225 var name = settings.name, 226 $sideMenu = $('#' + name); 227 228 // If the side menu do not exist create it 229 if( $sideMenu.length === 0 ) { 230 $sideMenu = $('<div />') 231 .attr('id', name) 232 .appendTo($('body')); 233 } 234 235 // Adding styles and options 236 $sideMenu 237 .addClass('sidr') 238 .addClass(settings.side) 239 .data({ 240 speed : settings.speed, 241 side : settings.side, 242 body : settings.body, 243 displace : settings.displace, 244 onOpen : settings.onOpen, 245 onClose : settings.onClose 246 }); 247 248 // The menu content 249 if(typeof settings.source === 'function') { 250 var newContent = settings.source(name); 251 privateMethods.loadContent($sideMenu, newContent); 252 } 253 else if(typeof settings.source === 'string' && privateMethods.isUrl(settings.source)) { 254 $.get(settings.source, function(data) { 255 privateMethods.loadContent($sideMenu, data); 256 }); 257 } 258 else if(typeof settings.source === 'string') { 259 var htmlContent = '', 260 selectors = settings.source.split(','); 261 262 $.each(selectors, function(index, element) { 263 htmlContent += '<div class="sidr-inner">' + $(element).html() + '</div>'; 264 }); 265 266 // Renaming ids and classes 267 if(settings.renaming) { 268 var $htmlContent = $('<div />').html(htmlContent); 269 $htmlContent.find('*').each(function(index, element) { 270 var $element = $(element); 271 privateMethods.addPrefix($element); 272 }); 273 htmlContent = $htmlContent.html(); 274 } 275 privateMethods.loadContent($sideMenu, htmlContent); 276 } 277 else if(settings.source !== null) { 278 $.error('Invalid Sidr Source'); 279 } 280 281 return this.each(function(){ 282 var $this = $(this), 283 data = $this.data('sidr'); 284 285 // If the plugin hasn't been initialized yet 286 if ( ! data ) { 287 288 $this.data('sidr', name); 289 if('ontouchstart' in document.documentElement) { 290 $this.bind('touchstart', function(e) { 291 var theEvent = e.originalEvent.touches[0]; 292 this.touched = e.timeStamp; 293 }); 294 $this.bind('touchend', function(e) { 295 var delta = Math.abs(e.timeStamp - this.touched); 296 if(delta < 200) { 297 e.preventDefault(); 298 methods.toggle(name); 299 } 300 }); 301 } 302 else { 303 $this.click(function(e) { 304 e.preventDefault(); 305 methods.toggle(name); 306 }); 307 } 308 } 309 }); 310 }; 311 312})( jQuery ); 313 314/* Initiating Sidr */ 315jQuery(document).ready(function($) { 316 $('#m1-menu-ltrig').sidr({ 317 name: 'm1-menu-left', 318 side: 'left', // By default 319 onClose: function(){$("#dokuwiki__header").css( "left", "0" );}, 320 onOpen: function(){$("#dokuwiki__header").css( "left", "260px" );} 321 }); 322 $('#m1-menu-rtrig').sidr({ 323 name: 'm1-menu-right', 324 side: 'right', 325 onClose: function(){$("#dokuwiki__header").css( "left", "0" );}, 326 onOpen: function(){$("#dokuwiki__header").css( "left", "-260px");} 327 }); 328 329/*Setting up search box to hide/appear on click */ 330 $("#m1-search").hide(); 331 $("#m1-menu-strig").click(function(){ 332 $("#m1-search").slideToggle(); 333 }); 334 335}); 336 337 338