Last active
October 13, 2015 16:46
-
-
Save StephanHoyer/a1a1df7e87d2ab424f25 to your computer and use it in GitHub Desktop.
Inline edit mithril component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') | |
// ... | |
})); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment