add favourite contextmenu to emote autocomplete

client/src/builtin/EmoteAc.js

@@ -13,6 +13,7 @@ import { Settings } from 'modules';
 import BuiltinModule from './BuiltinModule';
 import EmoteModule from './EmoteModule';
 import GlobalAc from '../ui/autocomplete';
+import { BdContextMenu } from 'ui';
 
 const EMOTE_SOURCES = [
     'https://static-cdn.jtvnw.net/emoticons/v1/:id/1.0',
@@ -28,10 +29,40 @@ export default new class EmoteAc extends BuiltinModule {
 
     async enabled(e) {
         GlobalAc.add(';', this);
+        window.removeEventListener('contextmenu', this.acCm);
+        window.addEventListener('contextmenu', this.acCm);
     }
 
     disabled(e) {
         GlobalAc.remove(';');
+        window.removeEventListener('contextmenu', this.acCm);
+    }
+
+    /* Methods */
+    acCm(e) {
+        const row = e.target.closest('.bd-emotAc');
+        if (!row) return;
+        const img = row.querySelector('img');
+        if (!img || !img.alt) return;
+
+        BdContextMenu.show(e, [
+            {
+                text: 'Test',
+                items: [
+                    {
+                        text: 'Favourite',
+                        type: 'toggle',
+                        checked: EmoteModule.isFavourite(img.alt.replace(/;/g, '')),
+                        onChange: checked => {
+                            if (!img || !img.alt) return;
+                            const emote = img.alt.replace(/;/g, '');
+                            if (!checked) return EmoteModule.removeFavourite(emote), false;
+                            return EmoteModule.addFavourite(emote), true;
+                        }
+                    }
+                ]
+            }
+        ]);
     }
 
     /**
@@ -53,7 +84,8 @@ export default new class EmoteAc extends BuiltinModule {
                             hint: mu.useCount ? `Used ${mu.useCount} times` : null
                         }
                     }
-                })
+                }),
+                extraClasses: ['bd-emotAc']
             }
         }
 
@@ -65,7 +97,8 @@ export default new class EmoteAc extends BuiltinModule {
                 result.value.src = EMOTE_SOURCES[result.value.type].replace(':id', result.value.id);
                 result.value.replaceWith = `;${result.key};`;
                 return result;
-            })
+            }),
+            extraClasses: ['bd-emotAc']
         }
     }
 

client/src/ui/components/common/Autocomplete.vue

@@ -21,7 +21,7 @@
                 </div>
             </div>
             <div class="bd-acScroller" ref="scroller">
-                <div v-for="(item, index) in search.items" class="bd-acRow" @mouseover="selectedIndex = index" @click="inject">
+                <div v-for="(item, index) in search.items" class="bd-acRow" :class="search.extraClasses" @mouseover="selectedIndex = index" @click="inject">
                     <div class="bd-acSelector bd-selectable" :class="{'bd-selected': index === selectedIndex}">
                         <div class="bd-acField">
                             <img v-if="search.type === 'imagetext'" :src="item.src || item.value.src" :alt="item.key || item.text || item.alt" />