super_settings 1.0.2 → 2.0.1

data/lib/super_settings/application/scripts.js

@@ -15,8 +15,8 @@
 
   // Set the enabled status of the save button for submitting the form.
   function enableSaveButton() {
-    const saveButton = document.querySelector("#save-settings");
-    const discardButton = document.querySelector("#discard-changes");
+    const saveButton = document.querySelector("#super-settings-save-settings");
+    const discardButton = document.querySelector("#super-settings-discard-changes");
     if (saveButton) {
       const count = changesCount();
       const countSpan = saveButton.querySelector(".count");
@@ -117,6 +117,14 @@
     if (setting.description !== null && setting.description !== undefined) {
       row.querySelector(".super-settings-description .js-value-placeholder").innerHTML = escapeHTML(setting.description).replaceAll("\n", "<br>");
     }
+    if (setting.updated_at !== null && setting.updated_at !== undefined) {
+      const lastModified = new Date(Date.parse(setting.updated_at));
+      const lastModifiedFormatter = new Intl.DateTimeFormat(navigator.language, {month: "short", day: "numeric",  year: "numeric"});
+      const lastModifiedString = lastModifiedFormatter.format(lastModified);
+      const lastModifiedElement = row.querySelector(".super-settings-last-modified .js-value-placeholder")
+      lastModifiedElement.innerText = lastModifiedString;
+      lastModifiedElement.title = dateFormatter().format(lastModified);
+    }
 
     return row
   }
@@ -182,6 +190,7 @@
   function editSettingRow(setting) {
     const row = elementFromSettingTemplate(setting, "#setting-row-edit-template");
     row.dataset.id = setting.id
+    row.dataset.key = setting.key
 
     row.querySelector(".super-settings-key input").value = setting.key;
     if (setting.description) {
@@ -223,9 +232,12 @@
   }
 
   // Create a table row with form elements for creating a new setting.
-  function newSettingRow() {
+  function newSettingRow(key) {
+    if (!key) {
+      key = "";
+    }
     const randomId = "new" + Math.floor((Math.random() * 0xFFFFFFFFFFFFFF)).toString(16);
-    const setting = {id: randomId, key: "", value: "", value_type: "string", new_record: true}
+    const setting = {id: randomId, key: key, value: "", value_type: "string", new_record: true}
     row = editSettingRow(setting);
     return row;
   }
@@ -239,7 +251,7 @@
       document.querySelector("#settings-table tbody").prepend(row);
     }
     bindSettingControlEvents(row);
-    filterSettings(document.querySelector("#filter").value);
+    filterSettings(document.querySelector("#super-settings-filter").value);
     row.scrollIntoView({block: "nearest"});
     enableSaveButton();
     return row;
@@ -301,7 +313,7 @@
 
   // Programatically apply the filter again to keep it up to date with other changes.
   function applyFilter(value) {
-    const filter = document.querySelector("#filter");
+    const filter = document.querySelector("#super-settings-filter");
     if (filter) {
       if (value) {
         filter.value = value;
@@ -330,11 +342,11 @@
   function showFlash(message, success) {
     const flash = document.querySelector(".js-flash");
     if (success) {
-      flash.classList.add("text-success");
-      flash.classList.remove("text-danger");
+      flash.classList.add("super-settings-text-success");
+      flash.classList.remove("super-settings-text-danger");
     } else {
-      flash.classList.add("text-danger");
-      flash.classList.remove("text-success");
+      flash.classList.add("tsuper-settings-ext-danger");
+      flash.classList.remove("super-settings-text-success");
     }
     flash.innerText = message;
     flash.style.display = "inline-block";
@@ -378,7 +390,7 @@
     tbody.insertAdjacentHTML("beforeend", rowsHTML);
 
     if (payload.previous_page_params || payload.next_page_params) {
-      let paginationHTML = `<div class="align-center">`;
+      let paginationHTML = `<div class="super-settings-align-center">`;
       if (payload.previous_page_params) {
         paginationHTML += `<div style="float:left;"><a href="#" class="js-show-history" title="Newer" data-offset="${payload.previous_page_params.offset}" data-limit="${payload.previous_page_params.limit}" data-key="${payload.previous_page_params.key}")>&#8592; Newer</a></div>`;
       }
@@ -393,7 +405,7 @@
 
   // Show a modal window overlayed on the page.
   function showModal() {
-    const modal = document.querySelector("#modal");
+    const modal = document.querySelector("#super-settings-modal");
     const content = document.querySelector(".super-settings-modal-content");
     modal.style.display = "block";
     modal.setAttribute("aria-hidden", "false");
@@ -409,7 +421,7 @@
 
   // Hide the modal window overlayed on the page.
   function hideModal() {
-    const modal = document.querySelector("#modal");
+    const modal = document.querySelector("#super-settings-modal");
     const content = document.querySelector(".super-settings-modal-content");
     modal.style.display = "none";
     modal.setAttribute("aria-hidden", "true");
@@ -447,6 +459,33 @@
     return found;
   }
 
+  // Find a setting by key.
+  function findSettingByKey(key) {
+    let found = null;
+    activeSettings.forEach(function(setting) {
+      if (setting.key === key) {
+        found = setting;
+        return;
+      }
+    });
+    return found;
+  }
+
+  // Add a new setting.
+  function addSetting(key) {
+    const row = addRowToTable(newSettingRow(key));
+    row.querySelector(".super-settings-key input").focus();
+  }
+
+  function editSetting(setting) {
+    const row = addRowToTable(editSettingRow(setting));
+    if (row.querySelector(".super-settings-value .js-date-input")) {
+      row.querySelector(".super-settings-value .js-date-input").focus();
+    } else {
+      row.querySelector(".super-settings-value .js-setting-value").focus();
+    }
+  }
+
   /*** Event Listeners ***/
 
   // Listener for showing the setting history modal.
@@ -456,7 +495,7 @@
       return;
     }
 
-    const modal = document.querySelector("#modal");
+    const modal = document.querySelector("#super-settings-modal");
     const content = document.querySelector(".super-settings-modal-content");
     let key = event.target.dataset.key;
     if (!key) {
@@ -533,23 +572,17 @@
   }
 
   // Listener for the add setting button.
-  function addSetting(event) {
+  function addSettingListener(event) {
     event.preventDefault();
-    const row = addRowToTable(newSettingRow());
-    row.querySelector(".super-settings-key input").focus();
+    addSetting();
   }
 
   // Listener for the edit setting button.
-  function editSetting(event) {
+  function editSettingListener(event) {
     event.preventDefault();
     const id = event.target.closest("tr").dataset.id;
-    const setting = findSetting(id);
-    const row = addRowToTable(editSettingRow(setting));
-    if (row.querySelector(".super-settings-value .js-date-input")) {
-      row.querySelector(".super-settings-value .js-date-input").focus();
-    } else {
-      row.querySelector(".super-settings-value .js-setting-value").focus();
-    }
+    setting = findSetting(id);
+    editSetting(setting);
   }
 
   // Listener for the restore setting button.
@@ -592,7 +625,12 @@
     document.querySelectorAll("#settings-table tbody tr[data-edited=true]").forEach(function(row) {
       const data = {};
       settingsData.push(data);
+
       data.key = row.querySelector(".js-setting-key").value;
+      if (data.key != row.dataset.key) {
+        data.key_was = row.dataset.key;
+      }
+
       const deleted = row.querySelector(".js-setting-deleted");
       if (deleted && deleted.value === "1") {
         data.deleted = true;
@@ -635,13 +673,25 @@
   function refreshPage(event) {
     event.preventDefault();
     let url = window.location.href.replace(/\?.*/, "");
-    const filter = document.querySelector("#filter").value;
+    const filter = document.querySelector("#super-settings-filter").value;
     if (filter !== "") {
       url += "?filter=" + escape(filter);
     }
     window.location = url;
   }
 
+  // Open the setting if the URL hash includes #edit=setting.
+  function fetchEditHash() {
+    const hash = window.location.hash;
+    if (hash.startsWith("#edit=")) {
+      const name = hash.replace("#edit=", "");
+      window.location.hash = "";
+      return name;
+    } else {
+      return null;
+    }
+  }
+
   // Support integration into single page applications where OAuth2 access tokens are used.
   // The access token can be passed either in the access_token query parameter per the
   // OAuth2 standard, or in the URL hash. Passing it in the hash will prevent it from ever
@@ -680,7 +730,7 @@
   // Bind event listeners for setting controls on a setting table row.
   function bindSettingControlEvents(parent) {
     addListener(parent.querySelectorAll(".js-remove-setting"), "click", removeSetting);
-    addListener(parent.querySelectorAll(".js-edit-setting"), "click", editSetting);
+    addListener(parent.querySelectorAll(".js-edit-setting"), "click", editSettingListener);
     addListener(parent.querySelectorAll(".js-restore-setting"), "click", restoreSetting);
     addListener(parent.querySelectorAll(".js-show-history"), "click", showHistoryModal);
     addListener(parent.querySelectorAll(".js-no-op"), "click", noOp);
@@ -694,8 +744,9 @@
     const tbody = document.querySelector("#settings-table tbody");
     tbody.innerHTML = "";
     let count = settings.length;
-    settings.forEach(function(setting) {
-      const randomId = "setting" + Math.floor((Math.random() * 0xFFFFFFFFFFFFFF)).toString(16);
+
+    sortSettings(settings).forEach(function(setting) {
+      const randomId = "setting" + Math.floor((Math.random() * 0xFFFFFFFFFFFFF)).toString(16);
       setting.id = (setting.id || randomId);
       const row = settingRow(setting);
       tbody.appendChild(row);
@@ -703,12 +754,73 @@
     });
     document.querySelector(".js-settings-count").textContent = `${count} ${count === 1 ? "Setting" : "Settings"}`;
 
-    const filter = document.querySelector("#filter");
+    const filter = document.querySelector("#super-settings-filter");
     if (filter) {
       filter.dispatchEvent(new Event("input"));
     }
   }
 
+  function sortOrder() {
+    const selectedSort = document.querySelector(".super-settings-sort-control[data-selected=true]");
+    const field = selectedSort.dataset.field;
+    const order = selectedSort.dataset.order;
+    return {field: field, order: order};
+  }
+
+  // Sort settings by the selected sort option.
+  function sortSettings(settings) {
+    const sort = sortOrder();
+    return settings.sort(function(a, b) {
+      let aValue = a[sort.field];
+      let bValue = b[sort.field];
+      if (sort.field == "updated_at") {
+        aValue = new Date(Date.parse(aValue));
+        bValue = new Date(Date.parse(bValue));
+      }
+
+      if (aValue === bValue) {
+        return 0;
+      } else if (sort.order === "asc") {
+        return (aValue < bValue) ? -1 : 1;
+      } else {
+        return (aValue > bValue) ? -1 : 1;
+      }
+    })
+  }
+
+  function setSortOrder(event) {
+    event.preventDefault();
+
+    const target = event.target.closest(".super-settings-sort-control");
+    let prevSelection = document.querySelector(".super-settings-sort-control[data-selected=true]");
+
+    if (prevSelection == target) {
+      selectSortElement(prevSelection, false);
+      target.querySelector(`[data-order=${target.dataset.order}]`).style.display = "none";
+      target.dataset.order = (target.dataset.order === "asc" ? "desc" : "asc");
+      target.querySelector(`[data-order=${target.dataset.order}]`).style.display = "inline-block";
+    } else {
+      selectSortElement(prevSelection, false);
+    }
+
+    selectSortElement(target, true);
+
+    renderSettingsTable(activeSettings);
+  }
+
+  function selectSortElement(element, selected) {
+    element.dataset.selected = selected;
+
+    const svg = element.querySelector(`[data-order=${element.dataset.order}]`).querySelector("svg");
+    if (selected) {
+      svg.style.backgroundColor = getComputedStyle(document.querySelector(".super-settings")).getPropertyValue("--primary-color");
+      svg.style.fill = "white";
+    } else {
+      svg.style.backgroundColor = null;
+      svg.style.fill = null;
+    }
+  }
+
   function promptUnsavedChanges(event) {
     if (changesCount() > 0) {
       return "Are you sure you want to leave?";
@@ -726,11 +838,19 @@
     }
   }
 
-  function fetchActiveSettings() {
+  function fetchActiveSettings(editKey) {
     SuperSettingsAPI.fetchSettings(function(settings_hash) {
       const settings = settings_hash["settings"];
       activeSettings = settings;
       renderSettingsTable(settings);
+      if (editKey) {
+        const setting = findSettingByKey(editKey);
+        if (setting) {
+          editSetting(setting);
+        } else {
+          addSetting(editKey);
+        }
+      }
       enableSaveButton();
     });
   }
@@ -740,16 +860,21 @@
   docReady(function() {
     storeAccessToken();
 
-    addListener(document.querySelector("#filter"), "input", filterListener);
-    addListener(document.querySelector("#add-setting"), "click", addSetting);
-    addListener(document.querySelector("#discard-changes"), "click", refreshPage);
-    addListener(document.querySelector("#save-settings"), "click", updateSettings);
-    addListener(document.querySelector("#modal"), "click", closeModal);
+    addListener(document.querySelector("#super-settings-filter"), "input", filterListener);
+    addListener(document.querySelector("#super-settings-add-setting"), "click", addSettingListener);
+    addListener(document.querySelector("#super-settings-discard-changes"), "click", refreshPage);
+    addListener(document.querySelector("#super-settings-save-settings"), "click", updateSettings);
+    addListener(document.querySelector("#super-settings-modal"), "click", closeModal);
+    addListener(document.querySelectorAll(".super-settings-sort-control"), "click", setSortOrder);
+
+    const editKey = fetchEditHash();
 
     const queryParams = new URLSearchParams(window.location.search);
     applyFilter(queryParams.get("filter"));
 
-    fetchActiveSettings();
+    selectSortElement(document.querySelector(".super-settings-sort-control[data-selected=true]"), true);
+
+    fetchActiveSettings(editKey);
 
     window.onbeforeunload = promptUnsavedChanges;
   })

data/lib/super_settings/application/style_vars.css.erb

@@ -0,0 +1,62 @@
+.super-settings {
+  --primary-color-h: 216;
+  --primary-color-s: 98%;
+  --primary-color-l: 52%;
+  --primary-color-hsl: var(--primary-color-h), var(--primary-color-s), var(--primary-color-l);
+  --primary-color: hsl(var(--primary-color-hsl));
+  --primary-contrast-color: #fff;
+  --primary-hover-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - 10%));
+  --primary-border-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 10%));
+}
+
+<% unless color_scheme == :dark %>
+  .super-settings {
+    --edit-bg-color: #f2fdf2;
+    --deleted-row-color: darkred;
+    --deleted-row-bg-color: #ffd1d8;
+    --history-key-color: royalblue;
+    --table-header-bg-color: #fff;
+    --table-border-color: #dee2e6;
+    --alt-row-color: rgba(0, 0, 0, .05);
+    --form-control-color: #495057;
+    --form-control-bg-color: #fff;
+    --form-control-border-color: #ced4da;
+    --form-control-placeholder-color: #bbb;
+    --modal-bg-color: #fff;
+    --modal-transparency: 0.4;
+    --modal-control-color: #000;
+    --success-color: green;
+    --danger-color: firebrick;
+    --muted-color: #666;
+    --unselected-color: #666;
+  }
+<% end %>
+
+<% if color_scheme == :system %>
+  @media (prefers-color-scheme: dark) {
+<% end %>
+<% if color_scheme == :system || color_scheme == :dark %>
+  .super-settings {
+    --edit-bg-color: #8dc875;
+    --deleted-row-color: #e0b1b8;
+    --deleted-row-bg-color: #7a3636;
+    --history-key-color: #a7d6f4;
+    --table-header-bg-color: #333;
+    --table-border-color: #555;
+    --alt-row-color: rgba(0, 0, 0, .30);
+    --form-control-color: #eee;
+    --form-control-bg-color: #666;
+    --form-control-border-color: #555;
+    --form-control-placeholder-color: #aaa;
+    --modal-bg-color: #333;
+    --modal-transparency: 0.75;
+    --modal-control-color: #fff;
+    --success-color: #00ff00;
+    --danger-color: #ff0000;
+    --muted-color: #999;
+    --unselected-color: #ccc;
+  }
+<% end %>
+<% if color_scheme == :system %>
+  }
+<% end %>

data/lib/super_settings/application/styles.css

@@ -1,3 +1,10 @@
+.super-settings-container {
+  padding-left: 15px;
+  padding-right: 15px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 #settings-table td p {
   margin-top: 0;
   margin-bottom: 0.5rem;
@@ -11,13 +18,9 @@
   width: 100%;
 }
 
-.super-settings-edit-row {
-  background-color: #f2fdf2 !important;
-}
-
 #settings-table tr[data-deleted] td {
-  background-color: #ffd1d8 !important;
-  color: darkred;
+  background-color: var(--deleted-row-bg-color) !important;
+  color: var(--deleted-row-color);
   text-decoration: line-through;
 }
 
@@ -25,16 +28,49 @@
   display: none;
 }
 
+.super-settings-icon {
+  display: inline-block;
+}
+
+.super-settings-icon svg {
+  width: 100%;
+  height: 100%;
+  vertical-align: inherit;
+}
+
+.super-settings-btn-no-chrome {
+  display: inline-block;
+  vertical-align: middle;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+
+
+.super-settings-sort-control {
+  color: var(--unselected-color);
+}
+
+.super-settings-sort-control svg {
+  vertical-align: middle;
+}
+
+.super-settings-edit-row {
+  background-color: var(--edit-bg-color) !important;
+}
+
 .super-settings-key {
   overflow-wrap: break-word;
   max-width: 30rem;
-  min-width: 15rem;
+  min-width: 8rem;
 }
 
 .super-settings-value {
   overflow-wrap: break-word;
   max-width: 30rem;
-  min-width: 15rem;
+  min-width: 8rem;
 }
 
 .super-settings-value-type {
@@ -59,7 +95,34 @@
 
 .super-settings-history-key {
   font-weight: normal;
-  color: royalblue;
+  color: var(--history-key-color);
+}
+
+.super-settings-table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 1rem;
+  border-collapse: collapse;
+}
+
+.super-settings-table thead th {
+  vertical-align: bottom;
+  border-bottom: 2px solid var(--table-border-color);
+  white-space: nowrap;
+}
+
+.super-settings-table td, .super-settings-table th {
+  padding: 0.75rem;
+  vertical-align: top;
+  border-top: 1px solid var(--table-border-color);
+}
+
+.super-settings-table-striped tbody tr:nth-of-type(odd) {
+  background-color: var(--alt-row-color);
+}
+
+.super-settings-align-center {
+  text-align: center;
 }
 
 .super-settings-modal {
@@ -72,12 +135,12 @@
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgba(0,0,0,0.4);
+  background-color: rgba(0, 0, 0, var(--modal-transparency));
 }
 
 .super-settings-modal-dialog {
   margin: auto;
-  background-color: #fff;
+  background-color: var(--modal-bg-color);
   position: relative;
   outline: 0;
   padding: 2em;
@@ -99,7 +162,7 @@
   right: 0;
   border: 0;
   padding: 1ex;
-  background-color: inherit;
+  color: var(--modal-control-color);
   font-size: 1.5rem;
   font-weight: 500;
 }
@@ -122,6 +185,112 @@
 .super-settings-sticky-top {
   position: sticky;
   top: 0;
-  padding: 1rem 0;
-  background-color: white;
+  padding: 1rem;
+  background-color: var(--table-header-bg-color);
+}
+
+.super-settings-form-control {
+  font-family: inherit;
+  margin: 0;
+  overflow: visible;
+  display: block;
+  width: 100%;
+  padding: .375rem .75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--form-control-color);
+  background-color: var(--form-control-bg-color);
+  background-clip: padding-box;
+  border: 1px solid var(--form-control-border-color);
+  border-radius: .25rem;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+.super-settings-form-control::placeholder {
+  color: var(--form-control-placeholder-color);
+}
+
+select.super-settings-form-control:not([size]):not([multiple]) {
+  height: calc(2.25rem + 2px);
+}
+
+.super-settings-form-check {
+  margin-top: .5rem;
+  display: inline-block;
+}
+
+.super-settings-form-check input[type=checkbox] {
+  vertical-align: middle;
+}
+
+.super-settings-form-inline {
+  display: inline-block;
+}
+
+.super-settings-form-inline .super-settings-form-control {
+  display: inline-block;
+  width: auto;
+  vertical-align: middle;
+}
+
+.super-settings-form-control textarea {
+  font-family: inherit;
+  margin: 0;
+  overflow: auto;
+  resize: vertical;
+}
+
+.super-settings-text-success {
+  color: var(--success-color) !important;
+}
+
+.super-settings-text-danger {
+  color: var(--danger-color) !important;
+}
+
+.super-settings-text-muted {
+  color: var(--muted-color) !important;
+}
+
+.super-settings-btn {
+	display: inline-block;
+  vertical-align: middle;
+  padding: 0.375rem 0.75rem;
+	border-radius: 0.375rem;
+	border: 1px solid #dcdcdc;
+	background-color:#f9f9f9;
+	text-decoration: none;
+  text-align: center;
+	font-family: Arial, sans-serif;
+  font-size: 1rem;
+	font-weight: 400;
+  line-height: 1.5;
+  user-select: none;
+  cursor: pointer;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+.super-settings-btn:hover:not(:disabled) {
+	background-color:#e9e9e9;
+}
+.super-settings-btn:active {
+	position:relative;
+	top:1px;
+}
+.super-settings-btn:disabled {
+  opacity: 0.8;
+  cursor: not-allowed;
+}
+
+.super-settings-btn-primary {
+  background-color: var(--primary-color);
+  border-color: var(--primary-border-color);
+	color: var(--primary-contrast-color);
+}
+.super-settings-btn-primary:hover:not(:disabled) {
+	background-color: var(--primary-hover-color);
+}
+
+.super-settings-btn-primary:disabled {
+  opacity: 0.5;
 }