shortcuts to create DDS library component HTML
当前为
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/454586/1115688/Online%20IDE%20DDS%20Create.js
const create = {
actionMenu: (options) => {
options = options || {};
const trigger = options.trigger || {
text: `Actions`,
class: options.trigger && options.trigger.class || `dds__button--secondary`
}
const items = options.items || [];
const id = options.id || `actionMenu${pen.utils.random()}`;
const useChevron = options.useChevron || false;
const noo = {};
noo.actionMenu = pen.utils.createElement(`div`, {
class: `dds__action-menu`,
'data-trigger': `#${id}--trigger`,
'data-dds': `action-menu`,
});
noo.trigger = pen.utils.createElement(`div`, {
id: noo.actionMenu.getAttribute(`data-trigger`).replace(`#`, ''),
type: `button`,
class: `dds__button ${trigger.class}`,
text: trigger.text,
});
if (useChevron) {
noo.chevron = pen.utils.createElement(`i`, {
class: `dds__icon dds__icon--chevron-down action-chevron`,
});
noo.trigger.appendChild(noo.chevron);
}
noo.container = pen.utils.createElement(`div`, {
class: `dds__action-menu__container`,
tabindex: `-1`,
role: `presentation`,
'aria-hidden': `true`,
});
noo.menu = pen.utils.createElement(`div`, {
class: `dds__action-menu__menu`,
role: `menu`,
tabindex: `-1`,
});
noo.menuLi = pen.utils.createElement(`li`, {
role: `presentation`,
});
noo.group = pen.utils.createElement(`span`, {
id: `${id}--group`
});
noo.groupUl = pen.utils.createElement(`ul`, {
role: `group`,
'aria-labelledby': noo.group.getAttribute(`id`)
});
noo.item = pen.utils.createElement(`li`, {
class: `dds__action-menu__item`,
role: `none`,
});
noo.itemButton = pen.utils.createElement(`button`, {
type: `button`,
role: `menuitem`,
tabindex: `-1`,
'aria-disabled': `false`,
'aria-checked': `false`,
onclick: () => { alert(`click`) },
});
noo.itemSvg = pen.utils.createElement(`svg`, {
class: `dds__action-menu__icon`,
'aria-hidden': `true`,
});
noo.itemSvgUse = pen.utils.createElement(`use`, {
'xlink:href': `#dds__icon--copy-alt`,
});
noo.itemText = pen.utils.createElement(`span`, {
text: `Copy`,
});
noo.actionMenu.appendChild(noo.trigger);
noo.actionMenu.appendChild(noo.container);
noo.container.appendChild(noo.menu);
noo.menu.appendChild(noo.menuLi);
noo.menuLi.appendChild(noo.group);
noo.group.appendChild(noo.groupUl);
noo.groupUl.appendChild(noo.item);
noo.item.appendChild(noo.itemButton);
noo.itemButton.appendChild(noo.itemSvg);
noo.itemButton.appendChild(noo.itemText);
noo.itemSvg.appendChild(noo.itemSvgUse);
return noo.actionMenu;
},
button: (options) => {
options = options || {};
const bClass = options.class || ``;
const bText = options.text || `Button`;
const iconIsString = options.icon && typeof options.icon === `string`;
const iconObjectName = !iconIsString && options.icon ? options.icon.name : undefined;
const iconObjectClass = !iconIsString && options.icon.class ? options.icon.class : ``;
const bIcon = {
name: iconIsString ? options.icon : iconObjectName,
class: iconObjectClass
};
const noo = {};
noo.button = pen.utils.createElement(`button`, {
class: `dds__button ${bClass}`,
type: `button`,
text: bText,
});
if (bIcon.name) {
noo.icon = pen.utils.createElement(`i`, {
class: `dds__icon dds__icon--${bIcon.name} ${bIcon.class}`,
'aria-hidden': `true`,
});
if (options.icon.class.indexOf(`--end`) > -1) {
noo.button.appendChild(noo.icon);
} else {
noo.button.prepend(noo.icon);
}
}
return noo.button;
},
}