open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add: use cache template

Browse Source
This commit is contained in:
eight 2017-11-16 14:48:13 +08:00 committed by tophf
parent 3fd4343cfd
commit 5dbd2249dd
1 changed files with 134 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
edit/applies-to-line-widget.js
View File

@ -1,6 +1,16 @@
/* global regExpTester debounce messageBox CodeMirror */
'use strict';
function templateCache(cache) {
function clone(id) {
if (typeof cache[id] === 'function') {
cache[id] = cache[id]();
}
return cache[id].cloneNode(true);
}
return {clone};
}
function createAppliesToLineWidget(cm) {
const APPLIES_TYPE = [
[t('appliesUrlOption'), 'url'],
@ -13,6 +23,57 @@ function createAppliesToLineWidget(cm) {
let fromLine, toLine, styleVariables;
let initialized = false;
const template = templateCache({
container: () =>
$element({className: 'applies-to', appendChild: [
$element({tag: 'label', appendChild: t('appliesLabel')}),
$element({
tag: 'ul',
className: 'applies-to-list'
})
]}),
listItem: () =>
$element({tag: 'li', appendChild: [
$element({
tag: 'select',
className: 'applies-type',
appendChild: APPLIES_TYPE.map(([label, value]) => $element({
tag: 'option',
value: value,
textContent: label
}))
}),
$element({
tag: 'input',
className: 'applies-value'
}),
$element({
tag: 'button',
type: 'button',
className: 'applies-to-regexp-test',
textContent: t('styleRegexpTestButton')
}),
$element({
tag: 'button',
type: 'button',
className: 'applies-to-remove',
textContent: t('appliesRemove')
}),
$element({
tag: 'button',
type: 'button',
className: 'applies-to-add',
textContent: t('appliesAdd')
})
]}),
appliesToEverything: () =>
$element({
tag: 'li',
className: 'applies-to-everything',
textContent: t('appliesToEverything')
})
});
return {toggle};
function toggle(newState = !initialized) {
@ -240,76 +301,45 @@ function createAppliesToLineWidget(cm) {
}
function buildElement({applies}) {
const el = $element({className: 'applies-to', appendChild: [
$element({tag: 'label', appendChild: [
t('appliesLabel'),
// $element({tag: 'svg'})
]}),
$element({
tag: 'ul',
className: 'applies-to-list',
appendChild: applies.map(makeLi)
})
]});
if (!$('li', el)) {
$('ul', el).appendChild($element({
tag: 'li',
className: 'applies-to-everything',
textContent: t('appliesToEverything')
}));
const el = template.clone('container');
const appliesToList = $('.applies-to-list', el);
applies.map(makeLi)
.forEach(item => appliesToList.appendChild(item));
if (!appliesToList.childNodes.length) {
appliesToList.appendChild(template.clone('appliesToEverything'));
}
return el;
function makeLi(apply) {
const el = $element({tag: 'li', appendChild: makeInput(apply)});
const el = template.clone('listItem');
el.dataset.type = apply.type.text;
el.addEventListener('change', e => {
if (e.target.classList.contains('applies-type')) {
el.dataset.type = apply.type.text;
}
});
return el;
}
function makeInput(apply) {
const typeInput = $element({
tag: 'select',
className: 'applies-type',
appendChild: APPLIES_TYPE.map(([label, value]) => $element({
tag: 'option',
value: value,
textContent: label
})),
onchange() {
applyChange(apply.type, this.value);
}
});
const typeInput = $('.applies-type', el);
typeInput.value = apply.type.text;
const valueInput = $element({
tag: 'input',
className: 'applies-value',
value: apply.value.text,
oninput() {
typeInput.onchange = function () {
applyChange(apply.type, this.value);
};
const valueInput = $('.applies-value', el);
valueInput.value = apply.value.text;
valueInput.oninput = function () {
debounce(applyChange, THROTTLE_DELAY, apply.value, this.value);
},
onfocus: updateRegexpTest
});
const regexpTestButton = $element({
tag: 'button',
type: 'button',
className: 'applies-to-regexp-test',
textContent: t('styleRegexpTestButton'),
onclick() {
};
valueInput.onfocus = updateRegexpTest;
const regexpTestButton = $('.applies-to-regexp-test', el);
regexpTestButton.onclick = () => {
regExpTester.toggle();
regExpTester.update([apply.value.text]);
}
});
const removeButton = $element({
tag: 'button',
type: 'button',
className: 'applies-to-remove',
textContent: t('appliesRemove'),
onclick() {
};
const removeButton = $('.applies-to-remove', el);
removeButton.onclick = function () {
const i = applies.indexOf(apply);
let repl;
let from;
@ -338,14 +368,10 @@ function createAppliesToLineWidget(cm) {
clearApply(apply);
this.closest('li').remove();
applies.splice(i, 1);
}
});
const addButton = $element({
tag: 'button',
type: 'button',
className: 'applies-to-add',
textContent: t('appliesAdd'),
onclick() {
};
const addButton = $('.applies-to-add', el);
addButton.onclick = function () {
const i = applies.indexOf(apply);
const pos = apply.mark.find().to;
const text = `, ${apply.type.text}("")`;
@ -359,9 +385,9 @@ function createAppliesToLineWidget(cm) {
setupApplyMarkers(newApply);
applies.splice(i + 1, 0, newApply);
this.closest('li').insertAdjacentElement('afterend', makeLi(newApply));
}
});
return [typeInput, valueInput, regexpTestButton, removeButton, addButton];
};
return el;
function updateRegexpTest() {
if (apply.type.text === 'regexp') {