extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-22 16:13:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

add eslint and huskyjs to catch bugs and maintain consistent code style

Browse Source
This commit is contained in:
Samuele Zanca 2021-10-10 13:07:13 -04:00 committed by GitHub
parent b2ceaffc87
commit c2ef6fbb2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
139 changed files with 9402 additions and 8227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
.eslintrc.js Normal file
View 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
View File

@ -0,0 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint

1807
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -5,7 +5,9 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"start": "webpack serve --open --config webpack.dev.js", "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": [ "keywords": [
"startpage", "startpage",
@ -29,7 +31,10 @@
"copy-webpack-plugin": "^9.0.1", "copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.3.0", "css-loader": "^6.3.0",
"css-minimizer-webpack-plugin": "^3.0.2", "css-minimizer-webpack-plugin": "^3.0.2",
"eslint": "^7.32.0",
"eslint-plugin-unused-imports": "^1.1.5",
"html-webpack-plugin": "^5.3.1", "html-webpack-plugin": "^5.3.1",
"husky": "^7.0.2",
"mini-css-extract-plugin": "^2.2.0", "mini-css-extract-plugin": "^2.2.0",
"moment": "^2.29.1", "moment": "^2.29.1",
"sortablejs": "^1.13.0", "sortablejs": "^1.13.0",

9
src/component/accentPresetButton/index.js
View File

@ -1,6 +1,5 @@
import { state } from '../state'; import { state } from '../state';
import { data } from '../data'; import { data } from '../data';
import { theme } from '../theme';
import { toolbar } from '../toolbar'; import { toolbar } from '../toolbar';
import { themeSetting } from '../menuContent/themeSetting'; import { themeSetting } from '../menuContent/themeSetting';
@ -8,15 +7,11 @@ import { Button } from '../button';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { convertColor } from '../../utility/convertColor'; import { convertColor } from '../../utility/convertColor';
import { isValidString } from '../../utility/isValidString';
import { complexNode } from '../../utility/complexNode';
import { applyCSSVar } from '../../utility/applyCSSVar'; import { applyCSSVar } from '../../utility/applyCSSVar';
import { applyCSSClass } from '../../utility/applyCSSClass';
import { applyCSSState } from '../../utility/applyCSSState';
import './index.css'; import './index.css';
export const AccentPresetButton = function({ presetData = false } = {}) { export const AccentPresetButton = function ({ presetData = false } = {}) {
this.name = () => { this.name = () => {
@ -24,7 +19,7 @@ export const AccentPresetButton = function({ presetData = false } = {}) {
if (presetData.prefix) { if (presetData.prefix) {
fullName = presetData.prefix + ' ' + presetData.name.toLowerCase(); fullName = presetData.prefix + ' ' + presetData.name.toLowerCase();
}; }
return fullName; return fullName;

4
src/component/alert/index.js
View File

@ -6,7 +6,7 @@ import { node } from '../../utility/node';
import './index.css'; import './index.css';
export const Alert = function({ export const Alert = function ({
children = [], children = [],
iconName = false iconName = false
} = {}) { } = {}) {
@ -29,7 +29,7 @@ export const Alert = function({
this.element.alert.appendChild(this.element.header); this.element.alert.appendChild(this.element.header);
}; }
this.element.body.appendChild(this.element.message); this.element.body.appendChild(this.element.message);

1
src/component/appName/index.js
View File

@ -1 +0,0 @@
export const appName = 'nightTab';

73
src/component/bookmark/index.js
View File

@ -3,7 +3,6 @@ import { data } from '../data';
import { layout } from '../layout'; import { layout } from '../layout';
import { group } from '../group'; import { group } from '../group';
import { header } from '../header'; import { header } from '../header';
import { bookmarkDefault } from '../bookmarkDefault';
import { bookmarkPreset } from '../bookmarkPreset'; import { bookmarkPreset } from '../bookmarkPreset';
import { groupAndBookmark } from '../groupAndBookmark'; import { groupAndBookmark } from '../groupAndBookmark';
@ -15,12 +14,10 @@ import { StagedGroup } from '../stagedGroup';
import { Modal } from '../modal'; import { Modal } from '../modal';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { clearChildNode } from '../../utility/clearChildNode';
import { applyCSSVar } from '../../utility/applyCSSVar'; import { applyCSSVar } from '../../utility/applyCSSVar';
import { applyCSSClass } from '../../utility/applyCSSClass'; import { applyCSSClass } from '../../utility/applyCSSClass';
import { applyCSSState } from '../../utility/applyCSSState'; import { applyCSSState } from '../../utility/applyCSSState';
import { set } from '../../utility/set'; import { set } from '../../utility/set';
import { get } from '../../utility/get';
import { sortArrayOfObject } from '../../utility/sortArrayOfObject'; import { sortArrayOfObject } from '../../utility/sortArrayOfObject';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
@ -80,14 +77,14 @@ bookmark.item = {
if (bookmarkData.propagate.display || bookmarkData.propagate.layout || bookmarkData.propagate.theme) { 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) { if (bookmarkData.propagate.display) {
item.display.visual.show = bookmarkData.link.display.visual.show; item.display.visual.show = bookmarkData.link.display.visual.show;
item.display.name.show = bookmarkData.link.display.name.show; item.display.name.show = bookmarkData.link.display.name.show;
}; }
if (bookmarkData.propagate.layout) { if (bookmarkData.propagate.layout) {
item.display.visual.size = bookmarkData.link.display.visual.size; item.display.visual.size = bookmarkData.link.display.visual.size;
@ -98,27 +95,27 @@ bookmark.item = {
item.display.alignment = bookmarkData.link.display.alignment; item.display.alignment = bookmarkData.link.display.alignment;
item.display.direction = bookmarkData.link.display.direction; item.display.direction = bookmarkData.link.display.direction;
item.display.order = bookmarkData.link.display.order; item.display.order = bookmarkData.link.display.order;
}; }
if (bookmarkData.propagate.theme) { if (bookmarkData.propagate.theme) {
item.accent = bookmarkData.link.accent; item.accent = bookmarkData.link.accent;
item.color = bookmarkData.link.color; item.color = bookmarkData.link.color;
item.border = bookmarkData.link.border; item.border = bookmarkData.link.border;
item.display.visual.shadow = bookmarkData.link.display.visual.shadow; item.display.visual.shadow = bookmarkData.link.display.visual.shadow;
}; }
}); });
}); });
}; }
}, },
applyVar: (path, value) => { 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 }); set({ object: item, path: path, value: value });
@ -130,28 +127,28 @@ bookmark.item = {
sort: { sort: {
letter: () => { letter: () => {
bookmark.all.forEach((item, i) => { bookmark.all.forEach((item) => {
item.items = sortArrayOfObject(item.items, 'display.visual.letter.text'); item.items = sortArrayOfObject(item.items, 'display.visual.letter.text');
}); });
}, },
icon: () => { icon: () => {
bookmark.all.forEach((item, i) => { bookmark.all.forEach((item) => {
item.items = sortArrayOfObject(item.items, 'display.visual.icon.name'); item.items = sortArrayOfObject(item.items, 'display.visual.icon.name');
}); });
}, },
name: () => { name: () => {
bookmark.all.forEach((item, i) => { bookmark.all.forEach((item) => {
item.items = sortArrayOfObject(item.items, 'display.name.text'); item.items = sortArrayOfObject(item.items, 'display.name.text');
}); });
} }
} }
}, },
render: (groupIndex) => { render: () => {
const addBookmarkToGroup = (bookmarkData, groupIndex, bookmarkIndex) => { const addBookmarkToGroup = (bookmarkData, groupIndex, bookmarkIndex) => {
@ -205,15 +202,15 @@ bookmark.item = {
addBookmarkToGroup(item, groupIndex, bookmarkIndex); addBookmarkToGroup(item, groupIndex, bookmarkIndex);
}; }
}); });
}; }
}); });
}; }
} else { } else {
@ -238,11 +235,11 @@ bookmark.item = {
addEmptyGroup(groupIndex); addEmptyGroup(groupIndex);
}; }
}); });
}; }
}, },
clear: () => { clear: () => {
@ -273,7 +270,7 @@ bookmark.edit = {
bookmark.edit.close(); bookmark.edit.close();
} else { } else {
bookmark.edit.open(); bookmark.edit.open();
}; }
}, },
render: () => { render: () => {
@ -282,17 +279,17 @@ bookmark.edit = {
if (bookmark.tile.current.length > 0) { if (bookmark.tile.current.length > 0) {
bookmark.tile.current.forEach((item, i) => { bookmark.tile.current.forEach((item) => {
if (state.get.current().bookmark.edit) { if (state.get.current().bookmark.edit) {
item.control.enable(); item.control.enable();
} else { } else {
item.control.disable(); item.control.disable();
}; }
}); });
}; }
} }
}; };
@ -301,8 +298,8 @@ bookmark.direction = {
mod: { mod: {
vertical: () => { vertical: () => {
bookmark.all.forEach((item, i) => { bookmark.all.forEach((item) => {
item.items.forEach((item, i) => { item.items.forEach((item) => {
item.display.direction = 'vertical'; item.display.direction = 'vertical';
@ -312,8 +309,8 @@ bookmark.direction = {
}, },
horizontal: () => { horizontal: () => {
bookmark.all.forEach((item, i) => { bookmark.all.forEach((item) => {
item.items.forEach((item, i) => { item.items.forEach((item) => {
item.display.direction = 'horizontal'; item.display.direction = 'horizontal';
@ -343,11 +340,11 @@ bookmark.add = {
newBookmarkData.position.destination.group = groupIndex; newBookmarkData.position.destination.group = groupIndex;
newBookmarkData.position.destination.item = bookmark.all[groupIndex].items.length; newBookmarkData.position.destination.item = bookmark.all[groupIndex].items.length;
}; }
if (!bookmark.all.length > 0) { if (!bookmark.all.length > 0) {
newBookmarkData.group.destination = 'new'; newBookmarkData.group.destination = 'new';
}; }
const bookmarkForm = new BookmarkForm({ bookmarkData: newBookmarkData }); const bookmarkForm = new BookmarkForm({ bookmarkData: newBookmarkData });
@ -374,8 +371,7 @@ bookmark.add = {
successAction: () => { successAction: () => {
switch (newBookmarkData.group.destination) { switch (newBookmarkData.group.destination) {
case 'new': case 'new': {
const newGroupData = new StagedGroup(); const newGroupData = new StagedGroup();
newGroupData.group.name.text = newBookmarkData.group.name; newGroupData.group.name.text = newBookmarkData.group.name;
@ -389,8 +385,9 @@ bookmark.add = {
layout.area.assemble(); layout.area.assemble();
break; break;
}
}; }
newBookmarkData.link.timestamp = new Date().getTime(); newBookmarkData.link.timestamp = new Date().getTime();
@ -427,7 +424,7 @@ bookmark.sort = {
bookmark.sort.sortable = []; bookmark.sort.sortable = [];
group.area.current.forEach((item, i) => { group.area.current.forEach((item) => {
bookmark.sort.sortable.push(Sortable.create(item.element.body, { bookmark.sort.sortable.push(Sortable.create(item.element.body, {
handle: '.bookmark-control-sort', handle: '.bookmark-control-sort',
@ -473,7 +470,7 @@ bookmark.count = () => {
let count = 0; let count = 0;
bookmark.all.forEach((item, i) => { count = count + item.items.length }); bookmark.all.forEach((item) => { count = count + item.items.length; });
return count; return count;
@ -489,7 +486,7 @@ bookmark.restore = (dataToRestore) => {
bookmark.append = (dataToAppend) => { bookmark.append = (dataToAppend) => {
dataToAppend.bookmark.forEach((item, i) => { dataToAppend.bookmark.forEach((item) => {
bookmark.all.push(item); bookmark.all.push(item);
@ -505,7 +502,7 @@ bookmark.reset = () => {
const groupIndex = i; const groupIndex = i;
item.items.forEach((item, i) => { item.items.forEach((item) => {
const newBookmarkData = new StagedBookmark(); const newBookmarkData = new StagedBookmark();
@ -531,7 +528,7 @@ bookmark.reset = () => {
newBookmarkData.position.destination.item = i; newBookmarkData.position.destination.item = i;
bookmark.item.mod.edit(newBookmarkData) bookmark.item.mod.edit(newBookmarkData);
}); });

3
src/component/bookmarkEmpty/index.js
View File

@ -1,4 +1,3 @@
import { state } from '../state';
import { bookmark } from '../bookmark'; import { bookmark } from '../bookmark';
import { group } from '../group'; import { group } from '../group';
@ -8,7 +7,7 @@ import { node } from '../../utility/node';
import './index.css'; import './index.css';
export const BookmarkEmpty = function() { export const BookmarkEmpty = function () {
this.element = { this.element = {
empty: node('div|class:bookmark-empty'), empty: node('div|class:bookmark-empty'),

52
src/component/bookmarkForm/index.js
View File

@ -12,29 +12,25 @@ import { BookmarkPreview } from '../bookmarkPreview';
import { Alert } from '../alert'; import { Alert } from '../alert';
import { Control_helperText } from '../control/helperText'; import { Control_helperText } from '../control/helperText';
import { Control_inputButton } from '../control/inputButton';
import { Control_groupText } from '../control/groupText'; import { Control_groupText } from '../control/groupText';
import { Control_radio } from '../control/radio'; import { Control_radio } from '../control/radio';
import { Control_radioGrid } from '../control/radioGrid'; import { Control_radioGrid } from '../control/radioGrid';
import { Control_checkbox } from '../control/checkbox'; import { Control_checkbox } from '../control/checkbox';
import { Control_slider } from '../control/slider';
import { Control_sliderSlim } from '../control/sliderSlim'; import { Control_sliderSlim } from '../control/sliderSlim';
import { Control_colorMixer } from '../control/colorMixer'; import { Control_colorMixer } from '../control/colorMixer';
import { Control_color } from '../control/color';
import { Control_text } from '../control/text'; import { Control_text } from '../control/text';
import { Control_select } from '../control/select'; import { Control_select } from '../control/select';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { complexNode } from '../../utility/complexNode'; import { complexNode } from '../../utility/complexNode';
import { isValidString } from '../../utility/isValidString'; import { isValidString } from '../../utility/isValidString';
import { trimString } from '../../utility/trimString';
import { ordinalNumber } from '../../utility/ordinalNumber'; import { ordinalNumber } from '../../utility/ordinalNumber';
import { randomString } from '../../utility/randomString'; import { randomString } from '../../utility/randomString';
import { randomNumber } from '../../utility/randomNumber'; import { randomNumber } from '../../utility/randomNumber';
import './index.css'; import './index.css';
export const BookmarkForm = function({ export const BookmarkForm = function ({
bookmarkData = false bookmarkData = false
} = {}) { } = {}) {
@ -58,7 +54,7 @@ export const BookmarkForm = function({
}); });
}; }
return option; return option;
@ -74,19 +70,19 @@ export const BookmarkForm = function({
if (bookmarkData.type.new || !(bookmarkData.position.origin.group === bookmarkData.position.destination.group)) { if (bookmarkData.type.new || !(bookmarkData.position.origin.group === bookmarkData.position.destination.group)) {
count++; count++;
}; }
for (var i = 1; i <= count; i++) { for (var i = 1; i <= count; i++) {
option.push(ordinalNumber(i)); option.push(ordinalNumber(i));
}; }
} else { } else {
option.push(ordinalNumber(1)); option.push(ordinalNumber(1));
}; }
return option; return option;
@ -591,9 +587,9 @@ export const BookmarkForm = function({
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;
} else { } else {
bookmarkData.position.destination.item = bookmark.all[bookmarkData.position.destination.group].items.length; 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); this.control.group.position.item.updateOption(this.selectOption.item(), bookmarkData.position.destination.item);
@ -1086,7 +1082,7 @@ export const BookmarkForm = function({
case 'letter': case 'letter':
this.control.bookmark.display.visual.letter.text.enable(); this.control.bookmark.display.visual.letter.text.enable();
this.control.bookmark.display.visual.icon.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.icon.remove.disable();
this.control.bookmark.display.visual.image.url.disable(); this.control.bookmark.display.visual.image.url.disable();
break; break;
@ -1102,11 +1098,11 @@ export const BookmarkForm = function({
case 'image': case 'image':
this.control.bookmark.display.visual.letter.text.disable(); this.control.bookmark.display.visual.letter.text.disable();
this.control.bookmark.display.visual.icon.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.icon.remove.disable();
this.control.bookmark.display.visual.image.url.enable(); this.control.bookmark.display.visual.image.url.enable();
break; break;
}; }
} else { } else {
this.control.bookmark.display.visual.type.disable(); this.control.bookmark.display.visual.type.disable();
this.control.bookmark.display.visual.letter.text.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.icon.remove.disable();
this.control.bookmark.display.visual.image.url.disable(); this.control.bookmark.display.visual.image.url.disable();
this.control.bookmark.display.visual.size.disable(); this.control.bookmark.display.visual.size.disable();
}; }
if (bookmarkData.link.display.name.show) { if (bookmarkData.link.display.name.show) {
this.control.bookmark.display.name.text.enable(); this.control.bookmark.display.name.text.enable();
@ -1123,7 +1119,7 @@ export const BookmarkForm = function({
} else { } else {
this.control.bookmark.display.name.text.disable(); this.control.bookmark.display.name.text.disable();
this.control.bookmark.display.name.size.disable(); this.control.bookmark.display.name.size.disable();
}; }
if (bookmarkData.link.display.visual.show || bookmarkData.link.display.name.show) { if (bookmarkData.link.display.visual.show || bookmarkData.link.display.name.show) {
this.control.bookmark.display.translate.label.classList.remove('disabled'); 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.translate.y.disable();
this.control.bookmark.display.rotate.disable(); this.control.bookmark.display.rotate.disable();
this.control.bookmark.display.alignment.disable(); this.control.bookmark.display.alignment.disable();
}; }
if (bookmarkData.link.display.visual.show && bookmarkData.link.display.name.show) { if (bookmarkData.link.display.visual.show && bookmarkData.link.display.name.show) {
this.control.bookmark.display.direction.enable(); this.control.bookmark.display.direction.enable();
@ -1147,7 +1143,7 @@ export const BookmarkForm = function({
this.control.bookmark.display.direction.disable(); this.control.bookmark.display.direction.disable();
this.control.bookmark.display.order.disable(); this.control.bookmark.display.order.disable();
this.control.bookmark.display.gutter.disable(); this.control.bookmark.display.gutter.disable();
}; }
switch (bookmarkData.link.display.visual.type) { switch (bookmarkData.link.display.visual.type) {
case 'letter': case 'letter':
@ -1160,7 +1156,7 @@ export const BookmarkForm = function({
this.control.bookmark.display.visual.shadow.size.disable(); this.control.bookmark.display.visual.shadow.size.disable();
this.helper.bookmark.display.visual.shadow.size.disable(); this.helper.bookmark.display.visual.shadow.size.disable();
break; break;
}; }
switch (bookmarkData.link.color.by) { switch (bookmarkData.link.color.by) {
case 'theme': case 'theme':
@ -1170,7 +1166,7 @@ export const BookmarkForm = function({
case 'custom': case 'custom':
this.control.bookmark.color.color.enable(); this.control.bookmark.color.color.enable();
break; break;
}; }
switch (bookmarkData.link.accent.by) { switch (bookmarkData.link.accent.by) {
case 'theme': case 'theme':
@ -1180,7 +1176,7 @@ export const BookmarkForm = function({
case 'custom': case 'custom':
this.control.bookmark.accent.color.enable(); this.control.bookmark.accent.color.enable();
break; break;
}; }
if (bookmarkData.link.background.show) { if (bookmarkData.link.background.show) {
this.control.bookmark.background.type.enable(); this.control.bookmark.background.type.enable();
@ -1200,7 +1196,7 @@ export const BookmarkForm = function({
this.control.bookmark.background.video.url.enable(); this.control.bookmark.background.video.url.enable();
this.helper.bookmark.background.video.enable(); this.helper.bookmark.background.video.enable();
break; break;
}; }
} else { } else {
this.control.bookmark.background.type.disable(); this.control.bookmark.background.type.disable();
this.control.bookmark.background.image.url.disable(); this.control.bookmark.background.image.url.disable();
@ -1208,7 +1204,7 @@ export const BookmarkForm = function({
this.control.bookmark.background.video.url.disable(); this.control.bookmark.background.video.url.disable();
this.helper.bookmark.background.video.disable(); this.helper.bookmark.background.video.disable();
this.control.bookmark.background.opacity.disable(); this.control.bookmark.background.opacity.disable();
}; }
switch (bookmarkData.group.destination) { switch (bookmarkData.group.destination) {
case 'existing': case 'existing':
@ -1224,13 +1220,13 @@ export const BookmarkForm = function({
this.control.group.name.enable(); this.control.group.name.enable();
this.control.group.random.enable(); this.control.group.random.enable();
break; break;
}; }
if (!bookmark.all.length > 0) { if (!bookmark.all.length > 0) {
this.control.group.destination.radioSet[0].radio.disable(); this.control.group.destination.radioSet[0].radio.disable();
} else { } else {
this.control.group.destination.radioSet[0].radio.enable(); 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)); 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 { } else {
this.control.bookmark.display.visual.icon.preview.update(); this.control.bookmark.display.visual.icon.preview.update();
}; }
this.control.bookmark.display.visual.image.url.update(); this.control.bookmark.display.visual.image.url.update();
@ -1278,7 +1274,7 @@ export const BookmarkForm = function({
this.element.form.addEventListener('keydown', (event) => { 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'; bookmarkData.link.display.visual.icon.prefix = 'fas';
} else if (suggestData.styles.includes('brands')) { } else if (suggestData.styles.includes('brands')) {
bookmarkData.link.display.visual.icon.prefix = 'fab'; bookmarkData.link.display.visual.icon.prefix = 'fab';
}; }
this.preview.update.assemble(bookmarkData); this.preview.update.assemble(bookmarkData);
this.update(); this.update();

318
src/component/bookmarkPreset/index.js
View File

@ -1,161 +1,161 @@
const bookmarkPreset = {}; const bookmarkPreset = {};
bookmarkPreset.get = () => { bookmarkPreset.get = () => {
return [{ return [{
name: { text: 'Cool stuff', show: true }, name: { text: 'Cool stuff', show: true },
collapse: false, collapse: false,
toolbar: { openAll: { show: true }, collapse: { show: true } }, toolbar: { openAll: { show: true }, collapse: { show: true } },
items: [{ items: [{
url: 'https://zombiefox.github.io/awesomeSheet/', url: 'https://zombiefox.github.io/awesomeSheet/',
display: { display: {
alignment: 'center-center', alignment: 'center-center',
direction: 'vertical', direction: 'vertical',
order: 'visual-name', order: 'visual-name',
rotate: 0, rotate: 0,
translate: { x: 0, y: 0 }, translate: { x: 0, y: 0 },
gutter: 25, gutter: 25,
name: { show: true, text: 'awesomeSheet', size: 7 }, name: { show: true, text: 'awesomeSheet', size: 7 },
visual: { show: true, type: 'icon', size: 25, letter: { text: 'AS' }, icon: { name: 'dice-d20', prefix: 'fas', label: 'Dice D20' }, image: { url: '' }, shadow: { size: 0 } } visual: { show: true, type: 'icon', size: 25, letter: { text: 'AS' }, icon: { name: 'dice-d20', prefix: 'fas', label: 'Dice D20' }, image: { url: '' }, shadow: { size: 0 } }
}, },
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 }, color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } }, background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0, border: 0,
shape: { wide: false, tall: false }, shape: { wide: false, tall: false },
timestamp: 1626297988913 timestamp: 1626297988913
}, { }, {
url: 'https://www.amazon.co.uk/', url: 'https://www.amazon.co.uk/',
display: { display: {
alignment: 'center-center', alignment: 'center-center',
direction: 'vertical', direction: 'vertical',
order: 'visual-name', order: 'visual-name',
rotate: 0, rotate: 0,
translate: { x: 0, y: 0 }, translate: { x: 0, y: 0 },
gutter: 25, gutter: 25,
name: { show: true, text: 'Amazon', size: 7 }, name: { show: true, text: 'Amazon', size: 7 },
visual: { show: true, type: 'letter', size: 25, letter: { text: 'AZ' }, icon: { name: 'amazon', prefix: 'fab', label: 'Amazon' }, image: { url: '' }, shadow: { size: 0 } } visual: { show: true, type: 'letter', size: 25, letter: { text: 'AZ' }, icon: { name: 'amazon', prefix: 'fab', label: 'Amazon' }, image: { url: '' }, shadow: { size: 0 } }
}, },
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 }, color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } }, background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0, border: 0,
shape: { wide: false, tall: false }, shape: { wide: false, tall: false },
timestamp: 1626297999213 timestamp: 1626297999213
}, { }, {
url: 'https://mail.google.com/', url: 'https://mail.google.com/',
display: { display: {
alignment: 'center-center', alignment: 'center-center',
direction: 'vertical', direction: 'vertical',
order: 'visual-name', order: 'visual-name',
rotate: 0, rotate: 0,
translate: { x: 0, y: 0 }, translate: { x: 0, y: 0 },
gutter: 25, gutter: 25,
name: { show: true, text: 'Gmail', size: 7 }, name: { show: true, text: 'Gmail', size: 7 },
visual: { show: true, type: 'letter', size: 25, letter: { text: 'GM' }, icon: { name: 'envelope', prefix: 'fas', label: 'Envelope' }, image: { url: '' }, shadow: { size: 0 } } visual: { show: true, type: 'letter', size: 25, letter: { text: 'GM' }, icon: { name: 'envelope', prefix: 'fas', label: 'Envelope' }, image: { url: '' }, shadow: { size: 0 } }
}, },
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 }, color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } }, background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0, border: 0,
shape: { wide: false, tall: false }, shape: { wide: false, tall: false },
timestamp: 1626298011293 timestamp: 1626298011293
}, { }, {
url: 'https://www.reddit.com/', url: 'https://www.reddit.com/',
display: { display: {
alignment: 'center-center', alignment: 'center-center',
direction: 'vertical', direction: 'vertical',
order: 'visual-name', order: 'visual-name',
rotate: 0, rotate: 0,
translate: { x: 0, y: 0 }, translate: { x: 0, y: 0 },
gutter: 25, gutter: 25,
name: { show: true, text: 'Reddit', size: 7 }, name: { show: true, text: 'Reddit', size: 7 },
visual: { show: true, type: 'icon', size: 25, letter: { text: 'R' }, icon: { name: 'reddit-alien', prefix: 'fab', label: 'reddit Alien' }, image: { url: '' }, shadow: { size: 0 } } visual: { show: true, type: 'icon', size: 25, letter: { text: 'R' }, icon: { name: 'reddit-alien', prefix: 'fab', label: 'reddit Alien' }, image: { url: '' }, shadow: { size: 0 } }
}, },
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 }, color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } }, background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0, border: 0,
shape: { wide: false, tall: false }, shape: { wide: false, tall: false },
timestamp: 1626298017175 timestamp: 1626298017175
}, { }, {
url: 'https://www.netflix.com/', url: 'https://www.netflix.com/',
display: { display: {
alignment: 'center-center', alignment: 'center-center',
direction: 'vertical', direction: 'vertical',
order: 'visual-name', order: 'visual-name',
rotate: 0, rotate: 0,
translate: { x: 0, y: 0 }, translate: { x: 0, y: 0 },
gutter: 25, gutter: 25,
name: { show: true, text: 'Netflix', size: 7 }, name: { show: true, text: 'Netflix', size: 7 },
visual: { show: true, type: 'icon', size: 25, letter: { text: 'N' }, icon: { name: 'film', prefix: 'fas', label: 'Film' }, image: { url: '' }, shadow: { size: 0 } } visual: { show: true, type: 'icon', size: 25, letter: { text: 'N' }, icon: { name: 'film', prefix: 'fas', label: 'Film' }, image: { url: '' }, shadow: { size: 0 } }
}, },
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 }, color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } }, background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0, border: 0,
shape: { wide: false, tall: false }, shape: { wide: false, tall: false },
timestamp: 1626298022303 timestamp: 1626298022303
}, { }, {
url: 'https://drive.google.com/drive/', url: 'https://drive.google.com/drive/',
display: { display: {
alignment: 'center-center', alignment: 'center-center',
direction: 'vertical', direction: 'vertical',
order: 'visual-name', order: 'visual-name',
rotate: 0, rotate: 0,
translate: { x: 0, y: 0 }, translate: { x: 0, y: 0 },
gutter: 25, gutter: 25,
name: { show: true, text: 'Drive', size: 7 }, name: { show: true, text: 'Drive', size: 7 },
visual: { show: true, type: 'letter', size: 25, letter: { text: 'DR' }, icon: { name: 'google-drive', prefix: 'fab', label: 'Drive' }, image: { url: '' }, shadow: { size: 0 } } visual: { show: true, type: 'letter', size: 25, letter: { text: 'DR' }, icon: { name: 'google-drive', prefix: 'fab', label: 'Drive' }, image: { url: '' }, shadow: { size: 0 } }
}, },
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 }, color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } }, background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0, border: 0,
shape: { wide: false, tall: false }, shape: { wide: false, tall: false },
timestamp: 1626298028996 timestamp: 1626298028996
}] }]
}, { }, {
name: { text: 'Dev sites', show: true }, name: { text: 'Dev sites', show: true },
collapse: false, collapse: false,
toolbar: { openAll: { show: true }, collapse: { show: true } }, toolbar: { openAll: { show: true }, collapse: { show: true } },
items: [{ items: [{
url: 'https://devdocs.io/', url: 'https://devdocs.io/',
display: { display: {
alignment: 'center-center', alignment: 'center-center',
direction: 'vertical', direction: 'vertical',
order: 'visual-name', order: 'visual-name',
rotate: 0, rotate: 0,
translate: { x: 0, y: 0 }, translate: { x: 0, y: 0 },
gutter: 25, gutter: 25,
name: { show: true, text: 'Devdocs', size: 7 }, name: { show: true, text: 'Devdocs', size: 7 },
visual: { show: true, type: 'icon', size: 25, letter: { text: 'DEV' }, icon: { name: 'code', prefix: 'fas', label: 'Code' }, image: { url: '' }, shadow: { size: 0 } } visual: { show: true, type: 'icon', size: 25, letter: { text: 'DEV' }, icon: { name: 'code', prefix: 'fas', label: 'Code' }, image: { url: '' }, shadow: { size: 0 } }
}, },
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 }, color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } }, background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0, border: 0,
shape: { wide: false, tall: false }, shape: { wide: false, tall: false },
timestamp: 1626298034209 timestamp: 1626298034209
}, { }, {
url: 'https://github.com/', url: 'https://github.com/',
display: { display: {
alignment: 'center-center', alignment: 'center-center',
direction: 'vertical', direction: 'vertical',
order: 'visual-name', order: 'visual-name',
rotate: 0, rotate: 0,
translate: { x: 0, y: 0 }, translate: { x: 0, y: 0 },
gutter: 25, gutter: 25,
name: { show: true, text: 'Github', size: 7 }, name: { show: true, text: 'Github', size: 7 },
visual: { show: true, type: 'icon', size: 25, letter: { text: 'GIT' }, icon: { name: 'github', prefix: 'fab', label: 'GitHub' }, image: { url: '' }, shadow: { size: 0 } } visual: { show: true, type: 'icon', size: 25, letter: { text: 'GIT' }, icon: { name: 'github', prefix: 'fab', label: 'GitHub' }, image: { url: '' }, shadow: { size: 0 } }
}, },
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 }, color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } }, background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0, border: 0,
shape: { wide: false, tall: false }, shape: { wide: false, tall: false },
timestamp: 1626298038470 timestamp: 1626298038470
}] }]
}]; }];
}; };
export { bookmarkPreset }; export { bookmarkPreset };

8
src/component/bookmarkPreview/index.js
View File

@ -4,7 +4,7 @@ import { node } from '../../utility/node';
import './index.css'; import './index.css';
export const BookmarkPreview = function({ export const BookmarkPreview = function ({
bookmarkData = false bookmarkData = false
} = {}) { } = {}) {
@ -20,19 +20,19 @@ export const BookmarkPreview = function({
this.grid.classList.add('bookmark-preview-grid-tall'); this.grid.classList.add('bookmark-preview-grid-tall');
} else { } else {
this.grid.classList.remove('bookmark-preview-grid-tall'); this.grid.classList.remove('bookmark-preview-grid-tall');
}; }
if (bookmarkData.link.shape.wide) { if (bookmarkData.link.shape.wide) {
this.grid.classList.add('bookmark-preview-grid-wide'); this.grid.classList.add('bookmark-preview-grid-wide');
} else { } else {
this.grid.classList.remove('bookmark-preview-grid-wide'); this.grid.classList.remove('bookmark-preview-grid-wide');
}; }
if (bookmarkData.link.shape.tall || bookmarkData.link.shape.wide) { if (bookmarkData.link.shape.tall || bookmarkData.link.shape.wide) {
this.title.textContent = 'Preview (50% scale)'; this.title.textContent = 'Preview (50% scale)';
} else { } else {
this.title.textContent = 'Preview'; this.title.textContent = 'Preview';
}; }
}; };

82
src/component/bookmarkTile/index.js
View File

@ -16,7 +16,7 @@ import { complexNode } from '../../utility/complexNode';
import { isValidString } from '../../utility/isValidString'; import { isValidString } from '../../utility/isValidString';
import { trimString } from '../../utility/trimString'; import { trimString } from '../../utility/trimString';
const BookmarkTile = function({ const BookmarkTile = function ({
bookmarkData = {}, bookmarkData = {},
preview = false preview = false
} = {}) { } = {}) {
@ -57,7 +57,7 @@ const BookmarkTile = function({
control: node('div|class:bookmark-control') 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 = {}; this.control = {};
@ -75,7 +75,7 @@ const BookmarkTile = function({
if (bookmarkData.position.destination.item < 0) { if (bookmarkData.position.destination.item < 0) {
bookmarkData.position.destination.item = 0; bookmarkData.position.destination.item = 0;
}; }
bookmark.item.mod.move(bookmarkData); 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) { 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; bookmarkData.position.destination.item = bookmark.all[bookmarkData.position.destination.group].items.length - 1;
}; }
bookmark.item.mod.move(bookmarkData); bookmark.item.mod.move(bookmarkData);
@ -144,8 +144,7 @@ const BookmarkTile = function({
successAction: () => { successAction: () => {
switch (newBookmarkData.group.destination) { switch (newBookmarkData.group.destination) {
case 'new': case 'new': {
newBookmarkData.position.destination.group = bookmark.all.length; newBookmarkData.position.destination.group = bookmark.all.length;
const newGroupData = new StagedGroup(); const newGroupData = new StagedGroup();
@ -157,7 +156,8 @@ const BookmarkTile = function({
group.item.mod.add(newGroupData); group.item.mod.add(newGroupData);
break; break;
}; }
}
bookmark.item.mod.edit(newBookmarkData); bookmark.item.mod.edit(newBookmarkData);
@ -211,7 +211,7 @@ const BookmarkTile = function({
for (var key in this.control.button) { for (var key in this.control.button) {
this.control.button[key].disable(); this.control.button[key].disable();
}; }
this.control.searchState(); this.control.searchState();
@ -221,7 +221,7 @@ const BookmarkTile = function({
for (var key in this.control.button) { for (var key in this.control.button) {
this.control.button[key].enable(); this.control.button[key].enable();
}; }
this.control.searchState(); this.control.searchState();
@ -237,7 +237,7 @@ const BookmarkTile = function({
this.control.button.left.enable(); this.control.button.left.enable();
this.control.button.right.enable(); this.control.button.right.enable();
this.control.button.sort.enable(); this.control.button.sort.enable();
}; }
}; };
@ -245,27 +245,27 @@ const BookmarkTile = function({
if (newBookmarkData) { if (newBookmarkData) {
bookmarkData = newBookmarkData; bookmarkData = newBookmarkData;
}; }
if (isValidString(bookmarkData.link.url) && !preview) { if (isValidString(bookmarkData.link.url) && !preview) {
this.element.content.link.setAttribute('href', trimString(bookmarkData.link.url)); this.element.content.link.setAttribute('href', trimString(bookmarkData.link.url));
} else { } else {
this.element.content.link.setAttribute('href', '#'); this.element.content.link.setAttribute('href', '#');
}; }
if (state.get.current().bookmark.newTab && !preview) { if (state.get.current().bookmark.newTab && !preview) {
this.element.content.link.setAttribute('target', '_blank'); this.element.content.link.setAttribute('target', '_blank');
}; }
if (!preview) { if (!preview) {
this.element.bookmark.style.setProperty('--bookmark-transition-delay', bookmarkData.position.origin.item); 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); this.element.bookmark.style.setProperty('--theme-bookmark-item-opacity', bookmarkData.link.color.opacity);
if (bookmarkData.link.color.opacity < 100) { if (bookmarkData.link.color.opacity < 100) {
this.element.bookmark.style.setProperty('--bookmark-clip-padding', 0); this.element.bookmark.style.setProperty('--bookmark-clip-padding', 0);
}; }
if (bookmarkData.link.color.opacity < 40) { if (bookmarkData.link.color.opacity < 40) {
@ -275,25 +275,25 @@ const BookmarkTile = function({
this.element.bookmark.classList.remove('is-bookmark-opacity-low'); this.element.bookmark.classList.remove('is-bookmark-opacity-low');
}; }
if (preview) { if (preview) {
const alignment = ['top-left', 'top-center', 'top-right', 'center-left', 'center-center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right']; 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); this.element.bookmark.classList.remove('is-bookmark-alignment-' + item);
}); });
const order = ['visual-name', 'name-visual']; const order = ['visual-name', 'name-visual'];
order.forEach((item, i) => { order.forEach((item) => {
this.element.bookmark.classList.remove('is-bookmark-order-' + item); this.element.bookmark.classList.remove('is-bookmark-order-' + item);
}); });
const direction = ['vertical', 'horizontal']; const direction = ['vertical', 'horizontal'];
direction.forEach((item, i) => { direction.forEach((item) => {
this.element.bookmark.classList.remove('is-bookmark-direction-' + item); this.element.bookmark.classList.remove('is-bookmark-direction-' + item);
}); });
}; }
this.element.bookmark.classList.add('is-bookmark-alignment-' + bookmarkData.link.display.alignment); 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)'); this.element.bookmark.style.setProperty('--bookmark-display-visual-color', 'var(--theme-accent)');
}; }
if (bookmarkData.link.display.visual.shadow.size > 0) { if (bookmarkData.link.display.visual.shadow.size > 0) {
@ -371,7 +371,7 @@ const BookmarkTile = function({
this.element.bookmark.style.removeProperty('--bookmark-display-visual-shadow'); this.element.bookmark.style.removeProperty('--bookmark-display-visual-shadow');
}; }
if (bookmarkData.link.color.by == 'custom') { 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)'); this.element.bookmark.style.setProperty('--button-link-text-active', 'var(--theme-color-text)');
}; }
if (bookmarkData.link.background.show) { if (bookmarkData.link.background.show) {
this.element.bookmark.style.setProperty('--bookmark-background-opacity', bookmarkData.link.background.opacity); this.element.bookmark.style.setProperty('--bookmark-background-opacity', bookmarkData.link.background.opacity);
@ -416,18 +416,18 @@ const BookmarkTile = function({
case 'image': case 'image':
if (isValidString(bookmarkData.link.background.image.url)) { if (isValidString(bookmarkData.link.background.image.url)) {
this.element.bookmark.style.setProperty('--bookmark-background-image-url', 'url("' + trimString(bookmarkData.link.background.image.url) + '")'); this.element.bookmark.style.setProperty('--bookmark-background-image-url', 'url("' + trimString(bookmarkData.link.background.image.url) + '")');
}; }
break; break;
}; }
}; }
if (bookmarkData.link.shape.tall) { if (bookmarkData.link.shape.tall) {
this.element.bookmark.classList.add('bookmark-tall'); this.element.bookmark.classList.add('bookmark-tall');
}; }
if (bookmarkData.link.shape.wide) { if (bookmarkData.link.shape.wide) {
this.element.bookmark.classList.add('bookmark-wide'); this.element.bookmark.classList.add('bookmark-wide');
}; }
}; };
@ -440,7 +440,7 @@ const BookmarkTile = function({
if (isValidString(bookmarkData.link.display.visual.letter.text)) { 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.visual.visual.appendChild(this.element.content.display.visual.letter);
this.element.content.display.display.appendChild(this.element.content.display.visual.visual); this.element.content.display.display.appendChild(this.element.content.display.visual.visual);
}; }
break; break;
case 'icon': 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.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.visual.visual.appendChild(this.element.content.display.visual.icon);
this.element.content.display.display.appendChild(this.element.content.display.visual.visual); this.element.content.display.display.appendChild(this.element.content.display.visual.visual);
}; }
break; break;
case 'image': case 'image':
if (isValidString(bookmarkData.link.display.visual.image.url)) { 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.visual.visual.appendChild(this.element.content.display.visual.image);
this.element.content.display.display.appendChild(this.element.content.display.visual.visual); this.element.content.display.display.appendChild(this.element.content.display.visual.visual);
}; }
break; break;
}; }
}; }
if (bookmarkData.link.display.name.show && isValidString(bookmarkData.link.display.name.text)) { 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.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.display.appendChild(this.element.content.display.name.name);
}; }
this.element.content.display.wrap.appendChild(this.element.content.display.display); this.element.content.display.wrap.appendChild(this.element.content.display.display);
this.element.content.link.appendChild(this.element.content.display.wrap); this.element.content.link.appendChild(this.element.content.display.wrap);
}; }
if (bookmarkData.link.background.show) { if (bookmarkData.link.background.show) {
@ -492,14 +492,14 @@ const BookmarkTile = function({
this.element.content.background.video.appendChild(this.video.video); this.element.content.background.video.appendChild(this.video.video);
}; }
break; break;
}; }
this.element.content.link.appendChild(this.element.content.background.wrap); this.element.content.link.appendChild(this.element.content.background.wrap);
}; }
this.element.bookmark.appendChild(this.element.front); this.element.bookmark.appendChild(this.element.front);
@ -521,7 +521,7 @@ const BookmarkTile = function({
if (isValidString(bookmarkData.link.url)) { 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); this.element.url.text.title = trimString(bookmarkData.link.url);
@ -529,13 +529,13 @@ const BookmarkTile = function({
this.element.back.appendChild(this.element.url.url); this.element.back.appendChild(this.element.url.url);
}; }
if (state.get.current().bookmark.edit) { if (state.get.current().bookmark.edit) {
this.control.enable(); this.control.enable();
} else { } else {
this.control.disable(); this.control.disable();
}; }
}; };

32
src/component/button/index.js
View File

@ -6,7 +6,7 @@ import { node } from '../../utility/node';
import './index.css'; import './index.css';
export const Button = function({ export const Button = function ({
text = 'Button', text = 'Button',
srOnly = false, srOnly = false,
iconName = false, iconName = false,
@ -26,10 +26,10 @@ export const Button = function({
if (srOnly) { if (srOnly) {
buttonText.classList.add('sr-only'); buttonText.classList.add('sr-only');
}; }
this.button.appendChild(buttonText); this.button.appendChild(buttonText);
}; }
if (iconName) { if (iconName) {
@ -44,13 +44,13 @@ export const Button = function({
this.button.prepend(icon.render(iconName)); this.button.prepend(icon.render(iconName));
break; break;
}; }
}; }
if (block) { if (block) {
this.button.classList.add('button-block'); this.button.classList.add('button-block');
}; }
switch (size) { switch (size) {
case 'small': case 'small':
@ -60,23 +60,23 @@ export const Button = function({
case 'large': case 'large':
this.button.classList.add('button-large'); this.button.classList.add('button-large');
break; break;
}; }
if (title) { if (title) {
this.button.setAttribute('title', title); this.button.setAttribute('title', title);
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
this.button.classList.add(item); this.button.classList.add(item);
}); });
}; }
if (func) { if (func) {
this.button.addEventListener('click', (event) => { this.button.addEventListener('click', () => {
func(); func();
}); });
}; }
this.style = {}; this.style = {};
@ -85,7 +85,7 @@ export const Button = function({
if (style) { if (style) {
if (style.length > 0) { if (style.length > 0) {
style.forEach((item, i) => { style.forEach((item) => {
switch (item) { switch (item) {
case 'link': case 'link':
this.button.classList.add('button-link'); this.button.classList.add('button-link');
@ -98,11 +98,11 @@ export const Button = function({
case 'ring': case 'ring':
this.button.classList.add('button-ring'); this.button.classList.add('button-ring');
break; break;
}; }
}); });
}; }
}; }
}; };

53
src/component/clock/index.js
View File

@ -1,7 +1,6 @@
import { state } from '../state'; import { state } from '../state';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { ordinalWord } from '../../utility/ordinalWord';
import { wordNumber } from '../../utility/wordNumber'; import { wordNumber } from '../../utility/wordNumber';
import { trimString } from '../../utility/trimString'; import { trimString } from '../../utility/trimString';
import { isValidString } from '../../utility/isValidString'; import { isValidString } from '../../utility/isValidString';
@ -12,7 +11,7 @@ import moment from 'moment';
import './index.css'; import './index.css';
export const Clock = function({} = {}) { export const Clock = function () {
this.now; this.now;
@ -48,17 +47,17 @@ export const Clock = function({} = {}) {
if (!state.get.current().header.clock.hour24.show && this.now.hours() > 12) { if (!state.get.current().header.clock.hour24.show && this.now.hours() > 12) {
value = value - 12; value = value - 12;
}; }
if (!state.get.current().header.clock.hour24.show && this.now.hours() == 0) { if (!state.get.current().header.clock.hour24.show && this.now.hours() == 0) {
value = 12; value = 12;
}; }
value = wordNumber(value); value = wordNumber(value);
if (state.get.current().header.clock.hour24.show && this.now.hours() > 0 && this.now.hours() < 10) { if (state.get.current().header.clock.hour24.show && this.now.hours() > 0 && this.now.hours() < 10) {
value = 'Zero ' + value; value = 'Zero ' + value;
}; }
break; break;
@ -68,19 +67,19 @@ export const Clock = function({} = {}) {
if (!state.get.current().header.clock.hour24.show && this.now.hours() > 12) { if (!state.get.current().header.clock.hour24.show && this.now.hours() > 12) {
value = value - 12; value = value - 12;
}; }
if (!state.get.current().header.clock.hour24.show && this.now.hours() == 0) { if (!state.get.current().header.clock.hour24.show && this.now.hours() == 0) {
value = 12; value = 12;
}; }
if (state.get.current().header.clock.hour24.show && this.now.hours() < 10) { if (state.get.current().header.clock.hour24.show && this.now.hours() < 10) {
value = '0' + value; value = '0' + value;
}; }
break; break;
}; }
return value; return value;
@ -98,7 +97,7 @@ export const Clock = function({} = {}) {
if (this.now.minutes() > 0 && this.now.minutes() < 10) { if (this.now.minutes() > 0 && this.now.minutes() < 10) {
value = 'Zero ' + value; value = 'Zero ' + value;
}; }
break; break;
@ -108,11 +107,11 @@ export const Clock = function({} = {}) {
if (this.now.minutes() < 10) { if (this.now.minutes() < 10) {
value = '0' + value; value = '0' + value;
}; }
break; break;
}; }
return value; return value;
@ -130,7 +129,7 @@ export const Clock = function({} = {}) {
if (this.now.seconds() > 0 && this.now.seconds() < 10) { if (this.now.seconds() > 0 && this.now.seconds() < 10) {
value = 'Zero ' + value; value = 'Zero ' + value;
}; }
break; break;
@ -140,11 +139,11 @@ export const Clock = function({} = {}) {
if (this.now.seconds() < 10) { if (this.now.seconds() < 10) {
value = '0' + value; value = '0' + value;
}; }
break; break;
}; }
return value; return value;
@ -162,19 +161,19 @@ export const Clock = function({} = {}) {
if (state.get.current().header.clock.hour.show) { if (state.get.current().header.clock.hour.show) {
this.element.clock.appendChild(this.element.hour); this.element.clock.appendChild(this.element.hour);
}; }
if (state.get.current().header.clock.minute.show) { if (state.get.current().header.clock.minute.show) {
this.element.clock.appendChild(this.element.minute); this.element.clock.appendChild(this.element.minute);
}; }
if (state.get.current().header.clock.second.show) { if (state.get.current().header.clock.second.show) {
this.element.clock.appendChild(this.element.second); this.element.clock.appendChild(this.element.second);
}; }
if (!state.get.current().header.clock.hour24.show && state.get.current().header.clock.meridiem.show) { if (!state.get.current().header.clock.hour24.show && state.get.current().header.clock.meridiem.show) {
this.element.clock.appendChild(this.element.meridiem); this.element.clock.appendChild(this.element.meridiem);
}; }
if (state.get.current().header.clock.separator.show) { 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); separatorCharacter = trimString(state.get.current().header.clock.separator.text);
} else { } else {
separatorCharacter = ':'; separatorCharacter = ':';
}; }
let parts = this.element.clock.querySelectorAll('span'); let parts = this.element.clock.querySelectorAll('span');
@ -205,12 +204,12 @@ export const Clock = function({} = {}) {
this.element.clock.insertBefore(separator, item); this.element.clock.insertBefore(separator, item);
}; }
}); });
}; }
}; }
}; };
@ -222,19 +221,19 @@ export const Clock = function({} = {}) {
if (state.get.current().header.clock.hour.show) { if (state.get.current().header.clock.hour.show) {
this.element.hour.innerHTML = this.string.hour(); this.element.hour.innerHTML = this.string.hour();
}; }
if (state.get.current().header.clock.minute.show) { if (state.get.current().header.clock.minute.show) {
this.element.minute.innerHTML = this.string.minute(); this.element.minute.innerHTML = this.string.minute();
}; }
if (state.get.current().header.clock.second.show) { if (state.get.current().header.clock.second.show) {
this.element.second.innerHTML = this.string.second(); this.element.second.innerHTML = this.string.second();
}; }
if (!state.get.current().header.clock.hour24.show && state.get.current().header.clock.meridiem.show) { if (!state.get.current().header.clock.hour24.show && state.get.current().header.clock.meridiem.show) {
this.element.meridiem.innerHTML = this.string.meridiem(); this.element.meridiem.innerHTML = this.string.meridiem();
}; }
}; };

37
src/component/collapse/index.js
View File

@ -1,19 +1,16 @@
import { form } from '../form';
import { icon } from '../icon';
import { complexNode } from '../../utility/complexNode';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import './index.css'; import './index.css';
export const Collapse = function({ export const Collapse = function ({
type = false, type = false,
radioGroup = false, radioGroup = false,
checkbox = false, checkbox = false,
target = false target = false
} = {}) { } = {}) {
target.forEach((item, i) => { target.forEach((item) => {
item.state = { item.state = {
collapsed: true collapsed: true
}; };
@ -32,7 +29,7 @@ export const Collapse = function({
}; };
this.collapse = () => { this.collapse = () => {
target.forEach((item, i) => { target.forEach((item) => {
item.spacer.appendChild(item.content); item.spacer.appendChild(item.content);
item.area.appendChild(item.spacer); item.area.appendChild(item.spacer);
@ -44,12 +41,12 @@ export const Collapse = function({
}; };
this.toggle = () => { this.toggle = () => {
target.forEach((item, i) => { target.forEach((item) => {
if (item.state.collapsed) { if (item.state.collapsed) {
item.state.collapsed = false; item.state.collapsed = false;
} else { } else {
item.state.collapsed = true; item.state.collapsed = true;
}; }
}); });
this.update(); this.update();
@ -64,7 +61,7 @@ export const Collapse = function({
area.classList.remove('is-collapsed'); area.classList.remove('is-collapsed');
// area.classList.add('is-pop'); // area.classList.add('is-pop');
area.removeAttribute('aria-hidden'); area.removeAttribute('aria-hidden');
}; }
}; };
this.renderToggle = (state, toggle) => { this.renderToggle = (state, toggle) => {
@ -74,25 +71,24 @@ export const Collapse = function({
} else { } else {
toggle.classList.add('active'); toggle.classList.add('active');
toggle.classList.add('is-collapsed'); toggle.classList.add('is-collapsed');
}; }
}; };
this.update = () => { this.update = () => {
switch (type) { switch (type) {
case 'radio': case 'radio': {
const selectedRadioValue = radioGroup.value(); const selectedRadioValue = radioGroup.value();
target.forEach((item, i) => { target.forEach((item) => {
this.renderTarget(!(item.id === selectedRadioValue), item.area); this.renderTarget(!(item.id === selectedRadioValue), item.area);
}); });
break; break;
}
case 'checkbox': case 'checkbox': {
let state = true; let state = true;
if (checkbox.length > 1) { if (checkbox.length > 1) {
@ -107,29 +103,30 @@ export const Collapse = function({
state = checkbox.checked(); state = checkbox.checked();
}; }
target.forEach((item, i) => { target.forEach((item) => {
this.renderTarget(!state, item.area); this.renderTarget(!state, item.area);
}); });
break; break;
}
case 'toggle': case 'toggle':
target.forEach((item, i) => { target.forEach((item) => {
this.renderTarget(item.state.collapsed, item.area); this.renderTarget(item.state.collapsed, item.area);
if (item.toggle) { if (item.toggle) {
this.renderToggle(item.state.collapsed, item.toggle); this.renderToggle(item.state.collapsed, item.toggle);
}; }
}); });
break; break;
}; }
}; };

19
src/component/control/checkbox/index.js
View File

@ -1,28 +1,21 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
export const Control_checkbox = function({ export const Control_checkbox = function ({
object = {}, object = {},
id = 'name', id = 'name',
path = false, path = false,
labelText = 'name', labelText = 'name',
description = false, description = false,
action = false, action = false,
inputButton = false, //FIXME deprecated properties
inputHide = false, inputButton = false, //eslint-disable-line
inputButtonStyle = false inputHide = false, //eslint-disable-line
inputButtonStyle = false //eslint-disable-line
} = {}) { } = {}) {
this.checkbox = form.input.checkbox({ this.checkbox = form.input.checkbox({
@ -32,7 +25,7 @@ export const Control_checkbox = function({
set({ object: object, path: path, value: this.checkbox.checked }); set({ object: object, path: path, value: this.checkbox.checked });
if (action) { action(); }; if (action) { action(); }
} }
}); });

43
src/component/control/color/index.js
View File

@ -1,26 +1,21 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button'; import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor'; import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
import { randomNumber } from '../../../utility/randomNumber'; import { randomNumber } from '../../../utility/randomNumber';
export const Control_color = function({ export const Control_color = function ({
object = {}, object = {},
path = false, path = false,
id = 'name', id = 'name',
labelText = 'Name', labelText = 'Name',
srOnly = false, srOnly = false,
value = '#000000', //FIXME deprecated property
value = '#000000', //eslint-disable-line
defaultValue = false, defaultValue = false,
action = false, action = false,
randomColor = 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' })); 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) }); set({ object: object, path: path + '.rgb', value: convertColor.hex.rgb(this.text.value) });
}; }
if (action) { action(); }; if (action) { action(); }
this.update({ delay: true }); this.update({ delay: true });
@ -99,7 +94,7 @@ export const Control_color = function({
this.update({ all: true }); this.update({ all: true });
if (action) { action(); }; if (action) { action(); }
} }
}); });
@ -125,7 +120,7 @@ export const Control_color = function({
this.update({ all: true }); this.update({ all: true });
if (action) { action(); }; if (action) { action(); }
} }
}); });
@ -149,7 +144,7 @@ export const Control_color = function({
object: object, object: object,
path: path + '.rgb' path: path + '.rgb'
})); }));
}; }
}; };
@ -158,7 +153,7 @@ export const Control_color = function({
this.delayedUpdate = setTimeout(updateControl, 2000); this.delayedUpdate = setTimeout(updateControl, 2000);
} else { } else {
updateControl(); updateControl();
}; }
}; };
@ -174,17 +169,17 @@ export const Control_color = function({
if (randomColor) { if (randomColor) {
formGroup.appendChild(this.random.button); formGroup.appendChild(this.random.button);
}; }
if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) { if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) {
formGroup.appendChild(this.reset.button); formGroup.appendChild(this.reset.button);
}; }
if (extraButtons.length > 0) { if (extraButtons.length > 0) {
extraButtons.forEach((item, i) => { extraButtons.forEach((item) => {
formGroup.appendChild(item.button); formGroup.appendChild(item.button);
}); });
}; }
const wrap = form.wrap({ const wrap = form.wrap({
children: [ children: [
@ -205,10 +200,10 @@ export const Control_color = function({
this.reset.disable(); this.reset.disable();
if (extraButtons.length > 0) { if (extraButtons.length > 0) {
extraButtons.forEach((item, i) => { extraButtons.forEach((item) => {
item.disable(); item.disable();
}); });
}; }
}; };
this.enable = () => { this.enable = () => {
@ -219,10 +214,10 @@ export const Control_color = function({
this.reset.enable(); this.reset.enable();
if (extraButtons.length > 0) { if (extraButtons.length > 0) {
extraButtons.forEach((item, i) => { extraButtons.forEach((item) => {
item.enable(); item.enable();
}); });
}; }
}; };
}; };

28
src/component/control/colorMixer/index.js
View File

@ -1,6 +1,3 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
@ -11,12 +8,11 @@ import { node } from '../../../utility/node';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor'; import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
import { Control_color } from '../color'; import { Control_color } from '../color';
import { Control_sliderSlim } from '../sliderSlim'; import { Control_sliderSlim } from '../sliderSlim';
export const Control_colorMixer = function({ export const Control_colorMixer = function ({
object = {}, object = {},
path = false, path = false,
defaultValue = false, defaultValue = false,
@ -64,7 +60,7 @@ export const Control_colorMixer = function({
this.colorSliderL.update(); this.colorSliderL.update();
if (action) { if (action) {
action(); action();
}; }
} }
}); });
@ -90,7 +86,7 @@ export const Control_colorMixer = function({
this.colorSliderL.update(); this.colorSliderL.update();
if (action) { if (action) {
action(); action();
}; }
} }
}); });
@ -116,7 +112,7 @@ export const Control_colorMixer = function({
this.colorSliderL.update(); this.colorSliderL.update();
if (action) { if (action) {
action(); action();
}; }
} }
}); });
@ -142,7 +138,7 @@ export const Control_colorMixer = function({
this.colorSliderS.update(); this.colorSliderS.update();
if (action) { if (action) {
action(); action();
}; }
} }
}); });
@ -168,7 +164,7 @@ export const Control_colorMixer = function({
this.colorSliderL.update(); this.colorSliderL.update();
if (action) { if (action) {
action(); action();
}; }
} }
}); });
@ -194,7 +190,7 @@ export const Control_colorMixer = function({
this.colorSliderL.update(); this.colorSliderL.update();
if (action) { if (action) {
action(); action();
}; }
} }
}); });
@ -220,7 +216,7 @@ export const Control_colorMixer = function({
this.colorSliderL.update(); this.colorSliderL.update();
if (action) { if (action) {
action(); action();
}; }
} }
}); });
@ -255,7 +251,7 @@ export const Control_colorMixer = function({
] ]
}) })
] ]
}) });
}; };
this.disable = () => { this.disable = () => {
@ -270,7 +266,7 @@ export const Control_colorMixer = function({
this.colorSliderB.disable(); this.colorSliderB.disable();
} else { } else {
this.moreControlsUpdate(); this.moreControlsUpdate();
}; }
}; };
this.enable = () => { this.enable = () => {
@ -285,7 +281,7 @@ export const Control_colorMixer = function({
this.colorSliderB.enable(); this.colorSliderB.enable();
} else { } else {
this.moreControlsUpdate(); this.moreControlsUpdate();
}; }
}; };
this.moreControlsUpdate = () => { this.moreControlsUpdate = () => {
@ -304,7 +300,7 @@ export const Control_colorMixer = function({
this.colorSliderR.enable(); this.colorSliderR.enable();
this.colorSliderG.enable(); this.colorSliderG.enable();
this.colorSliderB.enable(); this.colorSliderB.enable();
}; }
}; };

