Greasy Fork is available in English.
shortcuts to create DDS library component HTML
当前为
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/454586/1123066/Online%20IDE%20DDS%20Create.js
const create = {
actionMenu: (options = {}) => {
const classAm = options.class || ``;
const trigger = options.trigger || {};
const dataAlignment = options[`data-alignment`] || `start`;
if (!options.trigger) {
options.trigger = {};
}
if (!options.trigger.class) {
options.trigger.class = `dds__button--secondary`;
}
if (!options.trigger.text) {
options.trigger.text = `Actions`;
}
const id = options.id || `actionMenu${pen.utils.random()}`;
const useChevron = options.useChevron || false;
const noo = {};
noo.actionMenu = pen.utils.createElement(`div`, {
id: id,
class: `dds__action-menu ${classAm}`,
'data-trigger': `#${id}--trigger`,
'data-dds': `action-menu`,
'data-alignment': dataAlignment,
});
noo.trigger = pen.utils.createElement(`button`, {
id: noo.actionMenu.getAttribute(`data-trigger`).replace(`#`, ''),
type: `button`,
class: `dds__button ${trigger.class}`,
});
noo.trigger.appendChild(pen.utils.createElement(`span`, {
class: `ddsc__action-menu__trigger-label`,
text: trigger.text
}));
if (useChevron) {
const handleActionClick = (e) => {
e.target.querySelector(`.dds__icon`).classList.toggle(`action-rotated`);
}
noo.chevron = pen.utils.createElement(`i`, {
class: `dds__icon dds__icon--chevron-down action-chevron`,
});
noo.trigger.appendChild(noo.chevron);
create.listener(`#${id}`, `ddsActionMenuOpenEvent`, handleActionClick);
create.listener(`#${id}`, `ddsActionMenuCloseEvent`, handleActionClick);
}
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`, {
id: `${id}--groupUl`,
class: `ddsc__action-menu--groupUl`,
role: `group`,
'aria-labelledby': noo.group.getAttribute(`id`)
});
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);
// Adding a method to the element doesn't seem to be work
// const observerDefs = [
// {
// selector: `#${id}`,
// callback: (elem) => {
// elem.addItem = (itemOptions) => {
// document.getElementById(`${id}--groupUl`).appendChild(create.actionMenuItem(itemOptions));
// };
// }
// }
// ];
// createObserver(observerDefs);
return noo.actionMenu;
},
actionMenuItem: (options = {}) => {
const noo = {};
const label = options.text || `Item Text`;
const asOption = options[`data-value`] != null || false;
const dataValue = options[`data-value`] || undefined;
const id = `${label.replace(/[^0-9a-zA-Z]+/, ``)}_${pen.utils.random()}`;
noo.item = pen.utils.createElement(`li`, {
class: asOption ? `dds__action-menu__option` : `dds__action-menu__item`,
role: `none`,
});
noo.itemButton = pen.utils.createElement(`button`, {
id: id,
type: `button`,
role: asOption ? `menuitemcheckbox` : `menuitem`,
tabindex: `-1`,
'aria-disabled': `false`,
'aria-checked': `false`,
'data-value': dataValue,
});
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: label,
});
noo.item.appendChild(noo.itemButton);
noo.itemButton.appendChild(noo.itemSvg);
noo.itemButton.appendChild(noo.itemText);
noo.itemSvg.appendChild(noo.itemSvgUse);
if (options.onclick) {
create.listener(`#${id}`, `click`, options.onclick);
}
return noo.item;
},
button: (options = {}) => {
const noo = {};
const id = options.id || `button_${pen.utils.random()}`;
const chevron = options.chevron || {};
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 && options.icon.class ? options.icon.class : ``;
const bIcon = {
name: iconIsString ? options.icon : iconObjectName,
class: iconObjectClass
};
noo.button = pen.utils.createElement(`button`, {
id: id,
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);
}
}
if (options.onclick) {
create.listener(`#${id}`, `click`, options.onclick);
}
if (chevron.use) {
const handleActionClick = (e) => {
document.getElementById(id).querySelector(`.dds__icon`).classList.toggle(`action-rotated`);
}
noo.chevron = pen.utils.createElement(`i`, {
class: `dds__icon dds__icon--chevron-down action-chevron`,
});
noo.button.appendChild(noo.chevron);
create.listener(chevron.open.selector, chevron.open.event, handleActionClick);
create.listener(chevron.close.selector, chevron.close.event, handleActionClick);
}
return noo.button;
},
badge: (options = {}) => {
const noo = {};
const id = options.id || `badge_${pen.utils.random()}`;
const label = options.label || ``;
const componentClass = options.class || ``;
noo.component = pen.utils.createElement(`span`, {
id: id,
class: `dds__badge ${componentClass}`,
});
noo.label = pen.utils.createElement(`span`, {
class: `dds__badge__label`,
text: label,
});
noo.component.appendChild(noo.label);
return noo.component;
},
dropdown: (options = {}) => {
const noo = {};
const id = options.id || `dropdown_${pen.utils.random()}`;
const componentClass = options.class || ``;
const selection = options.selection || `single`;
const dropdownLabel = options.label || ``;
const selectAllLabel = options.selectAllLabel || `Select All`;
const autocomplete = options.autocomplete ? 'on' : `off`;
noo.component = pen.utils.createElement(`div`, {
id: id,
class: `dds__dropdown ${componentClass}`,
'data-dds': `dropdown`,
'data-selection': selection,
'data-select-all-label': selectAllLabel,
});
noo.container = pen.utils.createElement(`div`, {
class: `dds__dropdown__input-container`,
});
noo.label = pen.utils.createElement(`label`, {
id: `${id}--label`,
for: `${id}--input`,
html: dropdownLabel,
});
noo.wrapper = pen.utils.createElement(`div`, {
class: `dds__dropdown__input-wrapper`,
role: `combobox`,
'aria-haspopup': `listbox`,
'aria-controls': `${id}--popup`,
'aria-expanded': false,
});
noo.input = pen.utils.createElement(`input`, {
id: `${id}--input`,
name: `${id}--name`,
type: `text`,
class: `dds__dropdown__input-field`,
autocomplete: autocomplete,
'aria-labelledby': `${id}--label ${id}--helper`,
'aria-expanded': false,
'aria-controls': `${id}--list`,
placeholder: options.placeholder || ``,
});
noo.feedback = pen.utils.createElement(`i`, {
class: `dds__icon dds__icon--alert-notice dds__dropdown__feedback__icon`,
'aria-hidden': true,
});
noo.helper = pen.utils.createElement(`small`, {
id: `${id}--helper`,
class: `dds__input-text__helper ${!options.helper ? `dds__d-none` : ``}`,
text: options.helper,
});
noo.error = pen.utils.createElement(`div`, {
id: `${id}--error`,
class: `dds__invalid-feedback ${!options.error ? `dds__d-none` : ``}`,
text: options.error,
});
noo.popup = pen.utils.createElement(`div`, {
id: `${id}--popup`,
class: `dds__dropdown__popup dds__dropdown__popup--hidden`,
role: `presentation`,
tabindex: `-1`,
});
noo.list = pen.utils.createElement(`ul`, {
id: `${id}--list`,
tabindex: `-1`,
role: `listbox`,
class: `dds__dropdown__list`,
});
noo.component.appendChild(noo.container);
noo.container.appendChild(noo.label);
noo.component.appendChild(noo.wrapper);
noo.wrapper.appendChild(noo.input);
noo.wrapper.appendChild(noo.feedback);
noo.wrapper.appendChild(noo.helper);
noo.wrapper.appendChild(noo.error);
noo.component.appendChild(noo.popup);
noo.popup.appendChild(noo.list);
return noo.component;
},
dropdownItem: (options = {}) => {
const noo = {};
const label = options.text || `Item Text`;
const dataValue = options[`data-value`] || undefined;
const id = `${label.replace(/[^0-9a-zA-Z]+/, ``)}_${pen.utils.random()}`;
const isSelected = options.selected == `true` ? true : false;
noo.item = pen.utils.createElement(`li`, {
class: `dds__dropdown__item`,
role: `option`,
});
noo.itemButton = pen.utils.createElement(`button`, {
id: id,
type: `button`,
class: `dds__dropdown__item-option`,
role: `option`,
tabindex: `-1`,
'data-selected': isSelected,
'data-value': dataValue,
});
noo.itemText = pen.utils.createElement(`span`, {
class: `dds__dropdown__item-label`,
text: label,
});
noo.item.appendChild(noo.itemButton);
noo.itemButton.appendChild(noo.itemText);
if (options.onclick) {
create.listener(`#${id}`, `click`, options.onclick);
}
return noo.item;
},
listener: function (selector, event, handler) {
let rootElement = document.querySelector('body');
//since the root element is set to be body for our current dealings
rootElement.addEventListener(event, function (evt) {
var targetElement = evt.target;
while (targetElement != null) {
if (targetElement.matches(selector)) {
handler(evt);
return;
}
targetElement = targetElement.parentElement;
}
},
true
);
},
popover: (options = {}) => {
const noo = {};
const id = options.id || `popover_${pen.utils.random()}`;
const dataTrigger = options['data-trigger'] || undefined;
const dataPlacement = options['data-placement'] || `bottom-end`;
const classPo = options.class || ``;
const callback = options.callback || undefined;
const arrow = options.arrow === undefined ? true : options.arrow;
const close = options.close === undefined ? true : options.close;
if (!dataTrigger) {
console.error(`Send a data-trigger with a value like "#your-element-id"`);
return;
}
if (!arrow) {
// if (dataPlacement.indexOf(`bottom`) > -1) {
// pen.utils.addStyle(`#${id} { top: -12px;}`);
// } else if (dataPlacement.indexOf(`top`) > -1) {
// pen.utils.addStyle(`#${id} { top: 12px;}`);
// } else if (dataPlacement.indexOf(`left`) > -1) {
// pen.utils.addStyle(`#${id} { left: 12px;}`);
// } else if (dataPlacement.indexOf(`right`) > -1) {
// pen.utils.addStyle(`#${id} { left: -12px;}`);
// }
pen.utils.addStyle(`#${id} .dds__popover__pointer { display: none !important;}`);
}
if (!close) {
pen.utils.addStyle(`#${id} .dds__popover__close { display: none !important;}`);
}
if (!options.title) {
pen.utils.addStyle(`#${id} .dds__popover__header { display: none !important;}`);
}
noo.popover = pen.utils.createElement(`div`, {
id: id,
class: `dds__popover ${classPo}`,
role: `dialog`,
'aria-labelledby': `${id}--title`,
'data-placement': dataPlacement,
'data-dds': `popover`,
'data-trigger': dataTrigger,
});
noo.content = pen.utils.createElement(`div`, {
class: `dds__popover__content`,
});
noo.header = pen.utils.createElement(`div`, {
class: `dds__popover__header`,
});
noo.headline = pen.utils.createElement(`h6`, {
id: `${id}--title`,
class: `dds__popover__headline`,
text: options.title,
});
noo.body = pen.utils.createElement(`div`, {
class: `dds__popover__body`,
text: options.body,
});
if (callback) {
callback(noo.body);
}
noo.popover.appendChild(noo.content);
noo.content.appendChild(noo.header);
noo.content.appendChild(noo.body);
noo.header.appendChild(noo.headline);
return noo.popover;
},
radioButton: (options = {}) => {
const noo = {};
const id = options.id || `radiobutton_${pen.utils.random()}`;
const componentClass = options.class || ``;
const legend = options.legend || ``;
noo.radioset = pen.utils.createElement(`fieldset`, {
class: `dds__fieldset dds__radio-button-group ${componentClass}`,
role: `radiogroup`,
});
if (options.required) {
noo.radioset.setAttribute(`required`, true);
noo.radioset.setAttribute(`aria-required`, true);
}
noo.legend = pen.utils.createElement(`legend`, {
text: legend,
})
if (legend) noo.radioset.appendChild(noo.legend);
options.buttons.forEach((radio, rIndex) => {
const radioClass = radio.class || ``;
const radioValue = radio.value || ``;
const radioLabel = radio.label || ``;
noo.button = pen.utils.createElement(`div`, {
class: `dds__radio-button ${radioClass}`,
});
noo.input = pen.utils.createElement(`input`, {
class: `dds__radio-button__input`,
type: `radio`,
name: `${id}--button-name`,
id: `${id}--button${rIndex}`,
value: radioValue,
});
noo.label = pen.utils.createElement(`label`, {
class: `dds__radio-button__label`,
id: `${id}--button-label${rIndex}`,
for: `${id}--button${rIndex}`,
text: radioLabel,
});
noo.button.appendChild(noo.input);
noo.button.appendChild(noo.label);
noo.radioset.appendChild(noo.button);
});
noo.error = pen.utils.createElement(`div`, {
id: `${id}--error`,
class: `dds__invalid-feedback`,
text: options.error || ``,
});
noo.radioset.appendChild(noo.error);
return noo.radioset;
},
textInput: (options = {}) => {
const noo = {};
const id = options.id || `textinput_${pen.utils.random()}`;
const componentClass = options.class || ``;
const icon = options.icon || ``;
const iconStart = options.iconStart || true;
noo.container = pen.utils.createElement(`div`, {
id: id,
class: `dds__input-text__container ${componentClass}`,
});
noo.label = pen.utils.createElement(`label`, {
id: `${id}--label`,
for: `${id}--input`,
text: options.label,
});
noo.wrapper = pen.utils.createElement(`div`, {
class: `dds__input-text__wrapper`,
});
noo.input = pen.utils.createElement(`input`, {
id: `${id}--input`,
type: `text`,
class: `dds__input-text ${icon ? iconStart ? `dds__has__icon--start` : ` dds__has__icon--end` : ``}`,
name: `${id}--input`,
placeholder: options.placeholder || ``,
'aria-labelledby': `${id}--label ${id}--helper`,
});
if (options.required) {
noo.input.setAttribute(`required`, true);
}
if (options[`max-length`]) {
noo.input.setAttribute(`max-length`, options[`max-length`]);
}
noo.icon = pen.utils.createElement(`i`, {
class: `dds__icon dds__icon--${icon || `search`} dds__input-text__icon--${iconStart ? `start` : `end`}`,
'aria-hidden': true,
});
noo.helper = pen.utils.createElement(`small`, {
id: `${id}--helper`,
class: `dds__input-text__helper ${!options.helper ? `dds__d-none` : ``}`,
text: options.helper,
});
noo.error = pen.utils.createElement(`div`, {
id: `${id}--error`,
class: `dds__invalid-feedback ${!options.error ? `dds__d-none` : ``}`,
text: options.error,
});
if (!options.helper) {
pen.utils.addStyle(`#${id} { margin-top: -12px; margin-bottom: 9px;}`);
}
noo.container.appendChild(noo.label);
noo.container.appendChild(noo.wrapper);
noo.wrapper.appendChild(noo.input);
if (icon) noo.wrapper.appendChild(noo.icon);
noo.wrapper.appendChild(noo.helper);
noo.wrapper.appendChild(noo.error);
return noo.container;
},
}