diff --git a/src/arrangement.js b/src/arrangement.js index e6cc418..35b0f6f 100644 --- a/src/arrangement.js +++ b/src/arrangement.js @@ -15,5 +15,4 @@ const Arrangement = Object.freeze({ SPACE_BETWEEN: "space-between", SPACE_EVENLY: "space-evenly", SPACE_AROUND: "space-around", - -}) +}); diff --git a/src/builder.js b/src/builder.js index bd51fbc..5bd50d2 100644 --- a/src/builder.js +++ b/src/builder.js @@ -115,7 +115,7 @@ const builder = { * @returns {Component} */ img: function (attr = {}) { return builder.genTag("img", attr); }, - + /** * * @param {Map} attr @@ -129,42 +129,42 @@ const builder = { * @returns {Component} */ table: function (attr = {}) { return builder.genTag("table", attr) }, - + /** * * @param {Map} attr * @returns {Component} */ tableRow: function (attr = {}) { return builder.genTag("tr", attr) }, - + /** * * @param {Map} attr * @returns {Component} */ tableCell: function (attr = {}) { return builder.genTag("td", attr) }, - + /** * * @param {Map} attr * @returns {Component} */ tableCaption: function (attr = {}) { return builder.genTag("caption", attr) }, - + /** * * @param {Map} attr * @returns {Component} */ tableHeadCell: function (attr = {}) { return builder.genTag("th", attr) }, - + /** * * @param {Map} attr * @returns {Component} */ tableBody: function (attr = {}) { return builder.genTag("tbody", attr) }, - + /** * * @param {Map} attr @@ -177,19 +177,25 @@ const builder = { * @returns {Component} */ tableFooter: function (attr = {}) { return builder.genTag("tfoot", attr) }, + /** + * + * @param {Map} attr + * @returns {Component} + */ + iframe: function (attr = {}) { return builder.genTag("iframe", attr) }, /** * * @param {Map} attr * @returns {Component} */ - form: function (attr = {}) { + form: function (attr = {}) { return builder.genTag("form", attr) - .addStyleClass("flex-container-component") - .chainModifier() - .setStyleRule("flex-direction", "column") - .ensureModifier() - .toComponent() + .addStyleClass("flex-container-component") + .chainModifier() + .setStyleRule("flex-direction", "column") + .ensureModifier() + .toComponent() }, /** @@ -212,14 +218,14 @@ const builder = { */ page: function (innerComponents) { let main = document.querySelector('main') - + main.parentElement.insertAdjacentElement( "afterbegin", builder.genTag("main") - .alignment(Alignment.CENTER) - .arrangement(Arrangement.CENTER) - .childContext(innerComponents) - .generate() + .alignment(Alignment.CENTER) + .arrangement(Arrangement.CENTER) + .childContext(innerComponents) + .generate() ) Page.generate(); main.remove(); diff --git a/src/context.js b/src/context.js index a04a9e5..dc212ea 100644 --- a/src/context.js +++ b/src/context.js @@ -8,6 +8,11 @@ /** * The class provides overreaching options for building the website. */ +/** + * The class provides overreaching options for building the website. + * @property {Array} #functionNames + * +*/ class PageBuilder { #cssClasses; #functions; @@ -27,6 +32,14 @@ class PageBuilder { * Registers a function to be added later in a script tag in the head of the document. * @ATTENTION Be careful with intended empty strings (e.g. in variable values), * empty strings within the function code will be shrunk. + /** + * Registers a function to be added later in a script tag in the head of the document. + * @ATTENTION Be careful with intended empty strings (e.g. in variable values), + * empty strings within the function code will be shrunk. + * @deprecated 'registerFunction' will bew removed. + * 'registerNamedFunction' will be removed. + * Use 'registerPageFunction' it fully supports registration/adding of functions. + * All variations of named, unnamed and reassigned, arrow or brakets notation. * @param {string} name * @param {function} fun */ @@ -36,7 +49,7 @@ class PageBuilder { * @param {string} text * @returns {string} */ - function shrinkEmptyStrings(text){ + function shrinkEmptyStrings(text) { for (let i = 1; i < 10; i++) { text = text.replaceAll(" ".slice(i), ' '); } @@ -49,15 +62,15 @@ class PageBuilder { .replaceAll('\r\n', ' ') .replaceAll('\n\r', ' ') ); - let isFuncWritten = clearedFuncText.startsWith('function'); + let isFuncWritten = clearedFuncText.startsWith('function'); let funcHasName = fun.name && fun.name.trim() !== ''; - if(isFuncWritten){ + if (isFuncWritten) { let isNameInFuncText = clearedFuncText.startsWith(`function ${name}`); this.#functions.innerText += (funcHasName && isNameInFuncText ? clearedFuncText - : clearedFuncText.replace('function ', 'function '+name) - )+'; '; - }else{ + : clearedFuncText.replace('function ', 'function ' + name) + ) + '; '; + } else { this.#functions.innerText += `const ${name} = ${clearedFuncText}; ` } this.#functionNames.push(name); @@ -65,7 +78,14 @@ class PageBuilder { return this; } - + /** + * @deprecated 'registerFunction' will bew removed. + * 'registerNamedFunction' will be removed. + * Use 'registerPageFunction' it fully supports registration of functions. + * All variations of named, unnamed and reassigned, arrow or brakets notation. + * @param {Function} namedFunction + * @returns + */ registerNamedFunction(namedFunction) { return this.registerFunction(namedFunction.name, namedFunction) } @@ -158,6 +178,11 @@ class PageBuilder { /** * + + /** + * Little helper function. + * If a single page application is in development. + * This method sets an autoreload interval for the page. * @param {number} relaunchSeconds timeinterval for page to reload (changes) */ inDev(relaunchSeconds = 20) {