filebrowser/_embed/public/js/editor.js

'use strict';

var editor = {};

editor.textareaAutoGrow = function() {
  let autogrow = function() {
    console.log(this.style.height)
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px';
  }

  let textareas = document.getElementsByTagName('textarea');

  let addAutoGrow = () => {
    Array.from(textareas).forEach(textarea => {
      autogrow.bind(textarea)();
      textarea.addEventListener('keyup', autogrow);
    });
  }

  addAutoGrow();
  window.addEventListener('resize', addAutoGrow)
}

function deleteFrontMatterItem(event) {
  event.preventDefault();
  document.getElementById(this.dataset.delete).remove();
}

function makeFromBaseTemplate(id, type, name, parent) {
  let clone = document.importNode(templates.base.content, true);
  clone.querySelector('fieldset').id = id;
  clone.querySelector('fieldset').dataset.type = type;
  clone.querySelector('h3').innerHTML = name;
  clone.querySelector('.delete').dataset.delete = id;
  clone.querySelector('.delete').addEventListener('click', deleteFrontMatterItem);
  clone.querySelector('.add').addEventListener('click', addFrontMatterItem);

  if (parent.classList.contains("frontmatter")) {
    parent.insertBefore(clone, document.querySelector('div.button.add'));
    return
  }

  parent.appendChild(clone);
}

function makeFromArrayItemTemplate(id, number, parent) {
  let clone = document.importNode(templates.arrayItem.content, true);
  clone.querySelector('[data-type="array-item"]').id = `${id}-${number}`;
  clone.querySelector('input').name = id;
  clone.querySelector('input').id = id;
  clone.querySelector('div.action').dataset.delete = `${id}-${number}`;
  clone.querySelector('div.action').addEventListener('click', deleteFrontMatterItem);
  parent.querySelector('.group').appendChild(clone)
  document.getElementById(`${id}-${number}`).querySelector('input').focus();
}

function makeFromObjectItemTemplate(id, name, parent) {
  let clone = document.importNode(templates.objectItem.content, true);
  clone.querySelector('.block').id = `block-${id}`;
  clone.querySelector('.block').dataset.content = id;
  clone.querySelector('label').for = id;
  clone.querySelector('label').innerHTML = name;
  clone.querySelector('input').name = id;
  clone.querySelector('input').id = id;
  clone.querySelector('.action').dataset.delete = `block-${id}`;
  clone.querySelector('.action').addEventListener('click', deleteFrontMatterItem);

  parent.appendChild(clone)
  document.getElementById(id).focus();
}

function addFrontMatterItemPrompt(parent) {
  return function(event) {
    event.preventDefault();

    let value = event.currentTarget.querySelector('input').value;
    if (value === '') {
      return true;
    }

    closePrompt(event);

    let name = value.substring(0, value.lastIndexOf(':')),
    type = value.substring(value.lastIndexOf(':') + 1, value.length);

    if (type !== "" && type !== "array" && type !== "object") {
      name = value;
    }

    name = name.replace(' ', '_');

    let id = name;

    if (parent.id != '') {
      id = parent.id + "." + id;
    }

    if (type == "array" || type == "object") {
      if (parent.dataset.type == "parent") {
        makeFromBaseTemplate(id, type, name, document.querySelector('.frontmatter'));
        return;
      }

      makeFromBaseTemplate(id, type, name, block);
      return;
    }

    let group = parent.querySelector('.group');

    if (group == null) {
      parent.insertAdjacentHTML('afterbegin', '<div class="group"></div>');
      group = parent.querySelector('.group');
    }

    makeFromObjectItemTemplate(id, name, group);
  }
}

