2017: Add 'Expand All' in /program.

* 2017/assets/css/custom.css: Update file.
* 2017/includes/program_js.html: Update file
* 2017/program/index.html: Update file.

diff --git a/2017/assets/css/custom.css b/2017/assets/css/custom.css
index b2024ec8ebb29cb61fc9cd9ff235668467f54795..f7959ea19cac20773e29d4d1fdca59e7f7d2c634 100644 (file)
--- a/2017/assets/css/custom.css
+++ b/2017/assets/css/custom.css
@@ -357,6 +357,16 @@ hr {
   background-image: none;
 }
 
+.program-session-details-toggle-all {
+    margin-bottom: 25px;
+}
+
+.program-session-details-toggle-all button.fixed {
+    position: fixed;
+    top: 50px;
+    right: 20px;
+}
+
 /* Carousel */
 
 .btn-carousel {

diff --git a/2017/includes/program_js.html b/2017/includes/program_js.html
index 829ffe10661958bbc0cb115bbc3ddd6522815850..b17030eaa04bb78a78727121ead8dd0eca5f67e5 100755 (executable)
--- a/2017/includes/program_js.html
+++ b/2017/includes/program_js.html
@@ -1,13 +1,129 @@
+<!-- start html templates -->
+<script id="details-menu-up-glyph" type="text/x-generic-html-template">
+    <span class="glyphicon glyphicon-menu-up" style="margin-left: 5px;"
+          aria-hidden="true"></span>
+</script>
+<script id="details-menu-down-glyph" type="text/x-generic-html-template">
+    <span class="glyphicon glyphicon-menu-down"  style="margin-left: 5px;"
+          aria-hidden="true"></span>
+</script>
+<!-- end html templates -->
+
 <script>
-  $('.collapse').removeClass('in');
-
-  $('.program-session-room-details button').on('click', function() {
-      if($(this).text().trim() === 'Details') {
-          $(this).text('Collapse details');
-      }else{
-          $(this).text('Details');
-      }
-  });
+ $('.collapse').removeClass('in');
+
+ $(window).ready(function() {
+     init_toggle_all();
+
+     $('.session-desc')
+         .on('show.bs.collapse', function() {
+             var id = $(this).attr('id');
+             // find corresponding "Details"/"Collapse details" button.
+             var btn = $('[data-target="#'+ id + '"]');
+             var glyph = $('#details-menu-up-glyph').text();
+             $(btn).text('Collapse details');
+             $(glyph).appendTo(btn);
+         });
+
+     $('.session-desc')
+         .on('hide.bs.collapse', function() {
+             var id = $(this).attr('id');
+             // find corresponding "Details"/"Collapse details" button.
+             var btn = $('[data-target="#'+ id + '"]');
+             var glyph = $('#details-menu-down-glyph').text();
+             $(btn).text('Show details');
+             $(glyph).appendTo(btn);
+         });
+ });
+
+ $(window).resize(function() {
+     reinit_toggle_all();
+ });
+
+ $(window).scroll(function() {
+     position_toggle_all();
+ });
+
+ function init_toggle_all(reinit=false) {
+     var id = '.program-session-details-toggle-all button';
+     // on click init.
+     if (!reinit)
+         toggle_all_click_init();
+
+     // positioning.
+     window.toggle_all_pos = $(id).offset();
+     position_toggle_all();
+ }
+
+ function reinit_toggle_all() {
+     // make position static to know the real position of toggle all.
+     toggle_all_static();
+     init_toggle_all(true);
+ }
+
+ function toggle_all_fixed() {
+     $('.program-session-details-toggle-all button').addClass('fixed');
+ }
+
+ function toggle_all_static() {
+     $('.program-session-details-toggle-all button').removeClass('fixed');
+ }
+
+ function position_toggle_all() {
+     var toggle_all_btn = '.program-session-details-toggle-all button';
+     var t_pos = window.toggle_all_pos;
+     var w_top = $(window).scrollTop();
+
+     if(w_top > t_pos.top)
+         toggle_all_fixed();
+     else
+         toggle_all_static();
+
+ }
+
+ function toggle_all_click_init() {
+     var toggle_all_btn = '.program-session-details-toggle-all button';
+     var details_btn = '.program-session-room-details button';
+
+     // initially everything is collapsed.
+     window.toggle_all = {
+         'collapsed': true,
+         'clicked': false,
+     };
+
+     $(toggle_all_btn).click(function() {
+
+         if (window.toggle_all.collapsed) {
+             $('.collapse').collapse('show');
+             window.toggle_all.collapsed = false;
+         } else {
+             $('.collapse').collapse('hide');
+             window.toggle_all.collapsed = true;
+         }
+
+         // set toggle all clicked.
+         window.toggle_all.clicked = true;
+     });
+
+     $('.collapse').on('shown.bs.collapse', function() {
+         update_toggle_all_text('Collapse all');
+     });
+
+     $('.collapse').on('hidden.bs.collapse', function() {
+         update_toggle_all_text('Expand all');
+     });
+ }
+
+ function update_toggle_all_text(txt) {
+     var toggle_all_btn = '.program-session-details-toggle-all button';
+
+     // update text only when toggle all is clicked.
+     if (window.toggle_all.clicked)
+         $(toggle_all_btn).text(txt);
+
+     // reset toggle clicked
+     window.toggle_all.clicked = false;
+ }
 </script>
 
 <script type="text/javascript">

diff --git a/2017/program/index.html b/2017/program/index.html
index fac60b6a0997ad935439f94ff5357ab8c9fe2fd8..c13c8fdd1e8082b6ef2cb99b6c8cd56bf469e63f 100755 (executable)
--- a/2017/program/index.html
+++ b/2017/program/index.html
@@ -10,6 +10,10 @@
 
 <!--#include virtual="/2017/includes/program-menu.html"-->
 
+<div class="program-session-details-toggle-all">
+    <button class="btn btn-default btn-xs">Expand all</button>
+</div>
+
 <!--#include virtual="generated-sessions.html"-->