hide source with no content

Closes #5
aleksey-rowan · Oct 27, 2018 · 498276f · 498276f
1 parent 1eb5ffc
commit 498276f
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 87 deletions.
diff --git a/src/background.ts b/src/background.ts
@@ -64,7 +64,7 @@ function createMainWindow() {
 
     // https://discuss.atom.io/t/how-to-get-startup-arguments-from-electron-app/35353/6
     // https://stackoverflow.com/questions/45485262/how-to-debug-electron-production-binaries
-    // use `--debug` argument to open devtools in production
+    // TODO: use `--debug` argument to open devtools in production
     // window.webContents.openDevTools();
 
     if (isDevelopment) {

diff --git a/src/components/editor/source-examples.vue b/src/components/editor/source-examples.vue
@@ -1,24 +1,24 @@
 <template>
     <div class="container" v-if="collection.length > 0">
 
-            <!-- {{ from }} {{ to }} {{ limit }} {{ collection.length }} -->
-            <div class="controls" v-if="total !== 1">
-                <!-- <el-button @click="back" :disabled="current === 1"><font-awesome-icon icon="angle-up" /></el-button> -->
+        <!-- {{ from }} {{ to }} {{ limit }} {{ collection.length }} -->
+        <div class="controls" v-if="total !== 1">
+            <!-- <el-button @click="back" :disabled="current === 1"><font-awesome-icon icon="angle-up" /></el-button> -->
 
-                <span class="page current">{{ current }}</span>
-                <span class="divider"></span>
-                <span class="page total">{{ total }}</span>
+            <span class="page current">{{ current }}</span>
+            <span class="divider"></span>
+            <span class="page total">{{ total }}</span>
 
-                <!-- <el-button @click="next" :disabled="current === total"><font-awesome-icon icon="angle-down" /></el-button> -->
-            </div>
-
-            <div class="example-list" v-if="collection.length > 0">
-                <li v-for="(example, index) in collection.slice(from, to)" :key="`example-${index}`" class="example-item">
-                    <p v-html="example"></p>
-                </li>
-            </div>
+            <!-- <el-button @click="next" :disabled="current === total"><font-awesome-icon icon="angle-down" /></el-button> -->
+        </div>
 
+        <div class="example-list" v-if="collection.length > 0">
+            <li v-for="(example, index) in collection.slice(from, to)" :key="`example-${index}`" class="example-item">
+                <p v-html="example"></p>
+            </li>
         </div>
+
+    </div>
 </template>
 
 <script lang="ts">
@@ -35,7 +35,9 @@ import { Word } from './../../store/modules/words'; */
     }
 })
 export default class SourceView extends Vue {
-    @Prop() collection: string[];
+    @Prop()
+    collection: string[];
+
     @Prop({ default: 3 })
     limit: number | null;
     from: number = 0;
@@ -77,11 +79,6 @@ export default class SourceView extends Vue {
         }
         this.from = Math.min(this.collection.length - 1, Math.max(this.from - this.limit, 0));
     }
-
-    playSound(event: MouseEvent): void {
-        console.log(event);
-        (<HTMLAudioElement>(<HTMLElement>event.currentTarget).firstElementChild).play();
-    }
 }
 </script>
 

diff --git a/src/components/editor/source-view.vue b/src/components/editor/source-view.vue
@@ -118,7 +118,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { Component, Inject, Model, Prop, Watch } from 'vue-property-decorator';
+import { Component, Inject, Model, Prop, Watch, Emit } from 'vue-property-decorator';
 
 import { Definition } from './../../sources/source.class';
 import { Word } from './../../store/modules/words';
