Skip to content

Commit

Permalink
增加置顶功能
Browse files Browse the repository at this point in the history
  • Loading branch information
王美建 committed Oct 14, 2022
1 parent 8179f0e commit 744a7dd
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 37 deletions.
37 changes: 27 additions & 10 deletions extension/content-script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,33 +279,50 @@ class AutoClipboard {
text = text.slice(0, this._MAX_ITEM_LENGTH);
}
const STORAGE_KEY = "auto_clipboard_history";
let historyStorage = (await chrome.storage?.local.get([STORAGE_KEY])) ?? {};
let historyStorage = ((await chrome.storage?.local.get([STORAGE_KEY])) ??
{})[STORAGE_KEY];
let historysMerge = [];
// 更新
const updateMessageHistory = () => {
// 复制的内容和历史记录中某条重复，将其位置放到第一位
if (historyStorage[STORAGE_KEY].includes(text)) {
const index = historyStorage[STORAGE_KEY].findIndex(
(item) => item === text
);
historyStorage[STORAGE_KEY].splice(index, 1);
const repeatIndex = historyStorage.findIndex(
(item) => item.value === text
);
const toppingCount = historyStorage.filter((item) => item.topping).length;

let isCurrentTopping = false;
let insertIndex = toppingCount || 0;

if (repeatIndex > -1) {
isCurrentTopping = historyStorage[repeatIndex].topping;
historyStorage.splice(repeatIndex, 1);
insertIndex = isCurrentTopping ? 0 : toppingCount;
}
historyStorage[STORAGE_KEY].splice(0, 0, text);
historysMerge = historyStorage[STORAGE_KEY];
historyStorage.splice(insertIndex, 0, {
value: text,
topping: isCurrentTopping,
});
historysMerge = historyStorage;
// 限制容量为this._MAX_HISTORY_LENGTH
if (historysMerge.length > this._MAX_HISTORY_LENGTH) {
historysMerge.length = this._MAX_HISTORY_LENGTH;
}
};

// 已有历史记录 ? 更新历史记录 : 设置历史记录
historyStorage[STORAGE_KEY]
historyStorage
? updateMessageHistory()
: (historysMerge = [text]);
: (historysMerge = [
{
topping: false,
value: text,
},
]);
chrome.storage.local.set({
[STORAGE_KEY]: historysMerge,
});
}

