frontpack 0.1.0

data/app/assets/javascripts/frontpack/image-preview.js

@@ -0,0 +1,160 @@
+class ImagePreview extends HTMLElement {
+  constructor () {
+    super()
+    const shadowRoot = this.attachShadow({ mode: 'open' })
+    shadowRoot.innerHTML = `    
+<style>    
+:host(*){
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+:host([status='empty']):before {
+  content: attr(text); 
+}
+</style>
+`
+    if (this.hasAttribute('target-input')) {
+      this.input = document.getElementById(this.getAttribute('target-input'))
+    } else {
+      console.log('Input file not defined')
+      return
+    }
+
+    this.setAttribute('status', 'empty')
+    this.source = null
+  }
+
+  set text (value) {
+    this.setAttribute('text', value)
+  }
+
+  get text () {
+    return this.getAttribute('text')
+  }
+
+  set status (value) {
+    this.setAttribute('status', value)
+    this._dispatch('statuschange', value)
+  }
+
+  get status () {
+    return this.getAttribute('status')
+  }
+
+  onClick () {
+    this.input.click()
+  }
+
+  onChange () {
+    this.file = this.input.files[0]
+    this.source = 'fileUpload'
+    this.render()
+  }
+
+  onDragOver (event) {
+    event.preventDefault()
+    this.status = 'dragging'
+  }
+
+  onDragLeave () {
+    if (!this.file) {
+      this.setAttribute('status', 'empty')
+    } else {
+      this.setAttribute('status', 'ready')
+    }
+  }
+
+  onDrop (event) {
+    event.preventDefault()
+    this.file = event.dataTransfer.files[0]
+    this.source = 'dragAndDrop'
+    this.render()
+  }
+
+  onPaste (event) {
+    try {
+      this.file = event.clipboardData.items[1].getAsFile()
+      this.source = 'clipboard'
+      this.render()
+    } catch (e) {
+      this._dispatch('error', e.message)
+    }
+  }
+
+  render () {
+    const validExtensions = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
+    if (!this.file || !validExtensions.includes(this.file.type)) {
+      this._dispatch('error', 'Invalid image file.')
+      this._clear()
+      return
+    }
+
+    try {
+      this.status = 'loading'
+      const fileReader = new FileReader()
+      fileReader.addEventListener('load', this.onReaderReady.bind(this))
+      fileReader.addEventListener('error', this.onReaderError.bind(this))
+      fileReader.readAsDataURL(this.file)
+      this.input.files = this.copyFile()
+    } catch (e) {
+      this._clear()
+      this._dispatch('error', e.message)
+    }
+  }
+
+  copyFile () {
+    const dt = new DataTransfer()
+    dt.items.add(new File([this.file.size, this.file.type], this.file.name))
+    return dt.files
+  }
+
+  onReaderReady (event) {
+    const fileURL = event.target.result
+    this.style.backgroundImage = `url(${fileURL})`
+    this.base64Data = fileURL
+    this.setAttribute('status', 'ready')
+    this.status = 'ready'
+    this._dispatch('success', { source: this.source })
+  }
+
+  onReaderError (event) {
+    this._dispatch('error', event.target.error)
+    this.status = 'error'
+  }
+
+  _dispatch (eventName, details) {
+    const event = new CustomEvent(eventName, {
+      cancelable: true,
+      bubbles: true,
+      detail: details
+    })
+    this.dispatchEvent(event)
+  }
+
+  _clear () {
+    this.file = null
+    this.style.backgroundImage = ''
+    this.setAttribute('status', 'empty')
+    this.input.files = []
+  }
+
+  clear () {
+    this._clear()
+    this._dispatch('clear')
+  }
+
+  connectedCallback () {
+    this.addEventListener('click', this.onClick.bind(this))
+    this.addEventListener('dragover', this.onDragOver.bind(this))
+    this.addEventListener('drop', this.onDrop.bind(this))
+    this.addEventListener('dragleave', this.onDragLeave.bind(this))
+    this.input.addEventListener('change', this.onChange.bind(this))
+    if (this.getAttribute('disable-clipboard') !== 'true') {
+      window.addEventListener('paste', this.onPaste.bind(this))
+    }
+  }
+}
+
+customElements.define('image-preview', ImagePreview)

data/app/assets/javascripts/frontpack/image-uploader.js

