1/** 2 * We handle several device classes based on browser width. 3 * 4 * - desktop: > __tablet_width__ (as set in style.ini) 5 * - mobile: 6 * - tablet <= __tablet_width__ 7 * - phone <= __phone_width__ 8 */ 9var device_class = ''; // not yet known 10var device_classes = 'desktop mobile tablet phone'; 11 12function tpl_dokuwiki_mobile(){ 13 14 // the z-index in mobile.css is (mis-)used purely for detecting the screen mode here 15 var screen_mode = jQuery('#screen__mode').css('z-index') + ''; 16 17 // determine our device pattern 18 // TODO: consider moving into dokuwiki core 19 switch (screen_mode) { 20 case '1': 21 if (device_class.match(/tablet/)) return; 22 device_class = 'mobile tablet'; 23 break; 24 case '2': 25 if (device_class.match(/phone/)) return; 26 device_class = 'mobile phone'; 27 break; 28 default: 29 if (device_class == 'desktop') return; 30 device_class = 'desktop'; 31 } 32 33 jQuery('html').removeClass(device_classes).addClass(device_class); 34 35 // handle some layout changes based on change in device 36 var $handle = jQuery('#dokuwiki__aside h3.toggle'); 37 var $toc = jQuery('#dw__toc h3'); 38 39 if (device_class == 'desktop') { 40 // reset for desktop mode 41 if($handle.length) { 42 $handle[0].setState(1); 43 $handle.hide(); 44 } 45 if($toc.length) { 46 $toc[0].setState(1); 47 } 48 } 49 if (device_class.match(/mobile/)){ 50 // toc and sidebar hiding 51 if($handle.length) { 52 $handle.show(); 53 $handle[0].setState(-1); 54 } 55 if($toc.length) { 56 $toc[0].setState(-1); 57 } 58 } 59} 60 61jQuery(function(){ 62 var resizeTimer; 63 dw_page.makeToggle('#dokuwiki__aside h3.toggle','#dokuwiki__aside div.content'); 64 65 tpl_dokuwiki_mobile(); 66 jQuery(window).on('resize', 67 function(){ 68 if (resizeTimer) clearTimeout(resizeTimer); 69 resizeTimer = setTimeout(tpl_dokuwiki_mobile,200); 70 } 71 ); 72 73 // increase sidebar length to match content (desktop mode only) 74 var sidebar_height = jQuery('.desktop #dokuwiki__aside').height(); 75 var pagetool_height = jQuery('.desktop #dokuwiki__pagetools ul:first').height(); 76 // pagetools div has no height; ul has a height 77 var content_min = Math.max(sidebar_height || 0, pagetool_height || 0); 78 79 var content_height = jQuery('#dokuwiki__content div.page').height(); 80 if(content_min && content_min > content_height) { 81 var $content = jQuery('#dokuwiki__content div.page'); 82 $content.css('min-height', content_min); 83 } 84 85 // blur when clicked 86 jQuery('#dokuwiki__pagetools div.tools>ul>li>a').on('click', function(){ 87 this.blur(); 88 }); 89}); 90