Ugarz/index.md

## index.md

      
    Raw
  

              index.md
            
          
    Use Observable in html

A simple attempt to use Observable in html.
Instructions


Download this html
Launch it in your browser
Type anything on this page
Hit Enter to see what you typed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Observable</title>
    <style>
        div { width: auto; padding: 1em;}
    </style>
</head>
<body>
    <h1>Simple observable on html ready</h1>
    <div class="observable-result">Type anything and hit ENTER :</div>
    <div class="observable-content">The observed content: </div>
    <div class="observable-status">Observable Status: </div>
    <script>
        updateDom('observable-status', 'Enabled')
        const KeyboardObservable = {
            subscribe: observer => {
                const handleKeyUp = event => {
                    if (typeof event.keyCode === "number") {
                        if (event.keyCode === 13 /* Enter */) {
                            document.removeEventListener("keyup", handleKeyUp);
                            observableStatus = 'off'
                            observer.complete();
                        } else {
                            observer.next(event.keyCode);
                        }
                    } else {
                        observer.error(new Error("No keyCode found"));
                    }
                };
                document.addEventListener("keyup", handleKeyUp);
                return {
                    unsubscribe: (e) => document.removeEventListener("keyup", handleKeyUp)
                };
            }
        };

        let keys = [];
        
        // Simple function to add what you typed to the DOM
        function updateDom(domNode, content, replace) {
            const parentNode = document.getElementsByClassName(domNode)
            console.log('parentNode', parentNode)
            const node = parentNode[0]
            if(replace){
                console.log('replace', replace)
                // parentNode.removeChild(node)
            }
            console.log(`Update the DOM with '${content}', for '${domNode}' class.`, node)
            let newContent = document.createTextNode(content);
            node.appendChild(newContent);
        }
        
        KeyboardObservable.subscribe({
            next: keyCode => keys.push(String.fromCharCode(keyCode)),
            error: error => console.error(error),
            complete: () => {
                console.log('Observable completed')
                const res = keys.join("");
                updateDom('observable-result', JSON.stringify(res))
                updateDom('observable-content', JSON.stringify(keys))
                updateDom('observable-status', 'Disabled', true )
            }
        });
    </script>
</body>
</html>