Thursday, 1 June 2017

Currency parser with Web Components

Web Components is a set of features being added to the HTML DOM to allow the development of custom components. This also allows developers to have encapsulation in their code which prevents undesired conflicts.

Fig 1.0 Web Components Spec

Custom Elements:

Allows developers to define new types of elements in html.

<currency-parser value="1000.456" decimal="2digit" addSymbol="true" symbol="$"></currency-parser>

Shadow DOM:

Shadow DOM helps to tackle the DOM tree encapsulation issue. The shadow DOM hides JavaScript, HTML and CSS from parent document to prevent collisions from other modules.

HTML Templates:

Templates are markups that can be instantiated during runtime for use in the application. 

<template>
    <div>
        ...
    </div>
</tempalte>

HTML Imports:

This provides way to include HTML documents in other HTML documents. The imported document can contain its own <style> and <script>. 


<link rel="import" href="/path-to-folder/currency-parser.html"></link>


Demo
In this demo I have built a currency parser that can transform any given value to the right currency. This is a very simple program which shows the different aspects of web components.

index.html:
<!DOCTYPE html>
<html>
    <head>
        <title>Currency Parser</title>
        <link rel="import" href="./currency-parser.html">
    </head>
    <body>
        <h1>Currency Parser</h1>
        <currency-parser value="1000.456" decimal="1-digit" addSymbol="true" symbol="$">
        </currency-parser>
    </body>
</html>

In the 'index.html' file the 'currency-parser.html' file is imported using HTML Imports and using custom element tag 'currency-parser' the new web component can be instantiated.

currency-parser.html:
<template>
<style>
</style>
<div>
    <span id="currency-value"></span>
</div>
</template>
<script>
(function(){
    let thisDoc = document.currentScript.ownerDocument;
    let thatDoc  = document;
    let tmpl = thisDoc.querySelector('template');
    let Element = Object.create(HTMLElement.prototype);
    let shaDowRoot;
    Element.createdCallback = function(){
        shadowRoot = this.createShadowRoot();
        let clone = thatDoc.importNode(tmpl.content, true);
        shadowRoot.appendChild(clone);
        
        //Web Component Logic
        let decimal= Number(this.getAttribute('decimal').split("-")[0]);
        let finalValue = Number(this.getAttribute('value')).toFixed(decimal);
        let field = shadowRoot.querySelector('#currency-value');
        if(JSON.parse(this.getAttribute('addSymbol'))===true){
            field.innerHTML = this.getAttribute('symbol')+""+finalValue;
        }else{
            field.innerHTML = finalValue;
        }
    }
    thatDoc.registerElement('currency-parser', {prototype:Element});
})()
</script>

The 'currency-parser.html' file contains template(layout) for the 'currency-parser' web component. Also it contains JS logic for attaching this component to the Shadow DOM and the internal logic for parsing the currency.

Output in Chrome:







No comments:

Post a Comment