mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-11-22 08:03:18 +01:00
add eslint and huskyjs to catch bugs and maintain consistent code style
This commit is contained in:
Samuele Zanca
GitHub
parent
b2ceaffc87
commit
c2ef6fbb2d
36
.eslintrc.js
Normal file
36
.eslintrc.js
Normal file
@ -0,0 +1,36 @@
|
||||
/* eslint-disable */
|
||||
module.exports = {
|
||||
'env': {
|
||||
'browser': true,
|
||||
'es2021': true,
|
||||
"webextensions": true
|
||||
},
|
||||
'extends': 'eslint:recommended',
|
||||
'ignorePatterns': ['webpack.*', 'dist/'],
|
||||
'parserOptions': {
|
||||
'ecmaVersion': 12,
|
||||
'sourceType': 'module'
|
||||
},
|
||||
'plugins': ['unused-imports'],
|
||||
'rules': {
|
||||
'indent': ['error', 2, { 'SwitchCase': 1 }],
|
||||
'linebreak-style': [
|
||||
'error',
|
||||
'unix'
|
||||
],
|
||||
'quotes': [
|
||||
'error',
|
||||
'single'
|
||||
],
|
||||
'semi': [
|
||||
'error',
|
||||
'always'
|
||||
],
|
||||
'no-unused-vars': 'off',
|
||||
'unused-imports/no-unused-imports': ['error'],
|
||||
'unused-imports/no-unused-vars': [
|
||||
'warn',
|
||||
{ 'vars': 'all', 'varsIgnorePattern': '^_', 'args': 'after-used', 'argsIgnorePattern': '^_' }
|
||||
]
|
||||
}
|
||||
}
|
||||
4
.husky/pre-commit
Executable file
4
.husky/pre-commit
Executable file
@ -0,0 +1,4 @@
|
||||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npm run lint
|
||||
1807
package-lock.json
generated
1807
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,7 +5,9 @@
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "webpack serve --open --config webpack.dev.js",
|
||||
"build": "webpack --config webpack.prod.js"
|
||||
"build": "webpack --config webpack.prod.js",
|
||||
"lint": "eslint --fix --ext .js .",
|
||||
"prepare": "husky install"
|
||||
},
|
||||
"keywords": [
|
||||
"startpage",
|
||||
@ -29,7 +31,10 @@
|
||||
"copy-webpack-plugin": "^9.0.1",
|
||||
"css-loader": "^6.3.0",
|
||||
"css-minimizer-webpack-plugin": "^3.0.2",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-unused-imports": "^1.1.5",
|
||||
"html-webpack-plugin": "^5.3.1",
|
||||
"husky": "^7.0.2",
|
||||
"mini-css-extract-plugin": "^2.2.0",
|
||||
"moment": "^2.29.1",
|
||||
"sortablejs": "^1.13.0",
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { theme } from '../theme';
|
||||
import { toolbar } from '../toolbar';
|
||||
import { themeSetting } from '../menuContent/themeSetting';
|
||||
|
||||
@ -8,11 +7,7 @@ import { Button } from '../button';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { convertColor } from '../../utility/convertColor';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../utility/applyCSSState';
|
||||
|
||||
import './index.css';
|
||||
|
||||
@ -24,7 +19,7 @@ export const AccentPresetButton = function({ presetData = false } = {}) {
|
||||
|
||||
if (presetData.prefix) {
|
||||
fullName = presetData.prefix + ' ' + presetData.name.toLowerCase();
|
||||
};
|
||||
}
|
||||
|
||||
return fullName;
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ export const Alert = function({
|
||||
|
||||
this.element.alert.appendChild(this.element.header);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.body.appendChild(this.element.message);
|
||||
|
||||
|
||||
@ -1 +0,0 @@
|
||||
export const appName = 'nightTab';
|
||||
@ -3,7 +3,6 @@ import { data } from '../data';
|
||||
import { layout } from '../layout';
|
||||
import { group } from '../group';
|
||||
import { header } from '../header';
|
||||
import { bookmarkDefault } from '../bookmarkDefault';
|
||||
import { bookmarkPreset } from '../bookmarkPreset';
|
||||
import { groupAndBookmark } from '../groupAndBookmark';
|
||||
|
||||
@ -15,12 +14,10 @@ import { StagedGroup } from '../stagedGroup';
|
||||
import { Modal } from '../modal';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { clearChildNode } from '../../utility/clearChildNode';
|
||||
import { applyCSSVar } from '../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../utility/applyCSSState';
|
||||
import { set } from '../../utility/set';
|
||||
import { get } from '../../utility/get';
|
||||
import { sortArrayOfObject } from '../../utility/sortArrayOfObject';
|
||||
|
||||
import Sortable from 'sortablejs';
|
||||
@ -80,14 +77,14 @@ bookmark.item = {
|
||||
|
||||
if (bookmarkData.propagate.display || bookmarkData.propagate.layout || bookmarkData.propagate.theme) {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
bookmark.all.forEach((item) => {
|
||||
|
||||
item.items.forEach((item, i) => {
|
||||
item.items.forEach((item) => {
|
||||
|
||||
if (bookmarkData.propagate.display) {
|
||||
item.display.visual.show = bookmarkData.link.display.visual.show;
|
||||
item.display.name.show = bookmarkData.link.display.name.show;
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.propagate.layout) {
|
||||
item.display.visual.size = bookmarkData.link.display.visual.size;
|
||||
@ -98,27 +95,27 @@ bookmark.item = {
|
||||
item.display.alignment = bookmarkData.link.display.alignment;
|
||||
item.display.direction = bookmarkData.link.display.direction;
|
||||
item.display.order = bookmarkData.link.display.order;
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.propagate.theme) {
|
||||
item.accent = bookmarkData.link.accent;
|
||||
item.color = bookmarkData.link.color;
|
||||
item.border = bookmarkData.link.border;
|
||||
item.display.visual.shadow = bookmarkData.link.display.visual.shadow;
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
applyVar: (path, value) => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
bookmark.all.forEach((item) => {
|
||||
|
||||
item.items.forEach((item, i) => {
|
||||
item.items.forEach((item) => {
|
||||
|
||||
set({ object: item, path: path, value: value });
|
||||
|
||||
@ -130,28 +127,28 @@ bookmark.item = {
|
||||
sort: {
|
||||
letter: () => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
bookmark.all.forEach((item) => {
|
||||
item.items = sortArrayOfObject(item.items, 'display.visual.letter.text');
|
||||
});
|
||||
|
||||
},
|
||||
icon: () => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
bookmark.all.forEach((item) => {
|
||||
item.items = sortArrayOfObject(item.items, 'display.visual.icon.name');
|
||||
});
|
||||
|
||||
},
|
||||
name: () => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
bookmark.all.forEach((item) => {
|
||||
item.items = sortArrayOfObject(item.items, 'display.name.text');
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
render: (groupIndex) => {
|
||||
render: () => {
|
||||
|
||||
const addBookmarkToGroup = (bookmarkData, groupIndex, bookmarkIndex) => {
|
||||
|
||||
@ -205,15 +202,15 @@ bookmark.item = {
|
||||
|
||||
addBookmarkToGroup(item, groupIndex, bookmarkIndex);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
@ -238,11 +235,11 @@ bookmark.item = {
|
||||
|
||||
addEmptyGroup(groupIndex);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
clear: () => {
|
||||
@ -273,7 +270,7 @@ bookmark.edit = {
|
||||
bookmark.edit.close();
|
||||
} else {
|
||||
bookmark.edit.open();
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
render: () => {
|
||||
@ -282,17 +279,17 @@ bookmark.edit = {
|
||||
|
||||
if (bookmark.tile.current.length > 0) {
|
||||
|
||||
bookmark.tile.current.forEach((item, i) => {
|
||||
bookmark.tile.current.forEach((item) => {
|
||||
|
||||
if (state.get.current().bookmark.edit) {
|
||||
item.control.enable();
|
||||
} else {
|
||||
item.control.disable();
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
@ -301,8 +298,8 @@ bookmark.direction = {
|
||||
mod: {
|
||||
vertical: () => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
item.items.forEach((item, i) => {
|
||||
bookmark.all.forEach((item) => {
|
||||
item.items.forEach((item) => {
|
||||
|
||||
item.display.direction = 'vertical';
|
||||
|
||||
@ -312,8 +309,8 @@ bookmark.direction = {
|
||||
},
|
||||
horizontal: () => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
item.items.forEach((item, i) => {
|
||||
bookmark.all.forEach((item) => {
|
||||
item.items.forEach((item) => {
|
||||
|
||||
item.display.direction = 'horizontal';
|
||||
|
||||
@ -343,11 +340,11 @@ bookmark.add = {
|
||||
newBookmarkData.position.destination.group = groupIndex;
|
||||
|
||||
newBookmarkData.position.destination.item = bookmark.all[groupIndex].items.length;
|
||||
};
|
||||
}
|
||||
|
||||
if (!bookmark.all.length > 0) {
|
||||
newBookmarkData.group.destination = 'new';
|
||||
};
|
||||
}
|
||||
|
||||
const bookmarkForm = new BookmarkForm({ bookmarkData: newBookmarkData });
|
||||
|
||||
@ -374,8 +371,7 @@ bookmark.add = {
|
||||
successAction: () => {
|
||||
|
||||
switch (newBookmarkData.group.destination) {
|
||||
case 'new':
|
||||
|
||||
case 'new': {
|
||||
const newGroupData = new StagedGroup();
|
||||
|
||||
newGroupData.group.name.text = newBookmarkData.group.name;
|
||||
@ -389,8 +385,9 @@ bookmark.add = {
|
||||
layout.area.assemble();
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
newBookmarkData.link.timestamp = new Date().getTime();
|
||||
|
||||
@ -427,7 +424,7 @@ bookmark.sort = {
|
||||
|
||||
bookmark.sort.sortable = [];
|
||||
|
||||
group.area.current.forEach((item, i) => {
|
||||
group.area.current.forEach((item) => {
|
||||
|
||||
bookmark.sort.sortable.push(Sortable.create(item.element.body, {
|
||||
handle: '.bookmark-control-sort',
|
||||
@ -473,7 +470,7 @@ bookmark.count = () => {
|
||||
|
||||
let count = 0;
|
||||
|
||||
bookmark.all.forEach((item, i) => { count = count + item.items.length });
|
||||
bookmark.all.forEach((item) => { count = count + item.items.length; });
|
||||
|
||||
return count;
|
||||
|
||||
@ -489,7 +486,7 @@ bookmark.restore = (dataToRestore) => {
|
||||
|
||||
bookmark.append = (dataToAppend) => {
|
||||
|
||||
dataToAppend.bookmark.forEach((item, i) => {
|
||||
dataToAppend.bookmark.forEach((item) => {
|
||||
|
||||
bookmark.all.push(item);
|
||||
|
||||
@ -505,7 +502,7 @@ bookmark.reset = () => {
|
||||
|
||||
const groupIndex = i;
|
||||
|
||||
item.items.forEach((item, i) => {
|
||||
item.items.forEach((item) => {
|
||||
|
||||
const newBookmarkData = new StagedBookmark();
|
||||
|
||||
@ -531,7 +528,7 @@ bookmark.reset = () => {
|
||||
|
||||
newBookmarkData.position.destination.item = i;
|
||||
|
||||
bookmark.item.mod.edit(newBookmarkData)
|
||||
bookmark.item.mod.edit(newBookmarkData);
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { state } from '../state';
|
||||
import { bookmark } from '../bookmark';
|
||||
import { group } from '../group';
|
||||
|
||||
|
||||
@ -12,22 +12,18 @@ import { BookmarkPreview } from '../bookmarkPreview';
|
||||
import { Alert } from '../alert';
|
||||
|
||||
import { Control_helperText } from '../control/helperText';
|
||||
import { Control_inputButton } from '../control/inputButton';
|
||||
import { Control_groupText } from '../control/groupText';
|
||||
import { Control_radio } from '../control/radio';
|
||||
import { Control_radioGrid } from '../control/radioGrid';
|
||||
import { Control_checkbox } from '../control/checkbox';
|
||||
import { Control_slider } from '../control/slider';
|
||||
import { Control_sliderSlim } from '../control/sliderSlim';
|
||||
import { Control_colorMixer } from '../control/colorMixer';
|
||||
import { Control_color } from '../control/color';
|
||||
import { Control_text } from '../control/text';
|
||||
import { Control_select } from '../control/select';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { trimString } from '../../utility/trimString';
|
||||
import { ordinalNumber } from '../../utility/ordinalNumber';
|
||||
import { randomString } from '../../utility/randomString';
|
||||
import { randomNumber } from '../../utility/randomNumber';
|
||||
@ -58,7 +54,7 @@ export const BookmarkForm = function({
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return option;
|
||||
|
||||
@ -74,19 +70,19 @@ export const BookmarkForm = function({
|
||||
|
||||
if (bookmarkData.type.new || !(bookmarkData.position.origin.group === bookmarkData.position.destination.group)) {
|
||||
count++;
|
||||
};
|
||||
}
|
||||
|
||||
for (var i = 1; i <= count; i++) {
|
||||
|
||||
option.push(ordinalNumber(i));
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
option.push(ordinalNumber(1));
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return option;
|
||||
|
||||
@ -591,9 +587,9 @@ export const BookmarkForm = function({
|
||||
bookmarkData.position.destination.item = bookmark.all[bookmarkData.position.destination.group].items.length - 1;
|
||||
} else {
|
||||
bookmarkData.position.destination.item = bookmark.all[bookmarkData.position.destination.group].items.length;
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.control.group.position.item.updateOption(this.selectOption.item(), bookmarkData.position.destination.item);
|
||||
|
||||
@ -1086,7 +1082,7 @@ export const BookmarkForm = function({
|
||||
case 'letter':
|
||||
this.control.bookmark.display.visual.letter.text.enable();
|
||||
this.control.bookmark.display.visual.icon.text.disable();
|
||||
this.control.bookmark.display.visual.icon.preview.disable()
|
||||
this.control.bookmark.display.visual.icon.preview.disable();
|
||||
this.control.bookmark.display.visual.icon.remove.disable();
|
||||
this.control.bookmark.display.visual.image.url.disable();
|
||||
break;
|
||||
@ -1102,11 +1098,11 @@ export const BookmarkForm = function({
|
||||
case 'image':
|
||||
this.control.bookmark.display.visual.letter.text.disable();
|
||||
this.control.bookmark.display.visual.icon.text.disable();
|
||||
this.control.bookmark.display.visual.icon.preview.disable()
|
||||
this.control.bookmark.display.visual.icon.preview.disable();
|
||||
this.control.bookmark.display.visual.icon.remove.disable();
|
||||
this.control.bookmark.display.visual.image.url.enable();
|
||||
break;
|
||||
};
|
||||
}
|
||||
} else {
|
||||
this.control.bookmark.display.visual.type.disable();
|
||||
this.control.bookmark.display.visual.letter.text.disable();
|
||||
@ -1115,7 +1111,7 @@ export const BookmarkForm = function({
|
||||
this.control.bookmark.display.visual.icon.remove.disable();
|
||||
this.control.bookmark.display.visual.image.url.disable();
|
||||
this.control.bookmark.display.visual.size.disable();
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.link.display.name.show) {
|
||||
this.control.bookmark.display.name.text.enable();
|
||||
@ -1123,7 +1119,7 @@ export const BookmarkForm = function({
|
||||
} else {
|
||||
this.control.bookmark.display.name.text.disable();
|
||||
this.control.bookmark.display.name.size.disable();
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.link.display.visual.show || bookmarkData.link.display.name.show) {
|
||||
this.control.bookmark.display.translate.label.classList.remove('disabled');
|
||||
@ -1137,7 +1133,7 @@ export const BookmarkForm = function({
|
||||
this.control.bookmark.display.translate.y.disable();
|
||||
this.control.bookmark.display.rotate.disable();
|
||||
this.control.bookmark.display.alignment.disable();
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.link.display.visual.show && bookmarkData.link.display.name.show) {
|
||||
this.control.bookmark.display.direction.enable();
|
||||
@ -1147,7 +1143,7 @@ export const BookmarkForm = function({
|
||||
this.control.bookmark.display.direction.disable();
|
||||
this.control.bookmark.display.order.disable();
|
||||
this.control.bookmark.display.gutter.disable();
|
||||
};
|
||||
}
|
||||
|
||||
switch (bookmarkData.link.display.visual.type) {
|
||||
case 'letter':
|
||||
@ -1160,7 +1156,7 @@ export const BookmarkForm = function({
|
||||
this.control.bookmark.display.visual.shadow.size.disable();
|
||||
this.helper.bookmark.display.visual.shadow.size.disable();
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
switch (bookmarkData.link.color.by) {
|
||||
case 'theme':
|
||||
@ -1170,7 +1166,7 @@ export const BookmarkForm = function({
|
||||
case 'custom':
|
||||
this.control.bookmark.color.color.enable();
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
switch (bookmarkData.link.accent.by) {
|
||||
case 'theme':
|
||||
@ -1180,7 +1176,7 @@ export const BookmarkForm = function({
|
||||
case 'custom':
|
||||
this.control.bookmark.accent.color.enable();
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.link.background.show) {
|
||||
this.control.bookmark.background.type.enable();
|
||||
@ -1200,7 +1196,7 @@ export const BookmarkForm = function({
|
||||
this.control.bookmark.background.video.url.enable();
|
||||
this.helper.bookmark.background.video.enable();
|
||||
break;
|
||||
};
|
||||
}
|
||||
} else {
|
||||
this.control.bookmark.background.type.disable();
|
||||
this.control.bookmark.background.image.url.disable();
|
||||
@ -1208,7 +1204,7 @@ export const BookmarkForm = function({
|
||||
this.control.bookmark.background.video.url.disable();
|
||||
this.helper.bookmark.background.video.disable();
|
||||
this.control.bookmark.background.opacity.disable();
|
||||
};
|
||||
}
|
||||
|
||||
switch (bookmarkData.group.destination) {
|
||||
case 'existing':
|
||||
@ -1224,13 +1220,13 @@ export const BookmarkForm = function({
|
||||
this.control.group.name.enable();
|
||||
this.control.group.random.enable();
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
if (!bookmark.all.length > 0) {
|
||||
this.control.group.destination.radioSet[0].radio.disable();
|
||||
} else {
|
||||
this.control.group.destination.radioSet[0].radio.enable();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -1248,7 +1244,7 @@ export const BookmarkForm = function({
|
||||
this.control.bookmark.display.visual.icon.preview.update(node('span|class:bookmark-form-icon ' + bookmarkData.link.display.visual.icon.prefix + ' fa-' + bookmarkData.link.display.visual.icon.name));
|
||||
} else {
|
||||
this.control.bookmark.display.visual.icon.preview.update();
|
||||
};
|
||||
}
|
||||
|
||||
this.control.bookmark.display.visual.image.url.update();
|
||||
|
||||
@ -1278,7 +1274,7 @@ export const BookmarkForm = function({
|
||||
|
||||
this.element.form.addEventListener('keydown', (event) => {
|
||||
|
||||
if (event.keyCode == 13) { event.preventDefault(); return false; };
|
||||
if (event.keyCode == 13) { event.preventDefault(); return false; }
|
||||
|
||||
});
|
||||
|
||||
@ -1299,7 +1295,7 @@ export const BookmarkForm = function({
|
||||
bookmarkData.link.display.visual.icon.prefix = 'fas';
|
||||
} else if (suggestData.styles.includes('brands')) {
|
||||
bookmarkData.link.display.visual.icon.prefix = 'fab';
|
||||
};
|
||||
}
|
||||
|
||||
this.preview.update.assemble(bookmarkData);
|
||||
this.update();
|
||||
|
||||
@ -20,19 +20,19 @@ export const BookmarkPreview = function({
|
||||
this.grid.classList.add('bookmark-preview-grid-tall');
|
||||
} else {
|
||||
this.grid.classList.remove('bookmark-preview-grid-tall');
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.link.shape.wide) {
|
||||
this.grid.classList.add('bookmark-preview-grid-wide');
|
||||
} else {
|
||||
this.grid.classList.remove('bookmark-preview-grid-wide');
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.link.shape.tall || bookmarkData.link.shape.wide) {
|
||||
this.title.textContent = 'Preview (50% scale)';
|
||||
} else {
|
||||
this.title.textContent = 'Preview';
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@ const BookmarkTile = function({
|
||||
control: node('div|class:bookmark-control')
|
||||
};
|
||||
|
||||
if (preview) { this.element.bookmark.classList.add('bookmark-preview'); };
|
||||
if (preview) { this.element.bookmark.classList.add('bookmark-preview'); }
|
||||
|
||||
this.control = {};
|
||||
|
||||
@ -75,7 +75,7 @@ const BookmarkTile = function({
|
||||
|
||||
if (bookmarkData.position.destination.item < 0) {
|
||||
bookmarkData.position.destination.item = 0;
|
||||
};
|
||||
}
|
||||
|
||||
bookmark.item.mod.move(bookmarkData);
|
||||
|
||||
@ -106,7 +106,7 @@ const BookmarkTile = function({
|
||||
|
||||
if (bookmarkData.position.destination.item > bookmark.all[bookmarkData.position.destination.group].items.length - 1) {
|
||||
bookmarkData.position.destination.item = bookmark.all[bookmarkData.position.destination.group].items.length - 1;
|
||||
};
|
||||
}
|
||||
|
||||
bookmark.item.mod.move(bookmarkData);
|
||||
|
||||
@ -144,8 +144,7 @@ const BookmarkTile = function({
|
||||
successAction: () => {
|
||||
|
||||
switch (newBookmarkData.group.destination) {
|
||||
case 'new':
|
||||
|
||||
case 'new': {
|
||||
newBookmarkData.position.destination.group = bookmark.all.length;
|
||||
|
||||
const newGroupData = new StagedGroup();
|
||||
@ -157,7 +156,8 @@ const BookmarkTile = function({
|
||||
group.item.mod.add(newGroupData);
|
||||
|
||||
break;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
bookmark.item.mod.edit(newBookmarkData);
|
||||
|
||||
@ -211,7 +211,7 @@ const BookmarkTile = function({
|
||||
|
||||
for (var key in this.control.button) {
|
||||
this.control.button[key].disable();
|
||||
};
|
||||
}
|
||||
|
||||
this.control.searchState();
|
||||
|
||||
@ -221,7 +221,7 @@ const BookmarkTile = function({
|
||||
|
||||
for (var key in this.control.button) {
|
||||
this.control.button[key].enable();
|
||||
};
|
||||
}
|
||||
|
||||
this.control.searchState();
|
||||
|
||||
@ -237,7 +237,7 @@ const BookmarkTile = function({
|
||||
this.control.button.left.enable();
|
||||
this.control.button.right.enable();
|
||||
this.control.button.sort.enable();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -245,27 +245,27 @@ const BookmarkTile = function({
|
||||
|
||||
if (newBookmarkData) {
|
||||
bookmarkData = newBookmarkData;
|
||||
};
|
||||
}
|
||||
|
||||
if (isValidString(bookmarkData.link.url) && !preview) {
|
||||
this.element.content.link.setAttribute('href', trimString(bookmarkData.link.url));
|
||||
} else {
|
||||
this.element.content.link.setAttribute('href', '#');
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().bookmark.newTab && !preview) {
|
||||
this.element.content.link.setAttribute('target', '_blank');
|
||||
};
|
||||
}
|
||||
|
||||
if (!preview) {
|
||||
this.element.bookmark.style.setProperty('--bookmark-transition-delay', bookmarkData.position.origin.item);
|
||||
};
|
||||
}
|
||||
|
||||
this.element.bookmark.style.setProperty('--theme-bookmark-item-opacity', bookmarkData.link.color.opacity);
|
||||
|
||||
if (bookmarkData.link.color.opacity < 100) {
|
||||
this.element.bookmark.style.setProperty('--bookmark-clip-padding', 0);
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.link.color.opacity < 40) {
|
||||
|
||||
@ -275,25 +275,25 @@ const BookmarkTile = function({
|
||||
|
||||
this.element.bookmark.classList.remove('is-bookmark-opacity-low');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (preview) {
|
||||
const alignment = ['top-left', 'top-center', 'top-right', 'center-left', 'center-center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right'];
|
||||
|
||||
alignment.forEach((item, i) => {
|
||||
alignment.forEach((item) => {
|
||||
this.element.bookmark.classList.remove('is-bookmark-alignment-' + item);
|
||||
});
|
||||
const order = ['visual-name', 'name-visual'];
|
||||
|
||||
order.forEach((item, i) => {
|
||||
order.forEach((item) => {
|
||||
this.element.bookmark.classList.remove('is-bookmark-order-' + item);
|
||||
});
|
||||
const direction = ['vertical', 'horizontal'];
|
||||
|
||||
direction.forEach((item, i) => {
|
||||
direction.forEach((item) => {
|
||||
this.element.bookmark.classList.remove('is-bookmark-direction-' + item);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
this.element.bookmark.classList.add('is-bookmark-alignment-' + bookmarkData.link.display.alignment);
|
||||
|
||||
@ -331,7 +331,7 @@ const BookmarkTile = function({
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-visual-color', 'var(--theme-accent)');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.link.display.visual.shadow.size > 0) {
|
||||
|
||||
@ -371,7 +371,7 @@ const BookmarkTile = function({
|
||||
|
||||
this.element.bookmark.style.removeProperty('--bookmark-display-visual-shadow');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.link.color.by == 'custom') {
|
||||
|
||||
@ -407,7 +407,7 @@ const BookmarkTile = function({
|
||||
|
||||
this.element.bookmark.style.setProperty('--button-link-text-active', 'var(--theme-color-text)');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.link.background.show) {
|
||||
this.element.bookmark.style.setProperty('--bookmark-background-opacity', bookmarkData.link.background.opacity);
|
||||
@ -416,18 +416,18 @@ const BookmarkTile = function({
|
||||
case 'image':
|
||||
if (isValidString(bookmarkData.link.background.image.url)) {
|
||||
this.element.bookmark.style.setProperty('--bookmark-background-image-url', 'url("' + trimString(bookmarkData.link.background.image.url) + '")');
|
||||
};
|
||||
}
|
||||
break;
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (bookmarkData.link.shape.tall) {
|
||||
this.element.bookmark.classList.add('bookmark-tall');
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.link.shape.wide) {
|
||||
this.element.bookmark.classList.add('bookmark-wide');
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -440,7 +440,7 @@ const BookmarkTile = function({
|
||||
if (isValidString(bookmarkData.link.display.visual.letter.text)) {
|
||||
this.element.content.display.visual.visual.appendChild(this.element.content.display.visual.letter);
|
||||
this.element.content.display.display.appendChild(this.element.content.display.visual.visual);
|
||||
};
|
||||
}
|
||||
break;
|
||||
|
||||
case 'icon':
|
||||
@ -448,27 +448,27 @@ const BookmarkTile = function({
|
||||
this.element.content.display.visual.icon.appendChild(this.element.content.display.visual.faIcon);
|
||||
this.element.content.display.visual.visual.appendChild(this.element.content.display.visual.icon);
|
||||
this.element.content.display.display.appendChild(this.element.content.display.visual.visual);
|
||||
};
|
||||
}
|
||||
break;
|
||||
|
||||
case 'image':
|
||||
if (isValidString(bookmarkData.link.display.visual.image.url)) {
|
||||
this.element.content.display.visual.visual.appendChild(this.element.content.display.visual.image);
|
||||
this.element.content.display.display.appendChild(this.element.content.display.visual.visual);
|
||||
};
|
||||
}
|
||||
break;
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (bookmarkData.link.display.name.show && isValidString(bookmarkData.link.display.name.text)) {
|
||||
this.element.content.display.name.name.appendChild(this.element.content.display.name.text);
|
||||
this.element.content.display.display.appendChild(this.element.content.display.name.name);
|
||||
};
|
||||
}
|
||||
|
||||
this.element.content.display.wrap.appendChild(this.element.content.display.display);
|
||||
|
||||
this.element.content.link.appendChild(this.element.content.display.wrap);
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmarkData.link.background.show) {
|
||||
|
||||
@ -492,14 +492,14 @@ const BookmarkTile = function({
|
||||
|
||||
this.element.content.background.video.appendChild(this.video.video);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
this.element.content.link.appendChild(this.element.content.background.wrap);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.bookmark.appendChild(this.element.front);
|
||||
|
||||
@ -521,7 +521,7 @@ const BookmarkTile = function({
|
||||
|
||||
if (isValidString(bookmarkData.link.url)) {
|
||||
|
||||
this.element.url.text.textContent = trimString(bookmarkData.link.url).replace(/^https?\:\/\//i, '').replace('www.', '').replace(/\/+$/, '');
|
||||
this.element.url.text.textContent = trimString(bookmarkData.link.url).replace(/^https?:\/\//i, '').replace('www.', '').replace(/\/+$/, '');
|
||||
|
||||
this.element.url.text.title = trimString(bookmarkData.link.url);
|
||||
|
||||
@ -529,13 +529,13 @@ const BookmarkTile = function({
|
||||
|
||||
this.element.back.appendChild(this.element.url.url);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().bookmark.edit) {
|
||||
this.control.enable();
|
||||
} else {
|
||||
this.control.disable();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -26,10 +26,10 @@ export const Button = function({
|
||||
|
||||
if (srOnly) {
|
||||
buttonText.classList.add('sr-only');
|
||||
};
|
||||
}
|
||||
|
||||
this.button.appendChild(buttonText);
|
||||
};
|
||||
}
|
||||
|
||||
if (iconName) {
|
||||
|
||||
@ -44,13 +44,13 @@ export const Button = function({
|
||||
this.button.prepend(icon.render(iconName));
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (block) {
|
||||
this.button.classList.add('button-block');
|
||||
};
|
||||
}
|
||||
|
||||
switch (size) {
|
||||
case 'small':
|
||||
@ -60,23 +60,23 @@ export const Button = function({
|
||||
case 'large':
|
||||
this.button.classList.add('button-large');
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
if (title) {
|
||||
this.button.setAttribute('title', title);
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
this.button.classList.add(item);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
if (func) {
|
||||
this.button.addEventListener('click', (event) => {
|
||||
this.button.addEventListener('click', () => {
|
||||
func();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
this.style = {};
|
||||
|
||||
@ -85,7 +85,7 @@ export const Button = function({
|
||||
if (style) {
|
||||
|
||||
if (style.length > 0) {
|
||||
style.forEach((item, i) => {
|
||||
style.forEach((item) => {
|
||||
switch (item) {
|
||||
case 'link':
|
||||
this.button.classList.add('button-link');
|
||||
@ -98,11 +98,11 @@ export const Button = function({
|
||||
case 'ring':
|
||||
this.button.classList.add('button-ring');
|
||||
break;
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { state } from '../state';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { ordinalWord } from '../../utility/ordinalWord';
|
||||
import { wordNumber } from '../../utility/wordNumber';
|
||||
import { trimString } from '../../utility/trimString';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
@ -12,7 +11,7 @@ import moment from 'moment';
|
||||
|
||||
import './index.css';
|
||||
|
||||
export const Clock = function({} = {}) {
|
||||
export const Clock = function () {
|
||||
|
||||
this.now;
|
||||
|
||||
@ -48,17 +47,17 @@ export const Clock = function({} = {}) {
|
||||
|
||||
if (!state.get.current().header.clock.hour24.show && this.now.hours() > 12) {
|
||||
value = value - 12;
|
||||
};
|
||||
}
|
||||
|
||||
if (!state.get.current().header.clock.hour24.show && this.now.hours() == 0) {
|
||||
value = 12;
|
||||
};
|
||||
}
|
||||
|
||||
value = wordNumber(value);
|
||||
|
||||
if (state.get.current().header.clock.hour24.show && this.now.hours() > 0 && this.now.hours() < 10) {
|
||||
value = 'Zero ' + value;
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -68,19 +67,19 @@ export const Clock = function({} = {}) {
|
||||
|
||||
if (!state.get.current().header.clock.hour24.show && this.now.hours() > 12) {
|
||||
value = value - 12;
|
||||
};
|
||||
}
|
||||
|
||||
if (!state.get.current().header.clock.hour24.show && this.now.hours() == 0) {
|
||||
value = 12;
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.clock.hour24.show && this.now.hours() < 10) {
|
||||
value = '0' + value;
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return value;
|
||||
|
||||
@ -98,7 +97,7 @@ export const Clock = function({} = {}) {
|
||||
|
||||
if (this.now.minutes() > 0 && this.now.minutes() < 10) {
|
||||
value = 'Zero ' + value;
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -108,11 +107,11 @@ export const Clock = function({} = {}) {
|
||||
|
||||
if (this.now.minutes() < 10) {
|
||||
value = '0' + value;
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return value;
|
||||
|
||||
@ -130,7 +129,7 @@ export const Clock = function({} = {}) {
|
||||
|
||||
if (this.now.seconds() > 0 && this.now.seconds() < 10) {
|
||||
value = 'Zero ' + value;
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -140,11 +139,11 @@ export const Clock = function({} = {}) {
|
||||
|
||||
if (this.now.seconds() < 10) {
|
||||
value = '0' + value;
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return value;
|
||||
|
||||
@ -162,19 +161,19 @@ export const Clock = function({} = {}) {
|
||||
|
||||
if (state.get.current().header.clock.hour.show) {
|
||||
this.element.clock.appendChild(this.element.hour);
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.clock.minute.show) {
|
||||
this.element.clock.appendChild(this.element.minute);
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.clock.second.show) {
|
||||
this.element.clock.appendChild(this.element.second);
|
||||
};
|
||||
}
|
||||
|
||||
if (!state.get.current().header.clock.hour24.show && state.get.current().header.clock.meridiem.show) {
|
||||
this.element.clock.appendChild(this.element.meridiem);
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.clock.separator.show) {
|
||||
|
||||
@ -184,7 +183,7 @@ export const Clock = function({} = {}) {
|
||||
separatorCharacter = trimString(state.get.current().header.clock.separator.text);
|
||||
} else {
|
||||
separatorCharacter = ':';
|
||||
};
|
||||
}
|
||||
|
||||
let parts = this.element.clock.querySelectorAll('span');
|
||||
|
||||
@ -205,12 +204,12 @@ export const Clock = function({} = {}) {
|
||||
|
||||
this.element.clock.insertBefore(separator, item);
|
||||
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -222,19 +221,19 @@ export const Clock = function({} = {}) {
|
||||
|
||||
if (state.get.current().header.clock.hour.show) {
|
||||
this.element.hour.innerHTML = this.string.hour();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.clock.minute.show) {
|
||||
this.element.minute.innerHTML = this.string.minute();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.clock.second.show) {
|
||||
this.element.second.innerHTML = this.string.second();
|
||||
};
|
||||
}
|
||||
|
||||
if (!state.get.current().header.clock.hour24.show && state.get.current().header.clock.meridiem.show) {
|
||||
this.element.meridiem.innerHTML = this.string.meridiem();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
import { form } from '../form';
|
||||
import { icon } from '../icon';
|
||||
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { node } from '../../utility/node';
|
||||
|
||||
import './index.css';
|
||||
@ -13,7 +10,7 @@ export const Collapse = function({
|
||||
target = false
|
||||
} = {}) {
|
||||
|
||||
target.forEach((item, i) => {
|
||||
target.forEach((item) => {
|
||||
item.state = {
|
||||
collapsed: true
|
||||
};
|
||||
@ -32,7 +29,7 @@ export const Collapse = function({
|
||||
};
|
||||
|
||||
this.collapse = () => {
|
||||
target.forEach((item, i) => {
|
||||
target.forEach((item) => {
|
||||
item.spacer.appendChild(item.content);
|
||||
|
||||
item.area.appendChild(item.spacer);
|
||||
@ -44,12 +41,12 @@ export const Collapse = function({
|
||||
};
|
||||
|
||||
this.toggle = () => {
|
||||
target.forEach((item, i) => {
|
||||
target.forEach((item) => {
|
||||
if (item.state.collapsed) {
|
||||
item.state.collapsed = false;
|
||||
} else {
|
||||
item.state.collapsed = true;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.update();
|
||||
@ -64,7 +61,7 @@ export const Collapse = function({
|
||||
area.classList.remove('is-collapsed');
|
||||
// area.classList.add('is-pop');
|
||||
area.removeAttribute('aria-hidden');
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.renderToggle = (state, toggle) => {
|
||||
@ -74,25 +71,24 @@ export const Collapse = function({
|
||||
} else {
|
||||
toggle.classList.add('active');
|
||||
toggle.classList.add('is-collapsed');
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.update = () => {
|
||||
|
||||
switch (type) {
|
||||
|
||||
case 'radio':
|
||||
|
||||
case 'radio': {
|
||||
const selectedRadioValue = radioGroup.value();
|
||||
|
||||
target.forEach((item, i) => {
|
||||
target.forEach((item) => {
|
||||
this.renderTarget(!(item.id === selectedRadioValue), item.area);
|
||||
});
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'checkbox':
|
||||
|
||||
case 'checkbox': {
|
||||
let state = true;
|
||||
|
||||
if (checkbox.length > 1) {
|
||||
@ -107,29 +103,30 @@ export const Collapse = function({
|
||||
|
||||
state = checkbox.checked();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
target.forEach((item, i) => {
|
||||
target.forEach((item) => {
|
||||
this.renderTarget(!state, item.area);
|
||||
});
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'toggle':
|
||||
|
||||
target.forEach((item, i) => {
|
||||
target.forEach((item) => {
|
||||
|
||||
this.renderTarget(item.state.collapsed, item.area);
|
||||
|
||||
if (item.toggle) {
|
||||
this.renderToggle(item.state.collapsed, item.toggle);
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
export const Control_checkbox = function ({
|
||||
object = {},
|
||||
@ -20,9 +12,10 @@ export const Control_checkbox = function({
|
||||
labelText = 'name',
|
||||
description = false,
|
||||
action = false,
|
||||
inputButton = false,
|
||||
inputHide = false,
|
||||
inputButtonStyle = false
|
||||
//FIXME deprecated properties
|
||||
inputButton = false, //eslint-disable-line
|
||||
inputHide = false, //eslint-disable-line
|
||||
inputButtonStyle = false //eslint-disable-line
|
||||
} = {}) {
|
||||
|
||||
this.checkbox = form.input.checkbox({
|
||||
@ -32,7 +25,7 @@ export const Control_checkbox = function({
|
||||
|
||||
set({ object: object, path: path, value: this.checkbox.checked });
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,17 +1,11 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
import { randomNumber } from '../../../utility/randomNumber';
|
||||
|
||||
export const Control_color = function ({
|
||||
@ -20,7 +14,8 @@ export const Control_color = function({
|
||||
id = 'name',
|
||||
labelText = 'Name',
|
||||
srOnly = false,
|
||||
value = '#000000',
|
||||
//FIXME deprecated property
|
||||
value = '#000000', //eslint-disable-line
|
||||
defaultValue = false,
|
||||
action = false,
|
||||
randomColor = false,
|
||||
@ -55,9 +50,9 @@ export const Control_color = function({
|
||||
}))
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
this.text.value = convertColor.rgb.hex(get({ object: object, path: path + '.rgb' }));
|
||||
|
||||
@ -78,9 +73,9 @@ export const Control_color = function({
|
||||
|
||||
set({ object: object, path: path + '.rgb', value: convertColor.hex.rgb(this.text.value) });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
this.update({ delay: true });
|
||||
|
||||
@ -99,7 +94,7 @@ export const Control_color = function({
|
||||
|
||||
this.update({ all: true });
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
}
|
||||
});
|
||||
@ -125,7 +120,7 @@ export const Control_color = function({
|
||||
|
||||
this.update({ all: true });
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
}
|
||||
});
|
||||
@ -149,7 +144,7 @@ export const Control_color = function({
|
||||
object: object,
|
||||
path: path + '.rgb'
|
||||
}));
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -158,7 +153,7 @@ export const Control_color = function({
|
||||
this.delayedUpdate = setTimeout(updateControl, 2000);
|
||||
} else {
|
||||
updateControl();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -174,17 +169,17 @@ export const Control_color = function({
|
||||
|
||||
if (randomColor) {
|
||||
formGroup.appendChild(this.random.button);
|
||||
};
|
||||
}
|
||||
|
||||
if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) {
|
||||
formGroup.appendChild(this.reset.button);
|
||||
};
|
||||
}
|
||||
|
||||
if (extraButtons.length > 0) {
|
||||
extraButtons.forEach((item, i) => {
|
||||
extraButtons.forEach((item) => {
|
||||
formGroup.appendChild(item.button);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const wrap = form.wrap({
|
||||
children: [
|
||||
@ -205,10 +200,10 @@ export const Control_color = function({
|
||||
this.reset.disable();
|
||||
|
||||
if (extraButtons.length > 0) {
|
||||
extraButtons.forEach((item, i) => {
|
||||
extraButtons.forEach((item) => {
|
||||
item.disable();
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.enable = () => {
|
||||
@ -219,10 +214,10 @@ export const Control_color = function({
|
||||
this.reset.enable();
|
||||
|
||||
if (extraButtons.length > 0) {
|
||||
extraButtons.forEach((item, i) => {
|
||||
extraButtons.forEach((item) => {
|
||||
item.enable();
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
@ -11,7 +8,6 @@ import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
import { Control_color } from '../color';
|
||||
import { Control_sliderSlim } from '../sliderSlim';
|
||||
@ -64,7 +60,7 @@ export const Control_colorMixer = function({
|
||||
this.colorSliderL.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -90,7 +86,7 @@ export const Control_colorMixer = function({
|
||||
this.colorSliderL.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -116,7 +112,7 @@ export const Control_colorMixer = function({
|
||||
this.colorSliderL.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -142,7 +138,7 @@ export const Control_colorMixer = function({
|
||||
this.colorSliderS.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -168,7 +164,7 @@ export const Control_colorMixer = function({
|
||||
this.colorSliderL.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -194,7 +190,7 @@ export const Control_colorMixer = function({
|
||||
this.colorSliderL.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -220,7 +216,7 @@ export const Control_colorMixer = function({
|
||||
this.colorSliderL.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -255,7 +251,7 @@ export const Control_colorMixer = function({
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
@ -270,7 +266,7 @@ export const Control_colorMixer = function({
|
||||
this.colorSliderB.disable();
|
||||
} else {
|
||||
this.moreControlsUpdate();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.enable = () => {
|
||||
@ -285,7 +281,7 @@ export const Control_colorMixer = function({
|
||||
this.colorSliderB.enable();
|
||||
} else {
|
||||
this.moreControlsUpdate();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.moreControlsUpdate = () => {
|
||||
@ -304,7 +300,7 @@ export const Control_colorMixer = function({
|
||||
this.colorSliderR.enable();
|
||||
this.colorSliderG.enable();
|
||||
this.colorSliderB.enable();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,16 +1,7 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
import { clearChildNode } from '../../../utility/clearChildNode';
|
||||
|
||||
@ -32,7 +23,7 @@ export const Control_groupText = function({
|
||||
this.groupText.textContent = content;
|
||||
} else if (content && content != '') {
|
||||
this.groupText.appendChild(content);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.wrap = () => {
|
||||
@ -40,7 +31,7 @@ export const Control_groupText = function({
|
||||
children: [
|
||||
this.groupText
|
||||
]
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
|
||||
@ -1,17 +1,7 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
export const Control_helperText = function ({
|
||||
text = [],
|
||||
@ -20,7 +10,7 @@ export const Control_helperText = function({
|
||||
|
||||
this.para = [];
|
||||
|
||||
text.forEach((item, i) => {
|
||||
text.forEach((item) => {
|
||||
this.para.push(form.helper({
|
||||
tag: 'p',
|
||||
text: item,
|
||||
@ -31,7 +21,7 @@ export const Control_helperText = function({
|
||||
this.wrap = () => {
|
||||
const formWrap = form.wrap();
|
||||
|
||||
this.para.forEach((item, i) => {
|
||||
this.para.forEach((item) => {
|
||||
formWrap.appendChild(item);
|
||||
});
|
||||
|
||||
@ -39,13 +29,13 @@ export const Control_helperText = function({
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
this.para.forEach((item, i) => {
|
||||
this.para.forEach((item) => {
|
||||
item.classList.add('disabled');
|
||||
});
|
||||
};
|
||||
|
||||
this.enable = () => {
|
||||
this.para.forEach((item, i) => {
|
||||
this.para.forEach((item) => {
|
||||
item.classList.remove('disabled');
|
||||
});
|
||||
};
|
||||
|
||||
@ -8,6 +8,7 @@ import { Control_radio } from './radio';
|
||||
import { Control_radioGrid } from './radioGrid';
|
||||
import { Control_slider } from './slider';
|
||||
import { Control_sliderSlim } from './sliderSlim';
|
||||
import { Control_sliderDouble } from './sliderDouble';
|
||||
import { Control_text } from './text';
|
||||
import { Control_select } from './select';
|
||||
|
||||
@ -23,6 +24,6 @@ export {
|
||||
Control_slider,
|
||||
Control_sliderSlim,
|
||||
Control_sliderDouble,
|
||||
Control_text
|
||||
Control_text,
|
||||
Control_select
|
||||
};
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
export const Control_inputButton = function ({
|
||||
object = {},
|
||||
@ -36,7 +29,7 @@ export const Control_inputButton = function({
|
||||
func: () => {
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -65,16 +58,16 @@ export const Control_inputButton = function({
|
||||
path: path + '.rgb'
|
||||
}))
|
||||
});
|
||||
};
|
||||
}
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.label = form.label({
|
||||
text: labelText,
|
||||
@ -94,7 +87,7 @@ export const Control_inputButton = function({
|
||||
if (inputButtonStyle) {
|
||||
if (inputButtonStyle.length > 0) {
|
||||
|
||||
inputButtonStyle.forEach((item, i) => {
|
||||
inputButtonStyle.forEach((item) => {
|
||||
|
||||
switch (item) {
|
||||
case 'link':
|
||||
@ -112,12 +105,12 @@ export const Control_inputButton = function({
|
||||
case 'dot':
|
||||
this.button.classList.add('input-color-dot');
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -145,11 +138,11 @@ export const Control_inputButton = function({
|
||||
|
||||
if (inputButtonClassList.length > 0) {
|
||||
|
||||
inputButtonClassList.forEach((item, i) => {
|
||||
inputButtonClassList.forEach((item) => {
|
||||
this.button.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.button.appendChild(this.input);
|
||||
|
||||
@ -164,7 +157,7 @@ export const Control_inputButton = function({
|
||||
}));
|
||||
|
||||
break;
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.wrap = () => {
|
||||
@ -172,7 +165,7 @@ export const Control_inputButton = function({
|
||||
children: [
|
||||
this.button
|
||||
]
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
export const Control_radio = function ({
|
||||
radioGroup = [],
|
||||
@ -38,10 +30,10 @@ export const Control_radio = function({
|
||||
text: label,
|
||||
noPadding: true
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
if (radioGroup.length > 0) {
|
||||
radioGroup.forEach((item, i) => {
|
||||
radioGroup.forEach((item) => {
|
||||
const radioAndLabel = {
|
||||
radio: form.input.radio({
|
||||
id: item.id,
|
||||
@ -52,7 +44,7 @@ export const Control_radio = function({
|
||||
|
||||
set({ object: object, path: radioGroupPath, value: item.value });
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
}
|
||||
}),
|
||||
@ -97,16 +89,16 @@ export const Control_radio = function({
|
||||
|
||||
this.radioSet.push(radioAndLabel);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
this.value = () => {
|
||||
|
||||
let currentSelectedRadio = false;
|
||||
|
||||
this.radioSet.forEach((item, i) => {
|
||||
this.radioSet.forEach((item) => {
|
||||
if (item.radio.checked) {
|
||||
currentSelectedRadio = item.radio.value;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return currentSelectedRadio;
|
||||
@ -115,7 +107,7 @@ export const Control_radio = function({
|
||||
|
||||
this.update = () => {
|
||||
|
||||
this.radioSet.forEach((item, i) => {
|
||||
this.radioSet.forEach((item) => {
|
||||
item.radio.update();
|
||||
});
|
||||
|
||||
@ -127,9 +119,9 @@ export const Control_radio = function({
|
||||
|
||||
if (this.label) {
|
||||
wrap.appendChild(form.wrap({ children: [this.label] }));
|
||||
};
|
||||
}
|
||||
|
||||
this.radioSet.forEach((item, i) => {
|
||||
this.radioSet.forEach((item) => {
|
||||
wrap.appendChild(
|
||||
item.wrap()
|
||||
);
|
||||
@ -140,14 +132,15 @@ export const Control_radio = function({
|
||||
};
|
||||
|
||||
this.inputButton = ({
|
||||
inputHide = false
|
||||
//FIXME deprecated property
|
||||
inputHide = false //eslint-disable-line
|
||||
} = {}) => {
|
||||
|
||||
const wrap = form.wrap();
|
||||
|
||||
const group = form.group();
|
||||
|
||||
this.radioSet.forEach((item, i) => {
|
||||
this.radioSet.forEach((item) => {
|
||||
group.appendChild(
|
||||
item.inputButton()
|
||||
);
|
||||
@ -166,7 +159,7 @@ export const Control_radio = function({
|
||||
wrap: true
|
||||
});
|
||||
|
||||
this.radioSet.forEach((item, i) => {
|
||||
this.radioSet.forEach((item) => {
|
||||
inline.appendChild(
|
||||
form.wrap({
|
||||
children: [
|
||||
@ -181,7 +174,7 @@ export const Control_radio = function({
|
||||
|
||||
if (this.label) {
|
||||
wrap.appendChild(form.wrap({ children: [this.label] }));
|
||||
};
|
||||
}
|
||||
|
||||
wrap.appendChild(form.wrap({ children: [inline] }));
|
||||
|
||||
@ -190,23 +183,23 @@ export const Control_radio = function({
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
this.radioSet.forEach((item, i) => {
|
||||
this.radioSet.forEach((item) => {
|
||||
item.radio.disable();
|
||||
});
|
||||
|
||||
if (label) {
|
||||
this.label.classList.add('disabled');
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.enable = () => {
|
||||
this.radioSet.forEach((item, i) => {
|
||||
this.radioSet.forEach((item) => {
|
||||
item.radio.enable();
|
||||
});
|
||||
|
||||
if (label) {
|
||||
this.label.classList.remove('disabled');
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
export const Control_radioGrid = function ({
|
||||
radioGroup = [],
|
||||
@ -37,10 +29,10 @@ export const Control_radioGrid = function({
|
||||
this.label = form.label({
|
||||
text: label
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
if (radioGroup.length > 0) {
|
||||
radioGroup.forEach((item, i) => {
|
||||
radioGroup.forEach((item) => {
|
||||
const radioAndLabel = {};
|
||||
|
||||
radioAndLabel.position = item.position;
|
||||
@ -54,7 +46,7 @@ export const Control_radioGrid = function({
|
||||
|
||||
set({ object: object, path: radioGroupPath, value: item.value });
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
}
|
||||
});
|
||||
@ -92,22 +84,22 @@ export const Control_radioGrid = function({
|
||||
|
||||
this.radioSet.push(radioAndLabel);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
this.value = () => {
|
||||
let currentSelectedRadio = false;
|
||||
|
||||
this.radioSet.forEach((item, i) => {
|
||||
this.radioSet.forEach((item) => {
|
||||
if (item.radio.checked) {
|
||||
currentSelectedRadio = item.radio.value;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return currentSelectedRadio;
|
||||
};
|
||||
|
||||
this.update = () => {
|
||||
this.radioSet.forEach((item, i) => {
|
||||
this.radioSet.forEach((item) => {
|
||||
item.radio.update();
|
||||
});
|
||||
};
|
||||
@ -131,9 +123,9 @@ export const Control_radioGrid = function({
|
||||
case '2x2':
|
||||
gridElement.classList.add('form-grid-2x2');
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
this.radioSet.forEach((item, i) => {
|
||||
this.radioSet.forEach((item) => {
|
||||
const wrap = form.wrap({
|
||||
children: [
|
||||
item.radio,
|
||||
@ -148,7 +140,7 @@ export const Control_radioGrid = function({
|
||||
|
||||
if (label) {
|
||||
wrap.appendChild(this.label);
|
||||
};
|
||||
}
|
||||
|
||||
wrap.appendChild(gridElement);
|
||||
|
||||
@ -156,7 +148,7 @@ export const Control_radioGrid = function({
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
this.radioSet.forEach((item, i) => {
|
||||
this.radioSet.forEach((item) => {
|
||||
item.radio.disable();
|
||||
});
|
||||
|
||||
@ -164,11 +156,11 @@ export const Control_radioGrid = function({
|
||||
|
||||
if (label) {
|
||||
this.label.classList.add('disabled');
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.enable = () => {
|
||||
this.radioSet.forEach((item, i) => {
|
||||
this.radioSet.forEach((item) => {
|
||||
item.radio.enable();
|
||||
});
|
||||
|
||||
@ -176,7 +168,7 @@ export const Control_radioGrid = function({
|
||||
|
||||
if (label) {
|
||||
this.label.classList.remove('disabled');
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
@ -1,18 +1,10 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
import { trimString } from '../../../utility/trimString';
|
||||
import { clearChildNode } from '../../../utility/clearChildNode';
|
||||
|
||||
@ -36,7 +28,7 @@ export const Control_select = function({
|
||||
|
||||
set({ object: object, path: path, value: this.select.selectedIndex });
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
}
|
||||
});
|
||||
@ -48,8 +40,8 @@ export const Control_select = function({
|
||||
});
|
||||
|
||||
if (srOnly) {
|
||||
this.label.classList.add('sr-only')
|
||||
};
|
||||
this.label.classList.add('sr-only');
|
||||
}
|
||||
|
||||
this.update = () => {
|
||||
this.select.selectedIndex = get({
|
||||
@ -64,7 +56,7 @@ export const Control_select = function({
|
||||
|
||||
clearChildNode(this.select);
|
||||
|
||||
option.forEach((item, i) => {
|
||||
option.forEach((item) => {
|
||||
|
||||
this.select.appendChild(
|
||||
complexNode({
|
||||
@ -81,9 +73,9 @@ export const Control_select = function({
|
||||
|
||||
if (selectedIndex || selectedIndex === 0) {
|
||||
this.select.selectedIndex = selectedIndex;
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -97,7 +89,7 @@ export const Control_select = function({
|
||||
this.label,
|
||||
this.select
|
||||
]
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
import { minMax } from '../../../utility/minMax';
|
||||
|
||||
export const Control_slider = function ({
|
||||
@ -58,9 +51,9 @@ export const Control_slider = function({
|
||||
classList.push('input-range-contrast-spectrum');
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.range = form.input.range({
|
||||
id: id,
|
||||
@ -75,11 +68,11 @@ export const Control_slider = function({
|
||||
|
||||
set({ object: object, path: path, value: this.value() });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (sliderAction) { sliderAction(); };
|
||||
if (sliderAction) { sliderAction(); }
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
this.updateNumber();
|
||||
|
||||
@ -109,11 +102,11 @@ export const Control_slider = function({
|
||||
})
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (numberAction) { numberAction(); };
|
||||
if (numberAction) { numberAction(); }
|
||||
|
||||
if (action) { this.action({ delay: true }) };
|
||||
if (action) { this.action({ delay: true }); }
|
||||
|
||||
this.updateRange();
|
||||
|
||||
@ -136,9 +129,9 @@ export const Control_slider = function({
|
||||
value: JSON.parse(JSON.stringify(defaultValue))
|
||||
});
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
if (resetAction) { resetAction(); };
|
||||
if (resetAction) { resetAction(); }
|
||||
|
||||
this.update();
|
||||
|
||||
@ -161,7 +154,7 @@ export const Control_slider = function({
|
||||
} else {
|
||||
this.delayedAction = null;
|
||||
delayedAction();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -183,7 +176,7 @@ export const Control_slider = function({
|
||||
} else {
|
||||
this.delayedUpdateRange = null;
|
||||
updateControl();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -201,7 +194,7 @@ export const Control_slider = function({
|
||||
} else {
|
||||
this.delayedUpdateNumber = null;
|
||||
updateControl();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -228,7 +221,7 @@ export const Control_slider = function({
|
||||
|
||||
if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) {
|
||||
formGroup.appendChild(this.reset.button);
|
||||
};
|
||||
}
|
||||
|
||||
const formInline = form.inline({
|
||||
block: true,
|
||||
|
||||
@ -1,19 +1,12 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
import { Control_slider } from '../slider';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
import { minMax } from '../../../utility/minMax';
|
||||
|
||||
export const Control_sliderDouble = function ({
|
||||
object = {},
|
||||
@ -76,7 +69,7 @@ export const Control_sliderDouble = function({
|
||||
rightClipPostion = rightClipPostion + 1;
|
||||
} else {
|
||||
rightClipPostion = rightClipPostion - 1;
|
||||
};
|
||||
}
|
||||
|
||||
this.element.sliderDouble.style.setProperty('--slider-double-right-clip', rightClipPostion);
|
||||
|
||||
@ -98,12 +91,12 @@ export const Control_sliderDouble = function({
|
||||
action: () => {
|
||||
|
||||
if (get({ object: state.get.current(), path: left.path }) > get({ object: state.get.minMax(), path: left.path }).max - 10) {
|
||||
set({ object: state.get.current(), path: left.path, value: get({ object: state.get.minMax(), path: left.path }).max - 10 })
|
||||
};
|
||||
set({ object: state.get.current(), path: left.path, value: get({ object: state.get.minMax(), path: left.path }).max - 10 });
|
||||
}
|
||||
|
||||
if (get({ object: state.get.current(), path: left.path }) >= get({ object: state.get.current(), path: right.path }) - 10) {
|
||||
set({ object: state.get.current(), path: right.path, value: get({ object: state.get.current(), path: left.path }) + 10 })
|
||||
};
|
||||
set({ object: state.get.current(), path: right.path, value: get({ object: state.get.current(), path: left.path }) + 10 });
|
||||
}
|
||||
|
||||
this.range.left.updateRange();
|
||||
|
||||
@ -113,7 +106,7 @@ export const Control_sliderDouble = function({
|
||||
|
||||
if (left.action) {
|
||||
left.action();
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
focusAction: left.focusAction,
|
||||
@ -139,12 +132,12 @@ export const Control_sliderDouble = function({
|
||||
action: () => {
|
||||
|
||||
if (get({ object: state.get.current(), path: right.path }) < get({ object: state.get.minMax(), path: right.path }).min + 10) {
|
||||
set({ object: state.get.current(), path: right.path, value: get({ object: state.get.minMax(), path: right.path }).min + 10 })
|
||||
};
|
||||
set({ object: state.get.current(), path: right.path, value: get({ object: state.get.minMax(), path: right.path }).min + 10 });
|
||||
}
|
||||
|
||||
if (get({ object: state.get.current(), path: right.path }) <= get({ object: state.get.current(), path: left.path }) + 10) {
|
||||
set({ object: state.get.current(), path: left.path, value: get({ object: state.get.current(), path: right.path }) - 10 })
|
||||
};
|
||||
set({ object: state.get.current(), path: left.path, value: get({ object: state.get.current(), path: right.path }) - 10 });
|
||||
}
|
||||
|
||||
this.range.left.update();
|
||||
|
||||
@ -154,7 +147,7 @@ export const Control_sliderDouble = function({
|
||||
|
||||
if (right.action) {
|
||||
right.action();
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
focusAction: right.focusAction,
|
||||
@ -177,7 +170,7 @@ export const Control_sliderDouble = function({
|
||||
|
||||
if (left.defaultValue || (typeof left.defaultValue === 'number' && left.defaultValue === 0)) {
|
||||
leftNumberReset.prepend(this.range.left.reset.button);
|
||||
};
|
||||
}
|
||||
|
||||
const rightNumberReset = form.group({
|
||||
children: [
|
||||
@ -187,7 +180,7 @@ export const Control_sliderDouble = function({
|
||||
|
||||
if (right.defaultValue || (typeof right.defaultValue === 'number' && right.defaultValue === 0)) {
|
||||
rightNumberReset.appendChild(this.range.right.reset.button);
|
||||
};
|
||||
}
|
||||
|
||||
const wrap = form.wrap({
|
||||
children: [
|
||||
@ -244,7 +237,7 @@ export const Control_sliderDouble = function({
|
||||
this.delayedUpdate = setTimeout(updateControl, 2000);
|
||||
} else {
|
||||
updateControl();
|
||||
};
|
||||
}
|
||||
|
||||
this.rightClip();
|
||||
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
import { minMax } from '../../../utility/minMax';
|
||||
|
||||
export const Control_sliderSlim = function ({
|
||||
@ -46,7 +39,7 @@ export const Control_sliderSlim = function({
|
||||
|
||||
if (hue) {
|
||||
classList.push('input-range-hue-spectrum');
|
||||
};
|
||||
}
|
||||
|
||||
this.range = form.input.range({
|
||||
id: id,
|
||||
@ -61,11 +54,11 @@ export const Control_sliderSlim = function({
|
||||
|
||||
set({ object: object, path: path, value: this.value() });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
if (sliderAction) { sliderAction(); };
|
||||
if (sliderAction) { sliderAction(); }
|
||||
|
||||
this.number.value = get({ object: object, path: path });
|
||||
|
||||
@ -95,11 +88,11 @@ export const Control_sliderSlim = function({
|
||||
})
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
if (numberAction) { numberAction(); };
|
||||
if (numberAction) { numberAction(); }
|
||||
|
||||
this.update({ delay: true });
|
||||
|
||||
@ -122,9 +115,9 @@ export const Control_sliderSlim = function({
|
||||
|
||||
this.update();
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
if (resetAction) { resetAction(); };
|
||||
if (resetAction) { resetAction(); }
|
||||
|
||||
}
|
||||
});
|
||||
@ -145,7 +138,7 @@ export const Control_sliderSlim = function({
|
||||
this.delayedUpdate = setTimeout(updateControl, 2000);
|
||||
} else {
|
||||
updateControl();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -162,7 +155,7 @@ export const Control_sliderSlim = function({
|
||||
|
||||
if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) {
|
||||
formGroup.appendChild(this.reset.button);
|
||||
};
|
||||
}
|
||||
|
||||
const formInline = form.inline({
|
||||
block: true,
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
export const Control_text = function ({
|
||||
object = {},
|
||||
@ -33,8 +25,8 @@ export const Control_text = function({
|
||||
});
|
||||
|
||||
if (srOnly) {
|
||||
this.label.classList.add('sr-only')
|
||||
};
|
||||
this.label.classList.add('sr-only');
|
||||
}
|
||||
|
||||
this.text = form.input.text({
|
||||
id: id,
|
||||
@ -43,28 +35,28 @@ export const Control_text = function({
|
||||
|
||||
if (path) {
|
||||
set({ object: object, path: path, value: this.text.value });
|
||||
};
|
||||
}
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
if (value) {
|
||||
this.text.value = value;
|
||||
};
|
||||
}
|
||||
|
||||
if (min) {
|
||||
this.text.min = min;
|
||||
};
|
||||
}
|
||||
|
||||
if (max) {
|
||||
this.text.max = max;
|
||||
};
|
||||
}
|
||||
|
||||
if (placeholder) {
|
||||
this.text.placeholder = placeholder;
|
||||
};
|
||||
}
|
||||
|
||||
this.update = () => {
|
||||
|
||||
@ -78,7 +70,7 @@ export const Control_text = function({
|
||||
this.label,
|
||||
this.text
|
||||
]
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
export const Control_textReset = function ({
|
||||
object = {},
|
||||
@ -34,8 +27,8 @@ export const Control_textReset = function({
|
||||
});
|
||||
|
||||
if (srOnly) {
|
||||
this.label.classList.add('sr-only')
|
||||
};
|
||||
this.label.classList.add('sr-only');
|
||||
}
|
||||
|
||||
this.text = form.input.text({
|
||||
id: id,
|
||||
@ -47,28 +40,28 @@ export const Control_textReset = function({
|
||||
path: path,
|
||||
value: this.text.value
|
||||
});
|
||||
};
|
||||
}
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (value) {
|
||||
this.text.value = value;
|
||||
};
|
||||
}
|
||||
|
||||
if (min) {
|
||||
this.text.min = min;
|
||||
};
|
||||
}
|
||||
|
||||
if (max) {
|
||||
this.text.max = max;
|
||||
};
|
||||
}
|
||||
|
||||
if (placeholder) {
|
||||
this.text.placeholder = placeholder;
|
||||
};
|
||||
}
|
||||
|
||||
this.reset = new Button({
|
||||
text: false,
|
||||
@ -85,7 +78,7 @@ export const Control_textReset = function({
|
||||
this.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
export const Control_textarea = function ({
|
||||
object = {},
|
||||
@ -33,8 +25,8 @@ export const Control_textarea = function({
|
||||
});
|
||||
|
||||
if (srOnly) {
|
||||
this.label.classList.add('sr-only')
|
||||
};
|
||||
this.label.classList.add('sr-only');
|
||||
}
|
||||
|
||||
this.textarea = form.input.textarea({
|
||||
id: id,
|
||||
@ -43,28 +35,28 @@ export const Control_textarea = function({
|
||||
|
||||
if (path) {
|
||||
set({ object: object, path: path, value: this.textarea.value });
|
||||
};
|
||||
}
|
||||
|
||||
if (action) { action(); };
|
||||
if (action) { action(); }
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
if (value) {
|
||||
this.textarea.value = value;
|
||||
};
|
||||
}
|
||||
|
||||
if (min) {
|
||||
this.textarea.minLength = min;
|
||||
};
|
||||
}
|
||||
|
||||
if (max) {
|
||||
this.textarea.maxLength = max;
|
||||
};
|
||||
}
|
||||
|
||||
if (placeholder) {
|
||||
this.textarea.placeholder = placeholder;
|
||||
};
|
||||
}
|
||||
|
||||
this.update = () => {
|
||||
|
||||
@ -78,7 +70,7 @@ export const Control_textarea = function({
|
||||
this.label,
|
||||
this.textarea
|
||||
]
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
|
||||
@ -1,15 +1,12 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
|
||||
import * as form from '../form';
|
||||
|
||||
import { Modal } from '../modal';
|
||||
import { CustomThemeTile } from '../customThemeTile';
|
||||
import { CustomThemeForm } from '../customThemeForm';
|
||||
import { StagedCustomTheme } from '../stagedCustomTheme';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { clearChildNode } from '../../utility/clearChildNode';
|
||||
import { applyCSSState } from '../../utility/applyCSSState';
|
||||
|
||||
const customTheme = {};
|
||||
@ -117,7 +114,7 @@ customTheme.edit = {
|
||||
customTheme.edit.close();
|
||||
} else {
|
||||
customTheme.edit.open();
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
render: () => {
|
||||
@ -125,16 +122,16 @@ customTheme.edit = {
|
||||
applyCSSState('theme.custom.edit');
|
||||
|
||||
if (customTheme.tile.current.length > 0) {
|
||||
customTheme.tile.current.forEach((item, i) => {
|
||||
customTheme.tile.current.forEach((item) => {
|
||||
|
||||
if (state.get.current().theme.custom.edit) {
|
||||
item.control.enable();
|
||||
} else {
|
||||
item.control.disable();
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,25 +1,9 @@
|
||||
import * as form from '../form';
|
||||
|
||||
import { Button } from '../button';
|
||||
|
||||
import { Control_helperText } from '../control/helperText';
|
||||
import { Control_inputButton } from '../control/inputButton';
|
||||
import { Control_groupText } from '../control/groupText';
|
||||
import { Control_radio } from '../control/radio';
|
||||
import { Control_radioGrid } from '../control/radioGrid';
|
||||
import { Control_checkbox } from '../control/checkbox';
|
||||
import { Control_slider } from '../control/slider';
|
||||
import { Control_sliderSlim } from '../control/sliderSlim';
|
||||
import { Control_colorMixer } from '../control/colorMixer';
|
||||
import { Control_color } from '../control/color';
|
||||
import { Control_text } from '../control/text';
|
||||
import { Control_select } from '../control/select';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { trimString } from '../../utility/trimString';
|
||||
import { ordinalNumber } from '../../utility/ordinalNumber';
|
||||
import { randomString } from '../../utility/randomString';
|
||||
import { randomNumber } from '../../utility/randomNumber';
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import { toolbar } from '../toolbar';
|
||||
import { layout } from '../layout';
|
||||
import { header } from '../header';
|
||||
import { bookmark } from '../bookmark';
|
||||
import { group } from '../group';
|
||||
import { groupAndBookmark } from '../groupAndBookmark';
|
||||
import { customTheme } from '../customTheme';
|
||||
import { themeSetting } from '../menuContent/themeSetting';
|
||||
@ -19,7 +18,6 @@ import { StagedCustomTheme } from '../stagedCustomTheme';
|
||||
import { node } from '../../utility/node';
|
||||
import { convertColor } from '../../utility/convertColor';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../utility/applyCSSState';
|
||||
@ -393,13 +391,13 @@ export const CustomThemeTile = function({
|
||||
this.control.disable = () => {
|
||||
for (var key in this.control.button) {
|
||||
this.control.button[key].disable();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.control.enable = () => {
|
||||
for (var key in this.control.button) {
|
||||
this.control.button[key].enable();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.previewTile = () => {
|
||||
@ -432,13 +430,13 @@ export const CustomThemeTile = function({
|
||||
darken();
|
||||
} else if (window.matchMedia('(prefers-color-scheme:light)').matches) {
|
||||
lighten();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (hsl.l < 0) { hsl.l = 0; };
|
||||
if (hsl.l < 0) { hsl.l = 0; }
|
||||
|
||||
if (hsl.l > 100) { hsl.l = 100; };
|
||||
if (hsl.l > 100) { hsl.l = 100; }
|
||||
|
||||
let rgb = convertColor.hsl.rgb(hsl);
|
||||
|
||||
@ -453,7 +451,7 @@ export const CustomThemeTile = function({
|
||||
|
||||
this.element.preview.appendChild(node('span|class:theme-custom-background-0' + i));
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.tile.style.setProperty('--theme-custom-text', '0, 0%, calc(((((var(--theme-custom-background-01-rgb-r) * var(--theme-t-r)) + (var(--theme-custom-background-01-rgb-g) * var(--theme-t-g)) + (var(--theme-custom-background-01-rgb-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%)');
|
||||
|
||||
@ -465,7 +463,7 @@ export const CustomThemeTile = function({
|
||||
|
||||
this.element.preview.appendChild(node('span|class:theme-custom-accent'));
|
||||
|
||||
return node('div|class:theme-custom-tile')
|
||||
return node('div|class:theme-custom-tile');
|
||||
|
||||
};
|
||||
|
||||
@ -481,7 +479,7 @@ export const CustomThemeTile = function({
|
||||
|
||||
this.element.custom.button.appendChild(this.element.name);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.front.appendChild(this.element.custom.button);
|
||||
|
||||
@ -499,7 +497,7 @@ export const CustomThemeTile = function({
|
||||
this.control.enable();
|
||||
} else {
|
||||
this.control.disable();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import { bookmark } from '../bookmark';
|
||||
import { menu } from '../menu';
|
||||
import { version } from '../version';
|
||||
import { update } from '../update';
|
||||
import { appName } from '../appName';
|
||||
import { APP_NAME } from '../../constant';
|
||||
|
||||
import { Modal } from '../modal';
|
||||
import { ImportForm } from '../importForm';
|
||||
@ -17,11 +17,11 @@ import { clearChildNode } from '../../utility/clearChildNode';
|
||||
const data = {};
|
||||
|
||||
data.set = (key, data) => {
|
||||
localStorage.setItem(key, data);
|
||||
window.localStorage.setItem(key, data);
|
||||
};
|
||||
|
||||
data.get = (key) => {
|
||||
return localStorage.getItem(key);
|
||||
return window.localStorage.getItem(key);
|
||||
};
|
||||
|
||||
data.import = {
|
||||
@ -31,7 +31,6 @@ data.import = {
|
||||
theme: { include: true }
|
||||
},
|
||||
reset: () => {
|
||||
|
||||
data.import.state.setup.include = true;
|
||||
|
||||
data.import.state.bookmark.include = true;
|
||||
@ -39,56 +38,46 @@ data.import = {
|
||||
data.import.state.bookmark.type = 'restore';
|
||||
|
||||
data.import.state.theme.include = true;
|
||||
|
||||
},
|
||||
file: ({
|
||||
fileList = false,
|
||||
feedback = false,
|
||||
input = false
|
||||
} = {}) => {
|
||||
|
||||
if (fileList.length > 0) {
|
||||
data.validate.file({
|
||||
fileList: fileList,
|
||||
feedback: feedback,
|
||||
input: input
|
||||
});
|
||||
};
|
||||
|
||||
}
|
||||
},
|
||||
drop: ({
|
||||
fileList = false,
|
||||
feedback = false
|
||||
}) => {
|
||||
|
||||
if (fileList.length > 0) {
|
||||
data.validate.file({
|
||||
fileList: fileList,
|
||||
feedback: feedback
|
||||
});
|
||||
};
|
||||
|
||||
}
|
||||
},
|
||||
paste: ({
|
||||
clipboardData = false,
|
||||
feedback = false
|
||||
}) => {
|
||||
|
||||
data.validate.paste({
|
||||
clipboardData: clipboardData,
|
||||
feedback: feedback
|
||||
});
|
||||
|
||||
},
|
||||
render: (dataToImport) => {
|
||||
|
||||
let dataToCheck = JSON.parse(dataToImport);
|
||||
|
||||
if (dataToCheck.version != version.number) {
|
||||
|
||||
if (dataToCheck.version !== version.number) {
|
||||
dataToCheck = data.update(dataToCheck);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
const importForm = new ImportForm({
|
||||
dataToImport: dataToCheck,
|
||||
@ -96,41 +85,34 @@ data.import = {
|
||||
});
|
||||
|
||||
const importModal = new Modal({
|
||||
heading: 'Restoring from a ' + appName + ' backup',
|
||||
heading: 'Restoring from a ' + APP_NAME + ' backup',
|
||||
content: importForm.form(),
|
||||
successText: 'Import',
|
||||
width: 'small',
|
||||
successAction: () => {
|
||||
|
||||
if (data.import.state.setup.include || data.import.state.theme.include || data.import.state.bookmark.include) {
|
||||
|
||||
let dataToRestore = JSON.parse(dataToImport);
|
||||
|
||||
if (dataToRestore.version != version.number) {
|
||||
|
||||
if (dataToRestore.version !== version.number) {
|
||||
data.backup(dataToRestore);
|
||||
|
||||
dataToRestore = data.update(dataToRestore);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.restore(dataToRestore);
|
||||
|
||||
data.save();
|
||||
|
||||
data.reload.render();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.import.reset();
|
||||
|
||||
},
|
||||
cancelAction: () => { data.import.reset(); },
|
||||
closeAction: () => { data.import.reset(); }
|
||||
});
|
||||
|
||||
importModal.open();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -138,94 +120,67 @@ data.validate = {
|
||||
paste: ({
|
||||
feedback = false
|
||||
} = {}) => {
|
||||
|
||||
navigator.clipboard.readText().then(clipboardData => {
|
||||
|
||||
// is the data a JSON object
|
||||
if (isJson(clipboardData)) {
|
||||
|
||||
// is this JSON from this app
|
||||
if (JSON.parse(clipboardData)[appName] || JSON.parse(clipboardData)[appName.toLowerCase()]) {
|
||||
|
||||
if (JSON.parse(clipboardData)[APP_NAME] || JSON.parse(clipboardData)[APP_NAME.toLowerCase()]) {
|
||||
data.feedback.clear.render(feedback);
|
||||
|
||||
data.feedback.success.render(feedback, 'Clipboard data', () => {
|
||||
|
||||
menu.close();
|
||||
|
||||
data.import.render(clipboardData);
|
||||
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
data.feedback.clear.render(feedback);
|
||||
|
||||
data.feedback.fail.notClipboardJson.render(feedback, 'Clipboard data');
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
} else {
|
||||
|
||||
// not a JSON object
|
||||
|
||||
data.feedback.clear.render(feedback);
|
||||
|
||||
data.feedback.fail.notClipboardJson.render(feedback, 'Clipboard data');
|
||||
|
||||
};
|
||||
|
||||
}).catch(error => {
|
||||
|
||||
}
|
||||
}).catch(() => {
|
||||
data.feedback.clear.render(feedback);
|
||||
|
||||
data.feedback.fail.notClipboardJson.render(feedback, 'Clipboard data');
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
file: ({
|
||||
fileList = false,
|
||||
feedback = false,
|
||||
input = false
|
||||
} = {}) => {
|
||||
|
||||
// make new file reader
|
||||
var reader = new FileReader();
|
||||
const reader = new window.FileReader();
|
||||
|
||||
// define the on load event for the reader
|
||||
reader.onload = (event) => {
|
||||
|
||||
// is this a JSON file
|
||||
if (isJson(event.target.result)) {
|
||||
|
||||
// is this JSON from this app
|
||||
if (JSON.parse(event.target.result)[appName] || JSON.parse(event.target.result)[appName.toLowerCase()]) {
|
||||
|
||||
if (JSON.parse(event.target.result)[APP_NAME] || JSON.parse(event.target.result)[APP_NAME.toLowerCase()]) {
|
||||
data.feedback.clear.render(feedback);
|
||||
|
||||
data.feedback.success.render(feedback, fileList[0].name, () => {
|
||||
|
||||
menu.close();
|
||||
|
||||
data.import.render(event.target.result);
|
||||
|
||||
});
|
||||
|
||||
if (input) { input.value = ''; };
|
||||
|
||||
if (input) { input.value = ''; }
|
||||
} else {
|
||||
|
||||
data.feedback.clear.render(feedback);
|
||||
|
||||
data.feedback.fail.notAppJson.render(feedback, fileList[0].name);
|
||||
|
||||
if (input) { input.value = ''; };
|
||||
|
||||
};
|
||||
|
||||
if (input) { input.value = ''; }
|
||||
}
|
||||
} else {
|
||||
|
||||
// not a JSON file
|
||||
|
||||
data.feedback.clear.render(feedback);
|
||||
@ -233,18 +188,13 @@ data.validate = {
|
||||
data.feedback.fail.notJson.render(feedback, fileList[0].name);
|
||||
|
||||
if (input) {
|
||||
|
||||
input.value = '';
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// invoke the reader
|
||||
reader.readAsText(fileList.item(0));
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -254,7 +204,7 @@ data.export = () => {
|
||||
const leadingZero = (value) => {
|
||||
if (value < 10) {
|
||||
value = '0' + value;
|
||||
};
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
@ -266,7 +216,7 @@ data.export = () => {
|
||||
timestamp.year = leadingZero(timestamp.year);
|
||||
timestamp = timestamp.year + '.' + timestamp.month + '.' + timestamp.date + ' - ' + timestamp.hours + ' ' + timestamp.minutes + ' ' + timestamp.seconds;
|
||||
|
||||
const fileName = appName + ' backup - ' + timestamp + '.json';
|
||||
const fileName = APP_NAME + ' backup - ' + timestamp + '.json';
|
||||
|
||||
const dataToExport = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data.load()));
|
||||
|
||||
@ -284,55 +234,41 @@ data.export = () => {
|
||||
};
|
||||
|
||||
data.remove = (key) => {
|
||||
localStorage.removeItem(key);
|
||||
window.localStorage.removeItem(key);
|
||||
};
|
||||
|
||||
data.backup = (dataToBackup) => {
|
||||
|
||||
if (dataToBackup) {
|
||||
|
||||
data.set(appName + 'Backup', JSON.stringify(dataToBackup));
|
||||
data.set(APP_NAME + 'Backup', JSON.stringify(dataToBackup));
|
||||
|
||||
console.log('data version ' + dataToBackup.version + ' backed up');
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
data.update = (dataToUpdate) => {
|
||||
|
||||
if (dataToUpdate.version != version.number) {
|
||||
|
||||
if (dataToUpdate.version !== version.number) {
|
||||
dataToUpdate = update.run(dataToUpdate);
|
||||
|
||||
} else {
|
||||
|
||||
console.log('data version:', version.number, 'no need to run update');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return dataToUpdate;
|
||||
|
||||
};
|
||||
|
||||
data.restore = (dataToRestore) => {
|
||||
|
||||
if (dataToRestore) {
|
||||
|
||||
console.log('data found to load');
|
||||
|
||||
if (data.import.state.setup.include) {
|
||||
state.set.restore.setup(dataToRestore);
|
||||
};
|
||||
}
|
||||
|
||||
if (data.import.state.theme.include) {
|
||||
state.set.restore.theme(dataToRestore);
|
||||
};
|
||||
}
|
||||
|
||||
if (data.import.state.bookmark.include) {
|
||||
|
||||
switch (data.import.state.bookmark.type) {
|
||||
|
||||
case 'restore':
|
||||
bookmark.restore(dataToRestore);
|
||||
break;
|
||||
@ -340,24 +276,18 @@ data.restore = (dataToRestore) => {
|
||||
case 'append':
|
||||
bookmark.append(dataToRestore);
|
||||
break;
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
||||
console.log('no data found to load');
|
||||
|
||||
state.set.default();
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
data.save = () => {
|
||||
data.set(appName, JSON.stringify({
|
||||
[appName]: true,
|
||||
data.set(APP_NAME, JSON.stringify({
|
||||
[APP_NAME]: true,
|
||||
version: version.number,
|
||||
state: state.get.current(),
|
||||
bookmark: bookmark.all
|
||||
@ -365,67 +295,54 @@ data.save = () => {
|
||||
};
|
||||
|
||||
data.load = () => {
|
||||
if (data.get(APP_NAME) !== null && data.get(APP_NAME) !== undefined) {
|
||||
let dataToLoad = JSON.parse(data.get(APP_NAME));
|
||||
|
||||
if (data.get(appName) != null && data.get(appName) != undefined) {
|
||||
|
||||
let dataToLoad = JSON.parse(data.get(appName));
|
||||
|
||||
if (dataToLoad.version != version.number) {
|
||||
|
||||
if (dataToLoad.version !== version.number) {
|
||||
data.backup(dataToLoad);
|
||||
|
||||
dataToLoad = data.update(dataToLoad);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return dataToLoad;
|
||||
|
||||
} else {
|
||||
|
||||
return false;
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
data.wipe = {
|
||||
all: () => {
|
||||
|
||||
data.remove(appName);
|
||||
data.remove(APP_NAME);
|
||||
|
||||
data.reload.render();
|
||||
|
||||
},
|
||||
partial: () => {
|
||||
|
||||
bookmark.reset();
|
||||
|
||||
data.set(appName, JSON.stringify({
|
||||
[appName]: true,
|
||||
data.set(APP_NAME, JSON.stringify({
|
||||
[APP_NAME]: true,
|
||||
version: version.number,
|
||||
state: state.get.default(),
|
||||
bookmark: bookmark.all
|
||||
}));
|
||||
|
||||
data.reload.render();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
data.reload = {
|
||||
render: () => {
|
||||
location.reload();
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
data.clear = {
|
||||
all: {
|
||||
render: () => {
|
||||
|
||||
const clearModal = new Modal({
|
||||
heading: 'Clear all ' + appName + ' data?',
|
||||
heading: 'Clear all ' + APP_NAME + ' data?',
|
||||
content: node('div', [
|
||||
node('p:Are you sure you want to clear all ' + appName + ' Bookmarks and Settings? ' + appName + ' will be restore to the default state.'),
|
||||
node('p:Are you sure you want to clear all ' + APP_NAME + ' Bookmarks and Settings? ' + APP_NAME + ' will be restore to the default state.'),
|
||||
node('p:This can not be undone.')
|
||||
]),
|
||||
successText: 'Clear all data',
|
||||
@ -436,16 +353,14 @@ data.clear = {
|
||||
});
|
||||
|
||||
clearModal.open();
|
||||
|
||||
}
|
||||
},
|
||||
partial: {
|
||||
render: () => {
|
||||
|
||||
const clearModal = new Modal({
|
||||
heading: 'Clear ' + appName + ' data except bookmarks?',
|
||||
heading: 'Clear ' + APP_NAME + ' data except bookmarks?',
|
||||
content: node('div', [
|
||||
node('p:Are you sure you want to clear all ' + appName + ' Settings? ' + appName + ' will be restore to the default state but your Bookmarks and Groups will remain.'),
|
||||
node('p:Are you sure you want to clear all ' + APP_NAME + ' Settings? ' + APP_NAME + ' will be restore to the default state but your Bookmarks and Groups will remain.'),
|
||||
node('p:This can not be undone.')
|
||||
]),
|
||||
successText: 'Clear all except bookmarks',
|
||||
@ -456,7 +371,6 @@ data.clear = {
|
||||
});
|
||||
|
||||
clearModal.open();
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -477,36 +391,34 @@ data.feedback.clear = {
|
||||
|
||||
data.feedback.success = {
|
||||
render: (feedback, filename, action) => {
|
||||
|
||||
feedback.appendChild(node('p:Success! Restoring ' + appName + ' Bookmarks and Settings.|class:muted small'));
|
||||
feedback.appendChild(node('p:Success! Restoring ' + APP_NAME + ' Bookmarks and Settings.|class:muted small'));
|
||||
|
||||
feedback.appendChild(node('p:' + filename));
|
||||
|
||||
if (action) {
|
||||
data.feedback.animation.set.render(feedback, 'is-pop', action);
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
data.feedback.fail = {
|
||||
notJson: {
|
||||
render: (feedback, filename) => {
|
||||
feedback.appendChild(node('p:Not a JSON file. Make sure the selected file came from ' + appName + '.|class:small muted'));
|
||||
feedback.appendChild(node('p:Not a JSON file. Make sure the selected file came from ' + APP_NAME + '.|class:small muted'));
|
||||
feedback.appendChild(complexNode({ tag: 'p', text: filename }));
|
||||
data.feedback.animation.set.render(feedback, 'is-shake');
|
||||
}
|
||||
},
|
||||
notAppJson: {
|
||||
render: (feedback, filename) => {
|
||||
feedback.appendChild(node('p:Not the right kind of JSON file. Make sure the selected file came from ' + appName + '.|class:small muted'));
|
||||
feedback.appendChild(node('p:Not the right kind of JSON file. Make sure the selected file came from ' + APP_NAME + '.|class:small muted'));
|
||||
feedback.appendChild(complexNode({ tag: 'p', text: filename }));
|
||||
data.feedback.animation.set.render(feedback, 'is-shake');
|
||||
}
|
||||
},
|
||||
notClipboardJson: {
|
||||
render: (feedback, name) => {
|
||||
feedback.appendChild(node('p:Not the right kind of data. Make sure the clipboard holds data from ' + appName + ' or a ' + appName + ' backup JSON file.|class:small muted'));
|
||||
feedback.appendChild(node('p:Not the right kind of data. Make sure the clipboard holds data from ' + APP_NAME + ' or a ' + APP_NAME + ' backup JSON file.|class:small muted'));
|
||||
feedback.appendChild(node('p:' + name));
|
||||
data.feedback.animation.set.render(feedback, 'is-shake');
|
||||
}
|
||||
@ -521,7 +433,7 @@ data.feedback.animation = {
|
||||
const animationEndAction = () => {
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
data.feedback.animation.reset.render(feedback);
|
||||
};
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ import moment from 'moment';
|
||||
|
||||
import './index.css';
|
||||
|
||||
export const Date = function({} = {}) {
|
||||
export const Date = function () {
|
||||
|
||||
this.now;
|
||||
|
||||
@ -48,7 +48,7 @@ export const Date = function({} = {}) {
|
||||
|
||||
if (state.get.current().header.date.day.length == 'short') {
|
||||
value = value.substring(0, 3);
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -59,14 +59,14 @@ export const Date = function({} = {}) {
|
||||
if (state.get.current().header.date.day.weekStart == 'monday') {
|
||||
if (value == 0) {
|
||||
value = 7;
|
||||
};
|
||||
}
|
||||
} else if (state.get.current().header.date.day.weekStart == 'sunday') {
|
||||
value = value + 1;
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return value;
|
||||
|
||||
@ -84,7 +84,7 @@ export const Date = function({} = {}) {
|
||||
value = ordinalWord(wordNumber(this.now.date()));
|
||||
} else {
|
||||
value = wordNumber(this.now.date());
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -94,11 +94,11 @@ export const Date = function({} = {}) {
|
||||
value = this.now.format('Do');
|
||||
} else {
|
||||
value = this.now.format('D');
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return value;
|
||||
|
||||
@ -115,7 +115,7 @@ export const Date = function({} = {}) {
|
||||
value = this.now.format('MMMM');
|
||||
if (state.get.current().header.date.month.length == 'short') {
|
||||
value = value.substring(0, 3);
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -125,11 +125,11 @@ export const Date = function({} = {}) {
|
||||
value = this.now.format('Mo');
|
||||
} else {
|
||||
value = this.now.format('M');
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return value;
|
||||
|
||||
@ -153,7 +153,7 @@ export const Date = function({} = {}) {
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return value;
|
||||
|
||||
@ -165,7 +165,7 @@ export const Date = function({} = {}) {
|
||||
|
||||
if (state.get.current().header.date.day.show) {
|
||||
this.element.date.appendChild(this.element.day);
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.date.show && state.get.current().header.date.month.show) {
|
||||
|
||||
@ -175,11 +175,11 @@ export const Date = function({} = {}) {
|
||||
|
||||
if (state.get.current().header.date.date.show) {
|
||||
this.element.date.appendChild(this.element.dateOfMonth);
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.month.show) {
|
||||
this.element.date.appendChild(this.element.month);
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -187,31 +187,31 @@ export const Date = function({} = {}) {
|
||||
|
||||
if (state.get.current().header.date.month.show) {
|
||||
this.element.date.appendChild(this.element.month);
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.date.show) {
|
||||
this.element.date.appendChild(this.element.dateOfMonth);
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if (state.get.current().header.date.date.show) {
|
||||
this.element.date.appendChild(this.element.dateOfMonth);
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.month.show) {
|
||||
this.element.date.appendChild(this.element.month);
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.year.show) {
|
||||
this.element.date.appendChild(this.element.year);
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.separator.show) {
|
||||
|
||||
@ -221,7 +221,7 @@ export const Date = function({} = {}) {
|
||||
separatorCharacter = trimString(state.get.current().header.date.separator.text);
|
||||
} else {
|
||||
separatorCharacter = '/';
|
||||
};
|
||||
}
|
||||
|
||||
let parts = this.element.date.querySelectorAll('span');
|
||||
|
||||
@ -241,12 +241,12 @@ export const Date = function({} = {}) {
|
||||
|
||||
this.element.date.insertBefore(separator, item);
|
||||
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -258,19 +258,19 @@ export const Date = function({} = {}) {
|
||||
|
||||
if (state.get.current().header.date.day.show) {
|
||||
this.element.day.innerHTML = this.string.day();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.date.show) {
|
||||
this.element.dateOfMonth.innerHTML = this.string.dateOfMonth();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.month.show) {
|
||||
this.element.month.innerHTML = this.string.month();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.year.show) {
|
||||
this.element.year.innerHTML = this.string.year();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
|
||||
import * as form from '../form';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
|
||||
import './index.css';
|
||||
|
||||
@ -38,7 +35,7 @@ export const DropFile = function({
|
||||
|
||||
if (enterAction) {
|
||||
enterAction();
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -51,7 +48,7 @@ export const DropFile = function({
|
||||
|
||||
if (leaveAction) {
|
||||
leaveAction();
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -75,7 +72,7 @@ export const DropFile = function({
|
||||
|
||||
if (dropAaction) {
|
||||
dropAaction();
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -90,7 +87,7 @@ export const DropFile = function({
|
||||
children: [
|
||||
this.element.drop
|
||||
]
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
this.assemble();
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
import { form } from '../form';
|
||||
import { icon } from '../icon';
|
||||
|
||||
import { Button } from '../button';
|
||||
import { KeyboardShortcut } from '../keyboardShortcut';
|
||||
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { node } from '../../utility/node';
|
||||
|
||||
import './index.css';
|
||||
@ -37,7 +34,7 @@ export const Dropdown = function({
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
@ -74,8 +71,8 @@ export const Dropdown = function({
|
||||
const body = document.querySelector('body');
|
||||
|
||||
if (body.contains(this.element.menu)) {
|
||||
body.removeChild(this.element.menu)
|
||||
};
|
||||
body.removeChild(this.element.menu);
|
||||
}
|
||||
|
||||
this.bind.remove();
|
||||
|
||||
@ -126,15 +123,15 @@ export const Dropdown = function({
|
||||
|
||||
this.close();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.position = () => {
|
||||
|
||||
const vWidth = window.innerWidth || doc.documentElement.clientWidth;
|
||||
const vWidth = window.innerWidth;
|
||||
|
||||
const vHeight = window.innerHeight || doc.documentElement.clientHeight;
|
||||
const vHeight = window.innerHeight;
|
||||
|
||||
const dropdownRect = this.element.toggle.button.getBoundingClientRect();
|
||||
|
||||
@ -146,7 +143,7 @@ export const Dropdown = function({
|
||||
menuTop = dropdownRect.top - menuRect.height;
|
||||
} else {
|
||||
menuTop = dropdownRect.bottom;
|
||||
};
|
||||
}
|
||||
|
||||
let menuLeft = dropdownRect.left + (dropdownRect.width / 2) - (menuRect.width / 2);
|
||||
|
||||
@ -154,7 +151,7 @@ export const Dropdown = function({
|
||||
menuLeft = 0;
|
||||
} else if ((menuLeft + menuRect.width) > vWidth) {
|
||||
menuLeft = vWidth - menuRect.width;
|
||||
};
|
||||
}
|
||||
|
||||
this.element.menu.style.setProperty('--dropdown-menu-top', menuTop);
|
||||
|
||||
@ -166,7 +163,7 @@ export const Dropdown = function({
|
||||
|
||||
if (menuItem.length > 0) {
|
||||
|
||||
menuItem.forEach((item, i) => {
|
||||
menuItem.forEach((item) => {
|
||||
|
||||
const dropdownMenuButton = new Button({
|
||||
text: item.text,
|
||||
@ -178,7 +175,7 @@ export const Dropdown = function({
|
||||
|
||||
if (item.action()) {
|
||||
item.action();
|
||||
};
|
||||
}
|
||||
|
||||
this.close();
|
||||
|
||||
@ -190,7 +187,7 @@ export const Dropdown = function({
|
||||
|
||||
this.element.menu.appendChild(this.element.content);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { data } from '../data';
|
||||
import { state } from '../state';
|
||||
import { menu } from '../menu';
|
||||
import { bookmark } from '../bookmark';
|
||||
import { group } from '../group';
|
||||
@ -8,7 +7,6 @@ import { groupAndBookmark } from '../groupAndBookmark';
|
||||
import { StagedBookmark } from '../stagedBookmark';
|
||||
import { StagedGroup } from '../stagedGroup';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { randomNumber } from '../../utility/randomNumber';
|
||||
import { convertColor } from '../../utility/convertColor';
|
||||
|
||||
@ -30,7 +28,7 @@ easterEgg.toaster.render = () => {
|
||||
|
||||
group.item.mod.add(newGroupData);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
const newBookmarkData = new StagedBookmark();
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ export const Edge = function({
|
||||
}
|
||||
};
|
||||
|
||||
this.assemble = (edge) => {
|
||||
this.assemble = () => {
|
||||
|
||||
this.element.edge.primary = node('div|class:edge is-transparent');
|
||||
|
||||
@ -52,13 +52,13 @@ export const Edge = function({
|
||||
|
||||
this.element.edge.primary.classList.remove('is-edge-opening');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (event.propertyName === 'opacity' && getComputedStyle(this.element.edge.primary).opacity == 0) {
|
||||
|
||||
if (this.element.edge.primary.parentElement.contains(this.element.edge.primary)) {
|
||||
this.element.edge.primary.parentElement.removeChild(this.element.edge.primary);
|
||||
};
|
||||
}
|
||||
|
||||
this.element.edge.primary.removeAttribute('style');
|
||||
|
||||
@ -66,7 +66,7 @@ export const Edge = function({
|
||||
|
||||
this.bind.remove();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -74,11 +74,11 @@ export const Edge = function({
|
||||
|
||||
if (secondary.length > 0) {
|
||||
|
||||
secondary.forEach((item, i) => {
|
||||
secondary.forEach(() => {
|
||||
this.element.edge.secondary.push(node('div|class:edge-secondary is-transparent'));
|
||||
});
|
||||
|
||||
this.element.edge.secondary.forEach((item, i) => {
|
||||
this.element.edge.secondary.forEach((item) => {
|
||||
|
||||
item.addEventListener('transitionend', (event) => {
|
||||
|
||||
@ -86,25 +86,25 @@ export const Edge = function({
|
||||
|
||||
item.classList.remove('is-edge-opening');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (event.propertyName === 'opacity' && getComputedStyle(item).opacity == 0) {
|
||||
|
||||
if (item.parentElement.contains(item)) {
|
||||
item.parentElement.removeChild(item);
|
||||
};
|
||||
}
|
||||
|
||||
item.removeAttribute('style');
|
||||
|
||||
item.classList.remove('is-edge-opening');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -116,7 +116,7 @@ export const Edge = function({
|
||||
|
||||
if (this.element.edge.secondary.length > 0) {
|
||||
|
||||
this.element.edge.secondary.forEach((item, i) => {
|
||||
this.element.edge.secondary.forEach((item) => {
|
||||
|
||||
item.classList.remove('is-opaque');
|
||||
|
||||
@ -124,14 +124,11 @@ export const Edge = function({
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.appear = (edge) => {
|
||||
|
||||
const html = document.querySelector('html');
|
||||
|
||||
const body = document.querySelector('body');
|
||||
|
||||
body.appendChild(edge);
|
||||
@ -168,11 +165,11 @@ export const Edge = function({
|
||||
|
||||
this.appear(this.element.edge.secondary[i]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.track();
|
||||
|
||||
@ -230,7 +227,7 @@ export const Edge = function({
|
||||
this.style(item, this.element.edge.secondary[i]);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -239,7 +236,7 @@ export const Edge = function({
|
||||
|
||||
if (newPrimary) {
|
||||
primary = newPrimary;
|
||||
};
|
||||
}
|
||||
|
||||
this.assemble();
|
||||
|
||||
@ -248,7 +245,7 @@ export const Edge = function({
|
||||
|
||||
if (newSecondary) {
|
||||
secondary = newSecondary;
|
||||
};
|
||||
}
|
||||
|
||||
this.assemble();
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -20,7 +20,7 @@ export const feedback = ({
|
||||
});
|
||||
|
||||
feedback.appendChild(feedbackText);
|
||||
};
|
||||
}
|
||||
|
||||
return feedback;
|
||||
|
||||
|
||||
@ -21,19 +21,19 @@ export const group = function({
|
||||
case 'vertical':
|
||||
group.classList.add('form-group-vertical');
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
if (reverse) {
|
||||
group.classList.add('form-group-reverse');
|
||||
};
|
||||
}
|
||||
|
||||
if (block) {
|
||||
group.classList.add('form-group-block');
|
||||
};
|
||||
}
|
||||
|
||||
if (border) {
|
||||
group.classList.add('form-group-border');
|
||||
};
|
||||
}
|
||||
|
||||
switch (justify) {
|
||||
|
||||
@ -49,7 +49,7 @@ export const group = function({
|
||||
group.classList.add('form-group-justify-space-between');
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return group;
|
||||
|
||||
|
||||
@ -11,15 +11,15 @@ export const groupText = ({
|
||||
|
||||
if (text) {
|
||||
textElement.textContent = text;
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
textElement.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return textElement;
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
|
||||
import './index.css';
|
||||
|
||||
@ -23,17 +22,17 @@ export const helper = function({
|
||||
|
||||
helper.appendChild(textNode);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
helper.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return helper;
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ export const inline = function({
|
||||
case 'vertical':
|
||||
inline.classList.add('form-inline-vertical');
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
switch (gap) {
|
||||
|
||||
@ -39,11 +39,11 @@ export const inline = function({
|
||||
inline.classList.add('form-inline-gap-large');
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (equalGap) {
|
||||
inline.classList.add('form-inline-gap-equal');
|
||||
};
|
||||
}
|
||||
|
||||
switch (justify) {
|
||||
|
||||
@ -59,19 +59,19 @@ export const inline = function({
|
||||
inline.classList.add('form-inline-justify-right');
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (reverse) {
|
||||
inline.classList.add('form-inline-reverse');
|
||||
};
|
||||
}
|
||||
|
||||
if (block) {
|
||||
inline.classList.add('form-inline-block');
|
||||
};
|
||||
}
|
||||
|
||||
if (wrap) {
|
||||
inline.classList.add('form-inline-wrap');
|
||||
};
|
||||
}
|
||||
|
||||
return inline;
|
||||
|
||||
|
||||
@ -14,31 +14,31 @@ export const checkbox = ({
|
||||
|
||||
if (id) {
|
||||
input.setAttribute('id', id);
|
||||
};
|
||||
}
|
||||
|
||||
if (value) {
|
||||
input.setAttribute('value', value);
|
||||
};
|
||||
}
|
||||
|
||||
if (checked) {
|
||||
input.setAttribute('checked', '');
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
input.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (func) {
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
input.addEventListener('change', () => {
|
||||
func();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return input;
|
||||
|
||||
|
||||
@ -13,23 +13,23 @@ export const color = function({
|
||||
|
||||
if (id) {
|
||||
input.setAttribute('id', id);
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
input.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (func) {
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
input.addEventListener('change', () => {
|
||||
func();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return input;
|
||||
|
||||
|
||||
@ -12,23 +12,23 @@ export const file = ({
|
||||
|
||||
if (id) {
|
||||
input.setAttribute('id', id);
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
input.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (func) {
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
input.addEventListener('change', () => {
|
||||
func();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return input;
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ export const inputButton = function({
|
||||
const inputButtonElement = node('div|class:form-input-button', children);
|
||||
|
||||
if (style.length > 0) {
|
||||
style.forEach((item, i) => {
|
||||
style.forEach((item) => {
|
||||
switch (item) {
|
||||
case 'link':
|
||||
inputButtonElement.classList.add('form-input-button-link');
|
||||
@ -30,17 +30,17 @@ export const inputButton = function({
|
||||
inputButtonElement.classList.add('input-color-dot');
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
if (inputHide) {
|
||||
inputButtonElement.classList.add('form-input-hide');
|
||||
};
|
||||
}
|
||||
|
||||
if (srOnly) {
|
||||
inputButtonElement.classList.add('form-input-button-sr-only');
|
||||
};
|
||||
}
|
||||
|
||||
return inputButtonElement;
|
||||
|
||||
|
||||
@ -15,35 +15,33 @@ export const number = ({
|
||||
|
||||
const input = node('input|type:number,min:' + min + ',max:' + max + ',step:' + step + ',tabindex:1');
|
||||
|
||||
let delayUpdate = null;
|
||||
|
||||
if (id) {
|
||||
input.setAttribute('id', id);
|
||||
};
|
||||
}
|
||||
|
||||
if (value || (typeof value === 'number' && value === 0)) {
|
||||
input.setAttribute('value', value);
|
||||
};
|
||||
}
|
||||
|
||||
if (placeholder) {
|
||||
input.setAttribute('placeholder', placeholder);
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
input.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (func) {
|
||||
|
||||
input.addEventListener('input', (event) => {
|
||||
input.addEventListener('input', () => {
|
||||
func();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return input;
|
||||
|
||||
|
||||
@ -15,33 +15,33 @@ export const radio = function({
|
||||
|
||||
if (id) {
|
||||
input.setAttribute('id', id);
|
||||
};
|
||||
}
|
||||
|
||||
if (radioGroup) {
|
||||
input.setAttribute('name', radioGroup);
|
||||
};
|
||||
}
|
||||
|
||||
if (value) {
|
||||
input.setAttribute('value', value);
|
||||
};
|
||||
}
|
||||
|
||||
if (checked) {
|
||||
input.setAttribute('checked', '');
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
input.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (func) {
|
||||
input.addEventListener('change', (event) => {
|
||||
input.addEventListener('change', () => {
|
||||
func();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
return input;
|
||||
|
||||
|
||||
@ -20,55 +20,55 @@ export const range = ({
|
||||
|
||||
if (id) {
|
||||
input.setAttribute('id', id);
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
input.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (func) {
|
||||
|
||||
input.addEventListener('input', (event) => {
|
||||
input.addEventListener('input', () => {
|
||||
func();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (focusFunc) {
|
||||
|
||||
input.addEventListener('focus', (event) => {
|
||||
input.addEventListener('focus', () => {
|
||||
focusFunc();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (blurFunc) {
|
||||
|
||||
input.addEventListener('blur', (event) => {
|
||||
input.addEventListener('blur', () => {
|
||||
blurFunc();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (mouseDownFunc) {
|
||||
|
||||
input.addEventListener('mousedown', (event) => {
|
||||
input.addEventListener('mousedown', () => {
|
||||
mouseDownFunc();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (mouseUpFunc) {
|
||||
|
||||
input.addEventListener('mouseup', (event) => {
|
||||
input.addEventListener('mouseup', () => {
|
||||
mouseUpFunc();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return input;
|
||||
|
||||
|
||||
@ -16,27 +16,27 @@ export const select = function({
|
||||
|
||||
if (id) {
|
||||
select.setAttribute('id', id);
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
select.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (func) {
|
||||
|
||||
select.addEventListener('change', (event) => {
|
||||
select.addEventListener('change', () => {
|
||||
func();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (option.length > 0) {
|
||||
|
||||
option.forEach((item, i) => {
|
||||
option.forEach((item) => {
|
||||
|
||||
select.appendChild(
|
||||
complexNode({
|
||||
@ -53,7 +53,7 @@ export const select = function({
|
||||
|
||||
select.selectedIndex = selected;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return select;
|
||||
|
||||
|
||||
@ -16,39 +16,39 @@ export const text = ({
|
||||
|
||||
if (id) {
|
||||
input.setAttribute('id', id);
|
||||
};
|
||||
}
|
||||
|
||||
if (value) {
|
||||
input.setAttribute('value', value);
|
||||
};
|
||||
}
|
||||
|
||||
if (typeof min === 'number') {
|
||||
input.setAttribute('minlength', min);
|
||||
};
|
||||
}
|
||||
|
||||
if (typeof max === 'number') {
|
||||
input.setAttribute('maxlength', max);
|
||||
};
|
||||
}
|
||||
|
||||
if (placeholder) {
|
||||
input.setAttribute('placeholder', placeholder);
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
input.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (func) {
|
||||
|
||||
input.addEventListener('input', (event) => {
|
||||
input.addEventListener('input', () => {
|
||||
func();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return input;
|
||||
|
||||
|
||||
@ -14,31 +14,31 @@ export const textarea = function({
|
||||
|
||||
if (id) {
|
||||
textarea.setAttribute('id', id);
|
||||
};
|
||||
}
|
||||
|
||||
if (value) {
|
||||
textarea.setAttribute('value', value);
|
||||
};
|
||||
}
|
||||
|
||||
if (placeholder) {
|
||||
textarea.setAttribute('placeholder', placeholder);
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
textarea.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (func) {
|
||||
|
||||
textarea.addEventListener('input', (event) => {
|
||||
textarea.addEventListener('input', () => {
|
||||
func();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return textarea;
|
||||
|
||||
|
||||
@ -18,11 +18,11 @@ export const label = ({
|
||||
label = node('label|for:' + forInput);
|
||||
} else {
|
||||
label = node('label');
|
||||
};
|
||||
}
|
||||
|
||||
if (noPadding) {
|
||||
label.classList.add('label-no-padding');
|
||||
};
|
||||
}
|
||||
|
||||
const labelBlock = node('span|class:label-block');
|
||||
|
||||
@ -31,17 +31,17 @@ export const label = ({
|
||||
labelBlock.classList.add('sr-only');
|
||||
} else {
|
||||
label.classList.add('sr-only');
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (text) {
|
||||
labelBlock.appendChild(node('span:' + text + '|class:label-block-item'));
|
||||
};
|
||||
}
|
||||
|
||||
if (description) {
|
||||
if (Array.isArray(description)) {
|
||||
|
||||
description.forEach((item, i) => {
|
||||
description.forEach((item) => {
|
||||
labelBlock.appendChild(node('span:' + item + '|class:label-block-item small muted'));
|
||||
});
|
||||
|
||||
@ -49,24 +49,24 @@ export const label = ({
|
||||
|
||||
labelBlock.appendChild(node('span:' + description + '|class:label-block-item small muted'));
|
||||
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (text || description) {
|
||||
label.appendChild(labelBlock);
|
||||
};
|
||||
}
|
||||
|
||||
if (icon) {
|
||||
label.prepend(node('span|class:label-icon'));
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
label.classList.add(item);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return label;
|
||||
|
||||
|
||||
@ -3,13 +3,12 @@ import { state } from '../state';
|
||||
import { node } from '../../utility/node';
|
||||
import { trimString } from '../../utility/trimString';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
|
||||
import moment from 'moment';
|
||||
|
||||
import './index.css';
|
||||
|
||||
export const Greeting = function({} = {}) {
|
||||
export const Greeting = function () {
|
||||
|
||||
this.now;
|
||||
|
||||
@ -22,7 +21,7 @@ export const Greeting = function({} = {}) {
|
||||
|
||||
if (state.get.current().header.greeting.show) {
|
||||
this.element.greeting.appendChild(this.element.text);
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -70,11 +69,11 @@ export const Greeting = function({} = {}) {
|
||||
|
||||
value = this.message[Math.floor(this.now.hours() / 6)];
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (isValidString(state.get.current().header.greeting.name)) {
|
||||
|
||||
@ -86,9 +85,9 @@ export const Greeting = function({} = {}) {
|
||||
|
||||
value = value + ', ' + trimString(state.get.current().header.greeting.name);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.text.innerHTML = value;
|
||||
|
||||
|
||||
@ -3,21 +3,16 @@ import { data } from '../data';
|
||||
import { layout } from '../layout';
|
||||
import { bookmark } from '../bookmark';
|
||||
import { header } from '../header';
|
||||
import { groupDefault } from '../groupDefault';
|
||||
import { groupAndBookmark } from '../groupAndBookmark';
|
||||
|
||||
import { GroupArea } from '../groupArea';
|
||||
import { GroupEmpty } from '../groupEmpty';
|
||||
import { StagedGroup } from '../stagedGroup';
|
||||
import { GroupForm } from '../groupForm';
|
||||
import { Modal } from '../modal';
|
||||
import { SearchEmpty } from '../searchEmpty';
|
||||
import { BookmarkEmpty } from '../bookmarkEmpty';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { clearChildNode } from '../../utility/clearChildNode';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { trimString } from '../../utility/trimString';
|
||||
import { applyCSSVar } from '../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../utility/applyCSSState';
|
||||
@ -69,13 +64,13 @@ group.item = {
|
||||
|
||||
bookmark.element.group.appendChild(groupArea.group());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
bookmark.element.group.appendChild(groupArea.group());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -115,7 +110,7 @@ group.item = {
|
||||
|
||||
addSearchEmpty();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
@ -129,7 +124,7 @@ group.item = {
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
@ -145,9 +140,9 @@ group.item = {
|
||||
|
||||
addBookmarkEmpty();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
clear: () => {
|
||||
@ -180,7 +175,7 @@ group.edit = {
|
||||
group.edit.close();
|
||||
} else {
|
||||
group.edit.open();
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
render: () => {
|
||||
@ -189,17 +184,17 @@ group.edit = {
|
||||
|
||||
if (group.area.current.length > 0) {
|
||||
|
||||
group.area.current.forEach((item, i) => {
|
||||
group.area.current.forEach((item) => {
|
||||
|
||||
if (state.get.current().group.edit) {
|
||||
item.control.enable();
|
||||
} else {
|
||||
item.control.disable();
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { data } from '../data';
|
||||
import { state } from '../state';
|
||||
import { bookmark } from '../bookmark';
|
||||
import { group } from '../group';
|
||||
@ -21,17 +20,17 @@ groupAndBookmark.render = () => {
|
||||
|
||||
group.sort.sortable.option('disabled', true);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (bookmark.sort.sortable.length > 0) {
|
||||
|
||||
bookmark.sort.sortable.forEach((item, i) => {
|
||||
bookmark.sort.sortable.forEach((item) => {
|
||||
|
||||
item.option('disabled', true);
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
@ -40,7 +39,7 @@ groupAndBookmark.render = () => {
|
||||
|
||||
bookmark.sort.bind();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { theme } from '../theme';
|
||||
import { group } from '../group';
|
||||
import { layout } from '../layout';
|
||||
import { bookmark } from '../bookmark';
|
||||
@ -12,9 +11,7 @@ import { GroupForm } from '../groupForm';
|
||||
import { StagedGroup } from '../stagedGroup';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { trimString } from '../../utility/trimString';
|
||||
import { clearChildNode } from '../../utility/clearChildNode';
|
||||
|
||||
export const GroupArea = function ({
|
||||
@ -57,7 +54,7 @@ export const GroupArea = function({
|
||||
|
||||
if (groupData.position.destination < 0) {
|
||||
groupData.position.destination = 0;
|
||||
};
|
||||
}
|
||||
|
||||
group.item.mod.move(groupData);
|
||||
|
||||
@ -88,7 +85,7 @@ export const GroupArea = function({
|
||||
|
||||
if (groupData.position.destination > bookmark.all.length - 1) {
|
||||
groupData.position.destination = bookmark.all.length - 1;
|
||||
};
|
||||
}
|
||||
|
||||
group.item.mod.move(groupData);
|
||||
|
||||
@ -188,7 +185,7 @@ export const GroupArea = function({
|
||||
|
||||
if (state.get.current().bookmark.newTab) {
|
||||
|
||||
groupData.group.items.forEach((item, i) => {
|
||||
groupData.group.items.forEach((item) => {
|
||||
chrome.tabs.create({ url: item.url });
|
||||
});
|
||||
|
||||
@ -196,15 +193,15 @@ export const GroupArea = function({
|
||||
|
||||
const first = groupData.group.items.shift();
|
||||
|
||||
groupData.group.items.forEach((item, i) => {
|
||||
groupData.group.items.forEach((item) => {
|
||||
chrome.tabs.create({ url: item.url });
|
||||
});
|
||||
|
||||
window.location.href = first.url;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
@ -230,12 +227,12 @@ export const GroupArea = function({
|
||||
groupData.group.collapse = false;
|
||||
} else {
|
||||
groupData.group.collapse = true;
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
video: () => {
|
||||
|
||||
bookmark.tile.current.forEach((item, i) => {
|
||||
bookmark.tile.current.forEach((item) => {
|
||||
|
||||
if (item.data.position.origin.group === groupData.position.origin) {
|
||||
if (item.video) {
|
||||
@ -243,9 +240,9 @@ export const GroupArea = function({
|
||||
item.video.pause();
|
||||
} else {
|
||||
item.video.play();
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -256,11 +253,11 @@ export const GroupArea = function({
|
||||
|
||||
if (groupData.group.name.show && isValidString(groupData.group.name.text)) {
|
||||
this.element.group.classList.add('is-group-header');
|
||||
};
|
||||
}
|
||||
|
||||
if (groupData.group.toolbar.collapse.show || (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0)) {
|
||||
this.element.group.classList.add('is-group-toolbar');
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -268,7 +265,7 @@ export const GroupArea = function({
|
||||
|
||||
for (var key in this.control.button) {
|
||||
this.control.button[key].disable();
|
||||
};
|
||||
}
|
||||
|
||||
this.control.searchState();
|
||||
|
||||
@ -278,7 +275,7 @@ export const GroupArea = function({
|
||||
|
||||
for (var key in this.control.button) {
|
||||
this.control.button[key].enable();
|
||||
};
|
||||
}
|
||||
|
||||
this.control.searchState();
|
||||
|
||||
@ -294,7 +291,7 @@ export const GroupArea = function({
|
||||
this.control.button.up.enable();
|
||||
this.control.button.down.enable();
|
||||
this.control.button.sort.enable();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -320,15 +317,15 @@ export const GroupArea = function({
|
||||
|
||||
if (groupData.group.name.show && isValidString(groupData.group.name.text)) {
|
||||
this.element.header.appendChild(this.element.name.name);
|
||||
};
|
||||
}
|
||||
|
||||
if (groupData.group.toolbar.collapse.show) {
|
||||
this.element.toolbar.group.appendChild(this.collapse.button.button);
|
||||
};
|
||||
}
|
||||
|
||||
if (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0) {
|
||||
this.element.toolbar.group.appendChild(this.openAll.button.button);
|
||||
};
|
||||
}
|
||||
|
||||
if (groupData.group.toolbar.collapse.show || (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0)) {
|
||||
|
||||
@ -336,7 +333,7 @@ export const GroupArea = function({
|
||||
|
||||
this.element.header.appendChild(this.element.toolbar.toolbar);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.group.appendChild(this.element.header);
|
||||
|
||||
@ -348,7 +345,7 @@ export const GroupArea = function({
|
||||
this.control.enable();
|
||||
} else {
|
||||
this.control.disable();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -386,7 +383,7 @@ export const GroupArea = function({
|
||||
|
||||
this.collapse.button.style.update(['line']);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (groupData.group.collapse) {
|
||||
|
||||
@ -396,7 +393,7 @@ export const GroupArea = function({
|
||||
|
||||
this.element.group.classList.remove('is-group-collapse');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { state } from '../state';
|
||||
import { bookmark } from '../bookmark';
|
||||
|
||||
import { Button } from '../button';
|
||||
|
||||
@ -1,33 +1,14 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { theme } from '../theme';
|
||||
import { bookmark } from '../bookmark';
|
||||
import { groupDefault } from '../groupDefault';
|
||||
|
||||
import * as form from '../form';
|
||||
|
||||
import { Button } from '../button';
|
||||
import { Suggest } from '../suggest';
|
||||
import { Collapse } from '../collapse';
|
||||
import { Tab } from '../tab';
|
||||
|
||||
import { Control_helperText } from '../control/helperText';
|
||||
import { Control_inputButton } from '../control/inputButton';
|
||||
import { Control_groupText } from '../control/groupText';
|
||||
import { Control_radio } from '../control/radio';
|
||||
import { Control_radioGrid } from '../control/radioGrid';
|
||||
import { Control_checkbox } from '../control/checkbox';
|
||||
import { Control_slider } from '../control/slider';
|
||||
import { Control_sliderSlim } from '../control/sliderSlim';
|
||||
import { Control_colorMixer } from '../control/colorMixer';
|
||||
import { Control_color } from '../control/color';
|
||||
import { Control_text } from '../control/text';
|
||||
import { Control_select } from '../control/select';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { trimString } from '../../utility/trimString';
|
||||
import { ordinalNumber } from '../../utility/ordinalNumber';
|
||||
import { randomString } from '../../utility/randomString';
|
||||
import { randomNumber } from '../../utility/randomNumber';
|
||||
@ -55,19 +36,19 @@ export const GroupForm = function({
|
||||
|
||||
if (groupData.type.new) {
|
||||
count++;
|
||||
};
|
||||
}
|
||||
|
||||
for (var i = 1; i <= count; i++) {
|
||||
|
||||
option.push(ordinalNumber(i));
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
option.push(ordinalNumber(1));
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return option;
|
||||
|
||||
@ -141,7 +122,7 @@ export const GroupForm = function({
|
||||
} else {
|
||||
this.control.group.name.text.disable();
|
||||
this.control.group.name.random.disable();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -247,7 +228,7 @@ export const GroupForm = function({
|
||||
|
||||
this.element.form.addEventListener('keydown', (event) => {
|
||||
|
||||
if (event.keyCode == 13) { event.preventDefault(); return false; };
|
||||
if (event.keyCode == 13) { event.preventDefault(); return false; }
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { state } from '../state';
|
||||
import { layout } from '../layout';
|
||||
import { toolbar } from '../toolbar';
|
||||
|
||||
@ -50,7 +50,7 @@ header.item.mod = {
|
||||
|
||||
const headerItems = ['greeting', 'transitional', 'clock', 'date', 'search', 'toolbar'];
|
||||
|
||||
headerItems.reverse().forEach((item, i) => {
|
||||
headerItems.reverse().forEach((item) => {
|
||||
|
||||
switch (item) {
|
||||
|
||||
@ -79,19 +79,19 @@ header.item.mod = {
|
||||
|
||||
position = state.get.current().header.order.indexOf('greeting') + 1;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
state.get.current().header.order.splice(position, 0, item);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if (state.get.current().header.order.includes(item)) {
|
||||
state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1);
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -120,19 +120,19 @@ header.item.mod = {
|
||||
|
||||
position = state.get.current().header.order.indexOf('greeting') + 1;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
state.get.current().header.order.splice(position, 0, item);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if (state.get.current().header.order.includes(item)) {
|
||||
state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1);
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -157,19 +157,19 @@ header.item.mod = {
|
||||
|
||||
position = state.get.current().header.order.indexOf('date');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
state.get.current().header.order.splice(position, 0, item);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if (state.get.current().header.order.includes(item)) {
|
||||
state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1);
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -181,15 +181,15 @@ header.item.mod = {
|
||||
|
||||
state.get.current().header.order.unshift(item);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if (state.get.current().header.order.includes(item)) {
|
||||
state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1);
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -213,19 +213,19 @@ header.item.mod = {
|
||||
|
||||
position = state.get.current().header.order.length;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
state.get.current().header.order.splice(position, 0, item);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if (state.get.current().header.order.includes(item)) {
|
||||
state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1);
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -237,7 +237,7 @@ header.item.mod = {
|
||||
|
||||
if (state.get.current().header.order.includes(item)) {
|
||||
state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1);
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -245,15 +245,15 @@ header.item.mod = {
|
||||
|
||||
if (!state.get.current().header.order.includes(item)) {
|
||||
state.get.current().header.order.push(item);
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -276,7 +276,7 @@ header.item.render = () => {
|
||||
|
||||
header.element.search = new Search();
|
||||
|
||||
order.forEach((item, i) => {
|
||||
order.forEach((item) => {
|
||||
|
||||
switch (item) {
|
||||
|
||||
@ -295,7 +295,7 @@ header.item.render = () => {
|
||||
|
||||
header.element.header.appendChild(headerItem.item());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -312,7 +312,7 @@ header.item.render = () => {
|
||||
|
||||
header.element.header.appendChild(headerItem.item());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -329,7 +329,7 @@ header.item.render = () => {
|
||||
|
||||
header.element.header.appendChild(headerItem.item());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -357,7 +357,7 @@ header.item.render = () => {
|
||||
|
||||
header.element.header.appendChild(headerItem.item());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -374,7 +374,7 @@ header.item.render = () => {
|
||||
|
||||
header.element.header.appendChild(headerItem.item());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -382,8 +382,7 @@ header.item.render = () => {
|
||||
|
||||
switch (state.get.current().toolbar.location) {
|
||||
|
||||
case 'header':
|
||||
|
||||
case 'header': {
|
||||
const headerItem = new HeaderItem({
|
||||
name: item,
|
||||
child: toolbar.current.toolbar()
|
||||
@ -394,18 +393,19 @@ header.item.render = () => {
|
||||
header.element.header.appendChild(headerItem.item());
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
layout.element.header.appendChild(header.element.area);
|
||||
|
||||
const sortable = Sortable.create(header.element.header, {
|
||||
Sortable.create(header.element.header, {
|
||||
handle: '.header-control-sort',
|
||||
ghostClass: 'header-sort-placeholder',
|
||||
animation: 500,
|
||||
@ -429,7 +429,7 @@ header.item.render = () => {
|
||||
html.classList.add('is-header-show');
|
||||
} else {
|
||||
html.classList.remove('is-header-show');
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -468,7 +468,7 @@ header.edit = {
|
||||
header.edit.close();
|
||||
} else {
|
||||
header.edit.open();
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
render: () => {
|
||||
@ -476,16 +476,16 @@ header.edit = {
|
||||
applyCSSState('header.edit');
|
||||
|
||||
if (header.item.current.length > 0) {
|
||||
header.item.current.forEach((item, i) => {
|
||||
header.item.current.forEach((item) => {
|
||||
|
||||
if (state.get.current().header.edit) {
|
||||
item.control.enable();
|
||||
} else {
|
||||
item.control.disable();
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { header } from '../header';
|
||||
|
||||
import { Button } from '../button';
|
||||
|
||||
@ -10,7 +8,6 @@ import './index.css';
|
||||
|
||||
export const HeaderItem = function ({
|
||||
name = false,
|
||||
index = false,
|
||||
child = false
|
||||
} = {}) {
|
||||
|
||||
@ -40,13 +37,13 @@ export const HeaderItem = function({
|
||||
this.control.disable = () => {
|
||||
for (var key in this.control.button) {
|
||||
this.control.button[key].disable();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.control.enable = () => {
|
||||
for (var key in this.control.button) {
|
||||
this.control.button[key].enable();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.assemble = () => {
|
||||
@ -62,7 +59,7 @@ export const HeaderItem = function({
|
||||
|
||||
this.element.content.appendChild(this.element.body);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.item.appendChild(this.element.content);
|
||||
|
||||
@ -76,7 +73,7 @@ export const HeaderItem = function({
|
||||
this.control.enable();
|
||||
} else {
|
||||
this.control.disable();
|
||||
};
|
||||
}
|
||||
|
||||
return this.element.item;
|
||||
|
||||
|
||||
@ -126,11 +126,11 @@ icon.render = (name) => {
|
||||
|
||||
if (icon.all[name].fill) {
|
||||
svg.setAttribute('clip-rule', icon.all[name].clip);
|
||||
};
|
||||
}
|
||||
|
||||
if (icon.all[name].fill) {
|
||||
svg.setAttribute('fill-rule', icon.all[name].fill);
|
||||
};
|
||||
}
|
||||
|
||||
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
|
||||
|
||||
@ -1,23 +1,9 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { bookmark } from '../bookmark';
|
||||
|
||||
import * as form from '../form';
|
||||
|
||||
import { Button } from '../button';
|
||||
|
||||
import { Control_helperText } from '../control/helperText';
|
||||
import { Control_inputButton } from '../control/inputButton';
|
||||
import { Control_groupText } from '../control/groupText';
|
||||
import { Control_radio } from '../control/radio';
|
||||
import { Control_radioGrid } from '../control/radioGrid';
|
||||
import { Control_checkbox } from '../control/checkbox';
|
||||
import { Control_slider } from '../control/slider';
|
||||
import { Control_sliderSlim } from '../control/sliderSlim';
|
||||
import { Control_colorMixer } from '../control/colorMixer';
|
||||
import { Control_color } from '../control/color';
|
||||
import { Control_text } from '../control/text';
|
||||
import { Control_select } from '../control/select';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
@ -41,7 +27,7 @@ export const ImportForm = function({
|
||||
|
||||
let count = 0;
|
||||
|
||||
dataToImport.bookmark.forEach((item, i) => { count = count + item.items.length });
|
||||
dataToImport.bookmark.forEach((item) => { count = count + item.items.length; });
|
||||
|
||||
return count;
|
||||
|
||||
@ -56,7 +42,7 @@ export const ImportForm = function({
|
||||
path: 'bookmark.include',
|
||||
id: 'bookmark-include',
|
||||
labelText: 'Bookmarks',
|
||||
description: [`This includes <strong>${this.count.bookmark()} ${this.count.bookmark() > 1 ? `Bookmarks` : `Bookmark`}</strong> in <strong>${dataToImport.bookmark.length} ${dataToImport.bookmark.length > 1 ? `Groups` : `Group`}.<strong>`, 'Bookmarks will keep any custom Colours, Accents and Borders when imported.'],
|
||||
description: [`This includes <strong>${this.count.bookmark()} ${this.count.bookmark() > 1 ? 'Bookmarks' : 'Bookmark'}</strong> in <strong>${dataToImport.bookmark.length} ${dataToImport.bookmark.length > 1 ? 'Groups' : 'Group'}.<strong>`, 'Bookmarks will keep any custom Colours, Accents and Borders when imported.'],
|
||||
action: () => {
|
||||
this.disable();
|
||||
}
|
||||
@ -98,7 +84,7 @@ export const ImportForm = function({
|
||||
this.control.import.bookmark.type.enable();
|
||||
} else {
|
||||
this.control.import.bookmark.type.disable();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,31 +1,5 @@
|
||||
import { reset } from './reset';
|
||||
import '../style/reset.css';
|
||||
|
||||
import { Button } from './button';
|
||||
import { Collapse } from './collapse';
|
||||
import { Dropdown } from './dropdown';
|
||||
import { Edge } from './edge';
|
||||
import { KeyboardShortcut } from './keyboardShortcut';
|
||||
import { Modal } from './modal';
|
||||
import { Shade } from './shade';
|
||||
import { Suggest } from './suggest';
|
||||
import { Tab } from './tab';
|
||||
import { ToolbarControl } from './toolbarControl';
|
||||
import { Link } from './link';
|
||||
|
||||
import { Control_checkbox } from './control/checkbox';
|
||||
import { Control_color } from './control/color';
|
||||
import { Control_colorMixer } from './control/colorMixer';
|
||||
import { Control_groupText } from './control/groupText';
|
||||
import { Control_helperText } from './control/helperText';
|
||||
import { Control_inputButton } from './control/inputButton';
|
||||
import { Control_radio } from './control/radio';
|
||||
import { Control_radioGrid } from './control/radioGrid';
|
||||
import { Control_slider } from './control/slider';
|
||||
import { Control_sliderSlim } from './control/sliderSlim';
|
||||
import { Control_text } from './control/text';
|
||||
import { Control_select } from './control/select';
|
||||
|
||||
import { appName } from './appName';
|
||||
import { base } from './base';
|
||||
import { state } from './state';
|
||||
import { data } from './data';
|
||||
@ -48,7 +22,6 @@ import { groupAndBookmark } from './groupAndBookmark';
|
||||
import * as form from './form';
|
||||
|
||||
export const component = {
|
||||
appName,
|
||||
base,
|
||||
state,
|
||||
data,
|
||||
|
||||
@ -22,7 +22,7 @@ keyboard.esc = new KeyboardShortcut({
|
||||
group.edit.close();
|
||||
header.edit.close();
|
||||
toolbar.current.update.edit();
|
||||
};
|
||||
}
|
||||
data.save();
|
||||
}
|
||||
});
|
||||
@ -35,7 +35,7 @@ keyboard.ctrAltD = new KeyboardShortcut({
|
||||
theme.style.toggle();
|
||||
if (themeSetting.control.style.update) {
|
||||
themeSetting.control.style.update();
|
||||
};
|
||||
}
|
||||
data.save();
|
||||
}
|
||||
});
|
||||
@ -47,7 +47,7 @@ keyboard.ctrAltA = new KeyboardShortcut({
|
||||
action: () => {
|
||||
if (!state.get.current().bookmark.add) {
|
||||
bookmark.add.render();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -71,7 +71,7 @@ keyboard.ctrAltG = new KeyboardShortcut({
|
||||
action: () => {
|
||||
if (!state.get.current().group.add) {
|
||||
group.add.render();
|
||||
};
|
||||
}
|
||||
data.save();
|
||||
}
|
||||
});
|
||||
@ -94,7 +94,7 @@ keyboard.ctrAltR = new KeyboardShortcut({
|
||||
toolbar.current.update.accent();
|
||||
if (themeSetting.control.accent.color) {
|
||||
themeSetting.control.accent.color.update();
|
||||
};
|
||||
}
|
||||
applyCSSVar([
|
||||
'theme.accent.rgb.r',
|
||||
'theme.accent.rgb.g',
|
||||
|
||||
@ -13,10 +13,10 @@ export const KeyboardShortcut = function({
|
||||
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.add = () => { window.addEventListener('keydown', this.action); };
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { bookmark } from '../bookmark';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { get } from '../../utility/get';
|
||||
import { set } from '../../utility/set';
|
||||
import { clearChildNode } from '../../utility/clearChildNode';
|
||||
import { applyCSSVar } from '../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../utility/applyCSSClass';
|
||||
@ -14,7 +10,7 @@ import { isValidString } from '../../utility/isValidString';
|
||||
|
||||
import './index.css';
|
||||
|
||||
const layout = {}
|
||||
const layout = {};
|
||||
|
||||
layout.element = {
|
||||
layout: node('div|class:layout'),
|
||||
@ -52,7 +48,7 @@ layout.area = {
|
||||
breakpoint = 'xl';
|
||||
} else if (entry.contentRect.width > size.xxl) {
|
||||
breakpoint = 'xxl';
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -88,9 +84,9 @@ layout.area = {
|
||||
|
||||
layout.element.layout.removeChild(layout.element.header);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().theme.layout.divider.size > 0) {
|
||||
|
||||
@ -102,9 +98,9 @@ layout.area = {
|
||||
|
||||
layout.element.layout.removeChild(layout.element.divider);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().bookmark.show) {
|
||||
|
||||
@ -116,9 +112,9 @@ layout.area = {
|
||||
|
||||
layout.element.layout.removeChild(layout.element.bookmark);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
clear: () => {
|
||||
@ -145,7 +141,7 @@ layout.breakpoint = {
|
||||
|
||||
const size = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
|
||||
|
||||
size.forEach((item, i) => {
|
||||
size.forEach((item) => {
|
||||
html.classList.remove('is-layout-breakpoint-' + item);
|
||||
});
|
||||
|
||||
@ -174,7 +170,7 @@ layout.breakpoint = {
|
||||
html.classList.add('is-layout-breakpoint-xxl');
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -191,7 +187,7 @@ layout.title = {
|
||||
|
||||
title.textContent = 'New Tab';
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
@ -209,7 +205,7 @@ layout.favicon = {
|
||||
|
||||
favicon.href = 'icon/favicon.svg';
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { icon } from '../icon';
|
||||
import { form } from '../form';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
@ -9,7 +8,6 @@ export const Link = function({
|
||||
href = '#',
|
||||
iconName = false,
|
||||
iconPosition = 'right',
|
||||
image = false,
|
||||
linkButton = false,
|
||||
style = [],
|
||||
title = false,
|
||||
@ -32,7 +30,7 @@ export const Link = function({
|
||||
this.element.link.classList.add('button');
|
||||
|
||||
if (style.length > 0) {
|
||||
style.forEach((item, i) => {
|
||||
style.forEach((item) => {
|
||||
|
||||
switch (item) {
|
||||
|
||||
@ -48,18 +46,18 @@ export const Link = function({
|
||||
this.element.link.classList.add('button-ring');
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
const linkText = node('span:' + text);
|
||||
|
||||
if (linkButton) {
|
||||
linkText.classList.add('button-text');
|
||||
};
|
||||
}
|
||||
|
||||
this.element.link.appendChild(linkText);
|
||||
|
||||
@ -75,33 +73,33 @@ export const Link = function({
|
||||
this.element.link.append(icon.render(iconName));
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (openNew) {
|
||||
this.element.link.setAttribute('target', '_blank');
|
||||
};
|
||||
}
|
||||
|
||||
if (title) {
|
||||
this.element.link.setAttribute('title', title);
|
||||
};
|
||||
}
|
||||
|
||||
if (classList.length > 0) {
|
||||
classList.forEach((item, i) => {
|
||||
classList.forEach((item) => {
|
||||
this.element.link.classList.add(item);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.bind = () => {
|
||||
|
||||
if (action) {
|
||||
this.element.link.addEventListener('click', (event) => {
|
||||
this.element.link.addEventListener('click', () => {
|
||||
action();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,17 +1,8 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { form } from '../form';
|
||||
import { bookmark } from '../bookmark';
|
||||
import { theme } from '../theme';
|
||||
import { appName } from '../appName';
|
||||
import { APP_NAME } from '../../constant';
|
||||
|
||||
import { Button } from '../button';
|
||||
import { MenuFrame } from '../menuFrame';
|
||||
import { MenuNav } from '../menuNav';
|
||||
import { Shade } from '../shade';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { clearChildNode } from '../../utility/clearChildNode';
|
||||
|
||||
const menu = {};
|
||||
|
||||
@ -26,7 +17,7 @@ menu.navData = [
|
||||
{ name: 'Data', active: false, overscroll: true, sub: ['Restore', 'Backup', 'Clear'] },
|
||||
{ name: 'Support', active: false, overscroll: false },
|
||||
{ name: 'Coffee', active: false, overscroll: false },
|
||||
{ name: appName, active: false, overscroll: false }
|
||||
{ name: APP_NAME, active: false, overscroll: false }
|
||||
];
|
||||
|
||||
menu.mod = {};
|
||||
@ -45,7 +36,7 @@ menu.open = (name) => {
|
||||
|
||||
menu.element.frame.menuNav.state.toggle(name);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
menu.element.frame.open();
|
||||
|
||||
@ -55,7 +46,7 @@ menu.close = () => {
|
||||
|
||||
if (menu.element.frame) {
|
||||
menu.element.frame.close();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -65,7 +56,7 @@ menu.toggle = () => {
|
||||
menu.close();
|
||||
} else {
|
||||
menu.open();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,54 +1,22 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { header } from '../../header';
|
||||
import { bookmark } from '../../bookmark';
|
||||
import { theme } from '../../theme';
|
||||
import { version } from '../../version';
|
||||
import { menu } from '../../menu';
|
||||
import { icon } from '../../icon';
|
||||
import { logo } from '../../logo';
|
||||
import { layout } from '../../layout';
|
||||
import { toolbar } from '../../toolbar';
|
||||
import { appName } from '../../appName';
|
||||
import { APP_NAME } from '../../../constant';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
import { Edge } from '../../edge';
|
||||
import { Alert } from '../../alert';
|
||||
import { Link } from '../../link';
|
||||
|
||||
import { Control_helperText } from '../../control/helperText';
|
||||
import { Control_inputButton } from '../../control/inputButton';
|
||||
import { Control_groupText } from '../../control/groupText';
|
||||
import { Control_radio } from '../../control/radio';
|
||||
import { Control_radioGrid } from '../../control/radioGrid';
|
||||
import { Control_checkbox } from '../../control/checkbox';
|
||||
import { Control_slider } from '../../control/slider';
|
||||
import { Control_sliderSlim } from '../../control/sliderSlim';
|
||||
import { Control_sliderDouble } from '../../control/sliderDouble';
|
||||
import { Control_colorMixer } from '../../control/colorMixer';
|
||||
import { Control_color } from '../../control/color';
|
||||
import { Control_text } from '../../control/text';
|
||||
import { Control_textReset } from '../../control/textReset';
|
||||
import { Control_textarea } from '../../control/textarea';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
|
||||
const appSetting = {};
|
||||
|
||||
appSetting[appName.toLowerCase()] = (parent) => {
|
||||
appSetting[APP_NAME.toLowerCase()] = (parent) => {
|
||||
|
||||
const githubLink = new Link({ text: 'GitHub.', href: 'https://github.com/zombieFox/' + appName, openNew: true });
|
||||
const githubLink = new Link({ text: 'GitHub.', href: 'https://github.com/zombieFox/' + APP_NAME, openNew: true });
|
||||
|
||||
const redditLink = new Link({ text: `Reddit ${appName} community.`, href: 'https://www.reddit.com/r/' + appName, openNew: true });
|
||||
const redditLink = new Link({ text: `Reddit ${APP_NAME} community.`, href: 'https://www.reddit.com/r/' + APP_NAME, openNew: true });
|
||||
|
||||
const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: 'https://github.com/zombieFox/' + appName + '/blob/master/license', openNew: true });
|
||||
const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: 'https://github.com/zombieFox/' + APP_NAME + '/blob/master/license', openNew: true });
|
||||
|
||||
const para1 = node('p');
|
||||
|
||||
@ -60,14 +28,14 @@ appSetting[appName.toLowerCase()] = (parent) => {
|
||||
|
||||
const para3 = node('p');
|
||||
|
||||
para3.innerHTML = `${appName} uses the ${licenseLink.link().outerHTML}`;
|
||||
para3.innerHTML = `${APP_NAME} uses the ${licenseLink.link().outerHTML}`;
|
||||
|
||||
parent.appendChild(
|
||||
node('div', [
|
||||
node('div|class:version', [
|
||||
logo.render(),
|
||||
node('div|class:version-details', [
|
||||
node('h1:' + appName + '|class:version-app-name'),
|
||||
node('h1:' + APP_NAME + '|class:version-app-name'),
|
||||
node('p:Version ' + version.number + '|class:version-number'),
|
||||
node('p:' + version.name + '|class:version-name small')
|
||||
])
|
||||
@ -81,4 +49,4 @@ appSetting[appName.toLowerCase()] = (parent) => {
|
||||
|
||||
};
|
||||
|
||||
export { appSetting }
|
||||
export { appSetting };
|
||||
|
||||
@ -1,14 +1,7 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { header } from '../../header';
|
||||
import { bookmark } from '../../bookmark';
|
||||
import { theme } from '../../theme';
|
||||
import { version } from '../../version';
|
||||
import { menu } from '../../menu';
|
||||
import { icon } from '../../icon';
|
||||
import { logo } from '../../logo';
|
||||
import { layout } from '../../layout';
|
||||
import { toolbar } from '../../toolbar';
|
||||
import { groupAndBookmark } from '../../groupAndBookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
@ -16,26 +9,13 @@ import * as form from '../../form';
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
import { Edge } from '../../edge';
|
||||
import { Alert } from '../../alert';
|
||||
import { Link } from '../../link';
|
||||
|
||||
import { Control_helperText } from '../../control/helperText';
|
||||
import { Control_inputButton } from '../../control/inputButton';
|
||||
import { Control_groupText } from '../../control/groupText';
|
||||
import { Control_radio } from '../../control/radio';
|
||||
import { Control_radioGrid } from '../../control/radioGrid';
|
||||
import { Control_checkbox } from '../../control/checkbox';
|
||||
import { Control_slider } from '../../control/slider';
|
||||
import { Control_sliderSlim } from '../../control/sliderSlim';
|
||||
import { Control_sliderDouble } from '../../control/sliderDouble';
|
||||
import { Control_colorMixer } from '../../control/colorMixer';
|
||||
import { Control_color } from '../../control/color';
|
||||
import { Control_text } from '../../control/text';
|
||||
import { Control_textReset } from '../../control/textReset';
|
||||
import { Control_textarea } from '../../control/textarea';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
@ -77,7 +57,7 @@ bookmarkSetting.disable = () => {
|
||||
bookmarkSetting.control.sort.letter.disable();
|
||||
bookmarkSetting.control.sort.icon.disable();
|
||||
bookmarkSetting.control.sort.name.disable();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -91,7 +71,7 @@ bookmarkSetting.general = (parent) => {
|
||||
|
||||
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
bookmarkSetting.control.general.show = new Control_checkbox({
|
||||
object: state.get.current(),
|
||||
@ -112,13 +92,13 @@ bookmarkSetting.general = (parent) => {
|
||||
|
||||
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
bookmarkSetting.control.general.collapse.update();
|
||||
|
||||
@ -187,13 +167,13 @@ bookmarkSetting.general = (parent) => {
|
||||
|
||||
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -211,14 +191,14 @@ bookmarkSetting.general = (parent) => {
|
||||
max: state.get.minMax().bookmark.size.max,
|
||||
action: () => {
|
||||
applyCSSVar('bookmark.size');
|
||||
if (state.get.current().bookmark.show && bookmark.tile.current.length > 0 && bookmarkSetting.edge.general.size) { bookmarkSetting.edge.general.size.track(); };
|
||||
if (state.get.current().bookmark.show && bookmark.tile.current.length > 0 && bookmarkSetting.edge.general.size) { bookmarkSetting.edge.general.size.track(); }
|
||||
data.save();
|
||||
},
|
||||
mouseDownAction: () => {
|
||||
if (state.get.current().bookmark.show && bookmark.tile.current.length > 0 && bookmarkSetting.edge.general.size) { bookmarkSetting.edge.general.size.show(); };
|
||||
if (state.get.current().bookmark.show && bookmark.tile.current.length > 0 && bookmarkSetting.edge.general.size) { bookmarkSetting.edge.general.size.show(); }
|
||||
},
|
||||
mouseUpAction: () => {
|
||||
if (state.get.current().bookmark.show && bookmark.tile.current.length > 0 && bookmarkSetting.edge.general.size) { bookmarkSetting.edge.general.size.hide(); };
|
||||
if (state.get.current().bookmark.show && bookmark.tile.current.length > 0 && bookmarkSetting.edge.general.size) { bookmarkSetting.edge.general.size.hide(); }
|
||||
}
|
||||
});
|
||||
|
||||
@ -278,7 +258,7 @@ bookmarkSetting.style = (parent) => {
|
||||
bookmark.direction.mod.horizontal();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
applyCSSClass('bookmark.style');
|
||||
|
||||
@ -290,13 +270,13 @@ bookmarkSetting.style = (parent) => {
|
||||
|
||||
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -331,13 +311,13 @@ bookmarkSetting.orientation = (parent) => {
|
||||
|
||||
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -374,13 +354,13 @@ bookmarkSetting.sort = (parent) => {
|
||||
|
||||
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -402,13 +382,13 @@ bookmarkSetting.sort = (parent) => {
|
||||
|
||||
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -430,13 +410,13 @@ bookmarkSetting.sort = (parent) => {
|
||||
|
||||
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -464,4 +444,4 @@ bookmarkSetting.sort = (parent) => {
|
||||
|
||||
};
|
||||
|
||||
export { bookmarkSetting }
|
||||
export { bookmarkSetting };
|
||||
|
||||
@ -1,44 +1,12 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { header } from '../../header';
|
||||
import { bookmark } from '../../bookmark';
|
||||
import { theme } from '../../theme';
|
||||
import { version } from '../../version';
|
||||
import { menu } from '../../menu';
|
||||
import { icon } from '../../icon';
|
||||
import { logo } from '../../logo';
|
||||
import { layout } from '../../layout';
|
||||
import { toolbar } from '../../toolbar';
|
||||
import { appName } from '../../appName';
|
||||
import { APP_NAME } from '../../../constant';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
import { Edge } from '../../edge';
|
||||
import { Alert } from '../../alert';
|
||||
import { Link } from '../../link';
|
||||
|
||||
import { Control_helperText } from '../../control/helperText';
|
||||
import { Control_inputButton } from '../../control/inputButton';
|
||||
import { Control_groupText } from '../../control/groupText';
|
||||
import { Control_radio } from '../../control/radio';
|
||||
import { Control_radioGrid } from '../../control/radioGrid';
|
||||
import { Control_checkbox } from '../../control/checkbox';
|
||||
import { Control_slider } from '../../control/slider';
|
||||
import { Control_sliderSlim } from '../../control/sliderSlim';
|
||||
import { Control_sliderDouble } from '../../control/sliderDouble';
|
||||
import { Control_colorMixer } from '../../control/colorMixer';
|
||||
import { Control_color } from '../../control/color';
|
||||
import { Control_text } from '../../control/text';
|
||||
import { Control_textReset } from '../../control/textReset';
|
||||
import { Control_textarea } from '../../control/textarea';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
|
||||
const coffeeSetting = {};
|
||||
|
||||
@ -48,7 +16,7 @@ coffeeSetting.coffee = (parent) => {
|
||||
node('div', [
|
||||
complexNode({
|
||||
tag: 'p',
|
||||
text: appName + ' is free, appreciation is welcome in the form of coffee!'
|
||||
text: APP_NAME + ' is free, appreciation is welcome in the form of coffee!'
|
||||
}),
|
||||
form.wrap({
|
||||
children: [(new Link({
|
||||
@ -67,4 +35,4 @@ coffeeSetting.coffee = (parent) => {
|
||||
|
||||
};
|
||||
|
||||
export { coffeeSetting }
|
||||
export { coffeeSetting };
|
||||
|
||||
@ -1,45 +1,18 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { header } from '../../header';
|
||||
import { bookmark } from '../../bookmark';
|
||||
import { theme } from '../../theme';
|
||||
import { version } from '../../version';
|
||||
import { menu } from '../../menu';
|
||||
import { icon } from '../../icon';
|
||||
import { logo } from '../../logo';
|
||||
import { layout } from '../../layout';
|
||||
import { toolbar } from '../../toolbar';
|
||||
import { appName } from '../../appName';
|
||||
import { APP_NAME } from '../../../constant';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
import { Edge } from '../../edge';
|
||||
import { Alert } from '../../alert';
|
||||
import { DropFile } from '../../dropFile';
|
||||
import { Link } from '../../link';
|
||||
|
||||
import { Control_helperText } from '../../control/helperText';
|
||||
import { Control_inputButton } from '../../control/inputButton';
|
||||
import { Control_groupText } from '../../control/groupText';
|
||||
import { Control_radio } from '../../control/radio';
|
||||
import { Control_radioGrid } from '../../control/radioGrid';
|
||||
import { Control_checkbox } from '../../control/checkbox';
|
||||
import { Control_slider } from '../../control/slider';
|
||||
import { Control_sliderSlim } from '../../control/sliderSlim';
|
||||
import { Control_sliderDouble } from '../../control/sliderDouble';
|
||||
import { Control_colorMixer } from '../../control/colorMixer';
|
||||
import { Control_color } from '../../control/color';
|
||||
import { Control_text } from '../../control/text';
|
||||
import { Control_textReset } from '../../control/textReset';
|
||||
import { Control_textarea } from '../../control/textarea';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
|
||||
const dataSetting = {};
|
||||
|
||||
@ -77,7 +50,7 @@ dataSetting.restore = (parent) => {
|
||||
});
|
||||
|
||||
dataSetting.control.restore.restoreHelper = new Control_helperText({
|
||||
text: ['Restore a previously exported ' + appName + ' backup.']
|
||||
text: ['Restore a previously exported ' + APP_NAME + ' backup.']
|
||||
});
|
||||
|
||||
dataSetting.control.restore.feedback = form.feedback();
|
||||
@ -85,7 +58,7 @@ dataSetting.restore = (parent) => {
|
||||
data.feedback.empty.render(dataSetting.control.restore.feedback);
|
||||
|
||||
dataSetting.control.restore.drop = new DropFile({
|
||||
heading: 'Or drop a ' + appName + ' backup file here.',
|
||||
heading: 'Or drop a ' + APP_NAME + ' backup file here.',
|
||||
dropAaction: () => {
|
||||
data.import.drop({
|
||||
fileList: dataSetting.control.restore.drop.files,
|
||||
@ -131,7 +104,7 @@ dataSetting.backup = (parent) => {
|
||||
});
|
||||
|
||||
dataSetting.control.backup.exportHelper = new Control_helperText({
|
||||
text: ['Download a backup of your ' + appName + ' Bookmarks and Settings.', 'This file can later be imported on this or another deivce.']
|
||||
text: ['Download a backup of your ' + APP_NAME + ' Bookmarks and Settings.', 'This file can later be imported on this or another deivce.']
|
||||
});
|
||||
|
||||
parent.appendChild(
|
||||
@ -184,7 +157,7 @@ dataSetting.clear = (parent) => {
|
||||
});
|
||||
|
||||
dataSetting.control.clear.helper = new Control_helperText({
|
||||
text: ['Clear all data to reset ' + appName + ' to the default state.', 'Alternatively, it is possible to wipe all settings but keep the current Bookmarks and Groups.']
|
||||
text: ['Clear all data to reset ' + APP_NAME + ' to the default state.', 'Alternatively, it is possible to wipe all settings but keep the current Bookmarks and Groups.']
|
||||
});
|
||||
|
||||
parent.appendChild(
|
||||
@ -209,4 +182,4 @@ dataSetting.clear = (parent) => {
|
||||
|
||||
};
|
||||
|
||||
export { dataSetting }
|
||||
export { dataSetting };
|
||||
|
||||
@ -1,48 +1,22 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { header } from '../../header';
|
||||
import { bookmark } from '../../bookmark';
|
||||
import { group } from '../../group';
|
||||
import { theme } from '../../theme';
|
||||
import { version } from '../../version';
|
||||
import { menu } from '../../menu';
|
||||
import { icon } from '../../icon';
|
||||
import { logo } from '../../logo';
|
||||
import { layout } from '../../layout';
|
||||
import { toolbar } from '../../toolbar';
|
||||
import { groupAndBookmark } from '../../groupAndBookmark';
|
||||
import { fontawesome } from '../../fontawesome';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
import { Edge } from '../../edge';
|
||||
import { Alert } from '../../alert';
|
||||
import { Link } from '../../link';
|
||||
import { StagedGroup } from '../../stagedGroup';
|
||||
import { StagedBookmark } from '../../stagedBookmark';
|
||||
|
||||
import { Control_helperText } from '../../control/helperText';
|
||||
import { Control_inputButton } from '../../control/inputButton';
|
||||
import { Control_groupText } from '../../control/groupText';
|
||||
import { Control_radio } from '../../control/radio';
|
||||
import { Control_radioGrid } from '../../control/radioGrid';
|
||||
import { Control_checkbox } from '../../control/checkbox';
|
||||
import { Control_slider } from '../../control/slider';
|
||||
import { Control_sliderSlim } from '../../control/sliderSlim';
|
||||
import { Control_sliderDouble } from '../../control/sliderDouble';
|
||||
import { Control_colorMixer } from '../../control/colorMixer';
|
||||
import { Control_color } from '../../control/color';
|
||||
import { Control_text } from '../../control/text';
|
||||
import { Control_textReset } from '../../control/textReset';
|
||||
import { Control_textarea } from '../../control/textarea';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
import { randomNumber } from '../../../utility/randomNumber';
|
||||
import { randomString } from '../../../utility/randomString';
|
||||
|
||||
@ -407,7 +381,7 @@ debugSetting.bookmark = (parent) => {
|
||||
newBookmarkData.link.display.visual.icon.prefix = 'fas';
|
||||
} else if (randomIcon.styles.includes('brands')) {
|
||||
newBookmarkData.link.display.visual.icon.prefix = 'fab';
|
||||
};
|
||||
}
|
||||
|
||||
newBookmarkData.link.display.name.text = randomString({ adjectivesCount: 1 });
|
||||
|
||||
@ -415,7 +389,7 @@ debugSetting.bookmark = (parent) => {
|
||||
|
||||
bookmark.item.mod.add(newBookmarkData);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
groupAndBookmark.render();
|
||||
|
||||
@ -464,8 +438,8 @@ debugSetting.icon = (parent) => {
|
||||
])
|
||||
]
|
||||
})
|
||||
)
|
||||
};
|
||||
);
|
||||
}
|
||||
|
||||
parent.appendChild(
|
||||
node('div', [
|
||||
|
||||
@ -1,45 +1,22 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { header } from '../../header';
|
||||
import { bookmark } from '../../bookmark';
|
||||
import { group } from '../../group';
|
||||
import { theme } from '../../theme';
|
||||
import { version } from '../../version';
|
||||
import { menu } from '../../menu';
|
||||
import { icon } from '../../icon';
|
||||
import { logo } from '../../logo';
|
||||
import { layout } from '../../layout';
|
||||
import { toolbar } from '../../toolbar';
|
||||
import { groupAndBookmark } from '../../groupAndBookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
import { Edge } from '../../edge';
|
||||
import { Alert } from '../../alert';
|
||||
import { Link } from '../../link';
|
||||
|
||||
import { Control_helperText } from '../../control/helperText';
|
||||
import { Control_inputButton } from '../../control/inputButton';
|
||||
import { Control_groupText } from '../../control/groupText';
|
||||
import { Control_radio } from '../../control/radio';
|
||||
import { Control_radioGrid } from '../../control/radioGrid';
|
||||
import { Control_checkbox } from '../../control/checkbox';
|
||||
import { Control_slider } from '../../control/slider';
|
||||
import { Control_sliderSlim } from '../../control/sliderSlim';
|
||||
import { Control_sliderDouble } from '../../control/sliderDouble';
|
||||
import { Control_colorMixer } from '../../control/colorMixer';
|
||||
import { Control_color } from '../../control/color';
|
||||
import { Control_text } from '../../control/text';
|
||||
import { Control_textReset } from '../../control/textReset';
|
||||
import { Control_textarea } from '../../control/textarea';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
|
||||
const groupSetting = {};
|
||||
|
||||
@ -78,7 +55,7 @@ groupSetting.disable = () => {
|
||||
groupSetting.control.toolbar.openAll.hide.disable();
|
||||
groupSetting.control.toolbar.openAll.show.disable();
|
||||
groupSetting.control.toolbar.openAll.helper.disable();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -131,7 +108,7 @@ groupSetting.name = (parent) => {
|
||||
|
||||
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
groupSetting.control.name.size = new Control_slider({
|
||||
object: state.get.current(),
|
||||
@ -144,14 +121,14 @@ groupSetting.name = (parent) => {
|
||||
max: state.get.minMax().group.name.size.max,
|
||||
action: () => {
|
||||
applyCSSVar('group.name.size');
|
||||
if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].name.show && groupSetting.edge.name.size) { groupSetting.edge.name.size.track(); };
|
||||
if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].name.show && groupSetting.edge.name.size) { groupSetting.edge.name.size.track(); }
|
||||
data.save();
|
||||
},
|
||||
mouseDownAction: () => {
|
||||
if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].name.show && groupSetting.edge.name.size) { groupSetting.edge.name.size.show(); };
|
||||
if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].name.show && groupSetting.edge.name.size) { groupSetting.edge.name.size.show(); }
|
||||
},
|
||||
mouseUpAction: () => {
|
||||
if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].name.show && groupSetting.edge.name.size) { groupSetting.edge.name.size.hide(); };
|
||||
if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].name.show && groupSetting.edge.name.size) { groupSetting.edge.name.size.hide(); }
|
||||
}
|
||||
});
|
||||
|
||||
@ -172,13 +149,13 @@ groupSetting.name = (parent) => {
|
||||
|
||||
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (groupSetting.edge.toolbar.size) {
|
||||
|
||||
@ -188,13 +165,13 @@ groupSetting.name = (parent) => {
|
||||
|
||||
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -218,13 +195,13 @@ groupSetting.name = (parent) => {
|
||||
|
||||
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (groupSetting.edge.toolbar.size) {
|
||||
|
||||
@ -234,13 +211,13 @@ groupSetting.name = (parent) => {
|
||||
|
||||
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -275,7 +252,7 @@ groupSetting.toolbar = (parent) => {
|
||||
|
||||
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
groupSetting.control.toolbar.size = new Control_slider({
|
||||
object: state.get.current(),
|
||||
@ -288,14 +265,14 @@ groupSetting.toolbar = (parent) => {
|
||||
max: state.get.minMax().group.toolbar.size.max,
|
||||
action: () => {
|
||||
applyCSSVar('group.toolbar.size');
|
||||
if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.track(); };
|
||||
if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.track(); }
|
||||
data.save();
|
||||
},
|
||||
mouseDownAction: () => {
|
||||
if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.show(); };
|
||||
if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.show(); }
|
||||
},
|
||||
mouseUpAction: () => {
|
||||
if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.hide(); };
|
||||
if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.hide(); }
|
||||
}
|
||||
});
|
||||
|
||||
@ -317,13 +294,13 @@ groupSetting.toolbar = (parent) => {
|
||||
|
||||
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (groupSetting.edge.toolbar.size) {
|
||||
|
||||
@ -333,13 +310,13 @@ groupSetting.toolbar = (parent) => {
|
||||
|
||||
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -362,13 +339,13 @@ groupSetting.toolbar = (parent) => {
|
||||
|
||||
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (groupSetting.edge.toolbar.size) {
|
||||
|
||||
@ -378,13 +355,13 @@ groupSetting.toolbar = (parent) => {
|
||||
|
||||
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -413,13 +390,13 @@ groupSetting.toolbar = (parent) => {
|
||||
|
||||
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (groupSetting.edge.toolbar.size) {
|
||||
|
||||
@ -429,13 +406,13 @@ groupSetting.toolbar = (parent) => {
|
||||
|
||||
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -458,13 +435,13 @@ groupSetting.toolbar = (parent) => {
|
||||
|
||||
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (groupSetting.edge.toolbar.size) {
|
||||
|
||||
@ -474,13 +451,13 @@ groupSetting.toolbar = (parent) => {
|
||||
|
||||
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -523,4 +500,4 @@ groupSetting.toolbar = (parent) => {
|
||||
|
||||
};
|
||||
|
||||
export { groupSetting }
|
||||
export { groupSetting };
|
||||
|
||||
@ -1,42 +1,25 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { header } from '../../header';
|
||||
import { bookmark } from '../../bookmark';
|
||||
import { theme } from '../../theme';
|
||||
import { version } from '../../version';
|
||||
import { menu } from '../../menu';
|
||||
import { icon } from '../../icon';
|
||||
import { logo } from '../../logo';
|
||||
import { layout } from '../../layout';
|
||||
import { toolbar } from '../../toolbar';
|
||||
import { searchEnginePreset } from '../../searchEnginePreset';
|
||||
import { appName } from '../../appName';
|
||||
import { APP_NAME } from '../../../constant';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
import { Edge } from '../../edge';
|
||||
import { Alert } from '../../alert';
|
||||
import { Link } from '../../link';
|
||||
|
||||
import { Control_helperText } from '../../control/helperText';
|
||||
import { Control_inputButton } from '../../control/inputButton';
|
||||
import { Control_groupText } from '../../control/groupText';
|
||||
import { Control_radio } from '../../control/radio';
|
||||
import { Control_radioGrid } from '../../control/radioGrid';
|
||||
import { Control_checkbox } from '../../control/checkbox';
|
||||
import { Control_slider } from '../../control/slider';
|
||||
import { Control_sliderSlim } from '../../control/sliderSlim';
|
||||
import { Control_sliderDouble } from '../../control/sliderDouble';
|
||||
import { Control_colorMixer } from '../../control/colorMixer';
|
||||
import { Control_color } from '../../control/color';
|
||||
import { Control_text } from '../../control/text';
|
||||
import { Control_textReset } from '../../control/textReset';
|
||||
import { Control_textarea } from '../../control/textarea';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
@ -64,7 +47,7 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.greeting.newLine.disable();
|
||||
headerSetting.control.greeting.type.disable();
|
||||
headerSetting.control.greeting.name.disable();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.greeting.show) {
|
||||
|
||||
@ -80,13 +63,13 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.greeting.custom.text.enable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
headerSetting.control.greeting.custom.text.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.clock.second.show ||
|
||||
state.get.current().header.clock.minute.show ||
|
||||
@ -100,25 +83,25 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.clock.second.display.enable();
|
||||
} else {
|
||||
headerSetting.control.clock.second.display.disable();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.clock.hour.show) {
|
||||
headerSetting.control.clock.hour.display.enable();
|
||||
} else {
|
||||
headerSetting.control.clock.hour.display.disable();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.clock.second.show) {
|
||||
headerSetting.control.clock.second.display.enable();
|
||||
} else {
|
||||
headerSetting.control.clock.second.display.disable();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.clock.hour24.show) {
|
||||
headerSetting.control.clock.meridiem.show.disable();
|
||||
} else {
|
||||
headerSetting.control.clock.meridiem.show.enable();
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
@ -127,7 +110,7 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.clock.size.disable();
|
||||
headerSetting.control.clock.newLine.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if ([state.get.current().header.clock.second.show, state.get.current().header.clock.minute.show, state.get.current().header.clock.hour.show].filter(Boolean).length > 1) {
|
||||
|
||||
@ -137,7 +120,7 @@ headerSetting.disable = () => {
|
||||
|
||||
headerSetting.control.clock.separator.show.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (
|
||||
[state.get.current().header.clock.second.show, state.get.current().header.clock.minute.show, state.get.current().header.clock.hour.show].filter(Boolean).length > 1 &&
|
||||
@ -150,7 +133,7 @@ headerSetting.disable = () => {
|
||||
|
||||
headerSetting.control.clock.separator.text.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (
|
||||
(state.get.current().header.clock.second.show && state.get.current().header.clock.minute.show) ||
|
||||
@ -164,7 +147,7 @@ headerSetting.disable = () => {
|
||||
|
||||
headerSetting.control.clock.separator.show.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (
|
||||
((state.get.current().header.clock.second.show && state.get.current().header.clock.minute.show) ||
|
||||
@ -179,7 +162,7 @@ headerSetting.disable = () => {
|
||||
|
||||
headerSetting.control.clock.separator.text.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.day.show ||
|
||||
state.get.current().header.date.date.show ||
|
||||
@ -194,7 +177,7 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.date.size.disable();
|
||||
headerSetting.control.date.newLine.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.date.show && state.get.current().header.date.month.show) {
|
||||
|
||||
@ -204,7 +187,7 @@ headerSetting.disable = () => {
|
||||
|
||||
headerSetting.control.date.format.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.day.show) {
|
||||
|
||||
@ -222,7 +205,7 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.date.day.weekStart.enable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
@ -230,7 +213,7 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.date.day.length.disable();
|
||||
headerSetting.control.date.day.weekStart.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.date.show) {
|
||||
|
||||
@ -242,7 +225,7 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.date.date.display.disable();
|
||||
headerSetting.control.date.date.ordinal.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.month.show) {
|
||||
|
||||
@ -258,7 +241,7 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.date.month.length.disable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
headerSetting.control.date.month.display.enable();
|
||||
|
||||
@ -268,7 +251,7 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.date.month.ordinal.disable();
|
||||
headerSetting.control.date.month.length.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.date.year.show) {
|
||||
|
||||
@ -278,7 +261,7 @@ headerSetting.disable = () => {
|
||||
|
||||
headerSetting.control.date.year.display.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if ([state.get.current().header.date.day.show, state.get.current().header.date.date.show, state.get.current().header.date.month.show, state.get.current().header.date.year.show].filter(Boolean).length > 1) {
|
||||
|
||||
@ -288,7 +271,7 @@ headerSetting.disable = () => {
|
||||
|
||||
headerSetting.control.date.separator.show.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (
|
||||
[state.get.current().header.date.day.show, state.get.current().header.date.date.show, state.get.current().header.date.month.show, state.get.current().header.date.year.show].filter(Boolean).length > 1 &&
|
||||
@ -301,7 +284,7 @@ headerSetting.disable = () => {
|
||||
|
||||
headerSetting.control.date.separator.text.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (
|
||||
state.get.current().header.clock.second.show ||
|
||||
@ -317,7 +300,7 @@ headerSetting.disable = () => {
|
||||
} else {
|
||||
headerSetting.control.transitional.show.disable();
|
||||
headerSetting.control.transitional.newLine.disable();
|
||||
};
|
||||
}
|
||||
|
||||
if ((
|
||||
state.get.current().header.clock.second.show ||
|
||||
@ -336,7 +319,7 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.transitional.type.disable();
|
||||
headerSetting.control.transitional.size.disable();
|
||||
headerSetting.control.transitional.newLine.disable();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.search.show) {
|
||||
headerSetting.control.search.width.by.enable();
|
||||
@ -348,7 +331,7 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.search.newTab.disable();
|
||||
headerSetting.control.search.size.disable();
|
||||
headerSetting.control.search.newLine.disable();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.search.show) {
|
||||
|
||||
@ -363,13 +346,13 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.search.width.size.enable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
headerSetting.control.search.width.size.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
switch (state.get.current().header.search.engine.selected) {
|
||||
|
||||
@ -389,7 +372,7 @@ headerSetting.disable = () => {
|
||||
headerSetting.control.search.engine.custom.queryNameHelper.disable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -406,11 +389,11 @@ headerSetting.update = () => {
|
||||
|
||||
for (let key in headerSetting.control) {
|
||||
|
||||
headerSetting.control[key].forEach((item, i) => {
|
||||
headerSetting.control[key].forEach((item) => {
|
||||
item.update();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -1625,9 +1608,9 @@ headerSetting.search = (parent) => {
|
||||
|
||||
searchEngineList.push({ id: `header-search-engine-selected-${key}`, labelText: searchEnginePreset[key].name, value: key });
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
searchEngineList.push({ id: 'header-search-engine-selected-custom', labelText: 'Custom', value: 'custom' })
|
||||
searchEngineList.push({ id: 'header-search-engine-selected-custom', labelText: 'Custom', value: 'custom' });
|
||||
|
||||
headerSetting.control.search.engine = {
|
||||
selected: new Control_radio({
|
||||
@ -1693,7 +1676,7 @@ headerSetting.search = (parent) => {
|
||||
}
|
||||
}),
|
||||
urlHelper: new Control_helperText({
|
||||
text: ['Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="', appName + ' will add the search term entered into the Search box at the end of the above URL.']
|
||||
text: ['Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="', APP_NAME + ' will add the search term entered into the Search box at the end of the above URL.']
|
||||
}),
|
||||
queryName: new Control_text({
|
||||
object: state.get.current(),
|
||||
@ -1867,4 +1850,4 @@ headerSetting.search = (parent) => {
|
||||
|
||||
};
|
||||
|
||||
export { headerSetting }
|
||||
export { headerSetting };
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { data } from '../data';
|
||||
import { debugSetting } from './debugSetting';
|
||||
import { appName } from '../appName';
|
||||
import { APP_NAME } from '../../constant';
|
||||
import { layoutSetting } from './layoutSetting';
|
||||
import { groupSetting } from './groupSetting';
|
||||
import { bookmarkSetting } from './bookmarkSetting';
|
||||
@ -13,7 +12,6 @@ import { coffeeSetting } from './coffeeSetting';
|
||||
import { appSetting } from './appSetting';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { clearChildNode } from '../../utility/clearChildNode';
|
||||
|
||||
import './index.css';
|
||||
|
||||
@ -37,7 +35,7 @@ export const MenuContent = function({
|
||||
|
||||
if (indent) {
|
||||
formElement.classList.add('menu-item-form-indent');
|
||||
};
|
||||
}
|
||||
|
||||
return formElement;
|
||||
}
|
||||
@ -47,7 +45,7 @@ export const MenuContent = function({
|
||||
|
||||
if (activeNavData.sub && activeNavData.sub.length > 0) {
|
||||
|
||||
activeNavData.sub.forEach((item, i) => {
|
||||
activeNavData.sub.forEach((item) => {
|
||||
|
||||
const menuContentItem = this.element.content(item);
|
||||
|
||||
@ -89,7 +87,7 @@ export const MenuContent = function({
|
||||
debugSetting[this.makeId(item)](formElement);
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
menuContentItem.appendChild(formElement);
|
||||
|
||||
@ -123,7 +121,7 @@ export const MenuContent = function({
|
||||
themeSetting.disable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
@ -153,7 +151,7 @@ export const MenuContent = function({
|
||||
|
||||
break;
|
||||
|
||||
case this.makeId(appName):
|
||||
case this.makeId(APP_NAME):
|
||||
|
||||
formElement = this.element.form();
|
||||
|
||||
@ -161,13 +159,13 @@ export const MenuContent = function({
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
menuContentItem.appendChild(formElement);
|
||||
|
||||
container.appendChild(menuContentItem);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -2,39 +2,21 @@ import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { header } from '../../header';
|
||||
import { bookmark } from '../../bookmark';
|
||||
import { theme } from '../../theme';
|
||||
import { version } from '../../version';
|
||||
import { menu } from '../../menu';
|
||||
import { icon } from '../../icon';
|
||||
import { logo } from '../../logo';
|
||||
import { layout } from '../../layout';
|
||||
import { toolbar } from '../../toolbar';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
import { Edge } from '../../edge';
|
||||
import { Alert } from '../../alert';
|
||||
import { Link } from '../../link';
|
||||
|
||||
import { Control_helperText } from '../../control/helperText';
|
||||
import { Control_inputButton } from '../../control/inputButton';
|
||||
import { Control_groupText } from '../../control/groupText';
|
||||
import { Control_radio } from '../../control/radio';
|
||||
import { Control_radioGrid } from '../../control/radioGrid';
|
||||
import { Control_checkbox } from '../../control/checkbox';
|
||||
import { Control_slider } from '../../control/slider';
|
||||
import { Control_sliderSlim } from '../../control/sliderSlim';
|
||||
import { Control_sliderDouble } from '../../control/sliderDouble';
|
||||
import { Control_colorMixer } from '../../control/colorMixer';
|
||||
import { Control_color } from '../../control/color';
|
||||
import { Control_text } from '../../control/text';
|
||||
import { Control_textReset } from '../../control/textReset';
|
||||
import { Control_textarea } from '../../control/textarea';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
@ -64,7 +46,7 @@ layoutSetting.disable = () => {
|
||||
layoutSetting.control.area.bookmark.justify.disable();
|
||||
layoutSetting.control.area.bookmark.justifyHelper1.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.order.length > 0) {
|
||||
|
||||
@ -78,7 +60,7 @@ layoutSetting.disable = () => {
|
||||
layoutSetting.control.area.header.justify.disable();
|
||||
layoutSetting.control.area.header.justifyHelper1.disable();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().bookmark.show) {
|
||||
|
||||
@ -98,9 +80,9 @@ layoutSetting.disable = () => {
|
||||
layoutSetting.control.area.bookmark.justifyHelper1.disable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -511,4 +493,4 @@ layoutSetting.page = (parent) => {
|
||||
|
||||
};
|
||||
|
||||
export { layoutSetting }
|
||||
export { layoutSetting };
|
||||
|
||||
@ -1,49 +1,16 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { header } from '../../header';
|
||||
import { bookmark } from '../../bookmark';
|
||||
import { theme } from '../../theme';
|
||||
import { version } from '../../version';
|
||||
import { menu } from '../../menu';
|
||||
import { icon } from '../../icon';
|
||||
import { logo } from '../../logo';
|
||||
import { layout } from '../../layout';
|
||||
import { toolbar } from '../../toolbar';
|
||||
import { appName } from '../../appName';
|
||||
import { APP_NAME } from '../../../constant';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
import { Edge } from '../../edge';
|
||||
import { Alert } from '../../alert';
|
||||
import { Link } from '../../link';
|
||||
|
||||
import { Control_helperText } from '../../control/helperText';
|
||||
import { Control_inputButton } from '../../control/inputButton';
|
||||
import { Control_groupText } from '../../control/groupText';
|
||||
import { Control_radio } from '../../control/radio';
|
||||
import { Control_radioGrid } from '../../control/radioGrid';
|
||||
import { Control_checkbox } from '../../control/checkbox';
|
||||
import { Control_slider } from '../../control/slider';
|
||||
import { Control_sliderSlim } from '../../control/sliderSlim';
|
||||
import { Control_sliderDouble } from '../../control/sliderDouble';
|
||||
import { Control_colorMixer } from '../../control/colorMixer';
|
||||
import { Control_color } from '../../control/color';
|
||||
import { Control_text } from '../../control/text';
|
||||
import { Control_textReset } from '../../control/textReset';
|
||||
import { Control_textarea } from '../../control/textarea';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
|
||||
const supportSetting = {};
|
||||
|
||||
supportSetting.link = {
|
||||
url: 'https://github.com/zombieFox/' + appName + '/wiki/',
|
||||
url: 'https://github.com/zombieFox/' + APP_NAME + '/wiki/',
|
||||
page: {
|
||||
applyToAll: 'Applying-bookmark-settings-to-all',
|
||||
browser: 'Browser-support',
|
||||
@ -55,7 +22,7 @@ supportSetting.link = {
|
||||
resetting: 'Resetting-when-opening-the-browser',
|
||||
privacy: 'Respecting-your-privacy',
|
||||
backgroundImageVideo: 'Setting-a-background-video-or-image',
|
||||
firefox: 'Setting-' + appName + '-as-your-Firefox-homepage'
|
||||
firefox: 'Setting-' + APP_NAME + '-as-your-Firefox-homepage'
|
||||
}
|
||||
};
|
||||
|
||||
@ -77,7 +44,7 @@ supportSetting.support = (parent) => {
|
||||
|
||||
list.appendChild(node('li', [supportLink.link()]));
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
wrap.appendChild(list);
|
||||
|
||||
@ -87,7 +54,7 @@ supportSetting.support = (parent) => {
|
||||
|
||||
const para = node('p');
|
||||
|
||||
para.innerHTML = `For more support or feedback, submit an ${(new Link({ text:'Issue', href: `https://github.com/zombieFox/${appName}/issues`, openNew: true })).link().outerHTML} or check the ${(new Link({ text:'Wiki', href: `https://github.com/zombieFox/${appName}/wiki`, openNew: true })).link().outerHTML}.`;
|
||||
para.innerHTML = `For more support or feedback, submit an ${(new Link({ text: 'Issue', href: `https://github.com/zombieFox/${APP_NAME}/issues`, openNew: true })).link().outerHTML} or check the ${(new Link({ text: 'Wiki', href: `https://github.com/zombieFox/${APP_NAME}/wiki`, openNew: true })).link().outerHTML}.`;
|
||||
|
||||
parent.appendChild(
|
||||
node('div', [
|
||||
@ -99,4 +66,4 @@ supportSetting.support = (parent) => {
|
||||
|
||||
};
|
||||
|
||||
export { supportSetting }
|
||||
export { supportSetting };
|
||||
|
||||
@ -4,10 +4,7 @@ import { header } from '../../header';
|
||||
import { bookmark } from '../../bookmark';
|
||||
import { group } from '../../group';
|
||||
import { theme } from '../../theme';
|
||||
import { version } from '../../version';
|
||||
import { menu } from '../../menu';
|
||||
import { icon } from '../../icon';
|
||||
import { logo } from '../../logo';
|
||||
import { layout } from '../../layout';
|
||||
import { toolbar } from '../../toolbar';
|
||||
import { themePreset } from '../../themePreset';
|
||||
@ -21,24 +18,18 @@ import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
import { Edge } from '../../edge';
|
||||
import { PresetThemeTile } from '../../presetThemeTile';
|
||||
import { AccentPresetButton } from '../../accentPresetButton';
|
||||
import { Alert } from '../../alert';
|
||||
import { Link } from '../../link';
|
||||
|
||||
import { Control_helperText } from '../../control/helperText';
|
||||
import { Control_inputButton } from '../../control/inputButton';
|
||||
import { Control_groupText } from '../../control/groupText';
|
||||
import { Control_radio } from '../../control/radio';
|
||||
import { Control_radioGrid } from '../../control/radioGrid';
|
||||
import { Control_checkbox } from '../../control/checkbox';
|
||||
import { Control_slider } from '../../control/slider';
|
||||
import { Control_sliderSlim } from '../../control/sliderSlim';
|
||||
import { Control_sliderDouble } from '../../control/sliderDouble';
|
||||
import { Control_colorMixer } from '../../control/colorMixer';
|
||||
import { Control_color } from '../../control/color';
|
||||
import { Control_text } from '../../control/text';
|
||||
import { Control_textReset } from '../../control/textReset';
|
||||
import { Control_textarea } from '../../control/textarea';
|
||||
|
||||
@ -47,7 +38,6 @@ import { complexNode } from '../../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
|
||||
const themeSetting = {};
|
||||
|
||||
@ -76,7 +66,7 @@ themeSetting.disable = () => {
|
||||
} else {
|
||||
themeSetting.control.accent.random.style.disable();
|
||||
themeSetting.control.accent.randomiseNow.disable();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().theme.accent.cycle.active) {
|
||||
themeSetting.control.accent.cycle.speed.enable();
|
||||
@ -86,7 +76,7 @@ themeSetting.disable = () => {
|
||||
themeSetting.control.accent.cycle.speed.disable();
|
||||
themeSetting.control.accent.cycle.step.disable();
|
||||
themeSetting.control.accent.cycle.stepHelper.disable();
|
||||
};
|
||||
}
|
||||
|
||||
switch (state.get.current().theme.header.by) {
|
||||
|
||||
@ -100,7 +90,7 @@ themeSetting.disable = () => {
|
||||
themeSetting.control.header.color.opacity.enable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
switch (state.get.current().theme.background.type) {
|
||||
|
||||
@ -230,7 +220,7 @@ themeSetting.disable = () => {
|
||||
themeSetting.control.background.video.vignette.range.enable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
switch (state.get.current().theme.layout.color.by) {
|
||||
|
||||
@ -248,7 +238,7 @@ themeSetting.disable = () => {
|
||||
themeSetting.control.layout.color.blurHelper.enable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
switch (state.get.current().theme.header.color.by) {
|
||||
|
||||
@ -262,7 +252,7 @@ themeSetting.disable = () => {
|
||||
themeSetting.control.header.color.opacity.enable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
switch (state.get.current().theme.bookmark.color.by) {
|
||||
|
||||
@ -276,7 +266,7 @@ themeSetting.disable = () => {
|
||||
themeSetting.control.bookmark.color.opacity.enable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -290,7 +280,7 @@ themeSetting.preset = (parent) => {
|
||||
|
||||
const themePresetElement = node('div|class:theme-preset');
|
||||
|
||||
themePreset.get().forEach((item, i) => {
|
||||
themePreset.get().forEach((item) => {
|
||||
|
||||
const presetTheme = new PresetThemeTile({
|
||||
presetThemeData: item
|
||||
@ -385,7 +375,7 @@ themeSetting.saved = (parent) => {
|
||||
])
|
||||
);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -433,14 +423,14 @@ themeSetting.colour = (parent) => {
|
||||
|
||||
if (count < 10) {
|
||||
count = '0' + count;
|
||||
};
|
||||
}
|
||||
|
||||
formGroup.appendChild(
|
||||
node('div|class:form-group-text form-group-text-borderless', [
|
||||
node('div|class:theme-color-box theme-color-shade-' + count + '')
|
||||
])
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
formSticky.appendChild(formGroup);
|
||||
|
||||
@ -554,7 +544,7 @@ themeSetting.accent = (parent) => {
|
||||
|
||||
const themeAccentPreset = node('div|class:theme-accent-preset');
|
||||
|
||||
allPreset.forEach((item, i) => {
|
||||
allPreset.forEach((item) => {
|
||||
|
||||
const presetButton = new AccentPresetButton({
|
||||
presetData: item
|
||||
@ -781,7 +771,7 @@ themeSetting.font = (parent) => {
|
||||
nameHelper: new Control_helperText({
|
||||
complexText: true,
|
||||
text: [
|
||||
`Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Clock, Date, Group names and Bookmark Letters.`,
|
||||
`Use a ${(new Link({ text: 'Google Font', href: 'https://fonts.google.com/', openNew: true })).link().outerHTML} to customise the Clock, Date, Group names and Bookmark Letters.`,
|
||||
'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"',
|
||||
'Clear the field to use the default font "Fjalla One".'
|
||||
]
|
||||
@ -869,7 +859,7 @@ themeSetting.font = (parent) => {
|
||||
nameHelper: new Control_helperText({
|
||||
complexText: true,
|
||||
text: [
|
||||
`Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Bookmark name, URL and form elements.`,
|
||||
`Use a ${(new Link({ text: 'Google Font', href: 'https://fonts.google.com/', openNew: true })).link().outerHTML} to customise the Bookmark name, URL and form elements.`,
|
||||
'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"',
|
||||
'Clear the field to use the default font "Open Sans".'
|
||||
]
|
||||
@ -1224,11 +1214,11 @@ themeSetting.opacity = (parent) => {
|
||||
|
||||
if (group.area.current.length > 0) {
|
||||
|
||||
group.area.current.forEach((item, i) => {
|
||||
group.area.current.forEach((item) => {
|
||||
item.update.style();
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -1266,8 +1256,8 @@ themeSetting.background = (parent) => {
|
||||
theme.background.element.video.play();
|
||||
} else {
|
||||
theme.background.element.video.pause();
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -2132,4 +2122,4 @@ themeSetting.bookmark = (parent) => {
|
||||
|
||||
};
|
||||
|
||||
export { themeSetting }
|
||||
export { themeSetting };
|
||||
|
||||
@ -1,42 +1,20 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { header } from '../../header';
|
||||
import { bookmark } from '../../bookmark';
|
||||
import { theme } from '../../theme';
|
||||
import { version } from '../../version';
|
||||
import { menu } from '../../menu';
|
||||
import { icon } from '../../icon';
|
||||
import { logo } from '../../logo';
|
||||
import { layout } from '../../layout';
|
||||
import { toolbar } from '../../toolbar';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
import { Edge } from '../../edge';
|
||||
import { Alert } from '../../alert';
|
||||
import { Link } from '../../link';
|
||||
|
||||
import { Control_helperText } from '../../control/helperText';
|
||||
import { Control_inputButton } from '../../control/inputButton';
|
||||
import { Control_groupText } from '../../control/groupText';
|
||||
import { Control_radio } from '../../control/radio';
|
||||
import { Control_radioGrid } from '../../control/radioGrid';
|
||||
import { Control_checkbox } from '../../control/checkbox';
|
||||
import { Control_slider } from '../../control/slider';
|
||||
import { Control_sliderSlim } from '../../control/sliderSlim';
|
||||
import { Control_sliderDouble } from '../../control/sliderDouble';
|
||||
import { Control_colorMixer } from '../../control/colorMixer';
|
||||
import { Control_color } from '../../control/color';
|
||||
import { Control_text } from '../../control/text';
|
||||
import { Control_textReset } from '../../control/textReset';
|
||||
import { Control_textarea } from '../../control/textarea';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
|
||||
const toolbarSetting = {};
|
||||
@ -65,7 +43,7 @@ toolbarSetting.disable = () => {
|
||||
toolbarSetting.control.location.newLine.enable();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -85,7 +63,7 @@ toolbarSetting.size = (parent) => {
|
||||
toolbarSetting.edge.size = new Edge({ primary: toolbar.current.element.toolbar });
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
toolbarSetting.control.size = new Control_slider({
|
||||
object: state.get.current(),
|
||||
@ -148,7 +126,7 @@ toolbarSetting.location = (parent) => {
|
||||
toolbarSetting.edge.size = new Edge({ primary: toolbar.current.element.toolbar });
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
}
|
||||
@ -271,4 +249,4 @@ toolbarSetting.controls = (parent) => {
|
||||
|
||||
};
|
||||
|
||||
export { toolbarSetting }
|
||||
export { toolbarSetting };
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { menu } from '../menu';
|
||||
import { pageLock } from '../pageLock';
|
||||
|
||||
import { Button } from '../button';
|
||||
import { Shade } from '../shade';
|
||||
import { MenuNav } from '../menuNav';
|
||||
import { MenuClose } from '../menuClose';
|
||||
@ -45,7 +43,7 @@ export const MenuFrame = function({
|
||||
html.classList.add('is-menu-open');
|
||||
} else {
|
||||
html.classList.remove('is-menu-open');
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -65,7 +63,7 @@ export const MenuFrame = function({
|
||||
|
||||
body.removeChild(this.element.menu);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -122,8 +120,8 @@ export const MenuFrame = function({
|
||||
const body = document.querySelector('body');
|
||||
|
||||
if (body.contains(this.element.menu)) {
|
||||
body.removeChild(this.element.menu)
|
||||
};
|
||||
body.removeChild(this.element.menu);
|
||||
}
|
||||
|
||||
}, 6000);
|
||||
|
||||
@ -137,7 +135,7 @@ export const MenuFrame = function({
|
||||
|
||||
if ('pushState' in history) {
|
||||
history.pushState('', document.title, location.origin + location.pathname + location.search);
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -201,7 +199,7 @@ export const MenuFrame = function({
|
||||
|
||||
if (!path.includes(this.element.menu)) {
|
||||
this.close();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -239,9 +237,9 @@ export const MenuFrame = function({
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
@ -262,7 +260,7 @@ export const MenuFrame = function({
|
||||
|
||||
clearChildNode(this.element.content);
|
||||
|
||||
navData.forEach((item, i) => {
|
||||
navData.forEach((item) => {
|
||||
|
||||
if (item.active) {
|
||||
|
||||
@ -270,7 +268,7 @@ export const MenuFrame = function({
|
||||
this.element.content.classList.add('menu-content-overscroll');
|
||||
} else {
|
||||
this.element.content.classList.remove('menu-content-overscroll');
|
||||
};
|
||||
}
|
||||
|
||||
const menuContent = new MenuContent({
|
||||
activeNavData: item,
|
||||
@ -279,7 +277,7 @@ export const MenuFrame = function({
|
||||
|
||||
menuContent.content();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { menu } from '../menu';
|
||||
|
||||
import { Button } from '../button';
|
||||
|
||||
@ -15,7 +14,7 @@ export const MenuNav = function({
|
||||
current: {},
|
||||
set: () => {
|
||||
|
||||
navData.forEach((item, i) => {
|
||||
navData.forEach((item) => {
|
||||
|
||||
this.state.current[this.makeId(item.name)] = item.active;
|
||||
|
||||
@ -26,17 +25,17 @@ export const MenuNav = function({
|
||||
|
||||
for (let key in this.state.current) {
|
||||
this.state.current[key] = false;
|
||||
};
|
||||
}
|
||||
|
||||
this.state.current[this.makeId(name)] = true;
|
||||
|
||||
navData.forEach((item, i) => {
|
||||
navData.forEach((item) => {
|
||||
|
||||
item.active = false;
|
||||
|
||||
if (item.name === name || item.name.toLowerCase() === name) {
|
||||
item.active = true;
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -54,12 +53,12 @@ export const MenuNav = function({
|
||||
|
||||
this.init = () => {
|
||||
|
||||
this.element.item.forEach((item, i) => {
|
||||
this.element.item.forEach((item) => {
|
||||
if (item.subLevel) {
|
||||
item.subLevel.classList.add('active');
|
||||
item.subLevel.setAttribute('style', '--menu-subnav-height: ' + item.subLevel.getBoundingClientRect().height + 'px;');
|
||||
item.subLevel.classList.remove('active');
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.update();
|
||||
@ -78,13 +77,13 @@ export const MenuNav = function({
|
||||
|
||||
if (item.sub) {
|
||||
this.element.item[i].subLevel.classList.add('active');
|
||||
};
|
||||
}
|
||||
|
||||
if (this.element.item[i].subLevelItem.length > 0) {
|
||||
this.element.item[i].subLevelItem.forEach((item, i) => {
|
||||
this.element.item[i].subLevelItem.forEach((item) => {
|
||||
item.tabIndex = 1;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
@ -94,15 +93,15 @@ export const MenuNav = function({
|
||||
|
||||
if (item.sub) {
|
||||
this.element.item[i].subLevel.classList.remove('active');
|
||||
};
|
||||
}
|
||||
|
||||
if (this.element.item[i].subLevelItem.length > 0) {
|
||||
this.element.item[i].subLevelItem.forEach((item, i) => {
|
||||
this.element.item[i].subLevelItem.forEach((item) => {
|
||||
item.tabIndex = -1;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -116,7 +115,7 @@ export const MenuNav = function({
|
||||
|
||||
this.assemble = () => {
|
||||
|
||||
navData.forEach((item, i) => {
|
||||
navData.forEach((item) => {
|
||||
|
||||
const navItem = {
|
||||
topLevel: false,
|
||||
@ -137,7 +136,7 @@ export const MenuNav = function({
|
||||
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
@ -148,7 +147,7 @@ export const MenuNav = function({
|
||||
|
||||
const subNav = node('div|class:menu-subnav');
|
||||
|
||||
item.sub.forEach((item, i) => {
|
||||
item.sub.forEach((item) => {
|
||||
|
||||
const subLevelLink = node('a:' + item + '|href:#menu-content-item-' + this.makeId(item) + ',class:menu-nav-sub button button-link button-small,tabindex:1');
|
||||
|
||||
@ -160,13 +159,13 @@ export const MenuNav = function({
|
||||
|
||||
navItem.subLevel = subNav;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.item.push(navItem);
|
||||
|
||||
});
|
||||
|
||||
this.element.item.forEach((item, i) => {
|
||||
this.element.item.forEach((item) => {
|
||||
|
||||
item.menuNavItem = node('div|class:menu-nav-item');
|
||||
|
||||
@ -174,7 +173,7 @@ export const MenuNav = function({
|
||||
|
||||
if (item.subLevel) {
|
||||
item.menuNavItem.appendChild(item.subLevel);
|
||||
};
|
||||
}
|
||||
|
||||
this.element.nav.appendChild(item.menuNavItem);
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { pageLock } from '../pageLock';
|
||||
|
||||
import { Button } from '../button';
|
||||
@ -56,7 +55,7 @@ export const Modal = function({
|
||||
|
||||
body.removeChild(this.element.modal);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -80,7 +79,7 @@ export const Modal = function({
|
||||
|
||||
if (openAction) {
|
||||
openAction();
|
||||
};
|
||||
}
|
||||
|
||||
pageLock.render();
|
||||
|
||||
@ -100,7 +99,7 @@ export const Modal = function({
|
||||
|
||||
if (closeAction) {
|
||||
closeAction();
|
||||
};
|
||||
}
|
||||
|
||||
clearTimeout(this.delayedForceRemove);
|
||||
|
||||
@ -109,8 +108,8 @@ export const Modal = function({
|
||||
const body = document.querySelector('body');
|
||||
|
||||
if (body.contains(this.element.modal)) {
|
||||
body.removeChild(this.element.modal)
|
||||
};
|
||||
body.removeChild(this.element.modal);
|
||||
}
|
||||
|
||||
}, 6000);
|
||||
|
||||
@ -169,7 +168,7 @@ export const Modal = function({
|
||||
|
||||
if (!path.includes(this.element.modal) && !path.includes(suggest)) {
|
||||
this.close();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -203,9 +202,9 @@ export const Modal = function({
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -232,9 +231,9 @@ export const Modal = function({
|
||||
this.element.modal.style.setProperty('--modal-width', 70);
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.successButton = new Button({
|
||||
@ -246,7 +245,7 @@ export const Modal = function({
|
||||
|
||||
if (successAction) {
|
||||
successAction();
|
||||
};
|
||||
}
|
||||
|
||||
this.close();
|
||||
|
||||
@ -262,7 +261,7 @@ export const Modal = function({
|
||||
|
||||
if (cancelAction) {
|
||||
cancelAction();
|
||||
};
|
||||
}
|
||||
|
||||
this.close();
|
||||
|
||||
@ -277,7 +276,7 @@ export const Modal = function({
|
||||
|
||||
if (headingString.length > maxHeadingLength) {
|
||||
headingString = trimString(headingString.substring(0, maxHeadingLength)) + '...';
|
||||
};
|
||||
}
|
||||
|
||||
this.element.heading.text.innerHTML = headingString;
|
||||
|
||||
@ -285,7 +284,7 @@ export const Modal = function({
|
||||
|
||||
this.element.content.content.appendChild(this.element.heading.heading);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (content) {
|
||||
if (typeof content == 'string') {
|
||||
@ -298,8 +297,8 @@ export const Modal = function({
|
||||
|
||||
this.element.content.content.appendChild(content);
|
||||
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
this.element.content.wrapper.appendChild(this.element.content.content);
|
||||
|
||||
@ -313,7 +312,7 @@ export const Modal = function({
|
||||
|
||||
if (maxHeight) {
|
||||
this.element.modal.classList.add('modal-max-height');
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ pageLock.render = () => {
|
||||
html.classList.add('is-scroll-disabled');
|
||||
} else {
|
||||
html.classList.remove('is-scroll-disabled');
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { theme } from '../theme';
|
||||
import { menu } from '../menu';
|
||||
import { toolbar } from '../toolbar';
|
||||
import { layout } from '../layout';
|
||||
import { header } from '../header';
|
||||
import { bookmark } from '../bookmark';
|
||||
import { group } from '../group';
|
||||
import { groupAndBookmark } from '../groupAndBookmark';
|
||||
import { themeSetting } from '../menuContent/themeSetting';
|
||||
|
||||
@ -15,7 +13,6 @@ import { Button } from '../button';
|
||||
import { node } from '../../utility/node';
|
||||
import { convertColor } from '../../utility/convertColor';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../utility/applyCSSState';
|
||||
@ -347,13 +344,13 @@ export const PresetThemeTile = function({
|
||||
darken();
|
||||
} else if (window.matchMedia('(prefers-color-scheme:light)').matches) {
|
||||
lighten();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (hsl.l < 0) { hsl.l = 0; };
|
||||
if (hsl.l < 0) { hsl.l = 0; }
|
||||
|
||||
if (hsl.l > 100) { hsl.l = 100; };
|
||||
if (hsl.l > 100) { hsl.l = 100; }
|
||||
|
||||
let rgb = convertColor.hsl.rgb(hsl);
|
||||
|
||||
@ -368,7 +365,7 @@ export const PresetThemeTile = function({
|
||||
|
||||
this.element.preview.appendChild(node('span|class:theme-preset-background-0' + i));
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.tile.style.setProperty('--theme-preset-text', '0, 0%, calc(((((var(--theme-preset-background-01-rgb-r) * var(--theme-t-r)) + (var(--theme-preset-background-01-rgb-g) * var(--theme-t-g)) + (var(--theme-preset-background-01-rgb-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%)');
|
||||
|
||||
@ -380,7 +377,7 @@ export const PresetThemeTile = function({
|
||||
|
||||
this.element.preview.appendChild(node('span|class:theme-preset-accent'));
|
||||
|
||||
return node('div|class:theme-preset-tile')
|
||||
return node('div|class:theme-preset-tile');
|
||||
|
||||
};
|
||||
|
||||
@ -396,7 +393,7 @@ export const PresetThemeTile = function({
|
||||
|
||||
this.element.preset.button.appendChild(this.element.name);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.front.appendChild(this.element.preset.button);
|
||||
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
import './index.css';
|
||||
|
||||
export const reset = {};
|
||||
@ -1,11 +1,9 @@
|
||||
import { data } from '../data';
|
||||
import { state } from '../state';
|
||||
import { group } from '../group';
|
||||
import { bookmark } from '../bookmark';
|
||||
import { groupAndBookmark } from '../groupAndBookmark';
|
||||
import { searchEnginePreset } from '../searchEnginePreset';
|
||||
|
||||
import * as form from '../form';
|
||||
|
||||
import { Button } from '../button';
|
||||
import { Control_text } from '../control/text';
|
||||
@ -13,7 +11,6 @@ import { Control_text } from '../control/text';
|
||||
import { node } from '../../utility/node';
|
||||
import { trimString } from '../../utility/trimString';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
|
||||
import './index.css';
|
||||
|
||||
@ -62,7 +59,7 @@ export const Search = function() {
|
||||
|
||||
state.get.current().search = false;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
data.save();
|
||||
|
||||
@ -76,7 +73,7 @@ export const Search = function() {
|
||||
placeholder = 'Find bookmarks or search';
|
||||
} else {
|
||||
placeholder = 'Search';
|
||||
};
|
||||
}
|
||||
|
||||
switch (state.get.current().header.search.engine.selected) {
|
||||
|
||||
@ -86,7 +83,7 @@ export const Search = function() {
|
||||
|
||||
placeholder = placeholder + ' ' + state.get.current().header.search.engine.custom.name;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -96,7 +93,7 @@ export const Search = function() {
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.input.text.placeholder = placeholder;
|
||||
|
||||
@ -122,7 +119,7 @@ export const Search = function() {
|
||||
|
||||
this.element.form.setAttribute('action', '');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -134,11 +131,11 @@ export const Search = function() {
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().header.search.newTab) {
|
||||
this.element.form.setAttribute("target", "_blank");
|
||||
};
|
||||
this.element.form.setAttribute('target', '_blank');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -156,9 +153,9 @@ export const Search = function() {
|
||||
|
||||
const searchString = trimString(this.element.input.text.value).toLowerCase();
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
bookmark.all.forEach((item) => {
|
||||
|
||||
item.items.forEach((item, i) => {
|
||||
item.items.forEach((item) => {
|
||||
|
||||
item.searchMatch = false;
|
||||
|
||||
@ -168,7 +165,7 @@ export const Search = function() {
|
||||
|
||||
if (matchUrl || matchName) {
|
||||
item.searchMatch = true;
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -180,7 +177,7 @@ export const Search = function() {
|
||||
|
||||
this.clearSearch();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
groupAndBookmark.render();
|
||||
|
||||
@ -188,9 +185,9 @@ export const Search = function() {
|
||||
|
||||
this.clearSearch = () => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
bookmark.all.forEach((item) => {
|
||||
|
||||
item.items.forEach((item, i) => {
|
||||
item.items.forEach((item) => {
|
||||
|
||||
delete item.searchMatch;
|
||||
|
||||
@ -231,13 +228,13 @@ export const Search = function() {
|
||||
count.group.push({
|
||||
bookmarkCount: item.items.length,
|
||||
searchMatch: 0
|
||||
})
|
||||
});
|
||||
|
||||
const groupIndex = i;
|
||||
|
||||
item.items.forEach((item, i) => {
|
||||
item.items.forEach((item) => {
|
||||
|
||||
if (item.searchMatch) { count.group[groupIndex].searchMatch++ };
|
||||
if (item.searchMatch) { count.group[groupIndex].searchMatch++; }
|
||||
|
||||
});
|
||||
|
||||
@ -263,7 +260,7 @@ export const Search = function() {
|
||||
|
||||
html.classList.remove('is-header-search-opacity-low');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ export const SearchEmpty = function() {
|
||||
|
||||
this.element.helper.textContent = 'Press "Enter" to Search ' + state.get.current().header.search.engine.custom.name;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -44,7 +44,7 @@ export const SearchEmpty = function() {
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.empty.appendChild(this.element.description);
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ export const Shade = function() {
|
||||
this.element.shade.addEventListener('transitionend', (event) => {
|
||||
if (event.propertyName === 'opacity' && getComputedStyle(this.element.shade).opacity == 0) {
|
||||
body.removeChild(this.element.shade);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
body.appendChild(this.element.shade);
|
||||
@ -41,8 +41,8 @@ export const Shade = function() {
|
||||
const body = document.querySelector('body');
|
||||
|
||||
if (body.contains(this.element.shade)) {
|
||||
body.removeChild(this.element.shade)
|
||||
};
|
||||
body.removeChild(this.element.shade);
|
||||
}
|
||||
|
||||
}, 6000);
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ export const StagedGroup = function(groupData) {
|
||||
|
||||
if (name && isValidString(name)) {
|
||||
this.group.name.text = trimString(name);
|
||||
};
|
||||
}
|
||||
|
||||
this.position.destination = bookmark.all.length;
|
||||
|
||||
|
||||
@ -156,8 +156,7 @@ state.minMax = {
|
||||
general: { min: 0, max: 100 },
|
||||
toolbar: { min: 0, max: 100 },
|
||||
bookmark: { min: 0, max: 100 },
|
||||
search: { min: 0, max: 100 },
|
||||
toolbar: { min: 0, max: 100 }
|
||||
search: { min: 0, max: 100 }
|
||||
},
|
||||
layout: {
|
||||
color: {
|
||||
@ -259,11 +258,11 @@ state.option = {
|
||||
};
|
||||
|
||||
state.get = {
|
||||
current: () => { return state.current },
|
||||
default: () => { return JSON.parse(JSON.stringify(state.default)) },
|
||||
minMax: () => { return JSON.parse(JSON.stringify(state.minMax)) },
|
||||
step: () => { return JSON.parse(JSON.stringify(state.step)) },
|
||||
option: () => { return JSON.parse(JSON.stringify(state.option)) }
|
||||
current: () => { return state.current; },
|
||||
default: () => { return JSON.parse(JSON.stringify(state.default)); },
|
||||
minMax: () => { return JSON.parse(JSON.stringify(state.minMax)); },
|
||||
step: () => { return JSON.parse(JSON.stringify(state.step)); },
|
||||
option: () => { return JSON.parse(JSON.stringify(state.option)); }
|
||||
};
|
||||
|
||||
state.set = {
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { state } from '../state';
|
||||
import { fontawesome } from '../fontawesome';
|
||||
|
||||
import { Button } from '../button';
|
||||
@ -66,13 +65,13 @@ export const Suggest = function({
|
||||
|
||||
this.state.open = true;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
this.close();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -138,7 +137,7 @@ export const Suggest = function({
|
||||
|
||||
box.left = widthElementRect.left;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
this.element.suggest.style.setProperty('--suggest-top', box.top);
|
||||
|
||||
@ -164,7 +163,7 @@ export const Suggest = function({
|
||||
|
||||
this.state.open = false;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -184,15 +183,15 @@ export const Suggest = function({
|
||||
|
||||
if (action) {
|
||||
action(suggestData);
|
||||
};
|
||||
}
|
||||
|
||||
if (postFocus) {
|
||||
postFocus.focus();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
results.forEach((item, i) => {
|
||||
results.forEach((item) => {
|
||||
|
||||
let li = node('li|class:suggest-list-item');
|
||||
|
||||
@ -211,7 +210,7 @@ export const Suggest = function({
|
||||
icon.classList.add('fas');
|
||||
} else if (item.styles.includes('brands')) {
|
||||
icon.classList.add('fab');
|
||||
};
|
||||
}
|
||||
|
||||
let text = node('span:' + item.label + '|class:suggest-icon-text');
|
||||
|
||||
@ -243,18 +242,18 @@ export const Suggest = function({
|
||||
|
||||
if (item.name.toLowerCase().includes(string) || item.label.toLowerCase().includes(string)) {
|
||||
match = true;
|
||||
};
|
||||
}
|
||||
|
||||
item.search.forEach((item, i) => {
|
||||
item.search.forEach((item) => {
|
||||
if (item.toLowerCase().includes(string)) {
|
||||
match = true;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
item.styles.forEach((item, i) => {
|
||||
item.styles.forEach((item) => {
|
||||
if (item.toLowerCase().includes(string)) {
|
||||
match = true;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return match;
|
||||
@ -262,7 +261,7 @@ export const Suggest = function({
|
||||
|
||||
} else {
|
||||
return fontawesome;
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -285,9 +284,9 @@ export const Suggest = function({
|
||||
|
||||
if (allSuggestItems[i] == document.activeElement) {
|
||||
focusIndex = i;
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -303,9 +302,9 @@ export const Suggest = function({
|
||||
elementToFocus = allSuggestItems[focusIndex - columnCount];
|
||||
} else {
|
||||
elementToFocus = input;
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// down
|
||||
if (event.keyCode == 40) {
|
||||
@ -317,9 +316,9 @@ export const Suggest = function({
|
||||
elementToFocus = allSuggestItems[focusIndex + columnCount];
|
||||
} else {
|
||||
elementToFocus = input;
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// right
|
||||
if (event.keyCode == 39 && document.activeElement != input) {
|
||||
@ -331,9 +330,9 @@ export const Suggest = function({
|
||||
elementToFocus = allSuggestItems[focusIndex + 1];
|
||||
} else {
|
||||
elementToFocus = input;
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// left
|
||||
if (event.keyCode == 37 && document.activeElement != input) {
|
||||
@ -345,29 +344,29 @@ export const Suggest = function({
|
||||
elementToFocus = allSuggestItems[focusIndex - 1];
|
||||
} else {
|
||||
elementToFocus = input;
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tab
|
||||
if (!event.shiftKey && event.keyCode == 9 && document.activeElement == input) {
|
||||
event.preventDefault();
|
||||
elementToFocus = allSuggestItems[0];
|
||||
};
|
||||
}
|
||||
if (!event.shiftKey && event.keyCode == 9 && document.activeElement == allSuggestItems[allSuggestItems.length - 1]) {
|
||||
event.preventDefault();
|
||||
elementToFocus = postFocus;
|
||||
this.close();
|
||||
};
|
||||
}
|
||||
|
||||
// shift tab
|
||||
if (event.shiftKey && event.keyCode == 9 && document.activeElement == allSuggestItems[0]) {
|
||||
event.preventDefault();
|
||||
elementToFocus = input;
|
||||
};
|
||||
}
|
||||
if (event.shiftKey && event.keyCode == 9 && document.activeElement == input) {
|
||||
this.close();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -377,7 +376,7 @@ export const Suggest = function({
|
||||
|
||||
if (elementToFocus) {
|
||||
elementToFocus.focus();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.clickOut = (event) => {
|
||||
@ -386,7 +385,7 @@ export const Suggest = function({
|
||||
|
||||
if (!path.includes(this.element.suggest) && !path.includes(this.element.input)) {
|
||||
this.close();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -398,7 +397,7 @@ export const Suggest = function({
|
||||
|
||||
this.close();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import { form } from '../form';
|
||||
|
||||
import { Button } from '../button';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
|
||||
import './index.css';
|
||||
|
||||
@ -29,7 +27,7 @@ export const Tab = function({
|
||||
|
||||
this.element.tab.appendChild(this.element.content);
|
||||
|
||||
group.forEach((item, i) => {
|
||||
group.forEach((item) => {
|
||||
|
||||
item.toggle = new Button({
|
||||
text: item.tabText,
|
||||
@ -58,7 +56,7 @@ export const Tab = function({
|
||||
};
|
||||
|
||||
this.deactive = () => {
|
||||
group.forEach((item, i) => {
|
||||
group.forEach((item) => {
|
||||
item.active = false;
|
||||
});
|
||||
};
|
||||
@ -68,7 +66,7 @@ export const Tab = function({
|
||||
|
||||
const navBox = this.element.tab.getBoundingClientRect();
|
||||
|
||||
group.forEach((item, i) => {
|
||||
group.forEach((item) => {
|
||||
|
||||
if (item.active) {
|
||||
|
||||
@ -80,31 +78,31 @@ export const Tab = function({
|
||||
this.element.tab.style.setProperty('--tab-indicator-height', Math.round(itemBox.height));
|
||||
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
bind: () => {
|
||||
|
||||
this.element.indicator.addEventListener('animationend', (event) => {
|
||||
this.element.indicator.addEventListener('animationend', () => {
|
||||
this.element.tab.classList.add('tab-nav-indicator-active');
|
||||
});
|
||||
|
||||
this.element.indicator.addEventListener('transitionend', (event) => {});
|
||||
this.element.indicator.addEventListener('transitionend', () => { });
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
this.content = {
|
||||
render: () => {
|
||||
group.forEach((item, i) => {
|
||||
group.forEach((item) => {
|
||||
|
||||
if (item.active) {
|
||||
item.area.classList.remove('is-hidden');
|
||||
} else {
|
||||
item.area.classList.add('is-hidden');
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
@ -113,13 +111,13 @@ export const Tab = function({
|
||||
this.nav = {
|
||||
render: () => {
|
||||
|
||||
group.forEach((item, i) => {
|
||||
group.forEach((item) => {
|
||||
|
||||
if (item.active) {
|
||||
item.toggle.active();
|
||||
} else {
|
||||
item.toggle.deactive();
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { appName } from '../appName';
|
||||
import { APP_NAME } from '../../constant';
|
||||
import { toolbar } from '../toolbar';
|
||||
import { bookmark } from '../bookmark';
|
||||
import { bookmarkDefault } from '../bookmarkDefault';
|
||||
@ -47,7 +46,7 @@ theme.font.display = {
|
||||
google: { families: [trimString(displayFont) + ':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'] }
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
theme.font.display.render();
|
||||
|
||||
@ -64,7 +63,7 @@ theme.font.display = {
|
||||
|
||||
html.style.removeProperty('--theme-font-display-name');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
@ -89,7 +88,7 @@ theme.font.ui = {
|
||||
google: { families: [trimString(uiFont) + ':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'] }
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
theme.font.ui.render();
|
||||
|
||||
@ -106,18 +105,15 @@ theme.font.ui = {
|
||||
|
||||
html.style.removeProperty('--theme-font-ui-name');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
theme.color = {
|
||||
render: () => {
|
||||
|
||||
const html = document.querySelector('html');
|
||||
|
||||
const head = document.querySelector('head');
|
||||
|
||||
let shades = (state.get.current().theme.color.contrast.end - state.get.current().theme.color.contrast.start) / (state.get.current().theme.color.shades - 1);
|
||||
|
||||
for (var type in state.get.current().theme.color.range) {
|
||||
@ -130,21 +126,21 @@ theme.color = {
|
||||
|
||||
let rgb = convertColor.hsl.rgb(hsl);
|
||||
|
||||
for (var key in rgb) {
|
||||
for (let key in rgb) {
|
||||
html.style.setProperty(`--theme-${type}-${i + 1}-${key}`, rgb[key]);
|
||||
};
|
||||
}
|
||||
|
||||
for (var key in hsl) {
|
||||
for (let key in hsl) {
|
||||
html.style.setProperty(`--theme-${type}-${i + 1}-${key}`, hsl[key]);
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
for (let i = 1; i <= state.get.current().theme.color.shades; i++) {
|
||||
html.style.setProperty(`--theme-primary-${i}`, `var(--theme-primary-${i}-h), calc(var(--theme-primary-${i}-s) * 1%), calc(var(--theme-primary-${i}-l) * 1%)`);
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
@ -172,7 +168,7 @@ theme.accent.random = {
|
||||
|
||||
state.get.current().theme.accent.hsl = hsl;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
@ -184,11 +180,11 @@ theme.accent.rainbow = {
|
||||
|
||||
let degree = 0;
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
bookmark.all.forEach((item) => {
|
||||
|
||||
item.items.forEach((item, i) => {
|
||||
item.items.forEach((item) => {
|
||||
|
||||
item.accent.by = "custom";
|
||||
item.accent.by = 'custom';
|
||||
|
||||
item.accent.hsl = { h: Math.round(degree), s: 100, l: 50 };
|
||||
|
||||
@ -205,9 +201,9 @@ theme.accent.rainbow = {
|
||||
},
|
||||
clear: () => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
bookmark.all.forEach((item) => {
|
||||
|
||||
item.items.forEach((item, i) => {
|
||||
item.items.forEach((item) => {
|
||||
|
||||
item.accent = JSON.parse(JSON.stringify(bookmarkDefault.accent));
|
||||
|
||||
@ -234,11 +230,11 @@ theme.accent.cycle = {
|
||||
|
||||
if (state.get.current().menu) {
|
||||
themeSetting.control.accent.color.update();
|
||||
};
|
||||
}
|
||||
|
||||
if (state.get.current().toolbar.accent.show) {
|
||||
toolbar.current.update.accent();
|
||||
};
|
||||
}
|
||||
|
||||
}, state.get.current().theme.accent.cycle.speed);
|
||||
|
||||
@ -248,14 +244,14 @@ theme.accent.cycle = {
|
||||
|
||||
theme.accent.cycle.timer = false;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
render: () => {
|
||||
|
||||
let newValue = state.get.current().theme.accent.hsl.h + state.get.current().theme.accent.cycle.step;
|
||||
|
||||
if (newValue > 359) { newValue = 0; };
|
||||
if (newValue > 359) { newValue = 0; }
|
||||
|
||||
state.get.current().theme.accent.hsl.h = newValue;
|
||||
|
||||
@ -275,7 +271,7 @@ theme.accent.cycle = {
|
||||
|
||||
theme.style = {
|
||||
bind: () => {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
theme.style.initial();
|
||||
});
|
||||
},
|
||||
@ -285,19 +281,19 @@ theme.style = {
|
||||
case 'dark':
|
||||
case 'light':
|
||||
|
||||
localStorage.setItem(appName + 'Style', state.get.current().theme.style);
|
||||
localStorage.setItem(APP_NAME + 'Style', state.get.current().theme.style);
|
||||
break;
|
||||
|
||||
case 'system':
|
||||
|
||||
if (window.matchMedia('(prefers-color-scheme:dark)').matches) {
|
||||
localStorage.setItem(appName + 'Style', 'dark');
|
||||
localStorage.setItem(APP_NAME + 'Style', 'dark');
|
||||
} else if (window.matchMedia('(prefers-color-scheme:light)').matches) {
|
||||
localStorage.setItem(appName + 'Style', 'light');
|
||||
};
|
||||
localStorage.setItem(APP_NAME + 'Style', 'light');
|
||||
}
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
},
|
||||
dark: () => {
|
||||
state.get.current().theme.style = 'dark';
|
||||
@ -320,7 +316,7 @@ theme.style = {
|
||||
theme.style.dark();
|
||||
break;
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -351,10 +347,7 @@ theme.background = {
|
||||
|
||||
theme.background.area = {
|
||||
render: () => {
|
||||
|
||||
const backgroundElement = node('div|class:background');
|
||||
|
||||
state.get.option().theme.background.type.forEach((item, i) => {
|
||||
state.get.option().theme.background.type.forEach((item) => {
|
||||
|
||||
switch (item) {
|
||||
|
||||
@ -380,7 +373,7 @@ theme.background.area = {
|
||||
|
||||
theme.background.element.background.appendChild(theme.background.element.type[item]);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -404,7 +397,7 @@ theme.background.image = {
|
||||
|
||||
html.style.removeProperty('--theme-background-image');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
@ -426,7 +419,7 @@ theme.background.video = {
|
||||
|
||||
theme.background.video.clear();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
clear: () => {
|
||||
@ -437,7 +430,7 @@ theme.background.video = {
|
||||
|
||||
clearChildNode(theme.background.element.type.video.wrap);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { state } from '../../state';
|
||||
import { appName } from '../../appName';
|
||||
import { APP_NAME } from '../../../constant';
|
||||
|
||||
export const app = {
|
||||
name: appName + ' (default)',
|
||||
name: APP_NAME + ' (default)',
|
||||
color: state.get.default().theme.color,
|
||||
accent: { hsl: state.get.default().theme.accent.hsl, rgb: state.get.default().theme.accent.rgb },
|
||||
font: state.get.default().theme.font,
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user