REFACTOR: various code/UI/UX changes and refactorings
- ability to clear placeholders - builder UI - link to placeholder - improve styles
This commit is contained in:
jjaffeux
parent
6f46840fb1
commit
3726aa75e3
|
|
@ -1,9 +1,53 @@
|
||||||
.d-wrap[data-wrap=placeholder] {
|
.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: space-between;
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: $font-down-1;
|
||||||
|
padding: 0.25em;
|
||||||
|
background: $primary-low;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: $primary-medium;
|
||||||
|
margin-top: 1em;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $primary-low-mid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div.d-wrap[data-wrap="placeholder"] {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-wrap[data-wrap="placeholder"] {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
border: 1px solid $primary-medium;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
border-left: 5px solid $primary-low;
|
||||||
|
background-color: blend-primary-secondary(5%);
|
||||||
|
|
||||||
.discourse-placeholder-name {
|
.discourse-placeholder-name {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
|
@ -12,15 +56,29 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
|
min-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
.discourse-placeholder-name {
|
||||||
|
font-size: $font-down-1;
|
||||||
|
color: dark-light-choose($primary-high, $secondary-low);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discourse-placeholder-value,
|
.discourse-placeholder-value,
|
||||||
.discourse-placeholder-select {
|
.discourse-placeholder-select {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
margin-left: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discourse-placeholder-value {
|
.discourse-placeholder-value {
|
||||||
width: 100%;
|
width: 350px;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
line-height: $line-height-small;
|
line-height: $line-height-small;
|
||||||
color: $primary;
|
color: $primary;
|
||||||
|
|
@ -29,7 +87,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.discourse-placeholder-select {
|
.discourse-placeholder-select {
|
||||||
width: 100%;
|
width: 350px;
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
line-height: $line-height-small;
|
line-height: $line-height-small;
|
||||||
color: $primary;
|
color: $primary;
|
||||||
|
|
@ -37,3 +95,22 @@
|
||||||
border: 1px solid $primary-medium;
|
border: 1px solid $primary-medium;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.discourse-placeholder-builder-modal {
|
||||||
|
.input {
|
||||||
|
input {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.multi-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: $font-down-1;
|
||||||
|
color: $primary-medium;
|
||||||
|
margin: 0.25em 0 1em 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,233 +0,0 @@
|
||||||
<script type="text/discourse-plugin" version="0.8.30">
|
|
||||||
api.decorateCooked(($cooked, postWidget) => {
|
|
||||||
const VALID_TAGS = "h1, h2, h3, h4, h5, h6, p, code, blockquote, .md-table, li";
|
|
||||||
const DELIMITER = "=";
|
|
||||||
const mappings = [];
|
|
||||||
const placeholders = {};
|
|
||||||
|
|
||||||
// http://davidwalsh.name/javascript-debounce-function
|
|
||||||
function debounce(func, wait, immediate) {
|
|
||||||
let timeout;
|
|
||||||
|
|
||||||
return function() {
|
|
||||||
const context = this,
|
|
||||||
args = arguments;
|
|
||||||
|
|
||||||
const later = function() {
|
|
||||||
timeout = null;
|
|
||||||
if (!immediate) func.apply(context, args);
|
|
||||||
};
|
|
||||||
|
|
||||||
const callNow = immediate && !timeout;
|
|
||||||
|
|
||||||
clearTimeout(timeout);
|
|
||||||
timeout = setTimeout(later, wait);
|
|
||||||
|
|
||||||
if (callNow) func.apply(context, args);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function processChange($cooked, inputEvent, mappings) {
|
|
||||||
const value = inputEvent.target.value;
|
|
||||||
const key = inputEvent.target.dataset.key;
|
|
||||||
const delimiter = inputEvent.target.dataset.delimiter;
|
|
||||||
|
|
||||||
if (postWidget) {
|
|
||||||
const placeholderIdentifier = `d-placeholder-${postWidget.widget.attrs.topicId}-${postWidget.widget.attrs.id}-${key}`;
|
|
||||||
if (value) {
|
|
||||||
$.cookie(placeholderIdentifier, value);
|
|
||||||
} else {
|
|
||||||
$.removeCookie(placeholderIdentifier);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let newValue;
|
|
||||||
if (value && value.length && value !== "none") {
|
|
||||||
newValue = value;
|
|
||||||
} else {
|
|
||||||
newValue = `${delimiter}${key}${delimiter}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
$cooked.find(VALID_TAGS).each((index, elem) => {
|
|
||||||
let replaced = false;
|
|
||||||
const mapping = mappings[index];
|
|
||||||
let newInnnerHTML = elem.innerHTML;
|
|
||||||
let diff = 0;
|
|
||||||
|
|
||||||
if (!mapping) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
mapping.forEach(m => {
|
|
||||||
if (m.pattern !== `${delimiter}${key}${delimiter}`) {
|
|
||||||
m.position = m.position + diff;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
replaced = true;
|
|
||||||
|
|
||||||
const previousLength = m.length;
|
|
||||||
const prefix = newInnnerHTML.slice(0, m.position + diff);
|
|
||||||
const suffix = newInnnerHTML.slice(
|
|
||||||
m.position + diff + m.length,
|
|
||||||
newInnnerHTML.length
|
|
||||||
);
|
|
||||||
newInnnerHTML = `${prefix}${newValue}${suffix}`;
|
|
||||||
|
|
||||||
m.length = newValue.length;
|
|
||||||
m.position = m.position + diff;
|
|
||||||
diff = diff + newValue.length - previousLength;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (replaced) {
|
|
||||||
elem.innerHTML = newInnnerHTML;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function addSelectOption(select, options = {}) {
|
|
||||||
const option = document.createElement("option");
|
|
||||||
option.classList.add("discourse-placeholder-option");
|
|
||||||
option.value = options.value;
|
|
||||||
option.text = options.description || options.value;
|
|
||||||
|
|
||||||
if (options.selected) {
|
|
||||||
option.setAttribute("selected", true);
|
|
||||||
}
|
|
||||||
|
|
||||||
select.appendChild(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
function processPlaceholders(placeholders, $cooked, mappings) {
|
|
||||||
mappings.length = 0;
|
|
||||||
|
|
||||||
const keys = Object.keys(placeholders);
|
|
||||||
const pattern = keys.map(key => {
|
|
||||||
const placeholder = placeholders[key];
|
|
||||||
return `(${placeholder.delimiter}${key}${placeholder.delimiter})`;
|
|
||||||
}).join("|");
|
|
||||||
const regex = new RegExp(pattern, "g");
|
|
||||||
|
|
||||||
$cooked.find(VALID_TAGS).each((index, elem) => {
|
|
||||||
const innerHTML = elem.innerHTML;
|
|
||||||
let match;
|
|
||||||
|
|
||||||
mappings[index] = mappings[index] || [];
|
|
||||||
|
|
||||||
while ((match = regex.exec(innerHTML)) != null) {
|
|
||||||
mappings[index].push({
|
|
||||||
pattern: match[0],
|
|
||||||
position: match.index,
|
|
||||||
length: match[0].length
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$cooked.find(".d-wrap[data-wrap=placeholder]:not(.placeholdered)").each((index, elem) => {
|
|
||||||
const dataKey = elem.dataset.key;
|
|
||||||
if (!dataKey) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let valueFromCookie;
|
|
||||||
if (postWidget) {
|
|
||||||
const placeholderIdentifier = `d-placeholder-${postWidget.widget.attrs.topicId}-${postWidget.widget.attrs.id}`;
|
|
||||||
valueFromCookie = $.cookie(`${placeholderIdentifier}-${dataKey}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const defaultValue = valueFromCookie || elem.dataset.default;
|
|
||||||
const defaultValues = (elem.dataset.defaults || "").split(",").filter(x => x);
|
|
||||||
const description = elem.dataset.description;
|
|
||||||
const delimiter = elem.dataset.delimiter || DELIMITER;
|
|
||||||
|
|
||||||
placeholders[dataKey] = {
|
|
||||||
default: defaultValue,
|
|
||||||
defaults: defaultValues,
|
|
||||||
delimiter,
|
|
||||||
description
|
|
||||||
}
|
|
||||||
|
|
||||||
elem.classList.add("placeholdered")
|
|
||||||
|
|
||||||
const span = document.createElement("span");
|
|
||||||
span.classList.add("discourse-placeholder-name")
|
|
||||||
span.innerText = dataKey;
|
|
||||||
elem.appendChild(span)
|
|
||||||
|
|
||||||
if (defaultValues && defaultValues.length) {
|
|
||||||
const select = document.createElement("select");
|
|
||||||
select.classList.add("discourse-placeholder-select")
|
|
||||||
select.dataset.key = dataKey;
|
|
||||||
select.dataset.delimiter = delimiter;
|
|
||||||
|
|
||||||
if (description) {
|
|
||||||
addSelectOption(select, { value: "none", description });
|
|
||||||
}
|
|
||||||
|
|
||||||
defaultValues.forEach(value =>
|
|
||||||
addSelectOption(select, {
|
|
||||||
value,
|
|
||||||
selected: defaultValue === value
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
elem.appendChild(select);
|
|
||||||
} else {
|
|
||||||
const input = document.createElement("input");
|
|
||||||
input.classList.add("discourse-placeholder-value")
|
|
||||||
input.dataset.key = dataKey;
|
|
||||||
input.dataset.delimiter = delimiter;
|
|
||||||
|
|
||||||
if (description) {
|
|
||||||
input.setAttribute("placeholder", description);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (valueFromCookie || defaultValue) {
|
|
||||||
input.value = valueFromCookie || defaultValue;
|
|
||||||
}
|
|
||||||
|
|
||||||
elem.appendChild(input)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
$cooked
|
|
||||||
.on(
|
|
||||||
"input",
|
|
||||||
".discourse-placeholder-value",
|
|
||||||
debounce(inputEvent => {
|
|
||||||
processChange($cooked, inputEvent, mappings);
|
|
||||||
}, 250)
|
|
||||||
)
|
|
||||||
.on(
|
|
||||||
"change",
|
|
||||||
".discourse-placeholder-select",
|
|
||||||
debounce(inputEvent => {
|
|
||||||
processChange($cooked, inputEvent, mappings);
|
|
||||||
}, 250)
|
|
||||||
);
|
|
||||||
|
|
||||||
Ember.run.later(() => {
|
|
||||||
if (Object.keys(placeholders).length > 0) {
|
|
||||||
processPlaceholders(placeholders, $cooked, mappings);
|
|
||||||
}
|
|
||||||
|
|
||||||
// trigger fake event to setup initial state
|
|
||||||
Object.keys(placeholders).forEach(placeholderKey => {
|
|
||||||
const placeholder = placeholders[placeholderKey];
|
|
||||||
|
|
||||||
const value =
|
|
||||||
placeholder.default ||
|
|
||||||
(placeholder.defaults.length && !placeholder.description
|
|
||||||
? placeholder.defaults[0]
|
|
||||||
: null);
|
|
||||||
|
|
||||||
processChange(
|
|
||||||
$cooked,
|
|
||||||
{ target: { value, dataset: { key: placeholderKey, delimiter: placeholder.delimiter } } },
|
|
||||||
mappings
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}, 500);
|
|
||||||
}, { id: "discourse-placeholder-theme-component" });
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
import Controller from "@ember/controller";
|
||||||
|
import ModalFunctionality from "discourse/mixins/modal-functionality";
|
||||||
|
import EmberObject, { action } from "@ember/object";
|
||||||
|
import { isBlank } from "@ember/utils";
|
||||||
|
|
||||||
|
export default Controller.extend(ModalFunctionality, {
|
||||||
|
form: null,
|
||||||
|
|
||||||
|
onShow() {
|
||||||
|
this.set(
|
||||||
|
"form",
|
||||||
|
EmberObject.create({
|
||||||
|
key: null,
|
||||||
|
description: null,
|
||||||
|
values: []
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
onClose() {},
|
||||||
|
|
||||||
|
@action
|
||||||
|
insertPlaceholder() {
|
||||||
|
if (isBlank(this.form.key)) {
|
||||||
|
bootbox.alert(I18n.t(themePrefix("builder.errors.no_key")));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let output = `[wrap=placeholder key="${this.form.key}"`;
|
||||||
|
|
||||||
|
if (this.form.description) {
|
||||||
|
output = `${output} description="${this.form.description}"`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.form.values.length) {
|
||||||
|
if (this.form.values.length === 1) {
|
||||||
|
output = `${output} default="${this.form.values.firstObject}"`;
|
||||||
|
} else {
|
||||||
|
output = `${output} defaults="${this.form.values.join(",")}"`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.model.toolbarEvent.addText(`${output}][/wrap]`);
|
||||||
|
|
||||||
|
this.send("closeModal");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,318 @@
|
||||||
|
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";
|
||||||
|
|
||||||
|
const VALID_TAGS = "h1, h2, h3, h4, h5, h6, p, code, blockquote, .md-table, li";
|
||||||
|
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");
|
||||||
|
input.dataset.key = key;
|
||||||
|
input.dataset.delimiter = placeholder.delimiter;
|
||||||
|
|
||||||
|
if (placeholder.description) {
|
||||||
|
input.setAttribute("placeholder", placeholder.description);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (placeholder.default) {
|
||||||
|
input.value = placeholder.default;
|
||||||
|
}
|
||||||
|
|
||||||
|
return input;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addSelectOption(select, options = {}) {
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.classList.add("discourse-placeholder-option");
|
||||||
|
option.value = options.value;
|
||||||
|
option.text = options.description || options.value;
|
||||||
|
|
||||||
|
if (options.selected) {
|
||||||
|
option.setAttribute("selected", true);
|
||||||
|
}
|
||||||
|
|
||||||
|
select.appendChild(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildSelect(key, placeholder) {
|
||||||
|
const select = document.createElement("select");
|
||||||
|
select.classList.add("discourse-placeholder-select");
|
||||||
|
select.dataset.key = key;
|
||||||
|
select.dataset.delimiter = placeholder.delimiter;
|
||||||
|
|
||||||
|
if (placeholder.description) {
|
||||||
|
addSelectOption(select, {
|
||||||
|
value: "none",
|
||||||
|
description: placeholder.description
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
placeholder.defaults.forEach(value =>
|
||||||
|
addSelectOption(select, {
|
||||||
|
value,
|
||||||
|
selected: placeholder.default === value
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
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",
|
||||||
|
|
||||||
|
initialize() {
|
||||||
|
withPluginApi("0.8.7", api => {
|
||||||
|
api.decorateCooked(
|
||||||
|
($cooked, postWidget) => {
|
||||||
|
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 = {};
|
||||||
|
|
||||||
|
function processChange(inputEvent) {
|
||||||
|
const value = inputEvent.target.value;
|
||||||
|
const key = inputEvent.target.dataset.key;
|
||||||
|
const delimiter = inputEvent.target.dataset.delimiter;
|
||||||
|
const placeholderIdentifier = `${postIdentifier}${key}`;
|
||||||
|
|
||||||
|
if (value) {
|
||||||
|
$.cookie(placeholderIdentifier, value);
|
||||||
|
} else {
|
||||||
|
$.removeCookie(placeholderIdentifier);
|
||||||
|
}
|
||||||
|
|
||||||
|
let newValue;
|
||||||
|
if (value && value.length && value !== "none") {
|
||||||
|
newValue = value;
|
||||||
|
clearButton.disabled = false;
|
||||||
|
} else {
|
||||||
|
newValue = `${delimiter}${key}${delimiter}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
$cooked.find(VALID_TAGS).each((index, elem) => {
|
||||||
|
const mapping = mappings[index];
|
||||||
|
|
||||||
|
if (!mapping) return;
|
||||||
|
|
||||||
|
let diff = 0;
|
||||||
|
let replaced = false;
|
||||||
|
let newInnnerHTML = elem.innerHTML;
|
||||||
|
|
||||||
|
mapping.forEach(m => {
|
||||||
|
if (m.pattern !== `${delimiter}${key}${delimiter}`) {
|
||||||
|
m.position = m.position + diff;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
replaced = true;
|
||||||
|
|
||||||
|
const previousLength = m.length;
|
||||||
|
const prefix = newInnnerHTML.slice(0, m.position + diff);
|
||||||
|
const suffix = newInnnerHTML.slice(
|
||||||
|
m.position + diff + m.length,
|
||||||
|
newInnnerHTML.length
|
||||||
|
);
|
||||||
|
newInnnerHTML = `${prefix}${newValue}${suffix}`;
|
||||||
|
|
||||||
|
m.length = newValue.length;
|
||||||
|
m.position = m.position + diff;
|
||||||
|
diff = diff + newValue.length - previousLength;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (replaced) elem.innerHTML = newInnnerHTML;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function processPlaceholders() {
|
||||||
|
mappings.length = 0;
|
||||||
|
|
||||||
|
const keys = Object.keys(placeholders);
|
||||||
|
const pattern = keys
|
||||||
|
.map(key => {
|
||||||
|
const placeholder = placeholders[key];
|
||||||
|
return `(${placeholder.delimiter}${key}${placeholder.delimiter})`;
|
||||||
|
})
|
||||||
|
.join("|");
|
||||||
|
const regex = new RegExp(pattern, "g");
|
||||||
|
|
||||||
|
$cooked.find(VALID_TAGS).each((index, elem) => {
|
||||||
|
let match;
|
||||||
|
|
||||||
|
mappings[index] = mappings[index] || [];
|
||||||
|
|
||||||
|
while ((match = regex.exec(elem.innerHTML)) != null) {
|
||||||
|
mappings[index].push({
|
||||||
|
pattern: match[0],
|
||||||
|
position: match.index,
|
||||||
|
length: match[0].length
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function _fillPlaceholders() {
|
||||||
|
if (Object.keys(placeholders).length > 0) {
|
||||||
|
processPlaceholders(placeholders, $cooked, mappings);
|
||||||
|
|
||||||
|
// trigger fake event to setup initial state
|
||||||
|
Object.keys(placeholders).forEach(placeholderKey => {
|
||||||
|
const placeholder = placeholders[placeholderKey];
|
||||||
|
const placeholderIdentifier = `${postIdentifier}${placeholderKey}`;
|
||||||
|
const value = $.cookie(placeholderIdentifier);
|
||||||
|
|
||||||
|
if (value) {
|
||||||
|
clearButton.disabled = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
processChange({
|
||||||
|
target: {
|
||||||
|
value,
|
||||||
|
dataset: {
|
||||||
|
key: placeholderKey,
|
||||||
|
delimiter: placeholder.delimiter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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" : "");
|
||||||
|
});
|
||||||
|
|
||||||
|
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 || "")
|
||||||
|
.split(",")
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
|
placeholders[dataKey] = {
|
||||||
|
default: valueFromCookie || elem.dataset.default,
|
||||||
|
defaults: defaultValues,
|
||||||
|
delimiter: elem.dataset.delimiter || DELIMITER,
|
||||||
|
description: elem.dataset.description
|
||||||
|
};
|
||||||
|
|
||||||
|
const span = document.createElement("span");
|
||||||
|
span.classList.add("discourse-placeholder-name", "placeholdered");
|
||||||
|
span.innerText = dataKey;
|
||||||
|
|
||||||
|
// content has been set inside the [wrap][/wrap] block
|
||||||
|
if (elem.querySelector("p")) {
|
||||||
|
elem.querySelector("p").prepend(span);
|
||||||
|
} else {
|
||||||
|
elem.prepend(span);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (defaultValues && defaultValues.length) {
|
||||||
|
const select = buildSelect(dataKey, placeholders[dataKey]);
|
||||||
|
elem.appendChild(select);
|
||||||
|
} else {
|
||||||
|
const input = buildInput(dataKey, placeholders[dataKey]);
|
||||||
|
elem.appendChild(input);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$cooked
|
||||||
|
.on("input", ".discourse-placeholder-value", inputEvent =>
|
||||||
|
debounce(this, processChange, inputEvent, 250)
|
||||||
|
)
|
||||||
|
.on("change", ".discourse-placeholder-select", inputEvent =>
|
||||||
|
debounce(this, processChange, inputEvent, 250)
|
||||||
|
);
|
||||||
|
|
||||||
|
later(_fillPlaceholders, 500);
|
||||||
|
},
|
||||||
|
{ onlyStream: true, id: "discourse-placeholder-theme-component" }
|
||||||
|
);
|
||||||
|
|
||||||
|
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||||
|
return {
|
||||||
|
action: "insertPlaceholder",
|
||||||
|
icon: "file",
|
||||||
|
label: themePrefix("toolbar.builder")
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
api.modifyClass("controller:composer", {
|
||||||
|
actions: {
|
||||||
|
insertPlaceholder() {
|
||||||
|
showModal("discourse-placeholder-builder", {
|
||||||
|
model: {
|
||||||
|
toolbarEvent: this.toolbarEvent
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
{{#d-modal-body
|
||||||
|
title=(theme-prefix "builder.title")
|
||||||
|
class="discourse-placeholder-builder"
|
||||||
|
style="overflow: auto"}}
|
||||||
|
<form>
|
||||||
|
<div class="control">
|
||||||
|
<span class="label">
|
||||||
|
{{theme-i18n "builder.key.label"}}
|
||||||
|
</span>
|
||||||
|
<div class="input">
|
||||||
|
{{input
|
||||||
|
value=(readonly form.key)
|
||||||
|
input=(action (mut form.key) value="target.value")
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<p class="description">{{theme-i18n "builder.key.description"}}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<span class="label">
|
||||||
|
{{theme-i18n "builder.description.label"}}
|
||||||
|
</span>
|
||||||
|
<div class="input">
|
||||||
|
{{input
|
||||||
|
value=(readonly form.description)
|
||||||
|
input=(action (mut form.description) value="target.value")
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<p class="description">{{theme-i18n "builder.description.description"}}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<span class="label">
|
||||||
|
{{theme-i18n "builder.values.label"}}
|
||||||
|
</span>
|
||||||
|
<div class="input">
|
||||||
|
{{multi-select
|
||||||
|
valueProperty=null
|
||||||
|
nameProperty=null
|
||||||
|
value=form.values
|
||||||
|
content=form.values
|
||||||
|
options=(hash
|
||||||
|
allowAny=true
|
||||||
|
placementStrategy="absolute"
|
||||||
|
)
|
||||||
|
onChange=(action (mut form.values))
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<p class="description">{{theme-i18n "builder.values.description"}}</p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
{{/d-modal-body}}
|
||||||
|
|
||||||
|
<div class="modal-footer discourse-local-dates-create-modal-footer">
|
||||||
|
{{d-button
|
||||||
|
class="btn-primary"
|
||||||
|
action=(action "insertPlaceholder")
|
||||||
|
label=(theme-prefix "builder.insert")
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
en:
|
||||||
|
toolbar:
|
||||||
|
builder: "Add Placeholder"
|
||||||
|
builder:
|
||||||
|
errors:
|
||||||
|
no_key: "A key is required."
|
||||||
|
title: "Add Placeholder"
|
||||||
|
insert: "Insert"
|
||||||
|
key:
|
||||||
|
label: "Key"
|
||||||
|
description: "The =Key= to be replaced in the post."
|
||||||
|
description:
|
||||||
|
label: "Description"
|
||||||
|
description: "Description displayed on input with no value set."
|
||||||
|
values:
|
||||||
|
label: "Default value(s)"
|
||||||
|
description: "Optional value(s) for your placeholder, if multiple values are defined, a select will be used."
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
.placeholder-ui {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.placeholders-container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-wrap[data-wrap="placeholder"] {
|
||||||
|
.discourse-placeholder-name {
|
||||||
|
width: 50%;
|
||||||
|
min-width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discourse-placeholder-value,
|
||||||
|
.discourse-placeholder-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue