contenteditable.md

App.SiteRoute = Em.Route.extend
  setupController: (controller, site)->
    controller.set("model", site)
    @_super()

Ember.ContenteditableView = Em.View.extend({
	tagName: 'div',
	attributeBindings: ['contenteditable'],

	// Variables:
	editable: false,
	isUserTyping: false,
	plaintext: false,

	// Properties:
	contenteditable: (function() {
		var editable = this.get('editable');

		return editable ? 'true' : undefined;
	}).property('editable'),

	// Observers:
	valueObserver: (function() {
		if (!this.get('isUserTyping') && this.get('value')) {
			return this.setContent();
		}
	}).observes('value'),

	// Events:
	didInsertElement: function() {
		return this.setContent();
	},

	focusOut: function() {
		return this.set('isUserTyping', false);
	},

	keyDown: function(event) {
		if (!event.metaKey) {
			return this.set('isUserTyping', true);
		}
	},

	keyUp: function(event) {
		if (this.get('plaintext')) {
			return this.set('value', this.$().text());
		} else {
			return this.set('value', this.$().html());
		}
	},

	setContent: function() {
		return this.$().html(this.get('value'));
	}
});

App.EditableTitle = Em.ContenteditableView.extend
  disableEnter: true

  placeHolder: ""

  doubleClick: ()->
    @set("editable",true)

  focusOut: ()->
    @set("editable",false)
    @_super()

  keyDown: (event)->
    if event.keyCode is 13 and @disableEnter
      @set("editable", false)
      return false

    @_super(event)

  setContent: ->
    @_super()
    @.$().html(@get("value") || @placeHolder)

= view App.EditableTitle valueBinding="controller.title" tagName="h1"
= view App.EditableTitle valueBinding="controller.description" disableEnter=false placeHolder="Enter some text"