CSS based hidden instead of JS toggle

gturri · Aug 3, 2015 · fce2baf · fce2baf
1 parent ff3f5ce
commit fce2baf
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 104 deletions.
diff --git a/images/glyphicons-368-expand.png b/images/glyphicons-368-expand.png
diff --git a/images/glyphicons-369-collapse.png b/images/glyphicons-369-collapse.png
diff --git a/script.js b/script.js
@@ -5,76 +5,9 @@
  * @author     Guillaume Turri <guillaume.turri@gmail.com>
  *
  */
-
-
-/**
- * @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
@@ -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
@@ -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("<hidden")
 
         //Looking for the initial state
@@ -158,8 +168,7 @@ function render($mode, &$renderer, $data) {
 
           // "\n" are inside tags to avoid whitespaces in the DOM with FF
           $renderer->doc .= '<div class="hiddenGlobal '.$classEdit.'">';
-          $renderer->doc .= '<div class="hiddenOnHidden">'.$onHidden."</div>"; //text displayed when hidden
-          $renderer->doc .= '<div class="hiddenOnVisible">'.$onVisible."</div>"; //text displayed when expanded
+
 
           $renderer->doc .= '<div class="hiddenElements">';
           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 .= "</div>";
+          $renderer->doc .=   '<div class="hiddenOnHidden">'.$onHidden."</div>"; //text displayed when hidden
+          $renderer->doc .=   '<div class="hiddenOnVisible">'.$onVisible."</div>"; //text displayed when expanded
+          $renderer->doc .= '</div> <!-- .hiddenHead -->';
 
           $renderer->doc .= '<div class="hiddenBody">';
           break;