diff --git a/.jshintrc b/.jshintrc index ac711a3..dbb3fdd 100644 --- a/.jshintrc +++ b/.jshintrc @@ -19,6 +19,7 @@ "globals": { "Vue": false, "utils": true, + "globals": true, "app": true } } \ No newline at end of file diff --git a/index.html b/index.html index e6bacea..e3abb05 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,18 @@
-

{{sample}}

+

Wikipedia Translator

+
+ + + +
+
+

{{res.title}}

+

{{res.extract}}

+
\ No newline at end of file diff --git a/js/main.js b/js/main.js index 9cf8c6d..2fe840a 100644 --- a/js/main.js +++ b/js/main.js @@ -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 = () => { diff --git a/js/utils.js b/js/utils.js index 6645146..2c2fd68 100644 --- a/js/utils.js +++ b/js/utils.js @@ -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'}, + ] }; \ No newline at end of file diff --git a/style.css b/style.css index 62ee13f..d3ca3e2 100644 --- a/style.css +++ b/style.css @@ -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; +} \ No newline at end of file