Skip to content

Commit

Permalink
refactor: showtips
Browse files Browse the repository at this point in the history
  • Loading branch information
HomyeeKing committed Nov 6, 2021
1 parent ea9b98b commit 97dea3d
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 115 deletions.
12 changes: 12 additions & 0 deletions chrUtils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// chrome API utils

/**
*
* @param {String} url
*/
export function reloadPage(url) {
chrome.runtime.sendMessage({
type: "pageReload",
url,
});
}
2 changes: 1 addition & 1 deletion popup.html
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ <h3>
</template>

<template id="nodata"> url参数为空 </template>

<script src="./popup.js" type="module"></script>
</body>
</html>
131 changes: 67 additions & 64 deletions popup.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import store from "./store.js";
import { rmQuery, updateQuery } from "./utils.js";
import { rmQuery, updateQuery, showTips } from "./utils.js";
import { reloadPage } from './chrUtils.js'

const tbody = document.querySelector("#tbody");
const template = document.querySelector("#productrow");
Expand All @@ -13,82 +14,84 @@ const warnText = document.querySelector(".warn-text");
* @param {String} v2 value的值
*/
function createTr(v1 = "", v2 = "") {
let oldKey = v1;
let oldKey = v1;

const clone = template.content.cloneNode(true);
const tr = clone.querySelector("tr");
// const checkbox = clone.querySelector(".checkbox");
const clone = template.content.cloneNode(true);
const tr = clone.querySelector("tr");
// const checkbox = clone.querySelector(".checkbox");

const addBtn = clone.querySelector("#add-btn");
const removeBtn = clone.querySelector("#remove-btn");
const keyInput = clone.querySelector("#key-input");
const valueInput = clone.querySelector("#value-input");
keyInput.value = v1;
valueInput.value = v2;
const addBtn = clone.querySelector("#add-btn");
const removeBtn = clone.querySelector("#remove-btn");
const keyInput = clone.querySelector("#key-input");
const valueInput = clone.querySelector("#value-input");
keyInput.value = v1;
valueInput.value = v2;

// function toggleCheckbox() {
// console.log("click");
// if (checkbox.checked && v1 !== "") {
// store.url = addQuery({ [v1]: v2 });
// } else {
// store.url = rmQuery(v1);
// }
// }
// 创建行
addBtn.addEventListener("click", () => {
createTr();
});
// function toggleCheckbox() {
// console.log("click");
// if (checkbox.checked && v1 !== "") {
// store.url = addQuery({ [v1]: v2 });
// } else {
// store.url = rmQuery(v1);
// }
// }
// 创建行
addBtn.addEventListener("click", () => {
createTr();
});

// 移除行
removeBtn.addEventListener("click", () => {
removeTr(tr);
store.url = rmQuery(oldKey);
});
// 移除行
removeBtn.addEventListener("click", () => {
removeTr(tr);
store.url = rmQuery(oldKey);
});

keyInput.onchange = () => {
updateQuery(oldKey, { [keyInput.value]: valueInput.value });
oldKey = keyInput.value;
};
keyInput.onchange = () => {
updateQuery(oldKey, { [keyInput.value]: valueInput.value });
oldKey = keyInput.value;
};

valueInput.onchange = () => {
updateQuery(oldKey, { [keyInput.value]: valueInput.value });
};
valueInput.onchange = () => {
updateQuery(oldKey, { [keyInput.value]: valueInput.value });
};

// checkbox.addEventListener("change", throttle(toggleCheckbox));
tbody.appendChild(clone);
// checkbox.addEventListener("change", throttle(toggleCheckbox));
tbody.appendChild(clone);
}

function removeTr(node) {
tbody.removeChild(node);
if (tbody.childNodes.length === 1) {
tbody.removeChild(node);

}
}

