crosswords/js_client/infoBox.js

118 lines
3.2 KiB
JavaScript
Raw Permalink Normal View History

2021-06-17 16:02:50 +02:00
import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module';
2021-06-21 10:18:31 +02:00
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);
2021-06-24 12:10:59 +02:00
alert("copied url to clipboard, you can share this link to work collaboratively on this puzzle in real time");
2021-06-21 10:18:31 +02:00
}
2021-06-17 16:02:50 +02:00
export class InfoBox extends LitElement {
static get styles() {
return css`
.hinttext {
color: white;
margin-left: 1em;
2021-08-31 18:22:15 +02:00
margin-top: 0.5em;
2021-06-21 10:18:31 +02:00
}
2021-06-17 16:02:50 +02:00
2021-06-21 10:18:31 +02:00
.hintbox {
grid-column: 1;
grid-row: 1;
2021-08-31 18:22:15 +02:00
position: relative;
display: block;
overflow-y: scroll;
height: 8em;
2021-06-17 16:02:50 +02:00
}
.infobox {
2021-06-21 10:18:31 +02:00
font-size = 1em;
2021-06-17 16:02:50 +02:00
z-index: 20;
position: fixed;
2021-06-21 10:18:31 +02:00
display: grid;
grid-template-columns: auto min-content;
2021-06-17 16:02:50 +02:00
top: 0em;
left: 0em;
right: 0em;
2021-06-24 12:10:59 +02:00
min-height: 8em;
2021-06-17 16:02:50 +02:00
2021-08-31 18:40:27 +02:00
border-style: none;
2021-06-17 16:02:50 +02:00
border-color: white;
border-width: 0.2 em;
background-color: #333;
color: white;
}
2021-06-21 10:18:31 +02:00
.buttonbox {
grid-column: 2;
grid-row: 1;
padding: 0.3em;
}
.button {
2021-08-31 18:40:27 +02:00
background-color: #222;
2021-06-21 10:18:31 +02:00
border-color: white;
border-width: 0.2em;
2021-08-31 18:40:27 +02:00
border-style: none;
2021-06-21 10:18:31 +02:00
min-width: 10em;
2021-06-24 12:10:59 +02:00
min-height: 3.5em;
2021-06-21 10:18:31 +02:00
box-shadow: none;
outline: none;
margin: 0.1em 0.1em;
color: white;
font-size: 1em;
}
2021-06-17 16:02:50 +02:00
`;
}
static get properties() {
return {
horizontal_hint: { type: String },
vertical_hint: { type: String }
};
}
constructor() {
super();
this.vertical_hint = "";
this.horizontal_hint = "";
}
2021-06-23 19:11:34 +02:00
onNew() {
setCookie("session", "");
2021-07-03 20:21:45 +02:00
var crosswordRoot = location.pathname.substr(0, location.pathname.lastIndexOf("/"));
window.location.href = location.protocol + '//' + location.host + crosswordRoot;
2021-06-21 10:18:31 +02:00
}
2021-06-23 19:11:34 +02:00
onShare() {
2021-06-21 10:18:31 +02:00
copyToClipboard(window.location.href);
}
2021-06-17 16:02:50 +02:00
render() {
return html`
<div class="infobox">
2021-06-21 10:18:31 +02:00
<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>
2021-08-31 18:40:27 +02:00
<button class="button" @click=${this.onShare}> share session</button>
2021-06-21 10:18:31 +02:00
</div>
2021-06-17 16:02:50 +02:00
</div>
`;
}
}
customElements.define('info-box', InfoBox);