Skip to content

Instantly share code, notes, and snippets.

@tkreis

tkreis/index.html

Created June 10, 2017 07:39
Show Gist options
  • Save tkreis/791fb9845ad4859dd53eb67f63205882 to your computer and use it in GitHub Desktop.
Save tkreis/791fb9845ad4859dd53eb67f63205882 to your computer and use it in GitHub Desktop.
Download ZIP
Web component test
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>&lt;hello-world&gt;</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.js"></script>
<!-- Imports polyfill -->
<script src="../webcomponentsjs/webcomponents.min.js"></script>
<!-- Imports custom element -->
<script rel="import" src="hello-world.js"> </script>
</head>
<body>
<!-- Runs custom element -->
<touchy-touch id="toucher" onScroll="onScroll();"></touchy-touch>
<script>
function onScroll () {
console.log('scroll', arguments)
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('toucher').addEventListener('select', function () {
console.log('select', arguments);
})
document.getElementById('toucher').addEventListener('close', function () {
console.log('close', arguments);
})
});
</script>
</body>
</html>
@tkreis
Copy link
Author

tkreis commented Jun 10, 2017 •
edited
Loading 

(function () {
    class Toucher extends HTMLElement {
        attachedCallback() {
            this.createAppNameDiv();
        }

        createEmitter(eventName) {
            return () => {
                this.dispatchEvent(new Event(eventName, arguments));
            }
        }

        createAppNameDiv() {
            const self = this;
            const appNameDiv = document.createElement('div');
            const Toucher = React.createClass({
                displayName: 'Tocher',
                render: function() {
                    return React.createElement("div",{
                    },[
                        React.createElement("div",{
                            onClick: self.createEmitter('select'),
                        },"SELECT ME"),
                        React.createElement("div",{
                            onClick: self.createEmitter('close'),
                        },"CLOSE ME"),

                        React.createElement("div",{
                            onClick: self.createEmitter('scroll'),
                        },"On 'scroll'")
                    ]);
                }
            });

            ReactDOM.render(React.createElement(Toucher), appNameDiv);
            this.insertBefore(appNameDiv, this.firstChild);
        }
    }

    document.registerElement('touchy-touch', Toucher);
}());

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment