css: adds UI skin variants builder (only for colibris skin)

settings.json.docker

@@ -98,6 +98,8 @@
   /*
    * Skin Variants
    *
+   * Use the UI skin variants builder at /p/test#skinvariantsbuilder
+   *
    * For the colibris skin only, you can choose how to render the three main
    * containers:
    * - toolbar (top menu with icons)

settings.json.template

@@ -89,6 +89,8 @@
   /*
    * Skin Variants
    *
+   * Use the UI skin variants builder at /p/test#skinvariantsbuilder
+   *
    * For the colibris skin only, you can choose how to render the three main
    * containers:
    * - toolbar (top menu with icons)

src/static/js/skin_variants.js

@@ -0,0 +1,55 @@
+// Specific hash to display the skin variants builder popup
+if (window.location.hash.toLowerCase() == "#skinvariantsbuilder") {
+  $('#skin-variants').addClass('popup-show');
+
+  $('.skin-variant').change(function() {
+    updateSkinVariantsClasses();
+  });
+
+  var containers = ['editor', 'background', 'toolbar'];
+  var colors = ['super-light', 'light', 'dark', 'super-dark'];
+
+  updateCheckboxFromSkinClasses();
+  updateSkinVariantsClasses();
+
+  // add corresponding classes when config change
+  function updateSkinVariantsClasses() {
+    var domsToUpdate = [
+      $('html'),
+      $('iframe[name=ace_outer]').contents().find('html'),
+      $('iframe[name=ace_outer]').contents().find('iframe[name=ace_inner]').contents().find('html')
+    ];
+    colors.forEach(function(color) {
+      containers.forEach(function(container) {
+        domsToUpdate.forEach(function(el) { el.removeClass(color + '-' + container); });
+      })
+    })
+
+    domsToUpdate.forEach(function(el) { el.removeClass('full-width-editor'); });
+
+    var new_classes = [];
+    $('.skin-variant-color').each(function() {
+      new_classes.push($(this).val() + "-" + $(this).data('container'));
+    })
+    if ($('#skin-variant-full-width').is(':checked')) new_classes.push("full-width-editor");
+
+    domsToUpdate.forEach(function(el) { el.addClass(new_classes.join(" ")); });
+
+    $('#skin-variants-result').val('"skinVariants": "' + new_classes.join(" ") + '"');
+  }
+
+  // run on init
+  function updateCheckboxFromSkinClasses() {
+    $('html').attr('class').split(' ').forEach(function(classItem) {
+      var container = classItem.split('-').slice(-1);
+
+      var container = classItem.substring(classItem.lastIndexOf("-") + 1, classItem.length);
+      if (containers.indexOf(container) > -1) {
+        var color = classItem.substring(0, classItem.lastIndexOf("-"));
+        $('.skin-variant-color[data-container="' + container + '"').val(color);
+      }
+    })
+
+    $('#skin-variant-full-width').prop('checked', $('html').hasClass('full-width-editor'));
+  }
+}

src/templates/pad.html

@@ -387,6 +387,40 @@
         </div>
       </div>
 
+      <!------------------------------------------------------------------>
+      <!-- SKIN VARIANTS BUILDER (Customize rendering, only for admins) -->
+      <!------------------------------------------------------------------>
+      <% if (settings.skinName == 'colibris') { %>
+      <div id="skin-variants" class="popup"><div class="popup-content">
+        <h1>Skin Builder</h1>
+
+        <div class="dropdowns-container">
+        <% containers = [ "toolbar", "background", "editor" ]; %>
+        <% for(var i=0; i < containers.length; i++) { %>
+          <p class="dropdown-line">
+            <label class="skin-variant-container"><%=containers[i]%></label>
+            <select class="skin-variant skin-variant-color" data-container="<%=containers[i]%>">
+              <option value="super-light">Super Light</option>
+              <option value="light">Light</option>
+              <option value="dark">Dark</option>
+              <option value="super-dark">Super Dark</option>
+            </select>
+          </p>
+        <% } %>
+        </div>
+
+        <p>
+            <input type="checkbox" id="skin-variant-full-width" class="skin-variant"/>
+            <label for="skin-variant-full-width">Full Width Editor</label>
+        </p>
+
+        <p>
+          <label>Result to copy in settings.json</label>
+          <input id="skin-variants-result" type="text" readonly class="disabled" />
+        </p>
+      </div></div>
+      <% } %>
+
       <% e.end_block(); %>
 
   </div> <!-- End of #editorcontainerbox -->
@@ -472,6 +506,8 @@
         chat = require('ep_etherpad-lite/static/js/chat').chat;
         padeditbar = require('ep_etherpad-lite/static/js/pad_editbar').padeditbar;
         padimpexp = require('ep_etherpad-lite/static/js/pad_impexp').padimpexp;
+        require('ep_etherpad-lite/static/js/skin_variants');
+
       }());
       // @license-end
   </script>