5 years ago · e56c82004a
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
 
				+.DS_Store
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,18 @@
 
				+Random English Learning 随机英语单词学习Chrome插件(APP)
			
 
				+
			
 
				+目的是实现在设定时段内弹出窗口显示随机英语单词进行速记,后期会加上随机测试等等
			
 
				+
			
 
				+数据接口采用扇贝网API
			
 
				+
			
 
				+支持导入词库(半成品)
			
 
				+
			
 
				+请使用 Chrome 37 以上版本导入本插件(APP)使用
			
 
				+
			
 
				+很多功能未完善,请谨慎Clone...
			
 
				+
			
 
				+
			
 
				+Changelog
			
 
				+
			
 
				+v0.5
			
 
				+目前支持单词查询,TXT词库导入
			
 
				+目前词库采用的是由深大继教张小兰老师提供的[英语二大纲词汇汇总.pdf]整理而来的词库表
			
--- a/asset/css/font-awesome.min.css
+++ b/asset/css/font-awesome.min.css
--- a/asset/css/main.css
+++ b/asset/css/main.css
--- a/asset/fonts/FontAwesome.otf
+++ b/asset/fonts/FontAwesome.otf
--- a/asset/fonts/fontawesome-webfont.eot
+++ b/asset/fonts/fontawesome-webfont.eot
--- a/asset/fonts/fontawesome-webfont.svg
+++ b/asset/fonts/fontawesome-webfont.svg
--- a/asset/fonts/fontawesome-webfont.ttf
+++ b/asset/fonts/fontawesome-webfont.ttf
--- a/asset/fonts/fontawesome-webfont.woff
+++ b/asset/fonts/fontawesome-webfont.woff
--- a/asset/fonts/fontawesome-webfont.woff2
+++ b/asset/fonts/fontawesome-webfont.woff2
--- a/asset/img/logo@x128.png
+++ b/asset/img/logo@x128.png
--- a/asset/img/logo@x16.png
+++ b/asset/img/logo@x16.png
--- a/asset/img/search.png
+++ b/asset/img/search.png
--- a/asset/less/main.less
+++ b/asset/less/main.less
--- a/background.html
+++ b/background.html
@@ -0,0 +1,11 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Document</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<script src="../lib/jquery.min.js"></script>
			
 
				+<script src="main.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/doc/englishWords.txt
