transform & logging
parent
811f246ad3
commit
f57cde9121
23
README.md
23
README.md
|
|
@ -18,23 +18,35 @@ Here is an example usage of **ziba.js**:
|
|||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
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)
|
||||
</script>
|
||||
|
|
@ -45,6 +57,9 @@ Here is an example usage of **ziba.js**:
|
|||
## Tags
|
||||
|
||||
* `<ziba-link>` — used for local links.
|
||||
* attributes:
|
||||
* `title`
|
||||
* `tramsform`
|
||||
|
||||
## Import
|
||||
|
||||
|
|
|
|||
61
ziba.js
61
ziba.js
|
|
@ -20,38 +20,38 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|||
THE SOFTWARE.
|
||||
*/
|
||||
export function transform(rootElement) {
|
||||
console.log("[ziba][transform] begin")
|
||||
log("[transform] begin")
|
||||
|
||||
if (undefined === rootElement) {
|
||||
console.log("[ziba][transform] root-elelemt is undefined")
|
||||
console.log("[ziba][transform] end")
|
||||
log("[transform] root-elelemt is undefined")
|
||||
log("[transform] end")
|
||||
return
|
||||
}
|
||||
|
||||
transform_link(rootElement)
|
||||
|
||||
console.log("[ziba][transform] end")
|
||||
log("[transform] end")
|
||||
}
|
||||
|
||||
function transform_link(rootElement) {
|
||||
console.log("[ziba][transform_link] begin")
|
||||
log("[transform_link] begin")
|
||||
|
||||
if (undefined === rootElement) {
|
||||
console.log("[ziba][transform_link] root-elelemt is undefined")
|
||||
console.log("[ziba][transform_link] end")
|
||||
logerror("[transform_link] root-elelemt is undefined")
|
||||
log("[transform_link] end")
|
||||
return
|
||||
}
|
||||
|
||||
const tagName = "ziba-link"
|
||||
const elements = rootElement.getElementsByTagName(tagName)
|
||||
if (!elements) {
|
||||
console.log("[ziba][transform_link] no elements")
|
||||
console.log("[ziba][transform_link] rootElement.innerHTML=", rootElement.innerHTML)
|
||||
console.log("[ziba][transform_link] end")
|
||||
logerror("[transform_link] no elements")
|
||||
log("[transform_link] rootElement.innerHTML=", rootElement.innerHTML)
|
||||
log("[transform_link] end")
|
||||
return
|
||||
}
|
||||
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,
|
||||
// we need to iterate through it backwards, because the HTMLCollection
|
||||
|
|
@ -66,17 +66,48 @@ function transform_link(rootElement) {
|
|||
|
||||
anchor.innerHTML = element.innerHTML
|
||||
|
||||
let href = element.innerText
|
||||
let ref = element.innerText
|
||||
const elementTitle = element.getAttribute("title")
|
||||
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)
|
||||
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
140
ziba_test.js
140
ziba_test.js
|
|
@ -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>',
|
||||
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>',
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue