Skip to content

Commit

Permalink
Improve UI and fix some bug fix .
Browse files Browse the repository at this point in the history
  • Loading branch information
chenjunqiang committed Mar 5, 2020
1 parent b84b021 commit 1e0fc76
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 43 deletions.
7 changes: 7 additions & 0 deletions background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,10 @@ chrome.runtime.onInstalled.addListener(function() {
console.log('add new data');
});
});




chrome.notifications.onButtonClicked.addListener(function( notificationId, buttonIndex) {
console.log(notificationId+":"+buttonIndex);
});
20 changes: 12 additions & 8 deletions help.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
width: 280px;
outline: none;
}


input {
width:250px;
Expand Down Expand Up @@ -45,6 +46,7 @@

#bigtitle {
font-size: xx-large;
font-family: cursive;
}

</style>
Expand All @@ -53,26 +55,28 @@
<body>
<div class="container">
<div class="header">
<span id="bigtitle"><a href="index.html">back</a></span>
<span id="bigtitle"><a href="index.html">Back</a></span>

</div>

<div class="mainbody">

<br>
<font style="color:blueviolet">How to use</font>

<span style="color:blueviolet">- How to use</span>
<ul>
<li>You can press "Ctrl+Shift+F" to open this extension.</li>
<li>Select a word on web ,then just press "Ctrl+Shift+F" to translate the word to chinese.</li>
<li>Select a word on web ,then just press "Ctrl+Shift+F" to translate the word between English and Chinese.</li>
<li>Type a word in the input field and press Enter key.</li>
<li>In the new word list field, click the word to translate, double click the word to remove it when you know it.</li>
<li>In the new word list field, click the word to translate, click remove link when you memorize it.</li>
</ul>
<br>
<font style="color:blueviolet">About Translated version 0.1</font>
<span style="color:blueviolet">- About Translated</span>
<ul>
<li>A chrome exetension to help translate English word to Chinese.It aim to provide friendly UI and keep dead easy for everything.</li>
<li>Version: v0.1</li>
<li>A chrome exetension to help translate between English and Chinese.It aim to provide friendly UI and try to keep dead easy.</li>
<li>The translate engin is powered by <a href="https://cn.bing.com/dict" target="_blank">微软必应词典</a>.</li>
<li>Developed by [email protected] and the code can be found on <a target="_blank" href="https://github.com/forestery/translated">github</a>.</li>

</ul>
<br>
</div>
Expand All @@ -82,4 +86,4 @@
</div>

</body>
</html>
</html>
78 changes: 55 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,74 @@
<head>
<meta charset="UTF-8">
<style>

::-webkit-scrollbar {
display: none;
}


body {
/*height: 530px;*/
height: 100px;
width: 280px;
outline: none;


}

#wordlist li:hover{
background-color:darkgoldenrod;
color: aliceblue;


}
#wordlist{
height: 140px;
overflow-y:auto;
}




.paddingleft{
padding-left: 10px;
}

input {
width:250px;
width:200px;
height:30px;
font-size: large;

}
.mainbody {
/*height:450px;*/
height:450px;
/*border: solid #eee;*/
/*border-width:1px 0;*/
}

.header {
height: 60px;
/*height: 60px;*/
padding: 5px;
}

/*
.footer {
height: 60px;
padding:5px;
position: absolute;
bottom: 0;
}*/
a:link{
color:blueviolet;
}
a:visited{
color:blueviolet;
}
#resultDiv {
height: 150px;
overflow-y: scroll;
height: 180px;
overflow-y:auto;
}

#bigtitle {
font-size: xx-large;
color:blueviolet;
font-family: cursive;
}



</style>
</head>

Expand All @@ -53,7 +78,8 @@
<div class="header">
<span id="bigtitle">Translated</span>

<span><a href="help.html">help</a></span>
<span><a href="help.html">help</a></span><br>




Expand All @@ -62,24 +88,30 @@
</div>

<div class="mainbody">
<input id="searchinput" type="text" placeholder="type a word an press Enter">
<br>
<span style="color:blueviolet;">- Type a word and press ENTER</span>

<div class="paddingleft"><br><input id="searchinput" type="text" ></div>


<div id="resultDiv"></div>
<br>
<font style="color: red;">New Word List</font>
<span style="color:blueviolet;">- History of query:</span><a id="clearall" style="float:right;" href="#">remove all</a>
<ul id="wordlist">
</ul>
<br>
</div>

<!--div class="footer">
<br>
about<br>
<a href="https://cn.bing.com/" target="_blank">bing dict service</a>
</div-->

