transform & logging

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
 

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")
+		log("[transform] root-elelemt is undefined")
-		console.log("[ziba][transform] end")
+		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")
+		logerror("[transform_link] root-elelemt is undefined")
-		console.log("[ziba][transform_link] end")
+		log("[transform_link] end")
 		return
 	}
 
 	const tagName = "ziba-link"
 	const elements = rootElement.getElementsByTagName(tagName)
 	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
 	}
 	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);
 }

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>',
+		},
 	]