transform & logging

master
Charles Iliya Krempeaux 2023-11-16 08:26:46 -08:00
parent 811f246ad3
commit f57cde9121
3 changed files with 205 additions and 19 deletions

View File

@ -18,23 +18,35 @@ Here is an example usage of **ziba.js**:
</p> </p>
<p> <p>
Here is a ziba-link to my <ziba-link>resume</ziba-link>. Here is a ziba-link to my <ziba-link>resume</ziba-link>.
That ziba-link will get turned into <a href="resume">resume</a>. That ziba-link will get turned into <a href="./resume">resume</a>.
Notice that the text and the href are the same. Notice that the text and the href are the same.
</p> </p>
<p> <p>
Here is another one <ziba-link title="four">fource</ziba-link> Here is another one <ziba-link title="four">fource</ziba-link>
This ziba tag will get turned into <a href="four">fource</a> This ziba tag will get turned into <a href="./four">fource</a>
Notice that the href now has the value of the title of the ziba-link Notice that the href now has the value of the title of the ziba-link
</p> </p>
<p> <p>
ziba-link is design to work for only local links. <ziba-link tramsform="lowercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once twice thrice fource">once Twice tHRICE FOURCE</a>
</p>
<p>
<ziba-link tramsform="uppercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE TWICE THRICE FOURCE">once Twice tHRICE FOURCE</a>
</p>
<p>
<ziba-link tramsform="lowersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once_twice_thrice_fource">once Twice tHRICE FOURCE</a>
</p>
<p>
<ziba-link tramsform="uppersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE_TWICE_THRICE_FOURCE">once Twice tHRICE FOURCE</a>
</p>
<p>
ziba-link is designed to work for only local links.
</p> </p>
</div> </div>
<script type="module"> <script type="module">
import * as ziba from "./ziba.js" // <--- Your path of ziba.js might be different. import * as ziba from "./ziba.js" // <--- Your path of ziba.js might be different.
const rootElement = document.getElementById("main") const rootElement = document.getElementById("main") // <--- the HTML element you get will probably be different than this.
ziba.transform(rootElement) ziba.transform(rootElement)
</script> </script>
@ -45,6 +57,9 @@ Here is an example usage of **ziba.js**:
## Tags ## Tags
* `<ziba-link>` — used for local links. * `<ziba-link>` — used for local links.
* attributes:
* `title`
* `tramsform`
## Import ## Import

61
ziba.js
View File

@ -20,38 +20,38 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE. THE SOFTWARE.
*/ */
export function transform(rootElement) { export function transform(rootElement) {
console.log("[ziba][transform] begin") log("[transform] begin")
if (undefined === rootElement) { if (undefined === rootElement) {
console.log("[ziba][transform] root-elelemt is undefined") log("[transform] root-elelemt is undefined")
console.log("[ziba][transform] end") log("[transform] end")
return return
} }
transform_link(rootElement) transform_link(rootElement)
console.log("[ziba][transform] end") log("[transform] end")
} }
function transform_link(rootElement) { function transform_link(rootElement) {
console.log("[ziba][transform_link] begin") log("[transform_link] begin")
if (undefined === rootElement) { if (undefined === rootElement) {
console.log("[ziba][transform_link] root-elelemt is undefined") logerror("[transform_link] root-elelemt is undefined")
console.log("[ziba][transform_link] end") log("[transform_link] end")
return return
} }
const tagName = "ziba-link" const tagName = "ziba-link"
const elements = rootElement.getElementsByTagName(tagName) const elements = rootElement.getElementsByTagName(tagName)
if (!elements) { if (!elements) {
console.log("[ziba][transform_link] no elements") logerror("[transform_link] no elements")
console.log("[ziba][transform_link] rootElement.innerHTML=", rootElement.innerHTML) log("[transform_link] rootElement.innerHTML=", rootElement.innerHTML)
console.log("[ziba][transform_link] end") log("[transform_link] end")
return return
} }
const length = elements.length const length = elements.length
console.log("[ziba][transform_link] found", length, tagName) log("[transform_link] found", length, tagName)
// Because we are doing a replaceWith() on the HTMLCollection, // Because we are doing a replaceWith() on the HTMLCollection,
// we need to iterate through it backwards, because the HTMLCollection // we need to iterate through it backwards, because the HTMLCollection
@ -66,17 +66,48 @@ function transform_link(rootElement) {
anchor.innerHTML = element.innerHTML anchor.innerHTML = element.innerHTML
let href = element.innerText let ref = element.innerText
const elementTitle = element.getAttribute("title") const elementTitle = element.getAttribute("title")
if (elementTitle) { if (elementTitle) {
href = elementTitle ref = elementTitle
} }
href = "./"+href
const transform = element.getAttribute("transform")
if (transform) {
switch (transform) {
case "lowercase":
ref = ref.toLowerCase()
break;
case "lowersnakecase":
ref = ref.toLowerCase().replaceAll(" ", "_")
break;
case "uppercase":
ref = ref.toUpperCase()
break;
case "uppersnakecase":
ref = ref.toUpperCase().replaceAll(" ", "_")
break;
default:
logerror("unknow tramsform:", transform)
// Nothing here.
}
}
const href = "./"+ref
anchor.setAttribute("href", href) anchor.setAttribute("href", href)
element.replaceWith(anchor) element.replaceWith(anchor)
} }
console.log("[ziba][transform_link] end") log("[transform_link] end")
}
function log(...args) {
args.unshift("[ziba]");
console.log(...args);
}
function logerror(...args) {
args.unshift("[ziba] ERROR:");
console.error(...args);
} }

