Newer
Older
GitBucket / src / main / twirl / gitbucket / core / helper / attached.scala.html
@Naoki Takezoe Naoki Takezoe on 9 Jul 2016 2 KB Add user name completion in the textarea
@(owner: String, repository: String, generateScript: Boolean = true)(textarea: Html)(implicit context: gitbucket.core.controller.Context)
@import context._
@import gitbucket.core.util.FileUtil
<div class="muted attachable">
  @textarea
  <div class="clickable">Attach images or documents by dragging &amp; dropping, or selecting them.</div>
</div>
@defining("(id=\")([\\w\\-]*)(\")".r.findFirstMatchIn(textarea.body).map(_.group(2))){ textareaId =>
<script>
$(function(){
  var emojis = @Html(gitbucket.core.util.EmojiUtil.emojis.map("\"" + _ + "\"").mkString("[", ", ", "]"));
  var users  = [];

  $.get('@path/_user/proposals', { query: '' }, function (data) { users = data.options; });

  $('#@textareaId').textcomplete([
    { // emoji strategy
      id: 'emoji',
      match: /\B:([\-+\w]*)$/,
      search: function (term, callback) {
        callback($.map(emojis, function (emoji) {
          return emoji.indexOf(term) === 0 ? emoji : null;
        }));
      },
      template: function (value) {
        return '<img src="@path/assets/common/images/emojis/' + value + '.png" class="emoji"></img>' + value;
      },
      replace: function (value) {
        return ':' + value + ': ';
      },
      index: 1
    },
    { // users
      id: 'user',
      //words: users,
      match: /\B@@([\-+\w]*)$/,
      search: function (term, callback) {
        callback($.map(users, function (word) {
          return word.indexOf(term) === 0 ? word : null;
        }));
      },
      index: 1,
      replace: function (word) {
        return '@@' + word + ' ';
      }
    }
  ], {
    onKeydown: function (e, commands) {
      if (e.ctrlKey && e.keyCode === 74) { // CTRL-J
        return commands.KEY_ENTER;
      }
    }
  });

  @if(generateScript){
    try {
      $([$('#@textareaId').closest('div')[0], $('#@textareaId').next('div')[0]]).dropzone({
        url: '@path/upload/file/@owner/@repository',
        maxFilesize: 10,
        acceptedFiles: @Html(FileUtil.mimeTypeWhiteList.mkString("'", ",", "'")),
        dictInvalidFileType: 'Unfortunately, we don\'t support that file type. Try again with a PNG, GIF, JPG, DOCX, PPTX, XLSX, TXT, or PDF.',
        previewTemplate: "<div class=\"dz-preview\">\n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress>Uploading your files...</span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
        success: function(file, id) {
          var attachFile = (file.type.match(/image\/.*/) ? '\n![' + file.name.split('.')[0] : '\n[' + file.name) +
            '](@baseUrl/@owner/@repository/_attached/' + id + ')';
          $('#@textareaId').val($('#@textareaId').val() + attachFile);
          $(file.previewElement).prevAll('div.dz-preview').addBack().remove();
        }
      });
    } catch(e) {
      if (e.message !== "Dropzone already attached.") {
        throw e;
      }
    }
  }
});
</script>
}