15
src/component/control/groupText/index.js
View File

@ -1,20 +1,11 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; 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 { isValidString } from '../../../utility/isValidString';
import { clearChildNode } from '../../../utility/clearChildNode'; import { clearChildNode } from '../../../utility/clearChildNode';
export const Control_groupText = function({ export const Control_groupText = function ({
text = false, text = false,
classList = [] classList = []
} = {}) { } = {}) {
@ -32,7 +23,7 @@ export const Control_groupText = function({
this.groupText.textContent = content; this.groupText.textContent = content;
} else if (content && content != '') { } else if (content && content != '') {
this.groupText.appendChild(content); this.groupText.appendChild(content);
}; }
}; };
this.wrap = () => { this.wrap = () => {
@ -40,7 +31,7 @@ export const Control_groupText = function({
children: [ children: [
this.groupText this.groupText
] ]
}) });
}; };
this.disable = () => { this.disable = () => {

22
src/component/control/helperText/index.js
View File

@ -1,26 +1,16 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; 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({ export const Control_helperText = function ({
text = [], text = [],
complexText= false complexText = false
} = {}) { } = {}) {
this.para = []; this.para = [];
text.forEach((item, i) => { text.forEach((item) => {
this.para.push(form.helper({ this.para.push(form.helper({
tag: 'p', tag: 'p',
text: item, text: item,
@ -31,7 +21,7 @@ export const Control_helperText = function({
this.wrap = () => { this.wrap = () => {
const formWrap = form.wrap(); const formWrap = form.wrap();
this.para.forEach((item, i) => { this.para.forEach((item) => {
formWrap.appendChild(item); formWrap.appendChild(item);
}); });
@ -39,13 +29,13 @@ export const Control_helperText = function({
}; };
this.disable = () => { this.disable = () => {
this.para.forEach((item, i) => { this.para.forEach((item) => {
item.classList.add('disabled'); item.classList.add('disabled');
}); });
}; };
this.enable = () => { this.enable = () => {
this.para.forEach((item, i) => { this.para.forEach((item) => {
item.classList.remove('disabled'); item.classList.remove('disabled');
}); });
}; };

3
src/component/control/index.js
View File

@ -8,6 +8,7 @@ import { Control_radio } from './radio';
import { Control_radioGrid } from './radioGrid'; import { Control_radioGrid } from './radioGrid';
import { Control_slider } from './slider'; import { Control_slider } from './slider';
import { Control_sliderSlim } from './sliderSlim'; import { Control_sliderSlim } from './sliderSlim';
import { Control_sliderDouble } from './sliderDouble';
import { Control_text } from './text'; import { Control_text } from './text';
import { Control_select } from './select'; import { Control_select } from './select';
@ -23,6 +24,6 @@ export {
Control_slider, Control_slider,
Control_sliderSlim, Control_sliderSlim,
Control_sliderDouble, Control_sliderDouble,
Control_text Control_text,
Control_select Control_select
}; };

33
src/component/control/inputButton/index.js
View File

@ -1,19 +1,12 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor'; import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
export const Control_inputButton = function({ export const Control_inputButton = function ({
object = {}, object = {},
path = false, path = false,
id = 'name', id = 'name',
@ -36,7 +29,7 @@ export const Control_inputButton = function({
func: () => { func: () => {
if (action) { if (action) {
action(); action();
}; }
} }
}); });
@ -65,16 +58,16 @@ export const Control_inputButton = function({
path: path + '.rgb' path: path + '.rgb'
})) }))
}); });
}; }
if (action) { if (action) {
action(); action();
}; }
} }
}); });
break; break;
}; }
this.label = form.label({ this.label = form.label({
text: labelText, text: labelText,
@ -94,7 +87,7 @@ export const Control_inputButton = function({
if (inputButtonStyle) { if (inputButtonStyle) {
if (inputButtonStyle.length > 0) { if (inputButtonStyle.length > 0) {
inputButtonStyle.forEach((item, i) => { inputButtonStyle.forEach((item) => {
switch (item) { switch (item) {
case 'link': case 'link':
@ -112,12 +105,12 @@ export const Control_inputButton = function({
case 'dot': case 'dot':
this.button.classList.add('input-color-dot'); this.button.classList.add('input-color-dot');
break; break;
}; }
}); });
}; }
}; }
}; };
@ -145,11 +138,11 @@ export const Control_inputButton = function({
if (inputButtonClassList.length > 0) { if (inputButtonClassList.length > 0) {
inputButtonClassList.forEach((item, i) => { inputButtonClassList.forEach((item) => {
this.button.classList.add(item); this.button.classList.add(item);
}); });
}; }
this.button.appendChild(this.input); this.button.appendChild(this.input);
@ -164,7 +157,7 @@ export const Control_inputButton = function({
})); }));
break; break;
}; }
}; };
this.wrap = () => { this.wrap = () => {
@ -172,7 +165,7 @@ export const Control_inputButton = function({
children: [ children: [
this.button this.button
] ]
}) });
}; };
this.disable = () => { this.disable = () => {

45
src/component/control/radio/index.js
View File

@ -1,19 +1,11 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
export const Control_radio = function({ export const Control_radio = function ({
radioGroup = [], radioGroup = [],
object = {}, object = {},
label = false, label = false,
@ -38,10 +30,10 @@ export const Control_radio = function({
text: label, text: label,
noPadding: true noPadding: true
}); });
}; }
if (radioGroup.length > 0) { if (radioGroup.length > 0) {
radioGroup.forEach((item, i) => { radioGroup.forEach((item) => {
const radioAndLabel = { const radioAndLabel = {
radio: form.input.radio({ radio: form.input.radio({
id: item.id, id: item.id,
@ -52,7 +44,7 @@ export const Control_radio = function({
set({ object: object, path: radioGroupPath, value: item.value }); 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.radioSet.push(radioAndLabel);
}); });
}; }
this.value = () => { this.value = () => {
let currentSelectedRadio = false; let currentSelectedRadio = false;
this.radioSet.forEach((item, i) => { this.radioSet.forEach((item) => {
if (item.radio.checked) { if (item.radio.checked) {
currentSelectedRadio = item.radio.value; currentSelectedRadio = item.radio.value;
}; }
}); });
return currentSelectedRadio; return currentSelectedRadio;
@ -115,7 +107,7 @@ export const Control_radio = function({
this.update = () => { this.update = () => {
this.radioSet.forEach((item, i) => { this.radioSet.forEach((item) => {
item.radio.update(); item.radio.update();
}); });
@ -127,9 +119,9 @@ export const Control_radio = function({
if (this.label) { if (this.label) {
wrap.appendChild(form.wrap({ children: [this.label] })); wrap.appendChild(form.wrap({ children: [this.label] }));
}; }
this.radioSet.forEach((item, i) => { this.radioSet.forEach((item) => {
wrap.appendChild( wrap.appendChild(
item.wrap() item.wrap()
); );
@ -140,14 +132,15 @@ export const Control_radio = function({
}; };
this.inputButton = ({ this.inputButton = ({
inputHide = false //FIXME deprecated property
inputHide = false //eslint-disable-line
} = {}) => { } = {}) => {
const wrap = form.wrap(); const wrap = form.wrap();
const group = form.group(); const group = form.group();
this.radioSet.forEach((item, i) => { this.radioSet.forEach((item) => {
group.appendChild( group.appendChild(
item.inputButton() item.inputButton()
); );
@ -166,7 +159,7 @@ export const Control_radio = function({
wrap: true wrap: true
}); });
this.radioSet.forEach((item, i) => { this.radioSet.forEach((item) => {
inline.appendChild( inline.appendChild(
form.wrap({ form.wrap({
children: [ children: [
@ -181,7 +174,7 @@ export const Control_radio = function({
if (this.label) { if (this.label) {
wrap.appendChild(form.wrap({ children: [this.label] })); wrap.appendChild(form.wrap({ children: [this.label] }));
}; }
wrap.appendChild(form.wrap({ children: [inline] })); wrap.appendChild(form.wrap({ children: [inline] }));
@ -190,23 +183,23 @@ export const Control_radio = function({
}; };
this.disable = () => { this.disable = () => {
this.radioSet.forEach((item, i) => { this.radioSet.forEach((item) => {
item.radio.disable(); item.radio.disable();
}); });
if (label) { if (label) {
this.label.classList.add('disabled'); this.label.classList.add('disabled');
}; }
}; };
this.enable = () => { this.enable = () => {
this.radioSet.forEach((item, i) => { this.radioSet.forEach((item) => {
item.radio.enable(); item.radio.enable();
}); });
if (label) { if (label) {
this.label.classList.remove('disabled'); this.label.classList.remove('disabled');
}; }
}; };
}; };

38
src/component/control/radioGrid/index.js
View File

@ -1,19 +1,11 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
export const Control_radioGrid = function({ export const Control_radioGrid = function ({
radioGroup = [], radioGroup = [],
label = false, label = false,
object = {}, object = {},
@ -37,10 +29,10 @@ export const Control_radioGrid = function({
this.label = form.label({ this.label = form.label({
text: label text: label
}); });
}; }
if (radioGroup.length > 0) { if (radioGroup.length > 0) {
radioGroup.forEach((item, i) => { radioGroup.forEach((item) => {
const radioAndLabel = {}; const radioAndLabel = {};
radioAndLabel.position = item.position; radioAndLabel.position = item.position;
@ -54,7 +46,7 @@ export const Control_radioGrid = function({
set({ object: object, path: radioGroupPath, value: item.value }); 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.radioSet.push(radioAndLabel);
}); });
}; }
this.value = () => { this.value = () => {
let currentSelectedRadio = false; let currentSelectedRadio = false;
this.radioSet.forEach((item, i) => { this.radioSet.forEach((item) => {
if (item.radio.checked) { if (item.radio.checked) {
currentSelectedRadio = item.radio.value; currentSelectedRadio = item.radio.value;
}; }
}); });
return currentSelectedRadio; return currentSelectedRadio;
}; };
this.update = () => { this.update = () => {
this.radioSet.forEach((item, i) => { this.radioSet.forEach((item) => {
item.radio.update(); item.radio.update();
}); });
}; };
@ -131,9 +123,9 @@ export const Control_radioGrid = function({
case '2x2': case '2x2':
gridElement.classList.add('form-grid-2x2'); gridElement.classList.add('form-grid-2x2');
break; break;
}; }
this.radioSet.forEach((item, i) => { this.radioSet.forEach((item) => {
const wrap = form.wrap({ const wrap = form.wrap({
children: [ children: [
item.radio, item.radio,
@ -148,7 +140,7 @@ export const Control_radioGrid = function({
if (label) { if (label) {
wrap.appendChild(this.label); wrap.appendChild(this.label);
}; }
wrap.appendChild(gridElement); wrap.appendChild(gridElement);
@ -156,7 +148,7 @@ export const Control_radioGrid = function({
}; };
this.disable = () => { this.disable = () => {
this.radioSet.forEach((item, i) => { this.radioSet.forEach((item) => {
item.radio.disable(); item.radio.disable();
}); });
@ -164,11 +156,11 @@ export const Control_radioGrid = function({
if (label) { if (label) {
this.label.classList.add('disabled'); this.label.classList.add('disabled');
}; }
}; };
this.enable = () => { this.enable = () => {
this.radioSet.forEach((item, i) => { this.radioSet.forEach((item) => {
item.radio.enable(); item.radio.enable();
}); });
@ -176,7 +168,7 @@ export const Control_radioGrid = function({
if (label) { if (label) {
this.label.classList.remove('disabled'); this.label.classList.remove('disabled');
}; }
}; };
}; };

24
src/component/control/select/index.js
View File

@ -1,22 +1,14 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode'; import { complexNode } from '../../../utility/complexNode';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
import { trimString } from '../../../utility/trimString'; import { trimString } from '../../../utility/trimString';
import { clearChildNode } from '../../../utility/clearChildNode'; import { clearChildNode } from '../../../utility/clearChildNode';
export const Control_select = function({ export const Control_select = function ({
option = [], option = [],
selected = 0, selected = 0,
object = {}, object = {},
@ -36,7 +28,7 @@ export const Control_select = function({
set({ object: object, path: path, value: this.select.selectedIndex }); 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) { if (srOnly) {
this.label.classList.add('sr-only') this.label.classList.add('sr-only');
}; }
this.update = () => { this.update = () => {
this.select.selectedIndex = get({ this.select.selectedIndex = get({
@ -64,7 +56,7 @@ export const Control_select = function({
clearChildNode(this.select); clearChildNode(this.select);
option.forEach((item, i) => { option.forEach((item) => {
this.select.appendChild( this.select.appendChild(
complexNode({ complexNode({
@ -81,9 +73,9 @@ export const Control_select = function({
if (selectedIndex || selectedIndex === 0) { if (selectedIndex || selectedIndex === 0) {
this.select.selectedIndex = selectedIndex; this.select.selectedIndex = selectedIndex;
}; }
}; }
}; };
@ -97,7 +89,7 @@ export const Control_select = function({
this.label, this.label,
this.select this.select
] ]
}) });
}; };
this.disable = () => { this.disable = () => {

37
src/component/control/slider/index.js
View File

@ -1,20 +1,13 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button'; import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
import { minMax } from '../../../utility/minMax'; import { minMax } from '../../../utility/minMax';
export const Control_slider = function({ export const Control_slider = function ({
object = {}, object = {},
path = false, path = false,
id = 'name', id = 'name',
@ -58,9 +51,9 @@ export const Control_slider = function({
classList.push('input-range-contrast-spectrum'); classList.push('input-range-contrast-spectrum');
break; break;
}; }
}; }
this.range = form.input.range({ this.range = form.input.range({
id: id, id: id,
@ -75,11 +68,11 @@ export const Control_slider = function({
set({ object: object, path: path, value: this.value() }); set({ object: object, path: path, value: this.value() });
}; }
if (sliderAction) { sliderAction(); }; if (sliderAction) { sliderAction(); }
if (action) { action(); }; if (action) { action(); }
this.updateNumber(); 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(); this.updateRange();
@ -136,9 +129,9 @@ export const Control_slider = function({
value: JSON.parse(JSON.stringify(defaultValue)) value: JSON.parse(JSON.stringify(defaultValue))
}); });
if (action) { action(); }; if (action) { action(); }
if (resetAction) { resetAction(); }; if (resetAction) { resetAction(); }
this.update(); this.update();
@ -161,7 +154,7 @@ export const Control_slider = function({
} else { } else {
this.delayedAction = null; this.delayedAction = null;
delayedAction(); delayedAction();
}; }
}; };
@ -183,7 +176,7 @@ export const Control_slider = function({
} else { } else {
this.delayedUpdateRange = null; this.delayedUpdateRange = null;
updateControl(); updateControl();
}; }
}; };
@ -201,7 +194,7 @@ export const Control_slider = function({
} else { } else {
this.delayedUpdateNumber = null; this.delayedUpdateNumber = null;
updateControl(); updateControl();
}; }
}; };
@ -228,7 +221,7 @@ export const Control_slider = function({
if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) { if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) {
formGroup.appendChild(this.reset.button); formGroup.appendChild(this.reset.button);
}; }
const formInline = form.inline({ const formInline = form.inline({
block: true, block: true,

37
src/component/control/sliderDouble/index.js
View File

@ -1,21 +1,14 @@
import { state } from '../../state'; import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Control_slider } from '../slider'; import { Control_slider } from '../slider';
import { node } from '../../../utility/node'; import { node } from '../../../utility/node';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; 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({ export const Control_sliderDouble = function ({
object = {}, object = {},
labelText = 'Name', labelText = 'Name',
style = false, style = false,
@ -76,7 +69,7 @@ export const Control_sliderDouble = function({
rightClipPostion = rightClipPostion + 1; rightClipPostion = rightClipPostion + 1;
} else { } else {
rightClipPostion = rightClipPostion - 1; rightClipPostion = rightClipPostion - 1;
}; }
this.element.sliderDouble.style.setProperty('--slider-double-right-clip', rightClipPostion); this.element.sliderDouble.style.setProperty('--slider-double-right-clip', rightClipPostion);
@ -98,12 +91,12 @@ export const Control_sliderDouble = function({
action: () => { action: () => {
if (get({ object: state.get.current(), path: left.path }) > get({ object: state.get.minMax(), path: left.path }).max - 10) { 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) { 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(); this.range.left.updateRange();
@ -113,7 +106,7 @@ export const Control_sliderDouble = function({
if (left.action) { if (left.action) {
left.action(); left.action();
}; }
}, },
focusAction: left.focusAction, focusAction: left.focusAction,
@ -139,12 +132,12 @@ export const Control_sliderDouble = function({
action: () => { action: () => {
if (get({ object: state.get.current(), path: right.path }) < get({ object: state.get.minMax(), path: right.path }).min + 10) { 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) { 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(); this.range.left.update();
@ -154,7 +147,7 @@ export const Control_sliderDouble = function({
if (right.action) { if (right.action) {
right.action(); right.action();
}; }
}, },
focusAction: right.focusAction, focusAction: right.focusAction,
@ -177,7 +170,7 @@ export const Control_sliderDouble = function({
if (left.defaultValue || (typeof left.defaultValue === 'number' && left.defaultValue === 0)) { if (left.defaultValue || (typeof left.defaultValue === 'number' && left.defaultValue === 0)) {
leftNumberReset.prepend(this.range.left.reset.button); leftNumberReset.prepend(this.range.left.reset.button);
}; }
const rightNumberReset = form.group({ const rightNumberReset = form.group({
children: [ children: [
@ -187,7 +180,7 @@ export const Control_sliderDouble = function({
if (right.defaultValue || (typeof right.defaultValue === 'number' && right.defaultValue === 0)) { if (right.defaultValue || (typeof right.defaultValue === 'number' && right.defaultValue === 0)) {
rightNumberReset.appendChild(this.range.right.reset.button); rightNumberReset.appendChild(this.range.right.reset.button);
}; }
const wrap = form.wrap({ const wrap = form.wrap({
children: [ children: [
@ -244,7 +237,7 @@ export const Control_sliderDouble = function({
this.delayedUpdate = setTimeout(updateControl, 2000); this.delayedUpdate = setTimeout(updateControl, 2000);
} else { } else {
updateControl(); updateControl();
}; }
this.rightClip(); this.rightClip();

33
src/component/control/sliderSlim/index.js
View File

@ -1,20 +1,13 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button'; import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
import { minMax } from '../../../utility/minMax'; import { minMax } from '../../../utility/minMax';
export const Control_sliderSlim = function({ export const Control_sliderSlim = function ({
object = {}, object = {},
path = false, path = false,
id = 'name', id = 'name',
@ -39,14 +32,14 @@ export const Control_sliderSlim = function({
forInput: id, forInput: id,
text: labelText, text: labelText,
noPadding: true, noPadding: true,
classList: ['form-group-text', 'form-group-text-left', 'form-group-text-transparent', 'form-group-text-borderless', 'form-group-item-medium', ] classList: ['form-group-text', 'form-group-text-left', 'form-group-text-transparent', 'form-group-text-borderless', 'form-group-item-medium',]
}); });
const classList = ['form-group-item-grow']; const classList = ['form-group-item-grow'];
if (hue) { if (hue) {
classList.push('input-range-hue-spectrum'); classList.push('input-range-hue-spectrum');
}; }
this.range = form.input.range({ this.range = form.input.range({
id: id, id: id,
@ -61,11 +54,11 @@ export const Control_sliderSlim = function({
set({ object: object, path: path, value: this.value() }); 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 }); 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 }); this.update({ delay: true });
@ -122,9 +115,9 @@ export const Control_sliderSlim = function({
this.update(); 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); this.delayedUpdate = setTimeout(updateControl, 2000);
} else { } else {
updateControl(); updateControl();
}; }
}; };
@ -162,7 +155,7 @@ export const Control_sliderSlim = function({
if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) { if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) {
formGroup.appendChild(this.reset.button); formGroup.appendChild(this.reset.button);
}; }
const formInline = form.inline({ const formInline = form.inline({
block: true, block: true,

28
src/component/control/text/index.js
View File

@ -1,19 +1,11 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
export const Control_text = function({ export const Control_text = function ({
object = {}, object = {},
path = false, path = false,
id = 'name', id = 'name',
@ -33,8 +25,8 @@ export const Control_text = function({
}); });
if (srOnly) { if (srOnly) {
this.label.classList.add('sr-only') this.label.classList.add('sr-only');
}; }
this.text = form.input.text({ this.text = form.input.text({
id: id, id: id,
@ -43,28 +35,28 @@ export const Control_text = function({
if (path) { if (path) {
set({ object: object, path: path, value: this.text.value }); set({ object: object, path: path, value: this.text.value });
}; }
if (action) { action(); }; if (action) { action(); }
} }
}); });
if (value) { if (value) {
this.text.value = value; this.text.value = value;
}; }
if (min) { if (min) {
this.text.min = min; this.text.min = min;
}; }
if (max) { if (max) {
this.text.max = max; this.text.max = max;
}; }
if (placeholder) { if (placeholder) {
this.text.placeholder = placeholder; this.text.placeholder = placeholder;
}; }
this.update = () => { this.update = () => {
@ -78,7 +70,7 @@ export const Control_text = function({
this.label, this.label,
this.text this.text
] ]
}) });
}; };
this.disable = () => { this.disable = () => {

27
src/component/control/textReset/index.js
View File

@ -1,19 +1,12 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button'; import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
export const Control_textReset = function({ export const Control_textReset = function ({
object = {}, object = {},
path = false, path = false,
id = 'name', id = 'name',
@ -34,8 +27,8 @@ export const Control_textReset = function({
}); });
if (srOnly) { if (srOnly) {
this.label.classList.add('sr-only') this.label.classList.add('sr-only');
}; }
this.text = form.input.text({ this.text = form.input.text({
id: id, id: id,
@ -47,28 +40,28 @@ export const Control_textReset = function({
path: path, path: path,
value: this.text.value value: this.text.value
}); });
}; }
if (action) { if (action) {
action(); action();
}; }
} }
}); });
if (value) { if (value) {
this.text.value = value; this.text.value = value;
}; }
if (min) { if (min) {
this.text.min = min; this.text.min = min;
}; }
if (max) { if (max) {
this.text.max = max; this.text.max = max;
}; }
if (placeholder) { if (placeholder) {
this.text.placeholder = placeholder; this.text.placeholder = placeholder;
}; }
this.reset = new Button({ this.reset = new Button({
text: false, text: false,
@ -85,7 +78,7 @@ export const Control_textReset = function({
this.update(); this.update();
if (action) { if (action) {
action(); action();
}; }
} }
}); });

28
src/component/control/textarea/index.js
View File

@ -1,19 +1,11 @@
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { get } from '../../../utility/get'; import { get } from '../../../utility/get';
import { set } from '../../../utility/set'; import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
export const Control_textarea = function({ export const Control_textarea = function ({
object = {}, object = {},
path = false, path = false,
id = 'name', id = 'name',
@ -33,8 +25,8 @@ export const Control_textarea = function({
}); });
if (srOnly) { if (srOnly) {
this.label.classList.add('sr-only') this.label.classList.add('sr-only');
}; }
this.textarea = form.input.textarea({ this.textarea = form.input.textarea({
id: id, id: id,
@ -43,28 +35,28 @@ export const Control_textarea = function({
if (path) { if (path) {
set({ object: object, path: path, value: this.textarea.value }); set({ object: object, path: path, value: this.textarea.value });
}; }
if (action) { action(); }; if (action) { action(); }
} }
}); });
if (value) { if (value) {
this.textarea.value = value; this.textarea.value = value;
}; }
if (min) { if (min) {
this.textarea.minLength = min; this.textarea.minLength = min;
}; }
if (max) { if (max) {
this.textarea.maxLength = max; this.textarea.maxLength = max;
}; }
if (placeholder) { if (placeholder) {
this.textarea.placeholder = placeholder; this.textarea.placeholder = placeholder;
}; }
this.update = () => { this.update = () => {
@ -78,7 +70,7 @@ export const Control_textarea = function({
this.label, this.label,
this.textarea this.textarea
] ]
}) });
}; };
this.disable = () => { this.disable = () => {

11
src/component/customTheme/index.js
View File

@ -1,15 +1,12 @@
import { state } from '../state'; import { state } from '../state';
import { data } from '../data'; import { data } from '../data';
import * as form from '../form';
import { Modal } from '../modal'; import { Modal } from '../modal';
import { CustomThemeTile } from '../customThemeTile'; import { CustomThemeTile } from '../customThemeTile';
import { CustomThemeForm } from '../customThemeForm'; import { CustomThemeForm } from '../customThemeForm';
import { StagedCustomTheme } from '../stagedCustomTheme'; import { StagedCustomTheme } from '../stagedCustomTheme';
import { node } from '../../utility/node';
import { clearChildNode } from '../../utility/clearChildNode';
import { applyCSSState } from '../../utility/applyCSSState'; import { applyCSSState } from '../../utility/applyCSSState';
const customTheme = {}; const customTheme = {};
@ -117,7 +114,7 @@ customTheme.edit = {
customTheme.edit.close(); customTheme.edit.close();
} else { } else {
customTheme.edit.open(); customTheme.edit.open();
}; }
}, },
render: () => { render: () => {
@ -125,16 +122,16 @@ customTheme.edit = {
applyCSSState('theme.custom.edit'); applyCSSState('theme.custom.edit');
if (customTheme.tile.current.length > 0) { if (customTheme.tile.current.length > 0) {
customTheme.tile.current.forEach((item, i) => { customTheme.tile.current.forEach((item) => {
if (state.get.current().theme.custom.edit) { if (state.get.current().theme.custom.edit) {
item.control.enable(); item.control.enable();
} else { } else {
item.control.disable(); item.control.disable();
}; }
}); });
}; }
} }
}; };

18
src/component/customThemeForm/index.js
View File

@ -1,29 +1,13 @@
import * as form from '../form';
import { Button } from '../button'; 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_text } from '../control/text';
import { Control_select } from '../control/select';
import { node } from '../../utility/node'; 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 { randomString } from '../../utility/randomString';
import { randomNumber } from '../../utility/randomNumber'; import { randomNumber } from '../../utility/randomNumber';
export const CustomThemeForm = function({ export const CustomThemeForm = function ({
customThemeData = false customThemeData = false
} = {}) { } = {}) {

22
src/component/customThemeTile/index.js
View File

@ -6,7 +6,6 @@ import { toolbar } from '../toolbar';
import { layout } from '../layout'; import { layout } from '../layout';
import { header } from '../header'; import { header } from '../header';
import { bookmark } from '../bookmark'; import { bookmark } from '../bookmark';
import { group } from '../group';
import { groupAndBookmark } from '../groupAndBookmark'; import { groupAndBookmark } from '../groupAndBookmark';
import { customTheme } from '../customTheme'; import { customTheme } from '../customTheme';
import { themeSetting } from '../menuContent/themeSetting'; import { themeSetting } from '../menuContent/themeSetting';
@ -19,7 +18,6 @@ import { StagedCustomTheme } from '../stagedCustomTheme';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { convertColor } from '../../utility/convertColor'; import { convertColor } from '../../utility/convertColor';
import { isValidString } from '../../utility/isValidString'; import { isValidString } from '../../utility/isValidString';
import { complexNode } from '../../utility/complexNode';
import { applyCSSVar } from '../../utility/applyCSSVar'; import { applyCSSVar } from '../../utility/applyCSSVar';
import { applyCSSClass } from '../../utility/applyCSSClass'; import { applyCSSClass } from '../../utility/applyCSSClass';
import { applyCSSState } from '../../utility/applyCSSState'; import { applyCSSState } from '../../utility/applyCSSState';
@ -393,13 +391,13 @@ export const CustomThemeTile = function({
this.control.disable = () => { this.control.disable = () => {
for (var key in this.control.button) { for (var key in this.control.button) {
this.control.button[key].disable(); this.control.button[key].disable();
}; }
}; };
this.control.enable = () => { this.control.enable = () => {
for (var key in this.control.button) { for (var key in this.control.button) {
this.control.button[key].enable(); this.control.button[key].enable();
}; }
}; };
this.previewTile = () => { this.previewTile = () => {
@ -432,13 +430,13 @@ export const CustomThemeTile = function({
darken(); darken();
} else if (window.matchMedia('(prefers-color-scheme:light)').matches) { } else if (window.matchMedia('(prefers-color-scheme:light)').matches) {
lighten(); 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); 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.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%)'); 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')); 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.custom.button.appendChild(this.element.name);
}; }
this.element.front.appendChild(this.element.custom.button); this.element.front.appendChild(this.element.custom.button);
@ -499,7 +497,7 @@ export const CustomThemeTile = function({
this.control.enable(); this.control.enable();
} else { } else {
this.control.disable(); this.control.disable();
}; }
}; };

198
src/component/data/index.js
View File

@ -3,7 +3,7 @@ import { bookmark } from '../bookmark';
import { menu } from '../menu'; import { menu } from '../menu';
import { version } from '../version'; import { version } from '../version';
import { update } from '../update'; import { update } from '../update';
import { appName } from '../appName'; import { APP_NAME } from '../../constant';
import { Modal } from '../modal'; import { Modal } from '../modal';
import { ImportForm } from '../importForm'; import { ImportForm } from '../importForm';
@ -17,11 +17,11 @@ import { clearChildNode } from '../../utility/clearChildNode';
const data = {}; const data = {};
data.set = (key, data) => { data.set = (key, data) => {
localStorage.setItem(key, data); window.localStorage.setItem(key, data);
}; };
data.get = (key) => { data.get = (key) => {
return localStorage.getItem(key); return window.localStorage.getItem(key);
}; };
data.import = { data.import = {
@ -31,7 +31,6 @@ data.import = {
theme: { include: true } theme: { include: true }
}, },
reset: () => { reset: () => {
data.import.state.setup.include = true; data.import.state.setup.include = true;
data.import.state.bookmark.include = true; data.import.state.bookmark.include = true;
@ -39,56 +38,46 @@ data.import = {
data.import.state.bookmark.type = 'restore'; data.import.state.bookmark.type = 'restore';
data.import.state.theme.include = true; data.import.state.theme.include = true;
}, },
file: ({ file: ({
fileList = false, fileList = false,
feedback = false, feedback = false,
input = false input = false
} = {}) => { } = {}) => {
if (fileList.length > 0) { if (fileList.length > 0) {
data.validate.file({ data.validate.file({
fileList: fileList, fileList: fileList,
feedback: feedback, feedback: feedback,
input: input input: input
}); });
}; }
}, },
drop: ({ drop: ({
fileList = false, fileList = false,
feedback = false feedback = false
}) => { }) => {
if (fileList.length > 0) { if (fileList.length > 0) {
data.validate.file({ data.validate.file({
fileList: fileList, fileList: fileList,
feedback: feedback feedback: feedback
}); });
}; }
}, },
paste: ({ paste: ({
clipboardData = false, clipboardData = false,
feedback = false feedback = false
}) => { }) => {
data.validate.paste({ data.validate.paste({
clipboardData: clipboardData, clipboardData: clipboardData,
feedback: feedback feedback: feedback
}); });
}, },
render: (dataToImport) => { render: (dataToImport) => {
let dataToCheck = JSON.parse(dataToImport); let dataToCheck = JSON.parse(dataToImport);
if (dataToCheck.version != version.number) { if (dataToCheck.version !== version.number) {
dataToCheck = data.update(dataToCheck); dataToCheck = data.update(dataToCheck);
}
};
const importForm = new ImportForm({ const importForm = new ImportForm({
dataToImport: dataToCheck, dataToImport: dataToCheck,
@ -96,41 +85,34 @@ data.import = {
}); });
const importModal = new Modal({ const importModal = new Modal({
heading: 'Restoring from a ' + appName + ' backup', heading: 'Restoring from a ' + APP_NAME + ' backup',
content: importForm.form(), content: importForm.form(),
successText: 'Import', successText: 'Import',
width: 'small', width: 'small',
successAction: () => { successAction: () => {
if (data.import.state.setup.include || data.import.state.theme.include || data.import.state.bookmark.include) { if (data.import.state.setup.include || data.import.state.theme.include || data.import.state.bookmark.include) {
let dataToRestore = JSON.parse(dataToImport); let dataToRestore = JSON.parse(dataToImport);
if (dataToRestore.version != version.number) { if (dataToRestore.version !== version.number) {
data.backup(dataToRestore); data.backup(dataToRestore);
dataToRestore = data.update(dataToRestore); dataToRestore = data.update(dataToRestore);
}
};
data.restore(dataToRestore); data.restore(dataToRestore);
data.save(); data.save();
data.reload.render(); data.reload.render();
}
};
data.import.reset(); data.import.reset();
}, },
cancelAction: () => { data.import.reset(); }, cancelAction: () => { data.import.reset(); },
closeAction: () => { data.import.reset(); } closeAction: () => { data.import.reset(); }
}); });
importModal.open(); importModal.open();
} }
}; };
@ -138,94 +120,67 @@ data.validate = {
paste: ({ paste: ({
feedback = false feedback = false
} = {}) => { } = {}) => {
navigator.clipboard.readText().then(clipboardData => { navigator.clipboard.readText().then(clipboardData => {
// is the data a JSON object // is the data a JSON object
if (isJson(clipboardData)) { if (isJson(clipboardData)) {
// is this JSON from this app // 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.clear.render(feedback);
data.feedback.success.render(feedback, 'Clipboard data', () => { data.feedback.success.render(feedback, 'Clipboard data', () => {
menu.close(); menu.close();
data.import.render(clipboardData); data.import.render(clipboardData);
}); });
} else { } else {
data.feedback.clear.render(feedback); data.feedback.clear.render(feedback);
data.feedback.fail.notClipboardJson.render(feedback, 'Clipboard data'); data.feedback.fail.notClipboardJson.render(feedback, 'Clipboard data');
}
};
} else { } else {
// not a JSON object // not a JSON object
data.feedback.clear.render(feedback); data.feedback.clear.render(feedback);
data.feedback.fail.notClipboardJson.render(feedback, 'Clipboard data'); data.feedback.fail.notClipboardJson.render(feedback, 'Clipboard data');
}
}; }).catch(() => {
}).catch(error => {
data.feedback.clear.render(feedback); data.feedback.clear.render(feedback);
data.feedback.fail.notClipboardJson.render(feedback, 'Clipboard data'); data.feedback.fail.notClipboardJson.render(feedback, 'Clipboard data');
}); });
}, },
file: ({ file: ({
fileList = false, fileList = false,
feedback = false, feedback = false,
input = false input = false
} = {}) => { } = {}) => {
// make new file reader // make new file reader
var reader = new FileReader(); const reader = new window.FileReader();
// define the on load event for the reader // define the on load event for the reader
reader.onload = (event) => { reader.onload = (event) => {
// is this a JSON file // is this a JSON file
if (isJson(event.target.result)) { if (isJson(event.target.result)) {
// is this JSON from this app // 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.clear.render(feedback);
data.feedback.success.render(feedback, fileList[0].name, () => { data.feedback.success.render(feedback, fileList[0].name, () => {
menu.close(); menu.close();
data.import.render(event.target.result); data.import.render(event.target.result);
}); });
if (input) { input.value = ''; }; if (input) { input.value = ''; }
} else { } else {
data.feedback.clear.render(feedback); data.feedback.clear.render(feedback);
data.feedback.fail.notAppJson.render(feedback, fileList[0].name); data.feedback.fail.notAppJson.render(feedback, fileList[0].name);
if (input) { input.value = ''; }; if (input) { input.value = ''; }
}
};
} else { } else {
// not a JSON file // not a JSON file
data.feedback.clear.render(feedback); data.feedback.clear.render(feedback);
@ -233,18 +188,13 @@ data.validate = {
data.feedback.fail.notJson.render(feedback, fileList[0].name); data.feedback.fail.notJson.render(feedback, fileList[0].name);
if (input) { if (input) {
input.value = ''; input.value = '';
}
}; }
};
}; };
// invoke the reader // invoke the reader
reader.readAsText(fileList.item(0)); reader.readAsText(fileList.item(0));
} }
}; };
@ -254,7 +204,7 @@ data.export = () => {
const leadingZero = (value) => { const leadingZero = (value) => {
if (value < 10) { if (value < 10) {
value = '0' + value; value = '0' + value;
}; }
return value; return value;
}; };
@ -266,7 +216,7 @@ data.export = () => {
timestamp.year = leadingZero(timestamp.year); timestamp.year = leadingZero(timestamp.year);
timestamp = timestamp.year + '.' + timestamp.month + '.' + timestamp.date + ' - ' + timestamp.hours + ' ' + timestamp.minutes + ' ' + timestamp.seconds; 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())); const dataToExport = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data.load()));
@ -284,55 +234,41 @@ data.export = () => {
}; };
data.remove = (key) => { data.remove = (key) => {
localStorage.removeItem(key); window.localStorage.removeItem(key);
}; };
data.backup = (dataToBackup) => { data.backup = (dataToBackup) => {
if (dataToBackup) { if (dataToBackup) {
data.set(APP_NAME + 'Backup', JSON.stringify(dataToBackup));
data.set(appName + 'Backup', JSON.stringify(dataToBackup));
console.log('data version ' + dataToBackup.version + ' backed up'); console.log('data version ' + dataToBackup.version + ' backed up');
}
};
}; };
data.update = (dataToUpdate) => { data.update = (dataToUpdate) => {
if (dataToUpdate.version !== version.number) {
if (dataToUpdate.version != version.number) {
dataToUpdate = update.run(dataToUpdate); dataToUpdate = update.run(dataToUpdate);
} else { } else {
console.log('data version:', version.number, 'no need to run update'); console.log('data version:', version.number, 'no need to run update');
}
};
return dataToUpdate; return dataToUpdate;
}; };
data.restore = (dataToRestore) => { data.restore = (dataToRestore) => {
if (dataToRestore) { if (dataToRestore) {
console.log('data found to load'); console.log('data found to load');
if (data.import.state.setup.include) { if (data.import.state.setup.include) {
state.set.restore.setup(dataToRestore); state.set.restore.setup(dataToRestore);
}; }
if (data.import.state.theme.include) { if (data.import.state.theme.include) {
state.set.restore.theme(dataToRestore); state.set.restore.theme(dataToRestore);
}; }
if (data.import.state.bookmark.include) { if (data.import.state.bookmark.include) {
switch (data.import.state.bookmark.type) { switch (data.import.state.bookmark.type) {
case 'restore': case 'restore':
bookmark.restore(dataToRestore); bookmark.restore(dataToRestore);
break; break;
@ -340,24 +276,18 @@ data.restore = (dataToRestore) => {
case 'append': case 'append':
bookmark.append(dataToRestore); bookmark.append(dataToRestore);
break; break;
}
}; }
};
} else { } else {
console.log('no data found to load'); console.log('no data found to load');
state.set.default(); state.set.default();
}
};
}; };
data.save = () => { data.save = () => {
data.set(appName, JSON.stringify({ data.set(APP_NAME, JSON.stringify({
[appName]: true, [APP_NAME]: true,
version: version.number, version: version.number,
state: state.get.current(), state: state.get.current(),
bookmark: bookmark.all bookmark: bookmark.all
@ -365,67 +295,54 @@ data.save = () => {
}; };
data.load = () => { 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) { if (dataToLoad.version !== version.number) {
let dataToLoad = JSON.parse(data.get(appName));
if (dataToLoad.version != version.number) {
data.backup(dataToLoad); data.backup(dataToLoad);
dataToLoad = data.update(dataToLoad); dataToLoad = data.update(dataToLoad);
}
};
return dataToLoad; return dataToLoad;
} else { } else {
return false; return false;
}
};
}; };
data.wipe = { data.wipe = {
all: () => { all: () => {
data.remove(APP_NAME);
data.remove(appName);
data.reload.render(); data.reload.render();
}, },
partial: () => { partial: () => {
bookmark.reset(); bookmark.reset();
data.set(appName, JSON.stringify({ data.set(APP_NAME, JSON.stringify({
[appName]: true, [APP_NAME]: true,
version: version.number, version: version.number,
state: state.get.default(), state: state.get.default(),
bookmark: bookmark.all bookmark: bookmark.all
})); }));
data.reload.render(); data.reload.render();
} }
}; };
data.reload = { data.reload = {
render: () => { render: () => {
location.reload(); window.location.reload();
} }
}; };
data.clear = { data.clear = {
all: { all: {
render: () => { render: () => {
const clearModal = new Modal({ const clearModal = new Modal({
heading: 'Clear all ' + appName + ' data?', heading: 'Clear all ' + APP_NAME + ' data?',
content: node('div', [ 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.') node('p:This can not be undone.')
]), ]),
successText: 'Clear all data', successText: 'Clear all data',
@ -436,16 +353,14 @@ data.clear = {
}); });
clearModal.open(); clearModal.open();
} }
}, },
partial: { partial: {
render: () => { render: () => {
const clearModal = new Modal({ const clearModal = new Modal({
heading: 'Clear ' + appName + ' data except bookmarks?', heading: 'Clear ' + APP_NAME + ' data except bookmarks?',
content: node('div', [ 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.') node('p:This can not be undone.')
]), ]),
successText: 'Clear all except bookmarks', successText: 'Clear all except bookmarks',
@ -456,7 +371,6 @@ data.clear = {
}); });
clearModal.open(); clearModal.open();
} }
} }
}; };
@ -477,36 +391,34 @@ data.feedback.clear = {
data.feedback.success = { data.feedback.success = {
render: (feedback, filename, action) => { render: (feedback, filename, action) => {
feedback.appendChild(node('p:Success! Restoring ' + APP_NAME + ' Bookmarks and Settings.|class:muted small'));
feedback.appendChild(node('p:Success! Restoring ' + appName + ' Bookmarks and Settings.|class:muted small'));
feedback.appendChild(node('p:' + filename)); feedback.appendChild(node('p:' + filename));
if (action) { if (action) {
data.feedback.animation.set.render(feedback, 'is-pop', action); data.feedback.animation.set.render(feedback, 'is-pop', action);
}; }
} }
}; };
data.feedback.fail = { data.feedback.fail = {
notJson: { notJson: {
render: (feedback, filename) => { 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 })); feedback.appendChild(complexNode({ tag: 'p', text: filename }));
data.feedback.animation.set.render(feedback, 'is-shake'); data.feedback.animation.set.render(feedback, 'is-shake');
} }
}, },
notAppJson: { notAppJson: {
render: (feedback, filename) => { 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 })); feedback.appendChild(complexNode({ tag: 'p', text: filename }));
data.feedback.animation.set.render(feedback, 'is-shake'); data.feedback.animation.set.render(feedback, 'is-shake');
} }
}, },
notClipboardJson: { notClipboardJson: {
render: (feedback, name) => { 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)); feedback.appendChild(node('p:' + name));
data.feedback.animation.set.render(feedback, 'is-shake'); data.feedback.animation.set.render(feedback, 'is-shake');
} }
@ -521,7 +433,7 @@ data.feedback.animation = {
const animationEndAction = () => { const animationEndAction = () => {
if (action) { if (action) {
action(); action();
}; }
data.feedback.animation.reset.render(feedback); data.feedback.animation.reset.render(feedback);
}; };

60
src/component/date/index.js
View File

@ -12,7 +12,7 @@ import moment from 'moment';
import './index.css'; import './index.css';
export const Date = function({} = {}) { export const Date = function () {
this.now; this.now;
@ -48,7 +48,7 @@ export const Date = function({} = {}) {
if (state.get.current().header.date.day.length == 'short') { if (state.get.current().header.date.day.length == 'short') {
value = value.substring(0, 3); value = value.substring(0, 3);
}; }
break; break;
@ -59,14 +59,14 @@ export const Date = function({} = {}) {
if (state.get.current().header.date.day.weekStart == 'monday') { if (state.get.current().header.date.day.weekStart == 'monday') {
if (value == 0) { if (value == 0) {
value = 7; value = 7;
}; }
} else if (state.get.current().header.date.day.weekStart == 'sunday') { } else if (state.get.current().header.date.day.weekStart == 'sunday') {
value = value + 1; value = value + 1;
}; }
break; break;
}; }
return value; return value;
@ -84,7 +84,7 @@ export const Date = function({} = {}) {
value = ordinalWord(wordNumber(this.now.date())); value = ordinalWord(wordNumber(this.now.date()));
} else { } else {
value = wordNumber(this.now.date()); value = wordNumber(this.now.date());
}; }
break; break;
@ -94,11 +94,11 @@ export const Date = function({} = {}) {
value = this.now.format('Do'); value = this.now.format('Do');
} else { } else {
value = this.now.format('D'); value = this.now.format('D');
}; }
break; break;
}; }
return value; return value;
@ -115,7 +115,7 @@ export const Date = function({} = {}) {
value = this.now.format('MMMM'); value = this.now.format('MMMM');
if (state.get.current().header.date.month.length == 'short') { if (state.get.current().header.date.month.length == 'short') {
value = value.substring(0, 3); value = value.substring(0, 3);
}; }
break; break;
@ -125,11 +125,11 @@ export const Date = function({} = {}) {
value = this.now.format('Mo'); value = this.now.format('Mo');
} else { } else {
value = this.now.format('M'); value = this.now.format('M');
}; }
break; break;
}; }
return value; return value;
@ -153,7 +153,7 @@ export const Date = function({} = {}) {
break; break;
}; }
return value; return value;
@ -165,7 +165,7 @@ export const Date = function({} = {}) {
if (state.get.current().header.date.day.show) { if (state.get.current().header.date.day.show) {
this.element.date.appendChild(this.element.day); this.element.date.appendChild(this.element.day);
}; }
if (state.get.current().header.date.date.show && state.get.current().header.date.month.show) { 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) { if (state.get.current().header.date.date.show) {
this.element.date.appendChild(this.element.dateOfMonth); this.element.date.appendChild(this.element.dateOfMonth);
}; }
if (state.get.current().header.date.month.show) { if (state.get.current().header.date.month.show) {
this.element.date.appendChild(this.element.month); this.element.date.appendChild(this.element.month);
}; }
break; break;
@ -187,31 +187,31 @@ export const Date = function({} = {}) {
if (state.get.current().header.date.month.show) { if (state.get.current().header.date.month.show) {
this.element.date.appendChild(this.element.month); this.element.date.appendChild(this.element.month);
}; }
if (state.get.current().header.date.date.show) { if (state.get.current().header.date.date.show) {
this.element.date.appendChild(this.element.dateOfMonth); this.element.date.appendChild(this.element.dateOfMonth);
}; }
break; break;
}; }
} else { } else {
if (state.get.current().header.date.date.show) { if (state.get.current().header.date.date.show) {
this.element.date.appendChild(this.element.dateOfMonth); this.element.date.appendChild(this.element.dateOfMonth);
}; }
if (state.get.current().header.date.month.show) { if (state.get.current().header.date.month.show) {
this.element.date.appendChild(this.element.month); this.element.date.appendChild(this.element.month);
}; }
}; }
if (state.get.current().header.date.year.show) { if (state.get.current().header.date.year.show) {
this.element.date.appendChild(this.element.year); this.element.date.appendChild(this.element.year);
}; }
if (state.get.current().header.date.separator.show) { 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); separatorCharacter = trimString(state.get.current().header.date.separator.text);
} else { } else {
separatorCharacter = '/'; separatorCharacter = '/';
}; }
let parts = this.element.date.querySelectorAll('span'); let parts = this.element.date.querySelectorAll('span');
@ -241,12 +241,12 @@ export const Date = function({} = {}) {
this.element.date.insertBefore(separator, item); this.element.date.insertBefore(separator, item);
}; }
}); });
}; }
}; }
}; };
@ -258,19 +258,19 @@ export const Date = function({} = {}) {
if (state.get.current().header.date.day.show) { if (state.get.current().header.date.day.show) {
this.element.day.innerHTML = this.string.day(); this.element.day.innerHTML = this.string.day();
}; }
if (state.get.current().header.date.date.show) { if (state.get.current().header.date.date.show) {
this.element.dateOfMonth.innerHTML = this.string.dateOfMonth(); this.element.dateOfMonth.innerHTML = this.string.dateOfMonth();
}; }
if (state.get.current().header.date.month.show) { if (state.get.current().header.date.month.show) {
this.element.month.innerHTML = this.string.month(); this.element.month.innerHTML = this.string.month();
}; }
if (state.get.current().header.date.year.show) { if (state.get.current().header.date.year.show) {
this.element.year.innerHTML = this.string.year(); this.element.year.innerHTML = this.string.year();
}; }
}; };

13
src/component/dropFile/index.js
View File

@ -1,14 +1,11 @@
import { state } from '../state';
import { data } from '../data';
import * as form from '../form'; import * as form from '../form';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { complexNode } from '../../utility/complexNode';
import './index.css'; import './index.css';
export const DropFile = function({ export const DropFile = function ({
heading = 'Drop file here', heading = 'Drop file here',
dropAaction = false, dropAaction = false,
enterAction = false, enterAction = false,
@ -38,7 +35,7 @@ export const DropFile = function({
if (enterAction) { if (enterAction) {
enterAction(); enterAction();
}; }
}); });
@ -51,7 +48,7 @@ export const DropFile = function({
if (leaveAction) { if (leaveAction) {
leaveAction(); leaveAction();
}; }
}); });
@ -75,7 +72,7 @@ export const DropFile = function({
if (dropAaction) { if (dropAaction) {
dropAaction(); dropAaction();
}; }
}); });
@ -90,7 +87,7 @@ export const DropFile = function({
children: [ children: [
this.element.drop this.element.drop
] ]
}) });
}; };
this.assemble(); this.assemble();

27
src/component/dropdown/index.js
View File

@ -1,15 +1,12 @@
import { form } from '../form';
import { icon } from '../icon';
import { Button } from '../button'; import { Button } from '../button';
import { KeyboardShortcut } from '../keyboardShortcut'; import { KeyboardShortcut } from '../keyboardShortcut';
import { complexNode } from '../../utility/complexNode';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import './index.css'; import './index.css';
export const Dropdown = function({ export const Dropdown = function ({
text = 'Dropdown', text = 'Dropdown',
menuItem = [], menuItem = [],
buttonStyle = [], buttonStyle = [],
@ -37,7 +34,7 @@ export const Dropdown = function({
this.close(); this.close();
} else { } else {
this.open(); this.open();
}; }
} }
}) })
@ -74,8 +71,8 @@ export const Dropdown = function({
const body = document.querySelector('body'); const body = document.querySelector('body');
if (body.contains(this.element.menu)) { if (body.contains(this.element.menu)) {
body.removeChild(this.element.menu) body.removeChild(this.element.menu);
}; }
this.bind.remove(); this.bind.remove();
@ -126,15 +123,15 @@ export const Dropdown = function({
this.close(); this.close();
}; }
}; };
this.position = () => { 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(); const dropdownRect = this.element.toggle.button.getBoundingClientRect();
@ -146,7 +143,7 @@ export const Dropdown = function({
menuTop = dropdownRect.top - menuRect.height; menuTop = dropdownRect.top - menuRect.height;
} else { } else {
menuTop = dropdownRect.bottom; menuTop = dropdownRect.bottom;
}; }
let menuLeft = dropdownRect.left + (dropdownRect.width / 2) - (menuRect.width / 2); let menuLeft = dropdownRect.left + (dropdownRect.width / 2) - (menuRect.width / 2);
@ -154,7 +151,7 @@ export const Dropdown = function({
menuLeft = 0; menuLeft = 0;
} else if ((menuLeft + menuRect.width) > vWidth) { } else if ((menuLeft + menuRect.width) > vWidth) {
menuLeft = vWidth - menuRect.width; menuLeft = vWidth - menuRect.width;
}; }
this.element.menu.style.setProperty('--dropdown-menu-top', menuTop); this.element.menu.style.setProperty('--dropdown-menu-top', menuTop);
@ -166,7 +163,7 @@ export const Dropdown = function({
if (menuItem.length > 0) { if (menuItem.length > 0) {
menuItem.forEach((item, i) => { menuItem.forEach((item) => {
const dropdownMenuButton = new Button({ const dropdownMenuButton = new Button({
text: item.text, text: item.text,
@ -178,7 +175,7 @@ export const Dropdown = function({
if (item.action()) { if (item.action()) {
item.action(); item.action();
}; }
this.close(); this.close();
@ -190,7 +187,7 @@ export const Dropdown = function({
this.element.menu.appendChild(this.element.content); this.element.menu.appendChild(this.element.content);
}; }
}; };

4
src/component/easterEgg/index.js
View File

@ -1,5 +1,4 @@
import { data } from '../data'; import { data } from '../data';
import { state } from '../state';
import { menu } from '../menu'; import { menu } from '../menu';
import { bookmark } from '../bookmark'; import { bookmark } from '../bookmark';
import { group } from '../group'; import { group } from '../group';
@ -8,7 +7,6 @@ import { groupAndBookmark } from '../groupAndBookmark';
import { StagedBookmark } from '../stagedBookmark'; import { StagedBookmark } from '../stagedBookmark';
import { StagedGroup } from '../stagedGroup'; import { StagedGroup } from '../stagedGroup';
import { node } from '../../utility/node';
import { randomNumber } from '../../utility/randomNumber'; import { randomNumber } from '../../utility/randomNumber';
import { convertColor } from '../../utility/convertColor'; import { convertColor } from '../../utility/convertColor';
@ -30,7 +28,7 @@ easterEgg.toaster.render = () => {
group.item.mod.add(newGroupData); group.item.mod.add(newGroupData);
}; }
const newBookmarkData = new StagedBookmark(); const newBookmarkData = new StagedBookmark();

39
src/component/edge/index.js
View File

@ -4,7 +4,7 @@ import { node } from '../../utility/node';
import './index.css'; import './index.css';
export const Edge = function({ export const Edge = function ({
primary = false, primary = false,
secondary = false, secondary = false,
padding = 0 padding = 0
@ -40,7 +40,7 @@ export const Edge = function({
} }
}; };
this.assemble = (edge) => { this.assemble = () => {
this.element.edge.primary = node('div|class:edge is-transparent'); 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'); this.element.edge.primary.classList.remove('is-edge-opening');
}; }
if (event.propertyName === 'opacity' && getComputedStyle(this.element.edge.primary).opacity == 0) { if (event.propertyName === 'opacity' && getComputedStyle(this.element.edge.primary).opacity == 0) {
if (this.element.edge.primary.parentElement.contains(this.element.edge.primary)) { 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.parentElement.removeChild(this.element.edge.primary);
}; }
this.element.edge.primary.removeAttribute('style'); this.element.edge.primary.removeAttribute('style');
@ -66,7 +66,7 @@ export const Edge = function({
this.bind.remove(); this.bind.remove();
}; }
}); });
@ -74,11 +74,11 @@ export const Edge = function({
if (secondary.length > 0) { 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.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) => { item.addEventListener('transitionend', (event) => {
@ -86,25 +86,25 @@ export const Edge = function({
item.classList.remove('is-edge-opening'); item.classList.remove('is-edge-opening');
}; }
if (event.propertyName === 'opacity' && getComputedStyle(item).opacity == 0) { if (event.propertyName === 'opacity' && getComputedStyle(item).opacity == 0) {
if (item.parentElement.contains(item)) { if (item.parentElement.contains(item)) {
item.parentElement.removeChild(item); item.parentElement.removeChild(item);
}; }
item.removeAttribute('style'); item.removeAttribute('style');
item.classList.remove('is-edge-opening'); item.classList.remove('is-edge-opening');
}; }
}); });
}); });
}; }
}; };
@ -116,7 +116,7 @@ export const Edge = function({
if (this.element.edge.secondary.length > 0) { 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'); item.classList.remove('is-opaque');
@ -124,14 +124,11 @@ export const Edge = function({
}); });
}; }
}; };
this.appear = (edge) => { this.appear = (edge) => {
const html = document.querySelector('html');
const body = document.querySelector('body'); const body = document.querySelector('body');
body.appendChild(edge); body.appendChild(edge);
@ -168,11 +165,11 @@ export const Edge = function({
this.appear(this.element.edge.secondary[i]); this.appear(this.element.edge.secondary[i]);
}; }
}); });
}; }
this.track(); this.track();
@ -230,7 +227,7 @@ export const Edge = function({
this.style(item, this.element.edge.secondary[i]); this.style(item, this.element.edge.secondary[i]);
}); });
}; }
}; };
@ -239,7 +236,7 @@ export const Edge = function({
if (newPrimary) { if (newPrimary) {
primary = newPrimary; primary = newPrimary;
}; }
this.assemble(); this.assemble();
@ -248,7 +245,7 @@ export const Edge = function({
if (newSecondary) { if (newSecondary) {
secondary = newSecondary; secondary = newSecondary;
}; }
this.assemble(); this.assemble();

11948
src/component/fontawesome/index.js
View File

File diff suppressed because it is too large Load Diff

2
src/component/form/feedback/index.js
View File

@ -20,7 +20,7 @@ export const feedback = ({
}); });
feedback.appendChild(feedbackText); feedback.appendChild(feedbackText);
}; }
return feedback; return feedback;

2
src/component/form/fieldset/index.js
View File

@ -2,7 +2,7 @@ import { node } from '../../../utility/node';
import './index.css'; import './index.css';
export const fieldset = function({ export const fieldset = function ({
children = false children = false
} = {}) { } = {}) {

12
src/component/form/group/index.js
View File

@ -2,7 +2,7 @@ import { node } from '../../../utility/node';
import './index.css'; import './index.css';
export const group = function({ export const group = function ({
direction = 'horizontal', direction = 'horizontal',
reverse = false, reverse = false,
block = false, block = false,
@ -21,19 +21,19 @@ export const group = function({
case 'vertical': case 'vertical':
group.classList.add('form-group-vertical'); group.classList.add('form-group-vertical');
break; break;
}; }
if (reverse) { if (reverse) {
group.classList.add('form-group-reverse'); group.classList.add('form-group-reverse');
}; }
if (block) { if (block) {
group.classList.add('form-group-block'); group.classList.add('form-group-block');
}; }
if (border) { if (border) {
group.classList.add('form-group-border'); group.classList.add('form-group-border');
}; }
switch (justify) { switch (justify) {
@ -49,7 +49,7 @@ export const group = function({
group.classList.add('form-group-justify-space-between'); group.classList.add('form-group-justify-space-between');
break; break;
}; }
return group; return group;

6
src/component/form/groupText/index.js
View File

@ -11,15 +11,15 @@ export const groupText = ({
if (text) { if (text) {
textElement.textContent = text; textElement.textContent = text;
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
textElement.classList.add(item); textElement.classList.add(item);
}); });
}; }
return textElement; return textElement;

11
src/component/form/helper/index.js
View File

@ -1,9 +1,8 @@
import { node } from '../../../utility/node'; import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import './index.css'; import './index.css';
export const helper = function({ export const helper = function ({
text = 'text', text = 'text',
complexText = false, complexText = false,
classList = [] classList = []
@ -23,17 +22,17 @@ export const helper = function({
helper.appendChild(textNode); helper.appendChild(textNode);
}; }
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
helper.classList.add(item); helper.classList.add(item);
}); });
}; }
return helper; return helper;

16
src/component/form/inline/index.js
View File

@ -2,7 +2,7 @@ import { node } from '../../../utility/node';
import './index.css'; import './index.css';
export const inline = function({ export const inline = function ({
direction = 'horizontal', direction = 'horizontal',
reverse = false, reverse = false,
block = false, block = false,
@ -23,7 +23,7 @@ export const inline = function({
case 'vertical': case 'vertical':
inline.classList.add('form-inline-vertical'); inline.classList.add('form-inline-vertical');
break; break;
}; }
switch (gap) { switch (gap) {
@ -39,11 +39,11 @@ export const inline = function({
inline.classList.add('form-inline-gap-large'); inline.classList.add('form-inline-gap-large');
break; break;
}; }
if (equalGap) { if (equalGap) {
inline.classList.add('form-inline-gap-equal'); inline.classList.add('form-inline-gap-equal');
}; }
switch (justify) { switch (justify) {
@ -59,19 +59,19 @@ export const inline = function({
inline.classList.add('form-inline-justify-right'); inline.classList.add('form-inline-justify-right');
break; break;
}; }
if (reverse) { if (reverse) {
inline.classList.add('form-inline-reverse'); inline.classList.add('form-inline-reverse');
}; }
if (block) { if (block) {
inline.classList.add('form-inline-block'); inline.classList.add('form-inline-block');
}; }
if (wrap) { if (wrap) {
inline.classList.add('form-inline-wrap'); inline.classList.add('form-inline-wrap');
}; }
return inline; return inline;

14
src/component/form/input/checkbox/index.js
View File

@ -14,31 +14,31 @@ export const checkbox = ({
if (id) { if (id) {
input.setAttribute('id', id); input.setAttribute('id', id);
}; }
if (value) { if (value) {
input.setAttribute('value', value); input.setAttribute('value', value);
}; }
if (checked) { if (checked) {
input.setAttribute('checked', ''); input.setAttribute('checked', '');
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
input.classList.add(item); input.classList.add(item);
}); });
}; }
if (func) { if (func) {
input.addEventListener('change', (event) => { input.addEventListener('change', () => {
func(); func();
}); });
}; }
return input; return input;

12
src/component/form/input/color/index.js
View File

@ -2,7 +2,7 @@ import { node } from '../../../../utility/node';
import './index.css'; import './index.css';
export const color = function({ export const color = function ({
id = false, id = false,
value = '#000000', value = '#000000',
classList = [], classList = [],
@ -13,23 +13,23 @@ export const color = function({
if (id) { if (id) {
input.setAttribute('id', id); input.setAttribute('id', id);
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
input.classList.add(item); input.classList.add(item);
}); });
}; }
if (func) { if (func) {
input.addEventListener('change', (event) => { input.addEventListener('change', () => {
func(); func();
}); });
}; }
return input; return input;

10
src/component/form/input/file/index.js
View File

@ -12,23 +12,23 @@ export const file = ({
if (id) { if (id) {
input.setAttribute('id', id); input.setAttribute('id', id);
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
input.classList.add(item); input.classList.add(item);
}); });
}; }
if (func) { if (func) {
input.addEventListener('change', (event) => { input.addEventListener('change', () => {
func(); func();
}); });
}; }
return input; return input;

12
src/component/form/input/inputButton/index.js
View File

@ -2,7 +2,7 @@ import { node } from '../../../../utility/node';
import './index.css'; import './index.css';
export const inputButton = function({ export const inputButton = function ({
children = false, children = false,
inputHide = false, inputHide = false,
srOnly = false, srOnly = false,
@ -12,7 +12,7 @@ export const inputButton = function({
const inputButtonElement = node('div|class:form-input-button', children); const inputButtonElement = node('div|class:form-input-button', children);
if (style.length > 0) { if (style.length > 0) {
style.forEach((item, i) => { style.forEach((item) => {
switch (item) { switch (item) {
case 'link': case 'link':
inputButtonElement.classList.add('form-input-button-link'); inputButtonElement.classList.add('form-input-button-link');
@ -30,17 +30,17 @@ export const inputButton = function({
inputButtonElement.classList.add('input-color-dot'); inputButtonElement.classList.add('input-color-dot');
break; break;
}; }
}); });
}; }
if (inputHide) { if (inputHide) {
inputButtonElement.classList.add('form-input-hide'); inputButtonElement.classList.add('form-input-hide');
}; }
if (srOnly) { if (srOnly) {
inputButtonElement.classList.add('form-input-button-sr-only'); inputButtonElement.classList.add('form-input-button-sr-only');
}; }
return inputButtonElement; return inputButtonElement;

16
src/component/form/input/number/index.js
View File

@ -15,35 +15,33 @@ export const number = ({
const input = node('input|type:number,min:' + min + ',max:' + max + ',step:' + step + ',tabindex:1'); const input = node('input|type:number,min:' + min + ',max:' + max + ',step:' + step + ',tabindex:1');
let delayUpdate = null;
if (id) { if (id) {
input.setAttribute('id', id); input.setAttribute('id', id);
}; }
if (value || (typeof value === 'number' && value === 0)) { if (value || (typeof value === 'number' && value === 0)) {
input.setAttribute('value', value); input.setAttribute('value', value);
}; }
if (placeholder) { if (placeholder) {
input.setAttribute('placeholder', placeholder); input.setAttribute('placeholder', placeholder);
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
input.classList.add(item); input.classList.add(item);
}); });
}; }
if (func) { if (func) {
input.addEventListener('input', (event) => { input.addEventListener('input', () => {
func(); func();
}); });
}; }
return input; return input;

18
src/component/form/input/radio/index.js
View File

@ -2,7 +2,7 @@ import { node } from '../../../../utility/node';
import './index.css'; import './index.css';
export const radio = function({ export const radio = function ({
id = false, id = false,
radioGroup = false, radioGroup = false,
value = false, value = false,
@ -15,33 +15,33 @@ export const radio = function({
if (id) { if (id) {
input.setAttribute('id', id); input.setAttribute('id', id);
}; }
if (radioGroup) { if (radioGroup) {
input.setAttribute('name', radioGroup); input.setAttribute('name', radioGroup);
}; }
if (value) { if (value) {
input.setAttribute('value', value); input.setAttribute('value', value);
}; }
if (checked) { if (checked) {
input.setAttribute('checked', ''); input.setAttribute('checked', '');
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
input.classList.add(item); input.classList.add(item);
}); });
}; }
if (func) { if (func) {
input.addEventListener('change', (event) => { input.addEventListener('change', () => {
func(); func();
}); });
}; }
return input; return input;

26
src/component/form/input/range/index.js
View File

@ -20,55 +20,55 @@ export const range = ({
if (id) { if (id) {
input.setAttribute('id', id); input.setAttribute('id', id);
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
input.classList.add(item); input.classList.add(item);
}); });
}; }
if (func) { if (func) {
input.addEventListener('input', (event) => { input.addEventListener('input', () => {
func(); func();
}); });
}; }
if (focusFunc) { if (focusFunc) {
input.addEventListener('focus', (event) => { input.addEventListener('focus', () => {
focusFunc(); focusFunc();
}); });
}; }
if (blurFunc) { if (blurFunc) {
input.addEventListener('blur', (event) => { input.addEventListener('blur', () => {
blurFunc(); blurFunc();
}); });
}; }
if (mouseDownFunc) { if (mouseDownFunc) {
input.addEventListener('mousedown', (event) => { input.addEventListener('mousedown', () => {
mouseDownFunc(); mouseDownFunc();
}); });
}; }
if (mouseUpFunc) { if (mouseUpFunc) {
input.addEventListener('mouseup', (event) => { input.addEventListener('mouseup', () => {
mouseUpFunc(); mouseUpFunc();
}); });
}; }
return input; return input;

16
src/component/form/input/select/index.js
View File

@ -4,7 +4,7 @@ import { trimString } from '../../../../utility/trimString';
import './index.css'; import './index.css';
export const select = function({ export const select = function ({
id = false, id = false,
classList = [], classList = [],
option = [], option = [],
@ -16,27 +16,27 @@ export const select = function({
if (id) { if (id) {
select.setAttribute('id', id); select.setAttribute('id', id);
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
select.classList.add(item); select.classList.add(item);
}); });
}; }
if (func) { if (func) {
select.addEventListener('change', (event) => { select.addEventListener('change', () => {
func(); func();
}); });
}; }
if (option.length > 0) { if (option.length > 0) {
option.forEach((item, i) => { option.forEach((item) => {
select.appendChild( select.appendChild(
complexNode({ complexNode({
@ -53,7 +53,7 @@ export const select = function({
select.selectedIndex = selected; select.selectedIndex = selected;
}; }
return select; return select;

18
src/component/form/input/text/index.js
View File

@ -16,39 +16,39 @@ export const text = ({
if (id) { if (id) {
input.setAttribute('id', id); input.setAttribute('id', id);
}; }
if (value) { if (value) {
input.setAttribute('value', value); input.setAttribute('value', value);
}; }
if (typeof min === 'number') { if (typeof min === 'number') {
input.setAttribute('minlength', min); input.setAttribute('minlength', min);
}; }
if (typeof max === 'number') { if (typeof max === 'number') {
input.setAttribute('maxlength', max); input.setAttribute('maxlength', max);
}; }
if (placeholder) { if (placeholder) {
input.setAttribute('placeholder', placeholder); input.setAttribute('placeholder', placeholder);
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
input.classList.add(item); input.classList.add(item);
}); });
}; }
if (func) { if (func) {
input.addEventListener('input', (event) => { input.addEventListener('input', () => {
func(); func();
}); });
}; }
return input; return input;

16
src/component/form/input/textarea/index.js
View File

@ -2,7 +2,7 @@ import { node } from '../../../../utility/node';
import './index.css'; import './index.css';
export const textarea = function({ export const textarea = function ({
id = false, id = false,
value = false, value = false,
placeholder = false, placeholder = false,
@ -14,31 +14,31 @@ export const textarea = function({
if (id) { if (id) {
textarea.setAttribute('id', id); textarea.setAttribute('id', id);
}; }
if (value) { if (value) {
textarea.setAttribute('value', value); textarea.setAttribute('value', value);
}; }
if (placeholder) { if (placeholder) {
textarea.setAttribute('placeholder', placeholder); textarea.setAttribute('placeholder', placeholder);
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
textarea.classList.add(item); textarea.classList.add(item);
}); });
}; }
if (func) { if (func) {
textarea.addEventListener('input', (event) => { textarea.addEventListener('input', () => {
func(); func();
}); });
}; }
return textarea; return textarea;

24
src/component/form/label/index.js
View File

@ -18,11 +18,11 @@ export const label = ({
label = node('label|for:' + forInput); label = node('label|for:' + forInput);
} else { } else {
label = node('label'); label = node('label');
}; }
if (noPadding) { if (noPadding) {
label.classList.add('label-no-padding'); label.classList.add('label-no-padding');
}; }
const labelBlock = node('span|class:label-block'); const labelBlock = node('span|class:label-block');
@ -31,17 +31,17 @@ export const label = ({
labelBlock.classList.add('sr-only'); labelBlock.classList.add('sr-only');
} else { } else {
label.classList.add('sr-only'); label.classList.add('sr-only');
}; }
}; }
if (text) { if (text) {
labelBlock.appendChild(node('span:' + text + '|class:label-block-item')); labelBlock.appendChild(node('span:' + text + '|class:label-block-item'));
}; }
if (description) { if (description) {
if (Array.isArray(description)) { if (Array.isArray(description)) {
description.forEach((item, i) => { description.forEach((item) => {
labelBlock.appendChild(node('span:' + item + '|class:label-block-item small muted')); 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')); labelBlock.appendChild(node('span:' + description + '|class:label-block-item small muted'));
}; }
}; }
if (text || description) { if (text || description) {
label.appendChild(labelBlock); label.appendChild(labelBlock);
}; }
if (icon) { if (icon) {
label.prepend(node('span|class:label-icon')); label.prepend(node('span|class:label-icon'));
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
label.classList.add(item); label.classList.add(item);
}); });
}; }
return label; return label;

2
src/component/form/sticky/index.js
View File

@ -2,7 +2,7 @@ import { node } from '../../../utility/node';
import './index.css'; import './index.css';
export const sticky = function({ export const sticky = function ({
children = false children = false
} = {}) { } = {}) {

13
src/component/greeting/index.js
View File

@ -3,13 +3,12 @@ import { state } from '../state';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { trimString } from '../../utility/trimString'; import { trimString } from '../../utility/trimString';
import { isValidString } from '../../utility/isValidString'; import { isValidString } from '../../utility/isValidString';
import { complexNode } from '../../utility/complexNode';
import moment from 'moment'; import moment from 'moment';
import './index.css'; import './index.css';
export const Greeting = function({} = {}) { export const Greeting = function () {
this.now; this.now;
@ -22,7 +21,7 @@ export const Greeting = function({} = {}) {
if (state.get.current().header.greeting.show) { if (state.get.current().header.greeting.show) {
this.element.greeting.appendChild(this.element.text); this.element.greeting.appendChild(this.element.text);
}; }
}; };
@ -70,11 +69,11 @@ export const Greeting = function({} = {}) {
value = this.message[Math.floor(this.now.hours() / 6)]; value = this.message[Math.floor(this.now.hours() / 6)];
}; }
break; break;
}; }
if (isValidString(state.get.current().header.greeting.name)) { 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); value = value + ', ' + trimString(state.get.current().header.greeting.name);
}; }
}; }
this.element.text.innerHTML = value; this.element.text.innerHTML = value;

25
src/component/group/index.js
View File

@ -3,21 +3,16 @@ import { data } from '../data';
import { layout } from '../layout'; import { layout } from '../layout';
import { bookmark } from '../bookmark'; import { bookmark } from '../bookmark';
import { header } from '../header'; import { header } from '../header';
import { groupDefault } from '../groupDefault';
import { groupAndBookmark } from '../groupAndBookmark'; import { groupAndBookmark } from '../groupAndBookmark';
import { GroupArea } from '../groupArea'; import { GroupArea } from '../groupArea';
import { GroupEmpty } from '../groupEmpty';
import { StagedGroup } from '../stagedGroup'; import { StagedGroup } from '../stagedGroup';
import { GroupForm } from '../groupForm'; import { GroupForm } from '../groupForm';
import { Modal } from '../modal'; import { Modal } from '../modal';
import { SearchEmpty } from '../searchEmpty'; import { SearchEmpty } from '../searchEmpty';
import { BookmarkEmpty } from '../bookmarkEmpty'; import { BookmarkEmpty } from '../bookmarkEmpty';
import { node } from '../../utility/node';
import { clearChildNode } from '../../utility/clearChildNode'; import { clearChildNode } from '../../utility/clearChildNode';
import { isValidString } from '../../utility/isValidString';
import { trimString } from '../../utility/trimString';
import { applyCSSVar } from '../../utility/applyCSSVar'; import { applyCSSVar } from '../../utility/applyCSSVar';
import { applyCSSClass } from '../../utility/applyCSSClass'; import { applyCSSClass } from '../../utility/applyCSSClass';
import { applyCSSState } from '../../utility/applyCSSState'; import { applyCSSState } from '../../utility/applyCSSState';
@ -69,13 +64,13 @@ group.item = {
bookmark.element.group.appendChild(groupArea.group()); bookmark.element.group.appendChild(groupArea.group());
}; }
} else { } else {
bookmark.element.group.appendChild(groupArea.group()); bookmark.element.group.appendChild(groupArea.group());
}; }
}; };
@ -115,7 +110,7 @@ group.item = {
addSearchEmpty(); addSearchEmpty();
}; }
} else { } else {
@ -129,7 +124,7 @@ group.item = {
}); });
}; }
} else { } else {
@ -145,9 +140,9 @@ group.item = {
addBookmarkEmpty(); addBookmarkEmpty();
}; }
}; }
}, },
clear: () => { clear: () => {
@ -180,7 +175,7 @@ group.edit = {
group.edit.close(); group.edit.close();
} else { } else {
group.edit.open(); group.edit.open();
}; }
}, },
render: () => { render: () => {
@ -189,17 +184,17 @@ group.edit = {
if (group.area.current.length > 0) { if (group.area.current.length > 0) {
group.area.current.forEach((item, i) => { group.area.current.forEach((item) => {
if (state.get.current().group.edit) { if (state.get.current().group.edit) {
item.control.enable(); item.control.enable();
} else { } else {
item.control.disable(); item.control.disable();
}; }
}); });
}; }
} }
}; };

9
src/component/groupAndBookmark/index.js
View File

@ -1,4 +1,3 @@
import { data } from '../data';
import { state } from '../state'; import { state } from '../state';
import { bookmark } from '../bookmark'; import { bookmark } from '../bookmark';
import { group } from '../group'; import { group } from '../group';
@ -21,17 +20,17 @@ groupAndBookmark.render = () => {
group.sort.sortable.option('disabled', true); group.sort.sortable.option('disabled', true);
}; }
if (bookmark.sort.sortable.length > 0) { if (bookmark.sort.sortable.length > 0) {
bookmark.sort.sortable.forEach((item, i) => { bookmark.sort.sortable.forEach((item) => {
item.option('disabled', true); item.option('disabled', true);
}); });
}; }
} else { } else {
@ -40,7 +39,7 @@ groupAndBookmark.render = () => {
bookmark.sort.bind(); bookmark.sort.bind();
}; }
}; };

51
src/component/groupArea/index.js
View File

@ -1,6 +1,5 @@
import { state } from '../state'; import { state } from '../state';
import { data } from '../data'; import { data } from '../data';
import { theme } from '../theme';
import { group } from '../group'; import { group } from '../group';
import { layout } from '../layout'; import { layout } from '../layout';
import { bookmark } from '../bookmark'; import { bookmark } from '../bookmark';
@ -12,12 +11,10 @@ import { GroupForm } from '../groupForm';
import { StagedGroup } from '../stagedGroup'; import { StagedGroup } from '../stagedGroup';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { complexNode } from '../../utility/complexNode';
import { isValidString } from '../../utility/isValidString'; import { isValidString } from '../../utility/isValidString';
import { trimString } from '../../utility/trimString';
import { clearChildNode } from '../../utility/clearChildNode'; import { clearChildNode } from '../../utility/clearChildNode';
export const GroupArea = function({ export const GroupArea = function ({
groupData = {} groupData = {}
} = {}) { } = {}) {
@ -57,7 +54,7 @@ export const GroupArea = function({
if (groupData.position.destination < 0) { if (groupData.position.destination < 0) {
groupData.position.destination = 0; groupData.position.destination = 0;
}; }
group.item.mod.move(groupData); group.item.mod.move(groupData);
@ -88,7 +85,7 @@ export const GroupArea = function({
if (groupData.position.destination > bookmark.all.length - 1) { if (groupData.position.destination > bookmark.all.length - 1) {
groupData.position.destination = bookmark.all.length - 1; groupData.position.destination = bookmark.all.length - 1;
}; }
group.item.mod.move(groupData); group.item.mod.move(groupData);
@ -188,7 +185,7 @@ export const GroupArea = function({
if (state.get.current().bookmark.newTab) { if (state.get.current().bookmark.newTab) {
groupData.group.items.forEach((item, i) => { groupData.group.items.forEach((item) => {
chrome.tabs.create({ url: item.url }); chrome.tabs.create({ url: item.url });
}); });
@ -196,15 +193,15 @@ export const GroupArea = function({
const first = groupData.group.items.shift(); const first = groupData.group.items.shift();
groupData.group.items.forEach((item, i) => { groupData.group.items.forEach((item) => {
chrome.tabs.create({ url: item.url }); chrome.tabs.create({ url: item.url });
}); });
window.location.href = first.url; window.location.href = first.url;
}; }
}; }
} }
}; };
@ -230,12 +227,12 @@ export const GroupArea = function({
groupData.group.collapse = false; groupData.group.collapse = false;
} else { } else {
groupData.group.collapse = true; groupData.group.collapse = true;
}; }
}, },
video: () => { video: () => {
bookmark.tile.current.forEach((item, i) => { bookmark.tile.current.forEach((item) => {
if (item.data.position.origin.group === groupData.position.origin) { if (item.data.position.origin.group === groupData.position.origin) {
if (item.video) { if (item.video) {
@ -243,9 +240,9 @@ export const GroupArea = function({
item.video.pause(); item.video.pause();
} else { } else {
item.video.play(); item.video.play();
}; }
}; }
}; }
}); });
@ -256,11 +253,11 @@ export const GroupArea = function({
if (groupData.group.name.show && isValidString(groupData.group.name.text)) { if (groupData.group.name.show && isValidString(groupData.group.name.text)) {
this.element.group.classList.add('is-group-header'); this.element.group.classList.add('is-group-header');
}; }
if (groupData.group.toolbar.collapse.show || (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0)) { if (groupData.group.toolbar.collapse.show || (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0)) {
this.element.group.classList.add('is-group-toolbar'); this.element.group.classList.add('is-group-toolbar');
}; }
}; };
@ -268,7 +265,7 @@ export const GroupArea = function({
for (var key in this.control.button) { for (var key in this.control.button) {
this.control.button[key].disable(); this.control.button[key].disable();
}; }
this.control.searchState(); this.control.searchState();
@ -278,7 +275,7 @@ export const GroupArea = function({
for (var key in this.control.button) { for (var key in this.control.button) {
this.control.button[key].enable(); this.control.button[key].enable();
}; }
this.control.searchState(); this.control.searchState();
@ -294,7 +291,7 @@ export const GroupArea = function({
this.control.button.up.enable(); this.control.button.up.enable();
this.control.button.down.enable(); this.control.button.down.enable();
this.control.button.sort.enable(); this.control.button.sort.enable();
}; }
}; };
@ -320,15 +317,15 @@ export const GroupArea = function({
if (groupData.group.name.show && isValidString(groupData.group.name.text)) { if (groupData.group.name.show && isValidString(groupData.group.name.text)) {
this.element.header.appendChild(this.element.name.name); this.element.header.appendChild(this.element.name.name);
}; }
if (groupData.group.toolbar.collapse.show) { if (groupData.group.toolbar.collapse.show) {
this.element.toolbar.group.appendChild(this.collapse.button.button); this.element.toolbar.group.appendChild(this.collapse.button.button);
}; }
if (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0) { if (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0) {
this.element.toolbar.group.appendChild(this.openAll.button.button); 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)) { 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.header.appendChild(this.element.toolbar.toolbar);
}; }
this.element.group.appendChild(this.element.header); this.element.group.appendChild(this.element.header);
@ -348,7 +345,7 @@ export const GroupArea = function({
this.control.enable(); this.control.enable();
} else { } else {
this.control.disable(); this.control.disable();
}; }
}; };
@ -386,7 +383,7 @@ export const GroupArea = function({
this.collapse.button.style.update(['line']); this.collapse.button.style.update(['line']);
}; }
if (groupData.group.collapse) { if (groupData.group.collapse) {
@ -396,7 +393,7 @@ export const GroupArea = function({
this.element.group.classList.remove('is-group-collapse'); this.element.group.classList.remove('is-group-collapse');
}; }
}; };

3
src/component/groupEmpty/index.js
View File

@ -1,4 +1,3 @@
import { state } from '../state';
import { bookmark } from '../bookmark'; import { bookmark } from '../bookmark';
import { Button } from '../button'; import { Button } from '../button';
@ -7,7 +6,7 @@ import { node } from '../../utility/node';
import './index.css'; import './index.css';
export const GroupEmpty = function({ export const GroupEmpty = function ({
groupIndex = false groupIndex = false
} = {}) { } = {}) {

31
src/component/groupForm/index.js
View File

@ -1,40 +1,21 @@
import { state } from '../state';
import { data } from '../data';
import { theme } from '../theme';
import { bookmark } from '../bookmark'; import { bookmark } from '../bookmark';
import { groupDefault } from '../groupDefault';
import * as form from '../form'; import * as form from '../form';
import { Button } from '../button'; 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_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_text } from '../control/text';
import { Control_select } from '../control/select'; import { Control_select } from '../control/select';
import { node } from '../../utility/node'; 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 { ordinalNumber } from '../../utility/ordinalNumber';
import { randomString } from '../../utility/randomString'; import { randomString } from '../../utility/randomString';
import { randomNumber } from '../../utility/randomNumber'; import { randomNumber } from '../../utility/randomNumber';
import './index.css'; import './index.css';
export const GroupForm = function({ export const GroupForm = function ({
groupData = false groupData = false
} = {}) { } = {}) {
@ -55,19 +36,19 @@ export const GroupForm = function({
if (groupData.type.new) { if (groupData.type.new) {
count++; count++;
}; }
for (var i = 1; i <= count; i++) { for (var i = 1; i <= count; i++) {
option.push(ordinalNumber(i)); option.push(ordinalNumber(i));
}; }
} else { } else {
option.push(ordinalNumber(1)); option.push(ordinalNumber(1));
}; }
return option; return option;
@ -141,7 +122,7 @@ export const GroupForm = function({
} else { } else {
this.control.group.name.text.disable(); this.control.group.name.text.disable();
this.control.group.name.random.disable(); this.control.group.name.random.disable();
}; }
}; };
@ -247,7 +228,7 @@ export const GroupForm = function({
this.element.form.addEventListener('keydown', (event) => { this.element.form.addEventListener('keydown', (event) => {
if (event.keyCode == 13) { event.preventDefault(); return false; }; if (event.keyCode == 13) { event.preventDefault(); return false; }
}); });

82
src/component/header/index.js
View File

@ -1,5 +1,5 @@
import { state } from '../state';
import { data } from '../data'; import { data } from '../data';
import { state } from '../state';
import { layout } from '../layout'; import { layout } from '../layout';
import { toolbar } from '../toolbar'; import { toolbar } from '../toolbar';
@ -50,7 +50,7 @@ header.item.mod = {
const headerItems = ['greeting', 'transitional', 'clock', 'date', 'search', 'toolbar']; const headerItems = ['greeting', 'transitional', 'clock', 'date', 'search', 'toolbar'];
headerItems.reverse().forEach((item, i) => { headerItems.reverse().forEach((item) => {
switch (item) { switch (item) {
@ -79,19 +79,19 @@ header.item.mod = {
position = state.get.current().header.order.indexOf('greeting') + 1; position = state.get.current().header.order.indexOf('greeting') + 1;
}; }
state.get.current().header.order.splice(position, 0, item); state.get.current().header.order.splice(position, 0, item);
}; }
} else { } else {
if (state.get.current().header.order.includes(item)) { if (state.get.current().header.order.includes(item)) {
state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1); state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1);
}; }
}; }
break; break;
@ -120,19 +120,19 @@ header.item.mod = {
position = state.get.current().header.order.indexOf('greeting') + 1; position = state.get.current().header.order.indexOf('greeting') + 1;
}; }
state.get.current().header.order.splice(position, 0, item); state.get.current().header.order.splice(position, 0, item);
}; }
} else { } else {
if (state.get.current().header.order.includes(item)) { if (state.get.current().header.order.includes(item)) {
state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1); state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1);
}; }
}; }
break; break;
@ -157,19 +157,19 @@ header.item.mod = {
position = state.get.current().header.order.indexOf('date'); position = state.get.current().header.order.indexOf('date');
}; }
state.get.current().header.order.splice(position, 0, item); state.get.current().header.order.splice(position, 0, item);
}; }
} else { } else {
if (state.get.current().header.order.includes(item)) { if (state.get.current().header.order.includes(item)) {
state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1); state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1);
}; }
}; }
break; break;
@ -181,15 +181,15 @@ header.item.mod = {
state.get.current().header.order.unshift(item); state.get.current().header.order.unshift(item);
}; }
} else { } else {
if (state.get.current().header.order.includes(item)) { if (state.get.current().header.order.includes(item)) {
state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1); state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1);
}; }
}; }
break; break;
@ -213,19 +213,19 @@ header.item.mod = {
position = state.get.current().header.order.length; position = state.get.current().header.order.length;
}; }
state.get.current().header.order.splice(position, 0, item); state.get.current().header.order.splice(position, 0, item);
}; }
} else { } else {
if (state.get.current().header.order.includes(item)) { if (state.get.current().header.order.includes(item)) {
state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1); state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1);
}; }
}; }
break; break;
@ -237,7 +237,7 @@ header.item.mod = {
if (state.get.current().header.order.includes(item)) { if (state.get.current().header.order.includes(item)) {
state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1); state.get.current().header.order.splice(state.get.current().header.order.indexOf(item), 1);
}; }
break; break;
@ -245,15 +245,15 @@ header.item.mod = {
if (!state.get.current().header.order.includes(item)) { if (!state.get.current().header.order.includes(item)) {
state.get.current().header.order.push(item); state.get.current().header.order.push(item);
}; }
break; break;
}; }
break; break;
}; }
}); });
@ -276,7 +276,7 @@ header.item.render = () => {
header.element.search = new Search(); header.element.search = new Search();
order.forEach((item, i) => { order.forEach((item) => {
switch (item) { switch (item) {
@ -295,7 +295,7 @@ header.item.render = () => {
header.element.header.appendChild(headerItem.item()); header.element.header.appendChild(headerItem.item());
}; }
break; break;
@ -312,7 +312,7 @@ header.item.render = () => {
header.element.header.appendChild(headerItem.item()); header.element.header.appendChild(headerItem.item());
}; }
break; break;
@ -329,7 +329,7 @@ header.item.render = () => {
header.element.header.appendChild(headerItem.item()); header.element.header.appendChild(headerItem.item());
}; }
break; break;
@ -357,7 +357,7 @@ header.item.render = () => {
header.element.header.appendChild(headerItem.item()); header.element.header.appendChild(headerItem.item());
}; }
break; break;
@ -374,7 +374,7 @@ header.item.render = () => {
header.element.header.appendChild(headerItem.item()); header.element.header.appendChild(headerItem.item());
}; }
break; break;
@ -382,8 +382,7 @@ header.item.render = () => {
switch (state.get.current().toolbar.location) { switch (state.get.current().toolbar.location) {
case 'header': case 'header': {
const headerItem = new HeaderItem({ const headerItem = new HeaderItem({
name: item, name: item,
child: toolbar.current.toolbar() child: toolbar.current.toolbar()
@ -394,18 +393,19 @@ header.item.render = () => {
header.element.header.appendChild(headerItem.item()); header.element.header.appendChild(headerItem.item());
break; break;
}
}; }
break; break;
}; }
}); });
layout.element.header.appendChild(header.element.area); layout.element.header.appendChild(header.element.area);
const sortable = Sortable.create(header.element.header, { Sortable.create(header.element.header, {
handle: '.header-control-sort', handle: '.header-control-sort',
ghostClass: 'header-sort-placeholder', ghostClass: 'header-sort-placeholder',
animation: 500, animation: 500,
@ -429,7 +429,7 @@ header.item.render = () => {
html.classList.add('is-header-show'); html.classList.add('is-header-show');
} else { } else {
html.classList.remove('is-header-show'); html.classList.remove('is-header-show');
}; }
}; };
@ -468,7 +468,7 @@ header.edit = {
header.edit.close(); header.edit.close();
} else { } else {
header.edit.open(); header.edit.open();
}; }
}, },
render: () => { render: () => {
@ -476,16 +476,16 @@ header.edit = {
applyCSSState('header.edit'); applyCSSState('header.edit');
if (header.item.current.length > 0) { if (header.item.current.length > 0) {
header.item.current.forEach((item, i) => { header.item.current.forEach((item) => {
if (state.get.current().header.edit) { if (state.get.current().header.edit) {
item.control.enable(); item.control.enable();
} else { } else {
item.control.disable(); item.control.disable();
}; }
}); });
}; }
} }
}; };

13
src/component/headerItem/index.js
View File

@ -1,6 +1,4 @@
import { state } from '../state'; import { state } from '../state';
import { data } from '../data';
import { header } from '../header';
import { Button } from '../button'; import { Button } from '../button';
@ -8,9 +6,8 @@ import { node } from '../../utility/node';
import './index.css'; import './index.css';
export const HeaderItem = function({ export const HeaderItem = function ({
name = false, name = false,
index = false,
child = false child = false
} = {}) { } = {}) {
@ -40,13 +37,13 @@ export const HeaderItem = function({
this.control.disable = () => { this.control.disable = () => {
for (var key in this.control.button) { for (var key in this.control.button) {
this.control.button[key].disable(); this.control.button[key].disable();
}; }
}; };
this.control.enable = () => { this.control.enable = () => {
for (var key in this.control.button) { for (var key in this.control.button) {
this.control.button[key].enable(); this.control.button[key].enable();
}; }
}; };
this.assemble = () => { this.assemble = () => {
@ -62,7 +59,7 @@ export const HeaderItem = function({
this.element.content.appendChild(this.element.body); this.element.content.appendChild(this.element.body);
}; }
this.element.item.appendChild(this.element.content); this.element.item.appendChild(this.element.content);
@ -76,7 +73,7 @@ export const HeaderItem = function({
this.control.enable(); this.control.enable();
} else { } else {
this.control.disable(); this.control.disable();
}; }
return this.element.item; return this.element.item;

4
src/component/icon/index.js
View File

@ -126,11 +126,11 @@ icon.render = (name) => {
if (icon.all[name].fill) { if (icon.all[name].fill) {
svg.setAttribute('clip-rule', icon.all[name].clip); svg.setAttribute('clip-rule', icon.all[name].clip);
}; }
if (icon.all[name].fill) { if (icon.all[name].fill) {
svg.setAttribute('fill-rule', icon.all[name].fill); svg.setAttribute('fill-rule', icon.all[name].fill);
}; }
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

22
src/component/importForm/index.js
View File

@ -1,28 +1,14 @@
import { state } from '../state';
import { data } from '../data';
import { bookmark } from '../bookmark';
import * as form from '../form'; 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_radio } from '../control/radio';
import { Control_radioGrid } from '../control/radioGrid';
import { Control_checkbox } from '../control/checkbox'; 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 { node } from '../../utility/node';
import { complexNode } from '../../utility/complexNode'; import { complexNode } from '../../utility/complexNode';
export const ImportForm = function({ export const ImportForm = function ({
dataToImport = false, dataToImport = false,
state = false state = false
} = {}) { } = {}) {
@ -41,7 +27,7 @@ export const ImportForm = function({
let count = 0; let count = 0;
dataToImport.bookmark.forEach((item, i) => { count = count + item.items.length }); dataToImport.bookmark.forEach((item) => { count = count + item.items.length; });
return count; return count;
@ -56,7 +42,7 @@ export const ImportForm = function({
path: 'bookmark.include', path: 'bookmark.include',
id: 'bookmark-include', id: 'bookmark-include',
labelText: 'Bookmarks', 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: () => { action: () => {
this.disable(); this.disable();
} }
@ -98,7 +84,7 @@ export const ImportForm = function({
this.control.import.bookmark.type.enable(); this.control.import.bookmark.type.enable();
} else { } else {
this.control.import.bookmark.type.disable(); this.control.import.bookmark.type.disable();
}; }
}; };

29
src/component/index.js
View File

@ -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 { base } from './base';
import { state } from './state'; import { state } from './state';
import { data } from './data'; import { data } from './data';
@ -48,7 +22,6 @@ import { groupAndBookmark } from './groupAndBookmark';
import * as form from './form'; import * as form from './form';
export const component = { export const component = {
appName,
base, base,
state, state,
data, data,

10
src/component/keyboard/index.js
View File

@ -22,7 +22,7 @@ keyboard.esc = new KeyboardShortcut({
group.edit.close(); group.edit.close();
header.edit.close(); header.edit.close();
toolbar.current.update.edit(); toolbar.current.update.edit();
}; }
data.save(); data.save();
} }
}); });
@ -35,7 +35,7 @@ keyboard.ctrAltD = new KeyboardShortcut({
theme.style.toggle(); theme.style.toggle();
if (themeSetting.control.style.update) { if (themeSetting.control.style.update) {
themeSetting.control.style.update(); themeSetting.control.style.update();
}; }
data.save(); data.save();
} }
}); });
@ -47,7 +47,7 @@ keyboard.ctrAltA = new KeyboardShortcut({
action: () => { action: () => {
if (!state.get.current().bookmark.add) { if (!state.get.current().bookmark.add) {
bookmark.add.render(); bookmark.add.render();
}; }
} }
}); });
@ -71,7 +71,7 @@ keyboard.ctrAltG = new KeyboardShortcut({
action: () => { action: () => {
if (!state.get.current().group.add) { if (!state.get.current().group.add) {
group.add.render(); group.add.render();
}; }
data.save(); data.save();
} }
}); });
@ -94,7 +94,7 @@ keyboard.ctrAltR = new KeyboardShortcut({
toolbar.current.update.accent(); toolbar.current.update.accent();
if (themeSetting.control.accent.color) { if (themeSetting.control.accent.color) {
themeSetting.control.accent.color.update(); themeSetting.control.accent.color.update();
}; }
applyCSSVar([ applyCSSVar([
'theme.accent.rgb.r', 'theme.accent.rgb.r',
'theme.accent.rgb.g', 'theme.accent.rgb.g',

8
src/component/keyboardShortcut/index.js
View File

@ -1,4 +1,4 @@
export const KeyboardShortcut = function({ export const KeyboardShortcut = function ({
keycode = false, keycode = false,
ctrl = false, ctrl = false,
alt = false, alt = false,
@ -13,10 +13,10 @@ export const KeyboardShortcut = function({
if (action) { if (action) {
action(); action();
}; }
}; }
}; }
}; };
this.add = () => { window.addEventListener('keydown', this.action); }; this.add = () => { window.addEventListener('keydown', this.action); };

30
src/component/layout/index.js
View File

@ -1,10 +1,6 @@
import { state } from '../state'; import { state } from '../state';
import { data } from '../data';
import { bookmark } from '../bookmark';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { get } from '../../utility/get';
import { set } from '../../utility/set';
import { clearChildNode } from '../../utility/clearChildNode'; import { clearChildNode } from '../../utility/clearChildNode';
import { applyCSSVar } from '../../utility/applyCSSVar'; import { applyCSSVar } from '../../utility/applyCSSVar';
import { applyCSSClass } from '../../utility/applyCSSClass'; import { applyCSSClass } from '../../utility/applyCSSClass';
@ -14,7 +10,7 @@ import { isValidString } from '../../utility/isValidString';
import './index.css'; import './index.css';
const layout = {} const layout = {};
layout.element = { layout.element = {
layout: node('div|class:layout'), layout: node('div|class:layout'),
@ -38,7 +34,7 @@ layout.area = {
let breakpoint; let breakpoint;
entries.forEach(function(entry) { entries.forEach(function (entry) {
if (entry.contentRect.width <= size.sm) { if (entry.contentRect.width <= size.sm) {
breakpoint = 'xs'; breakpoint = 'xs';
@ -52,7 +48,7 @@ layout.area = {
breakpoint = 'xl'; breakpoint = 'xl';
} else if (entry.contentRect.width > size.xxl) { } else if (entry.contentRect.width > size.xxl) {
breakpoint = 'xxl'; breakpoint = 'xxl';
}; }
}); });
@ -88,9 +84,9 @@ layout.area = {
layout.element.layout.removeChild(layout.element.header); layout.element.layout.removeChild(layout.element.header);
}; }
}; }
if (state.get.current().theme.layout.divider.size > 0) { if (state.get.current().theme.layout.divider.size > 0) {
@ -102,9 +98,9 @@ layout.area = {
layout.element.layout.removeChild(layout.element.divider); layout.element.layout.removeChild(layout.element.divider);
}; }
}; }
if (state.get.current().bookmark.show) { if (state.get.current().bookmark.show) {
@ -116,9 +112,9 @@ layout.area = {
layout.element.layout.removeChild(layout.element.bookmark); layout.element.layout.removeChild(layout.element.bookmark);
}; }
}; }
}, },
clear: () => { clear: () => {
@ -145,7 +141,7 @@ layout.breakpoint = {
const size = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']; const size = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
size.forEach((item, i) => { size.forEach((item) => {
html.classList.remove('is-layout-breakpoint-' + item); html.classList.remove('is-layout-breakpoint-' + item);
}); });
@ -174,7 +170,7 @@ layout.breakpoint = {
html.classList.add('is-layout-breakpoint-xxl'); html.classList.add('is-layout-breakpoint-xxl');
break; break;
}; }
} }
}; };
@ -191,7 +187,7 @@ layout.title = {
title.textContent = 'New Tab'; title.textContent = 'New Tab';
}; }
} }
}; };
@ -209,7 +205,7 @@ layout.favicon = {
favicon.href = 'icon/favicon.svg'; favicon.href = 'icon/favicon.svg';
}; }
} }
}; };

30
src/component/link/index.js
View File

@ -1,15 +1,13 @@
import { icon } from '../icon'; import { icon } from '../icon';
import { form } from '../form';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { complexNode } from '../../utility/complexNode'; import { complexNode } from '../../utility/complexNode';
export const Link = function({ export const Link = function ({
text = 'Link', text = 'Link',
href = '#', href = '#',
iconName = false, iconName = false,
iconPosition = 'right', iconPosition = 'right',
image = false,
linkButton = false, linkButton = false,
style = [], style = [],
title = false, title = false,
@ -32,7 +30,7 @@ export const Link = function({
this.element.link.classList.add('button'); this.element.link.classList.add('button');
if (style.length > 0) { if (style.length > 0) {
style.forEach((item, i) => { style.forEach((item) => {
switch (item) { switch (item) {
@ -48,18 +46,18 @@ export const Link = function({
this.element.link.classList.add('button-ring'); this.element.link.classList.add('button-ring');
break; break;
}; }
}); });
}; }
}; }
const linkText = node('span:' + text); const linkText = node('span:' + text);
if (linkButton) { if (linkButton) {
linkText.classList.add('button-text'); linkText.classList.add('button-text');
}; }
this.element.link.appendChild(linkText); this.element.link.appendChild(linkText);
@ -75,33 +73,33 @@ export const Link = function({
this.element.link.append(icon.render(iconName)); this.element.link.append(icon.render(iconName));
break; break;
}; }
}; }
if (openNew) { if (openNew) {
this.element.link.setAttribute('target', '_blank'); this.element.link.setAttribute('target', '_blank');
}; }
if (title) { if (title) {
this.element.link.setAttribute('title', title); this.element.link.setAttribute('title', title);
}; }
if (classList.length > 0) { if (classList.length > 0) {
classList.forEach((item, i) => { classList.forEach((item) => {
this.element.link.classList.add(item); this.element.link.classList.add(item);
}); });
}; }
}; };
this.bind = () => { this.bind = () => {
if (action) { if (action) {
this.element.link.addEventListener('click', (event) => { this.element.link.addEventListener('click', () => {
action(); action();
}); });
}; }
}; };

19
src/component/menu/index.js
View File

@ -1,17 +1,8 @@
import { state } from '../state'; import { state } from '../state';
import { data } from '../data'; import { APP_NAME } from '../../constant';
import { form } from '../form';
import { bookmark } from '../bookmark';
import { theme } from '../theme';
import { appName } from '../appName';
import { Button } from '../button';
import { MenuFrame } from '../menuFrame'; import { MenuFrame } from '../menuFrame';
import { MenuNav } from '../menuNav';
import { Shade } from '../shade';
import { node } from '../../utility/node';
import { clearChildNode } from '../../utility/clearChildNode';
const menu = {}; const menu = {};
@ -26,7 +17,7 @@ menu.navData = [
{ name: 'Data', active: false, overscroll: true, sub: ['Restore', 'Backup', 'Clear'] }, { name: 'Data', active: false, overscroll: true, sub: ['Restore', 'Backup', 'Clear'] },
{ name: 'Support', active: false, overscroll: false }, { name: 'Support', active: false, overscroll: false },
{ name: 'Coffee', 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 = {}; menu.mod = {};
@ -45,7 +36,7 @@ menu.open = (name) => {
menu.element.frame.menuNav.state.toggle(name); menu.element.frame.menuNav.state.toggle(name);
}; }
menu.element.frame.open(); menu.element.frame.open();
@ -55,7 +46,7 @@ menu.close = () => {
if (menu.element.frame) { if (menu.element.frame) {
menu.element.frame.close(); menu.element.frame.close();
}; }
}; };
@ -65,7 +56,7 @@ menu.toggle = () => {
menu.close(); menu.close();
} else { } else {
menu.open(); menu.open();
}; }
}; };

2
src/component/menuClose/index.js
View File

@ -6,7 +6,7 @@ import { node } from '../../utility/node';
import './index.css'; import './index.css';
export const MenuClose = function() { export const MenuClose = function () {
this.element = { this.element = {
close: node('div|class:menu-close') close: node('div|class:menu-close')

48
src/component/menuContent/appSetting/index.js
View File

@ -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 { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo'; import { logo } from '../../logo';
import { layout } from '../../layout'; import { APP_NAME } from '../../../constant';
import { toolbar } from '../../toolbar';
import { appName } from '../../appName';
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 { 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 { 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 = {}; 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'); const para1 = node('p');
@ -60,14 +28,14 @@ appSetting[appName.toLowerCase()] = (parent) => {
const para3 = node('p'); const para3 = node('p');
para3.innerHTML = `${appName} uses the ${licenseLink.link().outerHTML}`; para3.innerHTML = `${APP_NAME} uses the ${licenseLink.link().outerHTML}`;
parent.appendChild( parent.appendChild(
node('div', [ node('div', [
node('div|class:version', [ node('div|class:version', [
logo.render(), logo.render(),
node('div|class:version-details', [ 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 ' + version.number + '|class:version-number'),
node('p:' + version.name + '|class:version-name small') node('p:' + version.name + '|class:version-name small')
]) ])
@ -81,4 +49,4 @@ appSetting[appName.toLowerCase()] = (parent) => {
}; };
export { appSetting } export { appSetting };

62
src/component/menuContent/bookmarkSetting/index.js
View File

@ -1,14 +1,7 @@
import { state } from '../../state'; import { state } from '../../state';
import { data } from '../../data'; import { data } from '../../data';
import { header } from '../../header';
import { bookmark } from '../../bookmark'; 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 { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { groupAndBookmark } from '../../groupAndBookmark'; import { groupAndBookmark } from '../../groupAndBookmark';
import * as form from '../../form'; import * as form from '../../form';
@ -16,26 +9,13 @@ import * as form from '../../form';
import { Button } from '../../button'; import { Button } from '../../button';
import { Collapse } from '../../collapse'; import { Collapse } from '../../collapse';
import { Edge } from '../../edge'; import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText'; 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_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox'; import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider'; 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 { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar'; import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass'; import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState'; import { applyCSSState } from '../../../utility/applyCSSState';
@ -77,7 +57,7 @@ bookmarkSetting.disable = () => {
bookmarkSetting.control.sort.letter.disable(); bookmarkSetting.control.sort.letter.disable();
bookmarkSetting.control.sort.icon.disable(); bookmarkSetting.control.sort.icon.disable();
bookmarkSetting.control.sort.name.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.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
}; }
bookmarkSetting.control.general.show = new Control_checkbox({ bookmarkSetting.control.general.show = new Control_checkbox({
object: state.get.current(), object: state.get.current(),
@ -112,13 +92,13 @@ bookmarkSetting.general = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile()); bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
}; }
} else { } else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] }); bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
}; }
bookmarkSetting.control.general.collapse.update(); bookmarkSetting.control.general.collapse.update();
@ -187,13 +167,13 @@ bookmarkSetting.general = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile()); bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
}; }
} else { } else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] }); bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
}; }
data.save(); data.save();
@ -211,14 +191,14 @@ bookmarkSetting.general = (parent) => {
max: state.get.minMax().bookmark.size.max, max: state.get.minMax().bookmark.size.max,
action: () => { action: () => {
applyCSSVar('bookmark.size'); 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(); data.save();
}, },
mouseDownAction: () => { 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: () => { 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(); bookmark.direction.mod.horizontal();
break; break;
}; }
applyCSSClass('bookmark.style'); applyCSSClass('bookmark.style');
@ -290,13 +270,13 @@ bookmarkSetting.style = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile()); bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
}; }
} else { } else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] }); bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
}; }
data.save(); data.save();
@ -331,13 +311,13 @@ bookmarkSetting.orientation = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile()); bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
}; }
} else { } else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] }); bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
}; }
data.save(); data.save();
@ -374,13 +354,13 @@ bookmarkSetting.sort = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile()); bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
}; }
} else { } else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] }); bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
}; }
data.save(); data.save();
@ -402,13 +382,13 @@ bookmarkSetting.sort = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile()); bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
}; }
} else { } else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] }); bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
}; }
data.save(); data.save();
@ -430,13 +410,13 @@ bookmarkSetting.sort = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile()); bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
}; }
} else { } else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] }); bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
}; }
data.save(); data.save();
@ -464,4 +444,4 @@ bookmarkSetting.sort = (parent) => {
}; };
export { bookmarkSetting } export { bookmarkSetting };

