diff --git a/gitee_pomodoro/assets/css/popup.css b/gitee_pomodoro/assets/css/popup.css index 8a22bc4..42ee555 100644 --- a/gitee_pomodoro/assets/css/popup.css +++ b/gitee_pomodoro/assets/css/popup.css @@ -46,7 +46,11 @@ body { color: aliceblue; } -#start-btn { +#countdown span{ + opacity: 0; +} + +#start-btn ,#end-btn{ width: 40px; margin: 10px auto 0; padding: 10px 30px; @@ -64,8 +68,14 @@ body { cursor: pointer; } +#end-btn{ + background-color: rgb(0, 128, 187); + display: none; +} + +/*选中的按钮*/ .selected { - background-color: rgb(33, 10, 70);; + background-color: rgb(244, 242, 248); } #current-task-display { @@ -106,7 +116,7 @@ li { #add-task-btn { width: 200px; margin: 0 auto 10px; - background-color: rgb(33, 10, 70); + /* background-color: rgb(33, 10, 70); */ padding: 8px; cursor: pointer; text-align: center; diff --git a/gitee_pomodoro/assets/js/popup.js b/gitee_pomodoro/assets/js/popup.js index fcf6653..9e94e50 100644 --- a/gitee_pomodoro/assets/js/popup.js +++ b/gitee_pomodoro/assets/js/popup.js @@ -1,25 +1,194 @@ -const btn = document.querySelector("#switch"); - -chrome.storage.sync.get("linkOpen", ({ linkOpen }) => { - btn.checked = linkOpen; -}); - -btn.addEventListener("change", () => { - if (btn.checked) { - chrome.storage.sync.set({ linkOpen: true }); - } else { - chrome.storage.sync.set({ linkOpen: false }); - } - // 获取当前tab窗口 - chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { - chrome.scripting.executeScript({ - target: { tabId: tabs[0].id }, - func: refreshPage, - }); +// const btn = document.querySelector("#switch"); + +// chrome.storage.sync.get("linkOpen", ({ linkOpen }) => { +// btn.checked = linkOpen; +// }); + +// btn.addEventListener("change", () => { +// if (btn.checked) { +// chrome.storage.sync.set({ linkOpen: true }); +// } else { +// chrome.storage.sync.set({ linkOpen: false }); +// } +// // 获取当前tab窗口 +// chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { +// chrome.scripting.executeScript({ +// target: { tabId: tabs[0].id }, +// func: refreshPage, +// }); +// }); +// }); + +// // 刷新页面 +// function refreshPage() { +// window.location.reload(); +// } + +const startBtn = document.getElementById("start-btn"); +const resetBtn = document.getElementById("reset-btn"); +const endBtn = document.getElementById("end-btn"); +const countdownTimer = document.getElementById("countdown"); + +let timer = null; + +let minutes, seconds; +let pause; +let pomodoro = "pomodoro"; + +//两端通信 防抖 +// let clickFlag = false; + +//番茄钟按钮-绑定事件 +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"); + } }); + + // 定时器初始化 + 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", () => { + // countdown(); 在后台运行,需要取出状态 + debounce(start(), 100); +}); + +function start() { + chrome.storage.sync.get("pomoData", ({ pomoData }) => { + const { minutes, seconds, status } = pomoData; + + chrome.runtime.sendMessage( + { + status: "start", + content: { + minutes, + seconds, + }, + }, + (response) => { + console.log(response); + + + startBtn.style.display = "none"; + endBtn.style.display = "block"; + getTimer(); + + } + ); + }); +} + +endBtn.addEventListener("click", () => { + setTimeout(end, 200); +}); + +function end() { + chrome.runtime.sendMessage( + { + status: "paused", + }, + (response) => { + console.log(response); + + startBtn.style.display = "block"; + endBtn.style.display = "none"; + clearTimer(); + } + ); +} + +function getTimer() { + clearTimer() + timer = setInterval(() => { + chrome.storage.sync.get("pomoData", ({ pomoData }) => { + countdownTimer.innerHTML = pomoData.countdownTimer; + }); + }, 200); +} + +function clearTimer() { + clearInterval(timer); +} + +/* + * fn [function] 需要防抖的函数 + * delay [number] 毫秒,防抖期限值 + */ +function debounce(fn, delay) { + let timer = null; //借助闭包 + return function () { + if (timer) { + clearTimeout(timer); //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时 + timer = setTimeout(fn, delay); + } else { + timer = setTimeout(fn, delay); // 进入该分支说明当前并没有在计时,那么就开始一个计时 + } + }; +} + +// 重置按钮-绑定事件 +resetBtn.addEventListener("click", () => { + setTimeout(() => { + chrome.runtime.sendMessage( + { + status: "reset", + }, + (response) => { + // console.log(response); + countdownTimer.innerHTML = "25:00"; + + startBtn.style.display = "block"; + endBtn.style.display = "none"; + clearTimer(); + } + ); + }, 100); +}); + +//页面反复打开时初始化 +// start(); + +chrome.storage.sync.get("pomoData", ({ pomoData }) => { + console.log(pomoData); + const { status } = pomoData; + + if (status === "start") { + startBtn.style.display = "none"; + endBtn.style.display = "block"; + getTimer(); + } else if (status === "paused") { + + startBtn.style.display = "block"; + endBtn.style.display = "none"; + chrome.storage.sync.get("pomoData", ({ pomoData }) => { + countdownTimer.innerHTML = pomoData.countdownTimer; + }); + } else if(status === "init"){ + chrome.runtime.sendMessage({ + status: "init", + }); + countdownTimer.innerHTML = "25:00"; + } }); - -// 刷新页面 -function refreshPage() { - window.location.reload(); -} \ No newline at end of file diff --git a/gitee_pomodoro/assets/js/script.js b/gitee_pomodoro/assets/js/script.js new file mode 100644 index 0000000..9b24439 --- /dev/null +++ b/gitee_pomodoro/assets/js/script.js @@ -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) +} \ No newline at end of file diff --git a/gitee_pomodoro/background.js b/gitee_pomodoro/background.js new file mode 100644 index 0000000..4b079da --- /dev/null +++ b/gitee_pomodoro/background.js @@ -0,0 +1,135 @@ +// 用户首次安装插件时执行一次,后面不会再重新执行(除非用户重新安装插件) +chrome.runtime.onInstalled.addListener(() => { + // 插件功能安装默认启用 + chrome.storage.sync.set({ + pomoData: { + minutes: 24, + seconds: 60, + countdownTimer: "25:00", + status: "init", + }, + }); +}); + +let minutes, seconds; +let pause; +let pomodoro = "pomodoro"; + +let array = ["minutes", "seconds", "pause", "countdownTimer", "pbutton"]; + +let timer = null; +// chorme.runtime.onMessage.addListener(()=>{ +// chorme.storage.sync.get("pause",({pause})=>{ + +// }) +// }) + +// 记住 是否暂停、 + +// 判断计时剩余时间 + +chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { + const { status, content } = message; + + console.log(message); + + if (status === "start") { + // sendResponse({ + // status:message.status + // }) + + countdown({ ...content, status }); + } else if (status === "paused") { + clearTimeout(timer); + chrome.storage.sync.get("pomoData", ({ pomoData }) => { + console.log(pomoData); + chrome.storage.sync.set({ pomoData: { ...pomoData, status: "paused" } }); + }); + } else if (status === "reset") { + clearTimeout(timer); + chrome.storage.sync.set({ + pomoData: { + minutes: 24, + seconds: 60, + countdownTimer: "25:00", + status: "init", + }, + }); + } else { + //init初始化 + chrome.storage.sync.set({ + pomoData: { + minutes: 24, + seconds: 60, + countdownTimer: "25:00", + status: "start", + }, + }); + } + chrome.storage.sync.set({ + status, + }); + sendResponse(); +}); + +// 番茄钟倒计时功能 +function countdown({ minutes, seconds, status }) { + console.log("分秒=============", minutes, seconds); + // 设置分钟和秒数 + // let currentMins = minutes - 1; + seconds--; + let currentTimer = + (minutes < 10 ? "0" : "") + + minutes + + ":" + + (seconds < 10 ? "0" : "") + + seconds; + // countdownTimer.innerHTML = currentTimer; 拿到 + + chrome.storage.sync.set( + { + pomoData: { + seconds: seconds, + minutes: minutes, + countdownTimer: currentTimer, + status, + }, + }, + function () { + if (!chrome.runtime.error) { + console.log("started"); + } + } + ); + + console.log(currentTimer); + // count down every second, when a minute is up, countdown one minute + // when time reaches 0:00, reset + if (seconds > 0) { + timer = setTimeout(() => { + countdown({ minutes, seconds, status }); + }, 1000); + } else if (minutes > 0) { + seconds = 60; + minutes--; + chrome.storage.sync.set( + { + pomoData: { + seconds: seconds, + minutes: minutes, + countdownTimer: currentTimer, + status, + }, + }, + function () { + if (!chrome.runtime.error) { + console.log("started"); + } + } + ); + countdown({ minutes, seconds }); + } else if (currentMins === 0) { + audio.play(); + reset(); + } +} diff --git a/gitee_pomodoro/manifest.json b/gitee_pomodoro/manifest.json index 7bf8268..7eacaad 100644 --- a/gitee_pomodoro/manifest.json +++ b/gitee_pomodoro/manifest.json @@ -1,12 +1,11 @@ { "name":"助手-pomodoro", "description":"manage your time", - "version":"0.1", + "version":"0.3", "manifest_version":3, "background":{ - "service_worker":"./assets/js/background.js" + "service_worker":"background.js" }, - "options_page": "./assets/html/options.html", "permissions":["storage","activeTab", "scripting","notifications","alarms", "contextMenus"], "action":{ "default_popup":"popup.html", diff --git a/gitee_pomodoro/popup.html b/gitee_pomodoro/popup.html index 5098ea2..f0b36cc 100644 --- a/gitee_pomodoro/popup.html +++ b/gitee_pomodoro/popup.html @@ -15,29 +15,31 @@ + +
-
-
-
- < - > -
- -
开始专注
- + +
+ < + >
+ + +
专注模式
+
- 25:00 + 00:00
-
Start
-
Reset
-
+ +
开始
+
暂停
+
重置
+
- +
-
You are working on:
+
你正在专注于:
@@ -46,9 +48,7 @@
Add Task
- - - +
@@ -57,11 +57,13 @@
+ - + + \ No newline at end of file diff --git a/gitee_pomodoro/timer.js b/gitee_pomodoro/timer.js new file mode 100644 index 0000000..166d3ca --- /dev/null +++ b/gitee_pomodoro/timer.js @@ -0,0 +1,18 @@ +// window.onload = function(){ +// chrome.storage.sync.set({ +// pause: true, +// minutes:25, +// seconds:60, +// pomodoro:"pomodoro", +// countdownTimer:"25:00", +// pbutton:"pomodoroBtn", +// countFlag:false +// }); + +// chrome.storage.sync.get("countFlag",({countFlag})=>{ +// if(countFlag){ +// count(); +// } +// }) + +// } \ No newline at end of file