/**
* @desc 组合键
* @arg {Event} event 事件对象
Expand Down
8 changes: 5 additions & 3 deletions extension/option.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,8 @@
<title>Auto Clipboard</title>
<style>
.auto_clipboard_options{
width: 500px;
width: 300px;
margin: 0 20px;
display: grid;
grid-template-columns: auto 100px;
}
.auto_clipboard_options .form_item{
line-height: 32px;
Expand All @@ -27,9 +25,13 @@
.auto_clipboard_options .preview_desc{
line-height: 32px;
}
.auto_clipboard_options .prview_wrap{
margin-top: 10px;
}
.auto_clipboard_options .prview{
width: 100px;
height: 30px;
display: inline-block;
text-align: center;
z-index: 9999999;
border-radius: 4px;
Expand Down
23 changes: 17 additions & 6 deletions extension/option.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,29 @@ const DEFAULT_COLOR = {
const optionsHTML = `
<div class="auto_clipboard_options">
<form id="optionForm" name="optionForm">
<div class="form_item">${i18n("messageBackground")}<label><input type="color" name="background" value="${DEFAULT_COLOR.background}" /></label></div>
<div class="form_item">${i18n("messageColor")}<label><input type="color" name="color" value="${DEFAULT_COLOR.color}" /></label></div>
<div class="form_item">${i18n(
"messageBackground"
)}<label><input type="color" name="background" value="${
DEFAULT_COLOR.background
}" /></label></div>
<div class="form_item">${i18n(
"messageColor"
)}<label><input type="color" name="color" value="${
DEFAULT_COLOR.color
}" /></label></div>
<div class="prview_wrap">
<span class="preview_desc">${i18n("prview")}：</span>
<span class="prview rightBottom" id="prview">${i18n(
"copySuccess"
)}</span>
</div>
<div class="form_submit">
<button id="submit" type="button">${i18n("save")}</button>
<button id="recover" type="reset">${i18n("reset")}</button>
<span class="option_tips">${i18n("saveSuccess")}</span>
</div>
</form>
<div class="prview_wrap">
<div class="preview_desc">${i18n("prview")}</div>
<div class="prview rightBottom" id="prview">${i18n("copySuccess")}</div>
</div>
</div>
`;
const optionsDOM = document.createElement('div')
Expand Down
84 changes: 68 additions & 16 deletions extension/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,18 @@ class Popup {
async _initPage() {
const storageKey = this._STORAGE_KEY;
const historyStorage = await chrome.storage.local.get([storageKey]);
this._history = historyStorage[storageKey] || [];
// 后续操作的都是this._history
this._history = (historyStorage[storageKey] || []).map((item) =>
// 增加置顶功能，将存储的数据格式从string改为object
// string => { value: string, topping: boolean }
typeof item === "string"
? {
value: item,
topping: false,
}
: item
);

const historyHTML = this._buildHistoryHTML();
const optionsHTML = `
<div class="popup">
Expand All @@ -39,23 +50,31 @@ class Popup {
filterString = filterString.trim().toLowerCase();
const includeCode = /<[^>]+>/;

return this._history
.filter((item) => {
return filterString.length > 0
? item.toLowerCase().includes(filterString)
: true;
})
.map((item, index) => {
const result = includeCode.test(item) ? this._renderCode(item) : `<a class="click_target" title="${item}" href="#">${item}</a>`;

return `<span class="copy_item stick">
return (
this._history
.filter((item) => {
return filterString.length > 0
? item.value.toLowerCase().includes(filterString)
: true;
})
.sort((a) => (a.value ? 1 : -1))
.map((item, index) => {
const result = includeCode.test(item.value)
? this._renderCode(item.value)
: `<a class="click_target" title="${item.value}" href="#">${item.value}</a>`;

return `<span class="copy_item stick">
<span class="action_item stick_item ${
item.topping ? "topping" : ""
}" title="${i18n("stick")}" dindex="${index}"></span>
${result}
<span class="action_item delete_item" title="${i18n(
"delete"
)}" dindex="${index}"></span>
</span>`;
})
.join("") + `<div class="privacy">${i18n("privacy")}</div>`;
})
.join("") + `<div class="privacy">${i18n("privacy")}</div>`
);
}

_renderCode(str = ''){
Expand Down Expand Up @@ -101,11 +120,13 @@ class Popup {
},
false
);
// 删除记录

window.addEventListener(
"click",
(e) => {
if (e.target.className.split(/\s+/).indexOf("delete_item") > -1) {
const classList = e.target.className.split(/\s+/);
// 删除记录
const handleDelete = (e) => {
const index = e.target.getAttribute("dindex");
if (typeof index === "undefined") return;
this._history.splice(index, 1);
Expand All @@ -114,14 +135,45 @@ class Popup {
});
// 刷新页面
this._reload();
};
// 置顶
const handleTopping = (e) => {
const index = e.target.getAttribute("dindex");
if (typeof index === "undefined") return;

// 置顶数据数量
const toppingCount = this._history.filter(
(item) => item.topping
).length;
const isCurrentTopping = this._history[index].topping;
const activeItem = this._history.splice(index, 1)[0];
const insertIndex = isCurrentTopping ? toppingCount - 1 : 0;

activeItem.topping = !activeItem.topping;
this._history.splice(insertIndex, 0, activeItem);

chrome.storage.local.set({
[this._STORAGE_KEY]: this._history,
});
// 刷新页面
this._reload();
};

if (classList.indexOf("delete_item") > -1) {
handleDelete(e);
} else if (classList.indexOf("stick_item") > -1) {
handleTopping(e);
}
},
false
);
// 回车自动复制
window.addEventListener("keyup", (e) => {
const code = e.code || e.key;
if (code === "Enter" && e.target.className.split(/\s+/).indexOf("copy_item") > -1) {
if (
code === "Enter" &&
e.target.className.split(/\s+/).indexOf("copy_item") > -1
) {
this._selectText(e.target.querySelector(".click_target"));
this._copy();
}
Expand Down
6 changes: 4 additions & 2 deletions extension/style/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,12 @@ body{
}
.copy_history .copy_item{
display: grid;
grid-template-columns: auto 30px;
grid-template-columns: 40px auto 30px;
font-size: 14px;
line-height: 36px;
text-align: left;
color: rgba(0,0,0,0.85);
text-decoration: none;
padding: 0 0 0 10px;
}
.copy_history .copy_item pre,.copy_history .copy_item code{
margin: 0;
Expand All @@ -90,6 +89,9 @@ body{
}
.copy_history .copy_item.stick .stick_item{
visibility: visible;
opacity: 0.1;
}
.copy_history .copy_item.stick .stick_item.topping {
opacity: 1;
}
.copy_history .copy_item .click_target{
Expand Down

0 comments on commit 744a7dd

Please sign in to comment.