editable.less

.editable {
  padding: 4px 8px;
  input, textarea {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #aaa;
    text-shadow: 0 1px 0 #666;
  }
  textarea {
    height: 68px;
  }
  .output {
    display: block;
  }
  .alert {
    margin-left: -8px !important;
    margin-top: 8px !important;
    position: absolute;
    font-size: 12px;
    font-weight: normal;
    padding: 2px 12px;
  }
}
.editable:hover {
  padding: 2px 6px;
  border: 2px dashed rgba(200, 200, 200, 0.2);
}
.editable.empty {
  color: rgba(200, 200, 200, 0.2);
}
.editable.editing {
  padding: 2px 6px;
  border: 2px dashed rgba(200, 200, 200, 0.5);
  input, textarea {
    display: block;
  }
  .output {
    display: none;
  }
}

show.coffee

class Hao.Clip.Views.PiecesShow extends Backbone.View

  id: "pieces-show"

  events:
    "click a.close": "backToClip"

  initialize: ->
    @model.on 'change', @render, this

  leave: ->
    $(window).unbind '.piecesshow'
    @model.off null, null, this

  render: ->
    self = this
    @$el.html JST['clip/pieces/show']()
    if @model.get 'can_manage?'
      @initEditable '.name',        'name'
      @initEditable '.description', 'description', { ml: true }
    else
      @$('.name').text        @model.escape('name')
      @$('.description').html Hao.Helpers.ml_content(@model.escape('description'))
    Hao.Helpers.user_link @$('a.creator'), @model.get('creator')
    Hao.Helpers.abbr_ago @$('abbr.created_at'), @model.get('created_at')
    @renderContent()
    @$el.show()
    this

  renderContent: ->
    self = this
    $content = @$('.cter .wrper .cnt')
    $content.hide()
    switch @model.get('type')
      when 'image'
        $obj = $('<img src="'+@model.file('image')+'" />')
        $content.data 'size',
          w: @model.get('file_info').width
          h: @model.get('file_info').height
        $content.empty().append $obj
    $obj.load ->
      self.centerContainer()
    @centerContainer()
    $(window).bind 'resize.piecesshow', @centerContainer

  centerContainer: ->
    $container  =   @$('.cter')
    $wrper      =   @$('.cter .wrper')
    $content    =   @$('.cter .wrper .cnt') # css read only!
    c_height = $(window).height() - @$('header').outerHeight() - @$('footer').outerHeight()
    $container.css 'height': c_height
    container_size =
      w: $container.width() - 20
      h: c_height - 20
    content_size = $content.data 'size'
    fill_to_h = ->
      $wrper.css 'width',   container_size.h  / content_size.h * content_size.w
      $wrper.css 'height',  container_size.h
    fill_to_w = ->
      $wrper.css 'width',   container_size.w
      $wrper.css 'height',  container_size.w / content_size.w * content_size.h
    full_size = ->
      $wrper.css 'width',   content_size.w
      $wrper.css 'height',  content_size.h
    if ( content_size.h > container_size.h ) && ( content_size.w > container_size.w )
      if ( content_size.h / container_size.h ) > ( content_size.w / container_size.w )
        fill_to_h()
      else
        fill_to_w()
    else if content_size.h > container_size.h
      fill_to_h()
    else if content_size.w > container_size.w
      fill_to_w()
    else
      full_size()
    top = (container_size.h - $wrper.height()) / 2
    top = 10 if top < 10
    $wrper.css 'margin-top',  top
    $content.show()

  initEditable: (selector, key, options = {}) ->
    self = this
    $el = @$(selector)
    val = @model.escape(key)
    $el.addClass 'editable'
    if val == ''
      output = 'Click to input ' + key
      $el.addClass 'empty'
    else
      output = val
    if options['ml']
      $input = $('<textarea />')
      output = Hao.Helpers.ml_content(output)
    else
      $input = $('<input />')
      $input.bind 'keyup', (e) ->
        if e.keyCode is 13
          $input.blur()
    $output = $('<div class="output">'+output+'</div>')
    $el.append($output).append($input)
    $input.val(val)
    $input.bind 'blur', (e) ->
      if $el.hasClass 'editing'
        new_val = $input.val()
        if new_val != val
          self.model.save key, new_val,
            error: (model, error)->
              $el.find('.alert').remove()
              $el.append '<div class="alert alert-error">' + jQuery.parseJSON(error.responseText).errors[key].join('<br />') + '</div>'
        else
          $el.removeClass 'editing'
    $el.bind 'click', (e) ->
      $el.addClass('editing')
      $input.focus()

  backToClip: ->
    Backbone.history.navigate @collection.url, { trigger: true }

show.hamlc

.wrper
  %header
    .wrper
      %h3.fl.name
      %a.close ×
  %section.cter
    .wrper
      .cnt
  %footer
    .wrper
      .description
      %a.creator
      created at
      %abbr.created_at