Dev: "real" accordion on survey settings too

Dev: Fixed issue : panel is not shown after open (open timer for a good example)

application/views/admin/survey/subview/accordion/_accordion_container.php

@@ -10,17 +10,17 @@
 
     <!-- General Option -->
     <div class="panel panel-default" id="generaloptionsContainer">
-        <div class="panel-heading" role="tab" id="headingOne">
+        <div class="panel-heading" role="tab" id="heading-generaloptions">
             <h4 class="panel-title">
                 <a class="btn btn-default btn-xs hide-button hidden-xs opened handleAccordion hidden-sm">
                     <span class="glyphicon glyphicon-chevron-left"></span>
                 </a>
-                <a role="button" data-toggle="collapse" href="#generaloptions" aria-expanded="true" aria-controls="generaloptions">
+                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#generaloptions" aria-expanded="true" aria-controls="generaloptions">
                     <?php eT("General options");?>
                 </a>
             </h4>
         </div>
-        <div id="generaloptions" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+        <div id="generaloptions" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-generaloptions">
             <div class="panel-body">
                 <?php $this->renderPartial('/admin/survey/subview/accordion/_generaloptions_panel', $data); ?>
             </div>
@@ -30,17 +30,17 @@
 
     <!-- Presentation & navigation  -->
     <div class="panel panel-default">
-        <div class="panel-heading" role="tab" id="headingTwo">
+        <div class="panel-heading" role="tab" id="heading-presentationoptions">
             <h4 class="panel-title">
                 <a class="btn btn-default btn-xs hide-button hidden-xs opened handleAccordion hidden-sm">
                     <span class="glyphicon glyphicon-chevron-left"></span>
                 </a>
-                <a class="collapsed" role="button" data-toggle="collapse" href="#presentationoptions" aria-expanded="false" aria-controls="presentationoptions">
+                <a class="collapsed" role="button" data-parent="#accordion" data-toggle="collapse" href="#presentationoptions" aria-expanded="false" aria-controls="presentationoptions">
                     <?php  eT("Presentation & navigation"); ?>
                 </a>
             </h4>
         </div>
-        <div id="presentationoptions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="presentationoptions">
+        <div id="presentationoptions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-presentationoptions">
             <div class="panel-body">
                 <?php $this->renderPartial('/admin/survey/subview/accordion/_presentation_panel', $data); ?>
             </div>
@@ -49,17 +49,17 @@
 
     <!-- Publication & access control -->
     <div class="panel panel-default">
-        <div class="panel-heading" role="tab" id="headingThree">
+        <div class="panel-heading" role="tab" id="heading-publicationoptions">
             <h4 class="panel-title">
                 <a class="btn btn-default btn-xs hide-button hidden-xs opened handleAccordion hidden-sm">
                     <span class="glyphicon glyphicon-chevron-left"></span>
                 </a>
-                <a class="collapsed" role="button" data-toggle="collapse" href="#publicationoptions" aria-expanded="false" aria-controls="publicationoptions">
+                <a class="collapsed" role="button" data-parent="#accordion" data-toggle="collapse" href="#publicationoptions" aria-expanded="false" aria-controls="publicationoptions">
                     <?php  eT("Publication & access control"); ?>
                 </a>
             </h4>
         </div>
-        <div id="publicationoptions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="publicationoptions">
+        <div id="publicationoptions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-publicationoptions">
             <div class="panel-body">
                 <?php $this->renderPartial('/admin/survey/subview/accordion/_publication_panel', $data); ?>
             </div>
@@ -68,17 +68,17 @@
 
     <!-- Notification & data management -->
     <div class="panel panel-default">
-        <div class="panel-heading" role="tab" id="headingFour">
+        <div class="panel-heading" role="tab" id="heading-notificationoptions">
             <h4 class="panel-title">
                 <a class="btn btn-default btn-xs hide-button hidden-xs opened handleAccordion hidden-sm">
                     <span class="glyphicon glyphicon-chevron-left"></span>
                 </a>
-                <a class="collapsed" role="button" data-toggle="collapse" href="#notificationoptions" aria-expanded="false" aria-controls="notificationoptions">
+                <a class="collapsed" role="button" data-parent="#accordion" data-toggle="collapse" href="#notificationoptions" aria-expanded="false" aria-controls="notificationoptions">
                     <?php  eT("Notification & data management"); ?>
                 </a>
             </h4>
         </div>
-        <div id="notificationoptions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="notificationoptions">
+        <div id="notificationoptions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-notificationoptions">
             <div class="panel-body">
                 <?php $this->renderPartial('/admin/survey/subview/accordion/_notification_panel', $data); ?>
             </div>
@@ -87,17 +87,17 @@
 
     <!-- Tokens -->
     <div class="panel panel-default">
-        <div class="panel-heading" role="tab" id="headingFive">
+        <div class="panel-heading" role="tab" id="heading-tokensoptions">
             <h4 class="panel-title">
                 <a class="btn btn-default btn-xs hide-button hidden-xs opened handleAccordion hidden-sm">
                     <span class="glyphicon glyphicon-chevron-left"></span>
                 </a>
