From 190e34d513eb188e64f8b463dce0f4d6b8fcd70c Mon Sep 17 00:00:00 2001
From: OldHawk <taobataoma@gmail.com>
Date: Tue, 12 Dec 2017 17:27:27 +0800
Subject: [PATCH] feat(chat): emoji support on maker group create popup side
 overlay

#20
---
 modules/about/client/less/about.less          |  3 +-
 .../collections/client/less/collections.less  |  3 +-
 .../torrent-info.client.controller.js         | 49 +++++++++++++++++++
 .../views/view-torrent.client.view.html       | 13 +++--
 4 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/modules/about/client/less/about.less b/modules/about/client/less/about.less
index 88650e6f..2510966b 100644
--- a/modules/about/client/less/about.less
+++ b/modules/about/client/less/about.less
@@ -169,7 +169,7 @@
         width: 100%;
         height: ~"calc(100% - 50px)";
         overflow: auto;
-        padding: 30px 15px;
+        padding: 30px 10px;
         .maker-form {
             margin-top: 20px;
             input {
@@ -192,7 +192,6 @@
         bottom: 0;
         padding: 8px 10px;
     }
-
 }
 
 .maker-view-top {
diff --git a/modules/collections/client/less/collections.less b/modules/collections/client/less/collections.less
index feb38cbf..178cd03b 100644
--- a/modules/collections/client/less/collections.less
+++ b/modules/collections/client/less/collections.less
@@ -13,7 +13,7 @@
         width: 100%;
         height: ~"calc(100% - 50px)";
         overflow: auto;
-        padding: 30px 15px;
+        padding: 30px 10px;
         .collection-form {
             margin-top: 20px;
             input {
@@ -21,7 +21,6 @@
             }
             textarea {
                 resize: vertical;
-                margin-top: 20px;
                 width: 100%;
                 min-height: 200px;
             }
diff --git a/modules/torrents/client/controllers/torrent-info.client.controller.js b/modules/torrents/client/controllers/torrent-info.client.controller.js
index 8ae15771..b6c8e183 100644
--- a/modules/torrents/client/controllers/torrent-info.client.controller.js
+++ b/modules/torrents/client/controllers/torrent-info.client.controller.js
@@ -202,6 +202,55 @@
       SideOverlay.close(null, 'tagsPopupSlide');
     };
 
+    /**
+     * initOverviewComplete
+     */
+    vm.initOverviewComplete = function () {
+      $('.overview-textarea').textcomplete([
+        { // emoji strategy
+          match: /\B:([\-+\w]*)$/,
+          search: function (term, callback) {
+            callback($.map(window.emojies, function (emoji) {
+              return emoji.indexOf(term) === 0 ? emoji : null;
+            }));
+          },
+          template: function (value) {
+            return '<img class="ac-emoji" src="/graphics/emojis/' + value + '.png" />' + '<span class="ac-emoji-text">' + value + '</span>';
+          },
+          replace: function (value) {
+            return ':' + value + ': ';
+          },
+          index: 1
+        }
+      ]);
+    };
+
+    /**
+     * onOverviewKeyDown
+     * @param e
+     */
+    vm.onOverviewKeyDown = function (e) {
+      if (e.keyCode === 27) { // ESC
+        var hasPopupMenu = false;
+        var emojiMenu = $('.textcomplete-dropdown');
+        angular.forEach(emojiMenu, function (e) {
+          if (e.style.display === 'block') {
+            hasPopupMenu = true;
+          }
+        });
+        if (hasPopupMenu) {
+          e.stopPropagation();
+        }
+      }
+    };
+
+    /**
+     * onPopupMessageOpen
+     */
+    vm.onPopupMessageOpen = function () {
+      $('#coll-name').focus();
+    };
+
     /**
      * setTorrentTags
      */
diff --git a/modules/torrents/client/views/view-torrent.client.view.html b/modules/torrents/client/views/view-torrent.client.view.html
index 9c22266a..e85f8c5f 100644
--- a/modules/torrents/client/views/view-torrent.client.view.html
+++ b/modules/torrents/client/views/view-torrent.client.view.html
@@ -436,18 +436,21 @@
     <!-- =================================================================
         side-overlay collections create
     ================================================================== -->
-    <div id="collectionsCreateSlide" side-overlay="right" side-class="collections-side-overlay" side-close-on-esc side-modal>
-        <div class="collection-popup">
+    <div id="collectionsCreateSlide" side-overlay="right" side-class="collections-side-overlay" side-opened="vm.onPopupMessageOpen();"
+         side-close-on-esc side-modal>
+        <div class="collection-popup" ng-init="vm.initOverviewComplete();">
             <legend class="h4"
                     translate="COLLECTIONS.FORM_FOR" translate-values="{cid: vm.torrentLocalInfo.resource_detail_info.belongs_to_collection.id}">
             </legend>
 
             <div class="collection-form">
-                <input type="text" class="form-control" id="name" placeholder="{{'COLLECTIONS.FORM_NAME' | translate}}"
+                <input type="text" class="form-control margin-bottom-10" id="coll-name" placeholder="{{'COLLECTIONS.FORM_NAME' | translate}}"
                        ng-model="vm.collection.name" autofocus>
 
-                <textarea class="form-control" id="overview" placeholder="{{'COLLECTIONS.FORM_DESC' | translate}}"
-                          ng-model="vm.collection.overview"></textarea>
+                <textarea class="form-control overview-textarea" id="overview-textarea" name="overview-textarea"
+                          ng-model="vm.collection.overview" data-hidden-buttons="cmdPreview" ng-keydown="vm.onOverviewKeyDown($event);"
+                          placeholder="{{'COLLECTIONS.FORM_DESC' | translate}}"
+                          mt-markdown-editor="overview-textarea"></textarea>
 
                 <div class="margin-top-10" style="display: table;">
                     <a class="message-extra" href="https://guides.github.com/features/mastering-markdown/" target="_blank"