extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-22 08:03:18 +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",
"scripts": {
"start": "webpack serve --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
"build": "webpack --config webpack.prod.js",
"lint": "eslint --fix --ext .js .",
"prepare": "husky install"
},
"keywords": [
"startpage",
@ -29,7 +31,10 @@
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.3.0",
"css-minimizer-webpack-plugin": "^3.0.2",
"eslint": "^7.32.0",
"eslint-plugin-unused-imports": "^1.1.5",
"html-webpack-plugin": "^5.3.1",
"husky": "^7.0.2",
"mini-css-extract-plugin": "^2.2.0",
"moment": "^2.29.1",
"sortablejs": "^1.13.0",

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

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

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

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

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

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

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

@ -1,161 +1,161 @@
const bookmarkPreset = {};
const bookmarkPreset = {};
bookmarkPreset.get = () => {
return [{
name: { text: 'Cool stuff', show: true },
collapse: false,
toolbar: { openAll: { show: true }, collapse: { show: true } },
items: [{
url: 'https://zombiefox.github.io/awesomeSheet/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626297988913
}, {
url: 'https://www.amazon.co.uk/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626297999213
}, {
url: 'https://mail.google.com/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626298011293
}, {
url: 'https://www.reddit.com/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626298017175
}, {
url: 'https://www.netflix.com/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626298022303
}, {
url: 'https://drive.google.com/drive/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626298028996
}]
}, {
name: { text: 'Dev sites', show: true },
collapse: false,
toolbar: { openAll: { show: true }, collapse: { show: true } },
items: [{
url: 'https://devdocs.io/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626298034209
}, {
url: 'https://github.com/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626298038470
}]
}];
};
bookmarkPreset.get = () => {
return [{
name: { text: 'Cool stuff', show: true },
collapse: false,
toolbar: { openAll: { show: true }, collapse: { show: true } },
items: [{
url: 'https://zombiefox.github.io/awesomeSheet/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626297988913
}, {
url: 'https://www.amazon.co.uk/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626297999213
}, {
url: 'https://mail.google.com/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626298011293
}, {
url: 'https://www.reddit.com/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626298017175
}, {
url: 'https://www.netflix.com/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626298022303
}, {
url: 'https://drive.google.com/drive/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626298028996
}]
}, {
name: { text: 'Dev sites', show: true },
collapse: false,
toolbar: { openAll: { show: true }, collapse: { show: true } },
items: [{
url: 'https://devdocs.io/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
timestamp: 1626298034209
}, {
url: 'https://github.com/',
display: {
alignment: 'center-center',
direction: 'vertical',
order: 'visual-name',
rotate: 0,
translate: { x: 0, y: 0 },
gutter: 25,
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 } }
},
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 },
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
border: 0,
shape: { wide: false, tall: false },
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';
export const BookmarkPreview = function({
export const BookmarkPreview = function ({
bookmarkData = false
} = {}) {
@ -20,19 +20,19 @@ export const BookmarkPreview = function({
this.grid.classList.add('bookmark-preview-grid-tall');
} else {
this.grid.classList.remove('bookmark-preview-grid-tall');
};
}
if (bookmarkData.link.shape.wide) {
this.grid.classList.add('bookmark-preview-grid-wide');
} else {
this.grid.classList.remove('bookmark-preview-grid-wide');
};
}
if (bookmarkData.link.shape.tall || bookmarkData.link.shape.wide) {
this.title.textContent = 'Preview (50% scale)';
} else {
this.title.textContent = 'Preview';
};
}
};

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

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

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

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

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

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

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

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

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

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

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 { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { get } from '../../../utility/get';
import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
import { clearChildNode } from '../../../utility/clearChildNode';
export const Control_groupText = function({
export const Control_groupText = function ({
text = false,
classList = []
} = {}) {
@ -32,7 +23,7 @@ export const Control_groupText = function({
this.groupText.textContent = content;
} else if (content && content != '') {
this.groupText.appendChild(content);
};
}
};
this.wrap = () => {
@ -40,7 +31,7 @@ export const Control_groupText = function({
children: [
this.groupText
]
})
});
};
this.disable = () => {

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

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

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

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

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

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

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

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

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

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

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 { Button } from '../../button';
import { Collapse } from '../../collapse';
import { node } from '../../../utility/node';
import { get } from '../../../utility/get';
import { set } from '../../../utility/set';
import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
import { minMax } from '../../../utility/minMax';
export const Control_sliderSlim = function({
export const Control_sliderSlim = function ({
object = {},
path = false,
id = 'name',
@ -39,14 +32,14 @@ export const Control_sliderSlim = function({
forInput: id,
text: labelText,
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'];
if (hue) {
classList.push('input-range-hue-spectrum');
};
}
this.range = form.input.range({
id: id,
@ -61,11 +54,11 @@ export const Control_sliderSlim = function({
set({ object: object, path: path, value: this.value() });
};
}
if (action) { action(); };
if (action) { action(); }
if (sliderAction) { sliderAction(); };
if (sliderAction) { sliderAction(); }
this.number.value = get({ object: object, path: path });
@ -95,11 +88,11 @@ export const Control_sliderSlim = function({
})
});
};
}
if (action) { action(); };
if (action) { action(); }
if (numberAction) { numberAction(); };
if (numberAction) { numberAction(); }
this.update({ delay: true });
@ -122,9 +115,9 @@ export const Control_sliderSlim = function({
this.update();
if (action) { action(); };
if (action) { action(); }
if (resetAction) { resetAction(); };
if (resetAction) { resetAction(); }
}
});
@ -145,7 +138,7 @@ export const Control_sliderSlim = function({
this.delayedUpdate = setTimeout(updateControl, 2000);
} else {
updateControl();
};
}
};
@ -162,7 +155,7 @@ export const Control_sliderSlim = function({
if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) {
formGroup.appendChild(this.reset.button);
};
}
const formInline = form.inline({
block: true,

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

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

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

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

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

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

@ -1,29 +1,13 @@
import * as form from '../form';
import { Button } from '../button';
import { Control_helperText } from '../control/helperText';
import { Control_inputButton } from '../control/inputButton';
import { Control_groupText } from '../control/groupText';
import { Control_radio } from '../control/radio';
import { Control_radioGrid } from '../control/radioGrid';
import { Control_checkbox } from '../control/checkbox';
import { Control_slider } from '../control/slider';
import { Control_sliderSlim } from '../control/sliderSlim';
import { Control_colorMixer } from '../control/colorMixer';
import { Control_color } from '../control/color';
import { Control_text } from '../control/text';
import { Control_select } from '../control/select';
import { node } from '../../utility/node';
import { complexNode } from '../../utility/complexNode';
import { isValidString } from '../../utility/isValidString';
import { trimString } from '../../utility/trimString';
import { ordinalNumber } from '../../utility/ordinalNumber';
import { randomString } from '../../utility/randomString';
import { randomNumber } from '../../utility/randomNumber';
export const CustomThemeForm = function({
export const CustomThemeForm = function ({
customThemeData = false
} = {}) {

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

@ -6,7 +6,6 @@ import { toolbar } from '../toolbar';
import { layout } from '../layout';
import { header } from '../header';
import { bookmark } from '../bookmark';
import { group } from '../group';
import { groupAndBookmark } from '../groupAndBookmark';
import { customTheme } from '../customTheme';
import { themeSetting } from '../menuContent/themeSetting';
@ -19,7 +18,6 @@ import { StagedCustomTheme } from '../stagedCustomTheme';
import { node } from '../../utility/node';
import { convertColor } from '../../utility/convertColor';
import { isValidString } from '../../utility/isValidString';
import { complexNode } from '../../utility/complexNode';
import { applyCSSVar } from '../../utility/applyCSSVar';
import { applyCSSClass } from '../../utility/applyCSSClass';
import { applyCSSState } from '../../utility/applyCSSState';
@ -393,13 +391,13 @@ export const CustomThemeTile = function({
this.control.disable = () => {
for (var key in this.control.button) {
this.control.button[key].disable();
};
}
};
this.control.enable = () => {
for (var key in this.control.button) {
this.control.button[key].enable();
};
}
};
this.previewTile = () => {
@ -432,13 +430,13 @@ export const CustomThemeTile = function({
darken();
} else if (window.matchMedia('(prefers-color-scheme:light)').matches) {
lighten();
};
}
};
}
if (hsl.l < 0) { hsl.l = 0; };
if (hsl.l < 0) { hsl.l = 0; }
if (hsl.l > 100) { hsl.l = 100; };
if (hsl.l > 100) { hsl.l = 100; }
let rgb = convertColor.hsl.rgb(hsl);
@ -453,7 +451,7 @@ export const CustomThemeTile = function({
this.element.preview.appendChild(node('span|class:theme-custom-background-0' + i));
};
}
this.element.tile.style.setProperty('--theme-custom-text', '0, 0%, calc(((((var(--theme-custom-background-01-rgb-r) * var(--theme-t-r)) + (var(--theme-custom-background-01-rgb-g) * var(--theme-t-g)) + (var(--theme-custom-background-01-rgb-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%)');
@ -465,7 +463,7 @@ export const CustomThemeTile = function({
this.element.preview.appendChild(node('span|class:theme-custom-accent'));
return node('div|class:theme-custom-tile')
return node('div|class:theme-custom-tile');
};
@ -481,7 +479,7 @@ export const CustomThemeTile = function({
this.element.custom.button.appendChild(this.element.name);
};
}
this.element.front.appendChild(this.element.custom.button);
@ -499,7 +497,7 @@ export const CustomThemeTile = function({
this.control.enable();
} else {
this.control.disable();
};
}
};

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

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

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

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

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 { node } from '../../utility/node';
import { complexNode } from '../../utility/complexNode';
import './index.css';
export const DropFile = function({
export const DropFile = function ({
heading = 'Drop file here',
dropAaction = false,
enterAction = false,
@ -38,7 +35,7 @@ export const DropFile = function({
if (enterAction) {
enterAction();
};
}
});
@ -51,7 +48,7 @@ export const DropFile = function({
if (leaveAction) {
leaveAction();
};
}
});
@ -75,7 +72,7 @@ export const DropFile = function({
if (dropAaction) {
dropAaction();
};
}
});
@ -90,7 +87,7 @@ export const DropFile = function({
children: [
this.element.drop
]
})
});
};
this.assemble();

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

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

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

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

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

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);
};
}
return feedback;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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');
let delayUpdate = null;
if (id) {
input.setAttribute('id', id);
};
}
if (value || (typeof value === 'number' && value === 0)) {
input.setAttribute('value', value);
};
}
if (placeholder) {
input.setAttribute('placeholder', placeholder);
};
}
if (classList.length > 0) {
classList.forEach((item, i) => {
classList.forEach((item) => {
input.classList.add(item);
});
};
}
if (func) {
input.addEventListener('input', (event) => {
input.addEventListener('input', () => {
func();
});
};
}
return input;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,4 +1,3 @@
import { state } from '../state';
import { bookmark } from '../bookmark';
import { Button } from '../button';
@ -7,7 +6,7 @@ import { node } from '../../utility/node';
import './index.css';
export const GroupEmpty = function({
export const GroupEmpty = function ({
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 { groupDefault } from '../groupDefault';
import * as form from '../form';
import { Button } from '../button';
import { Suggest } from '../suggest';
import { Collapse } from '../collapse';
import { Tab } from '../tab';
import { Control_helperText } from '../control/helperText';
import { Control_inputButton } from '../control/inputButton';
import { Control_groupText } from '../control/groupText';
import { Control_radio } from '../control/radio';
import { Control_radioGrid } from '../control/radioGrid';
import { Control_checkbox } from '../control/checkbox';
import { Control_slider } from '../control/slider';
import { Control_sliderSlim } from '../control/sliderSlim';
import { Control_colorMixer } from '../control/colorMixer';
import { Control_color } from '../control/color';
import { Control_text } from '../control/text';
import { Control_select } from '../control/select';
import { node } from '../../utility/node';
import { complexNode } from '../../utility/complexNode';
import { isValidString } from '../../utility/isValidString';
import { trimString } from '../../utility/trimString';
import { ordinalNumber } from '../../utility/ordinalNumber';
import { randomString } from '../../utility/randomString';
import { randomNumber } from '../../utility/randomNumber';
import './index.css';
export const GroupForm = function({
export const GroupForm = function ({
groupData = false
} = {}) {
@ -55,19 +36,19 @@ export const GroupForm = function({
if (groupData.type.new) {
count++;
};
}
for (var i = 1; i <= count; i++) {
option.push(ordinalNumber(i));
};
}
} else {
option.push(ordinalNumber(1));
};
}
return option;
@ -141,7 +122,7 @@ export const GroupForm = function({
} else {
this.control.group.name.text.disable();
this.control.group.name.random.disable();
};
}
};
@ -247,7 +228,7 @@ export const GroupForm = function({
this.element.form.addEventListener('keydown', (event) => {
if (event.keyCode == 13) { event.preventDefault(); return false; };
if (event.keyCode == 13) { event.preventDefault(); return false; }
});

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

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

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

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

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

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

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 { Button } from '../button';
import { Control_helperText } from '../control/helperText';
import { Control_inputButton } from '../control/inputButton';
import { Control_groupText } from '../control/groupText';
import { Control_radio } from '../control/radio';
import { Control_radioGrid } from '../control/radioGrid';
import { Control_checkbox } from '../control/checkbox';
import { Control_slider } from '../control/slider';
import { Control_sliderSlim } from '../control/sliderSlim';
import { Control_colorMixer } from '../control/colorMixer';
import { Control_color } from '../control/color';
import { Control_text } from '../control/text';
import { Control_select } from '../control/select';
import { node } from '../../utility/node';
import { complexNode } from '../../utility/complexNode';
export const ImportForm = function({
export const ImportForm = function ({
dataToImport = false,
state = false
} = {}) {
@ -41,7 +27,7 @@ export const ImportForm = function({
let count = 0;
dataToImport.bookmark.forEach((item, i) => { count = count + item.items.length });
dataToImport.bookmark.forEach((item) => { count = count + item.items.length; });
return count;
@ -56,7 +42,7 @@ export const ImportForm = function({
path: 'bookmark.include',
id: 'bookmark-include',
labelText: 'Bookmarks',
description: [`This includes <strong>${this.count.bookmark()} ${this.count.bookmark() > 1 ? `Bookmarks` : `Bookmark`}</strong> in <strong>${dataToImport.bookmark.length} ${dataToImport.bookmark.length > 1 ? `Groups` : `Group`}.<strong>`, 'Bookmarks will keep any custom Colours, Accents and Borders when imported.'],
description: [`This includes <strong>${this.count.bookmark()} ${this.count.bookmark() > 1 ? 'Bookmarks' : 'Bookmark'}</strong> in <strong>${dataToImport.bookmark.length} ${dataToImport.bookmark.length > 1 ? 'Groups' : 'Group'}.<strong>`, 'Bookmarks will keep any custom Colours, Accents and Borders when imported.'],
action: () => {
this.disable();
}
@ -98,7 +84,7 @@ export const ImportForm = function({
this.control.import.bookmark.type.enable();
} else {
this.control.import.bookmark.type.disable();
};
}
};

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

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

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

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

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

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

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

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

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

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

@ -6,7 +6,7 @@ import { node } from '../../utility/node';
import './index.css';
export const MenuClose = function() {
export const MenuClose = function () {
this.element = {
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 { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { appName } from '../../appName';
import { APP_NAME } from '../../../constant';
import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
import { Control_groupText } from '../../control/groupText';
import { Control_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim';
import { Control_sliderDouble } from '../../control/sliderDouble';
import { Control_colorMixer } from '../../control/colorMixer';
import { Control_color } from '../../control/color';
import { Control_text } from '../../control/text';
import { Control_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
const appSetting = {};
appSetting[appName.toLowerCase()] = (parent) => {
appSetting[APP_NAME.toLowerCase()] = (parent) => {
const githubLink = new Link({ text: 'GitHub.', href: 'https://github.com/zombieFox/' + appName, openNew: true });
const githubLink = new Link({ text: 'GitHub.', href: 'https://github.com/zombieFox/' + APP_NAME, openNew: true });
const redditLink = new Link({ text: `Reddit ${appName} community.`, href: 'https://www.reddit.com/r/' + appName, openNew: true });
const redditLink = new Link({ text: `Reddit ${APP_NAME} community.`, href: 'https://www.reddit.com/r/' + APP_NAME, openNew: true });
const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: 'https://github.com/zombieFox/' + appName + '/blob/master/license', openNew: true });
const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: 'https://github.com/zombieFox/' + APP_NAME + '/blob/master/license', openNew: true });
const para1 = node('p');
@ -60,14 +28,14 @@ appSetting[appName.toLowerCase()] = (parent) => {
const para3 = node('p');
para3.innerHTML = `${appName} uses the ${licenseLink.link().outerHTML}`;
para3.innerHTML = `${APP_NAME} uses the ${licenseLink.link().outerHTML}`;
parent.appendChild(
node('div', [
node('div|class:version', [
logo.render(),
node('div|class:version-details', [
node('h1:' + appName + '|class:version-app-name'),
node('h1:' + APP_NAME + '|class:version-app-name'),
node('p:Version ' + version.number + '|class:version-number'),
node('p:' + version.name + '|class:version-name small')
])
@ -81,4 +49,4 @@ appSetting[appName.toLowerCase()] = (parent) => {
};
export { appSetting }
export { appSetting };

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

@ -1,14 +1,7 @@
import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
import { bookmark } from '../../bookmark';
import { theme } from '../../theme';
import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { groupAndBookmark } from '../../groupAndBookmark';
import * as form from '../../form';
@ -16,26 +9,13 @@ import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
import { Control_groupText } from '../../control/groupText';
import { Control_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim';
import { Control_sliderDouble } from '../../control/sliderDouble';
import { Control_colorMixer } from '../../control/colorMixer';
import { Control_color } from '../../control/color';
import { Control_text } from '../../control/text';
import { Control_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
@ -77,7 +57,7 @@ bookmarkSetting.disable = () => {
bookmarkSetting.control.sort.letter.disable();
bookmarkSetting.control.sort.icon.disable();
bookmarkSetting.control.sort.name.disable();
};
}
};
@ -91,7 +71,7 @@ bookmarkSetting.general = (parent) => {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
};
}
bookmarkSetting.control.general.show = new Control_checkbox({
object: state.get.current(),
@ -112,13 +92,13 @@ bookmarkSetting.general = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
};
}
} else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
};
}
bookmarkSetting.control.general.collapse.update();
@ -187,13 +167,13 @@ bookmarkSetting.general = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
};
}
} else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
};
}
data.save();
@ -211,14 +191,14 @@ bookmarkSetting.general = (parent) => {
max: state.get.minMax().bookmark.size.max,
action: () => {
applyCSSVar('bookmark.size');
if (state.get.current().bookmark.show && bookmark.tile.current.length > 0 && bookmarkSetting.edge.general.size) { bookmarkSetting.edge.general.size.track(); };
if (state.get.current().bookmark.show && bookmark.tile.current.length > 0 && bookmarkSetting.edge.general.size) { bookmarkSetting.edge.general.size.track(); }
data.save();
},
mouseDownAction: () => {
if (state.get.current().bookmark.show && bookmark.tile.current.length > 0 && bookmarkSetting.edge.general.size) { bookmarkSetting.edge.general.size.show(); };
if (state.get.current().bookmark.show && bookmark.tile.current.length > 0 && bookmarkSetting.edge.general.size) { bookmarkSetting.edge.general.size.show(); }
},
mouseUpAction: () => {
if (state.get.current().bookmark.show && bookmark.tile.current.length > 0 && bookmarkSetting.edge.general.size) { bookmarkSetting.edge.general.size.hide(); };
if (state.get.current().bookmark.show && bookmark.tile.current.length > 0 && bookmarkSetting.edge.general.size) { bookmarkSetting.edge.general.size.hide(); }
}
});
@ -278,7 +258,7 @@ bookmarkSetting.style = (parent) => {
bookmark.direction.mod.horizontal();
break;
};
}
applyCSSClass('bookmark.style');
@ -290,13 +270,13 @@ bookmarkSetting.style = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
};
}
} else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
};
}
data.save();
@ -331,13 +311,13 @@ bookmarkSetting.orientation = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
};
}
} else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
};
}
data.save();
@ -374,13 +354,13 @@ bookmarkSetting.sort = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
};
}
} else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
};
}
data.save();
@ -402,13 +382,13 @@ bookmarkSetting.sort = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
};
}
} else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
};
}
data.save();
@ -430,13 +410,13 @@ bookmarkSetting.sort = (parent) => {
bookmarkSetting.edge.general.size.update.primary(bookmark.tile.current[0].tile());
};
}
} else {
bookmarkSetting.edge.general.size = new Edge({ primary: bookmark.tile.current[0].tile(), secondary: [bookmark.element.area] });
};
}
data.save();
@ -464,4 +444,4 @@ bookmarkSetting.sort = (parent) => {
};
export { bookmarkSetting }
export { bookmarkSetting };

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

