From 5dcb125169a39581162871578f00a8da6c7c10dd Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Fri, 20 Apr 2012 18:18:41 +0200 Subject: collapse sidebar in mobile view FS#2473 --- lib/tpl/dokuwiki/script.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 lib/tpl/dokuwiki/script.js (limited to 'lib/tpl/dokuwiki/script.js') diff --git a/lib/tpl/dokuwiki/script.js b/lib/tpl/dokuwiki/script.js new file mode 100644 index 000000000..dd9c17561 --- /dev/null +++ b/lib/tpl/dokuwiki/script.js @@ -0,0 +1,9 @@ +jQuery(function(){ + // check if we are in mobile mode + if(jQuery('div.mobileTools').css('display') == 'none') return; + + // toc and sidebar hiding + dw_page.makeToggle('#dokuwiki__aside h3.aside','#dokuwiki__aside div.aside'); + jQuery('#dw__toc > h3').click(); + jQuery('#dokuwiki__aside h3.aside').removeClass('a11y').click(); +}); -- cgit v1.2.3 From 48722ac855c79944285cbe8958fe5ed03bd835ed Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Sun, 22 Apr 2012 21:19:59 +0100 Subject: improved toc changes and sidebar toggling --- lib/tpl/dokuwiki/script.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'lib/tpl/dokuwiki/script.js') diff --git a/lib/tpl/dokuwiki/script.js b/lib/tpl/dokuwiki/script.js index dd9c17561..b31d3dc08 100644 --- a/lib/tpl/dokuwiki/script.js +++ b/lib/tpl/dokuwiki/script.js @@ -3,7 +3,8 @@ jQuery(function(){ if(jQuery('div.mobileTools').css('display') == 'none') return; // toc and sidebar hiding - dw_page.makeToggle('#dokuwiki__aside h3.aside','#dokuwiki__aside div.aside'); - jQuery('#dw__toc > h3').click(); - jQuery('#dokuwiki__aside h3.aside').removeClass('a11y').click(); + dw_page.makeToggle('#dokuwiki__aside h3.toggle','#dokuwiki__aside div.content'); + + jQuery('#dw__toc h3.toggle').click(); + jQuery('#dokuwiki__aside h3.toggle').show().click(); }); -- cgit v1.2.3 From ef7e36e4fd2a168977754f0aac1d855fb651f104 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Fri, 29 Jun 2012 18:27:23 +0200 Subject: make mobile javascript work correctly on orientation change --- lib/tpl/dokuwiki/script.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'lib/tpl/dokuwiki/script.js') diff --git a/lib/tpl/dokuwiki/script.js b/lib/tpl/dokuwiki/script.js index b31d3dc08..75575608b 100644 --- a/lib/tpl/dokuwiki/script.js +++ b/lib/tpl/dokuwiki/script.js @@ -1,10 +1,14 @@ -jQuery(function(){ - // check if we are in mobile mode - if(jQuery('div.mobileTools').css('display') == 'none') return; +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 + if(document.body.clientWidth > 979) return; // toc and sidebar hiding dw_page.makeToggle('#dokuwiki__aside h3.toggle','#dokuwiki__aside div.content'); jQuery('#dw__toc h3.toggle').click(); jQuery('#dokuwiki__aside h3.toggle').show().click(); -}); +} + +jQuery(tpl_dokuwiki_mobile); +jQuery(window).bind('resize',tpl_dokuwiki_mobile); -- cgit v1.2.3 From 688c5219ce1f6bf1dbda6e733bec881baaa24025 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Sat, 30 Jun 2012 12:03:59 +0200 Subject: fixed the toc/sidebar toggling script for real --- lib/tpl/dokuwiki/script.js | 34 ++++++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 8 deletions(-) (limited to 'lib/tpl/dokuwiki/script.js') diff --git a/lib/tpl/dokuwiki/script.js b/lib/tpl/dokuwiki/script.js index 75575608b..d32cf5cff 100644 --- a/lib/tpl/dokuwiki/script.js +++ b/lib/tpl/dokuwiki/script.js @@ -1,14 +1,32 @@ 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 - if(document.body.clientWidth > 979) return; + var $handle = jQuery('#dokuwiki__aside h3.toggle'); + var $toc = jQuery('#dw__toc h3'); + if(document.body.clientWidth > 979) { + console.log('desktop'); + // reset for desktop mode + $handle[0].setState(1); + $handle.hide(); + $toc[0].setState(1); + } else { + console.log('mobile'); + // toc and sidebar hiding + $handle.show(); + $handle[0].setState(-1); + $toc[0].setState(-1); + } +} - // toc and sidebar hiding +jQuery(function(){ + var resizeTimer; dw_page.makeToggle('#dokuwiki__aside h3.toggle','#dokuwiki__aside div.content'); - jQuery('#dw__toc h3.toggle').click(); - jQuery('#dokuwiki__aside h3.toggle').show().click(); -} - -jQuery(tpl_dokuwiki_mobile); -jQuery(window).bind('resize',tpl_dokuwiki_mobile); + tpl_dokuwiki_mobile(); + jQuery(window).bind('resize', + function(){ + if (resizeTimer) clearTimeout(resizeTimer); + resizeTimer = setTimeout(tpl_dokuwiki_mobile,200); + } + ); +}); -- cgit v1.2.3 From e6889ecc099960ca66204d9eab8e4c6ccf0d89bc Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Sat, 30 Jun 2012 13:22:51 +0200 Subject: removed debugging and check for TOC/sidebar exisance --- lib/tpl/dokuwiki/script.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) (limited to 'lib/tpl/dokuwiki/script.js') diff --git a/lib/tpl/dokuwiki/script.js b/lib/tpl/dokuwiki/script.js index d32cf5cff..5badb5859 100644 --- a/lib/tpl/dokuwiki/script.js +++ b/lib/tpl/dokuwiki/script.js @@ -4,17 +4,23 @@ function tpl_dokuwiki_mobile(){ var $handle = jQuery('#dokuwiki__aside h3.toggle'); var $toc = jQuery('#dw__toc h3'); if(document.body.clientWidth > 979) { - console.log('desktop'); // reset for desktop mode - $handle[0].setState(1); - $handle.hide(); - $toc[0].setState(1); + if($handle.length) { + $handle[0].setState(1); + $handle.hide(); + } + if($toc.length) { + $toc[0].setState(1); + } } else { - console.log('mobile'); // toc and sidebar hiding - $handle.show(); - $handle[0].setState(-1); - $toc[0].setState(-1); + if($handle.length) { + $handle.show(); + $handle[0].setState(-1); + } + if($toc.length) { + $toc[0].setState(-1); + } } } -- cgit v1.2.3 From 2329bcd3221cf684db3352d71182139b7d9e5281 Mon Sep 17 00:00:00 2001 From: Christopher Smith Date: Sat, 30 Jun 2012 14:51:49 +0100 Subject: separate determination of device class & set as an html class on , only attempt layout changes with device class changes --- lib/tpl/dokuwiki/script.js | 38 ++++++++++++++++++++++++++++++++++---- 1 file changed, 34 insertions(+), 4 deletions(-) (limited to 'lib/tpl/dokuwiki/script.js') 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(); -- cgit v1.2.3 From 3f7dd17379d124acdcf7131ba77716d87360cda8 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Sat, 30 Jun 2012 15:58:32 +0200 Subject: make sure content column is at least as long as sidebar --- lib/tpl/dokuwiki/script.js | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'lib/tpl/dokuwiki/script.js') diff --git a/lib/tpl/dokuwiki/script.js b/lib/tpl/dokuwiki/script.js index 069f2526f..677e2f53b 100644 --- a/lib/tpl/dokuwiki/script.js +++ b/lib/tpl/dokuwiki/script.js @@ -65,4 +65,11 @@ jQuery(function(){ resizeTimer = setTimeout(tpl_dokuwiki_mobile,200); } ); + + // increase sidebar length to match content (desktop mode only) + var $sb = jQuery('.desktop #dokuwiki__aside'); + if($sb.length) { + var $ct = jQuery('#dokuwiki__content div.page'); + if($sb.height() > $ct.height()) $ct.height($sb.height()); + } }); -- cgit v1.2.3 From 9f6d88deb91f2a191f2d1ef5c10ce42afead458f Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Sun, 1 Jul 2012 14:05:20 +0100 Subject: changed 'height' in JS to 'min-height' --- lib/tpl/dokuwiki/script.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'lib/tpl/dokuwiki/script.js') diff --git a/lib/tpl/dokuwiki/script.js b/lib/tpl/dokuwiki/script.js index 677e2f53b..d858bda89 100644 --- a/lib/tpl/dokuwiki/script.js +++ b/lib/tpl/dokuwiki/script.js @@ -7,7 +7,7 @@ * - tablet 481 - 979 (ostensibly for tablets in portrait mode) * - phone <= 480 */ -var device_class = 'not yet known'; +var device_class = ''; // not yet known var device_classes = 'desktop mobile tablet phone'; function tpl_dokuwiki_mobile(){ @@ -67,9 +67,9 @@ jQuery(function(){ ); // increase sidebar length to match content (desktop mode only) - var $sb = jQuery('.desktop #dokuwiki__aside'); - if($sb.length) { - var $ct = jQuery('#dokuwiki__content div.page'); - if($sb.height() > $ct.height()) $ct.height($sb.height()); + var $sidebar = jQuery('.desktop #dokuwiki__aside'); + if($sidebar.length) { + var $content = jQuery('#dokuwiki__content div.page'); + $content.css('min-height', $sidebar.height()); } }); -- cgit v1.2.3