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

improve link module

Browse Source
This commit is contained in:
zombieFox 2021-08-27 13:11:12 +01:00
parent f562cd495d
commit 23d0fbb106
14 changed files with 128 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/button/index.css
View File

@ -191,6 +191,10 @@ button .icon,
font-size: 1.2em;
}
.button-extra-large {
font-size: 1.5em;
}
.button-block {
display: flex;
width: 100%;

3
src/component/index.js
View File

@ -10,6 +10,7 @@ import { Shade } from './shade';
import { Suggest } from './suggest';
import { Tab } from './tab';
import { ToolbarControl } from './toolbarControl';
import { Link } from './link';
import { Control_checkbox } from './control/checkbox';
import { Control_color } from './control/color';
@ -33,7 +34,6 @@ import { fontawesome } from './fontawesome';
import { icon } from './icon';
import { keyboard } from './keyboard';
import { layout } from './layout';
import { link } from './link';
import { logo } from './logo';
import { menu } from './menu';
import { pageLock } from './pageLock';
@ -57,7 +57,6 @@ export const component = {
icon,
keyboard,
layout,
link,
logo,
menu,
pageLock,

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

@ -2,10 +2,9 @@ import { icon } from '../icon';
import { form } from '../form';
import { node } from '../../utility/node';
import { complexNode } from '../../utility/complexNode';
const link = {};
link.render = ({
export const Link = function({
text = 'Link',
href = '#',
iconName = false,
@ -16,86 +15,102 @@ link.render = ({
title = false,
openNew = false,
classList = [],
func = false
} = {}) => {
action = false
} = {}) {
const linkElement = node('a|tabindex:1');
this.element = {
link: complexNode({
tag: 'a',
attr: [{ key: 'href', value: href }]
})
};
if (linkButton) {
linkElement.classList.add('button');
this.assemble = () => {
if (style.length > 0) {
style.forEach((item, i) => {
switch (item) {
case 'link':
linkElement.classList.add('button-link');
break;
if (linkButton) {
case 'line':
linkElement.classList.add('button-line');
break;
this.element.link.classList.add('button');
if (style.length > 0) {
style.forEach((item, i) => {
switch (item) {
case 'link':
this.element.link.classList.add('button-link');
break;
case 'line':
this.element.link.classList.add('button-line');
break;
case 'ring':
this.element.link.classList.add('button-ring');
break;
};
});
};
case 'ring':
linkElement.classList.add('button-ring');
break;
};
});
};
};
if (image) {
const linkImage = node('img|src:' + image + ',class:mr-2');
linkElement.appendChild(linkImage);
};
if (text) {
const linkText = node('span:' + text);
if (linkButton) {
linkText.classList.add('button-text');
};
linkElement.appendChild(linkText);
};
if (iconName) {
switch (iconPosition) {
case 'left':
linkElement.prepend(icon.render(iconName));
break;
this.element.link.appendChild(linkText);
if (iconName) {
switch (iconPosition) {
case 'left':
this.element.link.prepend(icon.render(iconName));
break;
case 'right':
this.element.link.append(icon.render(iconName));
break;
};
case 'right':
linkElement.append(icon.render(iconName));
break;
};
if (openNew) {
this.element.link.setAttribute('target', '_blank');
};
if (title) {
this.element.link.setAttribute('title', title);
};
if (classList.length > 0) {
classList.forEach((item, i) => {
this.element.link.classList.add(item);
});
};
};
if (href) {
linkElement.setAttribute('href', href);
this.bind = () => {
if (action) {
this.element.link.addEventListener('click', (event) => {
action();
});
};
};
if (openNew) {
linkElement.setAttribute('target', '_blank');
this.link = () => {
return this.element.link;
};
if (title) {
linkElement.setAttribute('title', title);
};
this.assemble();
if (classList.length > 0) {
classList.forEach((item, i) => {
linkElement.classList.add(item);
});
};
if (func) {
linkElement.addEventListener('click', (event) => {
func();
});
};
return linkElement;
this.bind();
};
export { link };

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

@ -7,7 +7,6 @@ import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { link } from '../../link';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { appName } from '../../appName';
@ -18,6 +17,7 @@ import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
@ -44,6 +44,10 @@ const appSetting = {};
appSetting[appName.toLowerCase()] = (parent) => {
const githubLink = new Link({ text: 'GitHub.', href: 'https://github.com/zombieFox/' + appName, openNew: true });
const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: '://github.com/zombieFox/' + appName + '/blob/master/license', openNew: true });
parent.appendChild(
node('div', [
node('div|class:version', [
@ -55,8 +59,8 @@ appSetting[appName.toLowerCase()] = (parent) => {
])
]),
node('hr'),
complexNode({ tag: 'p', text: 'Project repository on ', node: [link.render({ text: 'GitHub.', href: 'https://github.com/zombieFox/' + appName, openNew: true })] }),
complexNode({ tag: 'p', text: appName + ' uses the <a tabindex="1" href="https://github.com/zombieFox/' + appName + '/blob/master/license" target="_blank">GNU General Public License v3.0</a>.' })
complexNode({ tag: 'p', text: `This project can be found on ${githubLink.link().outerHTML}` }),
complexNode({ tag: 'p', text: `${appName} uses the ${licenseLink.link().outerHTML}` })
])
);

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

@ -7,7 +7,6 @@ import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { link } from '../../link';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { groupAndBookmark } from '../../groupAndBookmark';
@ -18,6 +17,7 @@ import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';

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

@ -7,7 +7,6 @@ import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { link } from '../../link';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { appName } from '../../appName';
@ -18,6 +17,7 @@ import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
@ -51,17 +51,16 @@ coffeeSetting.coffee = (parent) => {
text: appName + ' is free, appreciation is welcome in the form of coffee!'
}),
form.wrap({
children: [
link.render({
text: 'Buy me a coffee',
href: 'https://www.buymeacoffee.com/zombieFox',
iconName: 'coffee',
iconPosition: 'left',
linkButton: true,
style: ['line'],
classList: ['button-line', 'button-large', 'px-4', 'py-3']
})
]
children: [(new Link({
text: 'Buy me a coffee',
href: 'https://www.buymeacoffee.com/zombieFox',
iconName: 'coffee',
iconPosition: 'left',
linkButton: true,
openNew: true,
style: ['line'],
classList: ['button-line', 'button-extra-large']
})).link()]
})
])
);

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

@ -7,7 +7,6 @@ import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { link } from '../../link';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { appName } from '../../appName';
@ -19,6 +18,7 @@ import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { DropFile } from '../../dropFile';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
@ -148,7 +148,7 @@ dataSetting.clear = (parent) => {
iconName: 'warning',
children: [
node('p:You will lose Bookmarks by clearing all data.|class:small'),
node('p:Have you <a href="#menu-content-item-backup">backed up your data?</a>|class:small')
node(`p:Have you ${(new Link({ text:'backed up your data?', href: '#menu-content-item-backup'})).link().outerHTML}|class:small`)
]
});

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

@ -8,7 +8,6 @@ import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { link } from '../../link';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { groupAndBookmark } from '../../groupAndBookmark';
@ -19,6 +18,7 @@ import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';

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

@ -8,7 +8,6 @@ import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { link } from '../../link';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { groupAndBookmark } from '../../groupAndBookmark';
@ -19,6 +18,7 @@ import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';

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

@ -7,7 +7,6 @@ import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { link } from '../../link';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { searchEnginePreset } from '../../searchEnginePreset';
@ -19,6 +18,7 @@ import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
@ -434,7 +434,7 @@ headerSetting.area = (parent) => {
});
headerSetting.area.alignmentHelper = new Control_helperText({
text: ['Effects may not be visible if the <a href="#menu-content-item-search">Search box size</a> size is set to Auto and grows to fill available space.']
text: [`Effects may not be visible if the ${(new Link({ text:'Search box size', href: '#menu-content-item-search'})).link().outerHTML} size is set to Auto and grows to fill available space.`]
});
parent.appendChild(

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

@ -7,7 +7,6 @@ import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { link } from '../../link';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
@ -17,6 +16,7 @@ import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
@ -218,7 +218,7 @@ layoutSetting.area = (parent) => {
text: ['Effects may not be visible if the Header Area is full width.']
}),
justifyHelper2: new Control_helperText({
text: ['Only available when <a href="#layout-direction-horizontal">Layout Direction</a> is Vertical and Header items are shown.']
text: [`Only available when ${(new Link({ text:'Layout Direction', href: '#menu-content-item-alignment'})).link().outerHTML} is Vertical and Header items are shown.`]
})
};
@ -264,7 +264,7 @@ layoutSetting.area = (parent) => {
text: ['Effects may not be visible if the Bookmark Area is full width.']
}),
justifyHelper2: new Control_helperText({
text: ['Only available when <a href="#layout-direction-horizontal">Layout Direction</a> is Vertical and Bookmarks are shown.']
text: [`Only available when ${(new Link({ text:'Layout Direction', href: '#menu-content-item-alignment'})).link().outerHTML} is Vertical and Header items are shown.`]
})
};

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

