extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-21 15:43:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

internationalise settings and controls

Browse Source
This commit is contained in:
Kuldeep M 2022-01-21 10:12:49 +00:00 committed by GitHub
parent 487d0a788e
commit c18430f486
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
69 changed files with 48772 additions and 1029 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
src/component/accentPreset/index.js
View File

@ -1,99 +1,113 @@
const accentPreset = {};
import { message } from '../message';
export const accentPreset = {};
accentPreset.get = () => {
return [
{ name: 'Grey', prefix: 'Super extra light', type: 'grey', hsl: { h: 0, s: 0, l: 90 } },
{ name: 'Grey', prefix: 'Extra light', type: 'grey', hsl: { h: 0, s: 0, l: 77 } },
{ name: 'Grey', prefix: 'Light', type: 'grey', hsl: { h: 0, s: 0, l: 63 } },
{ name: 'Grey', prefix: false, type: 'grey', hsl: { h: 0, s: 0, l: 50 } },
{ name: 'Grey', prefix: 'Dark', type: 'grey', hsl: { h: 0, s: 0, l: 37 } },
{ name: 'Grey', prefix: 'Extra dark', type: 'grey', hsl: { h: 0, s: 0, l: 23 } },
{ name: 'Grey', prefix: 'Super extra dark', type: 'grey', hsl: { h: 0, s: 0, l: 10 } },
{ name: 'Red', prefix: 'Super extra light', type: 'primary', hsl: { h: 0, s: 40, l: 90 } },
{ name: 'Red', prefix: 'Extra light', type: 'primary', hsl: { h: 0, s: 60, l: 77 } },
{ name: 'Red', prefix: 'Light', type: 'primary', hsl: { h: 0, s: 80, l: 63 } },
{ name: 'Red', prefix: false, type: 'primary', hsl: { h: 0, s: 100, l: 50 } },
{ name: 'Red', prefix: 'Dark', type: 'primary', hsl: { h: 0, s: 80, l: 37 } },
{ name: 'Red', prefix: 'Extra dark', type: 'primary', hsl: { h: 0, s: 60, l: 23 } },
{ name: 'Red', prefix: 'Super extra dark', type: 'primary', hsl: { h: 0, s: 40, l: 10 } },
{ name: 'Orange', prefix: 'Super extra light', type: 'secondary', hsl: { h: 30, s: 40, l: 90 } },
{ name: 'Orange', prefix: 'Extra light', type: 'secondary', hsl: { h: 30, s: 60, l: 77 } },
{ name: 'Orange', prefix: 'Light', type: 'secondary', hsl: { h: 30, s: 80, l: 63 } },
{ name: 'Orange', prefix: false, type: 'secondary', hsl: { h: 30, s: 100, l: 50 } },
{ name: 'Orange', prefix: 'Dark', type: 'secondary', hsl: { h: 30, s: 80, l: 37 } },
{ name: 'Orange', prefix: 'Extra dark', type: 'secondary', hsl: { h: 30, s: 60, l: 23 } },
{ name: 'Orange', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 30, s: 40, l: 10 } },
{ name: 'Yellow', prefix: 'Super extra light', type: 'primary', hsl: { h: 60, s: 40, l: 90 } },
{ name: 'Yellow', prefix: 'Extra light', type: 'primary', hsl: { h: 60, s: 60, l: 77 } },
{ name: 'Yellow', prefix: 'Light', type: 'primary', hsl: { h: 60, s: 80, l: 63 } },
{ name: 'Yellow', prefix: false, type: 'primary', hsl: { h: 60, s: 100, l: 50 } },
{ name: 'Yellow', prefix: 'Dark', type: 'primary', hsl: { h: 60, s: 80, l: 37 } },
{ name: 'Yellow', prefix: 'Extra dark', type: 'primary', hsl: { h: 60, s: 60, l: 23 } },
{ name: 'Yellow', prefix: 'Super extra dark', type: 'primary', hsl: { h: 60, s: 40, l: 10 } },
{ name: 'Lime', prefix: 'Super extra light', type: 'secondary', hsl: { h: 90, s: 40, l: 90 } },
{ name: 'Lime', prefix: 'Extra light', type: 'secondary', hsl: { h: 90, s: 60, l: 77 } },
{ name: 'Lime', prefix: 'Light', type: 'secondary', hsl: { h: 90, s: 80, l: 63 } },
{ name: 'Lime', prefix: false, type: 'secondary', hsl: { h: 90, s: 100, l: 50 } },
{ name: 'Lime', prefix: 'Dark', type: 'secondary', hsl: { h: 90, s: 80, l: 37 } },
{ name: 'Lime', prefix: 'Extra dark', type: 'secondary', hsl: { h: 90, s: 60, l: 23 } },
{ name: 'Lime', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 90, s: 40, l: 10 } },
{ name: 'Green', prefix: 'Super extra light', type: 'primary', hsl: { h: 120, s: 40, l: 90 } },
{ name: 'Green', prefix: 'Extra light', type: 'primary', hsl: { h: 120, s: 60, l: 77 } },
{ name: 'Green', prefix: 'Light', type: 'primary', hsl: { h: 120, s: 80, l: 63 } },
{ name: 'Green', prefix: false, type: 'primary', hsl: { h: 120, s: 100, l: 50 } },
{ name: 'Green', prefix: 'Dark', type: 'primary', hsl: { h: 120, s: 80, l: 37 } },
{ name: 'Green', prefix: 'Extra dark', type: 'primary', hsl: { h: 120, s: 60, l: 23 } },
{ name: 'Green', prefix: 'Super extra dark', type: 'primary', hsl: { h: 120, s: 40, l: 10 } },
{ name: 'Aqua', prefix: 'Super extra light', type: 'secondary', hsl: { h: 150, s: 40, l: 90 } },
{ name: 'Aqua', prefix: 'Extra light', type: 'secondary', hsl: { h: 150, s: 60, l: 77 } },
{ name: 'Aqua', prefix: 'Light', type: 'secondary', hsl: { h: 150, s: 80, l: 63 } },
{ name: 'Aqua', prefix: false, type: 'secondary', hsl: { h: 150, s: 100, l: 50 } },
{ name: 'Aqua', prefix: 'Dark', type: 'secondary', hsl: { h: 150, s: 80, l: 37 } },
{ name: 'Aqua', prefix: 'Extra dark', type: 'secondary', hsl: { h: 150, s: 60, l: 23 } },
{ name: 'Aqua', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 150, s: 40, l: 10 } },
{ name: 'Cyan', prefix: 'Super extra light', type: 'primary', hsl: { h: 180, s: 40, l: 90 } },
{ name: 'Cyan', prefix: 'Extra light', type: 'primary', hsl: { h: 180, s: 60, l: 77 } },
{ name: 'Cyan', prefix: 'Light', type: 'primary', hsl: { h: 180, s: 80, l: 63 } },
{ name: 'Cyan', prefix: false, type: 'primary', hsl: { h: 180, s: 100, l: 50 } },
{ name: 'Cyan', prefix: 'Dark', type: 'primary', hsl: { h: 180, s: 80, l: 37 } },
{ name: 'Cyan', prefix: 'Extra dark', type: 'primary', hsl: { h: 180, s: 60, l: 23 } },
{ name: 'Cyan', prefix: 'Super extra dark', type: 'primary', hsl: { h: 180, s: 40, l: 10 } },
{ name: 'Teal', prefix: 'Super extra light', type: 'secondary', hsl: { h: 210, s: 40, l: 90 } },
{ name: 'Teal', prefix: 'Extra light', type: 'secondary', hsl: { h: 210, s: 60, l: 77 } },
{ name: 'Teal', prefix: 'Light', type: 'secondary', hsl: { h: 210, s: 80, l: 63 } },
{ name: 'Teal', prefix: false, type: 'secondary', hsl: { h: 210, s: 100, l: 50 } },
{ name: 'Teal', prefix: 'Dark', type: 'secondary', hsl: { h: 210, s: 80, l: 37 } },
{ name: 'Teal', prefix: 'Extra dark', type: 'secondary', hsl: { h: 210, s: 60, l: 23 } },
{ name: 'Teal', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 210, s: 40, l: 10 } },
{ name: 'Blue', prefix: 'Super extra light', type: 'primary', hsl: { h: 240, s: 40, l: 90 } },
{ name: 'Blue', prefix: 'Extra light', type: 'primary', hsl: { h: 240, s: 60, l: 77 } },
{ name: 'Blue', prefix: 'Light', type: 'primary', hsl: { h: 240, s: 80, l: 63 } },
{ name: 'Blue', prefix: false, type: 'primary', hsl: { h: 240, s: 100, l: 50 } },
{ name: 'Blue', prefix: 'Dark', type: 'primary', hsl: { h: 240, s: 80, l: 37 } },
{ name: 'Blue', prefix: 'Extra dark', type: 'primary', hsl: { h: 240, s: 60, l: 23 } },
{ name: 'Blue', prefix: 'Super extra dark', type: 'primary', hsl: { h: 240, s: 40, l: 10 } },
{ name: 'Purple', prefix: 'Super extra light', type: 'secondary', hsl: { h: 270, s: 40, l: 90 } },
{ name: 'Purple', prefix: 'Extra light', type: 'secondary', hsl: { h: 270, s: 60, l: 77 } },
{ name: 'Purple', prefix: 'Light', type: 'secondary', hsl: { h: 270, s: 80, l: 63 } },
{ name: 'Purple', prefix: false, type: 'secondary', hsl: { h: 270, s: 100, l: 50 } },
{ name: 'Purple', prefix: 'Dark', type: 'secondary', hsl: { h: 270, s: 80, l: 37 } },
{ name: 'Purple', prefix: 'Extra dark', type: 'secondary', hsl: { h: 270, s: 60, l: 23 } },
{ name: 'Purple', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 270, s: 40, l: 10 } },
{ name: 'Magenta', prefix: 'Super extra light', type: 'primary', hsl: { h: 300, s: 40, l: 90 } },
{ name: 'Magenta', prefix: 'Extra light', type: 'primary', hsl: { h: 300, s: 60, l: 77 } },
{ name: 'Magenta', prefix: 'Light', type: 'primary', hsl: { h: 300, s: 80, l: 63 } },
{ name: 'Magenta', prefix: false, type: 'primary', hsl: { h: 300, s: 100, l: 50 } },
{ name: 'Magenta', prefix: 'Dark', type: 'primary', hsl: { h: 300, s: 80, l: 37 } },
{ name: 'Magenta', prefix: 'Extra dark', type: 'primary', hsl: { h: 300, s: 60, l: 23 } },
{ name: 'Magenta', prefix: 'Super extra dark', type: 'primary', hsl: { h: 300, s: 40, l: 10 } },
{ name: 'Fuchsia', prefix: 'Super extra light', type: 'secondary', hsl: { h: 330, s: 40, l: 90 } },
{ name: 'Fuchsia', prefix: 'Extra light', type: 'secondary', hsl: { h: 330, s: 60, l: 77 } },
{ name: 'Fuchsia', prefix: 'Light', type: 'secondary', hsl: { h: 330, s: 80, l: 63 } },
{ name: 'Fuchsia', prefix: false, type: 'secondary', hsl: { h: 330, s: 100, l: 50 } },
{ name: 'Fuchsia', prefix: 'Dark', type: 'secondary', hsl: { h: 330, s: 80, l: 37 } },
{ name: 'Fuchsia', prefix: 'Extra dark', type: 'secondary', hsl: { h: 330, s: 60, l: 23 } },
{ name: 'Fuchsia', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 330, s: 40, l: 10 } },
];
};
export { accentPreset };
return [
{ name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'grey', hsl: { h: 0, s: 0, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'grey', hsl: { h: 0, s: 0, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'grey', hsl: { h: 0, s: 0, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: false, type: 'grey', hsl: { h: 0, s: 0, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'grey', hsl: { h: 0, s: 0, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'grey', hsl: { h: 0, s: 0, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'grey', hsl: { h: 0, s: 0, l: 10 } },
{ name: message.get('menuContentThemeAccentPresetColorRed'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'primary', hsl: { h: 0, s: 40, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorRed'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'primary', hsl: { h: 0, s: 60, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorRed'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'primary', hsl: { h: 0, s: 80, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorRed'), prefix: false, type: 'primary', hsl: { h: 0, s: 100, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorRed'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'primary', hsl: { h: 0, s: 80, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorRed'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'primary', hsl: { h: 0, s: 60, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorRed'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'primary', hsl: { h: 0, s: 40, l: 10 } },
{ name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'secondary', hsl: { h: 30, s: 40, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'secondary', hsl: { h: 30, s: 60, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'secondary', hsl: { h: 30, s: 80, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: false, type: 'secondary', hsl: { h: 30, s: 100, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'secondary', hsl: { h: 30, s: 80, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'secondary', hsl: { h: 30, s: 60, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'secondary', hsl: { h: 30, s: 40, l: 10 } },
{ name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'primary', hsl: { h: 60, s: 40, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'primary', hsl: { h: 60, s: 60, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'primary', hsl: { h: 60, s: 80, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: false, type: 'primary', hsl: { h: 60, s: 100, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'primary', hsl: { h: 60, s: 80, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'primary', hsl: { h: 60, s: 60, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'primary', hsl: { h: 60, s: 40, l: 10 } },
{ name: message.get('menuContentThemeAccentPresetColorLime'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'secondary', hsl: { h: 90, s: 40, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorLime'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'secondary', hsl: { h: 90, s: 60, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorLime'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'secondary', hsl: { h: 90, s: 80, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorLime'), prefix: false, type: 'secondary', hsl: { h: 90, s: 100, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorLime'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'secondary', hsl: { h: 90, s: 80, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorLime'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'secondary', hsl: { h: 90, s: 60, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorLime'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'secondary', hsl: { h: 90, s: 40, l: 10 } },
{ name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'primary', hsl: { h: 120, s: 40, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'primary', hsl: { h: 120, s: 60, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'primary', hsl: { h: 120, s: 80, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: false, type: 'primary', hsl: { h: 120, s: 100, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'primary', hsl: { h: 120, s: 80, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'primary', hsl: { h: 120, s: 60, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'primary', hsl: { h: 120, s: 40, l: 10 } },
{ name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'secondary', hsl: { h: 150, s: 40, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'secondary', hsl: { h: 150, s: 60, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'secondary', hsl: { h: 150, s: 80, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: false, type: 'secondary', hsl: { h: 150, s: 100, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'secondary', hsl: { h: 150, s: 80, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'secondary', hsl: { h: 150, s: 60, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'secondary', hsl: { h: 150, s: 40, l: 10 } },
{ name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'primary', hsl: { h: 180, s: 40, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'primary', hsl: { h: 180, s: 60, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'primary', hsl: { h: 180, s: 80, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: false, type: 'primary', hsl: { h: 180, s: 100, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'primary', hsl: { h: 180, s: 80, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'primary', hsl: { h: 180, s: 60, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'primary', hsl: { h: 180, s: 40, l: 10 } },
{ name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'secondary', hsl: { h: 210, s: 40, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'secondary', hsl: { h: 210, s: 60, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'secondary', hsl: { h: 210, s: 80, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: false, type: 'secondary', hsl: { h: 210, s: 100, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'secondary', hsl: { h: 210, s: 80, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'secondary', hsl: { h: 210, s: 60, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'secondary', hsl: { h: 210, s: 40, l: 10 } },
{ name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'primary', hsl: { h: 240, s: 40, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'primary', hsl: { h: 240, s: 60, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'primary', hsl: { h: 240, s: 80, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: false, type: 'primary', hsl: { h: 240, s: 100, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'primary', hsl: { h: 240, s: 80, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'primary', hsl: { h: 240, s: 60, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'primary', hsl: { h: 240, s: 40, l: 10 } },
{ name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'secondary', hsl: { h: 270, s: 40, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'secondary', hsl: { h: 270, s: 60, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'secondary', hsl: { h: 270, s: 80, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: false, type: 'secondary', hsl: { h: 270, s: 100, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'secondary', hsl: { h: 270, s: 80, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'secondary', hsl: { h: 270, s: 60, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'secondary', hsl: { h: 270, s: 40, l: 10 } },
{ name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'primary', hsl: { h: 300, s: 40, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'primary', hsl: { h: 300, s: 60, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'primary', hsl: { h: 300, s: 80, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: false, type: 'primary', hsl: { h: 300, s: 100, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'primary', hsl: { h: 300, s: 80, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'primary', hsl: { h: 300, s: 60, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'primary', hsl: { h: 300, s: 40, l: 10 } },
{ name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'secondary', hsl: { h: 330, s: 40, l: 90 } },
{ name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'secondary', hsl: { h: 330, s: 60, l: 77 } },
{ name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'secondary', hsl: { h: 330, s: 80, l: 63 } },
{ name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: false, type: 'secondary', hsl: { h: 330, s: 100, l: 50 } },
{ name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'secondary', hsl: { h: 330, s: 80, l: 37 } },
{ name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'secondary', hsl: { h: 330, s: 60, l: 23 } },
{ name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'secondary', hsl: { h: 330, s: 40, l: 10 } },
];
};

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

@ -1,3 +1,5 @@
import { message } from '../message';
import { state } from '../state';
import { data } from '../data';
import { layout } from '../layout';
@ -359,9 +361,10 @@ bookmark.add = {
const bookmarkForm = new BookmarkForm({ bookmarkData: newBookmarkData });
const addModal = new Modal({
heading: 'Add a new Bookmark',
heading: message.get('bookmarkAddHeading'),
content: bookmarkForm.form(),
successText: 'Add',
successText: message.get('bookmarkAddSuccessText'),
cancelText: message.get('bookmarkAddCancelText'),
width: (state.get.current().bookmark.style === 'block') ? 60 : 70,
maxHeight: true,
openAction: () => {

8
src/component/bookmarkForm/index.css
View File

@ -1,5 +1,5 @@
:root {
--bookmark-form-space: calc((var(--form-space) / 4) * 1em);
--bookmark-form-space: calc((var(--form-space) / 4) * 1.25em);
}
.bookmark-form {
@ -17,12 +17,10 @@
}
.bookmark-form-description {
margin-bottom: 3em;
margin-bottom: var(--bookmark-form-space);
}
.bookmark-form-main {
padding-bottom: var(--bookmark-form-space);
}
.bookmark-form-main {}
.bookmark-form-aside {
display: none;

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

@ -1,3 +1,5 @@
import { message } from '../message';
import { bookmark } from '../bookmark';
import { bookmarkDefault } from '../bookmarkDefault';
import { bookmarkMinMax } from '../bookmarkMinMax';
@ -96,8 +98,8 @@ export const BookmarkForm = function({
path: 'url',
id: 'url',
value: bookmarkData.link.url,
placeholder: 'https://www.example.com/',
labelText: 'URL',
placeholder: message.get('bookmarkFormUrlPlaceholder'),
labelText: message.get('bookmarkFormUrlLabel'),
action: () => {
this.preview.update.assemble(bookmarkData);
}
@ -106,17 +108,17 @@ export const BookmarkForm = function({
alignment: new Control_radioGrid({
object: bookmarkData.link,
radioGroup: [
{ id: 'toolbar-position-top-left', labelText: 'Top Left', value: 'top-left', position: 1 },
{ id: 'toolbar-position-top-center', labelText: 'Top Center', value: 'top-center', position: 2 },
{ id: 'toolbar-position-top-right', labelText: 'Top Right', value: 'top-right', position: 3 },
{ id: 'toolbar-position-center-left', labelText: 'Center Left', value: 'center-left', position: 4 },
{ id: 'toolbar-position-center-center', labelText: 'Center Center', value: 'center-center', position: 5 },
{ id: 'toolbar-position-center-right', labelText: 'Center Right', value: 'center-right', position: 6 },
{ id: 'toolbar-position-bottom-left', labelText: 'Bottom Left', value: 'bottom-left', position: 7 },
{ id: 'toolbar-position-bottom-center', labelText: 'Bottom Center', value: 'bottom-center', position: 8 },
{ id: 'toolbar-position-bottom-right', labelText: 'Bottom Right', value: 'bottom-right', position: 9 }
{ id: 'toolbar-position-top-left', labelText: message.get('bookmarkFormDisplayAlignmentTopLeft'), value: 'top-left', position: 1 },
{ id: 'toolbar-position-top-center', labelText: message.get('bookmarkFormDisplayAlignmentTopCenter'), value: 'top-center', position: 2 },
{ id: 'toolbar-position-top-right', labelText: message.get('bookmarkFormDisplayAlignmentTopRight'), value: 'top-right', position: 3 },
{ id: 'toolbar-position-center-left', labelText: message.get('bookmarkFormDisplayAlignmentCenterLeft'), value: 'center-left', position: 4 },
{ id: 'toolbar-position-center-center', labelText: message.get('bookmarkFormDisplayAlignmentCenterCenter'), value: 'center-center', position: 5 },
{ id: 'toolbar-position-center-right', labelText: message.get('bookmarkFormDisplayAlignmentCenterRight'), value: 'center-right', position: 6 },
{ id: 'toolbar-position-bottom-left', labelText: message.get('bookmarkFormDisplayAlignmentBottomLeft'), value: 'bottom-left', position: 7 },
{ id: 'toolbar-position-bottom-center', labelText: message.get('bookmarkFormDisplayAlignmentBottomCenter'), value: 'bottom-center', position: 8 },
{ id: 'toolbar-position-bottom-right', labelText: message.get('bookmarkFormDisplayAlignmentBottomRight'), value: 'bottom-right', position: 9 }
],
label: 'Visual Element and Name alignment',
label: message.get('bookmarkFormDisplayAlignmentLabel'),
groupName: 'display-alignment',
path: 'display.alignment',
gridSize: '3x3',
@ -127,8 +129,8 @@ export const BookmarkForm = function({
direction: new Control_radio({
object: bookmarkData.link,
radioGroup: [
{ id: 'display-direction-vertical', labelText: 'Vertical', description: 'Stack the Visual Element and Name one above the other.', value: 'vertical' },
{ id: 'display-direction-horizontal', labelText: 'Horizontal', description: 'Arrange the Visual Element and Name side by side.', value: 'horizontal' }
{ id: 'display-direction-vertical', labelText: message.get('bookmarkFormDisplayDirectionVerticalLabel'), description: message.get('bookmarkFormDisplayDirectionVerticalDescription'), value: 'vertical' },
{ id: 'display-direction-horizontal', labelText: message.get('bookmarkFormDisplayDirectionHorizontalLabel'), description: message.get('bookmarkFormDisplayDirectionHorizontalDescription'), value: 'horizontal' }
],
groupName: 'display-direction',
path: 'display.direction',
@ -140,8 +142,8 @@ export const BookmarkForm = function({
order: new Control_radio({
object: bookmarkData.link,
radioGroup: [
{ id: 'display-order-visual-name', labelText: 'Visual element then name', description: 'Place the Visual Element before the Name.', value: 'visual-name' },
{ id: 'display-order-name-visual', labelText: 'Name then visual element', description: 'Place the Name before the Visual Element.', value: 'name-visual' }
{ id: 'display-order-visual-name', labelText: message.get('bookmarkFormDisplayOrderVisualNameLabel'), description: message.get('bookmarkFormDisplayOrderVisualNameDescription'), value: 'visual-name' },
{ id: 'display-order-name-visual', labelText: message.get('bookmarkFormDisplayOrderNameVisualLabel'), description: message.get('bookmarkFormDisplayOrderNameVisualDescription'), value: 'name-visual' }
],
groupName: 'display-order',
path: 'display.order',
@ -154,7 +156,7 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'display.rotate',
id: 'display-rotate',
labelText: 'Rotate',
labelText: message.get('bookmarkFormDisplayRotate'),
value: bookmarkData.link.display.rotate,
defaultValue: bookmarkDefault.display.rotate,
min: bookmarkMinMax.display.rotate.min,
@ -165,14 +167,14 @@ export const BookmarkForm = function({
}),
translate: {
label: form.label({
text: 'Adjust Visual Element position',
text: message.get('bookmarkFormDisplayTranslateLabel'),
noPadding: true
}),
x: new Control_sliderSlim({
object: bookmarkData.link,
path: 'display.translate.x',
id: 'display-translate-x',
labelText: 'Horizontal',
labelText: message.get('bookmarkFormDisplayTranslateX'),
value: bookmarkData.link.display.translate.x,
defaultValue: bookmarkDefault.display.translate.x,
min: bookmarkMinMax.display.translate.x.min,
@ -185,7 +187,7 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'display.translate.y',
id: 'display-translate-y',
labelText: 'Vertical',
labelText: message.get('bookmarkFormDisplayTranslateY'),
value: bookmarkData.link.display.translate.y,
defaultValue: bookmarkDefault.display.translate.y,
min: bookmarkMinMax.display.translate.y.min,
@ -199,7 +201,7 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'display.gutter',
id: 'display-gutter',
labelText: 'Gutter',
labelText: message.get('bookmarkFormDisplayGutter'),
value: bookmarkData.link.display.gutter,
defaultValue: bookmarkDefault.display.gutter,
min: bookmarkMinMax.display.gutter.min,
@ -213,8 +215,8 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'display.visual.show',
id: 'display-visual-show',
labelText: 'Show Visual Element',
description: 'Display Letters, Icon or an Image on this Bookmark hexagon.',
labelText: message.get('bookmarkFormDisplayVisualShowLabel'),
description: message.get('bookmarkFormDisplayVisualShowDescription'),
action: () => {
this.disable();
this.collapse.display.visual.update();
@ -224,9 +226,9 @@ export const BookmarkForm = function({
type: new Control_radio({
object: bookmarkData.link,
radioGroup: [
{ id: 'display-visual-type-letter', labelText: 'Letter', value: 'letter' },
{ id: 'display-visual-type-icon', labelText: 'Icon', value: 'icon' },
{ id: 'display-visual-type-image', labelText: 'Image', value: 'image' }
{ id: 'display-visual-type-letter', labelText: message.get('bookmarkFormDisplayVisualTypeLetter'), value: 'letter' },
{ id: 'display-visual-type-icon', labelText: message.get('bookmarkFormDisplayVisualTypeIcon'), value: 'icon' },
{ id: 'display-visual-type-image', labelText: message.get('bookmarkFormDisplayVisualTypeImage'), value: 'image' }
],
groupName: 'display-visual-type',
path: 'display.visual.type',
@ -239,7 +241,7 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'display.visual.size',
id: 'display-visual-size',
labelText: 'Visual size',
labelText: message.get('bookmarkFormDisplayVisualSize'),
value: bookmarkData.link.display.visual.size,
defaultValue: bookmarkDefault.display.visual.size,
min: bookmarkMinMax.display.visual.size.min,
@ -254,8 +256,8 @@ export const BookmarkForm = function({
path: 'display.visual.letter.text',
id: 'display-visual-letter-text',
value: bookmarkData.link.display.visual.letter.text,
placeholder: 'E',
labelText: 'Bookmark letter',
placeholder: message.get('bookmarkFormDisplayVisualLetterTextPlaceholder'),
labelText: message.get('bookmarkFormDisplayVisualLetterTextLabel'),
srOnly: true,
action: () => {
this.preview.update.assemble(bookmarkData);
@ -268,8 +270,8 @@ export const BookmarkForm = function({
path: 'display.visual.icon.label',
id: 'display-visual-icon-label',
value: bookmarkData.link.display.visual.icon.label,
placeholder: 'FontAwesome Brands or Icons',
labelText: 'Bookmark icon',
placeholder: message.get('bookmarkFormDisplayVisualIconTextPlaceholder'),
labelText: message.get('bookmarkFormDisplayVisualIconTextLabel'),
srOnly: true,
action: () => {
this.preview.update.assemble(bookmarkData);
@ -279,7 +281,7 @@ export const BookmarkForm = function({
classList: ['bookmark-form-text-icon', 'form-group-item-small']
}),
remove: new Button({
text: 'Remove icon',
text: message.get('bookmarkFormDisplayVisualIconRemove'),
srOnly: true,
style: ['line'],
iconName: 'cross',
@ -299,8 +301,8 @@ export const BookmarkForm = function({
path: 'display.visual.image.url',
id: 'display-visual-image-url',
value: bookmarkData.link.display.visual.image.url,
placeholder: 'https://www.example.com/image.jpg',
labelText: 'Bookmark image',
placeholder: message.get('bookmarkFormDisplayVisualImageUrlPlaceholder'),
labelText: message.get('bookmarkFormDisplayVisualImageUrlLabel'),
srOnly: true,
action: () => {
this.preview.update.assemble(bookmarkData);
@ -312,7 +314,7 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'display.visual.shadow.size',
id: 'display-visual-shadow-size',
labelText: 'Visual shadow',
labelText: message.get('bookmarkFormDisplayVisualShadowSize'),
value: bookmarkData.link.display.visual.shadow.size,
defaultValue: bookmarkDefault.display.visual.shadow.size,
min: bookmarkMinMax.display.visual.shadow.size.min,
@ -328,7 +330,7 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'display.name.show',
id: 'display-name-show',
labelText: 'Show Name',
labelText: message.get('bookmarkFormDisplayNameShow'),
action: () => {
this.disable();
this.collapse.display.name.update();
@ -340,8 +342,8 @@ export const BookmarkForm = function({
path: 'display.name.text',
id: 'display-name-text',
value: bookmarkData.link.display.name.text,
placeholder: 'Example',
labelText: 'Bookmark name',
placeholder: message.get('bookmarkFormDisplayNameTextPlaceholder'),
labelText: message.get('bookmarkFormDisplayNameTextLabel'),
srOnly: true,
action: () => {
this.preview.update.assemble(bookmarkData);
@ -351,7 +353,7 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'display.name.size',
id: 'display-name-size',
labelText: 'Name size',
labelText: message.get('bookmarkFormDisplayNameSize'),
value: bookmarkData.link.display.name.size,
defaultValue: bookmarkDefault.display.name.size,
min: bookmarkMinMax.display.name.size.min,
@ -366,8 +368,8 @@ export const BookmarkForm = function({
by: new Control_radio({
object: bookmarkData.link,
radioGroup: [
{ id: 'accent-by-theme', labelText: 'Theme Accent', description: 'Use the Accent defined by the Theme.', value: 'theme' },
{ id: 'accent-by-custom', labelText: 'Custom Accent', description: 'Override the Theme Accent.', value: 'custom' }
{ id: 'accent-by-theme', labelText: message.get('bookmarkFormAccentByThemeLabel'), description: message.get('bookmarkFormAccentByThemeDescription'), value: 'theme' },
{ id: 'accent-by-custom', labelText: message.get('bookmarkFormAccentByCustomLabel'), description: message.get('bookmarkFormAccentByCustomDescription'), value: 'custom' }
],
groupName: 'accent-by',
path: 'accent.by',
@ -381,7 +383,7 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'accent',
id: 'accent',
labelText: 'Accent',
labelText: message.get('bookmarkFormAccentColor'),
srOnly: true,
defaultValue: bookmarkDefault.accent.rgb,
minMaxObject: bookmarkMinMax,
@ -395,8 +397,8 @@ export const BookmarkForm = function({
by: new Control_radio({
object: bookmarkData.link,
radioGroup: [
{ id: 'color-by-theme', labelText: 'Theme colour', description: 'Use the Colour defined by the Theme.', value: 'theme' },
{ id: 'color-by-custom', labelText: 'Custom colour', description: 'Override the Theme colour.', value: 'custom' }
{ id: 'color-by-theme', labelText: message.get('bookmarkFormColorByThemeLabel'), description: message.get('bookmarkFormColorByThemeDescription'), value: 'theme' },
{ id: 'color-by-custom', labelText: message.get('bookmarkFormColorByCustomLabel'), description: message.get('bookmarkFormColorByCustomDescription'), value: 'custom' }
],
groupName: 'color-by',
path: 'color.by',
@ -410,7 +412,7 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'color',
id: 'color',
labelText: 'Colour',
labelText: message.get('bookmarkFormColorColor'),
srOnly: true,
defaultValue: bookmarkDefault.color.rgb,
minMaxObject: bookmarkMinMax,
@ -423,7 +425,7 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'color.opacity',
id: 'color-opacity',
labelText: 'Opacity',
labelText: message.get('bookmarkFormColorOpacity'),
value: bookmarkData.link.color.opacity,
defaultValue: bookmarkDefault.color.opacity,
min: bookmarkMinMax.color.opacity.min,
@ -438,8 +440,8 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'background.show',
id: 'background-show',
labelText: 'Show background',
description: 'Display an Image or video Background on this Bookmark tile.',
labelText: message.get('bookmarkFormBackgroundShowLabel'),
description: message.get('bookmarkFormBackgroundShowDescription'),
action: () => {
this.collapse.background.update();
this.disable();
@ -449,8 +451,8 @@ export const BookmarkForm = function({
type: new Control_radio({
object: bookmarkData.link,
radioGroup: [
{ id: 'background-type-image', labelText: 'Image', value: 'image' },
{ id: 'background-type-video', labelText: 'Video', value: 'video' }
{ id: 'background-type-image', labelText: message.get('bookmarkFormBackgroundTypeImage'), value: 'image' },
{ id: 'background-type-video', labelText: message.get('bookmarkFormBackgroundTypeVideo'), value: 'video' }
],
groupName: 'background-type',
path: 'background.type',
@ -463,7 +465,7 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'background.opacity',
id: 'background-opacity',
labelText: 'Opacity',
labelText: message.get('bookmarkFormBackgroundOpacity'),
value: bookmarkData.link.background.opacity,
defaultValue: bookmarkDefault.background.opacity,
min: bookmarkMinMax.background.opacity.min,
@ -478,8 +480,8 @@ export const BookmarkForm = function({
path: 'background.image.url',
id: 'background-image-url',
value: bookmarkData.link.background.image.url,
placeholder: 'https://www.example.com/image.jpg',
labelText: 'Background image URL',
placeholder: message.get('bookmarkFormBackgroundImagePlaceholder'),
labelText: message.get('bookmarkFormBackgroundImageLabel'),
srOnly: true,
action: () => {
this.preview.update.assemble(bookmarkData);
@ -492,8 +494,8 @@ export const BookmarkForm = function({
path: 'background.video.url',
id: 'background-video-url',
value: bookmarkData.link.background.video.url,
placeholder: 'https://www.example.com/video.mp4',
labelText: 'Background video URL',
placeholder: message.get('bookmarkFormBackgroundVideoPlaceholder'),
labelText: message.get('bookmarkFormBackgroundVideoLabel'),
srOnly: true,
action: () => {
this.preview.update.assemble(bookmarkData);
@ -505,7 +507,7 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'border',
id: 'border',
labelText: 'Border',
labelText: message.get('bookmarkFormBorder'),
value: bookmarkData.link.border,
defaultValue: bookmarkDefault.border,
min: bookmarkMinMax.border.min,
@ -519,8 +521,8 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'shape.wide',
id: 'shape-wide',
labelText: 'Wide tile',
description: 'Bookmark tile to span across two columns.',
labelText: message.get('bookmarkFormShapeWideLabel'),
description: message.get('bookmarkFormShapeWideDescription'),
action: () => {
this.preview.update.assemble(bookmarkData);
}
@ -529,8 +531,8 @@ export const BookmarkForm = function({
object: bookmarkData.link,
path: 'shape.tall',
id: 'shape-tall',
labelText: 'Tall tile',
description: 'Bookmark tile to span across two columns.',
labelText: message.get('bookmarkFormShapeTallLabel'),
description: message.get('bookmarkFormShapeTallDescription'),
action: () => {
this.preview.update.assemble(bookmarkData);
}
@ -542,8 +544,8 @@ export const BookmarkForm = function({
destination: new Control_radio({
object: bookmarkData,
radioGroup: [
{ id: 'group-destination-existing', labelText: 'Existing Group', value: 'existing' },
{ id: 'group-destination-new', labelText: 'New Group', value: 'new' }
{ id: 'group-destination-existing', labelText: message.get('bookmarkFormGroupDestinationExisting'), value: 'existing' },
{ id: 'group-destination-new', labelText: message.get('bookmarkFormGroupDestinationNew'), value: 'new' }
],
groupName: 'group.destination',
path: 'group.destination',
@ -556,12 +558,12 @@ export const BookmarkForm = function({
path: 'group.name',
id: 'group-name',
value: bookmarkData.group.name,
placeholder: 'Example group',
labelText: 'URL',
placeholder: message.get('bookmarkFormGroupNamePlaceholder'),
labelText: message.get('bookmarkFormGroupNameLabel'),
srOnly: true
}),
random: new Button({
text: 'Random Group name',
text: message.get('bookmarkFormGroupRandom'),
style: ['line'],
func: () => {
bookmarkData.group.name = randomString({ adjectivesCount: randomNumber(1, 3) });
@ -573,7 +575,7 @@ export const BookmarkForm = function({
object: bookmarkData,
path: 'position.destination.group',
id: 'position-destination-group',
labelText: 'Group',
labelText: message.get('bookmarkFormGroupPositionGroup'),
srOnly: true,
option: (bookmark.all.length > 0) ? this.selectOption.group() : [],
selected: bookmarkData.position.destination.group,
@ -599,7 +601,7 @@ export const BookmarkForm = function({
object: bookmarkData,
path: 'position.destination.item',
id: 'position-destination-item',
labelText: 'Position',
labelText: message.get('bookmarkFormGroupPositionItem'),
option: (bookmark.all.length > 0) ? this.selectOption.item() : [],
selected: bookmarkData.position.destination.item
})
@ -612,10 +614,10 @@ export const BookmarkForm = function({
object: bookmarkData.propagate,
path: 'display',
id: 'apply-to-all-display',
labelText: 'Apply "Show Visual Element" and "Show Name" to other Bookmarks',
labelText: message.get('bookmarkFormPropagateVisualLabel'),
description: [
'The Letter, Icon, Image and Name text will not be shared.',
'Useful for hiding the Visual Elements or Names on all Bookmarks.'
message.get('bookmarkFormPropagateVisualDescriptionPara1'),
message.get('bookmarkFormPropagateVisualDescriptionPara2')
]
});
@ -628,10 +630,10 @@ export const BookmarkForm = function({
object: bookmarkData.propagate,
path: 'layout',
id: 'apply-to-all-layout',
labelText: 'Apply Layout to other Bookmarks',
labelText: message.get('bookmarkFormPropagateLayoutLabel'),
description: [
'When saved, apply the above Layout to all other Bookmarks.',
'Only the Visual and Name size, Alignment, Order, Position and Gutter will be will be applied to all.'
message.get('bookmarkFormPropagateLayoutDescriptionPara1'),
message.get('bookmarkFormPropagateLayoutDescriptionPara2')
]
});
@ -644,10 +646,10 @@ export const BookmarkForm = function({
object: bookmarkData.propagate,
path: 'theme',
id: 'apply-to-all-theme',
labelText: 'Apply Theme to other Bookmarks',
labelText: message.get('bookmarkFormPropagateThemeLabel'),
description: [
'When saved, apply the above Theme to all other Bookmarks.',
'Only the Colour, Accent, Opacity, Border and Visual shadow will be applied to all.'
message.get('bookmarkFormPropagateThemeDescriptionPara1'),
message.get('bookmarkFormPropagateThemeDescriptionPara2')
]
});
@ -662,17 +664,17 @@ export const BookmarkForm = function({
visual: {
shadow: {
size: new Control_helperText({
text: ['Visual shadow only applies to a Letter or Icon.']
text: [message.get('bookmarkFormDisplayVisualShadowHelperPara1')]
})
}
}
},
background: {
image: new Control_helperText({
text: ['Background image only supports a direct URL to an image file.']
text: [message.get('bookmarkFormBackgroundImageHelperPara1')]
}),
video: new Control_helperText({
text: ['Background video only supports a direct URL to a video file. Supports MP4 and WebM format.', 'YouTube page URLs can not be used.']
text: [message.get('bookmarkFormBackgroundVideoHelperPara1')]
})
}
}
@ -769,8 +771,8 @@ export const BookmarkForm = function({
form.wrap({
children: [
node('div|class:bookmark-form-description', [
node('h2:Visual & Name'),
node('p:Display Letters, Icon, Image and a Name on this Bookmark tile.')
node(`h2:${message.get('bookmarkFormSectionVisualHeading')}`),
node(`p:${message.get('bookmarkFormSectionVisualDescription')}`)
])
]
}),
@ -799,8 +801,8 @@ export const BookmarkForm = function({
form.wrap({
children: [
node('div|class:bookmark-form-description', [
node('h2:Address'),
complexNode({ tag: 'p', text: 'Be sure to use the full URL and include <strong>"https://..."</strong>', complexText: true })
node(`h2:${message.get('bookmarkFormSectionAddressHeading')}`),
complexNode({ tag: 'p', text: message.get('bookmarkFormSectionAddressDescription'), complexText: true })
])
]
}),
@ -823,8 +825,8 @@ export const BookmarkForm = function({
form.wrap({
children: [
node('div|class:bookmark-form-description', [
node('h2:Position'),
node('p:The Group to place this Bookmark in.')
node(`h2:${message.get('bookmarkFormSectionPositionHeading')}`),
node(`p:${message.get('bookmarkFormSectionPositionDescription')}`)
])
]
}),
@ -868,8 +870,8 @@ export const BookmarkForm = function({
form.wrap({
children: [
node('div|class:bookmark-form-description', [
node('h2:Layout'),
node('p:Change the Visual Element and Name position, scale and orientation.')
node(`h2:${message.get('bookmarkFormSectionLayoutHeading')}`),
node(`p:${message.get('bookmarkFormSectionLayoutDescription')}`)
])
]
}),
@ -915,8 +917,8 @@ export const BookmarkForm = function({
form.wrap({
children: [
node('div|class:bookmark-form-description', [
node('h2:Theme'),
node('p:Override the Theme and Accent colour.')
node(`h2:${message.get('bookmarkFormSectionThemeHeading')}`),
node(`p:${message.get('bookmarkFormSectionThemeDescription')}`)
])
]
}),
@ -1053,23 +1055,23 @@ export const BookmarkForm = function({
this.tab = new Tab({
group: [{
tabText: 'Visual & Name',
tabText: message.get('bookmarkFormTabVisual'),
area: this.area.visual(),
active: true
}, {
tabText: 'Address',
tabText: message.get('bookmarkFormTabAddress'),
area: this.area.address(),
active: false
}, {
tabText: 'Position',
tabText: message.get('bookmarkFormTabPosition'),
area: this.area.position(),
active: false
}, {
tabText: 'Layout',
tabText: message.get('bookmarkFormTabLayout'),
area: this.area.layout(),
active: false
}, {
tabText: 'Theme',
tabText: message.get('bookmarkFormTabTheme'),
area: this.area.theme(),
active: false
}]

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

@ -1,10 +1,12 @@
import { message } from '../message';
import { BookmarkTile } from '../bookmarkTile';
import { node } from '../../utility/node';
import './index.css';
export const BookmarkPreview = function ({
export const BookmarkPreview = function({
bookmarkData = false
} = {}) {
@ -29,9 +31,9 @@ export const BookmarkPreview = function ({
}
if (bookmarkData.link.shape.tall || bookmarkData.link.shape.wide) {
this.title.textContent = 'Preview (50% scale)';
this.title.textContent = message.get('bookmarkPreviewHalf');
} else {
this.title.textContent = 'Preview';
this.title.textContent = message.get('bookmarkPreviewFull');
}
};

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

@ -1,3 +1,5 @@
import { message } from '../message';
import { state } from '../state';
import { data } from '../data';
import { bookmark } from '../bookmark';
@ -16,7 +18,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
} = {}) {
@ -63,11 +65,11 @@ const BookmarkTile = function ({
this.control.button = {
left: new Button({
text: 'Move this bookmark left',
text: message.get('bookmarkTileControlLeft'),
srOnly: true,
iconName: 'arrowKeyboardLeft',
style: ['link'],
title: 'Move this bookmark left',
title: message.get('bookmarkTileControlLeft'),
classList: ['bookmark-control-button', 'bookmark-control-left'],
func: () => {
@ -86,19 +88,19 @@ const BookmarkTile = function ({
}
}),
sort: new Button({
text: 'Drag bookmark to reorder',
text: message.get('bookmarkTileControlSort'),
srOnly: true,
iconName: 'drag',
style: ['link'],
title: 'Drag bookmark to reorder',
title: message.get('bookmarkTileControlSort'),
classList: ['bookmark-control-button', 'bookmark-control-sort']
}),
right: new Button({
text: 'Move this bookmark right',
text: message.get('bookmarkTileControlRight'),
srOnly: true,
iconName: 'arrowKeyboardRight',
style: ['link'],
title: 'Move this bookmark right',
title: message.get('bookmarkTileControlRight'),
classList: ['bookmark-control-button', 'bookmark-control-right'],
func: () => {
@ -117,11 +119,11 @@ const BookmarkTile = function ({
}
}),
edit: new Button({
text: 'Edit this bookmark',
text: message.get('bookmarkTileControlEdit'),
srOnly: true,
iconName: 'edit',
style: ['link'],
title: 'Edit this bookmark',
title: message.get('bookmarkTileControlEdit'),
classList: ['bookmark-control-button', 'bookmark-control-edit'],
func: () => {
@ -136,9 +138,10 @@ const BookmarkTile = function ({
const bookmarkForm = new BookmarkForm({ bookmarkData: newBookmarkData });
const editModal = new Modal({
heading: isValidString(newBookmarkData.link.display.name.text) ? 'Edit ' + newBookmarkData.link.display.name.text : 'Edit unnamed bookmark',
heading: isValidString(newBookmarkData.link.display.name.text) ? `${message.get('bookmarkEditHeadingName')} ${newBookmarkData.link.display.name.text}` : message.get('bookmarkEditHeadingUnnamed'),
content: bookmarkForm.form(),
successText: 'Save',
successText: message.get('bookmarkEditSuccessText'),
cancelText: message.get('bookmarkEditCancelText'),
width: (state.get.current().bookmark.style === 'block') ? 60 : 70,
maxHeight: true,
successAction: () => {
@ -177,18 +180,19 @@ const BookmarkTile = function ({
}
}),
remove: new Button({
text: 'Remove this bookmark',
text: message.get('bookmarkTileControlRemove'),
srOnly: true,
iconName: 'cross',
style: ['link'],
title: 'Remove this bookmark',
title: message.get('bookmarkTileControlRemove'),
classList: ['bookmark-control-button', 'bookmark-control-remove'],
func: () => {
const removeModal = new Modal({
heading: isValidString(bookmarkData.link.display.name.text) ? 'Remove ' + bookmarkData.link.display.name.text : 'Remove unnamed bookmark',
content: 'Are you sure you want to remove this Bookmark? This can not be undone.',
successText: 'Remove',
heading: isValidString(bookmarkData.link.display.name.text) ? `${message.get('bookmarkRemoveHeadingName')} ${bookmarkData.link.display.name.text}` : message.get('bookmarkRemoveHeadingUnnamed'),
content: message.get('bookmarkRemoveContent'),
successText: message.get('bookmarkRemoveSuccessText'),
cancelText: message.get('bookmarkRemoveCancelText'),
width: 'small',
successAction: () => {

21
src/component/browserDetect/index.js Normal file
View File

@ -0,0 +1,21 @@
export const browserDetect = () => {
const userAgent = navigator.userAgent;
let browserName = {
chrome: false,
firefox: false,
none: false
};
if (userAgent.match(/chrome|chromium|crios/i)) {
browserName.chrome = true;
} else if (userAgent.match(/firefox|fxios/i)) {
browserName.firefox = true;
} else {
browserName.none = true;
}
return browserName;
};

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

@ -1,3 +1,5 @@
import { message } from '../../message';
import * as form from '../../form';
import { Button } from '../../button';
@ -65,7 +67,7 @@ export const Control_color = function ({
})),
max: 7,
classList: ['form-group-item-half'],
placeholder: 'Hex code',
placeholder: message.get('controlColorTextPlaceholder'),
func: () => {
if (path) {
@ -82,11 +84,12 @@ export const Control_color = function ({
});
this.reset = new Button({
text: false,
text: message.get('controlGeneralReset'),
iconName: 'replay',
style: ['line'],
classList: ['form-group-item-small'],
title: 'Reset to default',
title: message.get('controlGeneralReset'),
srOnly: true,
func: () => {
set({ object: object, path: path + '.rgb', value: JSON.parse(JSON.stringify(defaultValue)) });
@ -99,11 +102,12 @@ export const Control_color = function ({
});
this.random = new Button({
text: false,
text: message.get('controlColorRandom'),
iconName: 'random',
style: ['line'],
classList: ['form-group-item-small'],
title: 'Random colour',
title: message.get('controlColorRandom'),
srOnly: true,
func: () => {
set({ object: object, path: path + '.hsl', value: { h: randomNumber(0, 360), s: randomNumber(0, 100), l: randomNumber(0, 100) } });

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

@ -1,3 +1,5 @@
import { message } from '../../message';
import * as form from '../../form';
import { Button } from '../../button';
@ -24,11 +26,12 @@ export const Control_colorMixer = function ({
} = {}) {
this.moreControlsToggle = new Button({
text: false,
text: message.get('controlColorMixerMoreControls'),
iconName: 'arrowKeyboardDown',
style: ['line'],
classList: ['collapse-toggle', 'form-group-item-small'],
title: 'More controls',
title: message.get('controlColorMixerMoreControls'),
srOnly: true,
func: () => {
this.moreControlsCollapse.toggle();
this.moreControlsUpdate();
@ -67,7 +70,7 @@ export const Control_colorMixer = function ({
object: object,
path: path + '.hsl.h',
id: id + '-hsl-h',
labelText: 'Hue',
labelText: message.get('controlColorMixerSliderH'),
value: get({ object: object, path: path + '.hsl.h' }),
min: get({ object: minMaxObject, path: path + '.hsl.h.min' }),
max: get({ object: minMaxObject, path: path + '.hsl.h.max' }),
@ -93,7 +96,7 @@ export const Control_colorMixer = function ({
object: object,
path: path + '.hsl.s',
id: id + '-hsl-s',
labelText: 'Saturation',
labelText: message.get('controlColorMixerSliderS'),
value: get({ object: object, path: path + '.hsl.s' }),
min: get({ object: minMaxObject, path: path + '.hsl.s.min' }),
max: get({ object: minMaxObject, path: path + '.hsl.s.max' }),
@ -119,7 +122,7 @@ export const Control_colorMixer = function ({
object: object,
path: path + '.hsl.l',
id: id + '-hsl-l',
labelText: 'Lightness',
labelText: message.get('controlColorMixerSliderL'),
value: get({ object: object, path: path + '.hsl.l' }),
min: get({ object: minMaxObject, path: path + '.hsl.l.min' }),
max: get({ object: minMaxObject, path: path + '.hsl.l.max' }),
@ -145,7 +148,7 @@ export const Control_colorMixer = function ({
object: object,
path: path + '.rgb.r',
id: id + '-rgb-r',
labelText: 'Red',
labelText: message.get('controlColorMixerSliderR'),
value: get({ object: object, path: path + '.rgb.r' }),
min: get({ object: minMaxObject, path: path + '.rgb.r.min' }),
max: get({ object: minMaxObject, path: path + '.rgb.r.max' }),
@ -171,7 +174,7 @@ export const Control_colorMixer = function ({
object: object,
path: path + '.rgb.g',
id: id + '-rgb-g',
labelText: 'Green',
labelText: message.get('controlColorMixerSliderG'),
value: get({ object: object, path: path + '.rgb.g' }),
min: get({ object: minMaxObject, path: path + '.rgb.g.min' }),
max: get({ object: minMaxObject, path: path + '.rgb.g.max' }),
@ -197,7 +200,7 @@ export const Control_colorMixer = function ({
object: object,
path: path + '.rgb.b',
id: id + '-rgb-b',
labelText: 'Blue',
labelText: message.get('controlColorMixerSliderB'),
value: get({ object: object, path: path + '.rgb.b' }),
min: get({ object: minMaxObject, path: path + '.rgb.b.min' }),
max: get({ object: minMaxObject, path: path + '.rgb.b.max' }),

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

@ -6,7 +6,7 @@ import { set } from '../../../utility/set';
import { trimString } from '../../../utility/trimString';
import { clearChildNode } from '../../../utility/clearChildNode';
export const Control_select = function ({
export const Control_select = function({
option = [],
selected = 0,
object = {},
@ -24,7 +24,9 @@ export const Control_select = function ({
selected: selected,
func: () => {
if (object) {
set({ object: object, path: path, value: this.select.selectedIndex });
}
if (action) { action(); }

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

@ -1,3 +1,5 @@
import { message } from '../../message';
import * as form from '../../form';
import { Button } from '../../button';
@ -6,7 +8,7 @@ import { get } from '../../../utility/get';
import { set } from '../../../utility/set';
import { minMax } from '../../../utility/minMax';
export const Control_slider = function ({
export const Control_slider = function({
object = {},
path = false,
id = 'name',
@ -115,11 +117,12 @@ export const Control_slider = function ({
});
this.reset = new Button({
text: false,
text: message.get('controlGeneralReset'),
iconName: 'replay',
style: ['line'],
classList: ['form-group-item-small'],
title: 'Reset to default',
title: message.get('controlGeneralReset'),
srOnly: true,
func: () => {
set({

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

@ -1,3 +1,5 @@
import { message } from '../../message';
import * as form from '../../form';
import { Button } from '../../button';
@ -6,7 +8,7 @@ import { get } from '../../../utility/get';
import { set } from '../../../utility/set';
import { minMax } from '../../../utility/minMax';
export const Control_sliderSlim = function ({
export const Control_sliderSlim = function({
object = {},
path = false,
id = 'name',
@ -99,11 +101,12 @@ export const Control_sliderSlim = function ({
});
this.reset = new Button({
text: false,
text: message.get('controlGeneralReset'),
iconName: 'replay',
style: ['line'],
classList: ['form-group-item-small'],
title: 'Reset to default',
title: message.get('controlGeneralReset'),
srOnly: true,
func: () => {
set({

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

@ -1,3 +1,5 @@
import { message } from '../../message';
import * as form from '../../form';
import { Button } from '../../button';
@ -5,7 +7,7 @@ import { Button } from '../../button';
import { get } from '../../../utility/get';
import { set } from '../../../utility/set';
export const Control_textReset = function ({
export const Control_textReset = function({
object = {},
path = false,
id = 'name',
@ -63,11 +65,12 @@ export const Control_textReset = function ({
}
this.reset = new Button({
text: false,
text: message.get('controlGeneralReset'),
iconName: 'replay',
style: ['line'],
classList: ['form-group-item-small'],
title: 'Reset to default',
title: message.get('controlGeneralReset'),
srOnly: true,
func: () => {
set({
object: object,

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

@ -1,7 +1,8 @@
import { message } from '../message';
import { state } from '../state';
import { data } from '../data';
import { Modal } from '../modal';
import { CustomThemeTile } from '../customThemeTile';
import { CustomThemeForm } from '../customThemeForm';
@ -78,9 +79,10 @@ customTheme.add = {
const bookmarkForm = new CustomThemeForm({ customThemeData: newCustomThemeData });
const addModal = new Modal({
heading: 'Save current theme',
heading: message.get('themeCustomAddHeading'),
content: bookmarkForm.form(),
successText: 'Save',
successText: message.get('themeCustomAddSuccessText'),
cancelText: message.get('themeCustomAddCancelText'),
width: 'small',
successAction: () => {
customTheme.item.mod.add(newCustomThemeData);

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

@ -1,3 +1,4 @@
import { message } from '../message';
import { Button } from '../button';
@ -7,7 +8,7 @@ import { node } from '../../utility/node';
import { randomString } from '../../utility/randomString';
import { randomNumber } from '../../utility/randomNumber';
export const CustomThemeForm = function ({
export const CustomThemeForm = function({
customThemeData = false
} = {}) {
@ -19,11 +20,11 @@ export const CustomThemeForm = function ({
path: 'name',
id: 'name',
value: customThemeData.theme.name,
placeholder: 'Example theme',
labelText: 'Name'
placeholder: message.get('themeCustomFormNamePlaceholder'),
labelText: message.get('themeCustomFormNameLabel')
}),
randomName: new Button({
text: 'Random theme name',
text: message.get('themeCustomFormRandom'),
style: ['line'],
func: () => {
customThemeData.theme.name = randomString({ adjectivesCount: randomNumber(1, 3) });

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

@ -1,3 +1,5 @@
import { message } from '../message';
import { state } from '../state';
import { data } from '../data';
import { theme } from '../theme';
@ -324,12 +326,12 @@ export const CustomThemeTile = function({
this.control.button = {
edit: new Button({
text: 'Edit this saved theme',
text: message.get('themeCustomTileControlEdit'),
srOnly: true,
iconName: 'edit',
style: ['link'],
size: 'small',
title: 'Edit this saved theme',
title: message.get('themeCustomTileControlEdit'),
classList: ['theme-custom-control-button', 'theme-custom-control-edit'],
func: () => {
@ -342,9 +344,10 @@ export const CustomThemeTile = function({
const bookmarkForm = new CustomThemeForm({ customThemeData: newCustomThemeData });
const editModal = new Modal({
heading: isValidString(customThemeData.theme.name) ? 'Edit ' + customThemeData.theme.name : 'Edit unnamed custom theme',
heading: isValidString(customThemeData.theme.name) ? `${message.get('themeCustomEditHeadingName')} ${customThemeData.theme.name}` : message.get('themeCustomEditHeadingUnnamed'),
content: bookmarkForm.form(),
successText: 'Save',
successText: message.get('themeCustomEditSuccessText'),
cancelText: message.get('themeCustomEditCancelText'),
width: 'small',
successAction: () => {
@ -360,21 +363,22 @@ export const CustomThemeTile = function({
}
}),
remove: new Button({
text: 'Remove this saved theme',
text: message.get('themeCustomTileControlRemove'),
srOnly: true,
iconName: 'cross',
style: ['link'],
size: 'small',
title: 'Remove this saved theme',
title: message.get('themeCustomTileControlRemove'),
classList: ['theme-custom-control-button', 'theme-custom-control-remove'],
func: () => {
menu.close();
const removeModal = new Modal({
heading: isValidString(customThemeData.theme.name) ? 'Remove ' + customThemeData.theme.name : 'Remove unnamed custom theme',
content: 'Are you sure you want to remove this saved theme? This can not be undone.',
successText: 'Remove',
heading: isValidString(customThemeData.theme.name) ? `${message.get('themeCustomRemoveHeadingName')} ${customThemeData.theme.name}` : message.get('themeCustomRemoveHeadingUnnamed'),
content: message.get('themeCustomRemoveContent'),
successText: message.get('themeCustomRemoveSuccessText'),
cancelText: message.get('themeCustomRemoveCancelText'),
width: 'small',
successAction: () => {
customTheme.item.mod.remove(customThemeData);

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

@ -1,3 +1,5 @@
import { message } from '../message';
import { state } from '../state';
import { bookmark } from '../bookmark';
import { menu } from '../menu';
@ -85,9 +87,10 @@ data.import = {
});
const importModal = new Modal({
heading: 'Restoring from a ' + APP_NAME + ' backup',
heading: message.get('dataRestoreHeading'),
content: importForm.form(),
successText: 'Import',
successText: message.get('dataRestoreSuccessText'),
cancelText: message.get('dataRestoreCancelText'),
width: 'small',
successAction: () => {
if (data.import.state.setup.include || data.import.state.theme.include || data.import.state.bookmark.include) {
@ -216,7 +219,7 @@ data.export = () => {
timestamp.year = leadingZero(timestamp.year);
timestamp = timestamp.year + '.' + timestamp.month + '.' + timestamp.date + ' - ' + timestamp.hours + ' ' + timestamp.minutes + ' ' + timestamp.seconds;
const fileName = APP_NAME + ' backup - ' + timestamp + '.json';
const fileName = APP_NAME + ' ' + message.get('dataExportBackup') + ' - ' + timestamp + '.json';
const dataToExport = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data.load()));
@ -340,12 +343,13 @@ data.clear = {
all: {
render: () => {
const clearModal = new Modal({
heading: 'Clear all ' + APP_NAME + ' data?',
heading: message.get('dataClearAllHeading'),
content: node('div', [
node('p:Are you sure you want to clear all ' + APP_NAME + ' Bookmarks and Settings? ' + APP_NAME + ' will be restore to the default state.'),
node('p:This can not be undone.')
node(`p:${message.get('dataClearAllContentPara1')}`),
node(`p:${message.get('dataClearAllContentPara2')}`)
]),
successText: 'Clear all data',
successText: message.get('dataClearAllSuccessText'),
cancelText: message.get('dataClearAllCancelText'),
width: 'small',
successAction: () => {
data.wipe.all();
@ -358,12 +362,13 @@ data.clear = {
partial: {
render: () => {
const clearModal = new Modal({
heading: 'Clear ' + APP_NAME + ' data except bookmarks?',
heading: message.get('dataClearPartialHeading'),
content: node('div', [
node('p:Are you sure you want to clear all ' + APP_NAME + ' Settings? ' + APP_NAME + ' will be restore to the default state but your Bookmarks and Groups will remain.'),
node('p:This can not be undone.')
node(`p:${message.get('dataClearPartialContentPara1')}`),
node(`p:${message.get('dataClearPartialContentPara2')}`)
]),
successText: 'Clear all except bookmarks',
successText: message.get('dataClearPartialSuccessText'),
cancelText: message.get('dataClearPartialCancelText'),
width: 35,
successAction: () => {
data.wipe.partial();
@ -379,7 +384,7 @@ data.feedback = {};
data.feedback.empty = {
render: (feedback) => {
feedback.appendChild(node('p:Nothing selected to import.|class:muted small'));
feedback.appendChild(node(`p:${message.get('dataFeedbackEmpty')}|class:muted small`));
}
};
@ -391,7 +396,7 @@ data.feedback.clear = {
data.feedback.success = {
render: (feedback, filename, action) => {
feedback.appendChild(node('p:Success! Restoring ' + APP_NAME + ' Bookmarks and Settings.|class:muted small'));
feedback.appendChild(node(`p:${message.get('dataFeedbackSuccess')}|class:muted small`));
feedback.appendChild(node('p:' + filename));
@ -404,21 +409,21 @@ data.feedback.success = {
data.feedback.fail = {
notJson: {
render: (feedback, filename) => {
feedback.appendChild(node('p:Not a JSON file. Make sure the selected file came from ' + APP_NAME + '.|class:small muted'));
feedback.appendChild(node(`p:${message.get('dataFeedbackFailNotJson')}|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 ' + APP_NAME + '.|class:small muted'));
feedback.appendChild(node(`p:${message.get('dataFeedbackFailNotAppJson')}|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 ' + APP_NAME + ' or a ' + APP_NAME + ' backup JSON file.|class:small muted'));
feedback.appendChild(node(`p:${message.get('dataFeedbackFailNotClipboardJson')}|class:small muted`));
feedback.appendChild(node('p:' + name));
data.feedback.animation.set.render(feedback, 'is-shake');
}

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

@ -1,4 +1,3 @@
import { Button } from '../button';
import { KeyboardShortcut } from '../keyboardShortcut';
@ -6,7 +5,8 @@ import { node } from '../../utility/node';
import './index.css';
export const Dropdown = function ({
export const Dropdown = function({
title = false,
text = 'Dropdown',
menuItem = [],
buttonStyle = [],
@ -23,6 +23,7 @@ export const Dropdown = function ({
menu: node('div|class:dropdown-menu'),
content: node('div|class:dropdown-content'),
toggle: new Button({
title: title,
text: text,
srOnly: srOnly,
iconName: iconName,

28
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 = [],
@ -35,9 +35,10 @@ export const select = function ({
}
if (option.length > 0) {
option.forEach((item) => {
if (typeof item == 'string') {
select.appendChild(
complexNode({
tag: 'option',
@ -49,12 +50,31 @@ export const select = function ({
})
);
});
} else {
select.selectedIndex = selected;
const option = complexNode({ tag: 'option' });
if (item.name) {
option.textContent = item.name;
}
if (item.id) {
option.value = item.id;
}
if (item.disabled) {
option.disabled = true;
}
select.appendChild(option);
}
});
}
select.selectedIndex = selected;
return select;
};

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

@ -8,7 +8,7 @@ import moment from 'moment';
import './index.css';
export const Greeting = function () {
export const Greeting = function() {
this.now;
@ -25,10 +25,10 @@ export const Greeting = function () {
};
this.message = ['Good night', 'Good morning', 'Good afternoon', 'Good evening'];
this.update = () => {
const goodMessage = ['Good night', 'Good morning', 'Good afternoon', 'Good evening'];
this.now = moment();
let value;
@ -43,7 +43,7 @@ export const Greeting = function () {
case 'good':
value = this.message[Math.floor(this.now.hours() / 6)];
value = goodMessage[Math.floor(this.now.hours() / 6)];
break;
@ -55,7 +55,7 @@ export const Greeting = function () {
case 'hi':
value = 'Hi';
value = 'hi';
break;
@ -67,7 +67,7 @@ export const Greeting = function () {
} else {
value = this.message[Math.floor(this.now.hours() / 6)];
value = goodMessage[Math.floor(this.now.hours() / 6)];
}

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

@ -1,3 +1,5 @@
import { message } from '../message';
import { state } from '../state';
import { data } from '../data';
import { layout } from '../layout';
@ -213,9 +215,10 @@ group.add = {
const groupForm = new GroupForm({ groupData: newGroupData });
const addModal = new Modal({
heading: 'Add a new Group',
heading: message.get('groupAddHeading'),
content: groupForm.form(),
successText: 'Add',
successText: message.get('groupAddSuccessText'),
cancelText: message.get('groupAddCancelText'),
width: 40,
openAction: () => {

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

@ -1,3 +1,5 @@
import { message } from '../message';
import { state } from '../state';
import { data } from '../data';
import { group } from '../group';
@ -14,7 +16,7 @@ import { node } from '../../utility/node';
import { isValidString } from '../../utility/isValidString';
import { clearChildNode } from '../../utility/clearChildNode';
export const GroupArea = function ({
export const GroupArea = function({
groupData = {}
} = {}) {
@ -42,11 +44,11 @@ export const GroupArea = function ({
this.control.button = {
up: new Button({
text: 'Move this group up',
text: message.get('groupAreaControlUp'),
srOnly: true,
iconName: 'arrowKeyboardUp',
style: ['line'],
title: 'Move this group up',
title: message.get('groupAreaControlUp'),
classList: ['group-control-button', 'group-control-up'],
func: () => {
@ -65,19 +67,19 @@ export const GroupArea = function ({
}
}),
sort: new Button({
text: 'Drag group to reorder',
text: message.get('groupAreaControlSort'),
srOnly: true,
iconName: 'drag',
style: ['line'],
title: 'Drag group to reorder',
title: message.get('groupAreaControlSort'),
classList: ['group-control-button', 'group-control-sort'],
}),
down: new Button({
text: 'Move this group down',
text: message.get('groupAreaControlDown'),
srOnly: true,
iconName: 'arrowKeyboardDown',
style: ['line'],
title: 'Move this group right',
title: message.get('groupAreaControlDown'),
classList: ['group-control-button', 'group-control-up'],
func: () => {
@ -96,11 +98,11 @@ export const GroupArea = function ({
}
}),
edit: new Button({
text: 'Edit this group',
text: message.get('groupAreaControlEdit'),
srOnly: true,
iconName: 'edit',
style: ['line'],
title: 'Edit this group',
title: message.get('groupAreaControlEdit'),
classList: ['group-control-button', 'group-control-edit'],
func: () => {
@ -115,9 +117,10 @@ export const GroupArea = function ({
const groupForm = new GroupForm({ groupData: newGroupData });
const editModal = new Modal({
heading: isValidString(newGroupData.group.name.text) ? 'Edit ' + newGroupData.group.name.text : 'Edit unnamed group',
heading: isValidString(newGroupData.group.name.text) ? `${message.get('groupEditHeadingName')} ${newGroupData.group.name.text}` : message.get('groupEditHeadingUnnamed'),
content: groupForm.form(),
successText: 'Save',
successText: message.get('groupEditSuccessText'),
cancelText: message.get('groupEditCancelText'),
width: 40,
successAction: () => {
@ -135,18 +138,19 @@ export const GroupArea = function ({
}
}),
remove: new Button({
text: 'Remove this group',
text: message.get('groupAreaControlRemove'),
srOnly: true,
iconName: 'cross',
style: ['line'],
title: 'Remove this group',
title: message.get('groupAreaControlRemove'),
classList: ['group-control-button', 'group-control-remove'],
func: () => {
const removeModal = new Modal({
heading: isValidString(groupData.group.name.text) ? 'Remove ' + groupData.group.name.text : 'Remove unnamed bookmark',
content: 'Are you sure you want to remove this Group and all the Bookmarks within? This can not be undone.',
successText: 'Remove',
heading: isValidString(groupData.group.name.text) ? `${message.get('groupRemoveHeadingName')} ${groupData.group.name.text}` : message.get('groupRemoveHeadingUnnamed'),
content: message.get('groupRemoveContent'),
successText: message.get('groupRemoveSuccessText'),
cancelText: message.get('groupRemoveCancelText'),
width: 'small',
successAction: () => {
@ -169,9 +173,9 @@ export const GroupArea = function ({
this.openAll = {
button: new Button({
text: 'Open all Bookmarks in this Group',
text: message.get('groupAreaControlOpenAll'),
style: ['line'],
title: 'Open all Bookmarks in this Group',
title: message.get('groupAreaControlOpenAll'),
srOnly: true,
iconName: 'openAll',
classList: ['group-toolbar-button', 'group-toolbar-open-all'],
@ -208,9 +212,9 @@ export const GroupArea = function ({
this.collapse = {
button: new Button({
text: 'Collapse this Group',
text: message.get('groupAreaControlCollapse'),
style: ['line'],
title: 'Collapse this Group',
title: message.get('groupAreaControlCollapse'),
srOnly: true,
iconName: 'arrowKeyboardUp',
classList: ['group-toolbar-button', 'group-toolbar-collapse'],

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

@ -1,3 +1,5 @@
import { message } from '../message';
import { bookmark } from '../bookmark';
import * as form from '../form';
@ -58,26 +60,26 @@ export const GroupForm = function({
this.control.group = {
name: {
show: new Control_checkbox({
object: groupData.group,
path: 'name.show',
id: 'name-show',
labelText: message.get('groupFormNameShow'),
action: () => {
this.disable();
}
}),
text: new Control_text({
object: groupData.group,
path: 'name.text',
id: 'name-text',
value: groupData.group.name.text,
placeholder: 'Example group',
labelText: 'Group name',
placeholder: message.get('groupFormNameTextPlaceholder'),
labelText: message.get('groupFormNameTextLabel'),
srOnly: true
}),
show: new Control_checkbox({
object: groupData.group,
path: 'name.show',
id: 'name-show',
labelText: 'Show Group name',
action: () => {
this.disable();
}
}),
random: new Button({
text: 'Random Group name',
text: message.get('groupFormNameRandom'),
style: ['line'],
func: () => {
groupData.group.name.text = randomString({ adjectivesCount: randomNumber(1, 3) });
@ -90,8 +92,8 @@ export const GroupForm = function({
object: groupData.group,
path: 'toolbar.collapse.show',
id: 'toolbar-collapse-show',
labelText: 'Show Collapse',
description: 'The Collapse button will show or hide the Bookmaks in this Group.'
labelText: message.get('groupFormCollapseShowLabel'),
description: message.get('groupFormCollapseShowDescription')
})
},
openAll: {
@ -99,8 +101,8 @@ export const GroupForm = function({
object: groupData.group,
path: 'toolbar.openAll.show',
id: 'toolbar-openAll-show',
labelText: 'Show Open all',
description: 'Open all button will appear if there is at least one Bookmark in this Group.'
labelText: message.get('groupFormOpenAllShowLabel'),
description: message.get('groupFormOpenAllShowDescription')
})
}
};
@ -109,7 +111,7 @@ export const GroupForm = function({
object: groupData,
path: 'position.destination',
id: 'position-destination',
labelText: 'Position',
labelText: message.get('groupFormDestination'),
option: this.selectOption.group(),
selected: groupData.position.destination
});
@ -139,8 +141,8 @@ export const GroupForm = function({
form.wrap({
children: [
node('div|class:group-form-description', [
node('h2:Name'),
node('p:Display a Name above this Group.')
node(`h2:${message.get('groupFormSectionNameHeading')}`),
node(`p:${message.get('groupFormSectionNameDescription')}`)
])
]
}),
@ -177,8 +179,8 @@ export const GroupForm = function({
form.wrap({
children: [
node('div|class:group-form-description', [
node('h2:Toolbar'),
node('p:Display controls to open all or show/hide the Bookmarks in this Group.')
node(`h2:${message.get('groupFormSectionToolbarHeading')}`),
node(`p:${message.get('groupFormSectionToolbarDescription')}`)
])
]
}),
@ -206,8 +208,8 @@ export const GroupForm = function({
form.wrap({
children: [
node('div|class:group-form-description', [
node('h2:Ordering'),
node('p:The position of this Group.')
node(`h2:${message.get('groupFormSectionOrderingHeading')}`),
node(`p:${message.get('groupFormSectionOrderingDescription')}`)
])
]
}),

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

@ -105,6 +105,9 @@ icon.all = {
},
openAll: {
path: 'M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z'
},
globe: {
path: 'M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z'
}
};

7
src/component/importForm/index.css Normal file
View File

@ -0,0 +1,7 @@
:root {
--import-form-space: calc((var(--form-space) / 4) * 1em);
}
.import-form-description {
margin-bottom: var(--import-form-space);
}

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

@ -1,25 +1,28 @@
import { message } from '../message';
import * as form from '../form';
import { Control_radio } from '../control/radio';
import { Control_checkbox } from '../control/checkbox';
import { node } from '../../utility/node';
import { complexNode } from '../../utility/complexNode';
export const ImportForm = function ({
import './index.css';
export const ImportForm = function({
dataToImport = false,
state = false
} = {}) {
this.element = {
form: node('form|class:import-form'),
description: complexNode({
description: node('div|class:import-form-description', [
complexNode({
tag: 'p',
text: 'You can restore all or parts of a backup file. The following data will be restored:',
attr: [{ key: 'class', value: 'mb-5' }]
text: message.get('dataFormDescription')
})
])
};
this.count = {
@ -41,8 +44,11 @@ export const ImportForm = function ({
object: state,
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.'],
labelText: message.get('dataFormBookmarkIncludeLabel'),
description: [
message.get('dataFormBookmarkIncludeDescriptionPara1'),
message.get('dataFormBookmarkIncludeDescriptionPara2')
],
action: () => {
this.disable();
}
@ -50,8 +56,8 @@ export const ImportForm = function ({
type: new Control_radio({
object: state,
radioGroup: [
{ id: 'bookmark-type-restore', labelText: 'Replace existing bookmarks', value: 'restore' },
{ id: 'bookmark-type-append', labelText: 'Add to existing bookmarks', value: 'append' }
{ id: 'bookmark-type-restore', labelText: message.get('dataFormBookmarkTypeRestore'), value: 'restore' },
{ id: 'bookmark-type-append', labelText: message.get('dataFormBookmarkTypeAppend'), value: 'append' }
],
groupName: 'bookmark-type',
path: 'bookmark.type'
@ -62,8 +68,8 @@ export const ImportForm = function ({
object: state,
path: 'theme.include',
id: 'theme-include',
labelText: 'Theme',
description: 'This includes the Colour, Accent, Fonts, Background and any saved Custom Themes.'
labelText: message.get('dataFormThemeIncludeLabel'),
description: message.get('dataFormThemeIncludeDescription')
})
},
setup: {
@ -71,8 +77,8 @@ export const ImportForm = function ({
object: state,
path: 'setup.include',
id: 'setup-include',
labelText: 'Settings',
description: 'This includes Layout size and position, Header area size, Bookmark area size and other user settings.'
labelText: message.get('dataFormSetupIncludeLabel'),
description: message.get('dataFormSetupIncludeDescription')
})
}
}

4
src/component/index.js
View File

@ -16,6 +16,7 @@ import { header } from './header';
import { group } from './group';
import { toolbar } from './toolbar';
import { groupAndBookmark } from './groupAndBookmark';
import { message } from './message';
import * as form from './form';
@ -38,5 +39,6 @@ export const component = {
group,
form,
toolbar,
groupAndBookmark
groupAndBookmark,
message
};

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

@ -1,23 +1,22 @@
import { state } from '../state';
import { APP_NAME } from '../../constant';
import { MenuFrame } from '../menuFrame';
const menu = {};
menu.navData = [
// { name: 'Debug', active: true, overscroll: true, sub: ['Input', 'Button', 'Bookmark', 'Icon'] },
{ name: 'Theme', active: true, overscroll: true, sub: ['Preset', 'Saved', 'Style', 'Colour', 'Accent', 'Font', 'Radius', 'Shadow', 'Shade', 'Opacity', 'Background', 'Layout', 'Header', 'Bookmark'] },
{ name: 'Layout', active: false, overscroll: true, sub: ['Scaling', 'Area', 'Padding', 'Gutter', 'Alignment', 'Page'] },
{ name: 'Header', active: false, overscroll: true, sub: ['Alignment', 'Greeting', 'Transitional words', 'Clock', 'Date', 'Search'] },
{ name: 'Bookmark', active: false, overscroll: true, sub: ['General', 'Style', 'Orientation', 'Sort'] },
{ name: 'Group', active: false, overscroll: true, sub: ['Alignment', 'Name', 'Collapse', 'Toolbar'] },
{ name: 'Toolbar', active: false, overscroll: true, sub: ['Size', 'Location', 'Position', 'Controls'] },
{ name: 'Data', active: false, overscroll: true, sub: ['Restore', 'Backup', 'Clear'] },
{ name: 'Support', active: false, overscroll: false },
{ name: 'Coffee', active: false, overscroll: false },
{ name: APP_NAME, active: false, overscroll: false }
// { name: 'debug', active: true, overscroll: true, sub: ['input', 'button', 'bookmark', 'icon'] },
{ name: 'theme', active: true, overscroll: true, sub: ['preset', 'saved', 'style', 'color', 'accent', 'font', 'radius', 'shadow', 'shade', 'opacity', 'background', 'layout', 'header', 'bookmark'] },
{ name: 'layout', active: false, overscroll: true, sub: ['scaling', 'area', 'padding', 'gutter', 'alignment', 'page'] },
{ name: 'header', active: false, overscroll: true, sub: ['alignment', 'greeting', 'transitional', 'clock', 'date', 'search'] },
{ name: 'bookmark', active: false, overscroll: true, sub: ['general', 'style', 'orientation', 'sort'] },
{ name: 'group', active: false, overscroll: true, sub: ['alignment', 'name', 'collapse', 'toolbar'] },
{ name: 'toolbar', active: false, overscroll: true, sub: ['size', 'location', 'position', 'controls'] },
{ name: 'data', active: false, overscroll: true, sub: ['restore', 'backup', 'clear'] },
{ name: 'language', active: false, overscroll: false },
{ name: 'support', active: false, overscroll: false },
{ name: 'coffee', active: false, overscroll: false },
{ name: 'app', active: false, overscroll: false }
];
menu.mod = {};

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

@ -1,3 +1,7 @@
import { message } from '../../message';
import * as form from '../../form';
import { node } from '../../../utility/node';
import { APP_NAME } from '../../../constant';
@ -7,25 +11,29 @@ import { Splash } from '../../splash';
const appSetting = {};
appSetting[APP_NAME.toLowerCase()] = (parent) => {
appSetting.app = (parent) => {
const githubLink = new Link({ text: 'GitHub.', href: `https://github.com/zombieFox/${APP_NAME}`, openNew: true });
appSetting.app.para1 = node(`p:${message.get('menuContentAppPara1')}`);
const redditLink = new Link({ text: `Reddit ${APP_NAME} community.`, href: `https://www.reddit.com/r/${APP_NAME}`, openNew: true });
appSetting.app.link1 = new Link({
text: message.get('menuContentAppLink1'),
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/${APP_NAME}/blob/master/license`, openNew: true });
appSetting.app.para2 = node(`p:${message.get('menuContentAppPara2')}`);
const para1 = node('p');
appSetting.app.link2 = new Link({
text: message.get('menuContentAppLink2'),
href: `https://github.com/zombieFox/${APP_NAME}`,
openNew: true
});
para1.innerHTML = `This project can be found on ${githubLink.link().outerHTML}`;
const para2 = node('p');
para2.innerHTML = `Share your setup with the ${redditLink.link().outerHTML}`;
const para3 = node('p');
para3.innerHTML = `${APP_NAME} uses the ${licenseLink.link().outerHTML}`;
appSetting.app.link3 = new Link({
text: message.get('menuContentAppLink3'),
href: `https://github.com/zombieFox/${APP_NAME}/blob/master/license`,
openNew: true
});
const splash = new Splash();
@ -33,9 +41,33 @@ appSetting[APP_NAME.toLowerCase()] = (parent) => {
node('div', [
splash.splash(),
node('hr'),
para1,
para2,
para3
form.wrap({
children: [
appSetting.app.para1,
form.indent({
children: [
node('p', [
appSetting.app.link1.link()
])
]
})
]
}),
form.wrap({
children: [
appSetting.app.para2,
form.indent({
children: [
node('p', [
appSetting.app.link2.link()
]),
node('p', [
appSetting.app.link3.link()
])
]
})
]
})
])
);

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

@ -1,3 +1,5 @@
import { message } from '../../message';
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
@ -77,7 +79,7 @@ bookmarkSetting.general = (parent) => {
object: state.get.current(),
id: 'bookmark-show',
path: 'bookmark.show',
labelText: 'Show Bookmarks',
labelText: message.get('menuContentBookmarkGeneralShow'),
action: () => {
layout.area.assemble();
@ -111,7 +113,7 @@ bookmarkSetting.general = (parent) => {
object: state.get.current(),
id: 'bookmark-url-show',
path: 'bookmark.url.show',
labelText: 'Show URL on Bookmark hover',
labelText: message.get('menuContentBookmarkGeneralUrlShow'),
action: () => {
applyCSSState('bookmark.url.show');
data.save();
@ -122,7 +124,7 @@ bookmarkSetting.general = (parent) => {
object: state.get.current(),
id: 'bookmark-line-show',
path: 'bookmark.line.show',
labelText: 'Show Bookmark line',
labelText: message.get('menuContentBookmarkGeneralLineShow'),
action: () => {
applyCSSState('bookmark.line.show');
data.save();
@ -133,8 +135,8 @@ bookmarkSetting.general = (parent) => {
object: state.get.current(),
id: 'bookmark-shadow-show',
path: 'bookmark.shadow.show',
labelText: 'Show shadow on Bookmark hover',
description: 'Effects may not be visible if Theme Shadow is set to 0.',
labelText: message.get('menuContentBookmarkGeneralShadowShowLabel'),
description: message.get('menuContentBookmarkGeneralShadowShowDescription'),
action: () => {
applyCSSState('bookmark.shadow.show');
data.save();
@ -145,7 +147,7 @@ bookmarkSetting.general = (parent) => {
object: state.get.current(),
id: 'bookmark-hoverScale-show',
path: 'bookmark.hoverScale.show',
labelText: 'Grow on Bookmark hover',
labelText: message.get('menuContentBookmarkGeneralHoverScaleShow'),
action: () => {
applyCSSState('bookmark.hoverScale.show');
data.save();
@ -156,7 +158,7 @@ bookmarkSetting.general = (parent) => {
object: state.get.current(),
id: 'bookmark-newTab',
path: 'bookmark.newTab',
labelText: 'Open Bookmarks in a new tab',
labelText: message.get('menuContentBookmarkGeneralNewTab'),
action: () => {
groupAndBookmark.render();
@ -184,7 +186,7 @@ bookmarkSetting.general = (parent) => {
object: state.get.current(),
path: 'bookmark.size',
id: 'bookmark-size',
labelText: 'Bookmark size',
labelText: message.get('menuContentBookmarkGeneralSize'),
value: state.get.current().bookmark.size,
defaultValue: state.get.default().bookmark.size,
min: state.get.minMax().bookmark.size.min,
@ -241,8 +243,8 @@ bookmarkSetting.style = (parent) => {
bookmarkSetting.control.style = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'bookmark-style-block', labelText: 'Block', description: 'Square shaped Bookmark tiles.', value: 'block' },
{ id: 'bookmark-style-list', labelText: 'List', description: 'Short and wide Bookmark tiles.', value: 'list' }
{ id: 'bookmark-style-block', labelText: message.get('menuContentBookmarkStyleBlockLabel'), description: message.get('menuContentBookmarkStyleBlockDescription'), value: 'block' },
{ id: 'bookmark-style-list', labelText: message.get('menuContentBookmarkStyleListLabel'), description: message.get('menuContentBookmarkStyleListDescription'), value: 'list' }
],
groupName: 'bookmark-style',
path: 'bookmark.style',
@ -296,8 +298,8 @@ bookmarkSetting.orientation = (parent) => {
bookmarkSetting.control.orientation.orientationElement = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'bookmark-orientation-top', labelText: 'Top', value: 'top' },
{ id: 'bookmark-orientation-bottom', labelText: 'Bottom', value: 'bottom' }
{ id: 'bookmark-orientation-top', labelText: message.get('menuContentBookmarkOrientationTop'), value: 'top' },
{ id: 'bookmark-orientation-bottom', labelText: message.get('menuContentBookmarkOrientationBottom'), value: 'bottom' }
],
groupName: 'bookmark-orientation',
path: 'bookmark.orientation',
@ -325,7 +327,7 @@ bookmarkSetting.orientation = (parent) => {
});
bookmarkSetting.control.orientation.orientationHelper = new Control_helperText({
text: ['Display the URL and Controls either at the top or bottom of a Bookmark Tile.']
text: [message.get('menuContentBookmarkOrientationHelperPara1')]
});
parent.appendChild(
@ -340,7 +342,7 @@ bookmarkSetting.orientation = (parent) => {
bookmarkSetting.sort = (parent) => {
bookmarkSetting.control.sort.letter = new Button({
text: 'By letter',
text: message.get('menuContentBookmarkSortLetter'),
style: ['line'],
func: () => {
@ -368,7 +370,7 @@ bookmarkSetting.sort = (parent) => {
});
bookmarkSetting.control.sort.icon = new Button({
text: 'By icon',
text: message.get('menuContentBookmarkSortIcon'),
style: ['line'],
func: () => {
@ -396,7 +398,7 @@ bookmarkSetting.sort = (parent) => {
});
bookmarkSetting.control.sort.name = new Button({
text: 'By name',
text: message.get('menuContentBookmarkSortName'),
style: ['line'],
func: () => {

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

@ -1,10 +1,9 @@
import { APP_NAME } from '../../../constant';
import { message } from '../../message';
import * as form from '../../form';
import { Link } from '../../link';
import { node } from '../../../utility/node';
import { complexNode } from '../../../utility/complexNode';
@ -16,11 +15,11 @@ coffeeSetting.coffee = (parent) => {
node('div', [
complexNode({
tag: 'p',
text: APP_NAME + ' is free, appreciation is welcome in the form of coffee!'
text: message.get('menuContentCoffeePara')
}),
form.wrap({
children: [(new Link({
text: 'Buy me a coffee',
text: message.get('menuContentCoffeeButton'),
href: 'https://www.buymeacoffee.com/zombieFox',
iconName: 'coffee',
iconPosition: 'left',

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

@ -1,6 +1,7 @@
import { message } from '../../message';
import { data } from '../../data';
import { menu } from '../../menu';
import { APP_NAME } from '../../../constant';
import * as form from '../../form';
@ -28,7 +29,7 @@ dataSetting.restore = (parent) => {
id: 'restore-data',
type: 'file',
inputHide: true,
labelText: 'Import from file',
labelText: message.get('menuContentDataRestoreFile'),
inputButtonStyle: ['line'],
action: () => {
data.import.file({
@ -40,7 +41,7 @@ dataSetting.restore = (parent) => {
});
dataSetting.control.restore.paste = new Button({
text: 'Import from clipboard',
text: message.get('menuContentDataRestoreClipboard'),
style: ['line'],
func: () => {
data.import.paste({
@ -50,7 +51,7 @@ dataSetting.restore = (parent) => {
});
dataSetting.control.restore.restoreHelper = new Control_helperText({
text: ['Restore a previously exported ' + APP_NAME + ' backup.']
text: [message.get('menuContentDataRestoreHelperPara1')]
});
dataSetting.control.restore.feedback = form.feedback();
@ -58,7 +59,7 @@ dataSetting.restore = (parent) => {
data.feedback.empty.render(dataSetting.control.restore.feedback);
dataSetting.control.restore.drop = new DropFile({
heading: 'Or drop a ' + APP_NAME + ' backup file here.',
heading: message.get('menuContentDataRestoreDrop'),
dropAaction: () => {
data.import.drop({
fileList: dataSetting.control.restore.drop.files,
@ -88,7 +89,7 @@ dataSetting.restore = (parent) => {
dataSetting.backup = (parent) => {
dataSetting.control.backup.export = new Button({
text: 'Export data',
text: message.get('menuContentDataBackupFile'),
style: ['line'],
func: () => {
data.export();
@ -96,7 +97,7 @@ dataSetting.backup = (parent) => {
});
dataSetting.control.backup.copy = new Button({
text: 'Copy to clipboard',
text: message.get('menuContentDataBackupClipboard'),
style: ['line'],
func: () => {
navigator.clipboard.writeText(JSON.stringify(data.load()));
@ -104,7 +105,10 @@ dataSetting.backup = (parent) => {
});
dataSetting.control.backup.exportHelper = new Control_helperText({
text: ['Download a backup of your ' + APP_NAME + ' Bookmarks and Settings.', 'This file can later be imported on this or another deivce.']
text: [
message.get('menuContentDataBackupHelperPara1'),
message.get('menuContentDataBackupHelperPara2')
]
});
parent.appendChild(
@ -131,7 +135,7 @@ dataSetting.backup = (parent) => {
dataSetting.clear = (parent) => {
dataSetting.control.clear.all = new Button({
text: 'Clear all data',
text: message.get('menuContentDataClearAll'),
style: ['line'],
func: () => {
menu.close();
@ -140,7 +144,7 @@ dataSetting.clear = (parent) => {
});
dataSetting.control.clear.partial = new Button({
text: 'Clear all except bookmarks',
text: message.get('menuContentDataClearPartial'),
style: ['line'],
func: () => {
menu.close();
@ -148,16 +152,24 @@ dataSetting.clear = (parent) => {
}
});
dataSetting.control.clear.link = new Link({
text: message.get('menuContentDataClearAlertLink'),
href: '#menu-content-item-backup'
});
dataSetting.control.clear.alert = new Alert({
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:${message.get('menuContentDataClearAlertPara')}|class:small`),
node('p|class:small', dataSetting.control.clear.link.link())
]
});
dataSetting.control.clear.helper = new Control_helperText({
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.']
text: [
message.get('menuContentDataClearHelperPara1'),
message.get('menuContentDataClearHelperPara2')
]
});
parent.appendChild(

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

@ -1,3 +1,5 @@
import { message } from '../../message';
import { state } from '../../state';
import { data } from '../../data';
import { bookmark } from '../../bookmark';
@ -124,11 +126,11 @@ groupSetting.alignment = (parent) => {
groupSetting.control.alignment.justify = new Control_radioGrid({
object: state.get.current(),
radioGroup: [
{ id: 'group-area-justify-left', labelText: 'Left', value: 'left', position: 1 },
{ id: 'group-area-justify-center', labelText: 'Center', value: 'center', position: 2 },
{ id: 'group-area-justify-right', labelText: 'Right', value: 'right', position: 3 }
{ id: 'group-area-justify-left', labelText: message.get('menuContentGroupAlignmentJustifyLeft'), value: 'left', position: 1 },
{ id: 'group-area-justify-center', labelText: message.get('menuContentGroupAlignmentJustifyCenter'), value: 'center', position: 2 },
{ id: 'group-area-justify-right', labelText: message.get('menuContentGroupAlignmentJustifyRight'), value: 'right', position: 3 }
],
label: 'Group details area alignment',
label: message.get('menuContentGroupAlignmentJustifyLabel'),
groupName: 'group-area-justify',
path: 'group.area.justify',
gridSize: '3x1',
@ -140,9 +142,10 @@ groupSetting.alignment = (parent) => {
groupSetting.control.alignment.order = new Control_radio({
object: state.get.current(),
label: message.get('menuContentGroupAlignmentOrderLabel'),
radioGroup: [
{ id: 'group-order-header-body', labelText: 'Group details then Bookmarks', description: 'Order the Group details area to appear before the Bookmarks area.', value: 'header-body' },
{ id: 'group-order-body-header', labelText: 'Bookmarks then Group details', description: 'Order the Bookmarks area to appear before the Group details area.', value: 'body-header' }
{ id: 'group-order-header-body', labelText: message.get('menuContentGroupAlignmentOrderHeaderBodyLabel'), description: message.get('menuContentGroupAlignmentOrderHeaderBodyDescription'), value: 'header-body' },
{ id: 'group-order-body-header', labelText: message.get('menuContentGroupAlignmentOrderBodyHeaderLabel'), description: message.get('menuContentGroupAlignmentOrderBodyHeaderDescription'), value: 'body-header' }
],
groupName: 'group-order',
path: 'group.order',
@ -226,7 +229,7 @@ groupSetting.name = (parent) => {
object: state.get.current(),
path: 'group.name.size',
id: 'group-name-size',
labelText: 'Name size',
labelText: message.get('menuContentGroupNameSize'),
value: state.get.current().group.name.size,
defaultValue: state.get.default().group.name.size,
min: state.get.minMax().group.name.size.min,
@ -270,7 +273,7 @@ groupSetting.name = (parent) => {
});
groupSetting.control.name.show = new Button({
text: 'Show all',
text: message.get('menuContentGroupNameShow'),
style: ['line'],
func: () => {
@ -288,7 +291,7 @@ groupSetting.name = (parent) => {
});
groupSetting.control.name.hide = new Button({
text: 'Hide all',
text: message.get('menuContentGroupNameHide'),
style: ['line'],
func: () => {
@ -306,7 +309,7 @@ groupSetting.name = (parent) => {
});
groupSetting.control.name.helper = new Control_helperText({
text: ['Group Names can also be changed by editing individual Groups.']
text: [message.get('menuContentGroupNameHelperPara1')]
});
parent.appendChild(
@ -331,11 +334,11 @@ groupSetting.collapse = (parent) => {
groupSetting.control.collapse = {
show: new Button({
text: 'Collapse all groups',
text: message.get('menuContentGroupCollapseShow'),
style: ['line'],
func: () => {
bookmark.all.forEach(item => { item.collapse = true; });
bookmark.all.forEach(item => { item.collapse = false; });
groupAndBookmark.render();
@ -348,11 +351,11 @@ groupSetting.collapse = (parent) => {
}
}),
hide: new Button({
text: 'Open all groups',
text: message.get('menuContentGroupCollapseHide'),
style: ['line'],
func: () => {
bookmark.all.forEach(item => { item.collapse = false; });
bookmark.all.forEach(item => { item.collapse = true; });
groupAndBookmark.render();
@ -390,7 +393,7 @@ groupSetting.toolbar = (parent) => {
object: state.get.current(),
path: 'group.toolbar.size',
id: 'group-toolbar-size',
labelText: 'Group toolbar size',
labelText: message.get('menuContentGroupToolbarSize'),
value: state.get.current().group.toolbar.size,
defaultValue: state.get.default().group.toolbar.size,
min: state.get.minMax().group.toolbar.size.min,
@ -448,9 +451,11 @@ groupSetting.toolbar = (parent) => {
});
groupSetting.control.toolbar.collapse = {
label: new Control_label({ text: 'Group Collapse control' }),
label: new Control_label({
text: message.get('menuContentGroupToolbarCollapseLabel')
}),
show: new Button({
text: 'Show all',
text: message.get('menuContentGroupToolbarCollapseShow'),
style: ['line'],
func: () => {
@ -467,7 +472,7 @@ groupSetting.toolbar = (parent) => {
}
}),
hide: new Button({
text: 'Hide all',
text: message.get('menuContentGroupToolbarCollapseHide'),
style: ['line'],
func: () => {
@ -484,14 +489,16 @@ groupSetting.toolbar = (parent) => {
}
}),
helper: new Control_helperText({
text: ['Group toolbar collapse button can also be changed by editing individual Groups.']
text: [message.get('menuContentGroupToolbarCollapseHelperPara1')]
})
};
groupSetting.control.toolbar.openAll = {
label: new Control_label({ text: 'Group Open all control' }),
label: new Control_label({
text: message.get('menuContentGroupToolbarOpenAllLabel')
}),
show: new Button({
text: 'Show all',
text: message.get('menuContentGroupToolbarOpenAllShow'),
style: ['line'],
func: () => {
@ -508,7 +515,7 @@ groupSetting.toolbar = (parent) => {
}
}),
hide: new Button({
text: 'Hide all',
text: message.get('menuContentGroupToolbarOpenAllHide'),
style: ['line'],
func: () => {
@ -525,7 +532,7 @@ groupSetting.toolbar = (parent) => {
}
}),
helper: new Control_helperText({
text: ['Group toolbar open all button can also be changed by editing individual Groups.']
text: [message.get('menuContentGroupToolbarOpenAllHelperPara1')]
})
};

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

@ -1,15 +1,15 @@
import { message } from '../../message';
import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
import { layout } from '../../layout';
import { searchEnginePreset } from '../../searchEnginePreset';
import { APP_NAME } from '../../../constant';
import * as form from '../../form';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_radio } from '../../control/radio';
@ -402,11 +402,11 @@ headerSetting.alignment = (parent) => {
headerSetting.alignment.alignment = new Control_radioGrid({
object: state.get.current(),
radioGroup: [
{ id: 'header-item-justify-left', labelText: 'Left', value: 'left', position: 1 },
{ id: 'header-item-justify-center', labelText: 'Center', value: 'center', position: 2 },
{ id: 'header-item-justify-right', labelText: 'Right', value: 'right', position: 3 }
{ id: 'header-item-justify-left', labelText: message.get('menuContentHeaderAlignmentJustifyLeft'), value: 'left', position: 1 },
{ id: 'header-item-justify-center', labelText: message.get('menuContentHeaderAlignmentJustifyCenter'), value: 'center', position: 2 },
{ id: 'header-item-justify-right', labelText: message.get('menuContentHeaderAlignmentJustifyRight'), value: 'right', position: 3 }
],
label: 'Header item alignment',
label: message.get('menuContentHeaderAlignmentJustifyLabel'),
groupName: 'header-item-justify',
path: 'header.item.justify',
gridSize: '3x1',
@ -418,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: [message.get('menuContentHeaderAlignmentHelperPara1')]
});
parent.appendChild(
@ -438,8 +438,8 @@ headerSetting.greeting = (parent) => {
object: state.get.current(),
path: 'header.greeting.show',
id: 'header-greeting-show',
labelText: 'Show Greeting',
action: function () {
labelText: message.get('menuContentHeaderGreetingShow'),
action: () => {
header.item.mod.order();
header.item.clear();
header.item.render();
@ -459,7 +459,7 @@ headerSetting.greeting = (parent) => {
object: state.get.current(),
path: 'header.greeting.size',
id: 'header-greeting-size',
labelText: 'Size',
labelText: message.get('menuContentHeaderGreetingSize'),
value: state.get.current().header.greeting.size,
defaultValue: state.get.default().header.greeting.size,
min: state.get.minMax().header.greeting.size.min,
@ -481,9 +481,9 @@ headerSetting.greeting = (parent) => {
object: state.get.current(),
path: 'header.greeting.newLine',
id: 'header-greeting-newLine',
labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.',
action: function () {
labelText: message.get('menuContentHeaderGreetingNewLineLabel'),
description: message.get('menuContentHeaderGreetingNewLineDescription'),
action: () => {
applyCSSState('header.greeting.newLine');
data.save();
}
@ -491,13 +491,13 @@ headerSetting.greeting = (parent) => {
headerSetting.control.greeting.type = new Control_radio({
object: state.get.current(),
label: 'Wording',
label: message.get('menuContentHeaderGreetingTypeLabel'),
radioGroup: [
{ id: 'header-greeting-type-good', labelText: '"Good morning..."', value: 'good' },
{ id: 'header-greeting-type-hello', labelText: '"Hello..."', value: 'hello' },
{ id: 'header-greeting-type-hi', labelText: '"Hi..."', value: 'hi' },
{ id: 'header-greeting-type-none', labelText: 'None', description: 'Useful for just displaying your name.', value: 'none' },
{ id: 'header-greeting-type-custom', labelText: 'Custom', description: ['Use your own greeting.', 'Defaults to "Good morning..." if left blank.'], value: 'custom' }
{ id: 'header-greeting-type-good', labelText: message.get('menuContentHeaderGreetingTypeGood'), value: 'good' },
{ id: 'header-greeting-type-hello', labelText: message.get('menuContentHeaderGreetingTypeHello'), value: 'hello' },
{ id: 'header-greeting-type-hi', labelText: message.get('menuContentHeaderGreetingTypeHi'), value: 'hi' },
{ id: 'header-greeting-type-none', labelText: message.get('menuContentHeaderGreetingTypeNoneLabel'), description: message.get('menuContentHeaderGreetingTypeNoneDescription'), value: 'none' },
{ id: 'header-greeting-type-custom', labelText: message.get('menuContentHeaderGreetingTypeCustomLabel'), description: [message.get('menuContentHeaderGreetingTypeCustomDescriptionPara1'), message.get('menuContentHeaderGreetingTypeCustomDescriptionPara2')], value: 'custom' }
],
groupName: 'header-greeting-type',
path: 'header.greeting.type',
@ -516,8 +516,8 @@ headerSetting.greeting = (parent) => {
path: 'header.greeting.custom',
id: 'header-greeting-custom',
value: state.get.current().header.greeting.custom,
placeholder: 'Howdy',
labelText: 'Custom greeting text',
placeholder: message.get('menuContentHeaderGreetingCustomPlaceholder'),
labelText: message.get('menuContentHeaderGreetingCustomLabel'),
srOnly: true,
action: () => {
header.element.greeting.update();
@ -543,8 +543,8 @@ headerSetting.greeting = (parent) => {
path: 'header.greeting.name',
id: 'header-greeting-name',
value: state.get.current().header.greeting.name,
placeholder: 'Nickname, alias or superhero name',
labelText: 'Name',
placeholder: message.get('menuContentHeaderGreetingNamePlaceholder'),
labelText: message.get('menuContentHeaderGreetingNameLabel'),
action: () => {
header.element.greeting.update();
data.save();
@ -603,7 +603,7 @@ headerSetting.transitional = (parent) => {
object: state.get.current(),
path: 'header.transitional.show',
id: 'header-transitional-show',
labelText: 'Show Transitional words',
labelText: message.get('menuContentHeaderTransitionalShowLabel'),
action: () => {
header.item.mod.order();
header.item.clear();
@ -621,14 +621,30 @@ headerSetting.transitional = (parent) => {
});
headerSetting.control.transitional.showHelper = new Control_helperText({
text: ['Only available when Date or Time is shown.']
text: [message.get('menuContentHeaderTransitionalShowHelperPara1')]
});
headerSetting.control.transitional.type = new Control_radio({
object: state.get.current(),
label: message.get('menuContentHeaderTransitionalTypeLabel'),
radioGroup: [
{ id: 'header-transitional-type-time-and-date', labelText: message.get('menuContentHeaderTransitionalTypeTimeAndDate'), value: 'time-and-date' },
{ id: 'header-transitional-type-its', labelText: message.get('menuContentHeaderTransitionalTypeIts'), value: 'its' }
],
groupName: 'header-transitional-type',
path: 'header.transitional.type',
action: () => {
header.element.transitional.update();
headerSetting.disable();
data.save();
}
});
headerSetting.control.transitional.size = new Control_sliderSlim({
object: state.get.current(),
path: 'header.transitional.size',
id: 'header-transitional-size',
labelText: 'Size',
labelText: message.get('menuContentHeaderTransitionalSize'),
value: state.get.current().header.transitional.size,
defaultValue: state.get.default().header.transitional.size,
min: state.get.minMax().header.transitional.size.min,
@ -650,26 +666,10 @@ headerSetting.transitional = (parent) => {
object: state.get.current(),
path: 'header.transitional.newLine',
id: 'header-transitional-newLine',
labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.',
action: function () {
applyCSSState('header.transitional.newLine');
data.save();
}
});
headerSetting.control.transitional.type = new Control_radio({
object: state.get.current(),
label: 'Wording',
radioGroup: [
{ id: 'header-transitional-type-time-and-date', labelText: '"The time and date is"', value: 'time-and-date' },
{ id: 'header-transitional-type-its', labelText: '"It\'s"', value: 'its' }
],
groupName: 'header-transitional-type',
path: 'header.transitional.type',
labelText: message.get('menuContentHeaderTransitionalNewLineLabel'),
description: message.get('menuContentHeaderTransitionalNewLineDescription'),
action: () => {
header.element.transitional.update();
headerSetting.disable();
applyCSSState('header.transitional.newLine');
data.save();
}
});
@ -718,7 +718,7 @@ headerSetting.clock = (parent) => {
object: state.get.current(),
path: 'header.clock.hour.show',
id: 'header-clock-hour-show',
labelText: 'Show hours',
labelText: message.get('menuContentHeaderClockHourShow'),
action: () => {
header.item.mod.order();
header.item.clear();
@ -739,8 +739,8 @@ headerSetting.clock = (parent) => {
headerSetting.control.clock.hour.display = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'header-clock-hour-display-number', labelText: 'As number', value: 'number' },
{ id: 'header-clock-hour-display-word', labelText: 'As word', value: 'word' }
{ id: 'header-clock-hour-display-number', labelText: message.get('menuContentHeaderClockHourDisplayNumber'), value: 'number' },
{ id: 'header-clock-hour-display-word', labelText: message.get('menuContentHeaderClockHourDisplayWord'), value: 'word' }
],
groupName: 'header-clock-hour-display',
path: 'header.clock.hour.display',
@ -768,7 +768,7 @@ headerSetting.clock = (parent) => {
object: state.get.current(),
path: 'header.clock.minute.show',
id: 'header-clock-minute-show',
labelText: 'Show minutes',
labelText: message.get('menuContentHeaderClockMinuteShow'),
action: () => {
header.item.mod.order();
header.item.clear();
@ -789,8 +789,8 @@ headerSetting.clock = (parent) => {
headerSetting.control.clock.minute.display = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'header-clock-minute-display-number', labelText: 'As number', value: 'number' },
{ id: 'header-clock-minute-display-word', labelText: 'As word', value: 'word' }
{ id: 'header-clock-minute-display-number', labelText: message.get('menuContentHeaderClockMinuteDisplayNumber'), value: 'number' },
{ id: 'header-clock-minute-display-word', labelText: message.get('menuContentHeaderClockMinuteDisplayWord'), value: 'word' }
],
groupName: 'header-clock-minute-display',
path: 'header.clock.minute.display',
@ -818,7 +818,7 @@ headerSetting.clock = (parent) => {
object: state.get.current(),
path: 'header.clock.second.show',
id: 'header-clock-second-show',
labelText: 'Show seconds',
labelText: message.get('menuContentHeaderClockSecondShow'),
action: () => {
header.item.mod.order();
header.item.clear();
@ -839,8 +839,8 @@ headerSetting.clock = (parent) => {
headerSetting.control.clock.second.display = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'header-clock-second-display-number', labelText: 'As number', value: 'number' },
{ id: 'header-clock-second-display-word', labelText: 'As word', value: 'word' }
{ id: 'header-clock-second-display-number', labelText: message.get('menuContentHeaderClockSecondDisplayNumber'), value: 'number' },
{ id: 'header-clock-second-display-word', labelText: message.get('menuContentHeaderClockSecondDisplayWord'), value: 'word' }
],
groupName: 'header-clock-second-display',
path: 'header.clock.second.display',
@ -862,13 +862,55 @@ headerSetting.clock = (parent) => {
}]
});
headerSetting.control.clock.separator = {};
headerSetting.control.clock.separator.show = new Control_checkbox({
object: state.get.current(),
path: 'header.clock.separator.show',
id: 'header-clock-separator-show',
labelText: message.get('menuContentHeaderClockSeparatorShow'),
action: () => {
header.element.clock.update();
headerSetting.control.clock.separator.collapse.update();
headerSetting.disable();
data.save();
}
});
headerSetting.control.clock.separator.text = new Control_textReset({
object: state.get.current(),
path: 'header.clock.separator.text',
id: 'header-clock-separator-text',
value: state.get.current().header.clock.separator.text,
defaultValue: state.get.default().header.clock.separator.text,
placeholder: message.get('menuContentHeaderClockSeparatorPlaceholder'),
labelText: message.get('menuContentHeaderClockSeparatorLabel'),
srOnly: true,
action: () => {
header.element.clock.update();
data.save();
}
});
headerSetting.control.clock.separator.area = node('div', [
headerSetting.control.clock.separator.text.wrap()
]);
headerSetting.control.clock.separator.collapse = new Collapse({
type: 'checkbox',
checkbox: headerSetting.control.clock.separator.show,
target: [{
content: headerSetting.control.clock.separator.area
}]
});
headerSetting.control.clock.hour24 = {
show: new Control_checkbox({
object: state.get.current(),
path: 'header.clock.hour24.show',
id: 'header-clock-hour24-show',
labelText: '24 hours',
action: function () {
labelText: message.get('menuContentHeaderClockHour24'),
action: () => {
header.element.clock.update();
headerSetting.disable();
data.save();
@ -881,8 +923,8 @@ headerSetting.clock = (parent) => {
object: state.get.current(),
path: 'header.clock.meridiem.show',
id: 'header-clock-meridiem-show',
labelText: 'AM / PM',
action: function () {
labelText: message.get('menuContentHeaderClockMeridiem'),
action: () => {
header.element.clock.update();
data.save();
}
@ -893,7 +935,7 @@ headerSetting.clock = (parent) => {
object: state.get.current(),
path: 'header.clock.size',
id: 'header-clock-size',
labelText: 'Size',
labelText: message.get('menuContentHeaderClockSize'),
value: state.get.current().header.clock.size,
defaultValue: state.get.default().header.clock.size,
min: state.get.minMax().header.clock.size.min,
@ -915,56 +957,14 @@ headerSetting.clock = (parent) => {
object: state.get.current(),
path: 'header.clock.newLine',
id: 'header-clock-newLine',
labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.',
action: function () {
labelText: message.get('menuContentHeaderClockNewLineLabel'),
description: message.get('menuContentHeaderClockNewLineDescription'),
action: () => {
applyCSSState('header.clock.newLine');
data.save();
}
});
headerSetting.control.clock.separator = {};
headerSetting.control.clock.separator.show = new Control_checkbox({
object: state.get.current(),
path: 'header.clock.separator.show',
id: 'header-clock-separator-show',
labelText: 'Show separator',
action: () => {
header.element.clock.update();
headerSetting.control.clock.separator.collapse.update();
headerSetting.disable();
data.save();
}
});
headerSetting.control.clock.separator.text = new Control_textReset({
object: state.get.current(),
path: 'header.clock.separator.text',
id: 'header-clock-separator-text',
value: state.get.current().header.clock.separator.text,
defaultValue: state.get.default().header.clock.separator.text,
placeholder: ':',
labelText: 'Separator character',
srOnly: true,
action: () => {
header.element.clock.update();
data.save();
}
});
headerSetting.control.clock.separator.area = node('div', [
headerSetting.control.clock.separator.text.wrap()
]);
headerSetting.control.clock.separator.collapse = new Collapse({
type: 'checkbox',
checkbox: headerSetting.control.clock.separator.show,
target: [{
content: headerSetting.control.clock.separator.area
}]
});
headerSetting.control.clock.area = node('div', [
node('hr'),
headerSetting.control.clock.separator.show.wrap(),
@ -1050,7 +1050,7 @@ headerSetting.date = (parent) => {
object: state.get.current(),
path: 'header.date.day.show',
id: 'header-date-day-show',
labelText: 'Show Day',
labelText: message.get('menuContentHeaderDateDayShow'),
action: () => {
header.item.mod.order();
header.item.clear();
@ -1071,8 +1071,8 @@ headerSetting.date = (parent) => {
headerSetting.control.date.day.display = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'header-date-day-display-number', labelText: 'As number', value: 'number' },
{ id: 'header-date-day-display-word', labelText: 'As word', value: 'word' }
{ id: 'header-date-day-display-number', labelText: message.get('menuContentHeaderDateDayDisplayNumber'), value: 'number' },
{ id: 'header-date-day-display-word', labelText: message.get('menuContentHeaderDateDayDisplayWord'), value: 'word' }
],
groupName: 'header-date-day-display',
path: 'header.date.day.display',
@ -1093,10 +1093,10 @@ headerSetting.date = (parent) => {
headerSetting.control.date.day.weekStart = new Control_radio({
object: state.get.current(),
label: 'Start of the week',
label: message.get('menuContentHeaderDateDayDisplayWeekStartLabel'),
radioGroup: [
{ id: 'header-date-day-week-start-monday', labelText: 'Monday', value: 'monday' },
{ id: 'header-date-day-week-start-sunday', labelText: 'Sunday', value: 'sunday' }
{ id: 'header-date-day-week-start-monday', labelText: message.get('menuContentHeaderDateDayDisplayWeekStartMonday'), value: 'monday' },
{ id: 'header-date-day-week-start-sunday', labelText: message.get('menuContentHeaderDateDayDisplayWeekStartSunday'), value: 'sunday' }
],
groupName: 'header-date-day-week-start',
path: 'header.date.day.weekStart',
@ -1116,10 +1116,10 @@ headerSetting.date = (parent) => {
headerSetting.control.date.day.length = new Control_radio({
object: state.get.current(),
label: 'Word length',
label: message.get('menuContentHeaderDateDayDisplayLengthLabel'),
radioGroup: [
{ id: 'header-date-day-length-long', labelText: 'Long', value: 'long' },
{ id: 'header-date-day-length-short', labelText: 'Short', value: 'short' }
{ id: 'header-date-day-length-long', labelText: message.get('menuContentHeaderDateDayDisplayLengthLong'), value: 'long' },
{ id: 'header-date-day-length-short', labelText: message.get('menuContentHeaderDateDayDisplayLengthShort'), value: 'short' }
],
groupName: 'header-date-day-length',
path: 'header.date.day.length',
@ -1158,7 +1158,7 @@ headerSetting.date = (parent) => {
object: state.get.current(),
path: 'header.date.date.show',
id: 'header-date-date-show',
labelText: 'Show Date',
labelText: message.get('menuContentHeaderDateDateShow'),
action: () => {
header.item.mod.order();
header.item.clear();
@ -1179,8 +1179,8 @@ headerSetting.date = (parent) => {
headerSetting.control.date.date.display = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'header-date-date-display-number', labelText: 'As number', value: 'number' },
{ id: 'header-date-date-display-word', labelText: 'As word', value: 'word' }
{ id: 'header-date-date-display-number', labelText: message.get('menuContentHeaderDateDateDisplayNumber'), value: 'number' },
{ id: 'header-date-date-display-word', labelText: message.get('menuContentHeaderDateDateDisplayWord'), value: 'word' }
],
groupName: 'header-date-date-display',
path: 'header.date.date.display',
@ -1202,7 +1202,7 @@ headerSetting.date = (parent) => {
object: state.get.current(),
path: 'header.date.date.ordinal',
id: 'header-date-date-ordinal',
labelText: 'Ordinal numbers',
labelText: message.get('menuContentHeaderDateDateDisplayOrdinal'),
action: () => {
header.element.date.update();
data.save();
@ -1228,7 +1228,7 @@ headerSetting.date = (parent) => {
object: state.get.current(),
path: 'header.date.month.show',
id: 'header-date-month-show',
labelText: 'Show Month',
labelText: message.get('menuContentHeaderDateMonthShow'),
action: () => {
header.item.mod.order();
header.item.clear();
@ -1249,8 +1249,8 @@ headerSetting.date = (parent) => {
headerSetting.control.date.month.display = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'header-date-month-display-number', labelText: 'As number', value: 'number' },
{ id: 'header-date-month-display-word', labelText: 'As word', value: 'word' }
{ id: 'header-date-month-display-number', labelText: message.get('menuContentHeaderDateMonthDisplayNumber'), value: 'number' },
{ id: 'header-date-month-display-word', labelText: message.get('menuContentHeaderDateMonthDisplayWord'), value: 'word' }
],
groupName: 'header-date-month-display',
path: 'header.date.month.display',
@ -1271,10 +1271,10 @@ headerSetting.date = (parent) => {
headerSetting.control.date.month.length = new Control_radio({
object: state.get.current(),
label: 'Word length',
label: message.get('menuContentHeaderDateMonthDisplayLengthLabel'),
radioGroup: [
{ id: 'header-date-month-length-long', labelText: 'Long', value: 'long' },
{ id: 'header-date-month-length-short', labelText: 'Short', value: 'short' }
{ id: 'header-date-month-length-long', labelText: message.get('menuContentHeaderDateMonthDisplayLengthLong'), value: 'long' },
{ id: 'header-date-month-length-short', labelText: message.get('menuContentHeaderDateMonthDisplayLengthShort'), value: 'short' }
],
groupName: 'header-date-month-length',
path: 'header.date.month.length',
@ -1296,7 +1296,7 @@ headerSetting.date = (parent) => {
object: state.get.current(),
path: 'header.date.month.ordinal',
id: 'header-date-month-ordinal',
labelText: 'Ordinal numbers',
labelText: message.get('menuContentHeaderDateMonthDisplayOrdinal'),
action: () => {
header.element.date.update();
data.save();
@ -1324,7 +1324,7 @@ headerSetting.date = (parent) => {
object: state.get.current(),
path: 'header.date.year.show',
id: 'header-date-year-show',
labelText: 'Show Year',
labelText: message.get('menuContentHeaderDateYearShow'),
action: () => {
header.item.mod.order();
header.item.clear();
@ -1345,8 +1345,8 @@ headerSetting.date = (parent) => {
headerSetting.control.date.year.display = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'header-date-year-display-number', labelText: 'As number', value: 'number' },
{ id: 'header-date-year-display-word', labelText: 'As word', value: 'word' }
{ id: 'header-date-year-display-number', labelText: message.get('menuContentHeaderDateYearDisplayNumber'), value: 'number' },
{ id: 'header-date-year-display-word', labelText: message.get('menuContentHeaderDateYearDisplayWord'), value: 'word' }
],
groupName: 'header-date-year-display',
path: 'header.date.year.display',
@ -1382,7 +1382,7 @@ headerSetting.date = (parent) => {
object: state.get.current(),
path: 'header.date.separator.show',
id: 'header-date-separator-show',
labelText: 'Show separator',
labelText: message.get('menuContentHeaderDateSeparatorShow'),
action: () => {
header.element.date.update();
headerSetting.control.date.separator.collapse.update();
@ -1402,8 +1402,8 @@ headerSetting.date = (parent) => {
id: 'header-date-separator-text',
value: state.get.current().header.date.separator.text,
defaultValue: state.get.default().header.date.separator.text,
placeholder: ':',
labelText: 'Separator character',
placeholder: message.get('menuContentHeaderDateSeparatorPlaceholder'),
labelText: message.get('menuContentHeaderDateSeparatorLabel'),
srOnly: true,
action: () => {
header.element.date.update();
@ -1425,10 +1425,10 @@ headerSetting.date = (parent) => {
headerSetting.control.date.format = new Control_radio({
object: state.get.current(),
label: 'Format',
label: message.get('menuContentHeaderDateFormatLabel'),
radioGroup: [
{ id: 'header-date-format-date-month', labelText: 'Date / Month', value: 'date-month' },
{ id: 'header-date-format-month-date', labelText: 'Month / Date', value: 'month-date' }
{ id: 'header-date-format-date-month', labelText: message.get('menuContentHeaderDateFormatDateMonth'), value: 'date-month' },
{ id: 'header-date-format-month-date', labelText: message.get('menuContentHeaderDateFormatMonthDate'), value: 'month-date' }
],
groupName: 'header-date-format',
path: 'header.date.format',
@ -1442,7 +1442,7 @@ headerSetting.date = (parent) => {
object: state.get.current(),
path: 'header.date.size',
id: 'header-date-size',
labelText: 'Size',
labelText: message.get('menuContentHeaderDateSize'),
value: state.get.current().header.date.size,
defaultValue: state.get.default().header.date.size,
min: state.get.minMax().header.date.size.min,
@ -1464,9 +1464,9 @@ headerSetting.date = (parent) => {
object: state.get.current(),
path: 'header.date.newLine',
id: 'header-date-newLine',
labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.',
action: function () {
labelText: message.get('menuContentHeaderDateNewLineLabel'),
description: message.get('menuContentHeaderDateNewLineDescription'),
action: () => {
applyCSSState('header.date.newLine');
data.save();
}
@ -1532,7 +1532,7 @@ headerSetting.search = (parent) => {
object: state.get.current(),
path: 'header.search.show',
id: 'header-search-show',
labelText: 'Show Search',
labelText: message.get('menuContentHeaderSearchShow'),
action: () => {
header.item.mod.order();
header.item.clear();
@ -1549,204 +1549,13 @@ headerSetting.search = (parent) => {
}
});
headerSetting.control.search.size = new Control_sliderSlim({
object: state.get.current(),
path: 'header.search.size',
id: 'header-search-size',
labelText: 'Size',
value: state.get.current().header.search.size,
defaultValue: state.get.default().header.search.size,
min: state.get.minMax().header.search.size.min,
max: state.get.minMax().header.search.size.max,
action: () => {
applyCSSVar('header.search.size');
headerSetting.edge.search.size.track();
data.save();
},
mouseDownAction: () => {
headerSetting.edge.search.size.show();
},
mouseUpAction: () => {
headerSetting.edge.search.size.hide();
}
});
headerSetting.control.search.newTab = new Control_checkbox({
object: state.get.current(),
path: 'header.search.newTab',
id: 'header-search-newTab',
labelText: 'Open Search results in a new tab',
action: function () {
header.item.mod.order();
header.item.clear();
header.item.render();
layout.area.assemble();
headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
headerSetting.edge.date.size.update.primary(header.element.date.date());
headerSetting.edge.search.size.update.primary(header.element.search.search());
data.save();
}
});
headerSetting.control.search.newLine = new Control_checkbox({
object: state.get.current(),
path: 'header.search.newLine',
id: 'header-search-newLine',
labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.',
action: function () {
applyCSSState('header.search.newLine');
data.save();
}
});
const searchEngineList = [];
for (let key in searchEnginePreset) {
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' });
headerSetting.control.search.engine = {
selected: new Control_radio({
object: state.get.current(),
label: 'Search engine',
radioGroup: searchEngineList,
groupName: 'header-search-engine-selected',
path: 'header.search.engine.selected',
action: () => {
header.item.mod.order();
header.item.clear();
header.item.render();
layout.area.assemble();
headerSetting.disable();
headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
headerSetting.edge.date.size.update.primary(header.element.date.date());
headerSetting.edge.search.size.update.primary(header.element.search.search());
headerSetting.control.search.engine.custom.collapse.update();
data.save();
}
}),
custom: {
name: new Control_text({
object: state.get.current(),
path: 'header.search.engine.custom.name',
id: 'header-search-engine-custom-name',
value: state.get.current().header.search.engine.custom.name,
placeholder: 'Search engine name',
labelText: 'Name',
action: () => {
header.item.mod.order();
header.item.clear();
header.item.render();
layout.area.assemble();
headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
headerSetting.edge.date.size.update.primary(header.element.date.date());
headerSetting.edge.search.size.update.primary(header.element.search.search());
data.save();
}
}),
url: new Control_text({
object: state.get.current(),
path: 'header.search.engine.custom.url',
id: 'header-search-engine-custom-url',
value: state.get.current().header.search.engine.custom.url,
placeholder: 'HTTPS://',
labelText: 'URL',
action: () => {
header.item.mod.order();
header.item.clear();
header.item.render();
layout.area.assemble();
headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
headerSetting.edge.date.size.update.primary(header.element.date.date());
headerSetting.edge.search.size.update.primary(header.element.search.search());
data.save();
}
}),
urlHelper: new Control_helperText({
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(),
path: 'header.search.engine.custom.queryName',
id: 'header-search-engine-custom-queryName',
value: state.get.current().header.search.engine.custom.queryName,
placeholder: 'q',
labelText: 'Name attribute',
action: () => {
header.item.mod.order();
header.item.clear();
header.item.render();
layout.area.assemble();
headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
headerSetting.edge.date.size.update.primary(header.element.date.date());
headerSetting.edge.search.size.update.primary(header.element.search.search());
data.save();
}
}),
queryNameHelper: new Control_helperText({
text: ['Sets the name attribute on the Search input field.', 'This defines the name passed to the search engine when submitting. If not sure leave blank.']
})
}
};
headerSetting.control.search.engine.custom.area = node('div', [
headerSetting.control.search.engine.custom.name.wrap(),
headerSetting.control.search.engine.custom.url.wrap(),
headerSetting.control.search.engine.custom.urlHelper.wrap(),
headerSetting.control.search.engine.custom.queryName.wrap(),
headerSetting.control.search.engine.custom.queryNameHelper.wrap()
]);
headerSetting.control.search.engine.custom.collapse = new Collapse({
type: 'radio',
radioGroup: headerSetting.control.search.engine.selected,
target: [{
id: headerSetting.control.search.engine.selected.radioSet[headerSetting.control.search.engine.selected.radioSet.length - 1].radio.value,
content: headerSetting.control.search.engine.custom.area
}]
});
headerSetting.control.search.text = {
justify: new Control_radioGrid({
object: state.get.current(),
radioGroup: [
{ id: 'header-search-text-justify-left', labelText: 'Left', value: 'left', position: 1 },
{ id: 'header-search-text-justify-center', labelText: 'Center', value: 'center', position: 2 },
{ id: 'header-search-text-justify-right', labelText: 'Right', value: 'right', position: 3 }
],
label: 'Search text alignment',
groupName: 'header-search-text-justify',
path: 'header.search.text.justify',
gridSize: '3x1',
action: () => {
applyCSSClass('header.search.text.justify');
data.save();
}
})
};
headerSetting.control.search.width = {
by: new Control_radio({
object: state.get.current(),
label: 'Search box width',
label: message.get('menuContentHeaderSearchWidthLabel'),
radioGroup: [
{ id: 'header-search-width-by-auto', labelText: 'Auto width', description: 'Search box will grow to best fit available space.', value: 'auto' },
{ id: 'header-search-width-by-custom', labelText: 'Custom width', description: 'Define how wide the Search box should be inside the Header Area.', value: 'custom' }
{ id: 'header-search-width-by-auto', labelText: message.get('menuContentHeaderSearchWidthAutoLabel'), description: message.get('menuContentHeaderSearchWidthAutoDescription'), value: 'auto' },
{ id: 'header-search-width-by-custom', labelText: message.get('menuContentHeaderSearchWidthCustomLabel'), description: message.get('menuContentHeaderSearchWidthCustomDescription'), value: 'custom' }
],
groupName: 'header-search-width-by',
path: 'header.search.width.by',
@ -1761,7 +1570,7 @@ headerSetting.search = (parent) => {
object: state.get.current(),
path: 'header.search.width.size',
id: 'header-search-size',
labelText: 'Width',
labelText: message.get('menuContentHeaderSearchWidthSize'),
value: state.get.current().header.search.width.size,
defaultValue: state.get.default().header.search.width.size,
min: state.get.minMax().header.search.width.size.min,
@ -1793,6 +1602,203 @@ headerSetting.search = (parent) => {
}]
});
headerSetting.control.search.size = new Control_sliderSlim({
object: state.get.current(),
path: 'header.search.size',
id: 'header-search-size',
labelText: message.get('menuContentHeaderSearchSize'),
value: state.get.current().header.search.size,
defaultValue: state.get.default().header.search.size,
min: state.get.minMax().header.search.size.min,
max: state.get.minMax().header.search.size.max,
action: () => {
applyCSSVar('header.search.size');
headerSetting.edge.search.size.track();
data.save();
},
mouseDownAction: () => {
headerSetting.edge.search.size.show();
},
mouseUpAction: () => {
headerSetting.edge.search.size.hide();
}
});
headerSetting.control.search.newLine = new Control_checkbox({
object: state.get.current(),
path: 'header.search.newLine',
id: 'header-search-newLine',
labelText: message.get('menuContentHeaderSearchNewLineLabel'),
description: message.get('menuContentHeaderSearchNewLineDescription'),
action: () => {
applyCSSState('header.search.newLine');
data.save();
}
});
const searchEngineList = [];
for (let key in searchEnginePreset) {
searchEngineList.push({ id: `header-search-engine-selected-${key}`, labelText: searchEnginePreset[key].name, value: key });
}
searchEngineList.push({ id: 'header-search-engine-selected-custom', labelText: message.get('menuContentHeaderSearchEngineSelectedCustom'), value: 'custom' });
headerSetting.control.search.engine = {
selected: new Control_radio({
object: state.get.current(),
label: message.get('menuContentHeaderSearchEngineSelectedLabel'),
radioGroup: searchEngineList,
groupName: 'header-search-engine-selected',
path: 'header.search.engine.selected',
action: () => {
header.item.mod.order();
header.item.clear();
header.item.render();
layout.area.assemble();
headerSetting.disable();
headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
headerSetting.edge.date.size.update.primary(header.element.date.date());
headerSetting.edge.search.size.update.primary(header.element.search.search());
headerSetting.control.search.engine.custom.collapse.update();
data.save();
}
}),
custom: {
name: new Control_text({
object: state.get.current(),
path: 'header.search.engine.custom.name',
id: 'header-search-engine-custom-name',
value: state.get.current().header.search.engine.custom.name,
placeholder: message.get('menuContentHeaderSearchEngineCustomNamePlaceholder'),
labelText: message.get('menuContentHeaderSearchEngineCustomNameLabel'),
action: () => {
header.item.mod.order();
header.item.clear();
header.item.render();
layout.area.assemble();
headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
headerSetting.edge.date.size.update.primary(header.element.date.date());
headerSetting.edge.search.size.update.primary(header.element.search.search());
data.save();
}
}),
url: new Control_text({
object: state.get.current(),
path: 'header.search.engine.custom.url',
id: 'header-search-engine-custom-url',
value: state.get.current().header.search.engine.custom.url,
placeholder: message.get('menuContentHeaderSearchEngineCustomUrlPlaceholder'),
labelText: message.get('menuContentHeaderSearchEngineCustomUrlLabel'),
action: () => {
header.item.mod.order();
header.item.clear();
header.item.render();
layout.area.assemble();
headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
headerSetting.edge.date.size.update.primary(header.element.date.date());
headerSetting.edge.search.size.update.primary(header.element.search.search());
data.save();
}
}),
urlHelper: new Control_helperText({
text: [
message.get('menuContentHeaderSearchEngineCustomUrlHelperPara1'),
message.get('menuContentHeaderSearchEngineCustomUrlHelperPara2')
]
}),
queryName: new Control_text({
object: state.get.current(),
path: 'header.search.engine.custom.queryName',
id: 'header-search-engine-custom-queryName',
value: state.get.current().header.search.engine.custom.queryName,
placeholder: message.get('menuContentHeaderSearchEngineCustomQueryNamePlaceholder'),
labelText: message.get('menuContentHeaderSearchEngineCustomQueryNameLabel'),
action: () => {
header.item.mod.order();
header.item.clear();
header.item.render();
layout.area.assemble();
headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
headerSetting.edge.date.size.update.primary(header.element.date.date());
headerSetting.edge.search.size.update.primary(header.element.search.search());
data.save();
}
}),
queryNameHelper: new Control_helperText({
text: [
message.get('menuContentHeaderSearchEngineCustomQueryNameHelperPara1'),
message.get('menuContentHeaderSearchEngineCustomQueryNameHelperPara2')
]
})
}
};
headerSetting.control.search.engine.custom.area = node('div', [
headerSetting.control.search.engine.custom.name.wrap(),
headerSetting.control.search.engine.custom.url.wrap(),
headerSetting.control.search.engine.custom.urlHelper.wrap(),
headerSetting.control.search.engine.custom.queryName.wrap(),
headerSetting.control.search.engine.custom.queryNameHelper.wrap()
]);
headerSetting.control.search.engine.custom.collapse = new Collapse({
type: 'radio',
radioGroup: headerSetting.control.search.engine.selected,
target: [{
id: headerSetting.control.search.engine.selected.radioSet[headerSetting.control.search.engine.selected.radioSet.length - 1].radio.value,
content: headerSetting.control.search.engine.custom.area
}]
});
headerSetting.control.search.text = {
justify: new Control_radioGrid({
object: state.get.current(),
radioGroup: [
{ id: 'header-search-text-justify-left', labelText: message.get('menuContentHeaderSearchEngineTextJustifyLeft'), value: 'left', position: 1 },
{ id: 'header-search-text-justify-center', labelText: message.get('menuContentHeaderSearchEngineTextJustifyCenter'), value: 'center', position: 2 },
{ id: 'header-search-text-justify-right', labelText: message.get('menuContentHeaderSearchEngineTextJustifyRight'), value: 'right', position: 3 }
],
label: message.get('menuContentHeaderSearchEngineTextJustifyLabel'),
groupName: 'header-search-text-justify',
path: 'header.search.text.justify',
gridSize: '3x1',
action: () => {
applyCSSClass('header.search.text.justify');
data.save();
}
})
};
headerSetting.control.search.newTab = new Control_checkbox({
object: state.get.current(),
path: 'header.search.newTab',
id: 'header-search-newTab',
labelText: message.get('menuContentHeaderSearchNewTab'),
action: () => {
header.item.mod.order();
header.item.clear();
header.item.render();
layout.area.assemble();
headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
headerSetting.edge.date.size.update.primary(header.element.date.date());
headerSetting.edge.search.size.update.primary(header.element.search.search());
data.save();
}
});
headerSetting.control.search.area = node('div', [
headerSetting.control.search.width.by.wrap(),
form.wrap({

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

@ -1,21 +1,24 @@
import { message } from '../message';
import { debugSetting } from './debugSetting';
import { APP_NAME } from '../../constant';
import { layoutSetting } from './layoutSetting';
import { groupSetting } from './groupSetting';
import { bookmarkSetting } from './bookmarkSetting';
import { headerSetting } from './headerSetting';
import { toolbarSetting } from './toolbarSetting';
import { themeSetting } from './themeSetting';
import { languageSetting } from './languageSetting';
import { dataSetting } from './dataSetting';
import { supportSetting } from './supportSetting';
import { coffeeSetting } from './coffeeSetting';
import { appSetting } from './appSetting';
import { node } from '../../utility/node';
import { uppercaseFirstLetter } from '../../utility/uppercaseFirstLetter';
import './index.css';
export const MenuContent = function ({
export const MenuContent = function({
activeNavData = {},
container = false
} = {}) {
@ -49,7 +52,9 @@ export const MenuContent = function ({
const menuContentItem = this.element.content(item);
menuContentItem.appendChild(this.element.header(item));
menuContentItem.appendChild(this.element.header(
message.get(`menuNav${uppercaseFirstLetter(activeNavData.name)}SubNav${uppercaseFirstLetter(item)}`)
));
const formElement = this.element.form({ indent: true });
@ -131,9 +136,19 @@ export const MenuContent = function ({
switch (this.makeId(activeNavData.name)) {
case 'language':
menuContentItem.appendChild(this.element.header(message.get(`menuNav${uppercaseFirstLetter(activeNavData.name)}Label`)));
formElement = this.element.form({ indent: true });
languageSetting[this.makeId(activeNavData.name)](formElement);
break;
case 'support':
menuContentItem.appendChild(this.element.header(activeNavData.name));
menuContentItem.appendChild(this.element.header(message.get(`menuNav${uppercaseFirstLetter(activeNavData.name)}Label`)));
formElement = this.element.form({ indent: true });
@ -143,7 +158,7 @@ export const MenuContent = function ({
case 'coffee':
menuContentItem.appendChild(this.element.header(activeNavData.name));
menuContentItem.appendChild(this.element.header(message.get(`menuNav${uppercaseFirstLetter(activeNavData.name)}Label`)));
formElement = this.element.form({ indent: true });
@ -151,7 +166,7 @@ export const MenuContent = function ({
break;
case this.makeId(APP_NAME):
case 'app':
formElement = this.element.form();

81
src/component/menuContent/languageSetting/index.js Normal file
View File

@ -0,0 +1,81 @@
import { message } from '../../message';
import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
import { groupAndBookmark } from '../../groupAndBookmark';
import { menu } from '../../menu';
import { toolbar } from '../../toolbar';
import { APP_NAME } from '../../../constant';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_select } from '../../control/select';
import { node } from '../../../utility/node';
const languageSetting = {};
languageSetting.control = {
language: {}
};
languageSetting.language = (parent) => {
const selectedLanguageIndex = () => {
let index = 0;
index = message.language.code().indexOf(state.get.current().language);
return index;
};
languageSetting.control.language.selected = new Control_select({
path: 'language.selected',
id: 'language-selected',
labelText: message.get('menuContentLanguageSelect'),
srOnly: true,
option: message.language.list(),
selected: selectedLanguageIndex(),
action: () => {
state.get.current().language = message.language.code()[languageSetting.control.language.selected.selected()];
data.save();
toolbar.bar.render();
header.item.clear();
header.item.render();
groupAndBookmark.render();
menu.close();
menu.open();
}
});
languageSetting.control.link = new Link({
text: message.get('menuContentLanguageAlertLink'),
href: `https://github.com/zombieFox/${APP_NAME}`,
openNew: true
});
languageSetting.control.alert = new Alert({
iconName: 'globe',
children: [
node(`p:${message.get('menuContentLanguageAlertPara')}`),
node('p', languageSetting.control.link.link())
]
});
parent.appendChild(
node('div', [
languageSetting.control.language.selected.wrap(),
languageSetting.control.alert.wrap()
])
);
};
export { languageSetting };

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

@ -1,3 +1,5 @@
import { message } from '../../message';
import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
@ -8,7 +10,6 @@ import { theme } from '../../theme';
import * as form from '../../form';
import { Edge } from '../../edge';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_radio } from '../../control/radio';
@ -109,7 +110,7 @@ layoutSetting.scaling = (parent) => {
object: state.get.current(),
path: 'layout.size',
id: 'layout-size',
labelText: 'Global size',
labelText: message.get('menuContentLayoutScalingSize'),
value: state.get.current().layout.size,
defaultValue: state.get.default().layout.size,
min: state.get.minMax().layout.size.min,
@ -147,7 +148,7 @@ layoutSetting.area = (parent) => {
object: state.get.current(),
path: 'layout.width',
id: 'layout-width',
labelText: 'Layout area width',
labelText: message.get('menuContentLayoutAreaWidth'),
value: state.get.current().layout.width,
defaultValue: state.get.default().layout.width,
min: state.get.minMax().layout.width.min,
@ -170,7 +171,7 @@ layoutSetting.area = (parent) => {
object: state.get.current(),
path: 'layout.area.header.width',
id: 'layout-area-header-width',
labelText: 'Header area width',
labelText: message.get('menuContentLayoutAreaHeaderWidth'),
value: state.get.current().layout.area.header.width,
defaultValue: state.get.default().layout.area.header.width,
min: state.get.minMax().layout.area.header.width.min,
@ -190,11 +191,11 @@ layoutSetting.area = (parent) => {
justify: new Control_radioGrid({
object: state.get.current(),
radioGroup: [
{ id: 'layout-area-header-justify-left', labelText: 'Left', value: 'left', position: 1 },
{ id: 'layout-area-header-justify-center', labelText: 'Center', value: 'center', position: 2 },
{ id: 'layout-area-header-justify-right', labelText: 'Right', value: 'right', position: 3 }
{ id: 'layout-area-header-justify-left', labelText: message.get('menuContentLayoutAreaHeaderJustifyLeft'), value: 'left', position: 1 },
{ id: 'layout-area-header-justify-center', labelText: message.get('menuContentLayoutAreaHeaderJustifyCenter'), value: 'center', position: 2 },
{ id: 'layout-area-header-justify-right', labelText: message.get('menuContentLayoutAreaHeaderJustifyRight'), value: 'right', position: 3 }
],
label: 'Header area alignment',
label: message.get('menuContentLayoutAreaHeaderJustifyLabel'),
groupName: 'layout-area-header-justify',
path: 'layout.area.header.justify',
gridSize: '3x1',
@ -204,11 +205,11 @@ layoutSetting.area = (parent) => {
}
}),
justifyHelper1: new Control_helperText({
text: ['Effects may not be visible if the Header Area is full width.']
text: [message.get('menuContentLayoutAreaHeaderJustifyHelper1Para1')]
}),
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: [message.get('menuContentLayoutAreaHeaderJustifyHelper2Para1')]
})
};
@ -217,7 +218,7 @@ layoutSetting.area = (parent) => {
object: state.get.current(),
path: 'layout.area.bookmark.width',
id: 'layout-area-bookmark-width',
labelText: 'Bookmark area width',
labelText: message.get('menuContentLayoutAreaBookmarkWidth'),
value: state.get.current().layout.area.bookmark.width,
defaultValue: state.get.default().layout.area.bookmark.width,
min: state.get.minMax().layout.area.bookmark.width.min,
@ -237,11 +238,11 @@ layoutSetting.area = (parent) => {
justify: new Control_radioGrid({
object: state.get.current(),
radioGroup: [
{ id: 'layout-area-bookmark-justify-left', labelText: 'Left', value: 'left', position: 1 },
{ id: 'layout-area-bookmark-justify-center', labelText: 'Center', value: 'center', position: 2 },
{ id: 'layout-area-bookmark-justify-right', labelText: 'Right', value: 'right', position: 3 }
{ id: 'layout-area-bookmark-justify-left', labelText: message.get('menuContentLayoutAreaBookmarkJustifyLeft'), value: 'left', position: 1 },
{ id: 'layout-area-bookmark-justify-center', labelText: message.get('menuContentLayoutAreaBookmarkJustifyCenter'), value: 'center', position: 2 },
{ id: 'layout-area-bookmark-justify-right', labelText: message.get('menuContentLayoutAreaBookmarkJustifyRight'), value: 'right', position: 3 }
],
label: 'Bookmark area alignment',
label: message.get('menuContentLayoutAreaBookmarkJustifyLabel'),
groupName: 'layout-area-bookmark-justify',
path: 'layout.area.bookmark.justify',
gridSize: '3x1',
@ -251,11 +252,11 @@ layoutSetting.area = (parent) => {
}
}),
justifyHelper1: new Control_helperText({
text: ['Effects may not be visible if the Bookmark Area is full width.']
text: [message.get('menuContentLayoutAreaBookmarkJustifyHelper1Para1')]
}),
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: [message.get('menuContentLayoutAreaBookmarkJustifyHelper2Para1')]
})
};
@ -293,7 +294,7 @@ layoutSetting.padding = (parent) => {
object: state.get.current(),
path: 'layout.padding',
id: 'layout-padding',
labelText: 'Space around Header and Bookmark Area',
labelText: message.get('menuContentLayoutPadding'),
value: state.get.current().layout.padding,
defaultValue: state.get.default().layout.padding,
min: state.get.minMax().layout.padding.min,
@ -327,7 +328,7 @@ layoutSetting.gutter = (parent) => {
object: state.get.current(),
path: 'layout.gutter',
id: 'layout-gutter',
labelText: 'Space between Header and Bookmark items',
labelText: message.get('menuContentLayoutGutter'),
value: state.get.current().layout.gutter,
defaultValue: state.get.default().layout.gutter,
min: state.get.minMax().layout.gutter.min,
@ -358,17 +359,17 @@ layoutSetting.alignment = (parent) => {
layoutSetting.control.alignment.alignment = new Control_radioGrid({
object: state.get.current(),
radioGroup: [
{ id: 'layout-alignment-top-left', labelText: 'Top Left', value: 'top-left', position: 1 },
{ id: 'layout-alignment-top-center', labelText: 'Top Center', value: 'top-center', position: 2 },
{ id: 'layout-alignment-top-right', labelText: 'Top Right', value: 'top-right', position: 3 },
{ id: 'layout-alignment-center-left', labelText: 'Center Left', value: 'center-left', position: 4 },
{ id: 'layout-alignment-center-center', labelText: 'Center Center', value: 'center-center', position: 5 },
{ id: 'layout-alignment-center-right', labelText: 'Center Right', value: 'center-right', position: 6 },
{ id: 'layout-alignment-bottom-left', labelText: 'Bottom Left', value: 'bottom-left', position: 7 },
{ id: 'layout-alignment-bottom-center', labelText: 'Bottom Center', value: 'bottom-center', position: 8 },
{ id: 'layout-alignment-bottom-right', labelText: 'Bottom Right', value: 'bottom-right', position: 9 }
{ id: 'layout-alignment-top-left', labelText: message.get('menuContentLayoutAlignmentTopLeft'), value: 'top-left', position: 1 },
{ id: 'layout-alignment-top-center', labelText: message.get('menuContentLayoutAlignmentTopCenter'), value: 'top-center', position: 2 },
{ id: 'layout-alignment-top-right', labelText: message.get('menuContentLayoutAlignmentTopRight'), value: 'top-right', position: 3 },
{ id: 'layout-alignment-center-left', labelText: message.get('menuContentLayoutAlignmentCenterLeft'), value: 'center-left', position: 4 },
{ id: 'layout-alignment-center-center', labelText: message.get('menuContentLayoutAlignmentCenterCenter'), value: 'center-center', position: 5 },
{ id: 'layout-alignment-center-right', labelText: message.get('menuContentLayoutAlignmentCenterRight'), value: 'center-right', position: 6 },
{ id: 'layout-alignment-bottom-left', labelText: message.get('menuContentLayoutAlignmentBottomLeft'), value: 'bottom-left', position: 7 },
{ id: 'layout-alignment-bottom-center', labelText: message.get('menuContentLayoutAlignmentBottomCenter'), value: 'bottom-center', position: 8 },
{ id: 'layout-alignment-bottom-right', labelText: message.get('menuContentLayoutAlignmentBottomRight'), value: 'bottom-right', position: 9 }
],
label: 'Area alignment',
label: message.get('menuContentLayoutAlignmentLabel'),
groupName: 'layout-alignment',
path: 'layout.alignment',
gridSize: '3x3',
@ -381,8 +382,8 @@ layoutSetting.alignment = (parent) => {
layoutSetting.control.alignment.direction = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'layout-direction-horizontal', labelText: 'Align horizontal', description: 'Stack the Header and Bookmarks in a row side by side.', value: 'horizontal' },
{ id: 'layout-direction-vertical', labelText: 'Align vertical', description: 'Stack the Header and Bookmarks in a column one above the other.', value: 'vertical' }
{ id: 'layout-direction-horizontal', labelText: message.get('menuContentLayoutDirectionHorizontalLabel'), description: message.get('menuContentLayoutDirectionHorizontalDescription'), value: 'horizontal' },
{ id: 'layout-direction-vertical', labelText: message.get('menuContentLayoutDirectionVerticalLabel'), description: message.get('menuContentLayoutDirectionVerticalDescription'), value: 'vertical' }
],
groupName: 'layout-direction',
path: 'layout.direction',
@ -396,8 +397,8 @@ layoutSetting.alignment = (parent) => {
layoutSetting.control.alignment.order = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'layout-order-header-bookmark', labelText: 'Header then Bookmarks', description: 'Order the Header area to appear before the Bookmarks area.', value: 'header-bookmark' },
{ id: 'layout-order-bookmark-header', labelText: 'Bookmarks then Header', description: 'Order the Bookmarks area to appear before the Header area.', value: 'bookmark-header' }
{ id: 'layout-order-header-bookmark', labelText: message.get('menuContentLayoutOrderHeaderBookmarkLabel'), description: message.get('menuContentLayoutOrderHeaderBookmarkDescription'), value: 'header-bookmark' },
{ id: 'layout-order-bookmark-header', labelText: message.get('menuContentLayoutOrderBookmarkHeaderLabel'), description: message.get('menuContentLayoutOrderBookmarkHeaderDescription'), value: 'bookmark-header' }
],
groupName: 'layout-order',
path: 'layout.order',
@ -428,8 +429,8 @@ layoutSetting.page = (parent) => {
id: 'layout-title',
value: state.get.current().layout.title,
defaultValue: state.get.default().layout.title,
placeholder: 'New Tab',
labelText: 'Title',
placeholder: message.get('menuContentLayoutPageTitlePlaceholder'),
labelText: message.get('menuContentLayoutPageTitleLabel'),
action: () => {
layout.title.render();
data.save();
@ -442,8 +443,8 @@ layoutSetting.page = (parent) => {
id: 'layout-favicon',
value: state.get.current().layout.favicon,
defaultValue: state.get.default().layout.favicon,
placeholder: 'https://www.example.com/favicon.svg',
labelText: 'Favicon URL',
placeholder: message.get('menuContentLayoutPageFaviconPlaceholder'),
labelText: message.get('menuContentLayoutPageFaviconLabel'),
action: () => {
layout.favicon.render();
data.save();
@ -451,16 +452,16 @@ layoutSetting.page = (parent) => {
});
layoutSetting.control.page.faviconHelper = new Control_helperText({
text: ['Not supported by all browsers.']
text: [message.get('menuContentLayoutPageFaviconHelperPara1')]
});
layoutSetting.control.page.scrollbar = new Control_radio({
object: state.get.current(),
label: 'Scrollbar',
label: message.get('menuContentLayoutPageScrollbarLabel'),
radioGroup: [
{ id: 'layout-scrollbar-auto', labelText: 'Auto', value: 'auto' },
{ id: 'layout-scrollbar-thin', labelText: 'Thin', value: 'thin' },
{ id: 'layout-scrollbar-none', labelText: 'Hidden', value: 'none' }
{ id: 'layout-scrollbar-auto', labelText: message.get('menuContentLayoutPageScrollbarAuto'), value: 'auto' },
{ id: 'layout-scrollbar-thin', labelText: message.get('menuContentLayoutPageScrollbarThin'), value: 'thin' },
{ id: 'layout-scrollbar-none', labelText: message.get('menuContentLayoutPageScrollbarNone'), value: 'none' }
],
groupName: 'layout-scrollbar',
path: 'layout.scrollbar',
@ -471,7 +472,7 @@ layoutSetting.page = (parent) => {
});
layoutSetting.control.page.scrollbarHelper = new Control_helperText({
text: ['Not supported by all browsers.']
text: [message.get('menuContentLayoutPageScrollbarHelperPara1')]
});
layoutSetting.control.page.overscroll = {
@ -479,7 +480,7 @@ layoutSetting.page = (parent) => {
object: state.get.current(),
path: 'layout.overscroll.active',
id: 'layout-overscroll-active',
labelText: 'Scroll past end',
labelText: message.get('menuContentLayoutPageOverscrollActive'),
action: () => {
applyCSSState('layout.overscroll.active');
layoutSetting.disable();
@ -490,10 +491,10 @@ layoutSetting.page = (parent) => {
object: state.get.current(),
path: 'layout.overscroll.unblur',
id: 'layout-overscroll-unblur-background',
labelText: 'Unblur background image or video',
labelText: message.get('menuContentLayoutPageOverscrollUnblurLabel'),
description: [
'Background image or video will unblur when scrolled to the bottom of the page.',
'Image or video blur can be found under Theme Background.'
message.get('menuContentLayoutPageOverscrollUnblurDescriptionPara1'),
message.get('menuContentLayoutPageOverscrollUnblurDescriptionPara2')
],
action: () => {
theme.background.image.render();

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

@ -1,28 +1,71 @@
import { message } from '../../message';
import { APP_NAME } from '../../../constant';
import * as form from '../../form';
import { Link } from '../../link';
import { node } from '../../../utility/node';
const supportSetting = {};
supportSetting.link = {
url: 'https://github.com/zombieFox/' + APP_NAME + '/wiki/',
page: {
applyToAll: 'Applying-bookmark-settings-to-all',
browser: 'Browser-support',
cookies: 'Cookies-and-cache',
data: 'Data-backup-and-restore',
localBackgroundImage: 'Local-background-image',
protectedUrl: 'Protected-URLs',
recovering: 'Recovering-settings-and-bookmarks',
resetting: 'Resetting-when-opening-the-browser',
privacy: 'Respecting-your-privacy',
backgroundImageVideo: 'Setting-a-background-video-or-image',
firefox: 'Setting-' + APP_NAME + '-as-your-Firefox-homepage'
supportSetting.supportPage = {
get: () => {
const supportLink = {};
supportLink.baseUrl = 'https://github.com/zombieFox/' + APP_NAME + '/wiki/';
supportLink.page = {
applyToAll: {
label: message.get('menuContentSupportPageApplyToAll'),
url: 'Applying-bookmark-settings-to-all'
},
browser: {
label: message.get('menuContentSupportPageBrowser'),
url: 'Browser-support'
},
cookies: {
label: message.get('menuContentSupportPageCookies'),
url: 'Cookies-and-cache'
},
data: {
label: message.get('menuContentSupportPageData'),
url: 'Data-backup-and-restore'
},
localBackgroundImage: {
label: message.get('menuContentSupportPageLocalBackgroundImage'),
url: 'Local-background-image'
},
protectedUrl: {
label: message.get('menuContentSupportPageProtectedUrl'),
url: 'Protected-URLs'
},
recovering: {
label: message.get('menuContentSupportPageRecovering'),
url: 'Recovering-settings-and-bookmarks'
},
resetting: {
label: message.get('menuContentSupportPageResetting'),
url: 'Resetting-when-opening-the-browser'
},
privacy: {
label: message.get('menuContentSupportPagePrivacy'),
url: 'Respecting-your-privacy'
},
backgroundImageVideo: {
label: message.get('menuContentSupportPageBackgroundImageVideo'),
url: 'Setting-a-background-video-or-image'
},
firefox: {
label: message.get('menuContentSupportPageFirefox'),
url: 'Setting-' + APP_NAME + '-as-your-Firefox-homepage'
},
};
return supportLink;
}
};
@ -34,15 +77,17 @@ supportSetting.support = (parent) => {
const list = node('ul|class:list-feature');
for (var key in supportSetting.link.page) {
const supportLink = supportSetting.supportPage.get();
const supportLink = new Link({
text: supportSetting.link.page[key].replace(/-/g, ' '),
href: supportSetting.link.url + supportSetting.link.page[key],
for (var key in supportLink.page) {
const linkItem = new Link({
text: supportLink.page[key].label,
href: supportLink.baseUrl + supportLink.page[key].url,
openNew: true
});
list.appendChild(node('li', [supportLink.link()]));
list.appendChild(node('li', [linkItem.link()]));
}
@ -52,15 +97,33 @@ supportSetting.support = (parent) => {
};
const para = node('p');
supportSetting.support.para = node('p');
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}.`;
supportSetting.support.para.innerHTML = message.get('menuContentSupportPara');
supportSetting.support.linkIssue = new Link({
text: message.get('menuContentSupportLink1'),
href: `https://github.com/zombieFox/${APP_NAME}/issues`,
openNew: true
});
supportSetting.support.linkWiki = new Link({
text: message.get('menuContentSupportLink2'),
href: `https://github.com/zombieFox/${APP_NAME}/wiki`,
openNew: true
});
parent.appendChild(
node('div', [
makeLinks(),
node('hr'),
para
supportSetting.support.para,
form.indent({
children: [
node('p', supportSetting.support.linkIssue.link()),
node('p', supportSetting.support.linkWiki.link())
]
})
])
);

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

@ -1,3 +1,5 @@
import { message } from '../../message';
import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
@ -273,7 +275,7 @@ themeSetting.disable = () => {
themeSetting.preset = (parent) => {
themeSetting.control.preset.presetHelper = new Control_helperText({
text: ['Applying a Preset will replace the current Colour, Accent, Font, Style, Opacity, Radius, Shadow, Shade and Background.']
text: [message.get('menuContentThemePresetHelperPara1')]
});
const preset = () => {
@ -310,10 +312,10 @@ themeSetting.saved = (parent) => {
themeSetting.control.saved = {
savedElement: node('div|class:theme-custom'),
customHelper: new Control_helperText({
text: ['Saving a Theme will record the current Colour, Accent, Font, Style, Opacity, Radius, Shadow, Shade and Background.']
text: [message.get('menuContentThemeSavedHelperPara1')]
}),
saveButton: new Button({
text: 'Save current theme',
text: message.get('menuContentThemeSavedSave'),
style: ['line'],
func: () => {
menu.close();
@ -321,7 +323,7 @@ themeSetting.saved = (parent) => {
}
}),
edit: new Button({
text: 'Edit saved themes',
text: message.get('menuContentThemeSavedEdit'),
iconName: 'edit',
style: ['line'],
srOnly: true,
@ -384,9 +386,9 @@ themeSetting.style = (parent) => {
themeSetting.control.style = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'theme-style-dark', labelText: 'Dark mode', description: false, value: 'dark' },
{ id: 'theme-style-light', labelText: 'Light mode', description: false, value: 'light' },
{ id: 'theme-style-system', labelText: 'Automatic', description: 'Follow the system Light or Dark mode.', value: 'system' }
{ id: 'theme-style-dark', labelText: message.get('menuContentThemeStyleDarkLabel'), description: false, value: 'dark' },
{ id: 'theme-style-light', labelText: message.get('menuContentThemeStyleLightLabel'), description: false, value: 'light' },
{ id: 'theme-style-system', labelText: message.get('menuContentThemeStyleAutomaticLabel'), description: message.get('menuContentThemeStyleAutomaticDescription'), value: 'system' }
],
groupName: 'theme-style',
path: 'theme.style',
@ -405,7 +407,7 @@ themeSetting.style = (parent) => {
};
themeSetting.colour = (parent) => {
themeSetting.color = (parent) => {
const shade = () => {
@ -444,7 +446,7 @@ themeSetting.colour = (parent) => {
object: state.get.current(),
path: 'theme.color.range.primary.h',
id: 'theme-color-range-primary-h',
labelText: 'Primary colour',
labelText: message.get('menuContentThemeColorRangePrimaryH'),
value: state.get.current().theme.color.range.primary.h,
defaultValue: state.get.default().theme.color.range.primary.h,
min: state.get.minMax().theme.color.range.primary.h.min,
@ -459,7 +461,7 @@ themeSetting.colour = (parent) => {
object: state.get.current(),
path: 'theme.color.range.primary.s',
id: 'theme-color-range-primary-s',
labelText: 'Saturation',
labelText: message.get('menuContentThemeColorRangePrimaryS'),
value: state.get.current().theme.color.range.primary.s,
defaultValue: state.get.default().theme.color.range.primary.s,
min: state.get.minMax().theme.color.range.primary.s.min,
@ -474,12 +476,12 @@ themeSetting.colour = (parent) => {
},
contrast: new Control_sliderDouble({
object: state.get.current(),
labelText: 'Contrast range',
labelText: message.get('menuContentThemeColorContrastLabel'),
style: 'contrast',
left: {
path: 'theme.color.contrast.start',
id: 'theme-color-contrast-start',
labelText: 'Contrast start',
labelText: message.get('menuContentThemeColorContrastLeft'),
value: state.get.current().theme.color.contrast.start,
defaultValue: state.get.default().theme.color.contrast.start,
min: state.get.minMax().theme.color.contrast.start.min,
@ -492,7 +494,7 @@ themeSetting.colour = (parent) => {
right: {
path: 'theme.color.contrast.end',
id: 'theme-color-contrast-end',
labelText: 'Contrast end',
labelText: message.get('menuContentThemeColorContrastRight'),
value: state.get.current().theme.color.contrast.end,
defaultValue: state.get.default().theme.color.contrast.end,
min: state.get.minMax().theme.color.contrast.end.min,
@ -505,16 +507,16 @@ themeSetting.colour = (parent) => {
}),
contrastHelper: new Control_helperText({
text: [
'Move the Contrast range controls close together for a muted look.',
'Move the Contrast range controls far apart from each other for a sharp vivid look.'
message.get('menuContentThemeColorContrastHelperPara1'),
message.get('menuContentThemeColorContrastHelperPara2')
]
}),
shade: {
helper: new Control_helperText({
text: [
'Backgrounds, Bookmarks and Modals use shades from the left.',
'Text and form elements use shades from the right.',
'For a light look switch to the Light Style and then select a Primary colour. And vice versa for a dark look.'
message.get('menuContentThemeColorShadeHelperPara1'),
message.get('menuContentThemeColorShadeHelperPara2'),
message.get('menuContentThemeColorShadeHelperPara3')
]
})
}
@ -564,7 +566,7 @@ themeSetting.accent = (parent) => {
object: state.get.current(),
path: 'theme.accent',
id: 'theme-accent',
labelText: 'Accent colour',
labelText: message.get('menuContentThemeAccentColor'),
defaultValue: state.get.default().theme.accent.rgb,
minMaxObject: state.get.minMax(),
randomColor: true,
@ -589,7 +591,7 @@ themeSetting.accent = (parent) => {
object: state.get.current(),
path: 'theme.accent.random.active',
id: 'theme-accent-random-active',
labelText: 'Random Accent colour on load/refresh',
labelText: message.get('menuContentThemeAccentRandomActive'),
action: () => {
themeSetting.disable();
themeSetting.control.accent.random.collapse.update();
@ -600,11 +602,11 @@ themeSetting.accent = (parent) => {
themeSetting.control.accent.random.style = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'theme-accent-random-style-any', labelText: 'Any', value: 'any' },
{ id: 'theme-accent-random-style-light', labelText: 'Light', value: 'light' },
{ id: 'theme-accent-random-style-dark', labelText: 'Dark', value: 'dark' },
{ id: 'theme-accent-random-style-pastel', labelText: 'Pastel', value: 'pastel' },
{ id: 'theme-accent-random-style-saturated', labelText: 'Saturated', value: 'saturated' },
{ id: 'theme-accent-random-style-any', labelText: message.get('menuContentThemeAccentRandomStyleAny'), value: 'any' },
{ id: 'theme-accent-random-style-light', labelText: message.get('menuContentThemeAccentRandomStyleLight'), value: 'light' },
{ id: 'theme-accent-random-style-dark', labelText: message.get('menuContentThemeAccentRandomStyleDark'), value: 'dark' },
{ id: 'theme-accent-random-style-pastel', labelText: message.get('menuContentThemeAccentRandomStylePastel'), value: 'pastel' },
{ id: 'theme-accent-random-style-saturated', labelText: message.get('menuContentThemeAccentRandomStyleSaturated'), value: 'saturated' },
],
groupName: 'theme-accent-random-style',
path: 'theme.accent.random.style',
@ -614,7 +616,7 @@ themeSetting.accent = (parent) => {
});
themeSetting.control.accent.randomiseNow = new Button({
text: 'Randomise now',
text: message.get('menuContentThemeAccentRandomRandomise'),
style: ['line'],
func: () => {
theme.accent.random.render();
@ -651,7 +653,7 @@ themeSetting.accent = (parent) => {
themeSetting.control.accent.cycle.alert = new Alert({
iconName: 'info',
children: [
node('p:Take care as a fast changing Accent hue may cause performance issues.|class:small')
node(`p:${message.get('menuContentThemeAccentCycleAlert')}|class:small`)
]
});
@ -659,7 +661,7 @@ themeSetting.accent = (parent) => {
object: state.get.current(),
path: 'theme.accent.cycle.active',
id: 'theme-accent-random-cycle-active',
labelText: 'Auto change Accent hue',
labelText: message.get('menuContentThemeAccentCycleActive'),
action: () => {
themeSetting.control.accent.cycle.collapse.update();
theme.accent.cycle.bind();
@ -673,7 +675,7 @@ themeSetting.accent = (parent) => {
object: state.get.current(),
path: 'theme.accent.cycle.speed',
id: 'theme-accent-random-cycle-speed',
labelText: 'Change delay',
labelText: message.get('menuContentThemeAccentCycleSpeed'),
value: state.get.current().theme.accent.cycle.speed,
defaultValue: state.get.default().theme.accent.cycle.speed,
min: state.get.minMax().theme.accent.cycle.speed.min,
@ -688,7 +690,7 @@ themeSetting.accent = (parent) => {
object: state.get.current(),
path: 'theme.accent.cycle.step',
id: 'theme-accent-random-cycle-step',
labelText: 'Change steps',
labelText: message.get('menuContentThemeAccentCycleStep'),
value: state.get.current().theme.accent.cycle.step,
defaultValue: state.get.default().theme.accent.cycle.step,
min: state.get.minMax().theme.accent.cycle.step.min,
@ -700,7 +702,7 @@ themeSetting.accent = (parent) => {
});
themeSetting.control.accent.cycle.stepHelper = new Control_helperText({
text: ['Auto change Accent hue will not work when the Accent colour is a grey or black.']
text: [message.get('menuContentThemeAccentCycleHelperPara1')]
});
themeSetting.control.accent.cycle.area = node('div', [
@ -761,8 +763,8 @@ themeSetting.font = (parent) => {
id: 'theme-font-display-name',
value: state.get.current().theme.font.display.name,
defaultValue: state.get.default().theme.font.display.name,
placeholder: 'Google font name',
labelText: 'Display font',
placeholder: message.get('menuContentThemeFontDisplayNamePlaceholder'),
labelText: message.get('menuContentThemeFontDisplayNameLabel'),
action: () => {
theme.font.display.delay();
data.save();
@ -771,16 +773,17 @@ 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.`,
'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".'
message.get('menuContentThemeFontDisplayNameHelperPara1'),
(new Link({ text: message.get('menuContentThemeFontDisplayNameHelperLink'), href: 'https://fonts.google.com/', openNew: true })).link().outerHTML,
message.get('menuContentThemeFontDisplayNameHelperPara2'),
message.get('menuContentThemeFontDisplayNameHelperPara3')
]
}),
weight: new Control_slider({
object: state.get.current(),
path: 'theme.font.display.weight',
id: 'theme-font-display-weight',
labelText: 'Font weight',
labelText: message.get('menuContentThemeFontDisplayWeightLabel'),
value: state.get.current().theme.font.display.weight,
defaultValue: state.get.default().theme.font.display.weight,
step: state.get.step().theme.font.display.weight,
@ -792,7 +795,7 @@ themeSetting.font = (parent) => {
}
}),
weightLight: new Button({
text: 'Light',
text: message.get('menuContentThemeFontDisplayWeightLight'),
style: ['line'],
func: () => {
state.get.current().theme.font.display.weight = fontWeight.light;
@ -802,7 +805,7 @@ themeSetting.font = (parent) => {
}
}),
weightRegular: new Button({
text: 'Regular',
text: message.get('menuContentThemeFontDisplayWeightRegular'),
style: ['line'],
func: () => {
state.get.current().theme.font.display.weight = fontWeight.regular;
@ -812,7 +815,7 @@ themeSetting.font = (parent) => {
}
}),
weightBold: new Button({
text: 'Bold',
text: message.get('menuContentThemeFontDisplayWeightBold'),
style: ['line'],
func: () => {
state.get.current().theme.font.display.weight = fontWeight.bold;
@ -822,13 +825,13 @@ themeSetting.font = (parent) => {
}
}),
weightHelper: new Control_helperText({
text: ['Not all fonts support all weights. Refer to the Google Font page to see which are available.']
text: [message.get('menuContentThemeFontDisplayWeightHelperPara1')]
}),
style: new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'theme-font-display-style-normal', labelText: 'Normal', value: 'normal' },
{ id: 'theme-font-display-style-italic', labelText: 'Italic', value: 'italic' }
{ id: 'theme-font-display-style-normal', labelText: message.get('menuContentThemeFontDisplayStyleNormal'), value: 'normal' },
{ id: 'theme-font-display-style-italic', labelText: message.get('menuContentThemeFontDisplayStyleItalic'), value: 'italic' }
],
groupName: 'theme-font-display-style',
path: 'theme.font.display.style',
@ -849,8 +852,8 @@ themeSetting.font = (parent) => {
id: 'theme-font-ui-name',
value: state.get.current().theme.font.ui.name,
defaultValue: state.get.default().theme.font.ui.name,
placeholder: 'Google font name',
labelText: 'User interface font',
placeholder: message.get('menuContentThemeFontUiNamePlaceholder'),
labelText: message.get('menuContentThemeFontUiNameLabel'),
action: () => {
theme.font.ui.delay();
data.save();
@ -859,16 +862,17 @@ 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.`,
'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".'
message.get('menuContentThemeFontUiNameHelperPara1'),
(new Link({ text: message.get('menuContentThemeFontUiNameHelperLink'), href: 'https://fonts.google.com/', openNew: true })).link().outerHTML,
message.get('menuContentThemeFontUiNameHelperPara2'),
message.get('menuContentThemeFontUiNameHelperPara3')
]
}),
weight: new Control_slider({
object: state.get.current(),
path: 'theme.font.ui.weight',
id: 'theme-font-ui-weight',
labelText: 'Font weight',
labelText: message.get('menuContentThemeFontUiWeightLabel'),
value: state.get.current().theme.font.ui.weight,
defaultValue: state.get.default().theme.font.ui.weight,
step: state.get.step().theme.font.ui.weight,
@ -880,7 +884,7 @@ themeSetting.font = (parent) => {
}
}),
weightLight: new Button({
text: 'Light',
text: message.get('menuContentThemeFontUiWeightLight'),
style: ['line'],
func: () => {
state.get.current().theme.font.ui.weight = fontWeight.light;
@ -890,7 +894,7 @@ themeSetting.font = (parent) => {
}
}),
weightRegular: new Button({
text: 'Regular',
text: message.get('menuContentThemeFontUiWeightRegular'),
style: ['line'],
func: () => {
state.get.current().theme.font.ui.weight = fontWeight.regular;
@ -900,7 +904,7 @@ themeSetting.font = (parent) => {
}
}),
weightBold: new Button({
text: 'Bold',
text: message.get('menuContentThemeFontUiWeightBold'),
style: ['line'],
func: () => {
state.get.current().theme.font.ui.weight = fontWeight.bold;
@ -910,13 +914,13 @@ themeSetting.font = (parent) => {
}
}),
weightHelper: new Control_helperText({
text: ['Not all fonts support all weights. Refer to the Google Font page to see which are available.']
text: [message.get('menuContentThemeFontUiWeightHelperPara1')]
}),
style: new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'theme-font-ui-style-normal', labelText: 'Normal', value: 'normal' },
{ id: 'theme-font-ui-style-italic', labelText: 'Italic', value: 'italic' }
{ id: 'theme-font-ui-style-normal', labelText: message.get('menuContentThemeFontUiStyleNormal'), value: 'normal' },
{ id: 'theme-font-ui-style-italic', labelText: message.get('menuContentThemeFontUiStyleItalic'), value: 'italic' }
],
groupName: 'theme-font-ui-style',
path: 'theme.font.ui.style',
@ -992,7 +996,7 @@ themeSetting.radius = (parent) => {
object: state.get.current(),
path: 'theme.radius',
id: 'theme-radius',
labelText: 'Corners radius',
labelText: message.get('menuContentThemeRadius'),
value: state.get.current().theme.radius,
defaultValue: state.get.default().theme.radius,
min: state.get.minMax().theme.radius.min,
@ -1017,7 +1021,7 @@ themeSetting.shadow = (parent) => {
object: state.get.current(),
path: 'theme.shadow',
id: 'theme-shadow',
labelText: 'Shadow size',
labelText: message.get('menuContentThemeShadow'),
value: state.get.current().theme.shadow,
defaultValue: state.get.default().theme.shadow,
min: state.get.minMax().theme.shadow.min,
@ -1043,7 +1047,7 @@ themeSetting.shade = (parent) => {
object: state.get.current(),
path: 'theme.shade.opacity',
id: 'theme.shade.opacity',
labelText: 'Shade opacity',
labelText: message.get('menuContentThemeShadeOpacity'),
value: state.get.current().theme.shade.opacity,
defaultValue: state.get.default().theme.shade.opacity,
min: state.get.minMax().theme.shade.opacity.min,
@ -1057,7 +1061,7 @@ themeSetting.shade = (parent) => {
object: state.get.current(),
path: 'theme.shade.blur',
id: 'theme.shade.blur',
labelText: 'Shade blur',
labelText: message.get('menuContentThemeShadeBlurLabel'),
value: state.get.current().theme.shade.blur,
defaultValue: state.get.default().theme.shade.blur,
min: state.get.minMax().theme.shade.blur.min,
@ -1068,7 +1072,7 @@ themeSetting.shade = (parent) => {
}
}),
blurHelper: new Control_helperText({
text: ['Not supported by all browsers.']
text: [message.get('menuContentThemeShadeBlurHelperPara1')]
})
};
@ -1088,7 +1092,7 @@ themeSetting.opacity = (parent) => {
object: state.get.current(),
path: 'theme.opacity.general',
id: 'theme-opacity-general',
labelText: 'All opacity',
labelText: message.get('menuContentThemeOpacityGeneralLabel'),
value: state.get.current().theme.opacity.general,
defaultValue: state.get.default().theme.opacity.general,
min: state.get.minMax().theme.opacity.general.min,
@ -1133,14 +1137,17 @@ themeSetting.opacity = (parent) => {
});
themeSetting.control.opacity.generalHelper = new Control_helperText({
text: ['Change the opacity of Search bar, Bookmarks, Group controls and the Toolbar.', 'Opacity can also be changed when editing individual Bookmarks.']
text: [
message.get('menuContentThemeOpacityGeneralHelperPara1'),
message.get('menuContentThemeOpacityGeneralHelperPara2')
]
});
themeSetting.control.opacity.toolbar = new Control_sliderSlim({
object: state.get.current(),
path: 'theme.toolbar.opacity',
id: 'theme-toolbar-opacity',
labelText: 'Toolbar',
labelText: message.get('menuContentThemeOpacityToolbar'),
value: state.get.current().theme.toolbar.opacity,
defaultValue: state.get.default().theme.toolbar.opacity,
min: state.get.minMax().theme.toolbar.opacity.min,
@ -1160,7 +1167,7 @@ themeSetting.opacity = (parent) => {
object: state.get.current(),
path: 'theme.bookmark.item.opacity',
id: 'theme-bookmark-item-opacity',
labelText: 'Bookmark',
labelText: message.get('menuContentThemeOpacityBookmark'),
value: state.get.current().theme.bookmark.item.opacity,
defaultValue: state.get.default().theme.bookmark.item.opacity,
min: state.get.minMax().theme.bookmark.item.opacity.min,
@ -1182,7 +1189,7 @@ themeSetting.opacity = (parent) => {
object: state.get.current(),
path: 'theme.header.search.opacity',
id: 'theme-header-search-opacity',
labelText: 'Search box',
labelText: message.get('menuContentThemeOpacitySearch'),
value: state.get.current().theme.header.search.opacity,
defaultValue: state.get.default().theme.header.search.opacity,
min: state.get.minMax().theme.header.search.opacity.min,
@ -1203,7 +1210,7 @@ themeSetting.opacity = (parent) => {
object: state.get.current(),
path: 'theme.group.toolbar.opacity',
id: 'theme-group-toolbar-opacity',
labelText: 'Group toolbar',
labelText: message.get('menuContentThemeOpacityGroupToolbar'),
value: state.get.current().theme.group.toolbar.opacity,
defaultValue: state.get.default().theme.group.toolbar.opacity,
min: state.get.minMax().theme.group.toolbar.opacity.min,
@ -1249,6 +1256,8 @@ themeSetting.opacity = (parent) => {
themeSetting.background = (parent) => {
const supportLink = supportSetting.supportPage.get();
const updateVideoPlayState = () => {
if (theme.background.element.video) {
@ -1265,12 +1274,12 @@ themeSetting.background = (parent) => {
type: new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'theme-background-type-theme', labelText: 'Background by Theme', description: 'Use the Background colour defined by the Theme.', value: 'theme' },
{ id: 'theme-background-type-accent', labelText: 'Background by Accent', description: 'Use the Accent colour for the Background.', value: 'accent' },
{ id: 'theme-background-type-color', labelText: 'Custom colour', value: 'color' },
{ id: 'theme-background-type-gradient', labelText: 'Gradient', value: 'gradient' },
{ id: 'theme-background-type-image', labelText: 'Image', value: 'image' },
{ id: 'theme-background-type-video', labelText: 'Video', value: 'video' }
{ id: 'theme-background-type-theme', labelText: message.get('menuContentThemeBackgroundTypeThemeLabel'), description: message.get('menuContentThemeBackgroundTypeThemeDescription'), value: 'theme' },
{ id: 'theme-background-type-accent', labelText: message.get('menuContentThemeBackgroundTypeAccentLabel'), description: message.get('menuContentThemeBackgroundTypeAccentDescription'), value: 'accent' },
{ id: 'theme-background-type-color', labelText: message.get('menuContentThemeBackgroundTypeColor'), value: 'color' },
{ id: 'theme-background-type-gradient', labelText: message.get('menuContentThemeBackgroundTypeGradient'), value: 'gradient' },
{ id: 'theme-background-type-image', labelText: message.get('menuContentThemeBackgroundTypeImage'), value: 'image' },
{ id: 'theme-background-type-video', labelText: message.get('menuContentThemeBackgroundTypeVideo'), value: 'video' }
],
groupName: 'theme-background-type',
path: 'theme.background.type',
@ -1287,7 +1296,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.color',
id: 'theme-background-color',
labelText: 'Background colour',
labelText: message.get('menuContentThemeBackgroundColor'),
defaultValue: state.get.default().theme.background.color.rgb,
minMaxObject: state.get.minMax(),
randomColor: true,
@ -1309,7 +1318,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.gradient.angle',
id: 'theme-background-gradient-angle',
labelText: 'Background gradient angle',
labelText: message.get('menuContentThemeBackgroundGradientAngle'),
value: state.get.current().theme.background.gradient.angle,
defaultValue: state.get.default().theme.background.gradient.angle,
min: state.get.minMax().theme.background.gradient.angle.min,
@ -1324,7 +1333,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.gradient.start',
id: 'theme-background-gradient-start',
labelText: 'Background gradient start',
labelText: message.get('menuContentThemeBackgroundGradientLeft'),
defaultValue: state.get.default().theme.background.gradient.start.rgb,
minMaxObject: state.get.minMax(),
randomColor: true,
@ -1345,7 +1354,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.gradient.end',
id: 'theme-background-gradient-end',
labelText: 'Background gradient end',
labelText: message.get('menuContentThemeBackgroundGradientRight'),
defaultValue: state.get.default().theme.background.gradient.end.rgb,
minMaxObject: state.get.minMax(),
randomColor: true,
@ -1367,8 +1376,8 @@ themeSetting.background = (parent) => {
alert: new Alert({
iconName: 'info',
children: [
node('p:Local images can no longer be used. Images must be hosted somewhere online.|class:small'),
complexNode({ tag: 'p', attr: [{ key: 'class', value: 'small' }], node: [(new Link({ text: 'Why has this changed?', href: supportSetting.link.url + supportSetting.link.page.localBackgroundImage, openNew: true })).link()] })
node(`p:${message.get('menuContentThemeBackgroundImageAlertPara1')}|class:small`),
complexNode({ tag: 'p', attr: [{ key: 'class', value: 'small' }], node: [(new Link({ text: message.get('menuContentThemeBackgroundImageAlertPara2'), href: supportLink.baseUrl + supportLink.page.localBackgroundImage.url, openNew: true })).link()] })
]
}),
url: new Control_textarea({
@ -1376,8 +1385,8 @@ themeSetting.background = (parent) => {
path: 'theme.background.image.url',
id: 'theme-background-image-url',
value: state.get.current().theme.background.image.url,
placeholder: 'https://www.example.com/image.jpg',
labelText: 'URL',
placeholder: message.get('menuContentThemeBackgroundImageUrlPlaceholder'),
labelText: message.get('menuContentThemeBackgroundImageUrlLabel'),
action: () => {
theme.background.image.render();
data.save();
@ -1385,17 +1394,17 @@ themeSetting.background = (parent) => {
}),
urlHelper: new Control_helperText({
text: [
'Add more than one URL separated by spaces or on new lines for a random background image on load.',
'Unsplash can be used for random images, eg:',
'https://source.unsplash.com/random/1920x1080/?night,day,sky',
'Change parameters after .../random/ for more options. Loading times may vary.'
message.get('menuContentThemeBackgroundImageUrlHelperPara1'),
message.get('menuContentThemeBackgroundImageUrlHelperPara2'),
message.get('menuContentThemeBackgroundImageUrlHelperPara3'),
message.get('menuContentThemeBackgroundImageUrlHelperPara4')
]
}),
blur: new Control_sliderSlim({
object: state.get.current(),
path: 'theme.background.image.blur',
id: 'theme-background-image-blur',
labelText: 'Blur',
labelText: message.get('menuContentThemeBackgroundImageBlur'),
value: state.get.current().theme.background.image.blur,
defaultValue: state.get.default().theme.background.image.blur,
min: state.get.minMax().theme.background.image.blur.min,
@ -1409,7 +1418,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.image.grayscale',
id: 'theme-background-image-grayscale',
labelText: 'Grayscale',
labelText: message.get('menuContentThemeBackgroundImageGrayscale'),
value: state.get.current().theme.background.image.grayscale,
defaultValue: state.get.default().theme.background.image.grayscale,
min: state.get.minMax().theme.background.image.grayscale.min,
@ -1423,7 +1432,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.image.scale',
id: 'theme-background-image-scale',
labelText: 'Scale',
labelText: message.get('menuContentThemeBackgroundImageScale'),
value: state.get.current().theme.background.image.scale,
defaultValue: state.get.default().theme.background.image.scale,
min: state.get.minMax().theme.background.image.scale.min,
@ -1437,7 +1446,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.image.accent',
id: 'theme-background-image-accent',
labelText: 'Accent',
labelText: message.get('menuContentThemeBackgroundImageAccent'),
value: state.get.current().theme.background.image.accent,
defaultValue: state.get.default().theme.background.image.accent,
min: state.get.minMax().theme.background.image.accent.min,
@ -1451,7 +1460,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.image.opacity',
id: 'theme-background-image-opacity',
labelText: 'Opacity',
labelText: message.get('menuContentThemeBackgroundImageOpacity'),
value: state.get.current().theme.background.image.opacity,
defaultValue: state.get.default().theme.background.image.opacity,
min: state.get.minMax().theme.background.image.opacity.min,
@ -1466,7 +1475,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.image.vignette.opacity',
id: 'theme-background-image-vignette-opacity',
labelText: 'Vignette',
labelText: message.get('menuContentThemeBackgroundImageVignetteOpacity'),
value: state.get.current().theme.background.image.vignette.opacity,
defaultValue: state.get.default().theme.background.image.vignette.opacity,
min: state.get.minMax().theme.background.image.vignette.opacity.min,
@ -1478,11 +1487,11 @@ themeSetting.background = (parent) => {
}),
range: new Control_sliderDouble({
object: state.get.current(),
labelText: 'Shade start and end',
labelText: message.get('menuContentThemeBackgroundImageVignetteRangeLabel'),
left: {
path: 'theme.background.image.vignette.end',
id: 'theme-background-image-vignette-end',
labelText: 'Shade end',
labelText: message.get('menuContentThemeBackgroundImageVignetteRangeLeft'),
value: state.get.current().theme.background.image.vignette.end,
defaultValue: state.get.default().theme.background.image.vignette.end,
min: state.get.minMax().theme.background.image.vignette.end.min,
@ -1496,7 +1505,7 @@ themeSetting.background = (parent) => {
right: {
path: 'theme.background.image.vignette.start',
id: 'theme-background-image-vignette-start',
labelText: 'Shade start',
labelText: message.get('menuContentThemeBackgroundImageVignetteRangeRight'),
value: state.get.current().theme.background.image.vignette.start,
defaultValue: state.get.default().theme.background.image.vignette.start,
min: state.get.minMax().theme.background.image.vignette.start.min,
@ -1514,8 +1523,8 @@ themeSetting.background = (parent) => {
alert: new Alert({
iconName: 'info',
children: [
node('p:YouTube page URLs <strong>can not</strong> be used.|class:small'),
complexNode({ tag: 'p', attr: [{ key: 'class', value: 'small' }], node: [(new Link({ text: 'How to link to a video file.', href: supportSetting.link.url + supportSetting.link.page.backgroundImageVideo, openNew: true })).link()] })
node(`p:${message.get('menuContentThemeBackgroundVideoAlertPara1')}.|class:small`),
complexNode({ tag: 'p', attr: [{ key: 'class', value: 'small' }], node: [(new Link({ text: message.get('menuContentThemeBackgroundVideoAlertPara2'), href: supportLink.baseUrl + supportLink.page.backgroundImageVideo.url, openNew: true })).link()] })
]
}),
url: new Control_textarea({
@ -1523,8 +1532,8 @@ themeSetting.background = (parent) => {
path: 'theme.background.video.url',
id: 'theme-background-video-url',
value: state.get.current().theme.background.video.url,
placeholder: 'https://www.example.com/video.mp4',
labelText: 'URL',
placeholder: message.get('menuContentThemeBackgroundVideoUrlPlaceholder'),
labelText: message.get('menuContentThemeBackgroundVideoUrlLabel'),
action: () => {
theme.background.video.clear();
theme.background.video.render();
@ -1533,15 +1542,15 @@ themeSetting.background = (parent) => {
}),
urlHelper: new Control_helperText({
text: [
'Background video only supports a direct URL to a video file. Supports MP4 and WebM format.',
'Add more than one URL separated by spaces or on new lines for a random background video on load.'
message.get('menuContentThemeBackgroundVideoUrlHelperPara1'),
message.get('menuContentThemeBackgroundVideoUrlHelperPara2')
]
}),
blur: new Control_sliderSlim({
object: state.get.current(),
path: 'theme.background.video.blur',
id: 'theme-background-video-blur',
labelText: 'Blur',
labelText: message.get('menuContentThemeBackgroundVideoBlur'),
value: state.get.current().theme.background.video.blur,
defaultValue: state.get.default().theme.background.video.blur,
min: state.get.minMax().theme.background.video.blur.min,
@ -1555,7 +1564,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.video.grayscale',
id: 'theme-background-video-grayscale',
labelText: 'Grayscale',
labelText: message.get('menuContentThemeBackgroundVideoGrayscale'),
value: state.get.current().theme.background.video.grayscale,
defaultValue: state.get.default().theme.background.video.grayscale,
min: state.get.minMax().theme.background.video.grayscale.min,
@ -1569,7 +1578,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.video.scale',
id: 'theme-background-video-scale',
labelText: 'Scale',
labelText: message.get('menuContentThemeBackgroundVideoScale'),
value: state.get.current().theme.background.video.scale,
defaultValue: state.get.default().theme.background.video.scale,
min: state.get.minMax().theme.background.video.scale.min,
@ -1583,7 +1592,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.video.accent',
id: 'theme-background-video-accent',
labelText: 'Accent',
labelText: message.get('menuContentThemeBackgroundVideoAccent'),
value: state.get.current().theme.background.video.accent,
defaultValue: state.get.default().theme.background.video.accent,
min: state.get.minMax().theme.background.video.accent.min,
@ -1597,7 +1606,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.video.opacity',
id: 'theme-background-video-opacity',
labelText: 'Opacity',
labelText: message.get('menuContentThemeBackgroundVideoOpacity'),
value: state.get.current().theme.background.video.opacity,
defaultValue: state.get.default().theme.background.video.opacity,
min: state.get.minMax().theme.background.video.opacity.min,
@ -1612,7 +1621,7 @@ themeSetting.background = (parent) => {
object: state.get.current(),
path: 'theme.background.video.vignette.opacity',
id: 'theme-background-video-vignette-opacity',
labelText: 'Vignette',
labelText: message.get('menuContentThemeBackgroundVideoVignetteOpacity'),
value: state.get.current().theme.background.video.vignette.opacity,
defaultValue: state.get.default().theme.background.video.vignette.opacity,
min: state.get.minMax().theme.background.video.vignette.opacity.min,
@ -1624,11 +1633,11 @@ themeSetting.background = (parent) => {
}),
range: new Control_sliderDouble({
object: state.get.current(),
labelText: 'Shade start and end',
labelText: message.get('menuContentThemeBackgroundVideoVignetteRangeLabel'),
left: {
path: 'theme.background.video.vignette.end',
id: 'theme-background-video-vignette-end',
labelText: 'Shade end',
labelText: message.get('menuContentThemeBackgroundVideoVignetteRangeLeft'),
value: state.get.current().theme.background.video.vignette.end,
defaultValue: state.get.default().theme.background.video.vignette.end,
min: state.get.minMax().theme.background.video.vignette.end.min,
@ -1642,7 +1651,7 @@ themeSetting.background = (parent) => {
right: {
path: 'theme.background.video.vignette.start',
id: 'theme-background-video-vignette-start',
labelText: 'Shade start',
labelText: message.get('menuContentThemeBackgroundVideoVignetteRangeRight'),
value: state.get.current().theme.background.video.vignette.start,
defaultValue: state.get.default().theme.background.video.vignette.start,
min: state.get.minMax().theme.background.video.vignette.start.min,
@ -1752,10 +1761,10 @@ themeSetting.layout = (parent) => {
themeSetting.control.layout.color.by = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'theme-layout-by-theme', labelText: 'Transparent', description: 'No background colour behind the Layout.', value: 'theme' },
{ id: 'theme-layout-by-custom', labelText: 'Custom colour', description: 'Use a custom colour behind the Layout.', value: 'custom' }
{ id: 'theme-layout-by-theme', labelText: message.get('menuContentThemeLayoutColorByTransparentLabel'), description: message.get('menuContentThemeLayoutColorByTransparentDescription'), value: 'theme' },
{ id: 'theme-layout-by-custom', labelText: message.get('menuContentThemeLayoutColorByCustomLabel'), description: message.get('menuContentThemeLayoutColorByCustomDescription'), value: 'custom' }
],
label: 'Layout background colour',
label: message.get('menuContentThemeLayoutColorLabel'),
groupName: 'theme-layout-by',
path: 'theme.layout.color.by',
action: () => {
@ -1770,7 +1779,7 @@ themeSetting.layout = (parent) => {
object: state.get.current(),
path: 'theme.layout.color',
id: 'theme-layout-color',
labelText: 'Layout background colour',
labelText: message.get('menuContentThemeLayoutColorColor'),
defaultValue: state.get.default().theme.layout.color.rgb,
minMaxObject: state.get.minMax(),
action: () => {
@ -1790,7 +1799,7 @@ themeSetting.layout = (parent) => {
object: state.get.current(),
path: 'theme.layout.color.opacity',
id: 'theme-layout-color-opacity',
labelText: 'Background opacity',
labelText: message.get('menuContentThemeLayoutColorOpacity'),
value: state.get.current().theme.layout.color.opacity,
defaultValue: state.get.default().theme.layout.color.opacity,
min: state.get.minMax().theme.layout.color.opacity.min,
@ -1807,7 +1816,7 @@ themeSetting.layout = (parent) => {
object: state.get.current(),
path: 'theme.layout.color.blur',
id: 'theme.layout-blur',
labelText: 'Background blur',
labelText: message.get('menuContentThemeLayoutColorBlurLabel'),
value: state.get.current().theme.layout.color.blur,
defaultValue: state.get.default().theme.layout.color.blur,
min: state.get.minMax().theme.layout.color.blur.min,
@ -1821,7 +1830,7 @@ themeSetting.layout = (parent) => {
});
themeSetting.control.layout.color.blurHelper = new Control_helperText({
text: ['Not supported by all browsers.']
text: [message.get('menuContentThemeLayoutColorBlurHelperPara1')]
});
themeSetting.control.layout.color.area = node('div', [
@ -1845,7 +1854,7 @@ themeSetting.layout = (parent) => {
object: state.get.current(),
path: 'theme.layout.divider.size',
id: 'theme.layout-divider-size',
labelText: 'Divider between Header and Bookmark area',
labelText: message.get('menuContentThemeLayoutDivider'),
value: state.get.current().theme.layout.divider.size,
defaultValue: state.get.default().theme.layout.divider.size,
min: state.get.minMax().theme.layout.divider.size.min,
@ -1889,10 +1898,10 @@ themeSetting.header = (parent) => {
themeSetting.control.header.color.by = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'theme-header-by-theme', labelText: 'Transparent', description: 'No background colour behind the Header area.', value: 'theme' },
{ id: 'theme-header-by-custom', labelText: 'Custom colour', description: 'Use a custom colour behind the Header area.', value: 'custom' }
{ id: 'theme-header-by-theme', labelText: message.get('menuContentThemeHeaderColorByTransparentLabel'), description: message.get('menuContentThemeHeaderColorByTransparentDescription'), value: 'theme' },
{ id: 'theme-header-by-custom', labelText: message.get('menuContentThemeHeaderColorByCustomLabel'), description: message.get('menuContentThemeHeaderColorByCustomDescription'), value: 'custom' }
],
label: 'Header background colour',
label: message.get('menuContentThemeHeaderColorLabel'),
groupName: 'theme-header-by',
path: 'theme.header.color.by',
action: () => {
@ -1907,7 +1916,7 @@ themeSetting.header = (parent) => {
object: state.get.current(),
path: 'theme.header.color',
id: 'theme-header-color',
labelText: 'Header area background colour',
labelText: message.get('menuContentThemeHeaderColorColor'),
defaultValue: state.get.default().theme.header.color.rgb,
minMaxObject: state.get.minMax(),
action: () => {
@ -1927,7 +1936,7 @@ themeSetting.header = (parent) => {
object: state.get.current(),
path: 'theme.header.color.opacity',
id: 'theme-header-color-opacity',
labelText: 'Background opacity',
labelText: message.get('menuContentThemeHeaderColorOpacity'),
value: state.get.current().theme.header.color.opacity,
defaultValue: state.get.default().theme.header.color.opacity,
min: state.get.minMax().theme.header.color.opacity.min,
@ -1978,10 +1987,10 @@ themeSetting.bookmark = (parent) => {
themeSetting.control.bookmark.color.by = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'theme-bookmark-by-theme', labelText: 'Transparent', description: 'No background colour behind the Bookmark area.', value: 'theme' },
{ id: 'theme-bookmark-by-custom', labelText: 'Custom colour', description: 'Use a custom colour behind the Bookmark area.', value: 'custom' }
{ id: 'theme-bookmark-by-theme', labelText: message.get('menuContentThemeBookmarkColorByTransparentLabel'), description: message.get('menuContentThemeBookmarkColorByTransparentDescription'), value: 'theme' },
{ id: 'theme-bookmark-by-custom', labelText: message.get('menuContentThemeBookmarkColorByCustomLabel'), description: message.get('menuContentThemeBookmarkColorByCustomDescription'), value: 'custom' }
],
label: 'Bookmark area background colour',
label: message.get('menuContentThemeBookmarkColorLabel'),
groupName: 'theme-bookmark-by',
path: 'theme.bookmark.color.by',
action: () => {
@ -1996,7 +2005,7 @@ themeSetting.bookmark = (parent) => {
object: state.get.current(),
path: 'theme.bookmark.color',
id: 'theme-bookmark-color',
labelText: 'Header area background colour',
labelText: message.get('menuContentThemeBookmarkColorColor'),
defaultValue: state.get.default().theme.bookmark.color.rgb,
minMaxObject: state.get.minMax(),
action: () => {
@ -2016,7 +2025,7 @@ themeSetting.bookmark = (parent) => {
object: state.get.current(),
path: 'theme.bookmark.color.opacity',
id: 'theme-bookmark-color-opacity',
labelText: 'Background opacity',
labelText: message.get('menuContentThemeBookmarkColorOpacity'),
value: state.get.current().theme.bookmark.color.opacity,
defaultValue: state.get.default().theme.bookmark.color.opacity,
min: state.get.minMax().theme.bookmark.color.opacity.min,
@ -2049,7 +2058,7 @@ themeSetting.bookmark = (parent) => {
object: state.get.current(),
path: 'theme.bookmark.item.border',
id: 'theme-bookmark-item-border',
labelText: 'Bookmark border',
labelText: message.get('menuContentThemeBookmarkItemBorderLabel'),
value: state.get.current().theme.bookmark.item.border,
defaultValue: state.get.default().theme.bookmark.item.border,
min: state.get.minMax().theme.bookmark.item.border.min,
@ -2062,12 +2071,15 @@ themeSetting.bookmark = (parent) => {
});
themeSetting.control.bookmark.item.borderHelper = new Control_helperText({
text: ['Bookmark border can also be changed when editing individual Bookmarks.', 'The colour of the Border is defined by the Accent which can also be changed when editing individual Bookmarks.']
text: [
message.get('menuContentThemeBookmarkItemBorderHelperPara1'),
message.get('menuContentThemeBookmarkItemBorderHelperPara2')
]
});
themeSetting.control.bookmark.item.rainbow = {
add: new Button({
text: 'Add unique accent to each Bookmark',
text: message.get('menuContentThemeBookmarkItemRainbowAdd'),
style: ['line'],
func: () => {
theme.accent.rainbow.render();
@ -2075,7 +2087,7 @@ themeSetting.bookmark = (parent) => {
}
}),
remove: new Button({
text: 'Remove all accent overrides',
text: message.get('menuContentThemeBookmarkItemRainbowRemove'),
style: ['line'],
func: () => {
theme.accent.rainbow.clear();
@ -2083,7 +2095,7 @@ themeSetting.bookmark = (parent) => {
}
}),
helper: new Control_helperText({
text: ['Bookmark custom Accent can also be changed when editing individual Bookmarks.']
text: [message.get('menuContentThemeBookmarkItemRainbowHelperPara1')]
})
};

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

@ -1,10 +1,11 @@
import { message } from '../../message';
import { state } from '../../state';
import { data } from '../../data';
import { header } from '../../header';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { Edge } from '../../edge';
import { Control_helperText } from '../../control/helperText';
@ -69,7 +70,7 @@ toolbarSetting.size = (parent) => {
object: state.get.current(),
path: 'toolbar.size',
id: 'toolbar-size',
labelText: 'Toolbar size',
labelText: message.get('menuContentToolbarSize'),
value: state.get.current().toolbar.size,
defaultValue: state.get.default().toolbar.size,
min: state.get.minMax().toolbar.size.min,
@ -99,8 +100,8 @@ toolbarSetting.location = (parent) => {
toolbarSetting.control.location.locationElement = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'toolbar-location-corner', labelText: 'In a corner', value: 'corner' },
{ id: 'toolbar-location-header', labelText: 'In the Header', value: 'header' }
{ id: 'toolbar-location-corner', labelText: message.get('menuContentToolbarLocationCorner'), value: 'corner' },
{ id: 'toolbar-location-header', labelText: message.get('menuContentToolbarLocationHeader'), value: 'header' }
],
groupName: 'toolbar-location',
path: 'toolbar.location',
@ -110,7 +111,6 @@ toolbarSetting.location = (parent) => {
toolbar.current.update.style();
header.item.mod.order();
header.item.clear();
header.item.clear();
header.item.render();
toolbar.bar.render();
layout.area.assemble();
@ -133,23 +133,23 @@ toolbarSetting.location = (parent) => {
});
toolbarSetting.control.location.locationHelper = new Control_helperText({
text: ['Position the Toolbar inside the Header or in a corner of the window.']
text: [message.get('menuContentToolbarLocationHelperPara1')]
});
toolbarSetting.control.location.newLine = new Control_checkbox({
object: state.get.current(),
path: 'toolbar.newLine',
id: 'header-newLine',
labelText: 'New line',
description: 'Force on to a new line and seperate from other Header items.',
action: function () {
labelText: message.get('menuContentToolbarLocationNewLineLabel'),
description: message.get('menuContentToolbarLocationNewLineDescription'),
action: function() {
applyCSSState('toolbar.newLine');
data.save();
}
});
toolbarSetting.control.location.newLineHelper = new Control_helperText({
text: ['Only available when the Toolbar is positioned inside the Header.']
text: [message.get('menuContentToolbarLocationNewLineHelperPara1')]
});
parent.appendChild(
@ -169,12 +169,12 @@ toolbarSetting.position = (parent) => {
toolbarSetting.control.positionElement = new Control_radioGrid({
object: state.get.current(),
radioGroup: [
{ id: 'toolbar-position-top-left', labelText: 'Top left', value: 'top-left', position: 1 },
{ id: 'toolbar-position-top-right', labelText: 'Top right', value: 'top-right', position: 2 },
{ id: 'toolbar-position-bottom-left', labelText: 'Bottom left', value: 'bottom-left', position: 3 },
{ id: 'toolbar-position-bottom-right', labelText: 'Bottom right', value: 'bottom-right', position: 4 }
{ id: 'toolbar-position-top-left', labelText: message.get('menuContentToolbarPositionTopLeft'), value: 'top-left', position: 1 },
{ id: 'toolbar-position-top-right', labelText: message.get('menuContentToolbarPositionTopRight'), value: 'top-right', position: 2 },
{ id: 'toolbar-position-bottom-left', labelText: message.get('menuContentToolbarPositionBottomLeft'), value: 'bottom-left', position: 3 },
{ id: 'toolbar-position-bottom-right', labelText: message.get('menuContentToolbarPositionBottomRight'), value: 'bottom-right', position: 4 }
],
label: 'Toolbar position',
label: message.get('menuContentToolbarPositionLabel'),
groupName: 'toolbar-position',
path: 'toolbar.position',
gridSize: '2x2',
@ -187,11 +187,11 @@ toolbarSetting.position = (parent) => {
});
toolbarSetting.control.positionElementHelper1 = new Control_helperText({
text: ['Position the Toolbar in one of the four corners of the window.']
text: [message.get('menuContentToolbarPositionHelper1Para1')]
});
toolbarSetting.control.positionElementHelper2 = new Control_helperText({
text: ['Only available when the Toolbar is positioned in a corner.']
text: [message.get('menuContentToolbarPositionHelper2Para1')]
});
parent.appendChild(
@ -210,7 +210,7 @@ toolbarSetting.controls = (parent) => {
object: state.get.current(),
id: 'toolbar-accent-show',
path: 'toolbar.accent.show',
labelText: 'Show Accent control',
labelText: message.get('menuContentToolbarControlsAccent'),
action: () => {
toolbar.current.update.control();
data.save();
@ -221,7 +221,7 @@ toolbarSetting.controls = (parent) => {
object: state.get.current(),
id: 'toolbar-add-show',
path: 'toolbar.add.show',
labelText: 'Show Add control',
labelText: message.get('menuContentToolbarControlsAdd'),
action: () => {
toolbar.current.update.control();
data.save();
@ -232,7 +232,7 @@ toolbarSetting.controls = (parent) => {
object: state.get.current(),
id: 'toolbar-edit-show',
path: 'toolbar.edit.show',
labelText: 'Show Edit control',
labelText: message.get('menuContentToolbarControlsEdit'),
action: () => {
toolbar.current.update.control();
data.save();

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

@ -1,10 +1,13 @@
import { message } from '../message';
import { Button } from '../button';
import { node } from '../../utility/node';
import { uppercaseFirstLetter } from '../../utility/uppercaseFirstLetter';
import './index.css';
export const MenuNav = function ({
export const MenuNav = function({
navData = {},
action = false
} = {}) {
@ -116,6 +119,8 @@ export const MenuNav = function ({
navData.forEach((item) => {
const navTop = item.name;
const navItem = {
topLevel: false,
subLevel: false,
@ -123,7 +128,7 @@ export const MenuNav = function ({
};
const navButton = new Button({
text: item.name,
text: message.get(`menuNav${uppercaseFirstLetter(navTop)}Label`),
style: ['link'],
block: true,
classList: ['menu-nav-tab'],
@ -148,7 +153,7 @@ export const MenuNav = function ({
item.sub.forEach((item) => {
const subLevelLink = node('a:' + item + '|href:#menu-content-item-' + this.makeId(item) + ',class:menu-nav-sub button button-link button-small,tabindex:1');
const subLevelLink = node('a:' + message.get(`menuNav${uppercaseFirstLetter(navTop)}SubNav${uppercaseFirstLetter(item)}`) + '|href:#menu-content-item-' + this.makeId(item) + ',class:menu-nav-sub button button-link button-small,tabindex:1');
subNav.appendChild(subLevelLink);

134
src/component/message/index.js Normal file
View File

@ -0,0 +1,134 @@
import { APP_NAME } from '../../constant';
import { state } from '../state';
import { browserDetect } from '../browserDetect';
import { default as bn } from '../../locale/bn/messages.json';
import { default as de } from '../../locale/de/messages.json';
import { default as en_GB } from '../../locale/en_GB/messages.json';
import { default as en_US } from '../../locale/en_US/messages.json';
import { default as es } from '../../locale/es/messages.json';
import { default as fil } from '../../locale/fil/messages.json';
import { default as fr } from '../../locale/fr/messages.json';
import { default as gu } from '../../locale/gu/messages.json';
import { default as hi } from '../../locale/hi/messages.json';
import { default as id } from '../../locale/id/messages.json';
import { default as it } from '../../locale/it/messages.json';
import { default as ja } from '../../locale/ja/messages.json';
import { default as ms } from '../../locale/ms/messages.json';
import { default as pt } from '../../locale/pt/messages.json';
import { default as ru } from '../../locale/ru/messages.json';
import { default as uk } from '../../locale/uk/messages.json';
import { default as vi } from '../../locale/vi/messages.json';
const message = {};
message.language = {
pack: { bn, de, en_GB, en_US, es, fil, fr, gu, hi, id, it, ja, ms, pt, ru, uk, vi }
};
message.language.list = () => {
return [
{ code: 'system', name: message.get('menuContentLanguageSystem') }, // system
{ name: '–', disabled: true },
{ code: 'bn', name: 'বাংলা [bn]' }, // Bengali
{ code: 'de', name: 'Deutsch [de]' }, // German
{ code: 'en_GB', name: 'English [en] (GB)' }, // English GB
{ code: 'en_US', name: 'English [en] (US)' }, // English USA
{ code: 'es', name: 'Español [es]' }, // Spanish
{ code: 'fil', name: 'Filipino [fi]' }, // Filipino
{ code: 'fr', name: 'Français [fr]' }, // French
{ code: 'gu', name: 'ગુજરાતી [gu]' }, // Gujarati
{ code: 'hi', name: 'हिंदी [hi]' }, // Hindi
{ code: 'id', name: 'Indonesia [id]' }, // Indonesian
{ code: 'it', name: 'Italiano [it]' }, // Italian
{ code: 'ja', name: '日本語 [ja]' }, // Japanese
{ code: 'ms', name: 'Melayu [ms]' }, // Malay
{ code: 'pt', name: 'Português [pt]' }, // Portuguese
{ code: 'ru', name: 'Pусский [ru]' }, // Russian
{ code: 'uk', name: 'український [uk]' }, // Ukrainian
{ code: 'vi', name: 'англійська [vi]' } // Vietnamese
];
};
message.language.name = () => message.language.list().map(item => item.name);
message.language.code = () => message.language.list().map(item => item.code);
message.get = (stringId) => {
let string;
switch (state.get.current().language) {
// use system language
case 'system':
if (browserDetect().chrome && typeof chrome != 'undefined') {
// if browser is chrome
if ('i18n' in chrome) {
// if installed as extension
string = chrome.i18n.getMessage(stringId);
} else {
string = message.language.pack.en_GB[stringId].message;
}
} else if (browserDetect().firefox && typeof browser != 'undefined') {
// if browser is firefox
if ('i18n' in browser) {
// if installed as addon
string = browser.i18n.getMessage(stringId);
} else {
string = message.language.pack.en_GB[stringId].message;
}
} else {
string = message.language.pack.en_GB[stringId].message;
}
break;
// use manually selected language
default:
if (stringId in message.language.pack[state.get.current().language]) {
// string found in chosen language
string = message.language.pack[state.get.current().language][stringId].message;
} else {
// or use default language
string = message.language.pack.en_GB[stringId].message;
}
break;
}
if (string.indexOf('{appName}') > -1) {
string = string.replaceAll('{appName}', APP_NAME);
}
return string;
};
export { message };

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

@ -3,6 +3,7 @@ const state = {};
state.current = {};
state.default = {
language: 'system',
layout: {
area: {
header: { width: 100, justify: 'center' },
@ -269,6 +270,7 @@ state.set = {
restore: {
setup: (dataToRestore) => {
state.current.language = dataToRestore.state.language;
state.current.layout = dataToRestore.state.layout;
state.current.header = dataToRestore.state.header;
state.current.bookmark = dataToRestore.state.bookmark;

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

@ -1,4 +1,3 @@
import { acrid } from './acrid';
import { aerial } from './aerial';
import { app } from './app';

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

@ -1,3 +1,5 @@
import { message } from '../message';
import { state } from '../state';
import { menu } from '../menu';
import { data } from '../data';
@ -19,7 +21,7 @@ import { applyCSSState } from '../../utility/applyCSSState';
import './index.css';
export const ToolbarControl = function () {
export const ToolbarControl = function() {
this.element = {
toolbar: node('div|class:toolbar'),
@ -35,7 +37,7 @@ export const ToolbarControl = function () {
path: 'theme.accent',
id: 'theme-accent-quick',
type: 'color',
labelText: 'Accent colour',
labelText: message.get('toolbarAccent'),
srOnly: true,
inputButtonStyle: ['dot', 'line'],
inputButtonClassList: ['toolbar-item'],
@ -53,18 +55,20 @@ export const ToolbarControl = function () {
}
}),
add: new Dropdown({
text: 'Add',
title: message.get('toolbarAddLabel'),
text: message.get('toolbarAddLabel'),
buttonStyle: ['line'],
buttonClassList: ['toolbar-item'],
srOnly: true,
iconName: 'add',
menuItem: [
{ text: 'New Group', iconName: 'addGroup', action: () => { group.add.render(); } },
{ text: 'New Bookmark', iconName: 'addBookmark', action: () => { bookmark.add.render(); } }
{ text: message.get('toolbarAddGroup'), iconName: 'addGroup', action: () => { group.add.render(); } },
{ text: message.get('toolbarAddBookmark'), iconName: 'addBookmark', action: () => { bookmark.add.render(); } }
]
}),
edit: new Button({
text: 'Enter edit bookmark mode',
title: message.get('toolbarEdit'),
text: message.get('toolbarEdit'),
srOnly: true,
iconName: 'edit',
classList: ['toolbar-item'],
@ -78,7 +82,8 @@ export const ToolbarControl = function () {
}
}),
setting: new Button({
text: 'Open settings menu',
title: message.get('toolbarSetting'),
text: message.get('toolbarSetting'),
srOnly: true,
iconName: 'settings',
classList: ['toolbar-item'],

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

@ -570,6 +570,7 @@ update.mod['7.0.0'] = function(data) {
delete data.state.dropdown;
return data;
};
update.mod['7.1.0'] = function(data) {
@ -604,6 +605,7 @@ update.mod['7.1.0'] = function(data) {
});
return data;
};
update.mod['7.4.0'] = function(data) {
@ -614,6 +616,15 @@ update.mod['7.4.0'] = function(data) {
};
return data;
};
update.mod['7.5.0'] = function(data) {
data.state.language = { system: true, selected: 'en_GB' };
return data;
};
update.run = (data) => {

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

@ -1,6 +1,6 @@
export const version = {};
version.number = '7.4.0';
version.number = '7.5.0';
version.name = 'Delightful Komodo Dragon';

1
src/index.js
View File

@ -1,4 +1,5 @@
import { component } from './component';
import { APP_NAME } from './constant';
console.log(APP_NAME + ' version:', component.version.number, component.version.name);

2778
src/locale/bn/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/de/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/en_GB/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/en_US/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/es/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/fil/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/fr/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/gu/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/hi/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/id/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/it/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/ja/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/ms/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/pt/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/ru/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/uk/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

2778
src/locale/vi/messages.json Normal file
View File

File diff suppressed because it is too large Load Diff

9
src/manifest.json
View File

@ -1,9 +1,10 @@
{
"name": "nightTab",
"short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "7.4.0",
"name": "__MSG_appName__",
"short_name": "__MSG_appShortName__",
"description": "__MSG_appDescription__",
"version": "7.5.0",
"manifest_version": 2,
"default_locale": "en_GB",
"chrome_url_overrides": {
"newtab": "index.html"
},

5
src/utility/uppercaseFirstLetter.js Normal file
View File

@ -0,0 +1,5 @@
export const uppercaseFirstLetter = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
};

3
webpack.common.js
View File

@ -52,6 +52,9 @@ module.exports = {
}, {
from: './src/icon/',
to: './icon/'
}, {
from: './src/locale',
to: './_locales'
}, {
from: './src/initialBackground.js',
to: './initialBackground.js'

2
webpack.prod.js
View File

@ -7,7 +7,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const version = require('./src/manifest.json').version;
const name = require('./src/manifest.json').name;
const name = require('./src/locale/en_GB/messages.json').appName.message;
module.exports = merge(common, {
mode: 'production',