crosswords/js_client/infoBox.js

import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module';
import { getCookie, setCookie } from './cookie.js';

function copyToClipboard(text) {
    var input = document.body.appendChild(document.createElement("input"));
    input.value = text;
    input.focus();
    input.select();
    document.execCommand('copy');
    input.parentNode.removeChild(input);
    alert("copied url to clipboard, you can share this link to work collaboratively on this puzzle in real time");
}

export class InfoBox extends LitElement {
    static get styles() {
        return css`
            .hinttext {
                color: white;
                margin-left: 1em;
                margin-top: 0.5em;
                
            }

            .hintbox {
                grid-column: 1;
                grid-row: 1;
                position: relative;
                display: block;
                overflow-y: scroll;
                height: 8em;
                
            }

            .infobox {
                font-size = 1em;
                z-index: 20;
                position: fixed;
                display: grid;
                grid-template-columns: auto min-content;
                top: 0em;
                left: 0em;
                right: 0em;
                min-height: 8em;

                border-style: none;
                border-color: white;
                border-width: 0.2 em;
                background-color: #333;
                color: white;
            }

            .buttonbox {
                grid-column: 2;
                grid-row: 1;
                padding: 0.3em;
            }

            .button {
                background-color: #222;
                border-color: white;
                border-width: 0.2em;
                border-style: none;
                min-width: 10em;
                min-height: 3.5em;
                box-shadow: none;
                outline: none;
                margin: 0.1em 0.1em;
                color: white;
                font-size: 1em;
            }

        `;
    }

    static get properties() {
        return {
            horizontal_hint: { type: String },
            vertical_hint: { type: String }
        };
    }

    constructor() {
        super();
        this.vertical_hint = "";
        this.horizontal_hint = "";
    }

    onNew() {
        setCookie("session", "");
        var crosswordRoot = location.pathname.substr(0, location.pathname.lastIndexOf("/")); 
        window.location.href = location.protocol + '//' + location.host + crosswordRoot;

    }

    onShare() {
        copyToClipboard(window.location.href);
    }

    render() {
        return html`
            <div class="infobox">
                <div class="hintbox">
                    <div class="hinttext">▶ ${this.horizontal_hint}</div>
                    <div class="hinttext">▼ ${this.vertical_hint}</div>
                </div>
                <div class="buttonbox">
                    <button class="button" @click=${this.onNew}> new Crossword </button>
                    <button class="button" @click=${this.onShare}> share session</button>

                </div>
            </div>
        `;
    }

}

customElements.define('info-box', InfoBox);