From fce2bafe4d94f22395143b27c4849cd7b9a3f3a5 Mon Sep 17 00:00:00 2001 From: Algorys Date: Mon, 3 Aug 2015 15:37:52 +0200 Subject: [PATCH] CSS based hidden instead of JS toggle --- images/glyphicons-368-expand.png | Bin 0 -> 257 bytes images/glyphicons-369-collapse.png | Bin 0 -> 255 bytes script.js | 79 +++-------------------------- style.css | 44 ++++++++-------- syntax.php | 24 ++++++--- 5 files changed, 43 insertions(+), 104 deletions(-) create mode 100644 images/glyphicons-368-expand.png create mode 100644 images/glyphicons-369-collapse.png diff --git a/images/glyphicons-368-expand.png b/images/glyphicons-368-expand.png new file mode 100644 index 0000000000000000000000000000000000000000..447fb709f810339f6580c088389b774cbe5b8a1b GIT binary patch literal 257 zcmeAS@N?(olHy`uVBq!ia0vp^!XV7S1|*9D%+3HQ$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1Gi#=T&Ln>~anR1)+fC7)}WWNU-eHQ{{RxY-fm3M*nlFOEk zA1fZYGmE=UKJ2>K!R0_=M4v17Br9P{Mi*(7IoBtO{#vs{&+>@HMBbL84o41HBqaY4 zXM1VZi+wS`M2$s)5dB@O1TaS?83{ F1OOnrWzhft literal 0 HcmV?d00001 diff --git a/images/glyphicons-369-collapse.png b/images/glyphicons-369-collapse.png new file mode 100644 index 0000000000000000000000000000000000000000..e19190335d05369b9aafdd689c6a93bbe44284cb GIT binary patch literal 255 zcmeAS@N?(olHy`uVBq!ia0vp^!XV7S1|*9D%+3HQ$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1G3q4&NLn>~anR1c0L4n65TD^c-_F$mQL_wLxzyxOV6}mx> z+1ZZN-FPA-^f2-rgM!k7sK`cF*-53@&r}2?JuJfA{a)m&zTV<|hWTg1g~*N>63i0U z0)8eZR9?HowWN5utNoQbvBIm*WH+rm^5!DfvgcWvXJ2zBTr&Qu)zIFx=B+owvUxL? zXr@(Pi`f~}`SJa05#zh1Wl!@orT3*z(|@aYfZ^fCTz@~iH)ny4W$<+Mb6Mw<&;$UK CL}P#e literal 0 HcmV?d00001 diff --git a/script.js b/script.js index 326a191..a0ba2ab 100755 --- a/script.js +++ b/script.js @@ -5,76 +5,9 @@ * @author Guillaume Turri * */ - - -/** - * @param elem The structure to display/hide - * @param forceHide FALSE to flip, TRUE to hide unconditionnaly - */ -function plugin_hidden_flip(elem, forceHide){ - var parent = jQuery(elem.parentNode); - var onHiddenText = parent.children('div.hiddenOnHidden')[0].innerHTML; - var onVisibleText = parent.children('div.hiddenOnVisible')[0].innerHTML; - var head = parent.children('div.hiddenHead')[0]; - var body = parent.children('div.hiddenBody')[0]; - - if (body.style.display !== "none" || forceHide){ - jQuery(body).hide(); - head.innerHTML = onHiddenText; - } else { - jQuery(body).show(); - head.innerHTML = onVisibleText; - } -} - -/** - * The plugin will hide text only if javascript is enabled (else, it wouldn't be possible to display it) - */ -function installPluginHiddenJS(){ - jQuery(".hiddenActive").each(function(){ - jQuery(this).click(function(){plugin_hidden_flip(this, false)}); - }); - - jQuery(".hiddenSinceBeginning").each(function(){ - plugin_hidden_flip(this, true); - }); - - jQuery(".hiddenSwitch").each(function(){ - jQuery(this).click(function(){plugin_hidden_flipAll()}); - }); -} - -/** - * Check if at least one element is currently hidden - */ -function plugin_hidden_atLeastOneHidden(){ - var result = false; - jQuery(".hiddenActive").each(function(){ - if ( plugin_hidden_isHidden(this) ){ - result = true; - } - }); - - return result; -} - -/** - * Check if a given element is hidden - */ -function plugin_hidden_isHidden(elem){ - return jQuery(elem.parentNode).children('div.hiddenBody')[0].style.display === "none"; -} - -/** - * Swap the state of every element - */ -function plugin_hidden_flipAll(){ - var weShallDisplay = plugin_hidden_atLeastOneHidden(); - jQuery(".hiddenActive").each(function(){ - if ( weShallDisplay == plugin_hidden_isHidden(this) ){ - plugin_hidden_flip(this, false); - } - }); -} - -jQuery(function(){installPluginHiddenJS();}); +jQuery(function(){ + jQuery(".hiddenSinceBeginning").parent().addClass('hiddenHidden'); + jQuery(".hiddenHead").on('click', function(){ + jQuery(this).parent().toggleClass('hiddenHidden'); + }); +}); diff --git a/style.css b/style.css index 2884eab..c8a272b 100755 --- a/style.css +++ b/style.css @@ -6,40 +6,36 @@ * */ -.hiddenHead{ - background-color:__background_alt__; +div.hiddenGlobal { + border: 1px gray dotted; + padding: 0.7em; } -.hiddenBody{ - border-top:1px solid __border__; - padding:1px; +div.hiddenOnVisible, +div.hiddenOnHidden { + display: inline; + color: blue; } -.hiddenBody p { - margin: 0; +div.hiddenHead:hover { + cursor: pointer; + text-decoration: underline; } - -.hiddenGlobal{ - border:1px solid __border__; - margin: 0 0 1.4em; -} - -.hiddenActive{ - cursor:pointer; +div.hiddenGlobal:not(.hiddenHidden)>div.hiddenHead p:after { + content: url('images/glyphicons-368-expand.png'); } -.hiddenOnHidden{ - display:none; +div.hiddenGlobal.hiddenHidden>div.hiddenHead p:after { + content: url('images/glyphicons-369-collapse.png'); } - -.hiddenOnVisible{ - display:none; +div.hiddenGlobal.hiddenHidden>div.hiddenHead>div.hiddenOnVisible { + display: none; } -.hiddenElements{ - display:none; +div.hiddenGlobal:not(.hiddenHidden)>div.hiddenHead>div.hiddenOnHidden { + display: none; } -div.hiddenGlobal div.hiddenHead p{ - margin:0; +div.hiddenGlobal.hiddenHidden>div.hiddenBody { + display: none; } diff --git a/syntax.php b/syntax.php index 821f157..3aed2cb 100644 --- a/syntax.php +++ b/syntax.php @@ -44,9 +44,19 @@ function postConnect() { function handle($match, $state, $pos, &$handler) { switch ($state) { case DOKU_LEXER_ENTER : - $return = array('active' => 'true', 'element'=>Array(), 'onHidden'=>'', 'onVisible'=>'', - 'initialState'=>'hidden', 'state'=>$state, 'printHead' => true, 'bytepos_start' => $pos, - 'edit' => false, 'editText' => $this->getLang('edit'), 'onExportPdf' => ''); + $return = array( + 'active' => 'true', + 'element'=>Array(), + 'onHidden'=>'', + 'onVisible'=>'', + 'initialState'=>'hidden', + 'state'=>$state, + 'printHead' => true, + 'bytepos_start' => $pos, + 'edit' => false, + 'editText' => $this->getLang('edit'), + 'onExportPdf' => '' + ); $match = substr($match, 7, -1); //7 = strlen("doc .= '
'; - $renderer->doc .= '
'.$onHidden."
"; //text displayed when hidden - $renderer->doc .= '
'.$onVisible."
"; //text displayed when expanded + $renderer->doc .= '
'; foreach($data['element'] as $element){ @@ -172,8 +181,9 @@ function render($mode, &$renderer, $data) { $renderer->doc .= $data['active'] ? ' hiddenActive' : ''; $renderer->doc .= ($data['initialState'] == 'hidden') ? ' hiddenSinceBeginning' : ''; $renderer->doc .= '">'; - $renderer->doc .= $onVisible; - $renderer->doc .= "
"; + $renderer->doc .= '
'.$onHidden."
"; //text displayed when hidden + $renderer->doc .= '
'.$onVisible."
"; //text displayed when expanded + $renderer->doc .= '
'; $renderer->doc .= '
'; break;