Add tab help - Fix #987

api/pages/settings-tab-editor-tabs.php

@@ -29,6 +29,7 @@ allIcons().success(function(data) {
     <div class="panel-heading">
         <span lang="en">Tab Editor</span>
         <button type="button" class="btn btn-info btn-circle pull-right popup-with-form m-r-5" href="#new-tab-form" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>
+        <button type="button" class="btn btn-info btn-circle pull-right m-r-5 help-modal" data-modal="tabs"><i class="fa fa-question-circle"></i> </button>
     </div>
     <div class="table-responsive">
         <form id="submit-tabs-form" onsubmit="return false;">

index.php

@@ -118,7 +118,7 @@
         <div class="internal-listing p-0 hidden"></div>
         <div class="iFrame-listing p-0 hidden"></div>
     </div>
-    <!-- sample modal content -->
+    <!-- debug modal content -->
     <div class="modal fade debugModal" tabindex="-1" role="dialog" aria-labelledby="debugModal"
          aria-hidden="true" style="display: none;">
         <div class="modal-dialog modal-lg">
@@ -175,8 +175,6 @@
                             </div>
                         </div>
                     </div>
-
-
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-danger waves-effect text-left" data-dismiss="modal">Close
@@ -188,6 +186,21 @@
         <!-- /.modal-dialog -->
     </div>
     <!-- /.modal -->
+    <!-- help modal content -->
+    <div class="modal fade help-modal-lg" tabindex="-1" role="dialog" aria-labelledby="help-modal-lg" aria-hidden="true"
+         style="display: none;">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                    <h4 class="modal-title" id="help-modal-title">Large modal</h4></div>
+                <div class="modal-body" id="help-modal-body"></div>
+            </div>
+            <!-- /.modal-content -->
+        </div>
+        <!-- /.modal-dialog -->
+    </div>
+    <!-- /.modal -->
     <!-- ============================================================== -->
     <!-- End Page Content -->
     <!-- ============================================================== -->

js/custom.js

@@ -1803,4 +1803,37 @@ $(document).on('click', ".sticon", function(){
             $(el).trigger('click');
         }
     }
+});
+// open help modal
+$(document).on('click', ".help-modal", function(){
+    var type = $(this).attr('data-modal');
+    var title = '';
+    var body = '';
+    //clear modal first
+    $('#help-modal-title').html('');
+    $('#help-modal-body').html('');
+    //alter info
+    switch (type) {
+        case 'tabs':
+            title = 'Tab Help';
+            var items = [
+                {title:"Name", body:"The text that will be displayed for that certain tab"},
+                {title:"Category", body:"Each Tab is assigned a Category, the default is unsorted.  You may create new categories on the Category settings tab"},
+                {title:"Group", body:"The lowest Group that will have access to this tab"},
+                {title:"Type", body:"Internal is for Organizr pages<br/>iFrame is for all others<br/>New Window is for items to open in a new window"},
+                {title:"Default", body:"You can choose one tab to be the first opened tab on page load"},
+                {title:"Active", body:"Either mark a tab as active or inactive"},
+                {title:"Splash", body:"Toggle this to add the tab to the Splash Page on page load"},
+                {title:"Ping", body:"Enable Organizr to ping the status of the local URL of this tab"},
+                {title:"Preload", body:"Toggle this tab to loaded in the background on page load"},
+            ];
+            body = buildAccordion(items);
+            break;
+        default:
+            return null;
+        
+    }
+    $('#help-modal-title').html(title);
+    $('#help-modal-body').html(body);
+    $('.help-modal-lg').modal('show');
 });

js/functions.js

@@ -685,6 +685,22 @@ function accordionOptions(options, parentID){
 	});
 	return accordionOptions;
 }
+function buildAccordion(array){
+    var items = '';
+    var mainId = createRandomString(10);
+    $.each(array, function(i,v) {
+        var id = mainId + '-' + i;
+        items += `
+        <div class="panel">
+            <div class="panel-heading bg-org" id="`+id+`-heading" role="tab"> <a class="panel-title collapsed" data-toggle="collapse" href="#`+id+`-collapse" data-parent="#`+mainId+`" aria-expanded="false" aria-controls="`+id+`-collapse"> `+v.title+` </a> </div>
+            <div class="panel-collapse collapse" id="`+id+`-collapse" aria-labelledby="`+id+`-heading" role="tabpanel">
+                <div class="panel-body"> `+v.body+` </div>
+            </div>
+        </div>
+        `;
+    });
+    return '<div class="panel-group" id="'+mainId+'" aria-multiselectable="true" role="tablist">' + items + '</div>';
+}
 function buildFormItem(item){
 	var placeholder = (item.placeholder) ? ' placeholder="'+item.placeholder+'"' : '';
 	var id = (item.id) ? ' id="'+item.id+'"' : '';