1/** 2 * We handle several device classes based on browser width. 3 * see http://twitter.github.com/bootstrap/scaffolding.html#responsive 4 * 5 * - desktop: 980+ 6 * - mobile: < 980 7 * - tablet 481 - 979 (ostensibly for tablets in portrait mode) 8 * - phone <= 480 9 */ 10var device_class = ''; // not yet known 11var device_classes = 'desktop mobile tablet phone'; 12 13function tpl_dokuwiki_mobile(){ 14 15 // the z-index in mobile.css is (mis-)used purely for detecting the screen mode here 16 var screen_mode = jQuery('#screen__mode').css('z-index'); 17 18 // determine our device pattern 19 // TODO: consider moving into dokuwiki core 20 switch (screen_mode) { 21 case '1': 22 if (device_class.match(/tablet/)) return; 23 device_class = 'mobile tablet'; 24 break; 25 case '2': 26 if (device_class.match(/phone/)) return; 27 device_class = 'mobile phone'; 28 break; 29 default: 30 if (device_class == 'desktop') return; 31 device_class = 'desktop'; 32 } 33 34 jQuery('html').removeClass(device_classes).addClass(device_class); 35 36 // handle some layout changes based on change in device 37 var $handle = jQuery('#dokuwiki__aside h3.toggle'); 38 var $toc = jQuery('#dw__toc h3'); 39 40 if (device_class == 'desktop') { 41 // reset for desktop mode 42 if($handle.length) { 43 $handle[0].setState(1); 44 $handle.hide(); 45 } 46 if($toc.length) { 47 $toc[0].setState(1); 48 } 49 } 50 if (device_class.match(/mobile/)){ 51 // toc and sidebar hiding 52 if($handle.length) { 53 $handle.show(); 54 $handle[0].setState(-1); 55 } 56 if($toc.length) { 57 $toc[0].setState(-1); 58 } 59 } 60} 61 62jQuery(function(){ 63 var resizeTimer; 64 dw_page.makeToggle('#dokuwiki__aside h3.toggle','#dokuwiki__aside div.content'); 65 66 tpl_dokuwiki_mobile(); 67 jQuery(window).bind('resize', 68 function(){ 69 if (resizeTimer) clearTimeout(resizeTimer); 70 resizeTimer = setTimeout(tpl_dokuwiki_mobile,200); 71 } 72 ); 73 74 // increase sidebar length to match content (desktop mode only) 75 var $sidebar = jQuery('.desktop #dokuwiki__aside'); 76 if($sidebar.length) { 77 var $content = jQuery('#dokuwiki__content div.page'); 78 $content.css('min-height', $sidebar.height()); 79 } 80}); 81