function addFrontMatterItem(event) {
  event.preventDefault();

  let parent = event.currentTarget.parentNode,
  type = parent.dataset.type;

  // If the block is an array
  if (type === "array") {
    let id = parent.id + "[]",
    count = parent.querySelectorAll('.group > div').length,
    fieldsets = parent.getElementsByTagName("fieldset");

    if (fieldsets.length > 0) {
      let itemType = fieldsets[0].dataset.type,
      itemID = parent.id + "[" + fieldsets.length + "]",
      itemName = fieldsets.length;

      makeFromBaseTemplate(itemID, itemType, itemName, parent);
    } else {
      makeFromArrayItemTemplate(id, count, parent);
    }

    return;
  }

  if (type == "object" || type == "parent") {
    let clone = document.importNode(templates.question.content, true);
    clone.querySelector('form').id = tempID;
    clone.querySelector('h3').innerHTML = 'New field';
    clone.querySelector('p').innerHTML = 'Write the field name and then press enter. If you want to create an array or an object, end the name with <code>:array</code> or <code>:object.</code>';
    clone.querySelector('.ok').innerHTML = 'Create';
    clone.querySelector('form').addEventListener('submit', addFrontMatterItemPrompt(parent));
    clone.querySelector('form').classList.add('active')
    document.querySelector('body').appendChild(clone);

    document.querySelector('.overlay').classList.add('active');
    document.getElementById(tempID).classList.add('active');
  }

  return false;
}

document.addEventListener("DOMContentLoaded", (event) => {
  if (!document.getElementById('editor')) return;

  editor.textareaAutoGrow();
  templates.arrayItem = document.getElementById("array-item-template");
  templates.base = document.getElementById('base-template');
  templates.objectItem = document.getElementById("object-item-template");
  templates.temporary = document.getElementById('temporary-template');
  buttons.save = document.querySelector('#save');

  let container = document.getElementById('editor'),
  kind = container.dataset.kind;

  if (kind != 'frontmatter-only') {
    let editor = document.querySelector('.content #ace'),
    mode = editor.dataset.mode,
    textarea = document.querySelector('textarea[name="content"]'),
    aceEditor = ace.edit('ace'),
    options = {
      wrap: true,
      maxLines: Infinity,
      theme: "ace/theme/github",
      showPrintMargin: false,
      fontSize: "1em",
      minLines: 20
    };

    aceEditor.getSession().setMode("ace/mode/" + mode);
    aceEditor.getSession().setValue(textarea.value);
    aceEditor.getSession().on('change', function() {
      textarea.value = aceEditor.getSession().getValue();
    });

    if (mode == "markdown") options.showGutter = false;
    aceEditor.setOptions(options);
  }

  let deleteFrontMatterItemButtons = document.getElementsByClassName('delete');
  Array.from(deleteFrontMatterItemButtons).forEach(button => {
    button.addEventListener('click', deleteFrontMatterItem);
  });

  let addFrontMatterItemButtons = document.getElementsByClassName('add');
  Array.from(addFrontMatterItemButtons).forEach(button => {
    button.addEventListener('click', addFrontMatterItem);
  });

  let saveContent = function() {
    let data = form2js(document.querySelector('form'));

    if (typeof data.content === "undefined" && kind != 'frontmatter-only') {
      data.content = "";
    }

    if (typeof data.content === "number") {
      data.content = data.content.toString();
    }

    let html = buttons.save.querySelector('i').changeToLoading(),
    request = new XMLHttpRequest();

    request.open("PUT", toWebDavURL(window.location.pathname));
    request.setRequestHeader('Kind', kind);
    request.send(JSON.stringify(data));
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        buttons.save.querySelector('i').changeToDone((request.status != 201), html);
      }
    }
  }

  document.querySelector('#save').addEventListener('click', event => {
    event.preventDefault();
    saveContent();
  });

  document.querySelector('form').addEventListener('submit', (event) => {
    event.preventDefault();
    saveContent();
  });

  window.addEventListener('keydown', (event) => {
    if (event.ctrlKey || event.metaKey) {
      switch (String.fromCharCode(event.which).toLowerCase()) {
        case 's':
        event.preventDefault();
        saveContent();
        break;
      }
    }
  });

  return false;
});