mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-06-30 14:21:05 +02:00
improve node text content
This commit is contained in:
@ -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';
|
||||||
|
|
||||||
|
@ -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({
|
||||||
|
@ -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({
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@ -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;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@ -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
|
||||||
])
|
])
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -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.`]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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.`]
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
@ -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}.`
|
|
||||||
})
|
|
||||||
])
|
])
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -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"',
|
||||||
|
@ -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) {
|
||||||
|
Reference in New Issue
Block a user