@ -1,44 +1,12 @@
import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
import { bookmark } from '../../bookmark';
import { theme } from '../../theme';
import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { appName } from '../../appName';
import { APP_NAME } from '../../../constant';
import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
import { Control_groupText } from '../../control/groupText';
import { Control_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim';
import { Control_sliderDouble } from '../../control/sliderDouble';
import { Control_colorMixer } from '../../control/colorMixer';
import { Control_color } from '../../control/color';
import { Control_text } from '../../control/text';
import { Control_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
const coffeeSetting = {};
@ -48,7 +16,7 @@ coffeeSetting.coffee = (parent) => {
node('div', [
complexNode({
tag: 'p',
text: appName + ' is free, appreciation is welcome in the form of coffee!'
text: APP_NAME + ' is free, appreciation is welcome in the form of coffee!'
}),
form.wrap({
children: [(new Link({
@ -67,4 +35,4 @@ coffeeSetting.coffee = (parent) => {
};
export { coffeeSetting }
export { coffeeSetting };

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

@ -1,45 +1,18 @@
import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
import { bookmark } from '../../bookmark';
import { theme } from '../../theme';
import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { appName } from '../../appName';
import { APP_NAME } from '../../../constant';
import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { DropFile } from '../../dropFile';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
import { Control_groupText } from '../../control/groupText';
import { Control_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim';
import { Control_sliderDouble } from '../../control/sliderDouble';
import { Control_colorMixer } from '../../control/colorMixer';
import { Control_color } from '../../control/color';
import { Control_text } from '../../control/text';
import { Control_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
const dataSetting = {};
@ -77,7 +50,7 @@ dataSetting.restore = (parent) => {
});
dataSetting.control.restore.restoreHelper = new Control_helperText({
text: ['Restore a previously exported ' + appName + ' backup.']
text: ['Restore a previously exported ' + APP_NAME + ' backup.']
});
dataSetting.control.restore.feedback = form.feedback();
@ -85,7 +58,7 @@ dataSetting.restore = (parent) => {
data.feedback.empty.render(dataSetting.control.restore.feedback);
dataSetting.control.restore.drop = new DropFile({
heading: 'Or drop a ' + appName + ' backup file here.',
heading: 'Or drop a ' + APP_NAME + ' backup file here.',
dropAaction: () => {
data.import.drop({
fileList: dataSetting.control.restore.drop.files,
@ -131,7 +104,7 @@ dataSetting.backup = (parent) => {
});
dataSetting.control.backup.exportHelper = new Control_helperText({
text: ['Download a backup of your ' + appName + ' Bookmarks and Settings.', 'This file can later be imported on this or another deivce.']
text: ['Download a backup of your ' + APP_NAME + ' Bookmarks and Settings.', 'This file can later be imported on this or another deivce.']
});
parent.appendChild(
@ -179,12 +152,12 @@ dataSetting.clear = (parent) => {
iconName: 'warning',
children: [
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({
text: ['Clear all data to reset ' + appName + ' to the default state.', 'Alternatively, it is possible to wipe all settings but keep the current Bookmarks and Groups.']
text: ['Clear all data to reset ' + APP_NAME + ' to the default state.', 'Alternatively, it is possible to wipe all settings but keep the current Bookmarks and Groups.']
});
parent.appendChild(
@ -209,4 +182,4 @@ dataSetting.clear = (parent) => {
};
export { dataSetting }
export { dataSetting };

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

@ -1,48 +1,22 @@
import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
import { bookmark } from '../../bookmark';
import { group } from '../../group';
import { theme } from '../../theme';
import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { groupAndBookmark } from '../../groupAndBookmark';
import { fontawesome } from '../../fontawesome';
import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { StagedGroup } from '../../stagedGroup';
import { StagedBookmark } from '../../stagedBookmark';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
import { Control_groupText } from '../../control/groupText';
import { Control_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim';
import { Control_sliderDouble } from '../../control/sliderDouble';
import { Control_colorMixer } from '../../control/colorMixer';
import { Control_color } from '../../control/color';
import { Control_text } from '../../control/text';
import { Control_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
import { randomNumber } from '../../../utility/randomNumber';
import { randomString } from '../../../utility/randomString';
@ -407,7 +381,7 @@ debugSetting.bookmark = (parent) => {
newBookmarkData.link.display.visual.icon.prefix = 'fas';
} else if (randomIcon.styles.includes('brands')) {
newBookmarkData.link.display.visual.icon.prefix = 'fab';
};
}
newBookmarkData.link.display.name.text = randomString({ adjectivesCount: 1 });
@ -415,7 +389,7 @@ debugSetting.bookmark = (parent) => {
bookmark.item.mod.add(newBookmarkData);
};
}
groupAndBookmark.render();
@ -464,8 +438,8 @@ debugSetting.icon = (parent) => {
])
]
})
)
};
);
}
parent.appendChild(
node('div', [

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

@ -1,45 +1,22 @@
import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
import { bookmark } from '../../bookmark';
import { group } from '../../group';
import { theme } from '../../theme';
import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { groupAndBookmark } from '../../groupAndBookmark';
import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
import { Control_groupText } from '../../control/groupText';
import { Control_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim';
import { Control_sliderDouble } from '../../control/sliderDouble';
import { Control_colorMixer } from '../../control/colorMixer';
import { Control_color } from '../../control/color';
import { Control_text } from '../../control/text';
import { Control_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
const groupSetting = {};
@ -78,7 +55,7 @@ groupSetting.disable = () => {
groupSetting.control.toolbar.openAll.hide.disable();
groupSetting.control.toolbar.openAll.show.disable();
groupSetting.control.toolbar.openAll.helper.disable();
};
}
};
@ -131,7 +108,7 @@ groupSetting.name = (parent) => {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
};
}
groupSetting.control.name.size = new Control_slider({
object: state.get.current(),
@ -144,14 +121,14 @@ groupSetting.name = (parent) => {
max: state.get.minMax().group.name.size.max,
action: () => {
applyCSSVar('group.name.size');
if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].name.show && groupSetting.edge.name.size) { groupSetting.edge.name.size.track(); };
if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].name.show && groupSetting.edge.name.size) { groupSetting.edge.name.size.track(); }
data.save();
},
mouseDownAction: () => {
if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].name.show && groupSetting.edge.name.size) { groupSetting.edge.name.size.show(); };
if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].name.show && groupSetting.edge.name.size) { groupSetting.edge.name.size.show(); }
},
mouseUpAction: () => {
if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].name.show && groupSetting.edge.name.size) { groupSetting.edge.name.size.hide(); };
if (state.get.current().bookmark.show && group.area.current.length > 0 && bookmark.all[0].name.show && groupSetting.edge.name.size) { groupSetting.edge.name.size.hide(); }
}
});
@ -172,13 +149,13 @@ groupSetting.name = (parent) => {
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
};
}
} else {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
};
}
if (groupSetting.edge.toolbar.size) {
@ -188,13 +165,13 @@ groupSetting.name = (parent) => {
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
};
}
} else {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
};
}
data.save();
@ -218,13 +195,13 @@ groupSetting.name = (parent) => {
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
};
}
} else {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
};
}
if (groupSetting.edge.toolbar.size) {
@ -234,13 +211,13 @@ groupSetting.name = (parent) => {
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
};
}
} else {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
};
}
data.save();
@ -275,7 +252,7 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
};
}
groupSetting.control.toolbar.size = new Control_slider({
object: state.get.current(),
@ -288,14 +265,14 @@ groupSetting.toolbar = (parent) => {
max: state.get.minMax().group.toolbar.size.max,
action: () => {
applyCSSVar('group.toolbar.size');
if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.track(); };
if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.track(); }
data.save();
},
mouseDownAction: () => {
if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.show(); };
if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.show(); }
},
mouseUpAction: () => {
if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.hide(); };
if (state.get.current().bookmark.show && (bookmark.all[0].toolbar.collapse.show || (bookmark.all[0].toolbar.openAll.show && bookmark.all[0].items.length > 0))) { groupSetting.edge.toolbar.size.hide(); }
}
});
@ -317,13 +294,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
};
}
} else {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
};
}
if (groupSetting.edge.toolbar.size) {
@ -333,13 +310,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
};
}
} else {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
};
}
data.save();
@ -362,13 +339,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
};
}
} else {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
};
}
if (groupSetting.edge.toolbar.size) {
@ -378,13 +355,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
};
}
} else {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
};
}
data.save();
@ -413,13 +390,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
};
}
} else {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
};
}
if (groupSetting.edge.toolbar.size) {
@ -429,13 +406,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
};
}
} else {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
};
}
data.save();
@ -458,13 +435,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.name.size.update.secondary([group.area.current[0].element.header]);
};
}
} else {
groupSetting.edge.name.size = new Edge({ primary: group.area.current[0].element.name.name, secondary: [group.area.current[0].element.header] });
};
}
if (groupSetting.edge.toolbar.size) {
@ -474,13 +451,13 @@ groupSetting.toolbar = (parent) => {
groupSetting.edge.toolbar.size.update.secondary([group.area.current[0].element.header]);
};
}
} else {
groupSetting.edge.toolbar.size = new Edge({ primary: group.area.current[0].element.toolbar.toolbar, secondary: [group.area.current[0].element.header] });
};
}
data.save();
@ -523,4 +500,4 @@ groupSetting.toolbar = (parent) => {
};
export { groupSetting }
export { groupSetting };

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

