Refs #6972; Fix consolidated view when togglable elements are open6972-fix-consolidated-views

3 files changed, 41 insertions, 18 deletions

diff --git a/app/assets/stylesheets/modules/_vj_collection.sass b/app/assets/stylesheets/modules/_vj_collection.sass
index 0131201f0..03c749a31 100644
--- a/app/assets/stylesheets/modules/_vj_collection.sass
+++ b/app/assets/stylesheets/modules/_vj_collection.sass
@@ -219,9 +219,17 @@
         .form-control
           border-color: #ccc
 
-
 .consolidated-view
   $highlighted: #d4ba32
+  .togglable
+    &.ready
+      transition: all 0.5s
+      &:not(.open)
+        min-height: 0 !important
+        padding: 0 !important
+        margin: 0 !important
+        border: none
+
   .line
     & > .head
       font-size: 2em
@@ -257,7 +265,6 @@
         .vehicle-journeys
           display: block
           overflow: hidden
-          transition: height 0.5s, margin-bottom 0.5s
           margin-bottom: 0px
           & > *
             display: inline-block
diff --git a/app/views/referential_vehicle_journeys/_consolidated.html.slim b/app/views/referential_vehicle_journeys/_consolidated.html.slim
index e2de526bc..4a1866e8a 100644
--- a/app/views/referential_vehicle_journeys/_consolidated.html.slim
+++ b/app/views/referential_vehicle_journeys/_consolidated.html.slim
@@ -8,26 +8,42 @@ coffee:
   $('a.toggle-timetables').click (e)->
     e.preventDefault()
     $(e.target).toggleClass 'active'
-    $(e.target).parents('.table').find('.detailed-timetables').toggleClass 'hidden'
+    $(e.target).parents('.table').find('.detailed-timetables').customToggle()
 
   $('a.toggle-purchase-windows').click (e)->
     e.preventDefault()
     $(e.target).toggleClass 'active'
-    $(e.target).parents('.table').find('.detailed-purchase-windows').toggleClass 'hidden'
+    $(e.target).parents('.table').find('.detailed-purchase-windows').customToggle()
 
-  $('.route').find('.vehicle-journeys').each (i, e)->
+  $('.route').find('.togglable.hidden').each (i, e)->
     $e = $(e)
     $e.removeClass 'hidden'
-    e.setAttribute 'data-original-height', $e.height()
-    $e.height 0
+    e.setAttribute 'data-original-height', $e.innerHeight()
+    e.setAttribute 'data-original-full-height', $e.outerHeight(true)
+    $e.css height: 0
+    $e.addClass 'ready'
 
   $('a.toggle-route').click (e)->
     e.preventDefault()
     $(e.currentTarget).toggleClass 'active'
     tab = $(e.currentTarget).parents('.route').find('.vehicle-journeys')
-    if tab.hasClass 'open'
-      tab.removeClass 'open'
-      tab.height 0
-    else
-      tab.addClass 'open'
-      tab.height tab.attr('data-original-height')
+    tab.customToggle()
+
+  $.fn.extend
+    customToggle: (propagate=true)->
+      height = parseFloat this.attr('data-original-height')
+      fullHeight = parseFloat this.attr('data-original-full-height')
+      if this.hasClass 'open'
+        this.css height: 0
+        this.removeClass 'open'
+        this.find('.togglable.open').customToggle(false)
+        this.find('a.active').removeClass 'active'
+        if propagate
+          for parent in this.parents(".togglable.open")
+            $(parent).height $(parent).height() - fullHeight
+      else
+        this.addClass 'open'
+        this.height height
+        if propagate
+          for parent in this.parents(".togglable.open")
+            $(parent).height $(parent).height() + fullHeight
diff --git a/app/views/referential_vehicle_journeys/_consolidated_line.html.slim b/app/views/referential_vehicle_journeys/_consolidated_line.html.slim
index d4c756d38..c73c65961 100644
--- a/app/views/referential_vehicle_journeys/_consolidated_line.html.slim
+++ b/app/views/referential_vehicle_journeys/_consolidated_line.html.slim
@@ -20,7 +20,7 @@
               = Chouette::VehicleJourney.t
               |  
               span.fa.fa-angle-up
-        .table.table-2entries.vehicle-journeys.hidden
+        .table.table-2entries.vehicle-journeys.hidden.togglable
           .t2e-head.w20
             .th
               div
@@ -31,7 +31,7 @@
                 = link_to '#', class: 'toggle-purchase-windows detailed-timetables-bt' do
                   span.fa.fa-angle-up
                   = Chouette::PurchaseWindow.t
-              .detailed-purchase-windows.hidden
+              .detailed-purchase-windows.hidden.togglable
                 - route.purchase_windows.uniq.each do |tt|
                   div
                     p
@@ -46,7 +46,7 @@
                   span.fa.fa-angle-up
                   = Chouette::TimeTable.t
 
-              .detailed-timetables.hidden
+              .detailed-timetables.hidden.togglable
                 - route.time_tables.uniq.each do |tt|
                   div
                     p
@@ -86,7 +86,7 @@
                             span.fa.fa-calendar style="color: #{tt.color ? tt.color : '#4B4B4B'}"
                       - if journey.purchase_windows.size > 3
                         span.vj_tt = "+ #{journey.purchase_windows.size - 3}"
-                    .detailed-purchase-windows.hidden
+                    .detailed-purchase-windows.hidden.togglable
                       - route.purchase_windows.uniq.each do |tt|
                         div class=(journey.has_purchase_window?(tt) ? 'active' : 'inactive')
                     div
@@ -96,7 +96,7 @@
                             span.fa.fa-calendar style="color: #{tt.color ? tt.color : '#4B4B4B'}"
                       - if journey.time_tables.size > 3
                         span.vj_tt = "+ #{journey.time_tables.size - 3}"
-                    .detailed-timetables.hidden
+                    .detailed-timetables.hidden.togglable
                       - route.time_tables.uniq.each do |tt|
                         div class=(journey.has_time_table?(tt) ? 'active' : 'inactive')