diff --git a/common/common.scss b/common/common.scss index c7c48ab..a3380cc 100644 --- a/common/common.scss +++ b/common/common.scss @@ -1,43 +1,3 @@ -.placeholder-ui { - display: flex; - justify-content: space-between; - padding: 1em; - background-color: blend-primary-secondary(5%); - border: 1px solid $primary-low; - align-items: center; - margin-bottom: 0.5em; - - .clear-placeholder { - svg { - pointer-events: none; - } - } - - .placeholders-container { - max-width: 90%; - margin: -1em 1em 0 0; - display: flex; - flex-wrap: wrap; - flex: 1; - align-items: center; - justify-content: flex-start; - - a { - font-size: $font-down-1; - padding: 0.25em; - background: $primary-low; - border-radius: 3px; - color: $primary-medium; - margin-top: 1em; - margin-right: 1em; - - &:hover { - background: $primary-low-mid; - } - } - } -} - div.d-wrap[data-wrap="placeholder"] { margin: 1em 0; } diff --git a/javascripts/discourse/initializers/setup.js.es6 b/javascripts/discourse/initializers/setup.js.es6 index df0b6b7..2a38353 100644 --- a/javascripts/discourse/initializers/setup.js.es6 +++ b/javascripts/discourse/initializers/setup.js.es6 @@ -1,4 +1,3 @@ -import { iconHTML } from "discourse-common/lib/icon-library"; import showModal from "discourse/lib/show-modal"; import { withPluginApi } from "discourse/lib/plugin-api"; import { later, debounce } from "@ember/runloop"; @@ -7,26 +6,6 @@ const VALID_TAGS = 'h1, h2, h3, h4, h5, h6, p > *:not([data-wrap="placeholder"]), code, blockquote, .md-table, li > *:not([data-wrap="placeholder"])'; const DELIMITER = "="; -function buildPlaceholderUI(element, clearButton, placeholderNodes) { - const ui = document.createElement("div"); - ui.classList.add("placeholder-ui"); - - const placeholdersContainer = document.createElement("div"); - placeholdersContainer.classList.add("placeholders-container"); - - placeholderNodes.forEach(placeholderNode => { - const link = document.createElement("a"); - link.href = `#placeholder-key-${placeholderNode.dataset.key}`; - link.innerText = placeholderNode.dataset.key; - placeholdersContainer.append(link); - }); - - ui.appendChild(placeholdersContainer); - ui.appendChild(clearButton); - - return ui; -} - function buildInput(key, placeholder) { const input = document.createElement("input"); input.classList.add("discourse-placeholder-value"); @@ -80,20 +59,6 @@ function buildSelect(key, placeholder) { return select; } -function buildClearButton() { - const clearButton = document.createElement("button"); - clearButton.innerHTML = iconHTML("trash-alt"); - clearButton.classList.add( - "clear-placeholder", - "btn", - "no-text", - "btn-default", - "btn-primary" - ); - clearButton.disabled = true; - return clearButton; -} - export default { name: "discourse-placeholder-theme-component", @@ -104,8 +69,6 @@ export default { if (!postWidget) return; const postIdentifier = `d-placeholder-${postWidget.widget.attrs.topicId}-${postWidget.widget.attrs.id}-`; - const clearButton = buildClearButton(); - clearButton.addEventListener("click", _clearPlaceholders); const mappings = []; const placeholders = {}; @@ -126,7 +89,6 @@ export default { let newValue; if (value && value.length && value !== "none") { newValue = value; - clearButton.disabled = false; } else { newValue = `${placeholder.delimiter}${key}${placeholder.delimiter}`; } @@ -206,10 +168,6 @@ export default { const value = $.cookie(placeholderIdentifier) || placeholder.default; - if (value) { - clearButton.disabled = false; - } - processChange({ target: { value, @@ -223,50 +181,15 @@ export default { } } - function _clearPlaceholders(event) { - $cooked[0] - .querySelectorAll( - ".discourse-placeholder-value, .discourse-placeholder-select" - ) - .forEach(node => { - $.removeCookie(`${postIdentifier}${node.dataset.key}`); - node.value = - node.parentNode.dataset.default || - (node.tagName === "SELECT" ? "none" : ""); - - processChange({ - target: { - value: - node.parentNode.dataset.default || - (node.tagName === "SELECT" ? "none" : ""), - dataset: { - key: node.dataset.key, - delimiter: node.dataset.delimiter - } - } - }); - }); - - event.target.disabled = true; - } - const placeholderNodes = $cooked[0].querySelectorAll( ".d-wrap[data-wrap=placeholder]:not(.placeholdered)" ); - if (placeholderNodes.length) { - $cooked[0].prepend( - buildPlaceholderUI($cooked[0], clearButton, placeholderNodes) - ); - } - placeholderNodes.forEach(elem => { const dataKey = elem.dataset.key; if (!dataKey) return; - elem.id = `placeholder-key-${dataKey}`; - const placeholderIdentifier = `${postIdentifier}${dataKey}`; const valueFromCookie = $.cookie(placeholderIdentifier); const defaultValues = (elem.dataset.defaults || "") diff --git a/mobile/mobile.scss b/mobile/mobile.scss index 12f83ee..52b2cf6 100644 --- a/mobile/mobile.scss +++ b/mobile/mobile.scss @@ -1,11 +1,3 @@ -.placeholder-ui { - flex-direction: column; - - .placeholders-container { - max-width: 100%; - } -} - .d-wrap[data-wrap="placeholder"] { .discourse-placeholder-name { width: 50%;