jingjingxyk
3 years ago
parent
f21d3e466a
commit
2158795a8c
@ -1,33 +1,31 @@
|
||||
tr:hover {
|
||||
border: 8px solid #ddd !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 5px 5px 15px #daf5fe !important;
|
||||
border: 8px solid #ddd !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 5px 5px 15px #daf5fe !important;
|
||||
|
||||
color: #fff !important;
|
||||
background-color: #3ec487 !important;
|
||||
/*
|
||||
color: #fff !important;
|
||||
background-color: #3ec487 !important;
|
||||
/*
|
||||
font-weight: 200;
|
||||
font-size: 1.1rem;
|
||||
*/
|
||||
}
|
||||
|
||||
#chinese-programmer-wrong-pronunciation-custom-iframe-box{
|
||||
border: 8px solid #ddd !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 5px 5px 15px #daf5fe !important;
|
||||
z-index: 999;
|
||||
position: fixed !important;
|
||||
#chinese-programmer-wrong-pronunciation-custom-iframe-box {
|
||||
border: 8px solid #ddd !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 5px 5px 15px #daf5fe !important;
|
||||
z-index: 999;
|
||||
position: fixed !important;
|
||||
}
|
||||
.chinese-programmer-wrong-pronunciation-custom-iframe-box{
|
||||
right: 0 !important;
|
||||
top: 64px !important;
|
||||
|
||||
|
||||
.chinese-programmer-wrong-pronunciation-custom-iframe-box {
|
||||
right: 0 !important;
|
||||
top: 64px !important;
|
||||
}
|
||||
|
||||
#chinese-programmer-wrong-pronunciation-custom-iframe {
|
||||
width:100%;
|
||||
height: 100%;
|
||||
min-width: 700px !important;
|
||||
min-height: 600px !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 700px !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 components from "./components.js"
|
||||
import * as searchEngine from "./search-engine.js"
|
||||
import * as components from "./components.js";
|
||||
import * as searchEngine from "./search-engine.js";
|
||||
|
||||
let goToSearchPronounce = (word) => {
|
||||
let search_engine_name = "gotToGoogleSearch";
|
||||
// search_engine_name='gotToYouDaoSearch'
|
||||
let tab = "current_tab";
|
||||
|
||||
let search_engine_name = "gotToGoogleSearch"
|
||||
// search_engine_name='gotToYouDaoSearch'
|
||||
let tab = "current_tab"
|
||||
|
||||
let opener = components.getSearchEngineOpener();
|
||||
if (opener && opener.expired_date) {
|
||||
if(opener.expired_date > (new Date()).getTime()) {
|
||||
if (opener.search_engine_name) {
|
||||
search_engine_name = opener.search_engine_name;
|
||||
}
|
||||
if (opener.tab) {
|
||||
tab = opener.tab;
|
||||
}
|
||||
}
|
||||
let opener = components.getSearchEngineOpener();
|
||||
if (opener && opener.expired_date) {
|
||||
if (opener.expired_date > new Date().getTime()) {
|
||||
if (opener.search_engine_name) {
|
||||
search_engine_name = opener.search_engine_name;
|
||||
}
|
||||
if (opener.tab) {
|
||||
tab = opener.tab;
|
||||
}
|
||||
}
|
||||
if (search_engine_name && searchEngine[search_engine_name]) {
|
||||
console.log(word)
|
||||
let url = searchEngine[search_engine_name](word);
|
||||
console.log(url)
|
||||
if (tab === 'new_tab') {
|
||||
window.open(url, '_blank')
|
||||
} else {
|
||||
let iframe = components.getIframe();
|
||||
iframe.setAttribute('src', url);
|
||||
}
|
||||
}
|
||||
if (search_engine_name && searchEngine[search_engine_name]) {
|
||||
console.log(word);
|
||||
let url = searchEngine[search_engine_name](word);
|
||||
console.log(url);
|
||||
if (tab === "new_tab") {
|
||||
window.open(url, "_blank");
|
||||
} 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 URLObj = new URL(location.href);
|
||||
console.log(URLObj);
|
||||
if (document.querySelector("#readme table tbody")) {
|
||||
box.styleConfig();
|
||||
box.customElement();
|
||||
let init = () => {
|
||||
let URLObj = new URL(location.href);
|
||||
console.log(URLObj);
|
||||
if (document.querySelector("#readme table tbody")) {
|
||||
box.styleConfig();
|
||||
box.customElement();
|
||||
|
||||
let audio_player = new Audio();
|
||||
audio_player.setAttribute("autoplay", "true");
|
||||
document
|
||||
.querySelector("#readme table tbody")
|
||||
.addEventListener("click", (event) => {
|
||||
let audio_player = new Audio();
|
||||
audio_player.setAttribute("autoplay", "true");
|
||||
document
|
||||
.querySelector("#readme table tbody")
|
||||
.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)
|
||||
// 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}
|
||||
export { init };
|
||||
|
||||
@ -1,79 +1,74 @@
|
||||
import {addClass, removeClass} from "./until.js";
|
||||
import { addClass, removeClass } from "./until.js";
|
||||
|
||||
let prettyBox = (box) => {
|
||||
|
||||
|
||||
// 参考 https://blog.csdn.net/weixin_41910848/article/details/82218243
|
||||
|
||||
let dragging = false;
|
||||
let diffX = null;
|
||||
let diffY = null;
|
||||
box.onmousedown = function (event) {
|
||||
dragging = true;
|
||||
|
||||
let left = box.offsetLeft;
|
||||
let top = box.offsetTop;
|
||||
|
||||
removeClass(box, 'chinese-programmer-wrong-pronunciation-custom-iframe-box')
|
||||
|
||||
box.style.left = left + "px";
|
||||
box.style.top = top + "px";
|
||||
|
||||
diffX = event.clientX - left;
|
||||
diffY = event.clientY - top;
|
||||
|
||||
}
|
||||
document.onmousemove = function (event) {
|
||||
|
||||
|
||||
if (dragging) {
|
||||
|
||||
// console.log(event.clientX, event.clientY)
|
||||
//console.log(diffX, diffY)
|
||||
|
||||
let moveX = event.clientX - diffX;
|
||||
let moveY = event.clientY - diffY;
|
||||
|
||||
if (moveX < 0) {
|
||||
moveX = 0
|
||||
} else if (moveX > window.innerWidth - box.offsetWidth) {
|
||||
moveX = window.innerWidth - box.offsetWidth
|
||||
}
|
||||
if (moveY < 0) {
|
||||
moveY = 0
|
||||
} else if (moveY > window.innerHeight - box.offsetHeight) {
|
||||
moveY = window.innerHeight - box.offsetHeight
|
||||
}
|
||||
|
||||
box.style.left = moveX + "px";
|
||||
box.style.top = moveY + "px"
|
||||
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
document.onmouseup = function (event) {
|
||||
dragging = false;
|
||||
// 参考 https://blog.csdn.net/weixin_41910848/article/details/82218243
|
||||
|
||||
let dragging = false;
|
||||
let diffX = null;
|
||||
let diffY = null;
|
||||
box.onmousedown = function (event) {
|
||||
dragging = true;
|
||||
|
||||
let left = box.offsetLeft;
|
||||
let top = box.offsetTop;
|
||||
|
||||
removeClass(
|
||||
box,
|
||||
"chinese-programmer-wrong-pronunciation-custom-iframe-box"
|
||||
);
|
||||
|
||||
box.style.left = left + "px";
|
||||
box.style.top = top + "px";
|
||||
|
||||
diffX = event.clientX - left;
|
||||
diffY = event.clientY - top;
|
||||
};
|
||||
document.onmousemove = function (event) {
|
||||
if (dragging) {
|
||||
// console.log(event.clientX, event.clientY)
|
||||
//console.log(diffX, diffY)
|
||||
|
||||
let moveX = event.clientX - diffX;
|
||||
let moveY = event.clientY - diffY;
|
||||
|
||||
if (moveX < 0) {
|
||||
moveX = 0;
|
||||
} else if (moveX > window.innerWidth - box.offsetWidth) {
|
||||
moveX = window.innerWidth - box.offsetWidth;
|
||||
}
|
||||
if (moveY < 0) {
|
||||
moveY = 0;
|
||||
} else if (moveY > window.innerHeight - box.offsetHeight) {
|
||||
moveY = window.innerHeight - box.offsetHeight;
|
||||
}
|
||||
|
||||
box.style.left = moveX + "px";
|
||||
box.style.top = moveY + "px";
|
||||
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
box.onmouseup = (event) => {
|
||||
dragging = false;
|
||||
}
|
||||
|
||||
box.ondragstart = function (event) {
|
||||
console.log(box.offsetLeft, box.offsetTop)
|
||||
console.log('开始拖拽');
|
||||
}
|
||||
box.ondrag = function () {
|
||||
console.log(box.offsetLeft, box.offsetTop)
|
||||
console.log('拖拽中');
|
||||
}
|
||||
box.ondragend = function () {
|
||||
console.log(box.offsetLeft, box.offsetTop)
|
||||
console.log('拖拽结束')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export {prettyBox}
|
||||
};
|
||||
document.onmouseup = function (event) {
|
||||
dragging = false;
|
||||
};
|
||||
|
||||
box.onmouseup = (event) => {
|
||||
dragging = false;
|
||||
};
|
||||
|
||||
box.ondragstart = function (event) {
|
||||
console.log(box.offsetLeft, box.offsetTop);
|
||||
console.log("开始拖拽");
|
||||
};
|
||||
box.ondrag = function () {
|
||||
console.log(box.offsetLeft, box.offsetTop);
|
||||
console.log("拖拽中");
|
||||
};
|
||||
box.ondragend = function () {
|
||||
console.log(box.offsetLeft, box.offsetTop);
|
||||
console.log("拖拽结束");
|
||||
};
|
||||
};
|
||||
|
||||
export { prettyBox };
|
||||
|
||||
@ -1,24 +1,19 @@
|
||||
function hasClass(el, className) {
|
||||
if (el.classList)
|
||||
return el.classList.contains(className);
|
||||
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
|
||||
if (el.classList) return el.classList.contains(className);
|
||||
return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
|
||||
}
|
||||
|
||||
|
||||
function addClass(el, className) {
|
||||
if (el.classList)
|
||||
el.classList.add(className)
|
||||
else if (!hasClass(el, className))
|
||||
el.className += " " + className;
|
||||
if (el.classList) el.classList.add(className);
|
||||
else if (!hasClass(el, className)) el.className += " " + className;
|
||||
}
|
||||
|
||||
function removeClass(el, className) {
|
||||
if (el.classList)
|
||||
el.classList.remove(className)
|
||||
else if (hasClass(el, className)) {
|
||||
let reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
|
||||
el.className = el.className.replace(reg, ' ');
|
||||
}
|
||||
if (el.classList) el.classList.remove(className);
|
||||
else if (hasClass(el, className)) {
|
||||
let reg = new RegExp("(\\s|^)" + className + "(\\s|$)");
|
||||
el.className = el.className.replace(reg, " ");
|
||||
}
|
||||
}
|
||||
|
||||
export {addClass, removeClass}
|
||||
export { addClass, removeClass };
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
(async () => {
|
||||
let app = await import(chrome.runtime.getURL('js/app/init.js'))
|
||||
app.init()
|
||||
})();
|
||||
let app = await import(chrome.runtime.getURL("js/app/init.js"));
|
||||
app.init();
|
||||
})();
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<x-chinese-programmer-wrong-pronunciation-custom-box>
|
||||
<div>自定义web组件-做代码隔离</div>
|
||||
</x-chinese-programmer-wrong-pronunciation-custom-box>
|
||||
<div>自定义web组件-做代码隔离</div>
|
||||
</x-chinese-programmer-wrong-pronunciation-custom-box>
|
||||
|
||||
Loading…
Reference in new issue