pages/components/page-actions.js

export class PageActions {
  textEn = {
    download: 'Download',
    rename: 'Move/Rename',
    duplicate: 'Duplicate',
    delete_: 'Delete',
    confirmDelete: f => (
      `Are you sure you want to delete ${f}?`
    ),
    cancel: 'Cancel',
    alreadyExists: 'There is already a page with that name.',
  }

  textEs = {
    download: 'Descargar',
    rename: 'Mover/Renombrar',
    duplicate: 'Duplicar',
    delete_: 'Borrar',
    confirmDelete: f => (
      `¿Desea borrar ${f}?`
    ),
    cancel: 'Cancelar',
    alreadyExists: 'Ya existe una página con ese nombre.',
  }

  constructor() {
    this.language = navigator.language
    this.menuActions = [
      {
        text: this.text.download,
        click: this.download.bind(this),
      },
      {
        text: this.text.rename,
        click: this.rename.bind(this),
      },
      {
        text: this.text.duplicate,
        click: this.duplicate.bind(this),
      },
      {
        text: this.text.delete_,
        click: this.delete_.bind(this),
      },
    ]
  }

  download() {
    const text = localStorage.getItem(this.path)
    const sp = this.path.split('/')
    const filename = sp[sp.length - 1]
    const el = document.createElement('a')
    el.setAttribute(
      'href',
      'data:text/plain;charset=utf-8,' +
      encodeURIComponent(text)
    )
    el.setAttribute('download', filename)
    el.style.display = 'none'
    this.shadowRoot.appendChild(el)
    el.click()
    this.shadowRoot.removeChild(el)
  }

  rename() {
    const dialog = document.createElement(
      'm-dialog'
    )
    this.dialogWrap.replaceChildren(dialog)
    const input = document.createElement('input')
    input.value = this.path
    input.style.minWidth = '300px'
    dialog.bodyEl.appendChild(input)
    let errorEl
    const bGroup = document.createElement(
      'm-forms-button-group'
    )
    bGroup.addPrimary(this.text.rename, () => {
    const newPath = input.value
    const v = localStorage.getItem(newPath)
    if (v !== null || newPath === this.path) {
      if (!errorEl) {
        errorEl = document.createElement('p')
        errorEl.style.color = 'red'
        const errText = this.text.alreadyExists
        errorEl.innerText = errText
        dialog.bodyEl.appendChild(errorEl)
      }
      return
    }
    localStorage.setItem(
        newPath,
        localStorage.getItem(this.path)
      )
      localStorage.removeItem(this.path)
      dialog.close()
      location.hash = newPath
    })
    bGroup.addCancel(this.text.cancel, () => {
      dialog.close()
    })
    dialog.footerEl.appendChild(bGroup)
    dialog.open()
  }

  duplicate() {
    const dialog = document.createElement(
      'm-dialog'
    )
    this.dialogWrap.replaceChildren(dialog)
    const input = document.createElement('input')
    input.value = this.path
    input.style.minWidth = '300px'
    dialog.bodyEl.appendChild(input)
    let errorEl
    const bGroup = document.createElement(
      'm-forms-button-group'
    )
    const btnText = this.text.duplicate
    bGroup.addPrimary(btnText, () => {
      const newPath = input.value
      const v = localStorage.getItem(newPath)
      if (v !== null || newPath === this.path) {
        if (!errorEl) {
          errorEl = document.createElement('p')
          errorEl.style.color = 'red'
          const errText = this.text.alreadyExists
          errorEl.innerText = errText
          dialog.bodyEl.appendChild(errorEl)
        }
        return
      }
      localStorage.setItem(
        newPath,
        localStorage.getItem(this.path)
      )
      dialog.close()
      location.hash = newPath
    })
    bGroup.addCancel(this.text.cancel, () => {
      dialog.close()
    })
    dialog.footerEl.appendChild(bGroup)
    dialog.open()
  }

  delete_() {
    const dialog = document.createElement(
      'm-dialog'
    )
    this.dialogWrap.replaceChildren(dialog)
    const p = document.createElement('p')
    p.innerText = this.text.confirmDelete(
      JSON.stringify(this.path)
    )
    dialog.bodyEl.appendChild(p)

    const bGroup = document.createElement(
      'm-forms-button-group'
    )
    bGroup.addPrimary(this.text.delete_, () => {
      localStorage.removeItem(this.path)
      location.hash = '/'
      dialog.close()
    })
    bGroup.addCancel(this.text.cancel, () => {
      dialog.close()
    })
    dialog.footerEl.appendChild(bGroup)
    dialog.open()
  }

  get language() {
    return this._language
  }

  set language(language) {
    this._language = language
    this.text = this.langEs ? this.textEs : this.textEn
  }

  get langEs() {
    return /^es\b/.test(this.language)
  }
}