<div class="footer">
<br>
<hr>

<span style="font-family: cursive;" id="thequote">Impossibilities are merely things which we have not yet learned.</span><br>
<span style="float:right;font-family: cursive;" id="theauthor"> --Maya Angelou</span>
</div>
</div>

<script src="index.js"></script>
</body>
</html>
76 changes: 65 additions & 11 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
let searchinput = document.getElementById('searchinput');
let resultDiv = document.getElementById('resultDiv');
let wordlist = document.getElementById('wordlist');
let clearall = document.getElementById('clearall');

let thequote = document.getElementById('thequote');
let theauthor = document.getElementById('theauthor');




Expand All @@ -16,6 +21,13 @@ chrome.tabs.executeScript({
}
);

clearall.addEventListener("click",function(element){

chrome.storage.local.set({'new': []},function(){
loadData();
});

});
searchinput.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
Expand All @@ -26,22 +38,54 @@ searchinput.addEventListener("keydown", function(event) {
});


function initData(){
loadData();
var xhr = new XMLHttpRequest();
xhr.responseType = "json";
var url = "https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json"
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
//display data fetched from bing.
//alert(xhr.response);
thequote.textContent=xhr.response.quoteText;
theauthor.textContent="--"+xhr.response.quoteAuthor;
}
}
xhr.send();
}

//load new word data to panel
//user can click it to remember it again.
function loadData(){
wordlist.innerHTML="";
chrome.storage.local.get('new', function(data) {

chrome.browserAction.setBadgeText({text: data.new.length == 0 ? '':data.new.length.toString()});
for (let item of data.new) {
let li = document.createElement('li');
li.innerHTML=item;
li.addEventListener('dblclick', function(element) {
searchinput.value=element.target.innerText;
translate(element.target.innerText);
removeData(element.target.innerText);
let li_href=document.createElement('a');
let li_span = document.createElement('span');
//li.innerHTML=item;
li_span.textContent = item;
li_href.textContent = 'remove';
li_href.title="remove it when you do memorize it."
li_href.style.float="right";
li_href.href="#";
li.append(li_span);
li.append(li_href);

li_href.addEventListener('click', function(element) {
//searchinput.value=element.target.innerText;
//translate(element.target.innerText);
//removeData(element.target.innerText);
removeData(item);
element.stopPropagation();
});

li.addEventListener('click', function(element) {
searchinput.value=element.target.innerText;
translate(element.target.innerText);
searchinput.value=item;
translate(item);

});
wordlist.appendChild(li);
Expand All @@ -57,6 +101,7 @@ function removeData(word){
var filtered = k.filter(function(value,index,arr){return value!=word;});
chrome.storage.local.set({'new': filtered},function(){
loadData();

});
});
}
Expand All @@ -69,9 +114,14 @@ function addData(word){
}
chrome.storage.local.get('new',function(data){
var k=data.new;
k.push(word.trim());
var word_low=word.toLowerCase().trim();
if(k.includes(word_low)){
return;
}
k.push(word_low);
chrome.storage.local.set({'new': k},function(){
loadData();

});
})

Expand All @@ -89,10 +139,14 @@ function translate(word) {
if (xhr.readyState == 4) {
//display data fetched from bing.
resultDiv.innerHTML="";
resultDiv.append(xhr.response.querySelector("div.qdef ul"));
var ulfetched=xhr.response.querySelector("div.qdef ul");
if(ulfetched==undefined || ulfetched==null){
ulfetched=document.createElement('ul');
}
resultDiv.append(ulfetched);

let more = document.createElement('a');
more.innerHTML='see more about '+word;
more.innerHTML='see more ...';
more.href=url;
more.target="_blank"
let moreli = document.createElement('li');
Expand All @@ -112,4 +166,4 @@ function translate(word) {


searchinput.focus();
loadData();
initData();
8 changes: 7 additions & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,17 @@
"scripts": ["background.js"],
"persistent": false
},
"permissions": ["https://cn.bing.com/","clipboardRead","activeTab","storage"],
"permissions": ["https://cn.bing.com/","clipboardRead","activeTab","storage","notifications","https://api.forismatic.com/"],
"browser_action": {
"default_popup": "index.html",
"default_icon": "logo.png"
},
"icons": {
"16": "logo.png",
"32": "logo.png",
"48": "logo.png",
"128": "logo.png"
},
"commands": {
"_execute_browser_action": {
"suggested_key": {
Expand Down

0 comments on commit 1e0fc76

Please sign in to comment.