@@ -0,0 +1,34 @@
+class ImageUploader {
+  onUpdatePreview(event) {
+    this.preview.src = event.target.result;
+  }
+
+  onChange() {
+    if (this.input.files && this.input.files[0]) {
+      let reader = new FileReader();
+      reader.addEventListener('load', this.onUpdatePreview.bind(this));
+      reader.readAsDataURL(this.input.files[0]);
+    }
+  }
+
+  constructor(element) {
+    this.preview = element.querySelector('img');
+    this.input = element.querySelector('input');
+    this.input.addEventListener('change', this.onChange.bind(this));
+
+    window.setTimeout(_ => {
+      let previewContainer = element.querySelector('.preview');
+      let rect = previewContainer.getBoundingClientRect();
+      this.preview.style.width = rect.width + 'px';
+      this.preview.style.height = rect.height + 'px';
+      this.preview.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= ';
+    }, 1);
+  }
+}
+
+document.addEventListener('turbolinks:load', _ => {
+  let uploaders = document.querySelectorAll('.image-uploader');
+  for (let uploader of uploaders) {
+    new ImageUploader(uploader);
+  }
+});

data/app/assets/javascripts/frontpack/localized-time.js

@@ -0,0 +1,17 @@
+class LocalizedTime extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `<slot></slot>`;
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = this.time.toLocaleString();
+  }
+
+  get time() {
+    let date_time = new Date(this.getAttribute('time'));
+    return date_time;
+  }
+}
+customElements.define('localized-time', LocalizedTime);

data/app/assets/javascripts/frontpack/modal-dialog.js

