Inline edit mithril component

inlineedit.js

'use strict';

var m = require('mithril');
var extend = require('lodash').extend;
var setFocus = require('../util/viewhelper').setFocus;
var keymage = require('keymage');

function noop(){}

function addClass(el, className) {
  if (el.attrs.className) {
    el.attrs.className += ' ' + className;
  } else {
    el.attrs.className = className;
  }
}

function inlineEdit(value, options) {
  options = extend({
    onSave: noop,
    onChange: noop,
    onCancel: noop,
    onStartEdit: noop,
    onNothingDone: noop
  }, options);

  var scope = {
    isEditing: false,
    value: value,
    previousValue: value
  };

  function bindKeys() {
    keymage('enter', scope.save);
    keymage('esc', scope.cancel);
  }

  function unbindKeys() {
    keymage.unbind('enter', scope.save);
    keymage.unbind('esc', scope.cancel);
  }

  scope.startEdit = function() {
    bindKeys();
    scope.previousValue = scope.value;
    scope.isEditing = true;
    options.onStartEdit(scope.value);
  };

  scope.save = function() {
    unbindKeys();
    scope.isEditing = false;
    if (scope.previousValue === scope.value) {
      options.onNothingDone(scope.value);
      return;
    }
    scope.previousValue = scope.value;
    options.onSave(scope.value);
  };

  scope.cancel = function() {
    m.startComputation();
    unbindKeys();
    scope.value = scope.previousValue;
    scope.isEditing = false;
    options.onCancel(scope.value);
    m.endComputation();
  };

  scope.setValue = function(event) {
    scope.value = event.target.value;
    options.onChange(scope.value);
  };

  var view = function(els) {
    if (scope.isEditing) {
      els = extend({
        input: m('input'),
        save: m('button', 'save'),
        cancel: m('button', 'cancel')
      }, els);
      els.input.attrs.oninput = scope.setValue;
      els.input.attrs.value = scope.value;
      els.input.attrs.config = setFocus;
      els.save.attrs.onclick = scope.save;
      els.cancel.attrs.onclick = scope.cancel;
      return [
        m('.inlineEdit.overlay', {
          onclick: scope.save
        }),
        m('.inlineEdit', [
          els.input,
          els.save,
          els.cancel
        ])
      ];
    }

    els.show = els.show || m('div');
    els.edit = els.edit || m('button', 'edit');
    els.show.attrs.onclick = els.edit.attrs.onclick = scope.startEdit;
    els.show.children = [
      scope.value,
      els.edit
    ];
    addClass(els.show, 'inlineEdit show');
    return [
      els.show,
    ];
  };
  view.__defineSetter__('value', function(value) {
    scope.value = value;
  });
  return view;
}

module.exports = inlineEdit;

mymodule.js

var inlineEdit = require('./inlineedit');
var m = require('mithril');

function controller() {
  var user = {
    name: m.prop('Paul')
    save: function() {
      alert('saved!');
    }
  };
  scope.nameEditor = inlineEdit(user.name(), {
    onChange: user.name,
    onSave: user.save
  });
}

function view(scope) {
  return m('main', scope.nameEditor({
    show: m('h1'), // default to m('div') but can be overwritten with configuration
    edit: m('button', 'bearbeiten'), // defaults to m('button', 'edit')
    // ...
  }));
}