dsadhanala/simple-slider.html

## simple-slider.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Slider</title>
</head>

<body>
    <webui-slider></webui-slider>

    <script type="module">
        import { LitElement, html, css } from "https://unpkg.com/lit-element/lit-element.js?module";

        const screens = [
            {
                title: 'Compound',
                gist: 'https://xstate.js.org/viz/?gist=d35b5c36928d25c071827e684b5fa390&embed=1'
            },
            {
                title: 'Hierarchical (or nested)',
                gist: 'https://xstate.js.org/viz/?gist=52e7dcae04d3351181ce5e5a593f5d60&embed=1'
            },
            {
                title: 'Actor Model',
                gist: 'https://xstate.js.org/viz/?gist=eaa257488c80985aa8232506914d39b7&embed=1'
            }
        ];

        class WebUISlider extends LitElement {
            static get properties() {
                return {
                    activeIndex: { type: Number }
                };
            }

            static get styles() {
                return css`
                    :host {
                        font-family: Arial, Helvetica, sans-serif;
                        box-sizing: border-box;
                        padding: 3rem 0 3rem 3rem;
                        width: calc(100vw - 3rem);
                        height: calc(100vh - 3rem);
                        margin: 0 auto;
                        display: grid;
                        grid-template: 1fr / 1fr;
                    }

                    article {
                        display: block;
                        grid-area: 1 / 1;
                        transition: all .3s .3s cubic-bezier(.5, 0, .5, 1);
                        transition-property: opacity, transform;
                    }

                    article[hidden] {
                        transition-delay: 0s;
                        opacity: 0;
                        transform: scale(0.8);
                    }

                    iframe {
                        border: 0;
                        width: 100%;
                        height: calc(100% - 30px);
                    }
                `;
            }

            constructor() {
                super();
                this.switchScreen = this.switchScreen.bind(this);
                this.activeIndex = 0;
            }

            switchScreen({ key }) {
                const totalScreens = screens.length;
                let activeInx;

                switch (key) {
                    case 'ArrowRight':
                        this.activeIndex = Math.abs((this.activeIndex + 1) % totalScreens);
                        break;
                    case 'ArrowLeft':
                        this.activeIndex = Math.abs((this.activeIndex + 2) % totalScreens);
                        break;
                    default:
                        break;
                }
            }

            connectedCallback() {
                super.connectedCallback();
                document.addEventListener('keydown', this.switchScreen);
            }

            disconnectedCallback() {
                super.disconnectedCallback();
                document.removeEventListener('keydown', this.switchScreen);
            }

            render(){
                const { activeIndex, resizeIframe } = this;

                return html`
                    ${screens.map(({ title, gist}, inx) => html`
                        <article
                            ?hidden="${inx !== activeIndex || undefined}"
                        >
                            <h2>${title}</h2>
                            <iframe src="${gist}"></iframe>
                        </article>
                    `)}
                `;
            }
        }
        customElements.define('webui-slider', WebUISlider);
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple Slider</title>
	</head>

	<body>
	<webui-slider></webui-slider>

	<script type="module">
	import { LitElement, html, css } from "https://unpkg.com/lit-element/lit-element.js?module";

	const screens = [
	{
	title: 'Compound',
	gist: 'https://xstate.js.org/viz/?gist=d35b5c36928d25c071827e684b5fa390&embed=1'
	},
	{
	title: 'Hierarchical (or nested)',
	gist: 'https://xstate.js.org/viz/?gist=52e7dcae04d3351181ce5e5a593f5d60&embed=1'
	},
	{
	title: 'Actor Model',
	gist: 'https://xstate.js.org/viz/?gist=eaa257488c80985aa8232506914d39b7&embed=1'
	}
	];

	class WebUISlider extends LitElement {
	static get properties() {
	return {
	activeIndex: { type: Number }
	};
	}

	static get styles() {
	return css`
	:host {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	padding: 3rem 0 3rem 3rem;
	width: calc(100vw - 3rem);
	height: calc(100vh - 3rem);
	margin: 0 auto;
	display: grid;
	grid-template: 1fr / 1fr;
	}

	article {
	display: block;
	grid-area: 1 / 1;
	transition: all .3s .3s cubic-bezier(.5, 0, .5, 1);
	transition-property: opacity, transform;
	}

	article[hidden] {
	transition-delay: 0s;
	opacity: 0;
	transform: scale(0.8);
	}

	iframe {
	border: 0;
	width: 100%;
	height: calc(100% - 30px);
	}
	`;
	}

	constructor() {
	super();
	this.switchScreen = this.switchScreen.bind(this);
	this.activeIndex = 0;
	}

	switchScreen({ key }) {
	const totalScreens = screens.length;
	let activeInx;

	switch (key) {
	case 'ArrowRight':
	this.activeIndex = Math.abs((this.activeIndex + 1) % totalScreens);
	break;
	case 'ArrowLeft':
	this.activeIndex = Math.abs((this.activeIndex + 2) % totalScreens);
	break;
	default:
	break;
	}
	}

	connectedCallback() {
	super.connectedCallback();
	document.addEventListener('keydown', this.switchScreen);
	}

	disconnectedCallback() {
	super.disconnectedCallback();
	document.removeEventListener('keydown', this.switchScreen);
	}

	render(){
	const { activeIndex, resizeIframe } = this;

	return html`
	${screens.map(({ title, gist}, inx) => html`
	<article
	?hidden="${inx !== activeIndex \|\| undefined}"
	>
	<h2>${title}</h2>
	<iframe src="${gist}"></iframe>
	</article>
	`)}
	`;
	}
	}
	customElements.define('webui-slider', WebUISlider);
	</script>
	</body>

	</html>