38
src/component/menuContent/coffeeSetting/index.js
View File

@ -1,44 +1,12 @@
import { state } from '../../state'; import { APP_NAME } from '../../../constant';
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 * as form from '../../form'; 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 { 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 { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode'; import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
const coffeeSetting = {}; const coffeeSetting = {};
@ -48,7 +16,7 @@ coffeeSetting.coffee = (parent) => {
node('div', [ node('div', [
complexNode({ complexNode({
tag: 'p', 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({ form.wrap({
children: [(new Link({ children: [(new Link({
@ -67,4 +35,4 @@ coffeeSetting.coffee = (parent) => {
}; };
export { coffeeSetting } export { coffeeSetting };

41
src/component/menuContent/dataSetting/index.js
View File

@ -1,45 +1,18 @@
import { state } from '../../state';
import { data } from '../../data'; 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 { menu } from '../../menu';
import { icon } from '../../icon'; import { APP_NAME } from '../../../constant';
import { logo } from '../../logo';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { appName } from '../../appName';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button'; import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert'; import { Alert } from '../../alert';
import { DropFile } from '../../dropFile'; import { DropFile } from '../../dropFile';
import { Link } from '../../link'; import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText'; import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton'; 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 { 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 = {}; const dataSetting = {};
@ -77,7 +50,7 @@ dataSetting.restore = (parent) => {
}); });
dataSetting.control.restore.restoreHelper = new Control_helperText({ 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(); dataSetting.control.restore.feedback = form.feedback();
@ -85,7 +58,7 @@ dataSetting.restore = (parent) => {
data.feedback.empty.render(dataSetting.control.restore.feedback); data.feedback.empty.render(dataSetting.control.restore.feedback);
dataSetting.control.restore.drop = new DropFile({ dataSetting.control.restore.drop = new DropFile({
heading: 'Or drop a ' + appName + ' backup file here.', heading: 'Or drop a ' + APP_NAME + ' backup file here.',
dropAaction: () => { dropAaction: () => {
data.import.drop({ data.import.drop({
fileList: dataSetting.control.restore.drop.files, fileList: dataSetting.control.restore.drop.files,
@ -131,7 +104,7 @@ dataSetting.backup = (parent) => {
}); });
dataSetting.control.backup.exportHelper = new Control_helperText({ 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( parent.appendChild(
@ -179,12 +152,12 @@ dataSetting.clear = (parent) => {
iconName: 'warning', iconName: 'warning',
children: [ children: [
node('p:You will lose Bookmarks by clearing all data.|class:small'), node('p:You will lose Bookmarks by clearing all data.|class:small'),
node(`p:Have you ${(new Link({ text:'backed up your data?', href: '#menu-content-item-backup'})).link().outerHTML}|class:small`) node(`p:Have you ${(new Link({ text: 'backed up your data?', href: '#menu-content-item-backup' })).link().outerHTML}|class:small`)
] ]
}); });
dataSetting.control.clear.helper = new Control_helperText({ 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( parent.appendChild(
@ -209,4 +182,4 @@ dataSetting.clear = (parent) => {
}; };
export { dataSetting } export { dataSetting };

34
src/component/menuContent/debugSetting/index.js
View File

@ -1,48 +1,22 @@
import { state } from '../../state';
import { data } from '../../data'; import { data } from '../../data';
import { header } from '../../header';
import { bookmark } from '../../bookmark'; import { bookmark } from '../../bookmark';
import { group } from '../../group'; import { group } from '../../group';
import { theme } from '../../theme';
import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon'; import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout'; import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { groupAndBookmark } from '../../groupAndBookmark'; import { groupAndBookmark } from '../../groupAndBookmark';
import { fontawesome } from '../../fontawesome'; import { fontawesome } from '../../fontawesome';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button'; 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 { StagedGroup } from '../../stagedGroup';
import { StagedBookmark } from '../../stagedBookmark'; 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_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid'; import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox'; 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 { 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 { randomNumber } from '../../../utility/randomNumber';
import { randomString } from '../../../utility/randomString'; import { randomString } from '../../../utility/randomString';
@ -407,7 +381,7 @@ debugSetting.bookmark = (parent) => {
newBookmarkData.link.display.visual.icon.prefix = 'fas'; newBookmarkData.link.display.visual.icon.prefix = 'fas';
} else if (randomIcon.styles.includes('brands')) { } else if (randomIcon.styles.includes('brands')) {
newBookmarkData.link.display.visual.icon.prefix = 'fab'; newBookmarkData.link.display.visual.icon.prefix = 'fab';
}; }
newBookmarkData.link.display.name.text = randomString({ adjectivesCount: 1 }); newBookmarkData.link.display.name.text = randomString({ adjectivesCount: 1 });
@ -415,7 +389,7 @@ debugSetting.bookmark = (parent) => {
bookmark.item.mod.add(newBookmarkData); bookmark.item.mod.add(newBookmarkData);
}; }
groupAndBookmark.render(); groupAndBookmark.render();
@ -464,8 +438,8 @@ debugSetting.icon = (parent) => {
]) ])
] ]
}) })
) );
}; }
parent.appendChild( parent.appendChild(
node('div', [ node('div', [

91
src/component/menuContent/groupSetting/index.js
View File

@ -1,45 +1,22 @@
import { state } from '../../state'; import { state } from '../../state';
import { data } from '../../data'; import { data } from '../../data';
import { header } from '../../header';
import { bookmark } from '../../bookmark'; import { bookmark } from '../../bookmark';
import { group } from '../../group'; 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 { groupAndBookmark } from '../../groupAndBookmark';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button'; import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge'; import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText'; 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_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid'; import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider'; 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 { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar'; import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass'; import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
const groupSetting = {}; const groupSetting = {};
@ -78,7 +55,7 @@ groupSetting.disable = () => {
groupSetting.control.toolbar.openAll.hide.disable(); groupSetting.control.toolbar.openAll.hide.disable();
groupSetting.control.toolbar.openAll.show.disable(); groupSetting.control.toolbar.openAll.show.disable();
groupSetting.control.toolbar.openAll.helper.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.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({ groupSetting.control.name.size = new Control_slider({
object: state.get.current(), object: state.get.current(),
@ -144,14 +121,14 @@ groupSetting.name = (parent) => {
max: state.get.minMax().group.name.size.max, max: state.get.minMax().group.name.size.max,
action: () => { action: () => {
applyCSSVar('group.name.size'); 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(); data.save();
}, },
mouseDownAction: () => { 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: () => { 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]); groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
}; }
} else { } else {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] }); 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) { if (groupSetting.edge.toolbar.size) {
@ -188,13 +165,13 @@ groupSetting.name = (parent) => {
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]); groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
}; }
} else { } else {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] }); groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
}; }
data.save(); data.save();
@ -218,13 +195,13 @@ groupSetting.name = (parent) => {
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]); groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
}; }
} else { } else {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] }); 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) { if (groupSetting.edge.toolbar.size) {
@ -234,13 +211,13 @@ groupSetting.name = (parent) => {
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]); groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
}; }
} else { } else {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] }); groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
}; }
data.save(); 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.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({ groupSetting.control.toolbar.size = new Control_slider({
object: state.get.current(), object: state.get.current(),
@ -288,14 +265,14 @@ groupSetting.toolbar = (parent) => {
max: state.get.minMax().group.toolbar.size.max, max: state.get.minMax().group.toolbar.size.max,
action: () => { action: () => {
applyCSSVar('group.toolbar.size'); 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(); data.save();
}, },
mouseDownAction: () => { 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: () => { 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]); groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
}; }
} else { } else {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] }); 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) { if (groupSetting.edge.toolbar.size) {
@ -333,13 +310,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]); groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
}; }
} else { } else {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] }); groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
}; }
data.save(); data.save();
@ -362,13 +339,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]); groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
}; }
} else { } else {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] }); 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) { if (groupSetting.edge.toolbar.size) {
@ -378,13 +355,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]); groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
}; }
} else { } else {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] }); groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
}; }
data.save(); data.save();
@ -413,13 +390,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]); groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
}; }
} else { } else {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] }); 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) { if (groupSetting.edge.toolbar.size) {
@ -429,13 +406,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]); groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
}; }
} else { } else {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] }); groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
}; }
data.save(); data.save();
@ -458,13 +435,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]); groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
}; }
} else { } else {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] }); 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) { if (groupSetting.edge.toolbar.size) {
@ -474,13 +451,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]); groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
}; }
} else { } else {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] }); groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
}; }
data.save(); data.save();
@ -523,4 +500,4 @@ groupSetting.toolbar = (parent) => {
}; };
export { groupSetting } export { groupSetting };

