From 15a0e9b86e69ac444d659c116b18768d53e0d57e Mon Sep 17 00:00:00 2001
From: Vincent Nivoliers <vincent.nivoliers@univ-lyon1.fr>
Date: Thu, 27 Oct 2016 12:29:37 +0200
Subject: [PATCH] foldable program and map

---
 css/style.css          |  8 +++-----
 explorer.php           | 19 +++++++++++++++----
 js/bootstrap-native.js | 21 ++++++++++++++++++---
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/css/style.css b/css/style.css
index 68896e7..45077ae 100644
--- a/css/style.css
+++ b/css/style.css
@@ -488,18 +488,16 @@ body {
   border-bottom : 15px solid #ddd ;
 }
 
-.pgm > ul {
-  min-height : 2em ;
-}
-
 #pgm {
-  min-height : 39em ;
   text-align : center ;
   box-sizing : content-box ;
 }
 
 #pgm-main {
   text-align : left ;
+}
+
+#pgm-main.in {
   min-height : 35em ;
 }
 
diff --git a/explorer.php b/explorer.php
index 0891043..d6789fe 100644
--- a/explorer.php
+++ b/explorer.php
@@ -490,8 +490,10 @@
                   <a class="panel-toggle collapsed" href="#draw-container" data-toggle="collapse">
                     <span class="glyphicon collapse-marker"></span>
                     Carte
+                    <!--
                     <span class="collapse-hint-open"><small>(cliquer pour ouvrir)</small></span>
                     <span class="collapse-hint-close"><small>(cliquer pour fermer)</small></span>
+                    -->
                   </a>
                 </h3>
                 <div class="btn-group pull-right" role="group">
@@ -609,7 +611,7 @@
                 ></a>
               </div>
               <!--}}}-->
-              <div class="tab-content panel-collapse no-top-border-lists">
+              <div class="tab-content panel-collapse collapse in no-top-border-lists" id="library-cmds">
                 <!--{{{ movement-->
                 <ul id="mv_cmds" class="list-group tab-pane fade library-group in active">
                   <li class="list-group-item pgm-command pgm-type-direction cmd-dir-up">
@@ -963,7 +965,16 @@
             <div class="panel panel-default pgm" id="pgm">
             <!--{{{ algorithm-->
               <div class="panel-heading">
-                <h3 class="panel-title pull-left" id="pgm-title">Programme</h3>
+                <h3 class="panel-title pull-left" id="pgm-title">
+                  <a class="panel-toggle" href="#pgm-main,#library-cmds,#phone-toolbar" data-toggle="collapse">
+                    <span class="glyphicon collapse-marker"></span>
+                    Programme
+                    <!--
+                    <span class="collapse-hint-open"><small>(cliquer pour ouvrir)</small></span>
+                    <span class="collapse-hint-close"><small>(cliquer pour fermer)</small></span>
+                    -->
+                  </a>
+                </h3>
                 <div class="btn-group pull-right" role="group">
                   <button 
                     class="btn btn-default" 
@@ -999,14 +1010,14 @@
                   </button>
                 </div>
               </div>
-              <ul class="list-group pgm-recv-void" id="pgm-main">
+              <ul class="list-group pgm-recv-void collapse in" id="pgm-main">
                 <li class="list-group-item pgm-command block-add no-sort hidden">
                   <span class="glyphicon glyphicon-plus"></span>
                 </li>
               </ul>
               <!--}}}-->
               <!--{{{ mobile toolbar-->
-              <div class="btn-toolbar hidden" role="toolbar" id="phone-toolbar">
+              <div class="btn-toolbar hidden collapse in" role="toolbar" id="phone-toolbar">
                 <div class="btn-group" role="group">
                   <button class="btn btn-default active" autofocus type="button" id="phone-tool-add">
                     <span class="glyphicon glyphicon-plus"></span>
diff --git a/js/bootstrap-native.js b/js/bootstrap-native.js
index 1e7d57c..05c4580 100644
--- a/js/bootstrap-native.js
+++ b/js/bootstrap-native.js
@@ -741,18 +741,22 @@
       this.toggle = function(e) {
         e.preventDefault();
 
-        if (!/\bin/.test(self.collapse.className)) {
+        if (!/\bin/.test(self.collapse[0].className)) {
           self.open();
         } else {
           self.close();
         }
       },
       this.close = function() {
-        self._close(self.collapse);
+        for(var i = 0; i < self.collapse.length; ++i) {
+          self._close(self.collapse[i]);
+        }
         self.addClass(self.btn,'collapsed');
       },
       this.open = function() {
-        self._open(self.collapse);
+        for(var i = 0; i < self.collapse.length; ++i) {
+          self._open(self.collapse[i]);
+        }
         self.removeClass(self.btn,'collapsed');
 
         if ( self.accordion !== null ) {
@@ -809,6 +813,16 @@
       this.addEvent = function() {
         this.btn.addEventListener('click', this.toggle, false);
       },
+      this.getTarget = function() {
+        var t = this.btn,
+          h = t.href && t.getAttribute('href'),
+          d = t.getAttribute('data-target') && ( t.getAttribute('data-target') ),
+          cl = h || d,
+          c = cl && document.querySelectorAll(cl);
+        console.log(c) ;
+        return c;
+      },
+      /*
       this.getTarget = function() {
         var t = this.btn,
           h = t.href && t.getAttribute('href').replace('#',''),
@@ -818,6 +832,7 @@
           c = id && document.getElementById(id) || cl && document.querySelector(cl);
         return c;
       },
+      */
 
       this.getClosest = function (el, s) { //el is the element and s the selector of the closest item to find
         // source http://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/
-- 
GitLab