@@ -0,0 +1,206 @@
+class ModalDialog extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' } ).innerHTML = `
+<style>
+  * {
+    box-sizing: border-box;
+  }
+  :host {
+    position: absolute;
+    display: none;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 200;
+    background: rgba(128, 128, 128, 0.2);
+  }
+  #dialog {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: min-content 1fr min-content;
+    background: #f8f9fa;
+    box-shadow: 1px 1px 5px gray;
+  }
+  #header {
+    display: grid;
+    grid-template-columns: 1fr min-content;
+    grid-template-areas: "title buttons";
+    background: rgba(0, 0, 0, 0.1);
+    border-bottom: rgba(0, 0, 0, 0.2) solid 1px;
+    padding: 0 0.5em;
+  }
+  #title {
+    grid-area: title;
+    margin: 0;
+    padding: 0.25em 0;
+  }
+  #buttons {
+    display: inline-grid;
+    grid-auto-columns: 2em;
+    grid-template-rows: auto;
+  }
+  #title-buttons button {
+    font-family: "Material Icons";
+    font-size: 1.3em;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    height: 100%;
+  }
+  #title-buttons button:hover {
+    color: red;
+  }
+  #content {
+    position: relative;
+    padding: 0.5em;
+  }
+  #footer {
+    display: grid;
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content;
+    grid-template-areas: "left center right";
+    padding: 0.5em;
+  }
+  .center-buttons {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    text-align: center;
+  }
+  .standard-button {
+    border: rgba(0, 0, 0, 0.2) 1px solid;
+    background: rgba(0, 0, 0, 0.1);
+    padding: 0.5em 1em;
+  }
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+</style>
+<div id="dialog">
+  <div id="header">
+    <h3 id="title"></h3>
+    <span id="title-buttons">
+      <button type="button" id="close-button" data-resolve="false" data-data="cancel">close</button>    
+    </span>
+  </div>
+  <div id="content">
+    <slot></slot>
+  </div>
+  <div id="footer">
+    <div class="left-buttons"><slot name="left"></slot></div>
+    <div class="center-buttons"><slot name="center"></slot></div>
+    <div class="right-buttons"><slot name="right"></slot></div>
+  </div>
+</div>
+`;
+  }
+
+  connectedCallback() {
+    this._title = this.shadowRoot.getElementById('title');
+    this._content = this.shadowRoot.getElementById('content');
+    this._buttons = new Map([
+      ['left', this.shadowRoot.getElementById('left')],
+      ['center', this.shadowRoot.getElementById('center')],
+      ['right', this.shadowRoot.getElementById('right')]
+    ]);
+    this._footer = this.shadowRoot.getElementById('footer');
+    this._footer.addEventListener('click', this.onButtonClick.bind(this));
+    this._close_button = this.shadowRoot.getElementById('close-button');
+    this._close_button.addEventListener('click', this.onButtonClick.bind(this));
+    this._title.innerHTML = this.caption;
+  }
+
+  get caption() {
+    return this.getAttribute('caption');
+  }
+
+  set caption(value) {
+    this.setAttribute('caption', value);
+    this._title.innerHTML = value;
+  }
+
+  get closeButton() {
+    return this._close_button.style.display = 'inline';
+  }
+
+  set closeButton(value) {
+    this._close_button.style.display = value ? 'inline' : 'none';
+  }
+
+  set buttons(options) {
+    ['left', 'center', 'right'].forEach((position) => {
+      this._buttons.get(position).innerHTML = ''; 
+    });
+    for (let button of options) {
+      let newButton = document.createElement('button');
+      newButton.innerHTML = button.caption;
+      newButton.dataset.data = button.data;
+      newButton.dataset.resolve = button.resolve;
+      newButton.className = 'standard-button';
+      this._buttons.get(button.position).appendChild(newButton);
+    }
+  }
+
+  onButtonClick(event) {
+    let button = event.target;
+    if (button.tagName.toLowerCase() !== 'button') {
+      return;
+    }
+
+    this.close(button.dataset.resolve === 'true', button.dataset.data);
+  }
+
+  show(options = {}) {
+    return new Promise((resolve, reject) => {
+      if (options.hideCloseButton) {
+        this.closeButton = false;
+      }
+      if (options.width) {
+        this._content.style.width = options.width;  
+      }
+      if (options.height) {
+        this._content.style.height = options.height;
+      }
+      this.resolve = resolve;
+      this.reject = reject;
+      this.style.display = 'inline-flex';
+    });
+  }
+
+  dialogBox(caption, text, buttons, options = {}) {
+    this.caption = caption;
+    this._content.innerHTML = `<p>${text}</p>`;
+    this.buttons = buttons;
+    return this.show(options);
+  }
+
+  messageBox(caption, text, options = {}) {
+    return this.dialogBox(caption, text, [{ caption: '✔', data: 'ok', resolve: true, position: 'center' }], options);
+  }
+
+  confirmationBox(caption, text, options = {}) {
+    return this.dialogBox(caption, text, [
+      { caption: '✔', data: 'yes', resolve: true, position: 'left' },
+      { caption: '❌', data: 'no', resolve: true, position: 'right' }
+    ], options);
+  }
+
+  close(resolve, data = '') {
+    this.style.display = 'none';
+    if (resolve) {
+      this.resolve(data);
+    } else {
+      this.reject(data);
+    }
+  }
+}
+customElements.define('modal-dialog', ModalDialog);

data/app/assets/javascripts/frontpack/shortcuts.js

@@ -0,0 +1,63 @@
+'use strict';
+
+window.Shortcut = {
+  _registeredActions: new Map(),
+  _registeredShortcuts: new Map(),
+  _actionNameIndex: 0,
+
+  _parseShortcut(shortcut) {
+    if (!/^(?:(ctrl|alt|shift)\+){0,3}[a-z0-9]+$/i.test(shortcut)) {
+      throw new Error('Invalid shortcut combination');
+    }
+  },
+
+  onKeyUp(event) {
+    let { ctrlKey, shiftKey, altKey, code } = event;
+    let tokens = [];
+    if (ctrlKey) { tokens.push('ctrl'); }
+    if (altKey) { tokens.push('alt'); }
+    if (shiftKey) { tokens.push('shift'); }
+    tokens.push(code.toLowerCase().replace(/(key|digit)/, ''));
+    let shortcut = tokens.join('+').toLowerCase();
+
+    if (this._registeredShortcuts.has(shortcut)) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.execute(this._registeredShortcuts.get(shortcut));
+    }
+  },
+
+  nextActionName() {
+    this._actionNameIndex++;
+    return `Action${this._actionNameIndex}`;
+  },
+
+  execute(name) {
+    this._registeredActions.get(name)();
+  },
+
+  /**
+   * Register a named action with an optional shortcut
+   * @param {String} name Action name
+   * @param {CallableFunction} callback Action to be executed
+   * @param {String} shortcut Any shortcut to listen globally
+   */
+  registerAction(name, callback, shortcut = null) {
+    this._registeredActions.set(name, callback);
+    if (shortcut) {
+      this._parseShortcut(shortcut.toLowerCase());
+      this._registeredShortcuts.set(shortcut.toLowerCase(), name);
+    }
+  },
+
+  start() {
+    document.addEventListener('keydown', this.onKeyUp.bind(this));
+    let elements = document.querySelectorAll('[shortcut]');
+    for (let element of elements) {
+      let actionName = this.nextActionName();
+      this.registerAction(actionName, element.click.bind(element), element.getAttribute('shortcut'));
+    }
+  }
+};
+
+export default Shortcut;

data/app/assets/javascripts/frontpack/tab-control.js

@@ -0,0 +1,77 @@
+class TabNav extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `<slot></slot>`;
+    this.currentTab = null;
+  }
+
+  connectedCallback() {
+    this.addEventListener('tabshow', this.onTabClick.bind(this));
+  }
+
+  onTabClick(event) {
+    if (this.currentTab) {
+      this.currentTab.active = false;
+    }
+    this.currentTab = event.detail.tab;
+    this.currentTab.active = true;
+  }
+}
+customElements.define('tab-nav', TabNav);
+
+class TabButton extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `<slot></slot>`;
+  }
+
+  connectedCallback() {
+    this.addEventListener('click', this.onClick.bind(this));
+    this._target = document.getElementById(this.target);
+    if (this.hasAttribute('active')) {
+      this.active = true;
+      this.dispatchClickEvent();
+    } else {
+      this.active = false;
+    }
+  }
+
+  get target() {
+    return this.getAttribute('target');
+  }
+
+  set target(value) {
+    this.setAttribute('target', value);
+    this._target = document.getElementById(value);
+  }
+
+  get active() {
+    return this.hasAttribute('active');
+  }
+
+  set active(value) {
+    if (value) {
+      this.setAttribute('active', 'true');
+      this._target.style.zIndex = '10';
+    } else {
+      this.removeAttribute('active');
+      this._target.style.zIndex = '0';
+    }
+  }
+
+  onClick() {
+    if (this.active) {
+      return;
+    }
+
+    this.dispatchClickEvent();
+  }
+
+  dispatchClickEvent() {
+    let event = new CustomEvent('tabshow', { cancelable: true, bubbles: true, detail: { tab: this } });
+    this.dispatchEvent(event);
+  }
+}
+customElements.define('tab-button', TabButton);

data/app/assets/javascripts/frontpack/text-box.js

@@ -0,0 +1,70 @@
+class TextBox extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `
+<style>
+  :host {
+    display: none;
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: auto;
+    align-items: center;
+    align-content: center;
+    grid-gap: .5rem;
+    padding: .5rem;
+  }
+  
+  i, button {
+    border: none;
+    background: none;
+    font-family: "Material Icons";
+    font-style: normal;
+    font-size: 1.2rem;
+    color: inherit;
+  }
+</style>
+<i></i>
+<div><slot></slot></div>
+<button type="button">close</button>
+`;
+  }
+
+  connectedCallback() {
+    this._icon = this.shadowRoot.querySelector('i');
+    this._icon.innerText = this.icon;
+    this._closeButton = this.shadowRoot.querySelector('button');
+    this._closeButton.addEventListener('click', this.close.bind(this));
+    this.persistent = this.hasAttribute('persistent');
+
+    if (this.persistent && this.hasAttribute('id')) {
+      let key = `${document.location.pathname.substring(1)}#${this.id}`;
+      if (localStorage.getItem(key) === 'true') {
+        return;
+      }
+    }
+    this.open();
+  }
+
+  get icon() {
+    return this.getAttribute('icon');
+  }
+
+  set icon(value) {
+    this.setAttribute('icon', value);
+    this._icon.innerText = value;
+  }
+
+  open() {
+    this.style.display = 'grid';
+  }
+
+  close() {
+    this.style.display = 'none';
+
+    if (this.persistent && this.hasAttribute('id')) {
+      let key = `${document.location.pathname.substring(1)}#${this.id}`;
+      localStorage.setItem(key, 'true');
+    }
+  }
+}
+customElements.define('text-box', TextBox);

