From 3fb1a21d96337f0c42245f0606eefc7f0a37b434 Mon Sep 17 00:00:00 2001 From: neostetic Date: Sat, 15 Jul 2023 20:48:27 +0200 Subject: [PATCH 1/3] Minor update beta-1.6 - Made library more (doesn't use pixelbite.update anymore) - Fixed Component error popup - Fixed Darkmode and changeTheme() - Added configs support - Made it more better with it's own syntax - Made // and # comments work - Made Configs and Fontawesome support - Custom name components support - Added Fontawesome support (custom link can be changed in pixelbite.fontawesome) - Changed Pixelbite Object's structure - Added function alocatedPath() that replaces '@/' string with site's url - Changed object attributes to 'object_name:object' --- .htaccess | 9 ++ assets/customButton.html | 1 + pixelbite.conf | 36 ++++---- script/changelog.txt | 8 +- script/pixelbite.js | 112 ++++++++++++++++++------- tests/website-2/components/header.html | 27 ++++-- tests/website-2/index.html | 30 ++++--- 7 files changed, 158 insertions(+), 65 deletions(-) create mode 100644 .htaccess create mode 100644 assets/customButton.html diff --git a/.htaccess b/.htaccess new file mode 100644 index 0000000..ce4dcdb --- /dev/null +++ b/.htaccess @@ -0,0 +1,9 @@ +RewriteEngine On +RewriteBase / + +DirectoryIndex /www/index.html + +RewriteCond %{REQUEST_URI} !^/www/ +RewriteCond %{REQUEST_FILENAME} !-d +RewriteCond %{REQUEST_FILENAME}\.html -f +RewriteRule ^(.+)$ /www/$1.html [L] \ No newline at end of file diff --git a/assets/customButton.html b/assets/customButton.html new file mode 100644 index 0000000..deb5377 --- /dev/null +++ b/assets/customButton.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pixelbite.conf b/pixelbite.conf index f4c7692..4438908 100644 --- a/pixelbite.conf +++ b/pixelbite.conf @@ -1,12 +1,12 @@ [informations] -# author = "neostetic" -# author_url = "https://github.com/neostetic" -# description = "Just your basic theme idea"x` -# theme_name = "General" -# theme_version = "1.0" -# theme_date = "7/12/2023" -# theme_url = "https://github.com/neostetic" -# style = "color:red" +author = "neostetic" +author_url = "https://github.com/neostetic" +# description = "Please use guide that is on https://github.com/Pixelbite-CSS." +theme_name = "General" +theme_version = "1.0" +theme_date = "1/1/1999" +theme_url = "https://github.com/neostetic" +# style = "background:black;color:white" [general] configs = [] @@ -15,21 +15,23 @@ fontawesome = "https://kit.fontawesome.com/f474ae69e7.js" [components] # TODO: Make it work! -adam = "./pixelbite_componentTest.html" +customButton = "./assets/customButton.html" # text [aliases] -headerRoundedButton = "flexMiddle flexCenter fs-16px c-black dark:c-white td-none g-12px b-1px-solid-black dark:b-1px-solid-white br-400px p-8px-20px" -headerRoundedFullButton = "br-400px bg-black dark:bg-white w-44px flexMiddle flexCenter" +headerBorderRadius = "br-6px" +headerRoundedButton = "flexMiddle flexCenter fs-16px c-black dark:c-white td-none g-12px b-1px-solid-black dark:b-1px-solid-white headerBorderRadius p-8px-20px" +headerRoundedFullButton = "headerBorderRadius bg-black dark:bg-white w-44px flexMiddle flexCenter" +headerLink = "td-none c-black dark:c-white d-block p-4px-4px fs-15px" [variables] -# primary = "#ff0000" -# secondary = "#ff5555" +primary = "#FA2A55" +secondary = "#b51838" [colors] # purple = "#ff0000" [markdowns] -# code2text = [ -# { pattern: //g, replacement: ">" } -# ] +code2text = [ + { pattern: //g, replacement: ">" } +] diff --git a/script/changelog.txt b/script/changelog.txt index 1d6b121..1238eb6 100644 --- a/script/changelog.txt +++ b/script/changelog.txt @@ -4,8 +4,10 @@ - Fixed Darkmode and changeTheme() - Added configs support - Made it more better with it's own syntax - - Made // comments work + - Made // and # comments work - Made Configs and Fontawesome support - - TODO: Custom name components support + - Custom name components support - Added Fontawesome support (custom link can be changed in pixelbite.fontawesome) -- Changed Pixelbite Object's structure \ No newline at end of file +- Changed Pixelbite Object's structure +- Added function alocatedPath() that replaces '@/' string with site's url + - Changed object attributes to 'object_name:object' \ No newline at end of file diff --git a/script/pixelbite.js b/script/pixelbite.js index 2651c71..aea48dd 100644 --- a/script/pixelbite.js +++ b/script/pixelbite.js @@ -242,12 +242,13 @@ const pb_setCustomComponents = () => { } const pb_customComponentsCheck = (array, relativePath) => { + let components = pb_getObjectValues(pixelbite.components) if (!relativePath) relativePath = '' for (let i = 0; i < array.length; i++) { let element = array[i] if (element.tagName.toUpperCase().includes('COMPONENT')) { let element_attributes = element.getAttributeNames() - let path = element.getAttribute('path') + let path = pb_alocatePath(element.getAttribute('path')) if (path.startsWith('http://') || path.startsWith('https://')) { path = element.getAttribute('path') } else { @@ -255,6 +256,13 @@ const pb_customComponentsCheck = (array, relativePath) => { } pb_includeHtmlToAnElement(element, path, element_attributes) } + for (let j = 0; j < components.length; j++) { + if (element.tagName.toUpperCase().includes(components[j][0].toLocaleUpperCase())) { + let element_attributes = element.getAttributeNames() + let path = pb_alocatePath(components[j][1]) + pb_includeHtmlToAnElement(element, path, element_attributes) + } + } } } @@ -281,6 +289,22 @@ const pb_customMarkdown = (text, markdown) => { return html; } +const pb_componentErrorMessage = (element, attributes, message) => { + let toggleClass = 'toggle-' + pb_randomString(32) + let toggleClassMore = 'toggle-' + pb_randomString(32) + let detailsString = ''; + for (let i = 0; i < attributes.length; i++) { + detailsString += ' - [' + attributes[i] + '="' + element.getAttribute(attributes[i]).replaceAll('<', '<') + '"],
' + } + element.innerHTML = + '
' + + '' + message + '
' + + '- see more details' + + '' + + '' + + '
' +} + const pb_includeHtmlToAnElement = async (element, path, attributes) => { if (!path) path = 'null' let relativePathSplit = path.split('/') @@ -295,22 +319,31 @@ const pb_includeHtmlToAnElement = async (element, path, attributes) => { let response = this.response.replaceAll('\t', ' ') for (let i = 0; i < attributes.length; i++) { let attribute = attributes[i] - if (attribute.includes('[object]')) { + if (attribute.includes(':object')) { let object = '' - let objectName = attribute.replace('[object]', '') + let objectName = attribute.replace(':object', '') let objectPath = element.getAttribute(attribute) let objectRequest = new XMLHttpRequest(); objectRequest.onreadystatechange = function () { - if (this.readyState === 4 && this.status === 200) { - try { - object = JSON.parse(this.responseText); - } catch (error) { - console.error('PixelBite: Your "' + objectName + '[object]" has syntax error.') + if (this.readyState === 4) { + if (this.status === 200) { + try { + object = JSON.parse(this.responseText); + } catch (error) { + console.error('PixelBite: Attribute "' + objectName + ':object[' + objectPath + ']" in component has syntax error.') + } } } + if (this.status === 404) { + object = null + } }; - objectRequest.open("GET", objectPath, true); - objectRequest.send(); + try { + objectRequest.open("GET", objectPath, true); + objectRequest.send(); + } catch (err) { + console.error("help") + } while (!object) { await pb_sleep(10) } @@ -360,30 +393,23 @@ const pb_includeHtmlToAnElement = async (element, path, attributes) => { } } if (this.status === 404) { - let toggleClass = 'toggle-' + pb_randomString(32) - let toggleClassMore = 'toggle-' + pb_randomString(32) - let detailsString = ''; - for (let i = 0; i < attributes.length; i++) { - detailsString += ' - [' + attributes[i] + '="' + element.getAttribute(attributes[i]).replaceAll('<', '<') + '"],
' - } - element.innerHTML = - '
' + - 'Component not found [path=' + path + ']
' + - '- see more details' + - '' + - '' + - '
' + pb_componentErrorMessage(element, attributes, 'Component not found [path=' + path + ']') } } pb_classGenerator() } - componentRequest.open("GET", path, true); - componentRequest.send(); + try { + componentRequest.open("GET", path, true); + componentRequest.send(); + } catch (err) { + console.error(err) + } } let darkmode = false window.addEventListener("load", async () => { + await pb_alocatedPath() await pb_checkLoremIpsum() let darkmodeCookie = pb_getCookie('darkmode') if (!darkmodeCookie) { @@ -392,15 +418,34 @@ window.addEventListener("load", async () => { } else { darkmode = darkmodeCookie } - pb_checkLoaders() pb_classGenerator() await pb_configureConfigs(pixelbite.configs) pb_setCustomComponents() pb_slideshowGenerator() - pb_addFontAwesome() - + await pb_addFontAwesome() + pb_checkLoaders() }) +const pb_alocatedPath = () => { + const a = document.getElementsByTagName('*') + for (let i = 0; i < a.length; i++) { + let element = a[i] + let elementAttributeNames = element.getAttributeNames() + for (let j = 0; j < elementAttributeNames.length; j++) { + if(element.getAttribute(elementAttributeNames[j]).includes('@/')) { + element.setAttribute( + elementAttributeNames[j], + element.getAttribute(elementAttributeNames[j]).replace(/.*?@\/\s*/,'@/').replaceAll('@/', window.location.protocol + "//" + window.location.host + "/") + ) + } + } + } +} + +const pb_alocatePath = (string) => { + return string.replace(/.*?@\/\s*/,'@/').replaceAll('@/', window.location.protocol + "//" + window.location.host + "/") +} + const pb_configureConfigs = async (urls) => { await pb_configEval(window.location.protocol + "//" + window.location.host + "/pixelbite.conf") for (let j = 0; j < urls.length; j++) { @@ -454,6 +499,9 @@ const pb_configEval = async (url) => { eval('pixelbite.' + variable + ' = ' + value) } else if (category === "components") { eval('object.values.' + category + '.' + variable + ' = ' + value) + if (!value.includes('http://') || !value.includes('https://')) { + value = value.charAt(0) + window.location.protocol + "//" + window.location.host + "/" + value.slice(1) + } eval('pixelbite.components.' + variable + ' = ' + value) } else if (category === "aliases") { eval('object.values.' + category + '.' + variable + ' = ' + value) @@ -479,13 +527,16 @@ const pb_configEval = async (url) => { if (object.theme_version) { string += " " if (object.theme_version) string += object.theme_version - if (object.theme_date) string += "\nReleased: " + object.theme_date + if (object.theme_date) string += "\n- Released: " + object.theme_date if (object.theme_url) string += ", " + object.theme_url } if (object.author) { - string += "\nMade by @" + object.author + string += "\n- Author: @" + object.author if (object.author_url) string += ", " + object.author_url } + if(object.description) { + string += "\n- " + object.description + } let style = "" if (object.style) style += object.style + ";" @@ -619,6 +670,7 @@ const pb_changeRootVariable = (variable, value) => { const pb_classGenerator = () => { debugmode() + pb_alocatedPath() pb_checkLoremIpsum() if (pixelbite.variables.primary !== document.documentElement.style.getPropertyValue('--primary-color')) { pb_changeRootVariable('--primary-color', pixelbite.variables.primary) diff --git a/tests/website-2/components/header.html b/tests/website-2/components/header.html index f98e8e6..619d402 100644 --- a/tests/website-2/components/header.html +++ b/tests/website-2/components/header.html @@ -1,7 +1,13 @@
PixelbiteCSS +
+ Home + Docs + Components + News +
- + Visit Github @@ -15,8 +21,19 @@
-