From c8536ae2646dd78b7ce1096e4223cc64bf751174 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 4 Sep 2020 16:43:27 +0200
Subject: [PATCH] add live preview of settings

---
 css/admin.css                     | 13 +++++++++++++
 src/admin.js                      | 28 ++++++++++++++++++++++++----
 templates/settings/admin-form.php | 18 +++++++++++-------
 3 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/css/admin.css b/css/admin.css
index 03793b0..aa40b92 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -51,3 +51,16 @@
 .side-menu-display.is-active {
     border: 2px solid #91cb7f;
 }
+
+.info {
+    margin-top: 8px;
+    padding: 5px;
+    background: #91cb7f;
+    color: #fff;
+    border-radius: var(--border-radius);
+}
+
+#side-menu-section h2 small {
+    font-size: 11px;
+    font-weight: normal;
+}
diff --git a/src/admin.js b/src/admin.js
index f009720..259e533 100644
--- a/src/admin.js
+++ b/src/admin.js
@@ -92,10 +92,30 @@ jQuery(document).ready(() => {
     });
 
     jQuery('.side-menu-display').on('click', (event) => {
-        jQuery('.side-menu-display').removeClass('is-active')
-        jQuery(event.target).addClass('is-active')
+        var target = jQuery(event.target)
 
-        jQuery('#side-menu-always-displayed').val(jQuery(event.target).attr('data-alwaysdiplayed'))
-        jQuery('#side-menu-big-menu').val(jQuery(event.target).attr('data-bigmenu'))
+        jQuery('.side-menu-display').removeClass('is-active')
+        target.addClass('is-active')
+
+        jQuery('#side-menu-always-displayed').val(target.attr('data-alwaysdiplayed'))
+        jQuery('#side-menu-big-menu').val(target.attr('data-bigmenu'))
+    })
+
+    jQuery('.side-menu-setting-live').on('change', (event) => {
+        var target = jQuery(event.target)
+        var name = target.attr('name')
+        var value = target.val()
+
+        if (name === 'opener') {
+            var url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
+
+            value = `url(${url})`;
+        }
+
+        if (name === 'icon-invert-filter' || name === 'icon-opacity') {
+            value/=100;
+        }
+
+        document.documentElement.style.setProperty('--side-menu-' + name, value)
     })
 });
diff --git a/templates/settings/admin-form.php b/templates/settings/admin-form.php
index d69d698..8ad4264 100644
--- a/templates/settings/admin-form.php
+++ b/templates/settings/admin-form.php
@@ -37,6 +37,8 @@ $choicesSizes = [
     <div class="section">
         <h2>
             <?php p($l->t('Colors')); ?>
+
+            <small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
         </h2>
 
         <div>
@@ -49,13 +51,13 @@ $choicesSizes = [
                 id="side-menu-background-color"
                 name="background-color"
                 type="color"
-                class="side-menu-setting"
+                class="side-menu-setting side-menu-setting-live"
                 value="<?php print_unescaped($_['background-color']); ?>">
             <input
                 id="side-menu-background-color-to"
                 name="background-color-to"
                 type="color"
-                class="side-menu-setting"
+                class="side-menu-setting side-menu-setting-live"
                 value="<?php print_unescaped($_['background-color-to']); ?>">
         </div>
 
@@ -69,7 +71,7 @@ $choicesSizes = [
                 id="side-menu-current-app-background-color"
                 name="current-app-background-color"
                 type="color"
-                class="side-menu-setting"
+                class="side-menu-setting side-menu-setting-live"
                 value="<?php print_unescaped($_['current-app-background-color']); ?>">
         </div>
 
@@ -83,7 +85,7 @@ $choicesSizes = [
                 id="side-menu-text-color"
                 name="text-color"
                 type="color"
-                class="side-menu-setting"
+                class="side-menu-setting side-menu-setting-live"
                 value="<?php print_unescaped($_['text-color']); ?>">
         </div>
 
@@ -117,7 +119,7 @@ $choicesSizes = [
                 min="0" max="100"
                 id="side-menu-icon-invert-filter"
                 name="icon-invert-filter"
-                class="side-menu-setting"
+                class="side-menu-setting side-menu-setting-live"
                 value="<?php echo $_['icon-invert-filter'] ?>"
             >
 
@@ -136,7 +138,7 @@ $choicesSizes = [
                 min="0" max="100"
                 id="side-menu-icon-opacity"
                 name="icon-opacity"
-                class="side-menu-setting"
+                class="side-menu-setting side-menu-setting-live"
                 value="<?php echo $_['icon-opacity'] ?>"
             >
 
@@ -165,11 +167,13 @@ $choicesSizes = [
         <div>
             <label for="side-menu-opener">
                 <?php p($l->t('Icon')); ?>
+
+                <small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
             </label>
         </div>
 
         <div>
-            <select id="side-menu-opener" name="opener" class="side-menu-setting">
+            <select id="side-menu-opener" name="opener" class="side-menu-setting side-menu-setting-live">
                 <?php foreach ($choices as $label => $value): ?>
                     <option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
                         <?php echo $l->t($label);  ?>