data/app/assets/javascripts/frontpack/toggle-button.js

@@ -0,0 +1,73 @@
+class ToggleButton extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({mode: 'open'});
+    shadowRoot.innerHTML = '<slot></slot>';
+  }
+
+  connectedCallback() {
+    this.mode = this.getAttribute('mode');
+
+    if (this.mode === 'copy') {
+      this.addEventListener('click', this.copy.bind(this));
+    } else {
+      this.addEventListener('click', this.toggle.bind(this));
+    }
+  }
+
+  target() {
+    if (!this._target) {
+      this._target = document.getElementById(this.getAttribute('target'));
+    }
+
+    return this._target;
+  }
+
+  render() {
+    if (this.state) {
+      this.target().classList.remove(this.hiddenClass)
+      this.target().classList.add(this.visibleClass)
+    } else {
+      this.target().classList.remove(this.visibleClass)
+      this.target().classList.add(this.hiddenClass)
+    }
+  }
+
+  copy () {
+    const target = this.target()
+
+    if (typeof target.value !== 'undefined') {
+      navigator.clipboard.writeText(target.value)
+    } else {
+      navigator.clipboard.writeText(target.innerText)
+    }
+  }
+
+  toggle() {
+    this.state = !this.state;
+  }
+
+  get state() {
+    return this.hasAttribute('on');
+  }
+
+  set state(value) {
+    if (value) {
+      this.setAttribute('on', value);
+    } else {
+      this.removeAttribute('on');
+    }
+
+    this.render();
+  }
+
+  get visibleClass() {
+    return this.getAttribute('visible-class');
+  }
+
+  get hiddenClass() {
+    return this.getAttribute('hidden-class');
+  }
+}
+
+customElements.define('toggle-button', ToggleButton);