mirror of
https://gitee.com/bitdance-team/chrome-extension
synced 2025-10-08 08:45:14 +08:00
倒计时功能 初版完成
This commit is contained in:
simonzhangs
356
gitee_pomodoro/assets/js/script.js
Normal file
356
gitee_pomodoro/assets/js/script.js
Normal file
@@ -0,0 +1,356 @@
|
||||
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)
|
||||
}
|
||||
Reference in New Issue
Block a user