@ -1,42 +1,25 @@
import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
import { bookmark } from '../../bookmark';
import { theme } from '../../theme';
import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { searchEnginePreset } from '../../searchEnginePreset';
import { appName } from '../../appName';
import { APP_NAME } from '../../../constant';
import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
import { Control_groupText } from '../../control/groupText';
import { Control_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim';
import { Control_sliderDouble } from '../../control/sliderDouble';
import { Control_colorMixer } from '../../control/colorMixer';
import { Control_color } from '../../control/color';
import { Control_text } from '../../control/text';
import { Control_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
@ -64,7 +47,7 @@ headerSetting.disable = () => {
headerSetting.control.greeting.newLine.disable();
headerSetting.control.greeting.type.disable();
headerSetting.control.greeting.name.disable();
};
}
if (state.get.current().header.greeting.show) {
@ -80,13 +63,13 @@ headerSetting.disable = () => {
headerSetting.control.greeting.custom.text.enable();
break;
};
}
} else {
headerSetting.control.greeting.custom.text.disable();
};
}
if (state.get.current().header.clock.second.show ||
state.get.current().header.clock.minute.show ||
@ -100,25 +83,25 @@ headerSetting.disable = () => {
headerSetting.control.clock.second.display.enable();
} else {
headerSetting.control.clock.second.display.disable();
};
}
if (state.get.current().header.clock.hour.show) {
headerSetting.control.clock.hour.display.enable();
} else {
headerSetting.control.clock.hour.display.disable();
};
}
if (state.get.current().header.clock.second.show) {
headerSetting.control.clock.second.display.enable();
} else {
headerSetting.control.clock.second.display.disable();
};
}
if (state.get.current().header.clock.hour24.show) {
headerSetting.control.clock.meridiem.show.disable();
} else {
headerSetting.control.clock.meridiem.show.enable();
};
}
} else {
@ -127,7 +110,7 @@ headerSetting.disable = () => {
headerSetting.control.clock.size.disable();
headerSetting.control.clock.newLine.disable();
};
}
if ([state.get.current().header.clock.second.show, state.get.current().header.clock.minute.show, state.get.current().header.clock.hour.show].filter(Boolean).length > 1) {
@ -137,7 +120,7 @@ headerSetting.disable = () => {
headerSetting.control.clock.separator.show.disable();
};
}
if (
[state.get.current().header.clock.second.show, state.get.current().header.clock.minute.show, state.get.current().header.clock.hour.show].filter(Boolean).length > 1 &&
@ -150,7 +133,7 @@ headerSetting.disable = () => {
headerSetting.control.clock.separator.text.disable();
};
}
if (
(state.get.current().header.clock.second.show && state.get.current().header.clock.minute.show) ||
@ -164,7 +147,7 @@ headerSetting.disable = () => {
headerSetting.control.clock.separator.show.disable();
};
}
if (
((state.get.current().header.clock.second.show && state.get.current().header.clock.minute.show) ||
@ -179,7 +162,7 @@ headerSetting.disable = () => {
headerSetting.control.clock.separator.text.disable();
};
}
if (state.get.current().header.date.day.show ||
state.get.current().header.date.date.show ||
@ -194,7 +177,7 @@ headerSetting.disable = () => {
headerSetting.control.date.size.disable();
headerSetting.control.date.newLine.disable();
};
}
if (state.get.current().header.date.date.show && state.get.current().header.date.month.show) {
@ -204,7 +187,7 @@ headerSetting.disable = () => {
headerSetting.control.date.format.disable();
};
}
if (state.get.current().header.date.day.show) {
@ -222,7 +205,7 @@ headerSetting.disable = () => {
headerSetting.control.date.day.weekStart.enable();
break;
};
}
} else {
@ -230,7 +213,7 @@ headerSetting.disable = () => {
headerSetting.control.date.day.length.disable();
headerSetting.control.date.day.weekStart.disable();
};
}
if (state.get.current().header.date.date.show) {
@ -242,7 +225,7 @@ headerSetting.disable = () => {
headerSetting.control.date.date.display.disable();
headerSetting.control.date.date.ordinal.disable();
};
}
if (state.get.current().header.date.month.show) {
@ -258,7 +241,7 @@ headerSetting.disable = () => {
headerSetting.control.date.month.length.disable();
break;
};
}
headerSetting.control.date.month.display.enable();
@ -268,7 +251,7 @@ headerSetting.disable = () => {
headerSetting.control.date.month.ordinal.disable();
headerSetting.control.date.month.length.disable();
};
}
if (state.get.current().header.date.year.show) {
@ -278,7 +261,7 @@ headerSetting.disable = () => {
headerSetting.control.date.year.display.disable();
};
}
if ([state.get.current().header.date.day.show, state.get.current().header.date.date.show, state.get.current().header.date.month.show, state.get.current().header.date.year.show].filter(Boolean).length > 1) {
@ -288,7 +271,7 @@ headerSetting.disable = () => {
headerSetting.control.date.separator.show.disable();
};
}
if (
[state.get.current().header.date.day.show, state.get.current().header.date.date.show, state.get.current().header.date.month.show, state.get.current().header.date.year.show].filter(Boolean).length > 1 &&
@ -301,7 +284,7 @@ headerSetting.disable = () => {
headerSetting.control.date.separator.text.disable();
};
}
if (
state.get.current().header.clock.second.show ||
@ -317,17 +300,17 @@ headerSetting.disable = () => {
} else {
headerSetting.control.transitional.show.disable();
headerSetting.control.transitional.newLine.disable();
};
}
if ((
state.get.current().header.clock.second.show ||
state.get.current().header.clock.minute.show ||
state.get.current().header.clock.hour.show ||
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
) &&
state.get.current().header.clock.second.show ||
state.get.current().header.clock.minute.show ||
state.get.current().header.clock.hour.show ||
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
) &&
state.get.current().header.transitional.show) {
headerSetting.control.transitional.type.enable();
headerSetting.control.transitional.size.enable();
@ -336,7 +319,7 @@ headerSetting.disable = () => {
headerSetting.control.transitional.type.disable();
headerSetting.control.transitional.size.disable();
headerSetting.control.transitional.newLine.disable();
};
}
if (state.get.current().header.search.show) {
headerSetting.control.search.width.by.enable();
@ -348,7 +331,7 @@ headerSetting.disable = () => {
headerSetting.control.search.newTab.disable();
headerSetting.control.search.size.disable();
headerSetting.control.search.newLine.disable();
};
}
if (state.get.current().header.search.show) {
@ -363,13 +346,13 @@ headerSetting.disable = () => {
headerSetting.control.search.width.size.enable();
break;
};
}
} else {
headerSetting.control.search.width.size.disable();
};
}
switch (state.get.current().header.search.engine.selected) {
@ -389,7 +372,7 @@ headerSetting.disable = () => {
headerSetting.control.search.engine.custom.queryNameHelper.disable();
break;
};
}
};
@ -406,11 +389,11 @@ headerSetting.update = () => {
for (let key in headerSetting.control) {
headerSetting.control[key].forEach((item, i) => {
headerSetting.control[key].forEach((item) => {
item.update();
});
};
}
};
@ -435,7 +418,7 @@ headerSetting.alignment = (parent) => {
headerSetting.alignment.alignmentHelper = new Control_helperText({
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(
@ -456,7 +439,7 @@ headerSetting.greeting = (parent) => {
path: 'header.greeting.show',
id: 'header-greeting-show',
labelText: 'Show Greeting',
action: function() {
action: function () {
header.item.mod.order();
header.item.clear();
header.item.render();
@ -500,7 +483,7 @@ headerSetting.greeting = (parent) => {
id: 'header-greeting-newLine',
labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.',
action: function() {
action: function () {
applyCSSState('header.greeting.newLine');
data.save();
}
@ -669,7 +652,7 @@ headerSetting.transitional = (parent) => {
id: 'header-transitional-newLine',
labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.',
action: function() {
action: function () {
applyCSSState('header.transitional.newLine');
data.save();
}
@ -885,7 +868,7 @@ headerSetting.clock = (parent) => {
path: 'header.clock.hour24.show',
id: 'header-clock-hour24-show',
labelText: '24 hours',
action: function() {
action: function () {
header.element.clock.update();
headerSetting.disable();
data.save();
@ -899,7 +882,7 @@ headerSetting.clock = (parent) => {
path: 'header.clock.meridiem.show',
id: 'header-clock-meridiem-show',
labelText: 'AM / PM',
action: function() {
action: function () {
header.element.clock.update();
data.save();
}
@ -934,7 +917,7 @@ headerSetting.clock = (parent) => {
id: 'header-clock-newLine',
labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.',
action: function() {
action: function () {
applyCSSState('header.clock.newLine');
data.save();
}
@ -1483,7 +1466,7 @@ headerSetting.date = (parent) => {
id: 'header-date-newLine',
labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.',
action: function() {
action: function () {
applyCSSState('header.date.newLine');
data.save();
}
@ -1593,7 +1576,7 @@ headerSetting.search = (parent) => {
path: 'header.search.newTab',
id: 'header-search-newTab',
labelText: 'Open Search results in a new tab',
action: function() {
action: function () {
header.item.mod.order();
header.item.clear();
header.item.render();
@ -1613,7 +1596,7 @@ headerSetting.search = (parent) => {
id: 'header-search-newLine',
labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.',
action: function() {
action: function () {
applyCSSState('header.search.newLine');
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-custom', labelText: 'Custom', value: 'custom' })
searchEngineList.push({ id: 'header-search-engine-selected-custom', labelText: 'Custom', value: 'custom' });
headerSetting.control.search.engine = {
selected: new Control_radio({
@ -1693,7 +1676,7 @@ headerSetting.search = (parent) => {
}
}),
urlHelper: new Control_helperText({
text: ['Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="', appName + ' will add the search term entered into the Search box at the end of the above URL.']
text: ['Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="', APP_NAME + ' will add the search term entered into the Search box at the end of the above URL.']
}),
queryName: new Control_text({
object: state.get.current(),
@ -1867,4 +1850,4 @@ headerSetting.search = (parent) => {
};
export { headerSetting }
export { headerSetting };

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

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

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

@ -2,39 +2,21 @@ import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
import { bookmark } from '../../bookmark';
import { theme } from '../../theme';
import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
import { Control_groupText } from '../../control/groupText';
import { Control_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim';
import { Control_sliderDouble } from '../../control/sliderDouble';
import { Control_colorMixer } from '../../control/colorMixer';
import { Control_color } from '../../control/color';
import { Control_text } from '../../control/text';
import { Control_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
@ -64,7 +46,7 @@ layoutSetting.disable = () => {
layoutSetting.control.area.bookmark.justify.disable();
layoutSetting.control.area.bookmark.justifyHelper1.disable();
};
}
if (state.get.current().header.order.length > 0) {
@ -78,7 +60,7 @@ layoutSetting.disable = () => {
layoutSetting.control.area.header.justify.disable();
layoutSetting.control.area.header.justifyHelper1.disable();
};
}
if (state.get.current().bookmark.show) {
@ -98,9 +80,9 @@ layoutSetting.disable = () => {
layoutSetting.control.area.bookmark.justifyHelper1.disable();
break;
};
}
};
}
};
@ -219,7 +201,7 @@ layoutSetting.area = (parent) => {
}),
justifyHelper2: new Control_helperText({
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({
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 { data } from '../../data';
import { header } from '../../header';
import { bookmark } from '../../bookmark';
import { theme } from '../../theme';
import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { appName } from '../../appName';
import { APP_NAME } from '../../../constant';
import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
import { Control_groupText } from '../../control/groupText';
import { Control_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim';
import { Control_sliderDouble } from '../../control/sliderDouble';
import { Control_colorMixer } from '../../control/colorMixer';
import { Control_color } from '../../control/color';
import { Control_text } from '../../control/text';
import { Control_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
const supportSetting = {};
supportSetting.link = {
url: 'https://github.com/zombieFox/' + appName + '/wiki/',
url: 'https://github.com/zombieFox/' + APP_NAME + '/wiki/',
page: {
applyToAll: 'Applying-bookmark-settings-to-all',
browser: 'Browser-support',
@ -55,7 +22,7 @@ supportSetting.link = {
resetting: 'Resetting-when-opening-the-browser',
privacy: 'Respecting-your-privacy',
backgroundImageVideo: 'Setting-a-background-video-or-image',
firefox: 'Setting-' + appName + '-as-your-Firefox-homepage'
firefox: 'Setting-' + APP_NAME + '-as-your-Firefox-homepage'
}
};
@ -77,7 +44,7 @@ supportSetting.support = (parent) => {
list.appendChild(node('li', [supportLink.link()]));
};
}
wrap.appendChild(list);
@ -87,7 +54,7 @@ supportSetting.support = (parent) => {
const para = node('p');
para.innerHTML = `For more support or feedback, submit an ${(new Link({ text:'Issue', href: `https://github.com/zombieFox/${appName}/issues`, openNew: true })).link().outerHTML} or check the ${(new Link({ text:'Wiki', href: `https://github.com/zombieFox/${appName}/wiki`, openNew: true })).link().outerHTML}.`;
para.innerHTML = `For more support or feedback, submit an ${(new Link({ text: 'Issue', href: `https://github.com/zombieFox/${APP_NAME}/issues`, openNew: true })).link().outerHTML} or check the ${(new Link({ text: 'Wiki', href: `https://github.com/zombieFox/${APP_NAME}/wiki`, openNew: true })).link().outerHTML}.`;
parent.appendChild(
node('div', [
@ -99,4 +66,4 @@ supportSetting.support = (parent) => {
};
export { supportSetting }
export { supportSetting };

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

@ -4,10 +4,7 @@ import { header } from '../../header';
import { bookmark } from '../../bookmark';
import { group } from '../../group';
import { theme } from '../../theme';
import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { themePreset } from '../../themePreset';
@ -21,24 +18,18 @@ import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { PresetThemeTile } from '../../presetThemeTile';
import { AccentPresetButton } from '../../accentPresetButton';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
import { Control_groupText } from '../../control/groupText';
import { Control_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim';
import { Control_sliderDouble } from '../../control/sliderDouble';
import { Control_colorMixer } from '../../control/colorMixer';
import { Control_color } from '../../control/color';
import { Control_text } from '../../control/text';
import { Control_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
@ -47,7 +38,6 @@ import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
import { convertColor } from '../../../utility/convertColor';
const themeSetting = {};
@ -76,7 +66,7 @@ themeSetting.disable = () => {
} else {
themeSetting.control.accent.random.style.disable();
themeSetting.control.accent.randomiseNow.disable();
};
}
if (state.get.current().theme.accent.cycle.active) {
themeSetting.control.accent.cycle.speed.enable();
@ -86,7 +76,7 @@ themeSetting.disable = () => {
themeSetting.control.accent.cycle.speed.disable();
themeSetting.control.accent.cycle.step.disable();
themeSetting.control.accent.cycle.stepHelper.disable();
};
}
switch (state.get.current().theme.header.by) {
@ -100,7 +90,7 @@ themeSetting.disable = () => {
themeSetting.control.header.color.opacity.enable();
break;
};
}
switch (state.get.current().theme.background.type) {
@ -230,7 +220,7 @@ themeSetting.disable = () => {
themeSetting.control.background.video.vignette.range.enable();
break;
};
}
switch (state.get.current().theme.layout.color.by) {
@ -248,7 +238,7 @@ themeSetting.disable = () => {
themeSetting.control.layout.color.blurHelper.enable();
break;
};
}
switch (state.get.current().theme.header.color.by) {
@ -262,7 +252,7 @@ themeSetting.disable = () => {
themeSetting.control.header.color.opacity.enable();
break;
};
}
switch (state.get.current().theme.bookmark.color.by) {
@ -276,7 +266,7 @@ themeSetting.disable = () => {
themeSetting.control.bookmark.color.opacity.enable();
break;
};
}
};
@ -290,7 +280,7 @@ themeSetting.preset = (parent) => {
const themePresetElement = node('div|class:theme-preset');
themePreset.get().forEach((item, i) => {
themePreset.get().forEach((item) => {
const presetTheme = new PresetThemeTile({
presetThemeData: item
@ -385,7 +375,7 @@ themeSetting.saved = (parent) => {
])
);
};
}
};
@ -433,14 +423,14 @@ themeSetting.colour = (parent) => {
if (count < 10) {
count = '0' + count;
};
}
formGroup.appendChild(
node('div|class:form-group-text form-group-text-borderless', [
node('div|class:theme-color-box theme-color-shade-' + count + '')
])
);
};
}
formSticky.appendChild(formGroup);
@ -554,7 +544,7 @@ themeSetting.accent = (parent) => {
const themeAccentPreset = node('div|class:theme-accent-preset');
allPreset.forEach((item, i) => {
allPreset.forEach((item) => {
const presetButton = new AccentPresetButton({
presetData: item
@ -781,7 +771,7 @@ themeSetting.font = (parent) => {
nameHelper: new Control_helperText({
complexText: true,
text: [
`Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Clock, Date, Group names and Bookmark Letters.`,
`Use a ${(new Link({ text: 'Google Font', href: 'https://fonts.google.com/', openNew: true })).link().outerHTML} to customise the Clock, Date, Group names and Bookmark Letters.`,
'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"',
'Clear the field to use the default font "Fjalla One".'
]
@ -869,7 +859,7 @@ themeSetting.font = (parent) => {
nameHelper: new Control_helperText({
complexText: true,
text: [
`Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Bookmark name, URL and form elements.`,
`Use a ${(new Link({ text: 'Google Font', href: 'https://fonts.google.com/', openNew: true })).link().outerHTML} to customise the Bookmark name, URL and form elements.`,
'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"',
'Clear the field to use the default font "Open Sans".'
]
@ -1224,11 +1214,11 @@ themeSetting.opacity = (parent) => {
if (group.area.current.length > 0) {
group.area.current.forEach((item, i) => {
group.area.current.forEach((item) => {
item.update.style();
});
};
}
data.save();
@ -1266,8 +1256,8 @@ themeSetting.background = (parent) => {
theme.background.element.video.play();
} else {
theme.background.element.video.pause();
};
};
}
}
};
@ -2132,4 +2122,4 @@ themeSetting.bookmark = (parent) => {
};
export { themeSetting }
export { themeSetting };

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

@ -1,42 +1,20 @@
import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
import { bookmark } from '../../bookmark';
import { theme } from '../../theme';
import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
import { Control_groupText } from '../../control/groupText';
import { Control_radio } from '../../control/radio';
import { Control_radioGrid } from '../../control/radioGrid';
import { Control_checkbox } from '../../control/checkbox';
import { Control_slider } from '../../control/slider';
import { Control_sliderSlim } from '../../control/sliderSlim';
import { Control_sliderDouble } from '../../control/sliderDouble';
import { Control_colorMixer } from '../../control/colorMixer';
import { Control_color } from '../../control/color';
import { Control_text } from '../../control/text';
import { Control_textReset } from '../../control/textReset';
import { Control_textarea } from '../../control/textarea';
import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
import { applyCSSVar } from '../../../utility/applyCSSVar';
import { applyCSSClass } from '../../../utility/applyCSSClass';
import { applyCSSState } from '../../../utility/applyCSSState';
const toolbarSetting = {};
@ -65,7 +43,7 @@ toolbarSetting.disable = () => {
toolbarSetting.control.location.newLine.enable();
break;
};
}
};
@ -85,7 +63,7 @@ toolbarSetting.size = (parent) => {
toolbarSetting.edge.size = new Edge({ primary: toolbar.current.element.toolbar });
break;
};
}
toolbarSetting.control.size = new Control_slider({
object: state.get.current(),
@ -148,7 +126,7 @@ toolbarSetting.location = (parent) => {
toolbarSetting.edge.size = new Edge({ primary: toolbar.current.element.toolbar });
break;
};
}
data.save();
}
@ -164,7 +142,7 @@ toolbarSetting.location = (parent) => {
id: 'header-newLine',
labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.',
action: function() {
action: function () {
applyCSSState('toolbar.newLine');
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 { data } from '../data';
import { menu } from '../menu';
import { pageLock } from '../pageLock';
import { Button } from '../button';
import { Shade } from '../shade';
import { MenuNav } from '../menuNav';
import { MenuClose } from '../menuClose';
@ -15,7 +13,7 @@ import { clearChildNode } from '../../utility/clearChildNode';
import './index.css';
export const MenuFrame = function({
export const MenuFrame = function ({
navData = []
} = {}) {
@ -45,7 +43,7 @@ export const MenuFrame = function({
html.classList.add('is-menu-open');
} else {
html.classList.remove('is-menu-open');
};
}
};
@ -65,7 +63,7 @@ export const MenuFrame = function({
body.removeChild(this.element.menu);
};
}
});
@ -122,8 +120,8 @@ export const MenuFrame = function({
const body = document.querySelector('body');
if (body.contains(this.element.menu)) {
body.removeChild(this.element.menu)
};
body.removeChild(this.element.menu);
}
}, 6000);
@ -137,7 +135,7 @@ export const MenuFrame = function({
if ('pushState' in history) {
history.pushState('', document.title, location.origin + location.pathname + location.search);
};
}
};
@ -201,7 +199,7 @@ export const MenuFrame = function({
if (!path.includes(this.element.menu)) {
this.close();
};
}
};
@ -239,9 +237,9 @@ export const MenuFrame = function({
event.preventDefault();
}
};
}
};
}
}
};
@ -262,7 +260,7 @@ export const MenuFrame = function({
clearChildNode(this.element.content);
navData.forEach((item, i) => {
navData.forEach((item) => {
if (item.active) {
@ -270,7 +268,7 @@ export const MenuFrame = function({
this.element.content.classList.add('menu-content-overscroll');
} else {
this.element.content.classList.remove('menu-content-overscroll');
};
}
const menuContent = new MenuContent({
activeNavData: item,
@ -279,7 +277,7 @@ export const MenuFrame = function({
menuContent.content();
};
}
});

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

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

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

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

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

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

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

@ -1,12 +1,10 @@
import { state } from '../state';
import { data } from '../data';
import { theme } from '../theme';
import { menu } from '../menu';
import { toolbar } from '../toolbar';
import { layout } from '../layout';
import { header } from '../header';
import { bookmark } from '../bookmark';
import { group } from '../group';
import { groupAndBookmark } from '../groupAndBookmark';
import { themeSetting } from '../menuContent/themeSetting';
@ -15,14 +13,13 @@ import { Button } from '../button';
import { node } from '../../utility/node';
import { convertColor } from '../../utility/convertColor';
import { isValidString } from '../../utility/isValidString';
import { complexNode } from '../../utility/complexNode';
import { applyCSSVar } from '../../utility/applyCSSVar';
import { applyCSSClass } from '../../utility/applyCSSClass';
import { applyCSSState } from '../../utility/applyCSSState';
import './index.css';
export const PresetThemeTile = function({
export const PresetThemeTile = function ({
presetThemeData = false
} = {}) {
@ -347,13 +344,13 @@ export const PresetThemeTile = function({
darken();
} else if (window.matchMedia('(prefers-color-scheme:light)').matches) {
lighten();
};
}
};
}
if (hsl.l < 0) { hsl.l = 0; };
if (hsl.l < 0) { hsl.l = 0; }
if (hsl.l > 100) { hsl.l = 100; };
if (hsl.l > 100) { hsl.l = 100; }
let rgb = convertColor.hsl.rgb(hsl);
@ -368,7 +365,7 @@ export const PresetThemeTile = function({
this.element.preview.appendChild(node('span|class:theme-preset-background-0' + i));
};
}
this.element.tile.style.setProperty('--theme-preset-text', '0, 0%, calc(((((var(--theme-preset-background-01-rgb-r) * var(--theme-t-r)) + (var(--theme-preset-background-01-rgb-g) * var(--theme-t-g)) + (var(--theme-preset-background-01-rgb-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%)');
@ -380,7 +377,7 @@ export const PresetThemeTile = function({
this.element.preview.appendChild(node('span|class:theme-preset-accent'));
return node('div|class:theme-preset-tile')
return node('div|class:theme-preset-tile');
};
@ -396,7 +393,7 @@ export const PresetThemeTile = function({
this.element.preset.button.appendChild(this.element.name);
};
}
this.element.front.appendChild(this.element.preset.button);

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

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

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

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

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

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

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

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