meemo-app/frontend/templates/thing.html

A personal ideas, notes or links manager

<script type="text/template" id="thing-template">

  <div class="modal fade" id="modalShare-{{ thing.id }}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
          This note is publicly available at <a href="{{ shareLink }}" target="_blank">{{ shareLink }}</a>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="modalArchive-{{ thing.id }}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
          <h4>What do you want to do with this Note?</h4>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger btn-outline pull-left" @click="deleteThing()">Delete permanently</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-success" @click="toggleArchive()">Archive</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="modalDel-{{ thing.id }}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
          <h4>Do you want to delete this Note permanently?</h4>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
          <button type="button" class="btn btn-danger" @click="deleteThing()">Yes</button>
        </div>
      </div>
    </div>
  </div>

  <div class="well" id="card-{{ thing.id }}" :class="{ edit: thing.edit }">
    <div class="card-actions">
      {{ thing.modifiedAt | prettyDateOffset }}
      <span v-show="thing.edit">
        <button class="btn btn-default" title="Insert Image" @click="triggerUploadFileInput()"><i class="fa fa-image"></i></button>
        &nbsp;
        <a class="btn btn-default" title="Cheatsheet" href="#modalCheatSheet" data-toggle="modal"><i class="fa fa-keyboard-o"></i></a>
        &nbsp;
        <button class="btn btn-default" @click="cancelEdit()" title="Cancel"><i class="fa fa-times"></i></button>
        &nbsp;
        <button class="btn btn-default" @click="saveEdit()" title="Save (Ctrl+S)"><i class="fa fa-check"></i></button>
        <div class="progress" v-show="uploadProgress > -1"><div class="progress-bar" role="progressbar" style="min-width: 12em; width: {{ uploadProgress }}%">Uploading files...{{ uploadProgress }}%</div></div>
      </span>
      <span v-show="!thing.edit">
        <button class="btn btn-default" @click="toggleSticky()" title="{{ thing.sticky ? 'Remove sticky' : 'Make sticky' }}" v-show="!thing.archived"><i class="fa" :class="{ 'fa-sticky-note': thing.sticky, 'fa-sticky-note-o': !thing.sticky }"></i></button>
        <button class="btn btn-default" @click="togglePublic()" title="{{ thing.public ? 'Make private' : 'Make public' }}" v-show="!thing.archived"><i class="fa" :class="{ 'fa-eye': thing.public, 'fa-eye-slash': !thing.public }"></i></button>
        <button class="btn btn-default" @click="showShareLink()" title="Share" v-show="!thing.archived"><i class="fa fa-share-alt"></i></button>
        <button class="btn btn-default" @click="showArchive()" title="Archive or delete" v-show="!thing.archived"><i class="fa fa-trash"></i></button>
        <button class="btn btn-default" @click="showDelete()" title="Delete" v-show="thing.archived"><i class="fa fa-trash"></i></button>
        <button class="btn btn-default" @click="toggleArchive()" title="Restore from archive" v-show="thing.archived"><i class="fa fa-reply"></i></button>
        <button class="btn btn-default" @click="showEdit()" title="Edit"><i class="fa fa-pencil"></i></button>
      </span>
    </div>
    <div class="card-content">
      <input type="file" id="fileUpload-{{ thing.id }}" @change="uploadFileChanged($event)" class="hide" multiple>
      <div v-show="!busy && thing.edit" @dragover="preventEventBubble" @drop="dropOrPasteHandler" @paste="dropOrPasteHandler"><textarea v-model="thing.content" id="{{ 'textarea-' + thing.id }}" style="height: 200px" @keyup.esc.stop.prevent="cancelEdit()"></textarea></div>
      <div class="thing-content" v-show="!busy && !thing.edit">{{{ thing.richContent | markdown }}}</div>
      <div class="propose-tags" v-show="thing.edit">
        <div class="item" v-for="tag in $root.tags | proposeTagsThingsEdit thing.content thing.id">
          <a href="#" @click.prevent="activateProposedTag(tag)">#{{ tag.name }}</a>
        </div>
      </div>
      <div v-show="busy"><center><i class="spinner large"></i><br/><br/></center></div>
    </div>
  </div>
</script>

<script type="text/javascript"><%- include thing.js %></script>