removes links and clear placeholders for now

It works well, but is too much noise for the value
This commit is contained in:
jjaffeux 2020-04-22 12:41:42 +02:00
parent e49d7411e5
commit 81bbc2080a
3 changed files with 0 additions and 125 deletions

View File

@ -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"] { div.d-wrap[data-wrap="placeholder"] {
margin: 1em 0; margin: 1em 0;
} }

View File

@ -1,4 +1,3 @@
import { iconHTML } from "discourse-common/lib/icon-library";
import showModal from "discourse/lib/show-modal"; import showModal from "discourse/lib/show-modal";
import { withPluginApi } from "discourse/lib/plugin-api"; import { withPluginApi } from "discourse/lib/plugin-api";
import { later, debounce } from "@ember/runloop"; 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"])'; 'h1, h2, h3, h4, h5, h6, p > *:not([data-wrap="placeholder"]), code, blockquote, .md-table, li > *:not([data-wrap="placeholder"])';
const DELIMITER = "="; 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) { function buildInput(key, placeholder) {
const input = document.createElement("input"); const input = document.createElement("input");
input.classList.add("discourse-placeholder-value"); input.classList.add("discourse-placeholder-value");
@ -80,20 +59,6 @@ function buildSelect(key, placeholder) {
return select; 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 { export default {
name: "discourse-placeholder-theme-component", name: "discourse-placeholder-theme-component",
@ -104,8 +69,6 @@ export default {
if (!postWidget) return; if (!postWidget) return;
const postIdentifier = `d-placeholder-${postWidget.widget.attrs.topicId}-${postWidget.widget.attrs.id}-`; const postIdentifier = `d-placeholder-${postWidget.widget.attrs.topicId}-${postWidget.widget.attrs.id}-`;
const clearButton = buildClearButton();
clearButton.addEventListener("click", _clearPlaceholders);
const mappings = []; const mappings = [];
const placeholders = {}; const placeholders = {};
@ -126,7 +89,6 @@ export default {
let newValue; let newValue;
if (value && value.length && value !== "none") { if (value && value.length && value !== "none") {
newValue = value; newValue = value;
clearButton.disabled = false;
} else { } else {
newValue = `${placeholder.delimiter}${key}${placeholder.delimiter}`; newValue = `${placeholder.delimiter}${key}${placeholder.delimiter}`;
} }
@ -206,10 +168,6 @@ export default {
const value = const value =
$.cookie(placeholderIdentifier) || placeholder.default; $.cookie(placeholderIdentifier) || placeholder.default;
if (value) {
clearButton.disabled = false;
}
processChange({ processChange({
target: { target: {
value, 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( const placeholderNodes = $cooked[0].querySelectorAll(
".d-wrap[data-wrap=placeholder]:not(.placeholdered)" ".d-wrap[data-wrap=placeholder]:not(.placeholdered)"
); );
if (placeholderNodes.length) {
$cooked[0].prepend(
buildPlaceholderUI($cooked[0], clearButton, placeholderNodes)
);
}
placeholderNodes.forEach(elem => { placeholderNodes.forEach(elem => {
const dataKey = elem.dataset.key; const dataKey = elem.dataset.key;
if (!dataKey) return; if (!dataKey) return;
elem.id = `placeholder-key-${dataKey}`;
const placeholderIdentifier = `${postIdentifier}${dataKey}`; const placeholderIdentifier = `${postIdentifier}${dataKey}`;
const valueFromCookie = $.cookie(placeholderIdentifier); const valueFromCookie = $.cookie(placeholderIdentifier);
const defaultValues = (elem.dataset.defaults || "") const defaultValues = (elem.dataset.defaults || "")

View File

@ -1,11 +1,3 @@
.placeholder-ui {
flex-direction: column;
.placeholders-container {
max-width: 100%;
}
}
.d-wrap[data-wrap="placeholder"] { .d-wrap[data-wrap="placeholder"] {
.discourse-placeholder-name { .discourse-placeholder-name {
width: 50%; width: 50%;