@ -7,7 +7,6 @@ import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { link } from '../../link';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { appName } from '../../appName';
@ -18,6 +17,7 @@ import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
@ -66,9 +66,13 @@ supportSetting.support = (parent) => {
for (var key in supportSetting.link.page) {
list.appendChild(node('li', [
link.render({ text: supportSetting.link.page[key].replace(/-/g, ' '), href: supportSetting.link.url + supportSetting.link.page[key], openNew: true })
]));
const supportLink = new Link({
text: supportSetting.link.page[key].replace(/-/g, ' '),
href: supportSetting.link.url + supportSetting.link.page[key],
openNew: true
});
list.appendChild(node('li', [supportLink.link()]));
};
@ -82,7 +86,10 @@ supportSetting.support = (parent) => {
node('div', [
makeLinks(),
node('hr'),
complexNode({ tag: 'p', text: 'For more support or feedback, submit an <a tabindex="1" href="https://github.com/zombieFox/' + appName + '/issues" target="_blank">Issue</a> or check the <a tabindex="1" href="https://github.com/zombieFox/' + appName + '/wiki" target="_blank">Wiki</a>.' })
complexNode({
tag: 'p',
text: `For more support or feedback, submit an ${(new Link({ text:'Issue', href: `https://github.com/zombieFox/${appName}/issues`, openNew: true })).link().outerHTML}. or check the ${(new Link({ text:'Wiki', href: `https://github.com/zombieFox/${appName}/wiki`, openNew: true })).link().outerHTML}.`
})
])
);

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

@ -8,7 +8,6 @@ import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { link } from '../../link';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { themePreset } from '../../themePreset';
@ -26,6 +25,7 @@ import { Edge } from '../../edge';
import { PresetThemeTile } from '../../presetThemeTile';
import { AccentPresetButton } from '../../accentPresetButton';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
@ -734,7 +734,7 @@ themeSetting.font = (parent) => {
}),
nameHelper: new Control_helperText({
text: [
'Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Clock, Date, Group names and Bookmark Letters.',
`Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Clock, Date, Group names and Bookmark Letters.`,
'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"',
'Clear the field to use the default font "Fjalla One".'
]
@ -821,7 +821,7 @@ themeSetting.font = (parent) => {
}),
nameHelper: new Control_helperText({
text: [
'Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Bookmark name, URL and form elements.',
`Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Bookmark name, URL and form elements.`,
'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"',
'Clear the field to use the default font "Open Sans".'
]
@ -1329,7 +1329,7 @@ themeSetting.background = (parent) => {
iconName: 'info',
children: [
node('p:Uploading Background images is no longer supported.|class:small'),
complexNode({ tag: 'p', text: `<a href="${supportSetting.link.url + supportSetting.link.page.localBackgroundImage}" target="_blank">Why has this changed?</a>`, attr: [{ key: 'class', value: '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()] })
]
}),
url: new Control_textarea({
@ -1498,7 +1498,7 @@ themeSetting.background = (parent) => {
iconName: 'info',
children: [
node('p:YouTube page URLs <strong>can not</strong> be used.|class:small'),
complexNode({ tag: 'p', text: `<a href="${supportSetting.link.url + supportSetting.link.page.backgroundImageVideo}" target="_blank">How to link to a video file.</a>`, attr: [{ key: 'class', value: '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()] })
]
}),
url: new Control_textarea({

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

@ -7,7 +7,6 @@ import { version } from '../../version';
import { menu } from '../../menu';
import { icon } from '../../icon';
import { logo } from '../../logo';
import { link } from '../../link';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
@ -17,6 +16,7 @@ import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { Alert } from '../../alert';
import { Link } from '../../link';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';