Added external definition services

electron/Index.vue

@@ -93,6 +93,11 @@
             <word-definition :expression="wordDefinitionLookup" ref="characterPage"></word-definition>
             <template slot="title">
                 {{wordDefinitionLookup}}
+
+                <a class="btn wordDefBtn dictionary" @click="openDefinitionWithDictionary"><i>D</i></a>
+                <a class="btn wordDefBtn thesaurus" @click="openDefinitionWithThesaurus"><i>T</i></a>
+                <a class="btn wordDefBtn urbandictionary" @click="openDefinitionWithUrbanDictionary"><i>UD</i></a>
+                <a class="btn wordDefBtn wikipedia" @click="openDefinitionWithWikipedia"><i>W</i></a>
             </template>
         </modal>
         <logs ref="logsDialog"></logs>
@@ -128,6 +133,7 @@
     import * as SlimcatImporter from './importer';
     import _ from 'lodash';
     import { EventBus } from '../chat/preview/event-bus';
+    import { DefinitionDictionary } from '../learn/dictionary/definition-dictionary';
     // import Bluebird from 'bluebird';
     // import Connection from '../fchat/connection';
     // import Notifications from './notifications';
@@ -518,6 +524,30 @@
         showLogs(): void {
             (<Logs>this.$refs['logsDialog']).show();
         }
+
+
+        getCleanedWordDefinition(): string {
+          return DefinitionDictionary.cleanExpression(this.wordDefinitionLookup);
+        }
+
+        async openDefinitionWithDictionary(): Promise<void> {
+            await electron.remote.shell.openExternal(`https://www.dictionary.com/browse/${encodeURI(this.getCleanedWordDefinition())}`);
+        }
+
+
+        async openDefinitionWithThesaurus(): Promise<void> {
+            await electron.remote.shell.openExternal(`https://www.thesaurus.com/browse/${encodeURI(this.getCleanedWordDefinition())}`);
+        }
+
+
+        async openDefinitionWithUrbanDictionary(): Promise<void> {
+            await electron.remote.shell.openExternal(`https://www.urbandictionary.com/define.php?term=${encodeURIComponent(this.getCleanedWordDefinition())}`);
+        }
+
+
+        async openDefinitionWithWikipedia(): Promise<void> {
+            await electron.remote.shell.openExternal(`https://en.wikipedia.org/wiki/${encodeURI(this.getCleanedWordDefinition())}`);
+        }
     }
 </script>
 
@@ -601,4 +631,43 @@
             }
         }
     }
+
+
+    .btn.wordDefBtn {
+        background-color: red;
+        padding: 0.2rem 0.2rem;
+        line-height: 90%;
+        margin-right: 0.2rem;
+        text-align: center;
+
+        i {
+            font-style: normal !important;
+            color: white;
+            font-weight: bold
+        }
+
+        &.thesaurus {
+            background-color: #F44725
+        }
+
+        &.urbandictionary {
+            background-color: #d96a36;
+
+            i {
+                color: #fadf4b;
+            }
+        }
+
+        &.dictionary {
+            background-color: #314ca7;
+        }
+
+        &.wikipedia {
+            background-color: white;
+
+            i {
+                color: black;
+            }
+        }
+    }
 </style>

learn/dictionary/WordDefinition.vue

@@ -1,10 +1,13 @@
 <template>
-  <ul>
-    <li v-for="definition in definitions">
-      <p><i>({{definition.type}}.)</i> {{definition.definition}}</p>
-      <small>{{definition.synonyms.join(', ').replace(/_/g, ' ')}}</small>
-    </li>
-  </ul>
+  <div>
+    <ul v-if="definitions.length > 0">
+      <li v-for="definition in definitions">
+        <p><i>({{definition.type}}.)</i> {{definition.definition}}</p>
+        <small>{{definition.synonyms.join(', ').replace(/_/g, ' ')}}</small>
+      </li>
+    </ul>
+    <div v-else class="error">No definitions found for '{{ expression }}'.</div>
+  </div>
 </template>
 <script lang="ts">
 import Vue from 'vue';

learn/dictionary/definition-dictionary.ts

@@ -35,7 +35,7 @@ export class DefinitionDictionary {
 
 
   async getDefinition(expression: string): Promise<Definition[]> {
-    const exp = this.cleanExpression(expression);
+    const exp = DefinitionDictionary.cleanExpression(expression);
     const forms = await this.getWordNetValidForms(exp);
 
     const results = await Promise.all(
@@ -75,7 +75,7 @@ export class DefinitionDictionary {
   }
 
 
-  private cleanExpression(expression: string): string {
+  public static cleanExpression(expression: string): string {
     return anyAscii(expression).toLowerCase().replace(/[^a-z0-9\-]/g, ' ').replace(/  +/g, ' ').trim();
   }
 }