diff options
Diffstat (limited to 'lib')
| -rw-r--r-- | lib/tpl/dokuwiki/script.js | 38 |
1 files changed, 34 insertions, 4 deletions
diff --git a/lib/tpl/dokuwiki/script.js b/lib/tpl/dokuwiki/script.js index 5badb5859..069f2526f 100644 --- a/lib/tpl/dokuwiki/script.js +++ b/lib/tpl/dokuwiki/script.js @@ -1,9 +1,38 @@ +/** + * We handle several device classes based on browser width. + * see http://twitter.github.com/bootstrap/scaffolding.html#responsive + * + * - desktop: 980+ + * - mobile: < 980 + * - tablet 481 - 979 (ostensibly for tablets in portrait mode) + * - phone <= 480 + */ +var device_class = 'not yet known'; +var device_classes = 'desktop mobile tablet phone'; + function tpl_dokuwiki_mobile(){ - // check if we are in mobile or tablet mode be sure to adjust the number - // here when adjusting it in the css + + // determine our device pattern + // TODO: consider moving into dokuwiki core + var w = document.body.clientWidth; + if (w > 979) { + if (device_class == 'desktop') return; + device_class = 'desktop'; + } else if (w > 480) { + if (device_class.match(/tablet/)) return; + device_class = 'mobile tablet'; + } else { + if (device_class.match(/phone/)) return; + device_class = 'mobile phone'; + } + + jQuery('html').removeClass(device_classes).addClass(device_class); + + // handle some layout changes based on change in device var $handle = jQuery('#dokuwiki__aside h3.toggle'); var $toc = jQuery('#dw__toc h3'); - if(document.body.clientWidth > 979) { + + if (device_class == 'desktop') { // reset for desktop mode if($handle.length) { $handle[0].setState(1); @@ -12,7 +41,8 @@ function tpl_dokuwiki_mobile(){ if($toc.length) { $toc[0].setState(1); } - } else { + } + if (device_class.match(/mobile/)){ // toc and sidebar hiding if($handle.length) { $handle.show(); |