solid-ui
Version:
UI library for Solid applications
398 lines • 15.4 kB
JavaScript
import { cancelButton } from './widgets';
import { label } from './utils';
import { style } from './style';
import { store } from 'solid-logic';
/**
* @ignore
*/
class ContainerElement extends HTMLElement {
}
export class TabWidgetElement extends HTMLElement {
}
/**
* @ignore
*/
class TabElement extends HTMLElement {
}
/**
* Use this widget to generate tabs from triples set in the global store.
*
* [Here you can see examples of the tabs](https://solidos.github.io/solid-ui/examples/tabs/).
*
* It assumes that items to use for tabs will be in a collection by default,
* e.g.:
*
* ```turtle
* :subject :predicate ( :item1 :item2 ) .
* ```
*
* You can override this by setting `ordered: false`, in which case it expects
* unordered triples:
*
* ```turtle
* :subject :predicate :item1, :item 2 .
* ```
*
* Triples that are not ordered in collection are in principle not sorted,
* which means that tabs could change order every time you render the widget.
* But in this case the widget will try to sort it in order to keep it
* consistent.
*
* In both of these cases you need to define options `subject` and `predicate`
* to tell the widget which triples it should be looking for.
*
* Finally you can set items manually, using the `items` option, e.g.:
*
* ```javascript
* {
* items: [
* namedNode('https://domain.tld/#item1'),
* namedNode('https://domain.tld/#item2')
* ]
* }
* ```
*
* When you set items manually you do not need to set `subject` and
* `predicate`.
*
* In any case you probably want to set the renderMain option to specify
* what should be rendered for the various items, e.g.:
*
* ```javascript
* {
* renderMain: (bodyMain, subject) => {
* bodyMain.innerHTML = renderItem(subject)
* }
* }
* ```
*
* **Note:** `renderItem` is a custom function that you need to define yourself.
*
* The option `renderTabSettings` allows you to render a custom view in the
* body container that is shown when you hold the ALT key and click on a
* tab. It works very much like the `renderMain` option:
*
* ```javascript
* {
* renderTabSettings: (bodyMain, subject) => {
* bodyMain.innerHTML = renderTabSettings(subject)
* }
* }
* ```
*
* **Note:** `renderTabSettings` is a custom function that you need to define
* yourself.
*
* By default the widget will try to guess the label by using the
* [[utils.label]] function. If you want to customize this yourself, you can
* use the `renderTab` option:
*
* ```javascript
* {
* renderTab: (tabDiv, subject) => {
* tabDiv.innerText = renderTabText(subject)
* }
* }
* ```
*
* **Note:** `renderTabText` is a custom function you need to define yourself.
*
* The option renderTab is also important if you want to set which tab should
* be selected once the widget is rendered. By default it will simply select
* the first tab, but you can override by setting `dataset.name` on the tab
* and referring to the same string in `selectedTab`:
*
* ```javascript
* {
* renderTab: (tabDiv, subject) => {
* tabDiv.dataset.name = subject.uri
* },
* selectedTab: item2.uri
* }
* ```
*
* You can apply a color to use for tabs and border of the container by using
* option `background-color`. This is #ddddcc by default.
*
* You can override the document object that the widget uses to generate DOM
* elements by setting the option `dom`. This is encouraged to set if you
* intend your functionality to be used in environments that don't provide
* a global `document` object.
*
* If you want to render a close button next to the tabs you can set option
* `onClose` which takes a callback function that is triggered when the
* button is clicked:
*
* ```javascript
* {
* onClose: (event) => {
* // do something that hides the widget altogether
* }
* }
* ```
*
* The option `orientation` allows you to set which side the tabs should be
* located: `'0'` = Top, `'1'` = Left, `'2'` = Bottom, `'3'` = Right
*
* If you don't want to render anything in the body container by default,
* you can set the option `startEmpty` to `true`.
*
* @param options
*/
const tabsDefaultBackgroundColor = '#ddddcc';
export function tabWidget(options) {
const subject = options.subject;
const dom = options.dom || document;
const orientation = parseInt(options.orientation || '0');
const backgroundColor = options.backgroundColor || tabsDefaultBackgroundColor;
const flipped = orientation & 2;
const vertical = orientation & 1;
const onClose = options.onClose;
const [selectedColor, color] = getColors(backgroundColor);
const bodyMainStyle = `display: grid; width: auto; height: 100%; border: 0.1em; border-style: solid; border-color: ${selectedColor}; padding: 1em;`;
const rootElement = dom.createElement('div'); // 20200117a
rootElement.setAttribute('style', style.tabsRootElement);
rootElement.style.flexDirection = (vertical ? 'row' : 'column') + (flipped ? '-reverse' : '');
const navElement = rootElement.appendChild(dom.createElement('nav'));
navElement.setAttribute('style', style.tabsNavElement);
const mainElement = rootElement.appendChild(dom.createElement('main'));
mainElement.setAttribute('style', style.tabsMainElement); // override tabbedtab.css
const tabContainer = navElement.appendChild(dom.createElement('ul'));
tabContainer.setAttribute('style', style.tabContainer);
tabContainer.style.flexDirection = `${vertical ? 'column' : 'row'}`;
const tabElement = 'li';
const bodyContainer = mainElement;
rootElement.tabContainer = tabContainer;
rootElement.bodyContainer = bodyContainer;
const corners = ['0.2em', '0.2em', '0', '0']; // top left, TR, BR, BL
const cornersPrepped = corners.concat(corners).slice(orientation, orientation + 4);
const cornersStyle = `border-radius: ${cornersPrepped.join(' ')};`;
const margins = ['0.3em', '0.3em', '0', '0.3em']; // top, right, bottom, left
const marginsPrepped = margins.concat(margins).slice(orientation, orientation + 4);
const marginsStyle = `margin: ${marginsPrepped.join(' ')};`;
const paddingStyle = `padding: ${marginsPrepped.join(' ')};`;
const tabStyle = cornersStyle + `position: relative; padding: 0.7em; max-width: 20em; color: ${color};`;
const unselectedStyle = `${tabStyle + marginsStyle} opacity: 50%; background-color: ${backgroundColor};`;
const selectedStyle = `${tabStyle + marginsStyle} background-color: ${selectedColor};`;
const shownStyle = 'height: 100%; width: 100%;';
const hiddenStyle = shownStyle + 'display: none;';
rootElement.refresh = orderedSync;
orderedSync();
if (!options.startEmpty && tabContainer.children.length && options.selectedTab) {
const selectedTab0 = Array.from(tabContainer.children) // Version left for compatibility with ??
.map((tab) => tab.firstChild)
.find((tab) => tab.dataset.name === options.selectedTab);
const selectedTabURI = options.selectedTab.uri;
const selectedTab1 = Array.from(tabContainer.children)
// @ts-ignore
.find((tab) => tab.subject &&
// @ts-ignore
tab.subject.uri &&
// @ts-ignore
tab.subject.uri === selectedTabURI);
const tab = selectedTab1 || selectedTab0 || tabContainer.children[0];
const clickMe = tab.firstChild;
if (clickMe === null || clickMe === void 0 ? void 0 : clickMe.click) {
clickMe.click();
}
else if (tab instanceof HTMLElement) {
tab.click();
}
}
else if (!options.startEmpty) {
const firstTab = tabContainer.children[0];
const clickTarget = firstTab === null || firstTab === void 0 ? void 0 : firstTab.firstChild;
if (clickTarget === null || clickTarget === void 0 ? void 0 : clickTarget.click) {
clickTarget.click();
}
else if (firstTab instanceof HTMLElement) {
firstTab.click(); // Open first tab
}
}
return rootElement;
function addCancelButton(tabContainer) {
if (tabContainer.dataset.onCloseSet) {
// @@ TODO: this is only here to make the browser tests work
// Discussion at https://github.com/solidos/solid-ui/pull/110#issuecomment-527080663
const existingCancelButton = tabContainer.querySelector('.unstyled');
tabContainer.removeChild(existingCancelButton);
}
const extraTab = dom.createElement(tabElement);
extraTab.classList.add('unstyled');
const tabCancelButton = cancelButton(dom, onClose);
tabCancelButton.setAttribute('style', tabCancelButton.getAttribute('style') + paddingStyle);
extraTab.appendChild(tabCancelButton);
tabContainer.appendChild(extraTab);
tabContainer.dataset.onCloseSet = 'true';
}
function getItems() {
if (options.items)
return options.items;
if (options.ordered !== false) {
// options.ordered defaults to true
return store.the(subject, options.predicate).elements;
}
else {
return store.each(subject, options.predicate);
}
}
function makeNewSlot(item) {
const ele = dom.createElement(tabElement);
ele.setAttribute('style', unselectedStyle);
ele.subject = item;
const div = ele.appendChild(dom.createElement('button'));
div.setAttribute('style', style.makeNewSlot);
div.onclick = function () {
resetTabStyle();
resetBodyStyle();
ele.setAttribute('style', selectedStyle);
if (!ele.bodyTR)
return;
ele.bodyTR.setAttribute('style', shownStyle);
const bodyMain = getOrCreateContainerElement(ele);
if (options.renderMain && ele.subject && bodyMain.asSettings !== false) {
bodyMain.innerHTML = 'loading item ...' + item;
options.renderMain(bodyMain, ele.subject);
bodyMain.asSettings = false;
}
};
if (options.renderTabSettings && ele.subject) {
const ellipsis = dom.createElement('button');
ellipsis.textContent = '...';
ellipsis.setAttribute('style', style.ellipsis);
ellipsis.onclick = function () {
resetTabStyle();
resetBodyStyle();
ele.setAttribute('style', selectedStyle);
if (!ele.bodyTR)
return;
ele.bodyTR.setAttribute('style', shownStyle);
const bodyMain = getOrCreateContainerElement(ele);
if (options.renderTabSettings && ele.subject && bodyMain.asSettings !== true) {
bodyMain.innerHTML = 'loading settings ...' + item;
options.renderTabSettings(bodyMain, ele.subject);
bodyMain.asSettings = true;
}
};
ele.appendChild(ellipsis);
}
if (options.renderTab) {
options.renderTab(div, item);
}
else {
div.innerHTML = label(item);
}
return ele;
function getOrCreateContainerElement(ele) {
var _a;
const bodyMain = (_a = ele.bodyTR) === null || _a === void 0 ? void 0 : _a.children[0];
if (bodyMain)
return bodyMain;
const newBodyMain = ele.bodyTR.appendChild(dom.createElement('main'));
newBodyMain.setAttribute('style', bodyMainStyle);
return newBodyMain;
}
}
// @@ Use common one from utils?
function orderedSync() {
const items = getItems();
let slot, i, j, left, right;
let differ = false;
// Find how many match at each end
for (left = 0; left < tabContainer.children.length; left++) {
slot = tabContainer.children[left];
if (left >= items.length || (slot.subject && !slot.subject.sameTerm(items[left]))) {
differ = true;
break;
}
}
if (!differ && items.length === tabContainer.children.length) {
return; // The two just match in order: a case to optimize for
}
for (right = tabContainer.children.length - 1; right >= 0; right--) {
slot = tabContainer.children[right];
j = right - tabContainer.children.length + items.length;
if (slot.subject && !slot.subject.sameTerm(items[j])) {
break;
}
}
// The elements left ... right in tabContainer.children do not match
const insertables = items.slice(left, right - tabContainer.children.length + items.length + 1);
while (right >= left) {
// remove extra
tabContainer.removeChild(tabContainer.children[left]);
bodyContainer.removeChild(bodyContainer.children[left]);
right -= 1;
}
for (i = 0; i < insertables.length; i++) {
const newSlot = makeNewSlot(insertables[i]);
const newBodyDiv = dom.createElement('div');
newSlot.bodyTR = newBodyDiv;
if (left === tabContainer.children.length) {
// None left of original on right
tabContainer.appendChild(newSlot);
bodyContainer.appendChild(newBodyDiv);
}
else {
tabContainer.insertBefore(newSlot, tabContainer.children[left + i]);
bodyContainer.insertBefore(newBodyDiv, bodyContainer.children[left + i]);
}
}
if (onClose) {
addCancelButton(tabContainer);
}
}
function resetTabStyle() {
for (let i = 0; i < tabContainer.children.length; i++) {
const tab = tabContainer.children[i];
if (tab.classList.contains('unstyled')) {
continue;
}
else {
tab.setAttribute('style', unselectedStyle);
}
}
}
function resetBodyStyle() {
for (let i = 0; i < bodyContainer.children.length; i++) {
bodyContainer.children[i].setAttribute('style', hiddenStyle);
}
}
}
/**
* @internal
*/
function getColors(backgroundColor) {
return isLight(backgroundColor)
? [colorBlend(backgroundColor, '#ffffff', 0.3), '#000000']
: [colorBlend(backgroundColor, '#000000', 0.3), '#ffffff'];
}
/**
* @internal
*/
function colorBlend(a, b, mix) {
let ca, cb, res;
let str = '#';
const hex = '0123456789abcdef';
for (let i = 0; i < 3; i++) {
ca = parseInt(a.slice(i * 2 + 1, i * 2 + 3), 16);
cb = parseInt(b.slice(i * 2 + 1, i * 2 + 3), 16);
res = ca * (1.0 - mix) + cb * mix; // @@@ rounding
const res2 = parseInt(('' + res).split('.')[0]); // @@ ugh
const h = parseInt(('' + res2 / 16).split('.')[0]); // @@ ugh
const l = parseInt(('' + (res2 % 16)).split('.')[0]); // @@ ugh
str += hex[h] + hex[l];
}
return str;
}
/**
* @internal
*/
function isLight(x) {
let total = 0;
for (let i = 0; i < 3; i++) {
total += parseInt(x.slice(i * 2 + 1, i * 2 + 3), 16);
}
return total > 128 * 3;
}
//# sourceMappingURL=tabs.js.map