improve node text content

This commit is contained in:
zombieFox
2021-09-15 23:09:13 +01:00
parent 2fced6393c
commit d87b87d19e
10 changed files with 64 additions and 22 deletions

View File

@ -3,7 +3,6 @@ import { icon } from '../icon';
import * as form from '../form'; import * as form from '../form';
import { node } from '../../utility/node'; import { node } from '../../utility/node';
import { complexNode } from '../../utility/complexNode';
import './index.css'; import './index.css';

View File

@ -801,7 +801,7 @@ export const BookmarkForm = function({
form.wrap({ form.wrap({
children: [ children: [
node('h2:Address|class:mb-2'), node('h2:Address|class:mb-2'),
complexNode({ tag: 'p', text: 'Be sure to use the full URL and include <strong>"https://..."</strong>', attr: [{ key: 'class', value: 'mb-5' }] }) complexNode({ tag: 'p', text: 'Be sure to use the full URL and include <strong>"https://..."</strong>', complexText: true, attr: [{ key: 'class', value: 'mb-5' }] })
] ]
}), }),
form.wrap({ form.wrap({

View File

@ -14,7 +14,8 @@ import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString'; import { isValidString } from '../../../utility/isValidString';
export const Control_helperText = function({ export const Control_helperText = function({
text = [] text = [],
complexText= false
} = {}) { } = {}) {
this.para = []; this.para = [];
@ -22,7 +23,8 @@ export const Control_helperText = function({
text.forEach((item, i) => { text.forEach((item, i) => {
this.para.push(form.helper({ this.para.push(form.helper({
tag: 'p', tag: 'p',
text: item text: item,
complexText: complexText
})); }));
}); });
@ -48,4 +50,4 @@ export const Control_helperText = function({
}); });
}; };
}; };

View File

@ -5,17 +5,27 @@ import './index.css';
export const helper = function({ export const helper = function({
text = 'text', text = 'text',
complexText = false,
classList = [] classList = []
} = {}) { } = {}) {
const helper = complexNode({ const helper = node('p|class:form-helper-item');
tag: 'p',
text: text, if (text) {
attr: [{
key: 'class', if (complexText) {
value: 'form-helper-item'
}] helper.innerHTML = text;
});
} else {
let textNode = document.createTextNode(text);
helper.appendChild(textNode);
};
};
if (classList.length > 0) { if (classList.length > 0) {
@ -27,4 +37,4 @@ export const helper = function({
return helper; return helper;
}; };

View File

@ -50,6 +50,18 @@ appSetting[appName.toLowerCase()] = (parent) => {
const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: 'https://github.com/zombieFox/' + appName + '/blob/master/license', openNew: true }); const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: 'https://github.com/zombieFox/' + appName + '/blob/master/license', openNew: true });
const para1 = node('p');
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 = `${appName} uses the ${licenseLink.link().outerHTML}`;
parent.appendChild( parent.appendChild(
node('div', [ node('div', [
node('div|class:version', [ node('div|class:version', [
@ -61,9 +73,9 @@ appSetting[appName.toLowerCase()] = (parent) => {
]) ])
]), ]),
node('hr'), node('hr'),
complexNode({ tag: 'p', text: `This project can be found on ${githubLink.link().outerHTML}` }), para1,
complexNode({ tag: 'p', text: `Share your setup with the ${redditLink.link().outerHTML}` }), para2,
complexNode({ tag: 'p', text: `${appName} uses the ${licenseLink.link().outerHTML}` }), para3
]) ])
); );

View File

@ -434,6 +434,7 @@ headerSetting.area = (parent) => {
}); });
headerSetting.area.alignmentHelper = new Control_helperText({ headerSetting.area.alignmentHelper = new Control_helperText({
complexText: true,
text: [`Effects may not be visible if the ${(new Link({ text:'Search box size', href: '#menu-content-item-search'})).link().outerHTML} size is set to Auto and grows to fill available space.`] text: [`Effects may not be visible if the ${(new Link({ text:'Search box size', href: '#menu-content-item-search'})).link().outerHTML} size is set to Auto and grows to fill available space.`]
}); });

View File

@ -218,6 +218,7 @@ layoutSetting.area = (parent) => {
text: ['Effects may not be visible if the Header Area is full width.'] text: ['Effects may not be visible if the Header Area is full width.']
}), }),
justifyHelper2: new Control_helperText({ justifyHelper2: new Control_helperText({
complexText: true,
text: [`Only available when ${(new Link({ text:'Layout Direction', href: '#menu-content-item-alignment'})).link().outerHTML} is Vertical and Header items are shown.`] text: [`Only available when ${(new Link({ text:'Layout Direction', href: '#menu-content-item-alignment'})).link().outerHTML} is Vertical and Header items are shown.`]
}) })
}; };
@ -264,6 +265,7 @@ layoutSetting.area = (parent) => {
text: ['Effects may not be visible if the Bookmark Area is full width.'] text: ['Effects may not be visible if the Bookmark Area is full width.']
}), }),
justifyHelper2: new Control_helperText({ justifyHelper2: new Control_helperText({
complexText: true,
text: [`Only available when ${(new Link({ text:'Layout Direction', href: '#menu-content-item-alignment'})).link().outerHTML} is Vertical and Header items are shown.`] text: [`Only available when ${(new Link({ text:'Layout Direction', href: '#menu-content-item-alignment'})).link().outerHTML} is Vertical and Header items are shown.`]
}) })
}; };

View File

@ -85,14 +85,15 @@ supportSetting.support = (parent) => {
}; };
const para = node('p');
para.innerHTML = `For more support or feedback, submit an ${(new Link({ text:'Issue', href: `https://github.com/zombieFox/${appName}/issues`, openNew: true })).link().outerHTML} or check the ${(new Link({ text:'Wiki', href: `https://github.com/zombieFox/${appName}/wiki`, openNew: true })).link().outerHTML}.`;
parent.appendChild( parent.appendChild(
node('div', [ node('div', [
makeLinks(), makeLinks(),
node('hr'), node('hr'),
complexNode({ para
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}.`
})
]) ])
); );

View File

@ -790,6 +790,7 @@ themeSetting.font = (parent) => {
} }
}), }),
nameHelper: new Control_helperText({ nameHelper: new Control_helperText({
complexText: true,
text: [ text: [
`Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Clock, Date, Group names and Bookmark Letters.`, `Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Clock, Date, Group names and Bookmark Letters.`,
'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"', 'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"',
@ -877,6 +878,7 @@ themeSetting.font = (parent) => {
} }
}), }),
nameHelper: new Control_helperText({ nameHelper: new Control_helperText({
complexText: true,
text: [ text: [
`Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Bookmark name, URL and form elements.`, `Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Bookmark name, URL and form elements.`,
'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"', 'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"',

View File

@ -1,6 +1,7 @@
export const complexNode = ({ export const complexNode = ({
tag = 'div', tag = 'div',
text = false, text = false,
complexText = false,
attr = [], attr = [],
node = [] node = []
} = {}) => { } = {}) => {
@ -8,7 +9,19 @@ export const complexNode = ({
const element = document.createElement(tag); const element = document.createElement(tag);
if (text) { if (text) {
element.innerHTML = text;
if (complexText) {
element.innerHTML = text;
} else {
let textNode = document.createTextNode(text);
element.appendChild(textNode);
};
}; };
if (attr.length > 0) { if (attr.length > 0) {