+++ b/doc/englishWords.txt
--- a/doc/英语二大纲词汇汇总.pdf
+++ b/doc/英语二大纲词汇汇总.pdf
--- a/lib/jquery.min.js
+++ b/lib/jquery.min.js
--- a/lib/main.js
+++ b/lib/main.js
@@ -0,0 +1,79 @@
 
				+var bg;
			
 
				+$(function(){
			
 
				+    $('.loading').addClass('on');
			
 
				+    chrome.runtime.getBackgroundPage(function(background){
			
 
				+        bg = background;
			
 
				+        if(bg.wordDataArr.length) bg.wordDataArr.forEach( function(word) {
			
 
				+            $('.total .list ul').append('<li data-word="'+word+'">'+word+'<div class="btn"><a class="info" title="查看详情"><i class="fa fa-comment-o"></i></a><a class="del" title="移出词库"><i class="fa fa-trash-o"></i></a><a class="star" title="加入收藏"><i class="fa fa-star-o"></i></a></div></li>')
			
 
				+        });
			
 
				+        $('.tabs a:eq(0) span').text('('+bg.wordDataArr.length+')');
			
 
				+        $('.loading').removeClass('on');
			
 
				+    });
			
 
				+    $('.tabContent .list').on('click','li a.info',function(){
			
 
				+        
			
 
				+        var word = $(this).parents('li').data('word');
			
 
				+        var oldWindow = chrome.app.window.get('popup');
			
 
				+        if(oldWindow){
			
 
				+            createPopup(oldWindow,word);
			
 
				+        }else{
			
 
				+            chrome.app.window.create('windows/popup.html', {
			
 
				+                id:'popup',
			
 
				+                resizable:false,
			
 
				+                alwaysOnTop:true,
			
 
				+                hidden:true,
			
 
				+                frame:{type:'none'}
			
 
				+            },function(popup){
			
 
				+                createPopup(popup,word);
			
 
				+            });
			
 
				+        }
			
 
				+    });
			
 
				+    $('.tabContent .search').on('keyup',function(){
			
 
				+        var word = $(this).val();
			
 
				+        $(this).parent().find('.list li').hide().filter(":contains('"+word+"')").show();
			
 
				+    });
			
 
				+
			
 
				+    $('.tabs a').click(function(){
			
 
				+        $(this).addClass('on').siblings().removeClass('on');
			
 
				+        $('.tabContent').removeClass('on').eq($(this).index()).addClass('on');
			
 
				+    });
			
 
				+
			
 
				+    $("#clickme").click(function (source) {
			
 
				+        $("#my_file").trigger('click');
			
 
				+    })
			
 
				+    $("#my_file").on('change',function(){
			
 
				+        var wordsObj = {};
			
 
				+        var wordsArr = [];
			
 
				+        var file = $('#my_file')[0].files[0];
			
 
				+        var reader = new FileReader();
			
 
				+        reader.readAsText(file, "utf-8");
			
 
				+        reader.onload = function (e) {
			
 
				+            wordsArr = e.target.result.split("\n");
			
 
				+            if(wordsArr.length>0){
			
 
				+                wordsArr.forEach(function(word) {
			
 
				+                    wordsObj[word] = {testCount:0}
			
 
				+                });
			
 
				+            }
			
 
				+            chrome.storage.local.set({wordsArr:wordsArr,wordsObj:wordsObj},function(e){
			
 
				+                bg.wordDataArr = wordsArr;
			
 
				+                bg.wordDataObj = wordsObj;
			
 
				+                console.log('导入完成',e)
			
 
				+            })
			
 
				+        }
			
 
				+    })
			
 
				+});
			
 
				+
			
 
				+function createPopup(popup,word){
			
 
				+    var popWidth = 300,popHeight = 400;
			
 
				+    bg.currentWord = word;
			
 
				+    chrome.system.display.getInfo(function(display){
			
 
				+        var displayOpt = display[0].workArea;
			
 
				+        popup.outerBounds.left = displayOpt.width - popWidth - 20;
			
 
				+        popup.outerBounds.top = 20 + displayOpt.top;
			
 
				+        // popup.innerBounds = {width:popWidth,height:popHeight};
			
 
				+        popup.show();
			
 
				+        chrome.runtime.sendMessage('updateInfo');
			
 
				+        popup.onClosed.addListener(function(){
			
 
				+            chrome.storage.local.set({wordsObj:bg.wordDataObj,wordOpt:bg.wordOpt});
			
 
				+        });
			
 
				+    });
			
 
				+}
			