-                <a class="collapsed" role="button" data-toggle="collapse" href="#tokensoptions" aria-expanded="false" aria-controls="tokensoptions">
+                <a class="collapsed" role="button" data-parent="#accordion" data-toggle="collapse" href="#tokensoptions" aria-expanded="false" aria-controls="tokensoptions">
                     <?php  eT("Tokens"); ?>
                 </a>
             </h4>
         </div>
-        <div id="tokensoptions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="tokensoptions">
+        <div id="tokensoptions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tokensoptions">
             <div class="panel-body">
                 <?php $this->renderPartial('/admin/survey/subview/accordion/_tokens_panel', $data); ?>
             </div>
@@ -108,17 +108,17 @@
     <?php if($data['action']=='editsurveysettings'):?>
         <!-- Panel integration -->
         <div class="panel panel-default">
-            <div class="panel-heading" role="tab" id="headingSix">
+            <div class="panel-heading" role="tab" id="heading-integrationoptions">
                 <h4 class="panel-title">
                     <a class="btn btn-default btn-xs hide-button hidden-xs opened handleAccordion hidden-sm">
                         <span class="glyphicon glyphicon-chevron-left"></span>
                     </a>
-                    <a class="collapsed" role="button" data-toggle="collapse" href="#integrationoptions" aria-expanded="false" aria-controls="integrationoptions">
+                    <a class="collapsed" role="button" data-parent="#accordion" data-toggle="collapse" href="#integrationoptions" aria-expanded="false" aria-controls="integrationoptions">
                         <?php  eT("Panel integration"); ?>
                     </a>
                 </h4>
             </div>
-            <div id="integrationoptions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="integrationoptions">
+            <div id="integrationoptions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-integrationoptions">
                 <div class="panel-body">
                     <?php $this->renderPartial('/admin/survey/subview/accordion/_integration_panel', $data); ?>
                 </div>
@@ -130,17 +130,17 @@
 
         <!-- Resources -->
         <div class="panel panel-default">
-            <div class="panel-heading" role="tab" id="headingSeven">
+            <div class="panel-heading" role="tab" id="heading-resourcesoptions">
                 <h4 class="panel-title">
                     <a class="btn btn-default btn-xs hide-button hidden-xs opened handleAccordion hidden-sm">
                         <span class="glyphicon glyphicon-chevron-left"></span>
                     </a>
-                    <a class="collapsed" role="button" data-toggle="collapse" href="#resourcesoptions" aria-expanded="false" aria-controls="resourcesoptions">
+                    <a class="collapsed" role="button" data-parent="#accordion" data-toggle="collapse" href="#resourcesoptions" aria-expanded="false" aria-controls="resourcesoptions">
                         <?php  eT("Resources"); ?>
                     </a>
                 </h4>
             </div>
-            <div id="resourcesoptions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="resourcesoptions">
+            <div id="resourcesoptions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-resourcesoptions">
                 <div class="panel-body">
                     <?php $this->renderPartial('/admin/survey/subview/accordion/_resources_panel', $data); ?>
                 </div>

application/views/admin/survey/subview/accordion/_plugin_panel.php

@@ -10,7 +10,7 @@
                     <a class="btn btn-default btn-xs hide-button hidden-xs opened handleAccordion hidden-sm">
                         <span class="glyphicon glyphicon-chevron-left"></span>
                     </a>
-                    <a id="button-plugin<?php echo $id; ?>" class="collapsed" role="button" data-toggle="collapse" href="#plugin<?php echo $id; ?>" aria-expanded="false" aria-controls="plugin<?php echo $id; ?>">
+                    <a id="button-plugin<?php echo $id; ?>" class="collapsed" data-parent="#accordion" role="button" data-toggle="collapse" href="#plugin<?php echo $id; ?>" aria-expanded="false" aria-controls="plugin<?php echo $id; ?>">
                         <?php printf(gT("Settings for plugin %s"), $plugin['name']); ?>
                     </a>
                 </h4>

scripts/admin/admin_core.js

@@ -22,13 +22,15 @@ var LS = LS || {};
  */
 hasFormValidation= typeof document.createElement( 'input' ).checkValidity == 'function';
 
+/* See function */
+fixAccordionPosition();
+
 $(document).ready(function(){
 
     initializeAjaxProgress();
     tableCellAdapters();
     linksInDialog();
     doToolTip();
-
     $('button,input[type=submit],input[type=button],input[type=reset],.button').button();
     $('button,input[type=submit],input[type=button],input[type=reset],.button').addClass("limebutton");
 
@@ -959,3 +961,18 @@ LS.ajax = function(options) {
 
     return $.ajax(options);
 }
+/* When using accordion : sometimes the start of accordion is uot of range (in question and survey settings)
+ * Then move to id just after opened it
+ * Attach to document due to ajax call in question
+ */
+function fixAccordionPosition(){
+    $(document).on('shown.bs.collapse',"#accordion", function () {
+        var collapsed = $(this).find('.collapse.in').prev('.panel-heading');
+        /* test if is up to surveybarid bottom, if yes : scrollTo */
+        if($(collapsed).offset().top-$(window).scrollTop() < $(".navbar-fixed-top").first().outerHeight(true)){
+            $('html, body').animate({
+                scrollTop: $(collapsed).offset().top-$(".navbar-fixed-top").first().outerHeight(true)
+            }, 500);
+        }
+    });
+}