ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/views: refactor make(Non)VoidElement

Browse source 
Merge into one function
This commit is contained in:
rr- 2016-11-11 23:08:50 +01:00
parent 143a015473
commit bf0342df71
1 changed files with 34 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
client/js/util/views.js
View file

@ -21,7 +21,7 @@ function _makeLabel(options, attrs) {
attrs = {}; attrs = {};
} }
attrs.for = options.id; attrs.for = options.id;
return makeNonVoidElement('label', attrs, options.text); return makeElement('label', attrs, options.text);
} }
function makeFileSize(fileSize) { function makeFileSize(fileSize) {
@ -33,30 +33,25 @@ function makeMarkdown(text) {
} }
function makeRelativeTime(time) { function makeRelativeTime(time) {
return makeNonVoidElement( return makeElement(
'time', 'time', {datetime: time, title: time}, misc.formatRelativeTime(time));
{datetime: time, title: time},
misc.formatRelativeTime(time));
} }
function makeThumbnail(url) { function makeThumbnail(url) {
return makeNonVoidElement( return makeElement(
'span', 'span',
url ? url ?
{ {class: 'thumbnail', style: `background-image: url(\'${url}\')`} :
class: 'thumbnail',
style: `background-image: url(\'${url}\')`,
} :
{class: 'thumbnail empty'}, {class: 'thumbnail empty'},
makeVoidElement('img', {alt: 'thumbnail', src: url})); makeElement('img', {alt: 'thumbnail', src: url}));
} }
function makeRadio(options) { function makeRadio(options) {
_imbueId(options); _imbueId(options);
return makeNonVoidElement( return makeElement(
'label', 'label',
{for: options.id}, {for: options.id},
makeVoidElement( makeElement(
'input', 'input',
{ {
id: options.id, id: options.id,
@ -66,16 +61,16 @@ function makeRadio(options) {
checked: options.selectedValue === options.value, checked: options.selectedValue === options.value,
disabled: options.readonly, disabled: options.readonly,
required: options.required, required: options.required,
}) + }),
makeNonVoidElement('span', {class: 'radio'}, options.text)); makeElement('span', {class: 'radio'}, options.text));
} }
function makeCheckbox(options) { function makeCheckbox(options) {
_imbueId(options); _imbueId(options);
return makeNonVoidElement( return makeElement(
'label', 'label',
{for: options.id}, {for: options.id},
makeVoidElement( makeElement(
'input', 'input',
{ {
id: options.id, id: options.id,
@ -86,30 +81,29 @@ function makeCheckbox(options) {
options.checked : false, options.checked : false,
disabled: options.readonly, disabled: options.readonly,
required: options.required, required: options.required,
}) + }),
makeNonVoidElement('span', {class: 'checkbox'}, options.text)); makeElement('span', {class: 'checkbox'}, options.text));
} }
function makeSelect(options) { function makeSelect(options) {
return _makeLabel(options) + return _makeLabel(options) +
makeNonVoidElement( makeElement(
'select', 'select',
{ {
id: options.id, id: options.id,
name: options.name, name: options.name,
disabled: options.readonly, disabled: options.readonly,
}, },
Object.keys(options.keyValues).map(key => { ...Object.keys(options.keyValues).map(key =>
return makeNonVoidElement( makeElement(
'option', 'option',
{value: key, selected: key === options.selectedKey}, {value: key, selected: key === options.selectedKey},
options.keyValues[key]); options.keyValues[key])));
}).join(''));
} }
function makeInput(options) { function makeInput(options) {
options.value = options.value || ''; options.value = options.value || '';
return _makeLabel(options) + makeVoidElement('input', options); return _makeLabel(options) + makeElement('input', options);
} }
function makeButton(options) { function makeButton(options) {
@ -125,7 +119,7 @@ function makeTextInput(options) {
function makeTextarea(options) { function makeTextarea(options) {
const value = options.value || ''; const value = options.value || '';
delete options.value; delete options.value;
return _makeLabel(options) + makeNonVoidElement('textarea', options, value); return _makeLabel(options) + makeElement('textarea', options, value);
} }
function makePasswordInput(options) { function makePasswordInput(options) {
@ -139,7 +133,7 @@ function makeEmailInput(options) {
} }
function makeColorInput(options) { function makeColorInput(options) {
const textInput = makeVoidElement( const textInput = makeElement(
'input', { 'input', {
type: 'text', type: 'text',
value: options.value || '', value: options.value || '',
@ -147,13 +141,9 @@ function makeColorInput(options) {
style: 'color: ' + options.value, style: 'color: ' + options.value,
disabled: true, disabled: true,
}); });
const colorInput = makeVoidElement( const colorInput = makeElement(
'input', { 'input', {type: 'color', value: options.value || ''});
type: 'color', return makeElement('label', {class: 'color'}, colorInput, textInput);
value: options.value || '',
});
return makeNonVoidElement(
'label', {class: 'color'}, colorInput + textInput);
} }
function makeNumericInput(options) { function makeNumericInput(options) {
@ -183,7 +173,7 @@ function makePostLink(id, includeHash) {
text = '@' + id; text = '@' + id;
} }
return api.hasPrivilege('posts:view') ? return api.hasPrivilege('posts:view') ?
makeNonVoidElement( makeElement(
'a', 'a',
{'href': '/post/' + encodeURIComponent(id)}, {'href': '/post/' + encodeURIComponent(id)},
misc.escapeHtml(text)) : misc.escapeHtml(text)) :
@ -198,14 +188,14 @@ function makeTagLink(name, includeHash) {
text = '#' + text; text = '#' + text;
} }
return api.hasPrivilege('tags:view') ? return api.hasPrivilege('tags:view') ?
makeNonVoidElement( makeElement(
'a', 'a',
{ {
'href': '/tag/' + encodeURIComponent(name), 'href': '/tag/' + encodeURIComponent(name),
'class': misc.makeCssName(category, 'tag'), 'class': misc.makeCssName(category, 'tag'),
}, },
misc.escapeHtml(text)) : misc.escapeHtml(text)) :
makeNonVoidElement( makeElement(
'span', 'span',
{'class': misc.makeCssName(category, 'tag')}, {'class': misc.makeCssName(category, 'tag')},
misc.escapeHtml(text)); misc.escapeHtml(text));
@ -215,12 +205,10 @@ function makeUserLink(user) {
let text = makeThumbnail(user ? user.avatarUrl : null); let text = makeThumbnail(user ? user.avatarUrl : null);
text += user && user.name ? misc.escapeHtml(user.name) : 'Anonymous'; text += user && user.name ? misc.escapeHtml(user.name) : 'Anonymous';
const link = user && api.hasPrivilege('users:view') ? const link = user && api.hasPrivilege('users:view') ?
makeNonVoidElement( makeElement(
'a', 'a', {'href': '/user/' + encodeURIComponent(user.name)}, text) :
{'href': '/user/' + encodeURIComponent(user.name)},
text) :
text; text;
return makeNonVoidElement('span', {class: 'user'}, link); return makeElement('span', {class: 'user'}, link);
} }
function makeFlexboxAlign(options) { function makeFlexboxAlign(options) {
@ -250,12 +238,10 @@ function _serializeElement(name, attributes) {
.join(' '); .join(' ');
} }
function makeNonVoidElement(name, attributes, content) { function makeElement(name, attrs, ...content) {
return `<${_serializeElement(name, attributes)}>${content}</${name}>`; return content.length !== undefined ?
} `<${_serializeElement(name, attrs)}>${content.join('')}</${name}>` :
`<${_serializeElement(name, attrs)}/>`;
function makeVoidElement(name, attributes) {
return `<${_serializeElement(name, attributes)}/>`;
} }
function emptyContent(target) { function emptyContent(target) {
@ -511,8 +497,6 @@ module.exports = {
enableForm: enableForm, enableForm: enableForm,
disableForm: disableForm, disableForm: disableForm,
decorateValidator: decorateValidator, decorateValidator: decorateValidator,
makeVoidElement: makeVoidElement,
makeNonVoidElement: makeNonVoidElement,
makeTagLink: makeTagLink, makeTagLink: makeTagLink,
makePostLink: makePostLink, makePostLink: makePostLink,
makeCheckbox: makeCheckbox, makeCheckbox: makeCheckbox,