chrome.runtime.sendMessage(
{
type: "getUrl",
},
(url) => {
// init url
store.pageUrl = url;
store.url = url;
currentUrlNode.textContent = store.url;
{
type: "getUrl",
},
(url) => {
// init url
store.pageUrl = url;
store.url = url;
currentUrlNode.textContent = store.url;

const index = url.indexOf("?");
const query = index > -1 ? url.slice(index) : "";
if (query === "") {
const clone = noData.content.cloneNode(true);
tbody.append(clone);
} else {
const qs = new URLSearchParams(query);
for (const q of qs) {
createTr(q[0], q[1]);
}
}
}
const index = url.indexOf("?");
const query = index > -1 ? url.slice(index) : "";
console.log(`query`, query)
if (query === "") {
// const clone = noData.content.cloneNode(true);
// tbody.append(clone);
createTr('url参数为空')
} else {
const qs = new URLSearchParams(query);
for (const q of qs) {
createTr(q[0], q[1]);
}
}
}
);
warnText.onclick = () => {
chrome.runtime.sendMessage({
type: "pageReload",
url: store.url,
});
document.querySelector(".warn-text").style.display = 'none'
};
reloadPage(store.url)
showTips(false)
};
36 changes: 19 additions & 17 deletions store.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import { showTips } from './utils.js'

const store = new Proxy(
{
url: location.href,
pageUrl: location.href, // 当前页面url
},
{
set(target, key, newVal) {
if (key === "url") {
target[key] = newVal;
document.querySelector("#current-url").textContent = newVal;
if (newVal !== target.pageUrl) {
document.querySelector(".warn-text").style.display = 'inline'
target.pageUrl = newVal
}
}
{
url: location.href,
pageUrl: location.href, // 当前页面url
},
{
set(target, key, newVal) {
if (key === "url") {
target[key] = newVal;
document.querySelector("#current-url").textContent = newVal;
if (newVal !== target.pageUrl) {
showTips()
target.pageUrl = newVal
}
}

return Reflect.set(arguments)
},
}
return Reflect.set(...arguments)
},
}
);

export default store;
71 changes: 38 additions & 33 deletions utils.js
Original file line number Diff line number Diff line change
@@ -1,52 +1,57 @@
import store from "./store.js";

const queryToObj = (str) => {
const obj = Object.create(null);
if (!str || str === "") return obj;

const params = new URLSearchParams(str);
for (const [key, value] of params) {
obj[key] = value;
}
return obj;
const obj = Object.create(null);
if (!str || str === "") return obj;

const params = new URLSearchParams(str);
for (const [key, value] of params) {
obj[key] = value;
}
return obj;
};

const objToQuery = (obj) => {
const tmp = [];
for (const key of Object.keys(obj)) {
tmp.push(`${key}=${obj[key]}`);
}
return tmp.join("&");
const tmp = [];
for (const key of Object.keys(obj)) {
tmp.push(`${key}=${obj[key]}`);
}
return tmp.join("&");
};

export const rmQuery = (key, url = store.url) => {
if (key === "") return;
const [host, query] = url.split("?");
const queryObj = queryToObj(query);
Reflect.deleteProperty(queryObj, key);
return `${host}?${objToQuery(queryObj)}`;
if (key === "") return;
const [host, query] = url.split("?");
const queryObj = queryToObj(query);
Reflect.deleteProperty(queryObj, key);
return `${host}?${objToQuery(queryObj)}`;
};

export const addQuery = (obj, url = store.url) => {
const [host, query] = url.split("?");
const queryObj = queryToObj(query);
Object.assign(queryObj, obj);
return `${host}?${objToQuery(queryObj)}`;
const [host, query] = url.split("?");
const queryObj = queryToObj(query);
Object.assign(queryObj, obj);
return `${host}?${objToQuery(queryObj)}`;
};

export const updateQuery = (oldKey, newObj, url = store.url) => {
if (oldKey === "") return;
store.url = addQuery(newObj, rmQuery(oldKey, url));
if (oldKey === "") return;
store.url = addQuery(newObj, rmQuery(oldKey, url));
};

export const throttle = (fn, timeout = 300) => {
let timer = undefined;
return () => {
if (timer) return;
timer = setTimeout(() => {
fn();
clearTimeout(timer);
timer = undefined;
}, timeout);
};
let timer = undefined;
return () => {
if (timer) return;
timer = setTimeout(() => {
fn();
clearTimeout(timer);
timer = undefined;
}, timeout);
};
};


export const showTips = (show = true) => {
document.querySelector(".warn-text").style.display = show ? 'inline' : 'none'
}

0 comments on commit 97dea3d

Please sign in to comment.