Reworked tabs to be more generic. Added support for memorizing the active tab

themes/grav/app/forms/fields/array.js

@@ -81,6 +81,7 @@ export default class ArrayField {
     }
 
     actionEvent(event) {
+        event && event.preventDefault();
         let element = $(event.target);
         let action = element.data('grav-array-action');
 

themes/grav/app/main.js

@@ -14,6 +14,9 @@ import 'bootstrap/js/transition';
 import 'bootstrap/js/dropdown';
 import 'bootstrap/js/collapse';
 
+// tabs memory
+import './utils/tabs-memory';
+
 // Main Sidebar
 import Sidebar, { Instance as sidebar } from './utils/sidebar';
 

themes/grav/app/utils/tabs-memory.js

@@ -0,0 +1,12 @@
+import $ from 'jquery';
+import Cookies from 'cookies-js';
+
+let Data = JSON.parse(Cookies.get('grav-tabs-state') || '{}');
+
+$('body').on('touchstart click', '[name^="tab-"]', (event) => {
+    event && event.stopPropagation();
+    let target = $(event.currentTarget);
+
+    Data[target.attr('name')] = target.val();
+    Cookies.set('grav-tabs-state', JSON.stringify(Data), { expires: Infinity });
+});

themes/grav/package.json

@@ -16,6 +16,7 @@
     "bootstrap": "^3.3.6",
     "chartist": "^0.9.7",
     "codemirror": "^5.12.0",
+    "cookies-js": "^1.2.2",
     "debounce": "^1.0.0",
     "dropzone": "^4.3.0",
     "eonasdan-bootstrap-datetimepicker": "^4.15.35",

themes/grav/scss/template/_tabs.scss

@@ -81,16 +81,16 @@ $tab-label-height:3.5em;
     padding-top: $tab-label-height;
 }
 
-#tab1:checked ~ .tab-body-wrapper #tab-body-1,
+[id^="tab-"][id$="1"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="1"],
-#tab2:checked ~ .tab-body-wrapper #tab-body-2,
+[id^="tab-"][id$="2"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="2"],
-#tab3:checked ~ .tab-body-wrapper #tab-body-3,
+[id^="tab-"][id$="3"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="3"],
-#tab4:checked ~ .tab-body-wrapper #tab-body-4,
+[id^="tab-"][id$="4"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="4"],
-#tab5:checked ~ .tab-body-wrapper #tab-body-5,
+[id^="tab-"][id$="5"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="5"],
-#tab6:checked ~ .tab-body-wrapper #tab-body-6,
+[id^="tab-"][id$="6"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="6"],
-#tab7:checked ~ .tab-body-wrapper #tab-body-7,
+[id^="tab-"][id$="7"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="7"],
-#tab8:checked ~ .tab-body-wrapper #tab-body-8,
+[id^="tab-"][id$="8"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="8"],
-#tab9:checked ~ .tab-body-wrapper #tab-body-9,
+[id^="tab-"][id$="9"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="9"],
-#tab10:checked ~ .tab-body-wrapper #tab-body-10 {
+[id^="tab-"][id$="10"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="10"] {
     position: relative;
     display: block;
     opacity: 1;

themes/grav/templates/forms/fields/tabs/tabs.html.twig

@@ -9,10 +9,12 @@
 {% endif %}
 
 {% if field.fields %}
+    {% set storedValue = get_cookie('grav-tabs-state')|default('{}')|json_decode %}
+    {% set tabsKey = field.fields|keys|join('.') %}
     {% for tab in field.fields %}
         {% if tab.type == 'tab' %}
-        <input type="radio" name="tab" id="tab{{ loop.index }}" class="tab-head no-form" {{ active == loop.index ? 'checked="checked"' : '' }}/>
+        <input type="radio" name="tab-{{ tabsKey }}" id="tab-{{ tabsKey ~ loop.index }}" value="{{ (scope ~ tab.name) }}" class="tab-head no-form" {{ ((attribute(storedValue, 'tab-' ~ tabsKey) == scope ~ tab.name) or active == loop.index) ? 'checked="checked"' : '' }}/>
-        <label for="tab{{ loop.index }}">
+        <label for="tab-{{ tabsKey ~ loop.index }}">
             {% if grav.twig.twig.filters['tu'] is defined %}{{ tab.title|tu }}{% else %}{{ tab.title|t }}{% endif %}
         </label>
         {% endif %}
@@ -21,7 +23,7 @@
         {% for field in field.fields %}
             {% if field.type == 'tab' %}
                 {% set value = data.value(field.name) %}
-                <div id="tab-body-{{ loop.index }}" class="tab-body">
+                <div id="tab-body-{{ tabsKey ~ loop.index }}" class="tab-body">
                     {% include ["forms/fields/#{field.type}/#{field.type}.html.twig", 'forms/fields/text/text.html.twig'] %}
                 </div>
             {% endif %}

themes/grav/templates/partials/blueprints.html.twig

@@ -17,7 +17,7 @@
             </div>
         {% endif %}
     {% endfor %}
-{{ dump(data.extra) }}
+
     {% if data.extra %}
     {% for name, value in data.extra %}
         {% if name not in ['_json','task','admin-nonce'] %}