enhance shift function
This commit is contained in:
qcrao
202
addCheckboxes.js
202
addCheckboxes.js
@@ -1,122 +1,152 @@
|
||||
console.log('addCheckboxes.js loaded');
|
||||
console.log("addCheckboxes.js loaded");
|
||||
|
||||
// 查找带有特定选择器的祖先元素
|
||||
function findAncestorWithCheckbox(el, selector) {
|
||||
while ((el = el.parentElement) && !el.querySelector(selector));
|
||||
return el;
|
||||
// Create a new checkbox element
|
||||
function createCheckbox(index) {
|
||||
const checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.className = CHECKBOX_CLASS;
|
||||
checkbox.dataset.index = index;
|
||||
checkbox.addEventListener("click", preventEventPropagation);
|
||||
return checkbox;
|
||||
}
|
||||
|
||||
// 切换复选框的选中状态
|
||||
function toggleCheckbox(event) {
|
||||
// 阻止事件的默认行为（例如链接跳转）
|
||||
event.preventDefault();
|
||||
// 阻止事件冒泡到父元素
|
||||
// Add click event listener to an element
|
||||
function addClickEventListener(element) {
|
||||
const handleTitleClick = (event) => {
|
||||
toggleCheckbox(event);
|
||||
event.stopPropagation();
|
||||
};
|
||||
element.addEventListener("click", handleTitleClick);
|
||||
element.dataset.hasClickListener = "true";
|
||||
}
|
||||
|
||||
const parentElement = findAncestorWithCheckbox(event.currentTarget, `.${CHECKBOX_CLASS}`);
|
||||
const checkbox = parentElement ? parentElement.querySelector(`.${CHECKBOX_CLASS}`) : null;
|
||||
if (checkbox) {
|
||||
checkbox.checked = !checkbox.checked;
|
||||
checkPreviousCheckboxes(checkbox);
|
||||
function findAncestorWithCheckbox(el, selector) {
|
||||
while ((el = el.parentElement) && !el.querySelector(selector));
|
||||
return el;
|
||||
}
|
||||
|
||||
// Toggle the checkbox's checked state
|
||||
function toggleCheckbox(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const parentElement = findAncestorWithCheckbox(
|
||||
event.currentTarget,
|
||||
`.${CHECKBOX_CLASS}`
|
||||
);
|
||||
const checkbox = parentElement
|
||||
? parentElement.querySelector(`.${CHECKBOX_CLASS}`)
|
||||
: null;
|
||||
if (checkbox) {
|
||||
checkbox.checked = !checkbox.checked;
|
||||
checkPreviousCheckboxes(checkbox);
|
||||
|
||||
// 更新最后选中的复选框
|
||||
if (checkbox.checked) {
|
||||
window.lastCheckedCheckbox = checkbox;
|
||||
}
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
|
||||
function handleCheckboxClick(event) {
|
||||
// 阻止事件冒泡
|
||||
event.stopPropagation();
|
||||
event.stopPropagation();
|
||||
|
||||
checkPreviousCheckboxes(event.target);
|
||||
const clickedCheckbox = event.target;
|
||||
checkPreviousCheckboxes(clickedCheckbox);
|
||||
|
||||
// 更新最后选中的复选框
|
||||
window.lastCheckedCheckbox = clickedCheckbox;
|
||||
}
|
||||
|
||||
function checkPreviousCheckboxes(clickedCheckbox) {
|
||||
if (shiftPressed && clickedCheckbox.checked) {
|
||||
const allCheckboxes = Array.from(document.querySelectorAll(`.${CHECKBOX_CLASS}`));
|
||||
const previousCheckboxes = allCheckboxes.slice(0, allCheckboxes.indexOf(clickedCheckbox));
|
||||
if (window.shiftPressed && window.lastCheckedCheckbox) {
|
||||
const allCheckboxes = Array.from(
|
||||
document.querySelectorAll(`.${CHECKBOX_CLASS}`)
|
||||
);
|
||||
const start = allCheckboxes.indexOf(window.lastCheckedCheckbox);
|
||||
const end = allCheckboxes.indexOf(clickedCheckbox);
|
||||
|
||||
let index = previousCheckboxes.length - 1;
|
||||
while (index >= 0 && !previousCheckboxes[index].checked) {
|
||||
index--;
|
||||
}
|
||||
const [lower, upper] = start < end ? [start, end] : [end, start];
|
||||
|
||||
// A negative index means no previous checkbox is checked
|
||||
if (index >= 0) {
|
||||
previousCheckboxes.slice(index).forEach((checkbox) => {
|
||||
checkbox.checked = true;
|
||||
});
|
||||
}
|
||||
for (let i = lower; i <= upper; i++) {
|
||||
allCheckboxes[i].checked = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addShiftKeyEventListeners() {
|
||||
console.log('Adding Shift key event listeners...');
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Shift') {
|
||||
shiftPressed = true;
|
||||
}
|
||||
});
|
||||
console.log("Adding Shift key event listeners...");
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Shift") {
|
||||
console.log("Shift key pressed");
|
||||
window.shiftPressed = true;
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keyup', (event) => {
|
||||
if (event.key === 'Shift') {
|
||||
shiftPressed = false;
|
||||
}
|
||||
});
|
||||
document.addEventListener("keyup", (event) => {
|
||||
if (event.key === "Shift") {
|
||||
console.log("Shift key released");
|
||||
window.shiftPressed = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 添加复选框到每个对话
|
||||
function addCheckboxes() {
|
||||
console.log('Adding checkboxes to conversations...', Selectors);
|
||||
const conversations = document.querySelectorAll(Selectors.CONVERSATION_SELECTOR);
|
||||
console.log("Adding checkboxes to conversations...", Selectors);
|
||||
const conversations = document.querySelectorAll(
|
||||
Selectors.CONVERSATION_SELECTOR
|
||||
);
|
||||
|
||||
conversations.forEach((conversation, index) => {
|
||||
let existingCheckbox = conversation.querySelector(`.${CHECKBOX_CLASS}`);
|
||||
conversations.forEach((conversation, index) => {
|
||||
let existingCheckbox = conversation.querySelector(`.${CHECKBOX_CLASS}`);
|
||||
|
||||
// 如果复选框已存在，获取其选中状态并移除它
|
||||
let isChecked = existingCheckbox ? existingCheckbox.checked : false;
|
||||
if (existingCheckbox) {
|
||||
existingCheckbox.remove();
|
||||
}
|
||||
// 如果复选框已存在，获取其选中状态并移除它
|
||||
let isChecked = existingCheckbox ? existingCheckbox.checked : false;
|
||||
if (existingCheckbox) {
|
||||
existingCheckbox.remove();
|
||||
}
|
||||
|
||||
// 创建新的复选框并设置其属性
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.className = CHECKBOX_CLASS;
|
||||
checkbox.dataset.index = index;
|
||||
checkbox.checked = isChecked;
|
||||
checkbox.addEventListener('click', handleCheckboxClick);
|
||||
conversation.insertAdjacentElement('afterbegin', checkbox);
|
||||
// 创建新的复选框并设置其属性
|
||||
const checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.className = CHECKBOX_CLASS;
|
||||
checkbox.dataset.index = index;
|
||||
checkbox.checked = isChecked;
|
||||
checkbox.addEventListener("click", handleCheckboxClick);
|
||||
conversation.insertAdjacentElement("afterbegin", checkbox);
|
||||
|
||||
// 为对话标题添加点击事件
|
||||
const titleElement = conversation.querySelector(Selectors.TITLE_SELECTOR);
|
||||
if (titleElement) {
|
||||
titleElement.style.cursor = 'default';
|
||||
// add click event listener to the title element
|
||||
const titleElement = conversation.querySelector(Selectors.TITLE_SELECTOR);
|
||||
if (titleElement) {
|
||||
titleElement.style.cursor = "default";
|
||||
|
||||
// 获取 titleElement 的父元素
|
||||
const parentElement = titleElement.parentElement;
|
||||
// get the parent element of titleElement
|
||||
const parentElement = titleElement.parentElement;
|
||||
|
||||
// 定义一个通用的事件处理函数
|
||||
const handleTitleClick = (event) => {
|
||||
toggleCheckbox(event);
|
||||
event.stopPropagation(); // 防止事件冒泡
|
||||
};
|
||||
// define a common event handler
|
||||
const handleTitleClick = (event) => {
|
||||
toggleCheckbox(event);
|
||||
event.stopPropagation(); // prevent event propagation
|
||||
};
|
||||
|
||||
// 为 titleElement 添加点击事件
|
||||
if (!titleElement.dataset.hasClickListener) {
|
||||
titleElement.addEventListener('click', handleTitleClick);
|
||||
titleElement.dataset.hasClickListener = 'true';
|
||||
}
|
||||
// add click event listener to titleElement
|
||||
if (!titleElement.dataset.hasClickListener) {
|
||||
titleElement.addEventListener("click", handleTitleClick);
|
||||
titleElement.dataset.hasClickListener = "true";
|
||||
}
|
||||
|
||||
// 为 titleElement 的父元素添加点击事件
|
||||
if (parentElement && !parentElement.dataset.hasClickListener) {
|
||||
parentElement.style.cursor = 'default';
|
||||
parentElement.addEventListener('click', handleTitleClick);
|
||||
parentElement.dataset.hasClickListener = 'true';
|
||||
}
|
||||
}
|
||||
});
|
||||
// add click event listener to the parent element of titleElement
|
||||
if (parentElement && !parentElement.dataset.hasClickListener) {
|
||||
parentElement.style.cursor = "default";
|
||||
parentElement.addEventListener("click", handleTitleClick);
|
||||
parentElement.dataset.hasClickListener = "true";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
addShiftKeyEventListeners();
|
||||
addShiftKeyEventListeners();
|
||||
}
|
||||
|
||||
// 执行主函数
|
||||
// run the main function
|
||||
addCheckboxes();
|
||||
|
||||
Reference in New Issue
Block a user