diff --git a/src/component/alert/index.js b/src/component/alert/index.js
index dbc42254..a30c515b 100644
--- a/src/component/alert/index.js
+++ b/src/component/alert/index.js
@@ -3,7 +3,6 @@ import { icon } from '../icon';
import * as form from '../form';
import { node } from '../../utility/node';
-import { complexNode } from '../../utility/complexNode';
import './index.css';
diff --git a/src/component/bookmarkForm/index.js b/src/component/bookmarkForm/index.js
index 5f5ef82a..e7e6eaa3 100644
--- a/src/component/bookmarkForm/index.js
+++ b/src/component/bookmarkForm/index.js
@@ -801,7 +801,7 @@ export const BookmarkForm = function({
form.wrap({
children: [
node('h2:Address|class:mb-2'),
- complexNode({ tag: 'p', text: 'Be sure to use the full URL and include "https://..."', attr: [{ key: 'class', value: 'mb-5' }] })
+ complexNode({ tag: 'p', text: 'Be sure to use the full URL and include "https://..."', complexText: true, attr: [{ key: 'class', value: 'mb-5' }] })
]
}),
form.wrap({
diff --git a/src/component/control/helperText/index.js b/src/component/control/helperText/index.js
index 2f51ac03..4a777de1 100644
--- a/src/component/control/helperText/index.js
+++ b/src/component/control/helperText/index.js
@@ -14,7 +14,8 @@ import { convertColor } from '../../../utility/convertColor';
import { isValidString } from '../../../utility/isValidString';
export const Control_helperText = function({
- text = []
+ text = [],
+ complexText= false
} = {}) {
this.para = [];
@@ -22,7 +23,8 @@ export const Control_helperText = function({
text.forEach((item, i) => {
this.para.push(form.helper({
tag: 'p',
- text: item
+ text: item,
+ complexText: complexText
}));
});
@@ -48,4 +50,4 @@ export const Control_helperText = function({
});
};
-};
\ No newline at end of file
+};
diff --git a/src/component/form/helper/index.js b/src/component/form/helper/index.js
index a494f434..5143a578 100644
--- a/src/component/form/helper/index.js
+++ b/src/component/form/helper/index.js
@@ -5,17 +5,27 @@ import './index.css';
export const helper = function({
text = 'text',
+ complexText = false,
classList = []
} = {}) {
- const helper = complexNode({
- tag: 'p',
- text: text,
- attr: [{
- key: 'class',
- value: 'form-helper-item'
- }]
- });
+ const helper = node('p|class:form-helper-item');
+
+ if (text) {
+
+ if (complexText) {
+
+ helper.innerHTML = text;
+
+ } else {
+
+ let textNode = document.createTextNode(text);
+
+ helper.appendChild(textNode);
+
+ };
+
+ };
if (classList.length > 0) {
@@ -27,4 +37,4 @@ export const helper = function({
return helper;
-};
\ No newline at end of file
+};
diff --git a/src/component/menuContent/appSetting/index.js b/src/component/menuContent/appSetting/index.js
index 6fdcf708..66553e23 100644
--- a/src/component/menuContent/appSetting/index.js
+++ b/src/component/menuContent/appSetting/index.js
@@ -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 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(
node('div', [
node('div|class:version', [
@@ -61,9 +73,9 @@ appSetting[appName.toLowerCase()] = (parent) => {
])
]),
node('hr'),
- complexNode({ tag: 'p', text: `This project can be found on ${githubLink.link().outerHTML}` }),
- complexNode({ tag: 'p', text: `Share your setup with the ${redditLink.link().outerHTML}` }),
- complexNode({ tag: 'p', text: `${appName} uses the ${licenseLink.link().outerHTML}` }),
+ para1,
+ para2,
+ para3
])
);
diff --git a/src/component/menuContent/headerSetting/index.js b/src/component/menuContent/headerSetting/index.js
index 779b07c1..a903f0b7 100644
--- a/src/component/menuContent/headerSetting/index.js
+++ b/src/component/menuContent/headerSetting/index.js
@@ -434,6 +434,7 @@ headerSetting.area = (parent) => {
});
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.`]
});
diff --git a/src/component/menuContent/layoutSetting/index.js b/src/component/menuContent/layoutSetting/index.js
index 3dbe4e57..29ef0d2c 100644
--- a/src/component/menuContent/layoutSetting/index.js
+++ b/src/component/menuContent/layoutSetting/index.js
@@ -218,6 +218,7 @@ layoutSetting.area = (parent) => {
text: ['Effects may not be visible if the Header Area is full width.']
}),
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.`]
})
};
@@ -264,6 +265,7 @@ layoutSetting.area = (parent) => {
text: ['Effects may not be visible if the Bookmark Area is full width.']
}),
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.`]
})
};
diff --git a/src/component/menuContent/supportSetting/index.js b/src/component/menuContent/supportSetting/index.js
index 846deb66..aa942d25 100644
--- a/src/component/menuContent/supportSetting/index.js
+++ b/src/component/menuContent/supportSetting/index.js
@@ -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(
node('div', [
makeLinks(),
node('hr'),
- 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}.`
- })
+ para
])
);
diff --git a/src/component/menuContent/themeSetting/index.js b/src/component/menuContent/themeSetting/index.js
index bb8e7fd8..fb592617 100644
--- a/src/component/menuContent/themeSetting/index.js
+++ b/src/component/menuContent/themeSetting/index.js
@@ -790,6 +790,7 @@ themeSetting.font = (parent) => {
}
}),
nameHelper: new Control_helperText({
+ complexText: true,
text: [
`Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Clock, Date, Group names and Bookmark Letters.`,
'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({
+ 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"',
diff --git a/src/utility/complexNode.js b/src/utility/complexNode.js
index 65048657..23face01 100644
--- a/src/utility/complexNode.js
+++ b/src/utility/complexNode.js
@@ -1,6 +1,7 @@
export const complexNode = ({
tag = 'div',
text = false,
+ complexText = false,
attr = [],
node = []
} = {}) => {
@@ -8,7 +9,19 @@ export const complexNode = ({
const element = document.createElement(tag);
if (text) {
- element.innerHTML = text;
+
+ if (complexText) {
+
+ element.innerHTML = text;
+
+ } else {
+
+ let textNode = document.createTextNode(text);
+
+ element.appendChild(textNode);
+
+ };
+
};
if (attr.length > 0) {