guide/templates/item-description.widget

Description
============================================================

The “summary” section of an item.

Required context:

  * item


HTML
============================================================
<div class="item-description">
  <div class="section normal shown noscript-shown">
    <strong>Summary</strong>
    {{> space em=0.5 }}
    {{> small-control
          src    = "/pencil.svg"
          title  = "edit summary"
          class  = "edit-item-description"
          action = [| editItemDescription(
                        {{{%js item.uid.uidToText}}},
                        {{{%js item.description.text}}}); |] }}
    <div class="notes-like">
      {{# item.description.text}}
        {{{item.description.html}}}
      {{/ item.description.text}}
      {{^ item.description.text}}
        <p>write something here!</p>
      {{/ item.description.text}}
    </div>
  </div>

  <div class="section editing">
    <strong>Summary</strong>
    {{> space em=0.5 }}
    {{> small-control
          src    = "/pencil.svg"
          title  = "quit editing summary"
          class  = "edit-item-description"
          action = [| stopEditingItemDescription({{{%js item.uid.uidToText}}}); |] }}
    <div class="editor"></div>
  </div>
</div>


JS
============================================================
function editItemDescription(itemUid, descrText) {
  var descrNode = "#item-" + itemUid + " .item-description";
  switchSection(descrNode, "editing");
  var editor = bigEditor({
    rows: 10,
    text: descrText,
    hint: "or press Ctrl+Enter to save",
    saveAction: function(newDescrText) {
      submitItemDescription(descrNode, itemUid, descrText, newDescrText); },
    cancelAction: function() {
      switchSection(descrNode, "normal"); }
  });
  $(descrNode + " .editor").html(editor);
  focusOn(descrNode + " .editor-area");
}
function stopEditingItemDescription(itemUid) {
  var descrNode = "#item-" + itemUid + " .item-description";
  switchSection(descrNode, "normal");
}