klemek/wikipedia-translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started querying wikipedia

Browse Source
This commit is contained in:
Klemek
2019-09-26 16:35:14 +02:00
parent 7f6dc94703
commit 70e5565d74
5 changed files with 87 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.jshintrc
+1
View File
@@ -19,6 +19,7 @@
"globals": { "globals": {
"Vue": false, "Vue": false,
"utils": true, "utils": true,
"globals": true,
"app": true "app": true
} }
} }
index.html
+12 -1
View File
@@ -10,7 +10,18 @@
</head> </head>
<body> <body>
<main id="app"> <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> </main>
</body> </body>
</html> </html>
js/main.js
+23 -4
View File
@@ -3,11 +3,30 @@
let app = { let app = {
el: '#app', el: '#app',
data: { data: {
sample: 'Wikipedia translator' globals: globals,
lang: 'en',
query: '',
res: {}
}, },
methods: {}, methods: {
'mounted': {}, 'doQuery': () => {
'created': {} 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 = () => { window.onload = () => {
js/utils.js
+35 -6
View File
@@ -1,4 +1,4 @@
/* exported utils */ /* exported utils, globals */
const utils = { const utils = {
get: (url, proxy = false) => { get: (url, proxy = false) => {
@@ -8,10 +8,39 @@ const utils = {
const http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); const http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
url = http + '//cors-anywhere.herokuapp.com/' + url; url = http + '//cors-anywhere.herokuapp.com/' + url;
} }
xhr.open("GET", url); xhr.open('GET', url);
xhr.onload = () => resolve(xhr.responseText); xhr.onload = () => {
xhr.onerror = () => reject(xhr.statusText); try {
xhr.send(); 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'},
]
};
style.css
+18 -8
View File
@@ -15,7 +15,7 @@ body {
} }
main { main {
max-width: 38rem; max-width: 42rem;
padding: 2rem; padding: 2rem;
margin: auto; margin: auto;
background-color: #EEEEEE; background-color: #EEEEEE;
@@ -53,15 +53,25 @@ a:hover {
color: #f44336; color: #f44336;
} }
input { #query {
margin-right: 1em; width: 100%;
width: 8em;
} }
input.wide { #query > * {
width: 18em; font-size: 1.2em;
height: 1.8em;
} }
button { #query input {
width: 6em; width: 100%;
margin-bottom: .5em;
}
#query select {
width: calc(100% - 6em);
}
#query button {
width: 5em;
margin-left: .7em;
} }