jingjingxyk
3 years ago
parent
f21d3e466a
commit
2158795a8c
@ -1,33 +1,31 @@
|
|||||||
tr:hover {
|
tr:hover {
|
||||||
border: 8px solid #ddd !important;
|
border: 8px solid #ddd !important;
|
||||||
border-radius: 8px !important;
|
border-radius: 8px !important;
|
||||||
box-shadow: 5px 5px 15px #daf5fe !important;
|
box-shadow: 5px 5px 15px #daf5fe !important;
|
||||||
|
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
background-color: #3ec487 !important;
|
background-color: #3ec487 !important;
|
||||||
/*
|
/*
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
|
|
||||||
#chinese-programmer-wrong-pronunciation-custom-iframe-box{
|
#chinese-programmer-wrong-pronunciation-custom-iframe-box {
|
||||||
border: 8px solid #ddd !important;
|
border: 8px solid #ddd !important;
|
||||||
border-radius: 8px !important;
|
border-radius: 8px !important;
|
||||||
box-shadow: 5px 5px 15px #daf5fe !important;
|
box-shadow: 5px 5px 15px #daf5fe !important;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
}
|
}
|
||||||
.chinese-programmer-wrong-pronunciation-custom-iframe-box{
|
.chinese-programmer-wrong-pronunciation-custom-iframe-box {
|
||||||
right: 0 !important;
|
right: 0 !important;
|
||||||
top: 64px !important;
|
top: 64px !important;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#chinese-programmer-wrong-pronunciation-custom-iframe {
|
#chinese-programmer-wrong-pronunciation-custom-iframe {
|
||||||
width:100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-width: 700px !important;
|
min-width: 700px !important;
|
||||||
min-height: 600px !important;
|
min-height: 600px !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,8 @@
|
|||||||
|
#!/bin/env bash
|
||||||
|
|
||||||
|
set -exu
|
||||||
|
|
||||||
|
__DIR__=$(cd "$(dirname "$0")";pwd)
|
||||||
|
cd ${__DIR__}
|
||||||
|
|
||||||
|
npm run format-code
|
||||||
@ -1,39 +1,37 @@
|
|||||||
import * as until from "./until.js";
|
import * as until from "./until.js";
|
||||||
import * as components from "./components.js"
|
import * as components from "./components.js";
|
||||||
import * as searchEngine from "./search-engine.js"
|
import * as searchEngine from "./search-engine.js";
|
||||||
|
|
||||||
let goToSearchPronounce = (word) => {
|
let goToSearchPronounce = (word) => {
|
||||||
|
let search_engine_name = "gotToGoogleSearch";
|
||||||
|
// search_engine_name='gotToYouDaoSearch'
|
||||||
|
let tab = "current_tab";
|
||||||
|
|
||||||
let search_engine_name = "gotToGoogleSearch"
|
let opener = components.getSearchEngineOpener();
|
||||||
// search_engine_name='gotToYouDaoSearch'
|
if (opener && opener.expired_date) {
|
||||||
let tab = "current_tab"
|
if (opener.expired_date > new Date().getTime()) {
|
||||||
|
if (opener.search_engine_name) {
|
||||||
let opener = components.getSearchEngineOpener();
|
search_engine_name = opener.search_engine_name;
|
||||||
if (opener && opener.expired_date) {
|
}
|
||||||
if(opener.expired_date > (new Date()).getTime()) {
|
if (opener.tab) {
|
||||||
if (opener.search_engine_name) {
|
tab = opener.tab;
|
||||||
search_engine_name = opener.search_engine_name;
|
}
|
||||||
}
|
|
||||||
if (opener.tab) {
|
|
||||||
tab = opener.tab;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
if (search_engine_name && searchEngine[search_engine_name]) {
|
}
|
||||||
console.log(word)
|
if (search_engine_name && searchEngine[search_engine_name]) {
|
||||||
let url = searchEngine[search_engine_name](word);
|
console.log(word);
|
||||||
console.log(url)
|
let url = searchEngine[search_engine_name](word);
|
||||||
if (tab === 'new_tab') {
|
console.log(url);
|
||||||
window.open(url, '_blank')
|
if (tab === "new_tab") {
|
||||||
} else {
|
window.open(url, "_blank");
|
||||||
let iframe = components.getIframe();
|
|
||||||
iframe.setAttribute('src', url);
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
console.log('search engine no found !')
|
let iframe = components.getIframe();
|
||||||
|
iframe.setAttribute("src", url);
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
console.log("search engine no found !");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
}
|
let box = { ...until, ...components, ...searchEngine, goToSearchPronounce };
|
||||||
|
export default box;
|
||||||
let box = {...until, ...components,...searchEngine, goToSearchPronounce};
|
|
||||||
export default box
|
|
||||||
|
|||||||
@ -1,66 +1,66 @@
|
|||||||
import box from "./box.js"
|
import box from "./box.js";
|
||||||
|
|
||||||
let init=()=>{
|
let init = () => {
|
||||||
let URLObj = new URL(location.href);
|
let URLObj = new URL(location.href);
|
||||||
console.log(URLObj);
|
console.log(URLObj);
|
||||||
if (document.querySelector("#readme table tbody")) {
|
if (document.querySelector("#readme table tbody")) {
|
||||||
box.styleConfig();
|
box.styleConfig();
|
||||||
box.customElement();
|
box.customElement();
|
||||||
|
|
||||||
let audio_player = new Audio();
|
let audio_player = new Audio();
|
||||||
audio_player.setAttribute("autoplay", "true");
|
audio_player.setAttribute("autoplay", "true");
|
||||||
document
|
document
|
||||||
.querySelector("#readme table tbody")
|
.querySelector("#readme table tbody")
|
||||||
.addEventListener("click", (event) => {
|
.addEventListener("click", (event) => {
|
||||||
|
//console.log(event.target)
|
||||||
|
// console.log(event.target.nodeType)
|
||||||
|
// console.log(event.target.nodeName);
|
||||||
|
let parentElement = event.target.parentElement;
|
||||||
|
if (parentElement && parentElement.nodeName === "TR") {
|
||||||
|
if (parentElement.firstElementChild === event.target) {
|
||||||
|
//使用搜索引擎查询发音
|
||||||
|
box.goToSearchPronounce(event.target.innerText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
let audio_url = null;
|
||||||
|
if (event.target.nodeName === "TD") {
|
||||||
|
let aTag = event.target.querySelector("a");
|
||||||
|
if (aTag) {
|
||||||
|
audio_url = aTag.getAttribute("href");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (event.target.nodeName === "IMG") {
|
||||||
|
let aTag = event.target.parentNode.parentNode;
|
||||||
|
audio_url = aTag.getAttribute("href");
|
||||||
|
}
|
||||||
|
if (audio_url) {
|
||||||
|
let desURL = new URL(audio_url);
|
||||||
|
//console.log(desURL.protocol);
|
||||||
|
if (desURL.protocol === "http:") {
|
||||||
|
//skip http
|
||||||
|
location.href = audio_url;
|
||||||
|
} else {
|
||||||
|
// console.log("audio_url:", audio_url);
|
||||||
|
audio_player.setAttribute("src", audio_url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document
|
||||||
|
.querySelector("#readme table tbody")
|
||||||
|
.addEventListener("mouseover", (event) => {
|
||||||
|
let parentElement = event.target.parentElement;
|
||||||
|
if (parentElement && parentElement.nodeName === "TR") {
|
||||||
|
if (parentElement.firstElementChild === event.target) {
|
||||||
|
event.target.setAttribute("title", "点击我打开搜索引擎检索");
|
||||||
|
event.target.style.cursor = "pointer";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log("no found README.md table");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
//console.log(event.target)
|
export { init };
|
||||||
// console.log(event.target.nodeType)
|
|
||||||
// console.log(event.target.nodeName);
|
|
||||||
let parentElement = event.target.parentElement
|
|
||||||
if (parentElement && parentElement.nodeName === 'TR') {
|
|
||||||
if (parentElement.firstElementChild === event.target) {
|
|
||||||
//使用搜索引擎查询发音
|
|
||||||
box.goToSearchPronounce(event.target.innerText)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
let audio_url = null;
|
|
||||||
if (event.target.nodeName === "TD") {
|
|
||||||
let aTag = event.target.querySelector("a");
|
|
||||||
if (aTag) {
|
|
||||||
audio_url = aTag.getAttribute("href");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (event.target.nodeName === "IMG") {
|
|
||||||
let aTag = event.target.parentNode.parentNode;
|
|
||||||
audio_url = aTag.getAttribute("href");
|
|
||||||
}
|
|
||||||
if (audio_url) {
|
|
||||||
let desURL = new URL(audio_url);
|
|
||||||
//console.log(desURL.protocol);
|
|
||||||
if (desURL.protocol === "http:") {
|
|
||||||
//skip http
|
|
||||||
location.href = audio_url;
|
|
||||||
} else {
|
|
||||||
// console.log("audio_url:", audio_url);
|
|
||||||
audio_player.setAttribute("src", audio_url);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
document.querySelector("#readme table tbody").addEventListener('mouseover',(event)=>{
|
|
||||||
let parentElement = event.target.parentElement
|
|
||||||
if (parentElement && parentElement.nodeName === 'TR') {
|
|
||||||
if (parentElement.firstElementChild === event.target) {
|
|
||||||
event.target.setAttribute('title','点击我打开搜索引擎检索')
|
|
||||||
event.target.style.cursor='pointer'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}else{
|
|
||||||
console.log("no found README.md table")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export {init}
|
|
||||||
|
|||||||
@ -1,79 +1,74 @@
|
|||||||
import {addClass, removeClass} from "./until.js";
|
import { addClass, removeClass } from "./until.js";
|
||||||
|
|
||||||
let prettyBox = (box) => {
|
let prettyBox = (box) => {
|
||||||
|
// 参考 https://blog.csdn.net/weixin_41910848/article/details/82218243
|
||||||
|
|
||||||
// 参考 https://blog.csdn.net/weixin_41910848/article/details/82218243
|
let dragging = false;
|
||||||
|
let diffX = null;
|
||||||
let dragging = false;
|
let diffY = null;
|
||||||
let diffX = null;
|
box.onmousedown = function (event) {
|
||||||
let diffY = null;
|
dragging = true;
|
||||||
box.onmousedown = function (event) {
|
|
||||||
dragging = true;
|
let left = box.offsetLeft;
|
||||||
|
let top = box.offsetTop;
|
||||||
let left = box.offsetLeft;
|
|
||||||
let top = box.offsetTop;
|
removeClass(
|
||||||
|
box,
|
||||||
removeClass(box, 'chinese-programmer-wrong-pronunciation-custom-iframe-box')
|
"chinese-programmer-wrong-pronunciation-custom-iframe-box"
|
||||||
|
);
|
||||||
box.style.left = left + "px";
|
|
||||||
box.style.top = top + "px";
|
box.style.left = left + "px";
|
||||||
|
box.style.top = top + "px";
|
||||||
diffX = event.clientX - left;
|
|
||||||
diffY = event.clientY - top;
|
diffX = event.clientX - left;
|
||||||
|
diffY = event.clientY - top;
|
||||||
}
|
};
|
||||||
document.onmousemove = function (event) {
|
document.onmousemove = function (event) {
|
||||||
|
if (dragging) {
|
||||||
|
// console.log(event.clientX, event.clientY)
|
||||||
if (dragging) {
|
//console.log(diffX, diffY)
|
||||||
|
|
||||||
// console.log(event.clientX, event.clientY)
|
let moveX = event.clientX - diffX;
|
||||||
//console.log(diffX, diffY)
|
let moveY = event.clientY - diffY;
|
||||||
|
|
||||||
let moveX = event.clientX - diffX;
|
if (moveX < 0) {
|
||||||
let moveY = event.clientY - diffY;
|
moveX = 0;
|
||||||
|
} else if (moveX > window.innerWidth - box.offsetWidth) {
|
||||||
if (moveX < 0) {
|
moveX = window.innerWidth - box.offsetWidth;
|
||||||
moveX = 0
|
}
|
||||||
} else if (moveX > window.innerWidth - box.offsetWidth) {
|
if (moveY < 0) {
|
||||||
moveX = window.innerWidth - box.offsetWidth
|
moveY = 0;
|
||||||
}
|
} else if (moveY > window.innerHeight - box.offsetHeight) {
|
||||||
if (moveY < 0) {
|
moveY = window.innerHeight - box.offsetHeight;
|
||||||
moveY = 0
|
}
|
||||||
} else if (moveY > window.innerHeight - box.offsetHeight) {
|
|
||||||
moveY = window.innerHeight - box.offsetHeight
|
box.style.left = moveX + "px";
|
||||||
}
|
box.style.top = moveY + "px";
|
||||||
|
|
||||||
box.style.left = moveX + "px";
|
event.stopPropagation();
|
||||||
box.style.top = moveY + "px"
|
event.preventDefault();
|
||||||
|
|
||||||
event.stopPropagation();
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
document.onmouseup = function (event) {
|
|
||||||
dragging = false;
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
box.onmouseup = (event) => {
|
document.onmouseup = function (event) {
|
||||||
dragging = false;
|
dragging = false;
|
||||||
}
|
};
|
||||||
|
|
||||||
box.ondragstart = function (event) {
|
box.onmouseup = (event) => {
|
||||||
console.log(box.offsetLeft, box.offsetTop)
|
dragging = false;
|
||||||
console.log('开始拖拽');
|
};
|
||||||
}
|
|
||||||
box.ondrag = function () {
|
box.ondragstart = function (event) {
|
||||||
console.log(box.offsetLeft, box.offsetTop)
|
console.log(box.offsetLeft, box.offsetTop);
|
||||||
console.log('拖拽中');
|
console.log("开始拖拽");
|
||||||
}
|
};
|
||||||
box.ondragend = function () {
|
box.ondrag = function () {
|
||||||
console.log(box.offsetLeft, box.offsetTop)
|
console.log(box.offsetLeft, box.offsetTop);
|
||||||
console.log('拖拽结束')
|
console.log("拖拽中");
|
||||||
}
|
};
|
||||||
|
box.ondragend = function () {
|
||||||
}
|
console.log(box.offsetLeft, box.offsetTop);
|
||||||
|
console.log("拖拽结束");
|
||||||
|
};
|
||||||
export {prettyBox}
|
};
|
||||||
|
|
||||||
|
export { prettyBox };
|
||||||
|
|||||||
@ -1,24 +1,19 @@
|
|||||||
function hasClass(el, className) {
|
function hasClass(el, className) {
|
||||||
if (el.classList)
|
if (el.classList) return el.classList.contains(className);
|
||||||
return el.classList.contains(className);
|
return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
|
||||||
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function addClass(el, className) {
|
function addClass(el, className) {
|
||||||
if (el.classList)
|
if (el.classList) el.classList.add(className);
|
||||||
el.classList.add(className)
|
else if (!hasClass(el, className)) el.className += " " + className;
|
||||||
else if (!hasClass(el, className))
|
|
||||||
el.className += " " + className;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeClass(el, className) {
|
function removeClass(el, className) {
|
||||||
if (el.classList)
|
if (el.classList) el.classList.remove(className);
|
||||||
el.classList.remove(className)
|
else if (hasClass(el, className)) {
|
||||||
else if (hasClass(el, className)) {
|
let reg = new RegExp("(\\s|^)" + className + "(\\s|$)");
|
||||||
let reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
|
el.className = el.className.replace(reg, " ");
|
||||||
el.className = el.className.replace(reg, ' ');
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export {addClass, removeClass}
|
export { addClass, removeClass };
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
(async () => {
|
(async () => {
|
||||||
let app = await import(chrome.runtime.getURL('js/app/init.js'))
|
let app = await import(chrome.runtime.getURL("js/app/init.js"));
|
||||||
app.init()
|
app.init();
|
||||||
})();
|
})();
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
<x-chinese-programmer-wrong-pronunciation-custom-box>
|
<x-chinese-programmer-wrong-pronunciation-custom-box>
|
||||||
<div>自定义web组件-做代码隔离</div>
|
<div>自定义web组件-做代码隔离</div>
|
||||||
</x-chinese-programmer-wrong-pronunciation-custom-box>
|
</x-chinese-programmer-wrong-pronunciation-custom-box>
|
||||||
|
|||||||
Loading…
Reference in new issue