123
src/component/menuContent/headerSetting/index.js
View File

@ -1,42 +1,25 @@
import { state } from '../../state'; import { state } from '../../state';
import { data } from '../../data'; import { data } from '../../data';
import { header } from '../../header'; 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 { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { searchEnginePreset } from '../../searchEnginePreset'; import { searchEnginePreset } from '../../searchEnginePreset';
import { appName } from '../../appName'; import { APP_NAME } from '../../../constant';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse'; import { Collapse } from '../../collapse';
import { Edge } from '../../edge'; import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link'; import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText'; 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_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid'; import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox'; import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim'; 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_text } from '../../control/text';
import { Control_textReset } from '../../control/textReset'; import { Control_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
import { node } from '../../../utility/node'; import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar'; import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass'; import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState'; import { applyCSSState } from '../../../utility/applyCSSState';
@ -64,7 +47,7 @@ headerSetting.disable = () => {
headerSetting.control.greeting.newLine.disable(); headerSetting.control.greeting.newLine.disable();
headerSetting.control.greeting.type.disable(); headerSetting.control.greeting.type.disable();
headerSetting.control.greeting.name.disable(); headerSetting.control.greeting.name.disable();
}; }
if (state.get.current().header.greeting.show) { if (state.get.current().header.greeting.show) {
@ -80,13 +63,13 @@ headerSetting.disable = () => {
headerSetting.control.greeting.custom.text.enable(); headerSetting.control.greeting.custom.text.enable();
break; break;
}; }
} else { } else {
headerSetting.control.greeting.custom.text.disable(); headerSetting.control.greeting.custom.text.disable();
}; }
if (state.get.current().header.clock.second.show || if (state.get.current().header.clock.second.show ||
state.get.current().header.clock.minute.show || state.get.current().header.clock.minute.show ||
@ -100,25 +83,25 @@ headerSetting.disable = () => {
headerSetting.control.clock.second.display.enable(); headerSetting.control.clock.second.display.enable();
} else { } else {
headerSetting.control.clock.second.display.disable(); headerSetting.control.clock.second.display.disable();
}; }
if (state.get.current().header.clock.hour.show) { if (state.get.current().header.clock.hour.show) {
headerSetting.control.clock.hour.display.enable(); headerSetting.control.clock.hour.display.enable();
} else { } else {
headerSetting.control.clock.hour.display.disable(); headerSetting.control.clock.hour.display.disable();
}; }
if (state.get.current().header.clock.second.show) { if (state.get.current().header.clock.second.show) {
headerSetting.control.clock.second.display.enable(); headerSetting.control.clock.second.display.enable();
} else { } else {
headerSetting.control.clock.second.display.disable(); headerSetting.control.clock.second.display.disable();
}; }
if (state.get.current().header.clock.hour24.show) { if (state.get.current().header.clock.hour24.show) {
headerSetting.control.clock.meridiem.show.disable(); headerSetting.control.clock.meridiem.show.disable();
} else { } else {
headerSetting.control.clock.meridiem.show.enable(); headerSetting.control.clock.meridiem.show.enable();
}; }
} else { } else {
@ -127,7 +110,7 @@ headerSetting.disable = () => {
headerSetting.control.clock.size.disable(); headerSetting.control.clock.size.disable();
headerSetting.control.clock.newLine.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) { 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(); headerSetting.control.clock.separator.show.disable();
}; }
if ( 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 && [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(); headerSetting.control.clock.separator.text.disable();
}; }
if ( if (
(state.get.current().header.clock.second.show && state.get.current().header.clock.minute.show) || (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(); headerSetting.control.clock.separator.show.disable();
}; }
if ( if (
((state.get.current().header.clock.second.show && state.get.current().header.clock.minute.show) || ((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(); headerSetting.control.clock.separator.text.disable();
}; }
if (state.get.current().header.date.day.show || if (state.get.current().header.date.day.show ||
state.get.current().header.date.date.show || state.get.current().header.date.date.show ||
@ -194,7 +177,7 @@ headerSetting.disable = () => {
headerSetting.control.date.size.disable(); headerSetting.control.date.size.disable();
headerSetting.control.date.newLine.disable(); headerSetting.control.date.newLine.disable();
}; }
if (state.get.current().header.date.date.show && state.get.current().header.date.month.show) { 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(); headerSetting.control.date.format.disable();
}; }
if (state.get.current().header.date.day.show) { if (state.get.current().header.date.day.show) {
@ -222,7 +205,7 @@ headerSetting.disable = () => {
headerSetting.control.date.day.weekStart.enable(); headerSetting.control.date.day.weekStart.enable();
break; break;
}; }
} else { } else {
@ -230,7 +213,7 @@ headerSetting.disable = () => {
headerSetting.control.date.day.length.disable(); headerSetting.control.date.day.length.disable();
headerSetting.control.date.day.weekStart.disable(); headerSetting.control.date.day.weekStart.disable();
}; }
if (state.get.current().header.date.date.show) { if (state.get.current().header.date.date.show) {
@ -242,7 +225,7 @@ headerSetting.disable = () => {
headerSetting.control.date.date.display.disable(); headerSetting.control.date.date.display.disable();
headerSetting.control.date.date.ordinal.disable(); headerSetting.control.date.date.ordinal.disable();
}; }
if (state.get.current().header.date.month.show) { if (state.get.current().header.date.month.show) {
@ -258,7 +241,7 @@ headerSetting.disable = () => {
headerSetting.control.date.month.length.disable(); headerSetting.control.date.month.length.disable();
break; break;
}; }
headerSetting.control.date.month.display.enable(); headerSetting.control.date.month.display.enable();
@ -268,7 +251,7 @@ headerSetting.disable = () => {
headerSetting.control.date.month.ordinal.disable(); headerSetting.control.date.month.ordinal.disable();
headerSetting.control.date.month.length.disable(); headerSetting.control.date.month.length.disable();
}; }
if (state.get.current().header.date.year.show) { if (state.get.current().header.date.year.show) {
@ -278,7 +261,7 @@ headerSetting.disable = () => {
headerSetting.control.date.year.display.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) { 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(); headerSetting.control.date.separator.show.disable();
}; }
if ( 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 && [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(); headerSetting.control.date.separator.text.disable();
}; }
if ( if (
state.get.current().header.clock.second.show || state.get.current().header.clock.second.show ||
@ -317,17 +300,17 @@ headerSetting.disable = () => {
} else { } else {
headerSetting.control.transitional.show.disable(); headerSetting.control.transitional.show.disable();
headerSetting.control.transitional.newLine.disable(); headerSetting.control.transitional.newLine.disable();
}; }
if (( if ((
state.get.current().header.clock.second.show || state.get.current().header.clock.second.show ||
state.get.current().header.clock.minute.show || state.get.current().header.clock.minute.show ||
state.get.current().header.clock.hour.show || state.get.current().header.clock.hour.show ||
state.get.current().header.date.day.show || state.get.current().header.date.day.show ||
state.get.current().header.date.date.show || state.get.current().header.date.date.show ||
state.get.current().header.date.month.show || state.get.current().header.date.month.show ||
state.get.current().header.date.year.show state.get.current().header.date.year.show
) && ) &&
state.get.current().header.transitional.show) { state.get.current().header.transitional.show) {
headerSetting.control.transitional.type.enable(); headerSetting.control.transitional.type.enable();
headerSetting.control.transitional.size.enable(); headerSetting.control.transitional.size.enable();
@ -336,7 +319,7 @@ headerSetting.disable = () => {
headerSetting.control.transitional.type.disable(); headerSetting.control.transitional.type.disable();
headerSetting.control.transitional.size.disable(); headerSetting.control.transitional.size.disable();
headerSetting.control.transitional.newLine.disable(); headerSetting.control.transitional.newLine.disable();
}; }
if (state.get.current().header.search.show) { if (state.get.current().header.search.show) {
headerSetting.control.search.width.by.enable(); headerSetting.control.search.width.by.enable();
@ -348,7 +331,7 @@ headerSetting.disable = () => {
headerSetting.control.search.newTab.disable(); headerSetting.control.search.newTab.disable();
headerSetting.control.search.size.disable(); headerSetting.control.search.size.disable();
headerSetting.control.search.newLine.disable(); headerSetting.control.search.newLine.disable();
}; }
if (state.get.current().header.search.show) { if (state.get.current().header.search.show) {
@ -363,13 +346,13 @@ headerSetting.disable = () => {
headerSetting.control.search.width.size.enable(); headerSetting.control.search.width.size.enable();
break; break;
}; }
} else { } else {
headerSetting.control.search.width.size.disable(); headerSetting.control.search.width.size.disable();
}; }
switch (state.get.current().header.search.engine.selected) { switch (state.get.current().header.search.engine.selected) {
@ -389,7 +372,7 @@ headerSetting.disable = () => {
headerSetting.control.search.engine.custom.queryNameHelper.disable(); headerSetting.control.search.engine.custom.queryNameHelper.disable();
break; break;
}; }
}; };
@ -406,11 +389,11 @@ headerSetting.update = () => {
for (let key in headerSetting.control) { for (let key in headerSetting.control) {
headerSetting.control[key].forEach((item, i) => { headerSetting.control[key].forEach((item) => {
item.update(); item.update();
}); });
}; }
}; };
@ -435,7 +418,7 @@ headerSetting.alignment = (parent) => {
headerSetting.alignment.alignmentHelper = new Control_helperText({ headerSetting.alignment.alignmentHelper = new Control_helperText({
complexText: true, complexText: true,
text: [`Effects may not be visible if the ${(new Link({ text:'Search box size', href: '#menu-content-item-search'})).link().outerHTML} size is set to Auto and grows to fill available space.`] text: [`Effects may not be visible if the ${(new Link({ text: 'Search box size', href: '#menu-content-item-search' })).link().outerHTML} size is set to Auto and grows to fill available space.`]
}); });
parent.appendChild( parent.appendChild(
@ -456,7 +439,7 @@ headerSetting.greeting = (parent) => {
path: 'header.greeting.show', path: 'header.greeting.show',
id: 'header-greeting-show', id: 'header-greeting-show',
labelText: 'Show Greeting', labelText: 'Show Greeting',
action: function() { action: function () {
header.item.mod.order(); header.item.mod.order();
header.item.clear(); header.item.clear();
header.item.render(); header.item.render();
@ -500,7 +483,7 @@ headerSetting.greeting = (parent) => {
id: 'header-greeting-newLine', id: 'header-greeting-newLine',
labelText: 'New line', labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.', description: 'Force on to a new line and seperate from other Header items.',
action: function() { action: function () {
applyCSSState('header.greeting.newLine'); applyCSSState('header.greeting.newLine');
data.save(); data.save();
} }
@ -669,7 +652,7 @@ headerSetting.transitional = (parent) => {
id: 'header-transitional-newLine', id: 'header-transitional-newLine',
labelText: 'New line', labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.', description: 'Force on to a new line and seperate from other Header items.',
action: function() { action: function () {
applyCSSState('header.transitional.newLine'); applyCSSState('header.transitional.newLine');
data.save(); data.save();
} }
@ -885,7 +868,7 @@ headerSetting.clock = (parent) => {
path: 'header.clock.hour24.show', path: 'header.clock.hour24.show',
id: 'header-clock-hour24-show', id: 'header-clock-hour24-show',
labelText: '24 hours', labelText: '24 hours',
action: function() { action: function () {
header.element.clock.update(); header.element.clock.update();
headerSetting.disable(); headerSetting.disable();
data.save(); data.save();
@ -899,7 +882,7 @@ headerSetting.clock = (parent) => {
path: 'header.clock.meridiem.show', path: 'header.clock.meridiem.show',
id: 'header-clock-meridiem-show', id: 'header-clock-meridiem-show',
labelText: 'AM / PM', labelText: 'AM / PM',
action: function() { action: function () {
header.element.clock.update(); header.element.clock.update();
data.save(); data.save();
} }
@ -934,7 +917,7 @@ headerSetting.clock = (parent) => {
id: 'header-clock-newLine', id: 'header-clock-newLine',
labelText: 'New line', labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.', description: 'Force on to a new line and seperate from other Header items.',
action: function() { action: function () {
applyCSSState('header.clock.newLine'); applyCSSState('header.clock.newLine');
data.save(); data.save();
} }
@ -1483,7 +1466,7 @@ headerSetting.date = (parent) => {
id: 'header-date-newLine', id: 'header-date-newLine',
labelText: 'New line', labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.', description: 'Force on to a new line and seperate from other Header items.',
action: function() { action: function () {
applyCSSState('header.date.newLine'); applyCSSState('header.date.newLine');
data.save(); data.save();
} }
@ -1593,7 +1576,7 @@ headerSetting.search = (parent) => {
path: 'header.search.newTab', path: 'header.search.newTab',
id: 'header-search-newTab', id: 'header-search-newTab',
labelText: 'Open Search results in a new tab', labelText: 'Open Search results in a new tab',
action: function() { action: function () {
header.item.mod.order(); header.item.mod.order();
header.item.clear(); header.item.clear();
header.item.render(); header.item.render();
@ -1613,7 +1596,7 @@ headerSetting.search = (parent) => {
id: 'header-search-newLine', id: 'header-search-newLine',
labelText: 'New line', labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.', description: 'Force on to a new line and seperate from other Header items.',
action: function() { action: function () {
applyCSSState('header.search.newLine'); applyCSSState('header.search.newLine');
data.save(); data.save();
} }
@ -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-${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 = { headerSetting.control.search.engine = {
selected: new Control_radio({ selected: new Control_radio({
@ -1693,7 +1676,7 @@ headerSetting.search = (parent) => {
} }
}), }),
urlHelper: new Control_helperText({ 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({ queryName: new Control_text({
object: state.get.current(), object: state.get.current(),
@ -1867,4 +1850,4 @@ headerSetting.search = (parent) => {
}; };
export { headerSetting } export { headerSetting };

20
src/component/menuContent/index.js
View File

@ -1,6 +1,5 @@
import { data } from '../data';
import { debugSetting } from './debugSetting'; import { debugSetting } from './debugSetting';
import { appName } from '../appName'; import { APP_NAME } from '../../constant';
import { layoutSetting } from './layoutSetting'; import { layoutSetting } from './layoutSetting';
import { groupSetting } from './groupSetting'; import { groupSetting } from './groupSetting';
import { bookmarkSetting } from './bookmarkSetting'; import { bookmarkSetting } from './bookmarkSetting';
@ -13,11 +12,10 @@ import { coffeeSetting } from './coffeeSetting';
import { appSetting } from './appSetting'; import { appSetting } from './appSetting';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { clearChildNode } from '../../utility/clearChildNode';
import './index.css'; import './index.css';
export const MenuContent = function({ export const MenuContent = function ({
activeNavData = {}, activeNavData = {},
container = false container = false
} = {}) { } = {}) {
@ -37,7 +35,7 @@ export const MenuContent = function({
if (indent) { if (indent) {
formElement.classList.add('menu-item-form-indent'); formElement.classList.add('menu-item-form-indent');
}; }
return formElement; return formElement;
} }
@ -47,7 +45,7 @@ export const MenuContent = function({
if (activeNavData.sub && activeNavData.sub.length > 0) { if (activeNavData.sub && activeNavData.sub.length > 0) {
activeNavData.sub.forEach((item, i) => { activeNavData.sub.forEach((item) => {
const menuContentItem = this.element.content(item); const menuContentItem = this.element.content(item);
@ -89,7 +87,7 @@ export const MenuContent = function({
debugSetting[this.makeId(item)](formElement); debugSetting[this.makeId(item)](formElement);
break; break;
}; }
menuContentItem.appendChild(formElement); menuContentItem.appendChild(formElement);
@ -123,7 +121,7 @@ export const MenuContent = function({
themeSetting.disable(); themeSetting.disable();
break; break;
}; }
} else { } else {
@ -153,7 +151,7 @@ export const MenuContent = function({
break; break;
case this.makeId(appName): case this.makeId(APP_NAME):
formElement = this.element.form(); formElement = this.element.form();
@ -161,13 +159,13 @@ export const MenuContent = function({
break; break;
}; }
menuContentItem.appendChild(formElement); menuContentItem.appendChild(formElement);
container.appendChild(menuContentItem); container.appendChild(menuContentItem);
}; }
}; };

32
src/component/menuContent/layoutSetting/index.js
View File

@ -2,39 +2,21 @@ import { state } from '../../state';
import { data } from '../../data'; import { data } from '../../data';
import { header } from '../../header'; import { header } from '../../header';
import { bookmark } from '../../bookmark'; 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 { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import * as form from '../../form'; import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge'; import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link'; import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText'; 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_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid'; import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox'; import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider'; 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_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
import { node } from '../../../utility/node'; import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar'; import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass'; import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState'; import { applyCSSState } from '../../../utility/applyCSSState';
@ -64,7 +46,7 @@ layoutSetting.disable = () => {
layoutSetting.control.area.bookmark.justify.disable(); layoutSetting.control.area.bookmark.justify.disable();
layoutSetting.control.area.bookmark.justifyHelper1.disable(); layoutSetting.control.area.bookmark.justifyHelper1.disable();
}; }
if (state.get.current().header.order.length > 0) { if (state.get.current().header.order.length > 0) {
@ -78,7 +60,7 @@ layoutSetting.disable = () => {
layoutSetting.control.area.header.justify.disable(); layoutSetting.control.area.header.justify.disable();
layoutSetting.control.area.header.justifyHelper1.disable(); layoutSetting.control.area.header.justifyHelper1.disable();
}; }
if (state.get.current().bookmark.show) { if (state.get.current().bookmark.show) {
@ -98,9 +80,9 @@ layoutSetting.disable = () => {
layoutSetting.control.area.bookmark.justifyHelper1.disable(); layoutSetting.control.area.bookmark.justifyHelper1.disable();
break; break;
}; }
}; }
}; };
@ -219,7 +201,7 @@ layoutSetting.area = (parent) => {
}), }),
justifyHelper2: new Control_helperText({ justifyHelper2: new Control_helperText({
complexText: true, complexText: true,
text: [`Only available when ${(new Link({ text:'Layout Direction', href: '#menu-content-item-alignment'})).link().outerHTML} is Vertical and Header items are shown.`] text: [`Only available when ${(new Link({ text: 'Layout Direction', href: '#menu-content-item-alignment' })).link().outerHTML} is Vertical and Header items are shown.`]
}) })
}; };
@ -266,7 +248,7 @@ layoutSetting.area = (parent) => {
}), }),
justifyHelper2: new Control_helperText({ justifyHelper2: new Control_helperText({
complexText: true, complexText: true,
text: [`Only available when ${(new Link({ text:'Layout Direction', href: '#menu-content-item-alignment'})).link().outerHTML} is Vertical and Header items are shown.`] text: [`Only available when ${(new Link({ text: 'Layout Direction', href: '#menu-content-item-alignment' })).link().outerHTML} is Vertical and Header items are shown.`]
}) })
}; };
@ -511,4 +493,4 @@ layoutSetting.page = (parent) => {
}; };
export { layoutSetting } export { layoutSetting };

45
src/component/menuContent/supportSetting/index.js
View File

@ -1,49 +1,16 @@
import { state } from '../../state'; import { APP_NAME } from '../../../constant';
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 * as form from '../../form'; 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 { 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 { 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 = {}; const supportSetting = {};
supportSetting.link = { supportSetting.link = {
url: 'https://github.com/zombieFox/' + appName + '/wiki/', url: 'https://github.com/zombieFox/' + APP_NAME + '/wiki/',
page: { page: {
applyToAll: 'Applying-bookmark-settings-to-all', applyToAll: 'Applying-bookmark-settings-to-all',
browser: 'Browser-support', browser: 'Browser-support',
@ -55,7 +22,7 @@ supportSetting.link = {
resetting: 'Resetting-when-opening-the-browser', resetting: 'Resetting-when-opening-the-browser',
privacy: 'Respecting-your-privacy', privacy: 'Respecting-your-privacy',
backgroundImageVideo: 'Setting-a-background-video-or-image', 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()])); list.appendChild(node('li', [supportLink.link()]));
}; }
wrap.appendChild(list); wrap.appendChild(list);
@ -87,7 +54,7 @@ supportSetting.support = (parent) => {
const para = node('p'); 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( parent.appendChild(
node('div', [ node('div', [
@ -99,4 +66,4 @@ supportSetting.support = (parent) => {
}; };
export { supportSetting } export { supportSetting };

48
src/component/menuContent/themeSetting/index.js
View File

@ -4,10 +4,7 @@ import { header } from '../../header';
import { bookmark } from '../../bookmark'; import { bookmark } from '../../bookmark';
import { group } from '../../group'; import { group } from '../../group';
import { theme } from '../../theme'; import { theme } from '../../theme';
import { version } from '../../version';
import { menu } from '../../menu'; import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout'; import { layout } from '../../layout';
import { toolbar } from '../../toolbar'; import { toolbar } from '../../toolbar';
import { themePreset } from '../../themePreset'; import { themePreset } from '../../themePreset';
@ -21,24 +18,18 @@ import * as form from '../../form';
import { Button } from '../../button'; import { Button } from '../../button';
import { Collapse } from '../../collapse'; import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { PresetThemeTile } from '../../presetThemeTile'; import { PresetThemeTile } from '../../presetThemeTile';
import { AccentPresetButton } from '../../accentPresetButton'; import { AccentPresetButton } from '../../accentPresetButton';
import { Alert } from '../../alert'; import { Alert } from '../../alert';
import { Link } from '../../link'; import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText'; 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_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox'; import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider'; import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim'; import { Control_sliderSlim } from '../../control/sliderSlim';
import { Control_sliderDouble } from '../../control/sliderDouble'; import { Control_sliderDouble } from '../../control/sliderDouble';
import { Control_colorMixer } from '../../control/colorMixer'; 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_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea'; import { Control_textarea } from '../../control/textarea';
@ -47,7 +38,6 @@ import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar'; import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass'; import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState'; import { applyCSSState } from '../../../utility/applyCSSState';
import { convertColor } from '../../../utility/convertColor';
const themeSetting = {}; const themeSetting = {};
@ -76,7 +66,7 @@ themeSetting.disable = () => {
} else { } else {
themeSetting.control.accent.random.style.disable(); themeSetting.control.accent.random.style.disable();
themeSetting.control.accent.randomiseNow.disable(); themeSetting.control.accent.randomiseNow.disable();
}; }
if (state.get.current().theme.accent.cycle.active) { if (state.get.current().theme.accent.cycle.active) {
themeSetting.control.accent.cycle.speed.enable(); themeSetting.control.accent.cycle.speed.enable();
@ -86,7 +76,7 @@ themeSetting.disable = () => {
themeSetting.control.accent.cycle.speed.disable(); themeSetting.control.accent.cycle.speed.disable();
themeSetting.control.accent.cycle.step.disable(); themeSetting.control.accent.cycle.step.disable();
themeSetting.control.accent.cycle.stepHelper.disable(); themeSetting.control.accent.cycle.stepHelper.disable();
}; }
switch (state.get.current().theme.header.by) { switch (state.get.current().theme.header.by) {
@ -100,7 +90,7 @@ themeSetting.disable = () => {
themeSetting.control.header.color.opacity.enable(); themeSetting.control.header.color.opacity.enable();
break; break;
}; }
switch (state.get.current().theme.background.type) { switch (state.get.current().theme.background.type) {
@ -230,7 +220,7 @@ themeSetting.disable = () => {
themeSetting.control.background.video.vignette.range.enable(); themeSetting.control.background.video.vignette.range.enable();
break; break;
}; }
switch (state.get.current().theme.layout.color.by) { switch (state.get.current().theme.layout.color.by) {
@ -248,7 +238,7 @@ themeSetting.disable = () => {
themeSetting.control.layout.color.blurHelper.enable(); themeSetting.control.layout.color.blurHelper.enable();
break; break;
}; }
switch (state.get.current().theme.header.color.by) { switch (state.get.current().theme.header.color.by) {
@ -262,7 +252,7 @@ themeSetting.disable = () => {
themeSetting.control.header.color.opacity.enable(); themeSetting.control.header.color.opacity.enable();
break; break;
}; }
switch (state.get.current().theme.bookmark.color.by) { switch (state.get.current().theme.bookmark.color.by) {
@ -276,7 +266,7 @@ themeSetting.disable = () => {
themeSetting.control.bookmark.color.opacity.enable(); themeSetting.control.bookmark.color.opacity.enable();
break; break;
}; }
}; };
@ -290,7 +280,7 @@ themeSetting.preset = (parent) => {
const themePresetElement = node('div|class:theme-preset'); const themePresetElement = node('div|class:theme-preset');
themePreset.get().forEach((item, i) => { themePreset.get().forEach((item) => {
const presetTheme = new PresetThemeTile({ const presetTheme = new PresetThemeTile({
presetThemeData: item presetThemeData: item
@ -385,7 +375,7 @@ themeSetting.saved = (parent) => {
]) ])
); );
}; }
}; };
@ -433,14 +423,14 @@ themeSetting.colour = (parent) => {
if (count < 10) { if (count < 10) {
count = '0' + count; count = '0' + count;
}; }
formGroup.appendChild( formGroup.appendChild(
node('div|class:form-group-text form-group-text-borderless', [ node('div|class:form-group-text form-group-text-borderless', [
node('div|class:theme-color-box theme-color-shade-' + count + '') node('div|class:theme-color-box theme-color-shade-' + count + '')
]) ])
); );
}; }
formSticky.appendChild(formGroup); formSticky.appendChild(formGroup);
@ -554,7 +544,7 @@ themeSetting.accent = (parent) => {
const themeAccentPreset = node('div|class:theme-accent-preset'); const themeAccentPreset = node('div|class:theme-accent-preset');
allPreset.forEach((item, i) => { allPreset.forEach((item) => {
const presetButton = new AccentPresetButton({ const presetButton = new AccentPresetButton({
presetData: item presetData: item
@ -781,7 +771,7 @@ themeSetting.font = (parent) => {
nameHelper: new Control_helperText({ nameHelper: new Control_helperText({
complexText: true, complexText: true,
text: [ 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"', '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".' 'Clear the field to use the default font "Fjalla One".'
] ]
@ -869,7 +859,7 @@ themeSetting.font = (parent) => {
nameHelper: new Control_helperText({ nameHelper: new Control_helperText({
complexText: true, complexText: true,
text: [ 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"', '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".' 'Clear the field to use the default font "Open Sans".'
] ]
@ -1224,11 +1214,11 @@ themeSetting.opacity = (parent) => {
if (group.area.current.length > 0) { if (group.area.current.length > 0) {
group.area.current.forEach((item, i) => { group.area.current.forEach((item) => {
item.update.style(); item.update.style();
}); });
}; }
data.save(); data.save();
@ -1266,8 +1256,8 @@ themeSetting.background = (parent) => {
theme.background.element.video.play(); theme.background.element.video.play();
} else { } else {
theme.background.element.video.pause(); theme.background.element.video.pause();
}; }
}; }
}; };
@ -2132,4 +2122,4 @@ themeSetting.bookmark = (parent) => {
}; };
export { themeSetting } export { themeSetting };

32
src/component/menuContent/toolbarSetting/index.js
View File

@ -1,42 +1,20 @@
import { state } from '../../state'; import { state } from '../../state';
import { data } from '../../data'; import { data } from '../../data';
import { header } from '../../header'; 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 { layout } from '../../layout';
import { toolbar } from '../../toolbar'; import { toolbar } from '../../toolbar';
import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge'; import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText'; 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_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid'; import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox'; import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider'; 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 { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar'; import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState'; import { applyCSSState } from '../../../utility/applyCSSState';
const toolbarSetting = {}; const toolbarSetting = {};
@ -65,7 +43,7 @@ toolbarSetting.disable = () => {
toolbarSetting.control.location.newLine.enable(); toolbarSetting.control.location.newLine.enable();
break; break;
}; }
}; };
@ -85,7 +63,7 @@ toolbarSetting.size = (parent) => {
toolbarSetting.edge.size = new Edge({ primary: toolbar.current.element.toolbar }); toolbarSetting.edge.size = new Edge({ primary: toolbar.current.element.toolbar });
break; break;
}; }
toolbarSetting.control.size = new Control_slider({ toolbarSetting.control.size = new Control_slider({
object: state.get.current(), object: state.get.current(),
@ -148,7 +126,7 @@ toolbarSetting.location = (parent) => {
toolbarSetting.edge.size = new Edge({ primary: toolbar.current.element.toolbar }); toolbarSetting.edge.size = new Edge({ primary: toolbar.current.element.toolbar });
break; break;
}; }
data.save(); data.save();
} }
@ -164,7 +142,7 @@ toolbarSetting.location = (parent) => {
id: 'header-newLine', id: 'header-newLine',
labelText: 'New line', labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.', description: 'Force on to a new line and seperate from other Header items.',
action: function() { action: function () {
applyCSSState('toolbar.newLine'); applyCSSState('toolbar.newLine');
data.save(); data.save();
} }
@ -271,4 +249,4 @@ toolbarSetting.controls = (parent) => {
}; };
export { toolbarSetting } export { toolbarSetting };

26
src/component/menuFrame/index.js
View File

@ -1,9 +1,7 @@
import { state } from '../state'; import { state } from '../state';
import { data } from '../data'; import { data } from '../data';
import { menu } from '../menu';
import { pageLock } from '../pageLock'; import { pageLock } from '../pageLock';
import { Button } from '../button';
import { Shade } from '../shade'; import { Shade } from '../shade';
import { MenuNav } from '../menuNav'; import { MenuNav } from '../menuNav';
import { MenuClose } from '../menuClose'; import { MenuClose } from '../menuClose';
@ -15,7 +13,7 @@ import { clearChildNode } from '../../utility/clearChildNode';
import './index.css'; import './index.css';
export const MenuFrame = function({ export const MenuFrame = function ({
navData = [] navData = []
} = {}) { } = {}) {
@ -45,7 +43,7 @@ export const MenuFrame = function({
html.classList.add('is-menu-open'); html.classList.add('is-menu-open');
} else { } else {
html.classList.remove('is-menu-open'); html.classList.remove('is-menu-open');
}; }
}; };
@ -65,7 +63,7 @@ export const MenuFrame = function({
body.removeChild(this.element.menu); body.removeChild(this.element.menu);
}; }
}); });
@ -122,8 +120,8 @@ export const MenuFrame = function({
const body = document.querySelector('body'); const body = document.querySelector('body');
if (body.contains(this.element.menu)) { if (body.contains(this.element.menu)) {
body.removeChild(this.element.menu) body.removeChild(this.element.menu);
}; }
}, 6000); }, 6000);
@ -137,7 +135,7 @@ export const MenuFrame = function({
if ('pushState' in history) { if ('pushState' in history) {
history.pushState('', document.title, location.origin + location.pathname + location.search); history.pushState('', document.title, location.origin + location.pathname + location.search);
}; }
}; };
@ -201,7 +199,7 @@ export const MenuFrame = function({
if (!path.includes(this.element.menu)) { if (!path.includes(this.element.menu)) {
this.close(); this.close();
}; }
}; };
@ -239,9 +237,9 @@ export const MenuFrame = function({
event.preventDefault(); event.preventDefault();
} }
}; }
}; }
} }
}; };
@ -262,7 +260,7 @@ export const MenuFrame = function({
clearChildNode(this.element.content); clearChildNode(this.element.content);
navData.forEach((item, i) => { navData.forEach((item) => {
if (item.active) { if (item.active) {
@ -270,7 +268,7 @@ export const MenuFrame = function({
this.element.content.classList.add('menu-content-overscroll'); this.element.content.classList.add('menu-content-overscroll');
} else { } else {
this.element.content.classList.remove('menu-content-overscroll'); this.element.content.classList.remove('menu-content-overscroll');
}; }
const menuContent = new MenuContent({ const menuContent = new MenuContent({
activeNavData: item, activeNavData: item,
@ -279,7 +277,7 @@ export const MenuFrame = function({
menuContent.content(); menuContent.content();
}; }
}); });

41
src/component/menuNav/index.js
View File

@ -1,4 +1,3 @@
import { menu } from '../menu';
import { Button } from '../button'; import { Button } from '../button';
@ -6,7 +5,7 @@ import { node } from '../../utility/node';
import './index.css'; import './index.css';
export const MenuNav = function({ export const MenuNav = function ({
navData = {}, navData = {},
action = false action = false
} = {}) { } = {}) {
@ -15,7 +14,7 @@ export const MenuNav = function({
current: {}, current: {},
set: () => { set: () => {
navData.forEach((item, i) => { navData.forEach((item) => {
this.state.current[this.makeId(item.name)] = item.active; this.state.current[this.makeId(item.name)] = item.active;
@ -26,17 +25,17 @@ export const MenuNav = function({
for (let key in this.state.current) { for (let key in this.state.current) {
this.state.current[key] = false; this.state.current[key] = false;
}; }
this.state.current[this.makeId(name)] = true; this.state.current[this.makeId(name)] = true;
navData.forEach((item, i) => { navData.forEach((item) => {
item.active = false; item.active = false;
if (item.name === name || item.name.toLowerCase() === name) { if (item.name === name || item.name.toLowerCase() === name) {
item.active = true; item.active = true;
}; }
}); });
@ -54,12 +53,12 @@ export const MenuNav = function({
this.init = () => { this.init = () => {
this.element.item.forEach((item, i) => { this.element.item.forEach((item) => {
if (item.subLevel) { if (item.subLevel) {
item.subLevel.classList.add('active'); item.subLevel.classList.add('active');
item.subLevel.setAttribute('style', '--menu-subnav-height: ' + item.subLevel.getBoundingClientRect().height + 'px;'); item.subLevel.setAttribute('style', '--menu-subnav-height: ' + item.subLevel.getBoundingClientRect().height + 'px;');
item.subLevel.classList.remove('active'); item.subLevel.classList.remove('active');
}; }
}); });
this.update(); this.update();
@ -78,13 +77,13 @@ export const MenuNav = function({
if (item.sub) { if (item.sub) {
this.element.item[i].subLevel.classList.add('active'); this.element.item[i].subLevel.classList.add('active');
}; }
if (this.element.item[i].subLevelItem.length > 0) { 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; item.tabIndex = 1;
}); });
}; }
} else { } else {
@ -94,15 +93,15 @@ export const MenuNav = function({
if (item.sub) { if (item.sub) {
this.element.item[i].subLevel.classList.remove('active'); this.element.item[i].subLevel.classList.remove('active');
}; }
if (this.element.item[i].subLevelItem.length > 0) { 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; item.tabIndex = -1;
}); });
}; }
}; }
}); });
@ -116,7 +115,7 @@ export const MenuNav = function({
this.assemble = () => { this.assemble = () => {
navData.forEach((item, i) => { navData.forEach((item) => {
const navItem = { const navItem = {
topLevel: false, topLevel: false,
@ -137,7 +136,7 @@ export const MenuNav = function({
if (action) { if (action) {
action(); action();
}; }
} }
}); });
@ -148,7 +147,7 @@ export const MenuNav = function({
const subNav = node('div|class:menu-subnav'); 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'); 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; navItem.subLevel = subNav;
}; }
this.element.item.push(navItem); this.element.item.push(navItem);
}); });
this.element.item.forEach((item, i) => { this.element.item.forEach((item) => {
item.menuNavItem = node('div|class:menu-nav-item'); item.menuNavItem = node('div|class:menu-nav-item');
@ -174,7 +173,7 @@ export const MenuNav = function({
if (item.subLevel) { if (item.subLevel) {
item.menuNavItem.appendChild(item.subLevel); item.menuNavItem.appendChild(item.subLevel);
}; }
this.element.nav.appendChild(item.menuNavItem); this.element.nav.appendChild(item.menuNavItem);

37
src/component/modal/index.js
View File

@ -1,5 +1,4 @@
import { state } from '../state'; import { state } from '../state';
import { data } from '../data';
import { pageLock } from '../pageLock'; import { pageLock } from '../pageLock';
import { Button } from '../button'; import { Button } from '../button';
@ -13,7 +12,7 @@ import { isValidString } from '../../utility/isValidString';
import './index.css'; import './index.css';
export const Modal = function({ export const Modal = function ({
heading = false, heading = false,
content = false, content = false,
openAction = false, openAction = false,
@ -56,7 +55,7 @@ export const Modal = function({
body.removeChild(this.element.modal); body.removeChild(this.element.modal);
}; }
}); });
@ -80,7 +79,7 @@ export const Modal = function({
if (openAction) { if (openAction) {
openAction(); openAction();
}; }
pageLock.render(); pageLock.render();
@ -100,7 +99,7 @@ export const Modal = function({
if (closeAction) { if (closeAction) {
closeAction(); closeAction();
}; }
clearTimeout(this.delayedForceRemove); clearTimeout(this.delayedForceRemove);
@ -109,8 +108,8 @@ export const Modal = function({
const body = document.querySelector('body'); const body = document.querySelector('body');
if (body.contains(this.element.modal)) { if (body.contains(this.element.modal)) {
body.removeChild(this.element.modal) body.removeChild(this.element.modal);
}; }
}, 6000); }, 6000);
@ -169,7 +168,7 @@ export const Modal = function({
if (!path.includes(this.element.modal) && !path.includes(suggest)) { if (!path.includes(this.element.modal) && !path.includes(suggest)) {
this.close(); this.close();
}; }
}; };
@ -203,9 +202,9 @@ export const Modal = function({
event.preventDefault(); event.preventDefault();
} }
}; }
}; }
} }
@ -232,9 +231,9 @@ export const Modal = function({
this.element.modal.style.setProperty('--modal-width', 70); this.element.modal.style.setProperty('--modal-width', 70);
break; break;
}; }
}; }
}; };
this.successButton = new Button({ this.successButton = new Button({
@ -246,7 +245,7 @@ export const Modal = function({
if (successAction) { if (successAction) {
successAction(); successAction();
}; }
this.close(); this.close();
@ -262,7 +261,7 @@ export const Modal = function({
if (cancelAction) { if (cancelAction) {
cancelAction(); cancelAction();
}; }
this.close(); this.close();
@ -277,7 +276,7 @@ export const Modal = function({
if (headingString.length > maxHeadingLength) { if (headingString.length > maxHeadingLength) {
headingString = trimString(headingString.substring(0, maxHeadingLength)) + '...'; headingString = trimString(headingString.substring(0, maxHeadingLength)) + '...';
}; }
this.element.heading.text.innerHTML = headingString; this.element.heading.text.innerHTML = headingString;
@ -285,7 +284,7 @@ export const Modal = function({
this.element.content.content.appendChild(this.element.heading.heading); this.element.content.content.appendChild(this.element.heading.heading);
}; }
if (content) { if (content) {
if (typeof content == 'string') { if (typeof content == 'string') {
@ -298,8 +297,8 @@ export const Modal = function({
this.element.content.content.appendChild(content); this.element.content.content.appendChild(content);
}; }
}; }
this.element.content.wrapper.appendChild(this.element.content.content); this.element.content.wrapper.appendChild(this.element.content.content);
@ -313,7 +312,7 @@ export const Modal = function({
if (maxHeight) { if (maxHeight) {
this.element.modal.classList.add('modal-max-height'); this.element.modal.classList.add('modal-max-height');
}; }
}; };

2
src/component/pageLock/index.js
View File

@ -10,7 +10,7 @@ pageLock.render = () => {
html.classList.add('is-scroll-disabled'); html.classList.add('is-scroll-disabled');
} else { } else {
html.classList.remove('is-scroll-disabled'); html.classList.remove('is-scroll-disabled');
}; }
}; };

19
src/component/presetThemeTile/index.js
View File

@ -1,12 +1,10 @@
import { state } from '../state'; import { state } from '../state';
import { data } from '../data'; import { data } from '../data';
import { theme } from '../theme'; import { theme } from '../theme';
import { menu } from '../menu';
import { toolbar } from '../toolbar'; import { toolbar } from '../toolbar';
import { layout } from '../layout'; import { layout } from '../layout';
import { header } from '../header'; import { header } from '../header';
import { bookmark } from '../bookmark'; import { bookmark } from '../bookmark';
import { group } from '../group';
import { groupAndBookmark } from '../groupAndBookmark'; import { groupAndBookmark } from '../groupAndBookmark';
import { themeSetting } from '../menuContent/themeSetting'; import { themeSetting } from '../menuContent/themeSetting';
@ -15,14 +13,13 @@ import { Button } from '../button';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { convertColor } from '../../utility/convertColor'; import { convertColor } from '../../utility/convertColor';
import { isValidString } from '../../utility/isValidString'; import { isValidString } from '../../utility/isValidString';
import { complexNode } from '../../utility/complexNode';
import { applyCSSVar } from '../../utility/applyCSSVar'; import { applyCSSVar } from '../../utility/applyCSSVar';
import { applyCSSClass } from '../../utility/applyCSSClass'; import { applyCSSClass } from '../../utility/applyCSSClass';
import { applyCSSState } from '../../utility/applyCSSState'; import { applyCSSState } from '../../utility/applyCSSState';
import './index.css'; import './index.css';
export const PresetThemeTile = function({ export const PresetThemeTile = function ({
presetThemeData = false presetThemeData = false
} = {}) { } = {}) {
@ -347,13 +344,13 @@ export const PresetThemeTile = function({
darken(); darken();
} else if (window.matchMedia('(prefers-color-scheme:light)').matches) { } else if (window.matchMedia('(prefers-color-scheme:light)').matches) {
lighten(); 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); 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.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%)'); 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')); 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.preset.button.appendChild(this.element.name);
}; }
this.element.front.appendChild(this.element.preset.button); this.element.front.appendChild(this.element.preset.button);

3
src/component/reset/index.js
View File

@ -1,3 +0,0 @@
import './index.css';
export const reset = {};

41
src/component/search/index.js
View File

@ -1,11 +1,9 @@
import { data } from '../data'; import { data } from '../data';
import { state } from '../state'; import { state } from '../state';
import { group } from '../group';
import { bookmark } from '../bookmark'; import { bookmark } from '../bookmark';
import { groupAndBookmark } from '../groupAndBookmark'; import { groupAndBookmark } from '../groupAndBookmark';
import { searchEnginePreset } from '../searchEnginePreset'; import { searchEnginePreset } from '../searchEnginePreset';
import * as form from '../form';
import { Button } from '../button'; import { Button } from '../button';
import { Control_text } from '../control/text'; import { Control_text } from '../control/text';
@ -13,11 +11,10 @@ import { Control_text } from '../control/text';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { trimString } from '../../utility/trimString'; import { trimString } from '../../utility/trimString';
import { isValidString } from '../../utility/isValidString'; import { isValidString } from '../../utility/isValidString';
import { complexNode } from '../../utility/complexNode';
import './index.css'; import './index.css';
export const Search = function() { export const Search = function () {
this.element = { this.element = {
search: node('div|class:search'), search: node('div|class:search'),
@ -62,7 +59,7 @@ export const Search = function() {
state.get.current().search = false; state.get.current().search = false;
}; }
data.save(); data.save();
@ -76,7 +73,7 @@ export const Search = function() {
placeholder = 'Find bookmarks or search'; placeholder = 'Find bookmarks or search';
} else { } else {
placeholder = 'Search'; placeholder = 'Search';
}; }
switch (state.get.current().header.search.engine.selected) { 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; placeholder = placeholder + ' ' + state.get.current().header.search.engine.custom.name;
}; }
break; break;
@ -96,7 +93,7 @@ export const Search = function() {
break; break;
}; }
this.element.input.text.placeholder = placeholder; this.element.input.text.placeholder = placeholder;
@ -122,7 +119,7 @@ export const Search = function() {
this.element.form.setAttribute('action', ''); this.element.form.setAttribute('action', '');
}; }
break; break;
@ -134,11 +131,11 @@ export const Search = function() {
break; break;
}; }
if (state.get.current().header.search.newTab) { 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(); 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; item.searchMatch = false;
@ -168,7 +165,7 @@ export const Search = function() {
if (matchUrl || matchName) { if (matchUrl || matchName) {
item.searchMatch = true; item.searchMatch = true;
}; }
}); });
@ -180,7 +177,7 @@ export const Search = function() {
this.clearSearch(); this.clearSearch();
}; }
groupAndBookmark.render(); groupAndBookmark.render();
@ -188,9 +185,9 @@ export const Search = function() {
this.clearSearch = () => { this.clearSearch = () => {
bookmark.all.forEach((item, i) => { bookmark.all.forEach((item) => {
item.items.forEach((item, i) => { item.items.forEach((item) => {
delete item.searchMatch; delete item.searchMatch;
@ -231,13 +228,13 @@ export const Search = function() {
count.group.push({ count.group.push({
bookmarkCount: item.items.length, bookmarkCount: item.items.length,
searchMatch: 0 searchMatch: 0
}) });
const groupIndex = i; 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'); html.classList.remove('is-header-search-opacity-low');
}; }
}; };

6
src/component/searchEmpty/index.js
View File

@ -9,7 +9,7 @@ import { isValidString } from '../../utility/isValidString';
import './index.css'; import './index.css';
export const SearchEmpty = function() { export const SearchEmpty = function () {
this.element = { this.element = {
empty: node('div|class:search-empty'), empty: node('div|class:search-empty'),
@ -34,7 +34,7 @@ export const SearchEmpty = function() {
this.element.helper.textContent = 'Press "Enter" to Search ' + state.get.current().header.search.engine.custom.name; this.element.helper.textContent = 'Press "Enter" to Search ' + state.get.current().header.search.engine.custom.name;
}; }
break; break;
@ -44,7 +44,7 @@ export const SearchEmpty = function() {
break; break;
}; }
this.element.empty.appendChild(this.element.description); this.element.empty.appendChild(this.element.description);

8
src/component/shade/index.js
View File

@ -2,7 +2,7 @@ import { node } from '../../utility/node';
import './index.css'; import './index.css';
export const Shade = function() { export const Shade = function () {
this.element = { this.element = {
shade: node('div|class:shade') shade: node('div|class:shade')
@ -16,7 +16,7 @@ export const Shade = function() {
this.element.shade.addEventListener('transitionend', (event) => { this.element.shade.addEventListener('transitionend', (event) => {
if (event.propertyName === 'opacity' && getComputedStyle(this.element.shade).opacity == 0) { if (event.propertyName === 'opacity' && getComputedStyle(this.element.shade).opacity == 0) {
body.removeChild(this.element.shade); body.removeChild(this.element.shade);
}; }
}); });
body.appendChild(this.element.shade); body.appendChild(this.element.shade);
@ -41,8 +41,8 @@ export const Shade = function() {
const body = document.querySelector('body'); const body = document.querySelector('body');
if (body.contains(this.element.shade)) { if (body.contains(this.element.shade)) {
body.removeChild(this.element.shade) body.removeChild(this.element.shade);
}; }
}, 6000); }, 6000);

2
src/component/stagedBookmark/index.js
View File

@ -1,6 +1,6 @@
import { bookmarkDefault } from '../bookmarkDefault'; import { bookmarkDefault } from '../bookmarkDefault';
export const StagedBookmark = function(bookmarkData) { export const StagedBookmark = function (bookmarkData) {
this.link = bookmarkData || JSON.parse(JSON.stringify(bookmarkDefault)); this.link = bookmarkData || JSON.parse(JSON.stringify(bookmarkDefault));

2
src/component/stagedCustomTheme/index.js
View File

@ -1,6 +1,6 @@
import { customThemeDefault } from '../customThemeDefault'; import { customThemeDefault } from '../customThemeDefault';
export const StagedCustomTheme = function(customThemeData) { export const StagedCustomTheme = function (customThemeData) {
this.theme = customThemeData || JSON.parse(JSON.stringify(customThemeDefault())); this.theme = customThemeData || JSON.parse(JSON.stringify(customThemeDefault()));

Some files were not shown because too many files have changed in this diff Show More