Fix #25 - option for showing custom emoji first

lib/index.ts

@@ -93,11 +93,24 @@ const addStylesheet = (data: {
   callback(null, data);
 };
 
+const configGet = (config: any, next: NodeBack<any>) => {
+  settings.getOne('customFirst', (err, customFirst) => {
+    if (err) {
+      next(err);
+      return;
+    }
+
+    config.emojiCustomFirst = customFirst;
+    next(null, config);
+  });
+};
+
 export {
   init,
   adminMenu,
   composerFormatting,
   plugins,
   parse,
   addStylesheet,
+  configGet,
 };

lib/settings.ts

@@ -8,11 +8,13 @@ const settings: {
 interface Settings {
   parseNative: boolean;
   parseAscii: boolean;
+  customFirst: boolean;
 }
 
 const defaults: Settings = {
   parseNative: true,
   parseAscii: true,
+  customFirst: false,
 };
 
 const get = (callback: NodeBack<{ [key: string]: any }>) => {
@@ -55,14 +57,20 @@ const set = (data: {
 
   settings.set('emoji', sets, callback);
 };
-const getOne = (field: string, callback: NodeBack<any>) => {
-  settings.getOne('emoji', field, (err, val) => {
+const getOne = (field: keyof Settings, callback: NodeBack<any>) => {
+  settings.getOne('emoji', field, (err, str) => {
     if (err) {
       callback(err);
       return;
     }
 
-    callback(null, JSON.parse(val));
+    const defaultVal = defaults[field];
+    let val = JSON.parse(str);
+    if (typeof val !== typeof defaultVal) {
+      val = defaultVal;
+    }
+
+    callback(null, val);
   });
 };
 const setOne = (field: string, value: any, callback: NodeBack<void>) => {

plugin.json

@@ -32,6 +32,7 @@
     { "hook": "filter:parse.post", "method": "parse.post", "priority": 9 },
     { "hook": "action:plugin.activate", "method": "plugins.activation" },
     { "hook": "action:plugin.deactivate", "method": "plugins.deactivation" },
-    { "hook": "filter:meta.getLinkTags", "method": "addStylesheet" }
+    { "hook": "filter:meta.getLinkTags", "method": "addStylesheet" },
+    { "hook": "filter:config.get", "method": "configGet" }
   ]
 }

public/admin.js

@@ -9,6 +9,7 @@ define('admin/plugins/emoji', [], function () {
     var settings = {
       parseAscii: !!$('#emoji-parseAscii').prop('checked'),
       parseNative: !!$('#emoji-parseNative').prop('checked'),
+      customFirst: !!$('#emoji-customFirst').prop('checked'),
     };
     $.get(window.config.relative_path + '/api/admin/plugins/emoji/save', { settings: JSON.stringify(settings) }, function () {
       window.app.alertSuccess();

public/language/en-US/admin/plugins/emoji.json

@@ -2,7 +2,7 @@
   "settings": "Settings",
   "settings.parseAscii": "Replace common ASCII characters like <code>:)</code>, <code>-_-</code>, etc",
   "settings.parseNative": "Replace native unicode emoji characters with emoji provided by emoji packs",
-  "settings.shouldBuild": "Re-build emoji assets on the next forum restart",
+  "settings.customFirst": "Place your custom emoji first in the dialog",
   "build": "Build Emoji Assets",
   "build_description": "Compile the necessary metadata and static assets from all emoji packs. <br> This is usually unnecessary to do yourself, but if emojis aren't showing up, try this first."
 }

public/lib/emoji-dialog.ts

@@ -46,6 +46,10 @@ const priorities: {
   other: 0,
 };
 
+if (window.config.emojiCustomFirst) {
+  priorities.custom = 100;
+}
+
 const translator = Translator.create();
 
 function stringCompare(a: string, b: string) {

public/lib/types.d.ts

@@ -4,6 +4,7 @@ interface Window {
   config: {
     relative_path: string;
     'cache-buster': string;
+    emojiCustomFirst: boolean;
   };
   app: {
     alertSuccess(message?: string): void;

public/templates/admin/plugins/emoji.tpl

@@ -14,6 +14,13 @@
           [[admin/plugins/emoji:settings.parseNative]]
         </label>
       </div>
+
+      <div class="form-group">
+        <label for="emoji-customFirst">
+          <input id="emoji-customFirst" type="checkbox" <!-- IF settings.customFirst --> checked <!-- ENDIF settings.customFirst --> />
+          [[admin/plugins/emoji:settings.customFirst]]
+        </label>
+      </div>
     </div>
 
     <div class="panel-footer">