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) {