@blinkk/selective-edit
Version:
Selective structured text editor.
92 lines • 3.55 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const index_1 = require("../index");
const events_1 = require("../selective/events");
const deepObject_1 = require("../utility/deepObject");
const lodash_merge_1 = __importDefault(require("lodash.merge"));
const configEl = document.querySelector('#config');
const dataEl = document.querySelector('#data');
const fieldsEl = document.querySelector('#fields');
const guessEl = document.querySelector('.content__data__actions button');
const statusCleanEl = document.querySelector('.status__clean');
const statusValidEl = document.querySelector('.status__valid');
const valueEl = document.querySelector('#value');
/**
* Basic example of using -selective editor.
*/
const editorConfig = (0, lodash_merge_1.default)({
fieldTypes: {
checkbox: index_1.CheckboxField,
checkboxMulti: index_1.CheckboxMultiField,
color: index_1.ColorField,
date: index_1.DateField,
datetime: index_1.DatetimeField,
group: index_1.GroupField,
list: index_1.ListField,
number: index_1.NumberField,
radio: index_1.RadioField,
text: index_1.TextField,
textarea: index_1.TextareaField,
time: index_1.TimeField,
variant: index_1.VariantField,
},
ruleTypes: {
length: index_1.LengthRule,
match: index_1.MatchRule,
pattern: index_1.PatternRule,
range: index_1.RangeRule,
require: index_1.RequireRule,
},
}, JSON.parse(configEl.value || ''));
const exampleSelective = new index_1.SelectiveEditor(editorConfig, fieldsEl);
exampleSelective.data = (0, deepObject_1.autoDeepObject)(JSON.parse(dataEl.value));
// Bind to the custom event to re-render the editor.
document.addEventListener(events_1.EVENT_RENDER, () => {
exampleSelective.render();
});
// Show value after every render as an example.
document.addEventListener(events_1.EVENT_RENDER_COMPLETE, () => {
valueEl.textContent = JSON.stringify(exampleSelective.value, null, 2);
// Update status.
updateStatus(statusCleanEl, exampleSelective.isClean);
updateStatus(statusValidEl, exampleSelective.isValid);
});
// Allow guessing config based on data.
guessEl.addEventListener('click', () => {
const configs = exampleSelective.guessFields();
const deepPrettyFields = (configs) => {
const prettyFields = [];
for (const config of configs) {
if (config.fields) {
config.fields = deepPrettyFields(config.fields || []);
}
config.parentKey = undefined;
config.isGuessed = undefined;
prettyFields.push(config);
}
return prettyFields;
};
const prettyFields = deepPrettyFields(configs);
configEl.textContent = JSON.stringify({ fields: prettyFields }, null, 2);
});
exampleSelective.render();
function updateStatus(element, isTrue) {
if (isTrue) {
element.textContent = 'True';
element.classList.add('status--true');
element.classList.remove('status--false');
}
else {
element.textContent = 'False';
element.classList.add('status--false');
element.classList.remove('status--true');
}
}
// Style the localhost differently.
if (window.location.hostname === 'localhost') {
document.body.classList.add('localhost');
}
//# sourceMappingURL=example.js.map