View File

@ -73,6 +73,146 @@ function testTransform() {
html:'<ul><li><ziba-link>one</ziba-link></li><li><ziba-link>two</ziba-link></li><li><ziba-link>three</ziba-link></li></ul>', html:'<ul><li><ziba-link>one</ziba-link></li><li><ziba-link>two</ziba-link></li><li><ziba-link>three</ziba-link></li></ul>',
expected:'<ul><li><a href="./one">one</a></li><li><a href="./two">two</a></li><li><a href="./three">three</a></li></ul>', expected:'<ul><li><a href="./one">one</a></li><li><a href="./two">two</a></li><li><a href="./three">three</a></li></ul>',
}, },
{
html:'<ziba-link transform="lowercase">e</ziba-link>',
expected:'<a href="./e">e</a>',
},
{
html:'<ziba-link transform="lowercase">E</ziba-link>',
expected:'<a href="./e">E</a>',
},
{
html:'<ziba-link transform="lowercase">example</ziba-link>',
expected:'<a href="./example">example</a>',
},
{
html:'<ziba-link transform="lowercase">Example</ziba-link>',
expected:'<a href="./example">Example</a>',
},
{
html:'<ziba-link transform="lowercase">eXAMPLE</ziba-link>',
expected:'<a href="./example">eXAMPLE</a>',
},
{
html:'<ziba-link transform="lowercase">EXAMPLE</ziba-link>',
expected:'<a href="./example">EXAMPLE</a>',
},
{
html:'<ziba-link transform="lowercase">Hello world</ziba-link>',
expected:'<a href="./hello world">Hello world</a>',
},
{
html:'<ziba-link transform="lowercase">apple Banana CHERRY</ziba-link>',
expected:'<a href="./apple banana cherry">apple Banana CHERRY</a>',
},
{
html:'<ziba-link transform="uppercase">e</ziba-link>',
expected:'<a href="./E">e</a>',
},
{
html:'<ziba-link transform="uppercase">E</ziba-link>',
expected:'<a href="./E">E</a>',
},
{
html:'<ziba-link transform="uppercase">example</ziba-link>',
expected:'<a href="./EXAMPLE">example</a>',
},
{
html:'<ziba-link transform="uppercase">Example</ziba-link>',
expected:'<a href="./EXAMPLE">Example</a>',
},
{
html:'<ziba-link transform="uppercase">eXAMPLE</ziba-link>',
expected:'<a href="./EXAMPLE">eXAMPLE</a>',
},
{
html:'<ziba-link transform="uppercase">EXAMPLE</ziba-link>',
expected:'<a href="./EXAMPLE">EXAMPLE</a>',
},
{
html:'<ziba-link transform="uppercase">Hello world</ziba-link>',
expected:'<a href="./HELLO WORLD">Hello world</a>',
},
{
html:'<ziba-link transform="uppercase">apple Banana CHERRY</ziba-link>',
expected:'<a href="./APPLE BANANA CHERRY">apple Banana CHERRY</a>',
},
{
html:'<ziba-link transform="lowersnakecase">e</ziba-link>',
expected:'<a href="./e">e</a>',
},
{
html:'<ziba-link transform="lowersnakecase">E</ziba-link>',
expected:'<a href="./e">E</a>',
},
{
html:'<ziba-link transform="lowersnakecase">example</ziba-link>',
expected:'<a href="./example">example</a>',
},
{
html:'<ziba-link transform="lowersnakecase">Example</ziba-link>',
expected:'<a href="./example">Example</a>',
},
{
html:'<ziba-link transform="lowersnakecase">eXAMPLE</ziba-link>',
expected:'<a href="./example">eXAMPLE</a>',
},
{
html:'<ziba-link transform="lowersnakecase">EXAMPLE</ziba-link>',
expected:'<a href="./example">EXAMPLE</a>',
},
{
html:'<ziba-link transform="lowersnakecase">Hello world</ziba-link>',
expected:'<a href="./hello_world">Hello world</a>',
},
{
html:'<ziba-link transform="lowersnakecase">apple Banana CHERRY</ziba-link>',
expected:'<a href="./apple_banana_cherry">apple Banana CHERRY</a>',
},
{
html:'<ziba-link transform="uppersnakecase">e</ziba-link>',
expected:'<a href="./E">e</a>',
},
{
html:'<ziba-link transform="uppersnakecase">E</ziba-link>',
expected:'<a href="./E">E</a>',
},
{
html:'<ziba-link transform="uppersnakecase">example</ziba-link>',
expected:'<a href="./EXAMPLE">example</a>',
},
{
html:'<ziba-link transform="uppersnakecase">Example</ziba-link>',
expected:'<a href="./EXAMPLE">Example</a>',
},
{
html:'<ziba-link transform="uppersnakecase">eXAMPLE</ziba-link>',
expected:'<a href="./EXAMPLE">eXAMPLE</a>',
},
{
html:'<ziba-link transform="uppersnakecase">EXAMPLE</ziba-link>',
expected:'<a href="./EXAMPLE">EXAMPLE</a>',
},
{
html:'<ziba-link transform="uppersnakecase">Hello world</ziba-link>',
expected:'<a href="./HELLO_WORLD">Hello world</a>',
},
{
html:'<ziba-link transform="uppersnakecase">apple Banana CHERRY</ziba-link>',
expected:'<a href="./APPLE_BANANA_CHERRY">apple Banana CHERRY</a>',
},
] ]