--- a/lib/popup.js
+++ b/lib/popup.js
@@ -0,0 +1,115 @@
 
				+var bg,currentWord,wordObj;
			
 
				+var wordInfoApi = 'https://api.shanbay.com/bdc/search/';
			
 
				+var wordSentenceApi = 'https://api.shanbay.com/bdc/example/';
			
 
				+var audio = new Audio();
			
 
				+$(function(){
			
 
				+    $('.word a.audio').click(function(){
			
 
				+        audio.src = wordObj.info.audio;
			
 
				+        audio.play();
			
 
				+    });
			
 
				+    $('.info a.close').click(function(){
			
 
				+        chrome.app.window.current().close();
			
 
				+    });
			
 
				+});
			
 
				+
			
 
				+chrome.runtime.onMessage.addListener(function(msg){
			
 
				+    if(msg=="updateInfo") build();
			
 
				+})
			
 
				+
			
 
				+function build(){
			
 
				+    $('.loading').addClass('on');
			
 
				+    chrome.runtime.getBackgroundPage(function(background){
			
 
				+        bg          = background;
			
 
				+        currentWord = bg.currentWord;
			
 
				+        wordObj     = bg.wordDataObj[currentWord];
			
 
				+        initWordInfo();
			
 
				+    });
			
 
				+}
			
 
				+
			
 
				+function initWordInfo(){
			
 
				+    if(wordObj['info']){
			
 
				+        initWordSentence();
			
 
				+    }else{
			
 
				+        $.ajax({
			
 
				+            method:'GET',
			
 
				+            url:wordInfoApi,
			
 
				+            data:{word:currentWord},
			
 
				+            dataType:'json',
			
 
				+            success:function(res){
			
 
				+                if(res.msg=="SUCCESS"){
			
 
				+                    console.log(res.data)
			
 
				+                    wordObj.info = {
			
 
				+                        id:res.data.id,
			
 
				+                        audio:res.data.audio,
			
 
				+                        pron:res.data.pronunciation,
			
 
				+                        definition:res.data.definition.split('\n')
			
 
				+                    }
			
 
				+                    chrome.storage.local.set({wordsObj:bg.wordDataObj});
			
 
				+                    console.log(wordObj)
			
 
				+                    initWordSentence();
			
 
				+                }else{
			
 
				+                    console.log(res.msg);
			
 
				+                }
			
 
				+            },
			
 
				+            error:function(e){
			
 
				+                console.log('ERROR',e);
			
 
				+                // alert('接口调用失败')
			
 
				+            }
			
 
				+        });
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+function initWordSentence(){
			
 
				+    if(wordObj['example']){
			
 
				+        fillContent();
			
 
				+    }else{
			
 
				+        $.ajax({
			
 
				+            method:'GET',
			
 
				+            url:wordSentenceApi,
			
 
				+            data:{vocabulary_id:wordObj.info.id,type:'sys'},
			
 
				+            dataType:'json',
			
 
				+            success:function(res){
			
 
				+                if(res.msg=="SUCCESS"){
			
 
				+                    var samples = res.data;
			
 
				+                    var exampleArr = [];
			
 
				+                    console.log(samples)
			
 
				+                    if(samples.length) for(var i = 0;i<samples.length;i++){
			
 
				+                        var sentence = samples[i];
			
 
				+                        console.log(sentence)
			
 
				+                        exampleArr.push({
			
 
				+                            sentence:sentence.annotation,
			
 
				+                            trans:sentence.translation
			
 
				+                        });
			
 
				+                        if(i==4) break;
			
 
				+                    };
			
 
				+                    wordObj.example = exampleArr;
			
 
				+                    chrome.storage.local.set({wordsObj:bg.wordDataObj});
			
 
				+                }else{
			
 
				+                    console.log(res.msg);
			
 
				+                }
			
 
				+                fillContent();
			
 
				+            },
			
 
				+            error:function(e){
			
 
				+                console.log('ERROR',e);
			
 
				+                // alert('接口调用失败')
			
 
				+            }
			
 
				+        });
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+function fillContent(){
			
 
				+    var newWord = currentWord.split('');
			
 
				+    newWord[0] = (newWord[0]).toUpperCase();
			
 
				+    newWord = newWord.join('');
			
 
				+    $('.word .w').text(newWord);
			
 
				+    $('.word .pron span').text(wordObj.info.pron);
			
 
				+    $('.def').empty();
			
 
				+    wordObj.info.definition.forEach(function(def){
			
 
				+        $('.def').append('<p>'+def+'</p>');
			
 
				+    });
			
 
				+    wordObj.example.forEach(function(ex){
			
 
				+        $('.example').append('<div class="ex"><p>'+ex.sentence+'</p><p>'+ex.trans+'</p></div>')
			
 
				+    })
			
 
				+    chrome.app.window.current().resizeTo(300,$('.info').height()+40);
			
 
				+    $('.loading').removeClass('on');
			
 
				+}
			
--- a/main.js
+++ b/main.js
@@ -0,0 +1,25 @@
 
				+/**
			
 
				+ * @Author  HonorLee (dev@honorlee.me)
			
 
				+ * @Version 1.0 (2019-04-21)
			
 
				+ * @License MIT
			
 
				+ */
			
 
				+var mainWidth = 600,mainHeight = 800;
			
 
				+var wordDataArr,wordDataObj,wordOpt,currentWord;
			
 
				+chrome.storage.local.get(['wordsArr','wordsObj','wordOpt'],function(items){
			
 
				+    wordDataArr = items.wordsArr?items.wordsArr:[];
			
 
				+    wordDataObj = items.wordsObj?items.wordsObj:{};
			
 
				+    wordOpt     = items.wordOpt?items.wordOpt:{};
			
 
				+});
			
 
				+chrome.app.runtime.onLaunched.addListener(function() {
			
 
				+    chrome.app.window.create('windows/main.html', {
			
 
				+        id:'main',
			
 
				+        innerBounds:{width:mainWidth,height:mainHeight},
			
 
				+        resizable:false,
			
 
				+        // frame:{type:'none'}
			
 
				+    },function(mainWindow){
			
 
				+        mainWindow.resizeTo(mainWidth,mainHeight);
			
 
				+        mainWindow.onClosed.addListener(function(){
			
 
				+            chrome.storage.local.set({wordsArr:wordDataArr,wordsObj:wordDataObj,wordOpt:wordOpt});
			
 
				+        });
			
 
				+    });
			
 
				+});
			
--- a/manifest.json
+++ b/manifest.json
@@ -0,0 +1,26 @@
 
				+{
			
 
				+    "name": "Random-English-Learning!",
			
 
				+    "description": "随机英语单词学习WebAPP。",
			
 
				+    "version": "1.0",
			
 
				+    "manifest_version": 2,
			
 
				+    "app": {
			
 
				+        "background": {
			
 
				+            // "page":"background.html",
			
 
				+            "scripts": ["main.js"],
			
 
				+            "content_scripts": [
			
 
				+                {
			
 
				+                  // "matches": ["https://shimo.im/folder/*"],
			
 
				+                  // "css": ["css/app.css"],
			
 
				+                  // "js": ["main.js","lib/jquery.min.js"]
			
 
				+                }
			
 
				+            ]
			
 
				+        }
			
 
				+    },
			
 
				+    "permissions":[
			
 
				+        "storage","unlimitedStorage","system.display","app.window.alwaysOnTop","https://api.shanbay.com/","https://media.shanbay.com/"
			
 
				+    ],
			
 
				+    "externally_connectable": {
			
 
				+        "matches": ["*://*.shanbay.com/*"]
			
 
				+    },
			
 
				+    "icons": { "16": "asset/img/logo@x16.png", "128": "asset/img/logo@x128.png" }
			
 
				+}
			
--- a/windows/main.html
+++ b/windows/main.html
@@ -0,0 +1,32 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh_cn">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Random English Learning</title>
			
 
				+    <link rel="stylesheet" href="../asset/css/main.css">
			
 
				+    <link rel="stylesheet" href="../asset/css/font-awesome.min.css">
			
 
				+</head>
			
 
				+<body id="main">
			
 
				+<div class="tabs">
			
 
				+    <a class="on">完整词库<span>(0)</span></a><a>收藏词库<span>(0)</span></a><a>错误词库<span>(0)</span></a><a>最近新增<span>(0)</span></a><a><i class="fa fa-gear"></i></a>
			
 
				+</div>
			
 
				+<div class="content">
			
 
				+    <div class="tabContent total on">
			
 
				+        <input type="text" class="search" placeholder="快速查找" />
			
 
				+        <div class="list"><ul></ul></div>
			
 
				+    </div>
			
 
				+    <div class="tabContent stars"></div>
			
 
				+    <div class="tabContent error"></div>
			
 
				+    <div class="tabContent recent"></div>
			
 
				+    <div class="tabContent settings">
			
 
				+        <input type="file" id="my_file" style="display: none;">
			
 
				+        <button value="导入" id="clickme">导入</button>
			
 
				+    </div>
			
 
				+</div>
			
 
				+<div class="loading">
			
 
				+    <p>词库读取中,请稍后...</p>
			
 
				+</div>
			
 
				+<script src="../lib/jquery.min.js"></script>
			
 
				+<script src="../lib/main.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/windows/popup.html
+++ b/windows/popup.html
@@ -0,0 +1,23 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh_cn">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Random English Learning</title>
			
 
				+    <link rel="stylesheet" href="../asset/css/main.css">
			
 
				+    <link rel="stylesheet" href="../asset/css/font-awesome.min.css">
			
 
				+</head>
			
 
				+<body id="popup">
			
 
				+<div class="info">
			
 
				+    <a class="close"><i class="fa fa-close"></i></a>
			
 
				+    <div class="word"><p class="w">transportation</p><p class="pron">[<span>[ˌtrænspɔːr'teɪʃn]</span>]<a class="audio"><i class="fa fa-play-circle"></i></a></p></div>
			
 
				+    <div class="def"></div>
			
 
				+    <div class="example"></div>
			
 
				+    <div class="from">数据来源 - <a href="https://www.shanbay.com/" title="" target="_blank">扇贝网</a></div>
			
 
				+</div>
			
 
				+<div class="loading">
			
 
				+    <p>单词信息读取中,请稍后...</p>
			
 
				+</div>
			
 
				+<script src="../lib/jquery.min.js"></script>
			
 
				+<script src="../lib/popup.js"></script>
			
 
				+</body>
			
 
				+</html>