Work on toggleables

classes/controller.php

@@ -16,6 +16,7 @@ use Grav\Common\Backup\ZipBackup;
 use Grav\Common\Markdown\Parsedown;
 use Grav\Common\Markdown\ParsedownExtra;
 use RocketTheme\Toolbox\File\JsonFile;
+use Symfony\Component\Yaml\Yaml;
 
 class AdminController
 {
@@ -1103,12 +1104,27 @@ class AdminController
 
         if (isset($input['header'])) {
             $header = $input['header'];
+
+            foreach($header as $key => $value) {
+                if ($key == 'metadata') {
+                    foreach($header['metadata'] as $key2 => $value2) {
+                        if (isset($input['toggleable_header']['metadata'][$key2]) && !$input['toggleable_header']['metadata'][$key2]) {
+                            $header['metadata'][$key2] = '';
+                        }
+                    }
+                } else {
+                    if (isset($input['toggleable_header'][$key]) && !$input['toggleable_header'][$key]) {
+                        $header[$key] = '';
+                    }
+                }
+            }
             if ($clean_header) {
                 $header = Utils::arrayFilterRecursive($header, function($k, $v) {
                     return !(is_null($v) || $v === '');
                 });
             }
             $page->header((object) $header);
+            $page->frontmatter(Yaml::dump((array) $page->header()));
         }
         // Fill content last because it also renders the output.
         if (isset($input['content'])) {

themes/grav/css-compiled/template.css

@@ -445,7 +445,7 @@ hr {
    */
   .switch-grav {
     background-color: #fff;
-    border: 1px solid #d4d4d4;
+    border: 1px solid #d5d5d5;
     border-radius: 4px;
     /* Selected ON switch-light
      */ }
@@ -574,7 +574,7 @@ form .selectize-control.multi .selectize-input {
     border-radius: 2px;
     line-height: 1.5; }
     form .selectize-control.multi .selectize-input > div.active {
-      background: #d4d4d4; }
+      background: #d5d5d5; }
 form .selectize-control.single .selectize-input:after {
   right: 27px; }
 form .selectize-control.single .selectize-input.dropdown-active:after {
@@ -593,7 +593,7 @@ form .large {
     height: 10rem; }
 form select {
   width: 100%;
-  border: 1px solid #d4d4d4;
+  border: 1px solid #d5d5d5;
   background: #fff;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -603,17 +603,17 @@ form select {
   margin: 0; }
 form input[type=text], form input[type=password], form input[type=email] {
   width: 100%;
-  border: 1px solid #d4d4d4;
+  border: 1px solid #d5d5d5;
   background: #fff; }
 form input[readonly=readonly] {
   background: #f2f2f2;
   font-weight: bold; }
 form textarea {
   width: 100%;
-  border: 1px solid #d4d4d4;
+  border: 1px solid #d5d5d5;
   background: #fff; }
 form .form-frontmatter-wrapper {
-  border: 1px solid #d4d4d4;
+  border: 1px solid #d5d5d5;
   border-radius: 4px; }
 form .switch-toggle.medium {
   width: 100%;
@@ -662,7 +662,7 @@ form .checkboxes {
     margin-right: 10px;
     position: absolute;
     background: #fff;
-    border: 1px solid #d4d4d4;
+    border: 1px solid #d5d5d5;
     border-radius: 4px; }
   form .checkboxes input[type=checkbox] {
     display: none; }
@@ -679,7 +679,7 @@ form .checkboxes {
   margin-bottom: 3rem; }
   .form-frontmatter-wrapper .dragbar {
     height: 4px;
-    background: #d4d4d4;
+    background: #d5d5d5;
     cursor: row-resize; }
 
 #frontmatter + .CodeMirror {
@@ -694,7 +694,7 @@ form .checkboxes {
   .form-order-wrapper ul#ordering li {
     padding: 0.2rem 1rem;
     border-radius: 4px;
-    border: 1px solid #d4d4d4;
+    border: 1px solid #d5d5d5;
     background: #f8f8f8;
     color: #8d959a;
     margin: 3px 0;
@@ -718,7 +718,7 @@ form .checkboxes {
     cursor: move;
     padding: 1rem;
     border-radius: 4px;
-    border: 1px solid #d4d4d4;
+    border: 1px solid #d5d5d5;
     background: #f8f8f8;
     color: #8d959a;
     margin: 3px 0;
@@ -791,11 +791,11 @@ tr {
     background: #54c5b0;
     color: #fff; }
   .button.secondary {
-    background: #29796b;
+    background: #2a7a6b;
     color: rgba(255, 255, 255, 0.85);
     border-radius: 4px; }
     .button.secondary:hover {
-      background: #2f8c7c;
+      background: #318d7c;
       color: #fff; }
 
 #error {
@@ -822,7 +822,7 @@ tr {
   #admin-login .form-data {
     padding-right: 0; }
   #admin-login h1 {
-    background: #20333e url(../images/logo.png) 50% 50% no-repeat;
+    background: #21333e url(../images/logo.png) 50% 50% no-repeat;
     font-size: 0;
     color: transparent;
     height: 216px;
@@ -838,15 +838,15 @@ tr {
       text-align: center;
       font-weight: 300;
       -webkit-font-smoothing: auto;
-      border: 1px solid #1d2e38; }
+      border: 1px solid #1e2e39; }
       #admin-login form input::-webkit-input-placeholder {
-        color: #83949c; }
+        color: #83949d; }
       #admin-login form input::-moz-placeholder {
-        color: #83949c; }
+        color: #83949d; }
       #admin-login form input:-moz-placeholder {
-        color: #83949c; }
+        color: #83949d; }
       #admin-login form input:-ms-input-placeholder {
-        color: #83949c; }
+        color: #83949d; }
     #admin-login form .form-actions {
       text-align: center;
       margin: 0 -3rem -3rem -3rem;
@@ -870,7 +870,7 @@ tr {
       color: #fff; }
 
 #admin-logo {
-  background: #20333e;
+  background: #21333e;
   height: 4.2rem; }
   #admin-logo h3 {
     text-transform: uppercase;
@@ -884,7 +884,7 @@ tr {
 
 #admin-user-details {
   padding: 2rem;
-  border-bottom: 1px solid #20333e;
+  border-bottom: 1px solid #21333e;
   overflow: hidden; }
   #admin-user-details img {
     -webkit-transition: all 0.5s ease;
@@ -919,7 +919,7 @@ tr {
       #admin-menu li .badges .badge {
         display: inline-block;
         margin-right: -5px;
-        color: #e5e5e5; }
+        color: #e6e6e6; }
       #admin-menu li .badges .count {
         background-color: #365569; }
       #admin-menu li .badges .updates {
@@ -948,7 +948,7 @@ tr {
         color: #afc7d5;
         margin-right: 8px; }
       #admin-menu li a:hover {
-        background: #20333e;
+        background: #21333e;
         color: #fff; }
         #admin-menu li a:hover i {
           font-size: 1.2rem; }
@@ -1364,6 +1364,12 @@ tr {
 .depth-9 .row {
   padding-left: 30rem; }
 
+.hidden {
+  display: none !important; }
+
+.switch-toggle input[type="radio"] {
+  display: none !important; }
+
 /*
  *  Remodal - v0.2.0
  *  Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking.
@@ -1606,7 +1612,7 @@ body.remodal_active .remodal {
     border-radius: 0; }
 
 .uk-htmleditor-navbar {
-  border: 1px solid #d4d4d4;
+  border: 1px solid #d5d5d5;
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
   background: #fbfbfb; }
@@ -1625,8 +1631,8 @@ body.remodal_active .remodal {
     .uk-htmleditor-navbar ul .uk-active a {
       background: white;
       cursor: auto;
-      border-left: 1px solid #d4d4d4;
+      border-left: 1px solid #d5d5d5;
-      border-right: 1px solid #d4d4d4; }
+      border-right: 1px solid #d5d5d5; }
       .uk-htmleditor-navbar ul .uk-active a:hover {
         background: #fff; }
     .uk-htmleditor-navbar ul a {
@@ -1649,7 +1655,7 @@ body.remodal_active .remodal {
     border-top-right-radius: 4px; }
 
 .uk-htmleditor-content {
-  border: 1px solid #d4d4d4;
+  border: 1px solid #d5d5d5;
   border-top: 0;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px; }
@@ -1693,7 +1699,7 @@ body.remodal_active .remodal {
 [data-mode=split] .uk-htmleditor-button-code, [data-mode=split] .uk-htmleditor-button-preview {
   display: none; }
 [data-mode=split] .uk-htmleditor-code {
-  border-right: 1px solid #d4d4d4; }
+  border-right: 1px solid #d5d5d5; }
   [data-mode=split] .uk-htmleditor-code, [data-mode=split] .uk-htmleditor-code .uk-htmleditor-preview {
     float: left;
     width: 50%; }
@@ -1711,7 +1717,7 @@ body.remodal_active .remodal {
     border-radius: 0; }
 
 .grav-mdeditor-navbar {
-  border: 1px solid #d4d4d4;
+  border: 1px solid #d5d5d5;
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
   background: #fbfbfb; }
@@ -1730,8 +1736,8 @@ body.remodal_active .remodal {
     .grav-mdeditor-navbar ul .mdeditor-active a {
       background: white;
       cursor: auto;
-      border-left: 1px solid #d4d4d4;
+      border-left: 1px solid #d5d5d5;
-      border-right: 1px solid #d4d4d4; }
+      border-right: 1px solid #d5d5d5; }
       .grav-mdeditor-navbar ul .mdeditor-active a:hover {
         background: #fff; }
     .grav-mdeditor-navbar ul a {
@@ -1754,7 +1760,7 @@ body.remodal_active .remodal {
     border-top-right-radius: 4px; }
 
 .grav-mdeditor-content {
-  border: 1px solid #d4d4d4;
+  border: 1px solid #d5d5d5;
   border-top: 0;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px; }
@@ -1798,7 +1804,7 @@ body.remodal_active .remodal {
 [data-mode=split] .grav-mdeditor-button-code, [data-mode=split] .grav-mdeditor-button-preview {
   display: none; }
 [data-mode=split] .grav-mdeditor-code {
-  border-right: 1px solid #d4d4d4; }
+  border-right: 1px solid #d5d5d5; }
   [data-mode=split] .grav-mdeditor-code, [data-mode=split] .grav-mdeditor-code .grav-mdeditor-preview {
     float: left;
     width: 50%; }
@@ -1894,7 +1900,7 @@ body.remodal_active .remodal {
 
 .dropzone {
   position: relative;
-  border: 1px #d4d4d4 solid;
+  border: 1px #d5d5d5 solid;
   border-radius: 4px;
   min-height: 4rem;
   background: #fff; }

themes/grav/js/admin-all.js

@@ -381,4 +381,29 @@ $(function () {
             button.data('key-index', ++key);
         });
     });
+
+    // enable the toggleable checkbox when typing in the corresponding textarea/input element
+    jQuery(document).on('input propertychange click', '.size-2-3 textarea, .size-2-3 input, .size-2-3 label', function() {
+        var item = this;
+
+        var checkbox = $(item).parents('.form-field').find('.toggleable input[type="checkbox"]');
+
+        if (checkbox.length > 0) {
+            checkbox.prop('checked', true);
+        }
+
+        checkbox.parent().siblings('label').css('opacity', 1);
+    });
+
+    // when clicking the label, click the corresponding checkbox automatically
+
+    jQuery(document).on('click', 'label.toggleable', function() {
+        var input = $(this).siblings('.checkboxes.toggleable').find('input');
+        var on = !input.is(':checked');
+
+        input.prop('checked', on);
+        input.prop('value', on ? 1 : 0);
+        $(this).css('opacity', on ? 1 : 0.7);
+    });
+
 });

themes/grav/js/forms/form.js

@@ -30,6 +30,70 @@
             var el = $(this),
                 type = el.data(form.dataIndicator);
 
+            if (type == 'textarea' || type == 'toggleable' || type == 'datetime') {
+                var processSpan = function processSpan(element, toggleable) {
+                    var on = true;
+                    if (!toggleable) {
+                        on = $(element).find('input').is(':checked');
+                    }
+
+                    $(element).find('label').css('opacity', on ? 1 : 0.7);
+                    $(element).siblings('label').css('opacity', on ? 1 : 0.7);
+
+                    if (!on) {
+                        $(element).find('input').attr('checked', false).prop('value', 0);
+                    } else {
+                        $(element).find('input').attr('checked', true).prop('value', 1);
+                    }
+
+                    $(element).parent().siblings('.form-data').css('opacity', on ? 1 : 0.6);
+                    $(element).parent().siblings('.form-data').find('textarea').css('opacity', on ? 1 : 0.6);
+                    $(element).parent().siblings('.form-data').find('input').css('opacity', on ? 1 : 0.6);
+                };
+
+                var processToggleables = function processToggleables(element) {
+                    var elType = $(element)[0].tagName.toLowerCase();
+
+                    if (elType == 'checkbox') {
+                        var on = $(element).is(':checked');
+
+                        $(element).siblings('label').css('opacity', on ? 1 : 0.7);
+                        $(element).parent().siblings('label').css('opacity', on ? 1 : 0.7);
+
+                        if (!on) {
+                            $(element).attr('checked', false).prop('value', 0);
+                        } else {
+                            $(element).attr('checked', true).prop('value', 1);
+                        }
+
+                        $(element).parent().parent().siblings('.form-data').css('opacity', on ? 1 : 0.6);
+                        $(element).parent().parent().siblings('.form-data').find('textarea').css('opacity', on ? 1 : 0.6);
+                        $(element).parent().parent().siblings('.form-data').find('input').css('opacity', on ? 1 : 0.6);
+                    }
+
+                    if (elType == 'span') {
+                        processSpan(element);
+                    }
+                };
+
+                el.on('change input propertychange', function() {
+                    processToggleables(this);
+                });
+
+                el.find('input').on('change', function() {
+                    processToggleables(this);
+                });
+
+                if ($(el)[0].className == 'checkboxes toggleable') {
+                    var toggles = $(el).parent().siblings('.form-data').find('label');
+                    toggles.on('click', function() {
+                        processSpan(el, true);
+                    });
+                }
+
+                processToggleables(this);
+            }
+
             if (form.types[type]) {
                 var factory = form.factories[form.types[type]],
                     element = new factory(el, form),
@@ -70,6 +134,9 @@
             element.disabled(!on);
             if (!on) {
                 element.reset();
+                element.el.attr('checked', false).prop('value', 0);
+            } else {
+                element.el.attr('checked', true).prop('value', 1);
             }
         });
 
@@ -79,6 +146,12 @@
         if (!on) {
             element.reset();
         }
+
+        if (!on) {
+            element.el.attr('checked', false).prop('value', 0);
+        } else {
+            element.el.attr('checked', true).prop('value', 1);
+        }
     }
 
     var Form = function (el, options) {

themes/grav/scss/template/_pages.scss

@@ -203,3 +203,11 @@
         padding-left: 3rem * ($i + 1);
     }
 }
+
+.hidden {
+    display: none!important;
+}
+
+.switch-toggle input[type="radio"] {
+    display: none!important;
+}

themes/grav/templates/forms/field.html.twig

@@ -10,7 +10,7 @@
                     <span class="checkboxes toggleable" data-grav-field="toggleable" data-grav-field-name="{{ field.name|fieldName }}">
                         <input type="checkbox"
                                id="toggleable_{{ field.name }}"
-                               value="1"
+                               {% if originalValue is not null %}value="1"{% endif %}
                                name="toggleable_{{ (scope ~ field.name)|fieldName }}"
                                {% if originalValue is not null %}checked="checked"{% endif %}
                         >

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

@@ -3,26 +3,38 @@
 {% set value = (value is null ? field.default : value) %}
 {% set value = (value is same as(false) ? 0 : value) %}
 
+{% set has_hidden = false %}
+{% for key, text in field.options %}
+    {% if key is empty %}
+      {% set has_hidden = true %}
+    {% endif %}
+{% endfor %}
+
 {% block global_attributes %}
     {{ parent() }}
     data-grav-field-name="{{ field.name|fieldName }}"
 {% endblock %}
 
 {% block input %}
-    <div class="switch-toggle switch-grav {{ field.size }} switch-{{ field.options|length }}">
+
+    <div class="switch-toggle switch-grav {{ field.size }} {% if has_hidden %}switch-{{ (field.options|length)-1 }}{% else %}switch-{{ field.options|length }}{% endif %}">
         {% for key, text in field.options %}
             {% set id = "toggle_" ~ field.name ~ key %}
+            {% set hidden = '' %}
+            {% if key is empty %}
+              {% set hidden = ' hidden' %}
+            {% endif %}
             <input type="radio"
                    value="{{ key }}"
                    id="{{ id }}"
                    name="{{ (scope ~ field.name)|fieldName }}"
                    {% if field.highlight is defined %}
-                   class="{{ field.highlight == '' ~ key ? 'highlight' : '' }}"
+                   class="{{ field.highlight == '' ~ key ? 'highlight' : '' }}{{ hidden }}"
                    {% endif %}
                    {% if '' ~ key == '' ~ value %}checked="checked" {% endif %}
                    {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
             />
-            <label for="{{ id }}">{{ text }}</label>
+            <label for="{{ id }}" class="{{ hidden }}">{{ text }}</label>
         {% endfor %}
         <a></a>
     </div>