@@ -129,18 +129,21 @@ import SourceExamples from './source-examples.vue';
     components: { 'source-examples': SourceExamples }
 })
 export default class SourceView extends Vue {
-    @Prop() definition: Definition;
-    @Prop() word: Word;
+    @Prop()
+    definition: Definition;
+
+    @Prop()
+    word: Word;
 
     playSound(event: MouseEvent): void {
         console.log(event);
-        (<HTMLAudioElement>(<HTMLElement>event.currentTarget)
-            .firstElementChild).play();
+        ((event.currentTarget as HTMLElement).firstElementChild as HTMLAudioElement).play();
     }
 
-    hasSlot(name: string): boolean {
+    // TODO: what is this for?
+    /* hasSlot(name: string): boolean {
         return typeof this.$slots[name] !== 'undefined';
-    }
+    } */
 }
 </script>
 

diff --git a/src/components/editor/word-editor.vue b/src/components/editor/word-editor.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container">
+    <div class="container  uk-flex-1">
 
         <!-- <quill-editor v-for="(modelField, index) in modelFields"
             :key="modelField"
@@ -22,16 +22,33 @@
         <section class="container main" v-if="word">
 
             <section class="content cm-scrollbar">
-                    <div v-for="source in sourceOrder" :key="source.id" :id="source.id" class="source-view">
-                        <h2 class="title"><span class="name">{{ source.name }}</span><span class="divider"></span></h2>
-                        <component :is="source.id" :word="word" ></component>
-                    </div>
+                <div
+                    v-for="source in sourceOrder"
+                    :key="source.id"
+
+                    :id="source.id"
+                    v-show="source.hasContent"
+
+                    class="source-view">
+                    <h2 class="title"><span class="name">{{ source.name }}</span><span class="divider"></span></h2>
+                    <component
+                        :is="source.id"
+                        :word="word"
+
+                        @has-content="source.hasContent = $event"></component>
+                </div>
             </section>
 
             <aside class="sidebar cm-scrollbar">
                 <ul class="headings">
-                    <li v-for="source in sourceOrder" :key="source.id" class="heading">
-                        <a :href="`#${source.id}`" class="anchor">{{ source.name }}</a>
+                    <li
+                        v-for="source in sourceOrder"
+                        :key="source.id"
+
+                        class="heading">
+
+                        <a :href="`#${source.id}`" class="anchor" v-if="source.hasContent">{{ source.name }}</a>
+                        <span v-else class="anchor uk-text-muted">{{ source.name }}</span>
                     </li>
                 </ul>
 
@@ -58,9 +75,16 @@ import { Word } from './../../store/modules/words';
 import { CollectionWord } from '../../store/modules/collection/index';
 import { DragObject, DragTarget } from '@/am-drag.plugin';
 
-const StateCL = namespace('collection', State);
+/* const StateCL = namespace('collection', State);
 const GetterCL = namespace('collection', Getter);
 const ActionCL = namespace('collection', Action);
+ */
+
+interface SourceEntry {
+    name: string;
+    id: string;
+    hasContent: boolean;
+}
 
 @Component({
     components: Object.assign(
@@ -80,18 +104,21 @@ export default class WordList extends mixins(CollectionStateMixin) {
 
     raw: string = '';
 
-    sourceOrder = [
+    sourceOrder: SourceEntry[] = [
         {
             name: 'Vocabulary.com',
-            id: 'vocabulary-source'
+            id: 'vocabulary-source',
+            hasContent: false
         },
         {
             name: 'Oxford Dictonaries',
-            id: 'oxforddictionaries-source'
+            id: 'oxforddictionaries-source',
+            hasContent: false
         },
         {
             name: 'Verbal Advantage',
-            id: 'verbaladvantage-source'
+            id: 'verbaladvantage-source',
+            hasContent: false
         }
     ];
 
@@ -301,6 +328,10 @@ header {
                 &:hover {
                     color: $accent-colour;
                 }
+
+                &.uk-text-muted {
+                    font-weight: normal;
+                }
             }
         }
     }

diff --git a/src/registerServiceWorker.ts b/src/registerServiceWorker.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 
-import { register } from 'register-service-worker';
+// TODO: find what the workers can be used for
+/* import { register } from 'register-service-worker';
 
 if (process.env.NODE_ENV === 'production') {
     register(`${process.env.BASE_URL}service-worker.js`, {
@@ -23,4 +24,4 @@ if (process.env.NODE_ENV === 'production') {
             console.error('Error during service worker registration:', error);
         }
     });
-}
+} */
diff --git a/src/sources/oxforddictionaries.vue b/src/sources/oxforddictionaries.vue
@@ -251,8 +251,7 @@ const scrapeConfig = {
 
                 const notesConfig = {
                     title: {
-                        sel:
-                            'h3:not([class$="phrases-title"]), h2:not([class$="phrases-title"])'
+                        sel: 'h3:not([class$="phrases-title"]), h2:not([class$="phrases-title"])'
                     },
                     lines: {
                         scrape: {
@@ -323,9 +322,7 @@ const scrapeConfig = {
                     phrases: artoo.scrape(
                         $(this)
                             .nextUntil('.entryHead')
-                            .find(
-                                '.phrases-title ~ .senseInnerWrapper > .semb.gramb > li'
-                            ),
+                            .find('.phrases-title ~ .senseInnerWrapper > .semb.gramb > li'),
                         phrasesConfig
                     )
                 };
@@ -351,29 +348,27 @@ export default class OxfordDictionariesSource extends Source {
             return '';
         }
 
-        this.definition = await axios
-            .get(`https://en.oxforddictionaries.com/definition/${val.text}`)
-            .then(response => {
-                const a = cheerio.load(response.data);
+        this.definition = await axios.get(`https://en.oxforddictionaries.com/definition/${val.text}`).then(response => {
+            const a = cheerio.load(response.data);
 
-                artoo.setContext(cheerio.load(response.data));
+            artoo.setContext(cheerio.load(response.data));
 
-                const scrape = artoo.scrape('.entryWrapper', scrapeConfig);
+            const scrape = artoo.scrape('.entryWrapper', scrapeConfig);
 
-                console.log(scrape[0]);
+            console.log(scrape[0]);
 
-                if (scrape.length > 0) {
-                    /* scrape[0].groups.forEach((group: any) => {
+            if (scrape.length > 0 && scrape[0].groups.length > 0) {
+                /* scrape[0].groups.forEach((group: any) => {
                         group.senses.forEach((sense: any) => {
                             sense.examples.forEach((example: string) =>  example.rep)
                         })
                     } */
 
-                    return scrape[0];
-                }
+                return scrape[0];
+            }
 
-                return null;
-            });
+            return null;
+        });
     }
 
     mounted(): void {
@@ -387,5 +382,4 @@ export default class OxfordDictionariesSource extends Source {
 </script>
 
 <style lang="scss" scoped>
-
 </style>
diff --git a/src/sources/source.class.ts b/src/sources/source.class.ts
@@ -1,23 +1,32 @@
-import {
-    Vue,
-    Component,
-    Inject,
-    Model,
-    Prop,
-    Watch
-} from 'vue-property-decorator';
+import { Vue, Prop, Emit, Watch } from 'vue-property-decorator';
 import { Word } from './../store/modules/words';
 
+// TODO: turn this into a mixin
 export class Source extends Vue {
-    @Prop() word: Word;
+    @Emit()
+    hasContent(value: boolean) {}
+
+    @Prop()
+    word: Word;
 
     definition: Definition | null = null;
 
-    playSound(event: MouseEvent): void {
-        console.log(event);
-        (<HTMLAudioElement>(<HTMLElement>event.currentTarget)
-            .firstElementChild).play();
+    /**
+     * Watch `definition` change and fire `hasContent` event depending on the value of the `definition`.
+     * TODO: add a `loading` state; this can be fired every time when the `word` is changing
+     *
+     * @param {(Definition | null)} value
+     * @memberof Source
+     */
+    @Watch('definition')
+    onDefinitionChange(value: Definition | null): void {
+        this.hasContent(value !== null);
     }
+
+    /* playSound(event: MouseEvent): void {
+        console.log(event);
+        (<HTMLAudioElement>(<HTMLElement>event.currentTarget).firstElementChild).play();
+    } */
 }
 
 export class Definition {
@@ -34,18 +43,11 @@ export class DefinitionGroup {
 }
 
 export class DefinitionPart {
-    constructor(
-        public name: string = '',
-        public senses: DefinitionSense[] = []
-    ) {}
+    constructor(public name: string = '', public senses: DefinitionSense[] = []) {}
 }
 
 export class DefinitionPronunciation {
-    constructor(
-        public part: string = '',
-        public spellings: string[] = [],
-        public audios: string[] = []
-    ) {}
+    constructor(public part: string = '', public spellings: string[] = [], public audios: string[] = []) {}
 }
 
 export class DefinitionNote {

diff --git a/src/sources/verbaladvantage.vue b/src/sources/verbaladvantage.vue
@@ -7,18 +7,17 @@
             </section>
 
         </source-view>
-
     </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import { Component, Inject, Model, Prop, Watch } from 'vue-property-decorator';
 
-// import vaWords from '@/../assets/full-list.json';
+import vaWords from '@/../assets/full-list.json';
 
 type VAList = { [name: string]: VAWord };
-const vaWords: { [name: string]: VAWord } = {};
+// const vaWords: { [name: string]: VAWord } = {};
 
 import loglevel from 'loglevel';
 const log: loglevel.Logger = loglevel.getLogger(`source`);
@@ -87,7 +86,7 @@ export default class VerbalAdvantageSource extends Source {
     }
 
     get vaWord(): VAWord | null {
-        return (<VAList>vaWords)[this.normalizedWord] || null;
+        return (vaWords as VAList)[this.normalizedWord] || null;
     }
 }
 </script>