hugo/public/js/editor.js

   1 /**
   2 * @file      editor.js
   3 * @author    Ken Grimes
   4 * @license   AGPL-3.0
   5 * @copyright 2018 - Ken Grimes
   6 * @summmary  live edit front-end for fediblog
   7 */
   8 'use strict'
   9
  10 const apiURL = document.location.origin + '/api/'
  11 const baseURL = document.location.origin
  12
  13 const addButton = (anchor, name, fn) => {
  14   const button = document.createElement('button')
  15   const buttonText = document.createTextNode(name)
  16   button.appendChild(buttonText)
  17   button.onclick = () => fn(button)
  18   if (anchor.firstChild)
  19     anchor.insertBefore(button,anchor.firstChild)
  20   else
  21     anchor.appendChild(button)
  22   return button
  23 }
  24
  25 const logout = () => {
  26   document.cookie = 'live-edit=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
  27   window.location.reload(true)
  28 }
  29
  30 const doDelete = (btn) => {
  31   const element = btn.parentElement
  32   const fileName = 'content/' + element.id
  33   if (window.confirm(`Do you really want to delete ${element.id}?`))
  34     fetch(apiURL + fileName, {credentials: 'same-origin', method: 'DELETE'}).then((resp) => {
  35       if (resp.ok)
  36         window.location.href = window.location.href + ".."
  37       else if (resp.status === 401)
  38         logout()
  39       else
  40         console.log(resp)
  41     })
  42 }
  43
  44 const doCancel = (btn) => {
  45   const element = btn.parentElement
  46   element.innerHTML = element.oldHTML
  47 }
  48
  49 const doCommit = (btn) => {
  50   const element = btn.parentElement
  51   const fileName = 'content/' + element.id
  52   const textArea = element.getElementsByTagName('textarea').item(0)
  53   fetch(apiURL + fileName, {credentials: 'same-origin', method: 'POST', body: textArea.value}).then((resp) => {
  54     if (resp.ok)
  55       window.location.reload(true)
  56     else if (resp.status === 401)
  57       logout()
  58     else
  59       console.log(resp)
  60   })
  61 }
  62
  63 const doCommitPost = (btn) => {
  64   const element = btn.parentElement
  65   const nameBox = element.getElementsByTagName('input').item(0)
  66   if (nameBox.value === '') {
  67     window.alert('Filename is required')
  68     return
  69   }
  70   const secMatch = window.location.href.match(new RegExp(baseURL + '(.*/)'))
  71   const section = secMatch ? secMatch[1] : ''
  72   const fileName = 'content/' + section + nameBox.value + '.md'
  73   const textArea = element.getElementsByTagName('textarea').item(0)
  74   fetch(apiURL + fileName, {credentials: 'same-origin', method: 'POST', body: textArea.value}).then((resp) => {
  75     if (resp.ok)
  76       window.location.reload(true)
  77     else if (resp.status === 401)
  78       logout()
  79     else
  80       console.log(resp)
  81   })
  82 }
  83
  84 const doPost = (btn) => {
  85   const element = btn.parentElement
  86   element.oldHTML = element.innerHTML
  87   element.innerHTML =
  88     '<button onclick=doCommitPost(this)>commit</button>' +
  89     '<button onclick=doCancel(this)>cancel</button><br>' +
  90     'Filename: <input type="text" />' +
  91     '<textarea cols=80 rows=60></textarea>'
  92 }
  93
  94 const doEdit = (btn) => {
  95   const element = btn.parentElement
  96   const fileName = 'content/' + element.id
  97   fetch(apiURL + fileName, {credentials: 'same-origin'}).then((resp) => {
  98     if (resp.status === 401)
  99       logout()
 100     else if (resp.ok)
 101       resp.text().then((txt) => {
 102         element.oldHTML = element.innerHTML
 103         element.innerHTML =
 104           '<button onclick=doCommit(this)>commit</button>' +
 105           '<button onclick=doDelete(this)>delete</button>' +
 106           '<button onclick=doCancel(this)>cancel</button><br>' +
 107           '<textarea cols=80 rows=60>' +
 108           txt +
 109           '</textarea>'
 110       })
 111     else
 112       console.log(resp)
 113   })
 114 }
 115
 116 const editTools = () => {
 117   const article = document.body.getElementsByTagName('article').item(0)
 118   addButton(article, 'new page', doPost)
 119   addButton(article, 'edit', doEdit)
 120 }