Simple Inline Editor for Kirby

assets_css_editor.css

input[type="text"],
  textarea {
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    font: inherit;
    line-height: inherit;
    resize: none;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: content-box;
    outline: 1px solid rgba(131, 192, 253, .5);
    outline-offset: 2px;
  }
  
  [editor-field]:not(.is-editing):hover {
    outline: 1px solid rgba(131, 192, 253, .5);
    outline-offset: 2px;
  }
  
  @media (any-hover: none) {
    [editor-field]:not(.is-editing):hover {
      outline: 0;
    }  
  }
  
  button[type="cancel"],
  button[type="submit"] {
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    background: #000;
    color: #fff;
    padding: .35em 1ch;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    margin-top: 1em;
  }
  
  button[type="cancel"] {
    background: transparent;
    color: black;
    padding: calc(.35em - 1px) calc(1ch - 1px);
    border: 1px solid;
  }
  
  button + button {
    margin-left: 1ch;
  }

assets_js_editor.js

jQuery(function($) {
  
  var beforeUnloadCallback = function(e) {
    var dialogText = 'Dialog text here';
    e.returnValue = dialogText;
    return dialogText;
  };
    
  $('[editor-field]').each(function() {
    
    var $this = $(this);
    var originalContent;
    var fieldName = this.getAttribute('editor-field');
    var fieldType  = this.getAttribute('editor-type');
    
    $this.editable(window.location.href, {
      indicator : 'Wird gespeichert …',
      type      : fieldType,
      cancel    : fieldType === 'select' ? '' : 'Abbrechen',
      submit    : fieldType === 'select' ? '' : 'Speichern',
      data      : fieldType === 'select' ? JSON.parse(this.getAttribute('editor-data')) : null,
      tooltip   : 'Klicken zum Bearbeiten …',
      placeholder : '<span class="muted">Text hinzufügen …</span>',
      name      : fieldName,
      id        : 'field',
      onblur    : fieldType === 'select' ? 'submit' : 'ignore',
      width     : '100%',
      height    : 'auto',
      
      callback  : function(result, settings, submitdata) {
        initial[submitdata.field] = submitdata[submitdata.field];
        window.removeEventListener('beforeunload', beforeUnloadCallback);
        $this.removeClass('is-editing');
      },
      
      before    : function() {
        originalContent = $this.html();
        $this[0].textContent = initial[fieldName];
        window.addEventListener('beforeunload', beforeUnloadCallback);
        $this.addClass('is-editing');
      },
      
      onreset   : function() {
        window.removeEventListener('beforeunload', beforeUnloadCallback);
        requestAnimationFrame(function() {
          $this.removeClass('is-editing');
          if(originalContent.trim() !== '') {
            $this.html(originalContent);
          }
        });
      },
      
    });
  });
  
});
  

assets_js_query.jeditable.kirbytext.js

/**
 * Based on autogrow plugin for jquery-jeditable by Mika Tuupola, Nicolas CARP (© 2008 Mika Tuupola, Nicolas CARPi)
 * Released under the MIT License
 * https://github.com/NicolasCARPi/jquery_jeditable
 */
'use strict';
$.editable.addInputType("kirbytext", {
    element : function(settings, original) {
        var textarea = $("<textarea />");
        textarea.attr("spellcheck", "true");
        if (settings.rows) {
            textarea.attr("rows", settings.rows);
        } else {
            textarea.height(settings.height);
        }
        if (settings.cols) {
            textarea.attr("cols", settings.cols);
        } else {
            textarea.width(settings.width);
        }
        $(this).append(textarea);
        return(textarea);
    },
    plugin : function(settings, original) {
        $("textarea", this).autoGrow({
          extraLine: false,
        });
    }
});

site_controllers_default.php

<?php
  
return function($site, $pages, $page) {
  
  if(r::ajax()) {
    
    if(!($user = $site->user())) {
      return 'Error';
    }
  
    if(!empty($_REQUEST['field'])) {
  
      $field = str::slug($_REQUEST['field'], '');
      $value = '';

      
      if(r::method() === 'GET') {
        switch($field) {
          default:
            $value = $page->content()->$field()->value();
            break;
        }
        
      } else if(r::method() === 'POST') {
        
        $page->update([
          $field => $_POST[$field],
        ]);
        
        $value = $page->content()->$field();
        
        switch($field) {
          case 'title':
            $value = $value->html();
            break;
          case 'text':
            $value = $value->kirbytext();
            break;
          default:
            break;
        }
        
      }
      
      header('Content-type: text/plain; charset=utf-8');
      echo $value;
      exit;
    }
  }
  
  return [];
};

site_snippets_header.php

<head>

  […]

  <?php if($user = $site->user()): ?>

    <?= css('assets/css/editor.css') ?>

    <?= js('assets/js/jquery-3.3.1.min.js') ?>
    <?= js('assets/js/jquery.autogrowtextarea.js') ?>
    <?= js('assets/js/jquery.jeditable.min.js') ?>
    <?= js('assets/js/jquery.jeditable.kirbytext.js') ?>

    <script> var initial = <?= json_encode($page->content()->toArray()) ?>; </script>
    <?= js('assets/js/editor.js') ?>

  <?php endif ?>

  […]
  
</head>

site_templates_default.php

<?php snippet('header') ?>

<main role="main">
  <article>
    
    <header>
      <h1><span editor-field="title" editor-type="text" id="title"><?= $page->title()->html() ?></span></h1>
    </header>
  
    <div editor-field="text" editor-type="kirbytext" id="text"><?= $page->text()->kirbytext() ?></div>
    
  </article>
</main>

<?php snippet('footer') ?>