Started querying wikipedia

2019-09-26 16:35:14 +02:00
parent 7f6dc94703
commit 70e5565d74
5 changed files with 87 additions and 17 deletions
@@ -19,6 +19,7 @@
  "globals": {
    "Vue": false,
    "utils": true,
+    "globals": true,
    "app": true
  }
 }
@@ -10,7 +10,18 @@
 </head>
 <body>
 <main id="app">
-    <h2>{{sample}}</h2>
+    <h2>Wikipedia Translator</h2>
+    <div id="query">
+        <input v-model="query" placeholder="Search something..." v-on:keyup.enter="doQuery"/>
+        <select v-model="lang">
+            <option v-for="l in globals.langs" v-bind:value="l.v">{{l.n}}</option>
+        </select>
+        <button v-on:click="doQuery">Go</button>
+    </div>
+    <div v-if="res">
+        <h2><a v-bind:href="res.url" target="_blank">{{res.title}}</a></h2>
+        <h3 v-if="res.extract">{{res.extract}}</h3>
+    </div>
 </main>
 </body>
 </html>
@@ -3,11 +3,30 @@
 let app = {
  el: '#app',
  data: {
-    sample: 'Wikipedia translator'
+    globals: globals,
+    lang: 'en',
+    query: '',
+    res: {}
  },
-  methods: {},
-  'mounted': {},
-  'created': {}
+  methods: {
+    'doQuery': () => {
+      const self = app;
+      self.res = '';
+      if (self.query.length) {
+        const url = `https://${self.lang}.wikipedia.org/w/index.php?search=${encodeURIComponent(self.query)}`;
+        utils.get(url, true).then((res) => {
+          const doc = utils.createDocument(res);
+          const text = doc.getElementsByClassName('mw-parser-output');
+          self.res = {
+            title: doc.title.split(/[-—]/g)[0].trim(),
+            link: url,
+            extract: text[0] ? text[0].innerText.split('\n')[0] + '...' : undefined,
+          };
+          app.doc = doc; //TODO temp
+        });
+      }
+    }
+  }
 };

 window.onload = () => {
@@ -1,4 +1,4 @@
-/* exported utils */
+/* exported utils, globals */

 const utils = {
  get: (url, proxy = false) => {
@@ -8,10 +8,39 @@ const utils = {
        const http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
        url = http + '//cors-anywhere.herokuapp.com/' + url;
      }
-      xhr.open("GET", url);
-      xhr.onload = () => resolve(xhr.responseText);
-      xhr.onerror = () => reject(xhr.statusText);
+      xhr.open('GET', url);
+      xhr.onload = () => {
+        try {
+          resolve(JSON.parse(xhr.responseText));
+        } catch (ignored) {
+          resolve(xhr.responseText);
+        }
+      };
+      xhr.onerror = () => reject(xhr);
      xhr.send();
    });
+  },
+  createDocument: (html) => {
+    return new DOMParser().parseFromString(html, 'text/html');
  }
+};
+
+const globals = {
+  langs: [
+    {n: 'English', v: 'en'},
+    {n: 'Français', v: 'fr'},
+    {n: 'Español', v: 'es'},
+    {n: 'Deutsch', v: 'de'},
+    {n: 'Italiano', v: 'it'},
+    {n: 'Nederlands', v: 'nl'},
+    {n: '日本語', v: 'ja'},
+    {n: 'Polski', v: 'pl'},
+    {n: 'Português', v: 'pt'},
+    {n: 'Русский', v: 'ru'},
+    {n: 'Sinugboanong Binisaya', v: 'ceb'},
+    {n: 'Svenska', v: 'sv'},
+    {n: 'Tiếng Việt', v: 'vi'},
+    {n: 'Winaray', v: 'war'},
+    {n: '中文', v: 'zh'},
+  ]
 };
@@ -15,7 +15,7 @@ body {
 }

 main {
-    max-width: 38rem;
+    max-width: 42rem;
    padding: 2rem;
    margin: auto;
    background-color: #EEEEEE;
@@ -53,15 +53,25 @@ a:hover {
    color: #f44336;
 }

-input {
-    margin-right: 1em;
-    width: 8em;
+#query {
+    width: 100%;
 }

-input.wide {
-    width: 18em;
+#query > * {
+    font-size: 1.2em;
+    height: 1.8em;
 }

-button {
-    width: 6em;
+#query input {
+    width: 100%;
+    margin-bottom: .5em;
 }
+
+#query select {
+    width: calc(100% - 6em);
+}
+
+#query button {
+    width: 5em;
+    margin-left: .7em;
+}