mirror of
https://gitee.com/bitdance-team/chrome-extension
synced 2025-10-07 16:35:15 +08:00
356 lines
11 KiB
JavaScript
356 lines
11 KiB
JavaScript
const pomodoroBtns = document.querySelectorAll('.button')
|
|
const pomodoroBtn = document.getElementById('pomodoro-btn')
|
|
const shortBreakBtn = document.getElementById('short-break-btn')
|
|
const longBreakBtn = document.getElementById('long-break-btn')
|
|
|
|
const startBtn = document.getElementById('start-btn')
|
|
const resetBtn = document.getElementById('reset-btn')
|
|
const countdownTimer = document.getElementById('countdown')
|
|
|
|
const addTaskBtn = document.getElementById('add-task-btn')
|
|
const addTaskForm = document.getElementById('task-form')
|
|
const cancelBtn = document.getElementById('cancel')
|
|
const taskNameInput = document.getElementById('text')
|
|
const pomodoroInput = document.getElementById('est-pomodoro')
|
|
const saveBtn = document.getElementById('save')
|
|
const tasksList = document.getElementById('tasks')
|
|
const template = document.getElementById('list-item-template')
|
|
const selectedTask = document.getElementById('selected-task')
|
|
const audio = document.getElementById('audio')
|
|
|
|
let minutes,seconds
|
|
let pause
|
|
let pomodoro = "pomodoro"
|
|
let tasks = []
|
|
let pomodorosCompleted = 0
|
|
let selectedTaskElement
|
|
|
|
let array = ["minutes","seconds","pause","countdownTimer","pbutton"];
|
|
|
|
//变量初始化
|
|
chrome.storage.sync.get(array,function(value){
|
|
if(!chrome.runtime.error){
|
|
// console.log(value);
|
|
// alert("value:"+value)
|
|
|
|
if(value.minutes){
|
|
minutes = value.minutes;
|
|
}else{
|
|
minutes = 25;
|
|
}
|
|
|
|
if(value.seconds){
|
|
seconds = value.seconds;
|
|
}else{
|
|
seconds = 60;
|
|
}
|
|
|
|
if(value.countdownTimer){
|
|
countdownTimer.innerHTML = value.countdownTimer;
|
|
}else{
|
|
countdownTimer.innerHTML = "25:00";
|
|
}
|
|
|
|
if((value.pause) && (value.countdownTimer != "25:00")){
|
|
pause = value.pause;
|
|
startBtn.innerHTML = "开始"
|
|
}else if((!value.pause) && (value.countdownTimer != "25:00")){
|
|
pause = value.pause;
|
|
startBtn.innerHTML = "暂停"
|
|
countdown();
|
|
}else{
|
|
pause = true;
|
|
}
|
|
|
|
if (value.pbutton){
|
|
if (value.pbutton == "shortBreakBtn"){
|
|
shortBreakBtn.classList.add('selected');
|
|
}else if (value.pbutton == "longBreakBtn"){
|
|
longBreakBtn.classList.add('selected');
|
|
}else {
|
|
pomodoroBtn.classList.add('selected');
|
|
}
|
|
}else{
|
|
pomodoroBtn.classList.add('selected');
|
|
}
|
|
}
|
|
});
|
|
|
|
//番茄钟按钮-绑定事件
|
|
document.addEventListener('click', e => {
|
|
if(!e.target.matches('.button')) return;
|
|
|
|
// reset when pomodoro button selected
|
|
pause = true
|
|
seconds = 60
|
|
startBtn.innerHTML = "开始"
|
|
|
|
chrome.storage.sync.set({"pause": pause, "seconds": seconds},function(){
|
|
if(!chrome.runtime.error){
|
|
alert("初始化pause、seconds");
|
|
}
|
|
})
|
|
|
|
//选中番茄钟按钮指定样式
|
|
pomodoroBtns.forEach(button => {
|
|
button.classList.remove('selected')
|
|
})
|
|
e.target.classList.add('selected')
|
|
|
|
let pbutton;
|
|
|
|
if (e.target.classList == shortBreakBtn.classList){
|
|
pbutton = "shortBreakBtn"
|
|
}else if (e.target.classList == longBreakBtn.classList){
|
|
pbutton = "longBreakBtn"
|
|
}else {
|
|
pbutton = "pomodoroBtn"
|
|
}
|
|
|
|
chrome.storage.sync.set({"pbutton":pbutton},function(){
|
|
if(!chrome.runtime.error){
|
|
console.log("added target pomodoro");
|
|
}
|
|
})
|
|
|
|
// 定时器初始化
|
|
if(e.target.matches('#pomodoro-btn')) {
|
|
countdownTimer.innerHTML = '25:00'
|
|
pomodoro = "pomodoro"
|
|
minutes = 25
|
|
chrome.storage.sync.set({"minutes":minutes,"countdownTimer":"25:00"},function(){
|
|
if(!chrome.runtime.error){
|
|
alert("added target pomodoro!");
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
// 开始按钮-绑定事件
|
|
startBtn.addEventListener('click', async() => {
|
|
// if countdown is paused, start/resume countdown, otherwise, pause countdown
|
|
if (pause) {
|
|
startBtn.innerHTML = "暂停";
|
|
pause = false
|
|
countdown();
|
|
chrome.storage.sync.set({"pause":false},function(){
|
|
if(!chrome.runtime.error){
|
|
alert("开始专注啦！");
|
|
}
|
|
})
|
|
} else if (!pause) {
|
|
startBtn.innerHTML = "开始"
|
|
pause = true
|
|
chrome.storage.sync.set({"pause":true},function(){
|
|
if(!chrome.runtime.error){
|
|
alert("你暂停了专注！")
|
|
}
|
|
})
|
|
};
|
|
|
|
})
|
|
|
|
// 重置按钮-绑定事件
|
|
resetBtn.addEventListener('click', () => {
|
|
minutes = 25
|
|
pause = true
|
|
pomodoro = "pomodoro"
|
|
seconds = 60
|
|
|
|
startBtn.innerHTML = "开始"
|
|
countdownTimer.innerHTML = '25:00'
|
|
|
|
let dict = {
|
|
"minutes":25,
|
|
"pause":true,
|
|
"seconds":60,
|
|
"countdownTimer":"25:00"
|
|
}
|
|
|
|
chrome.storage.sync.set(dict,function(){
|
|
if(!chrome.runtime.error){
|
|
alert("reset");
|
|
}
|
|
})
|
|
|
|
})
|
|
|
|
|
|
// 番茄钟倒计时功能
|
|
function countdown() {
|
|
// return if countdown is paused
|
|
if(pause) return;
|
|
|
|
// set minutes and seconds
|
|
let currentMins = minutes - 1;
|
|
seconds--;
|
|
let currentTimer = (currentMins < 10 ? "0" : "") + currentMins.toString() + ':' + (seconds < 10 ? "0" : "") + String(seconds);
|
|
countdownTimer.innerHTML = currentTimer;
|
|
|
|
chrome.storage.sync.set({"seconds":seconds,"countdownTimer":currentTimer},function(){
|
|
if(!chrome.runtime.error){
|
|
console.log("started");
|
|
}
|
|
})
|
|
// count down every second, when a minute is up, countdown one minute
|
|
// when time reaches 0:00, reset
|
|
if(seconds > 0) {
|
|
setTimeout(countdown, 1000);
|
|
} else if(currentMins > 0){
|
|
seconds = 60
|
|
minutes--;
|
|
chrome.storage.sync.set({"seconds":seconds,"minutes":minutes},function(){
|
|
if(!chrome.runtime.error){
|
|
console.log("started");
|
|
}
|
|
})
|
|
countdown();
|
|
} else if(currentMins === 0) {
|
|
audio.play()
|
|
reset()
|
|
}
|
|
}
|
|
|
|
// reset function when countdown ends
|
|
function reset() {
|
|
// set to start the next round
|
|
startBtn.innerHTML = "Start"
|
|
pause = true
|
|
|
|
pomodoroBtns.forEach(button => {
|
|
button.classList.remove('selected')
|
|
})
|
|
|
|
// if current round is a break, set for pomodoro
|
|
if (pomodoro === "short break" || pomodoro === "long break") {
|
|
pomodoro = "pomodoro"
|
|
countdownTimer.innerHTML = '25:00'
|
|
minutes = 25
|
|
pomodoroBtn.classList.add('selected')
|
|
return
|
|
}
|
|
|
|
// if current round is a pomodoro, set for break
|
|
// if less than four pomodoros have been completed, go to short break
|
|
// if four pomodoros have been completed, go to long break
|
|
if (pomodoro === "pomodoro" && pomodorosCompleted < 4) {
|
|
pomodorosCompleted++
|
|
pomodoro = "short break"
|
|
countdownTimer.innerHTML = '05:00'
|
|
minutes = 5
|
|
shortBreakBtn.classList.add('selected')
|
|
} else if (pomodoro === "pomodoro" && pomodorosCompleted === 4) {
|
|
pomodorosCompleted = 0
|
|
pomodoro = "long break"
|
|
countdownTimer.innerHTML = '15:00'
|
|
minutes = 15
|
|
longBreakBtn.classList.add('selected')
|
|
}
|
|
|
|
// if a task has been selected
|
|
if (selectedTaskElement != null) {
|
|
const selectedTaskId = selectedTaskElement.dataset.taskId
|
|
const current = tasks.find(task => task.id === selectedTaskId)
|
|
current.completedPomodoros++
|
|
const pomodoroCount = selectedTaskElement.querySelector('.pomodoro-count')
|
|
pomodoroCount.innerHTML = current.completedPomodoros.toString() + '/' + current.totalPomodoros
|
|
}
|
|
// TODO add option to start next round automatically
|
|
}
|
|
|
|
/*****************************************************************************************************
|
|
**任务栏部分功能
|
|
****************************************************************************************************/
|
|
// show/hide task form
|
|
addTaskBtn.addEventListener('click', () => {
|
|
addTaskForm.classList.toggle('hide')
|
|
})
|
|
|
|
// cancel task and close task form
|
|
cancelBtn.addEventListener('click', () => {
|
|
taskNameInput.value = ""
|
|
pomodoroInput.value = ""
|
|
addTaskForm.classList.add('hide')
|
|
})
|
|
|
|
//保存要做的任务并放在页面上
|
|
saveBtn.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
|
|
// get the inputs
|
|
const taskName = taskNameInput.value
|
|
const pomodoros = pomodoroInput.value
|
|
|
|
// don't add task if a form element is blank or estimated pomodoros is <=0
|
|
if (taskName === "" || pomodoros === "" || pomodoros <= 0) return
|
|
|
|
// create new object
|
|
const newTask = {
|
|
name: taskName,
|
|
completedPomodoros: 0,
|
|
totalPomodoros: pomodoros,
|
|
complete: false,
|
|
id: new Date().valueOf().toString()
|
|
}
|
|
// add task to array
|
|
tasks.push(newTask)
|
|
// render task
|
|
addTask(newTask)
|
|
|
|
// clear inputs
|
|
taskNameInput.value = ""
|
|
pomodoroInput.value = ""
|
|
})
|
|
|
|
// event listener for the list item, checkbox and delete button
|
|
document.addEventListener('click', e => {
|
|
// if a delete button is selected
|
|
if(e.target.matches('.delete-btn')) {
|
|
// find the list item associaited with the delete button and remove it
|
|
const listItem = e.target.closest('.list-item')
|
|
listItem.remove()
|
|
|
|
// find the id of the task to remove the task object from the array
|
|
const taskId = listItem.dataset.taskId
|
|
tasks = tasks.filter(task => task.id !== taskId )
|
|
|
|
// remove title when selected task is deleted
|
|
if (listItem === selectedTaskElement) {
|
|
selectedTask.innerHTML = ""
|
|
}
|
|
}
|
|
// if a list item is selected
|
|
if(e.target.matches('.list-item')) {
|
|
// set the task as the selected element and put title in selected-task div
|
|
selectedTaskElement = e.target
|
|
const taskName = e.target.querySelector('.task-name')
|
|
const text = taskName.innerHTML
|
|
selectedTask.innerHTML = text
|
|
}
|
|
|
|
// if a checkbox is selected
|
|
if(e.target.matches('input[type=checkbox]')) {
|
|
// ge the list item and the id of the item
|
|
const listItem = e.target.closest('.list-item')
|
|
const taskId = listItem.dataset.taskId
|
|
// find the task object in the array
|
|
const checkedTask = tasks.find(task => task.id === taskId)
|
|
// if set to true, change to false, and if set to false, set to true
|
|
if(checkedTask.complete) checkedTask.complete = false
|
|
else if(!checkedTask.complete)checkedTask.complete = true
|
|
}
|
|
})
|
|
|
|
// add task as list item
|
|
function addTask(task) {
|
|
const templateClone = template.content.cloneNode(true)
|
|
const listItem = templateClone.querySelector('.list-item')
|
|
listItem.dataset.taskId = task.id
|
|
const checkbox = templateClone.querySelector('input[type=checkbox]')
|
|
checkbox.checked = task.complete
|
|
const taskName = templateClone.querySelector('.task-name')
|
|
taskName.innerHTML = task.name
|
|
const pomodoroCount = templateClone.querySelector('.pomodoro-count')
|
|
pomodoroCount.innerHTML = task.completedPomodoros.toString() + '/' + task.totalPomodoros
|
|
tasksList.appendChild(templateClone)
|
|
} |