scrapbox-pomodoro

機能

workとbreakのポモドーロを交互に繰り返す

work, breakが終わったら通知する

最初に許可が必要

2021-03-31 16:31:15

時間を変更できるようにした

s/format/lightFormat

getという手があるのか～

awaitすることはできるんだろうか

しなくても実際上は困らないか

workPeriodとかの定数って外に出したほうがいいんですかね？

References

TODO

通知はstopWork, stopBreakそれぞれで出すようにすると実装できそう

記録先のページを開いたときに、そのタブにフォーカスしないようにする？

通知をクリックしたらScrapboxにフォーカスするようにする

同じScrapbox projectを開いているすべてのタブから同じインスタンスを参照する

さすがに無理か？

一時停止機能を追加する？

code:import.js

(async () => {

const {Pomodoro} = await import('/api/code/programming-notes/scrapbox-pomodoro/script.js');

new Pomodoro({workPeriod: 5 * 1000, breakPeriod: 1 * 1000});

})();

code:script.js

import { addMilliseconds, lightFormat } from '../date-fns.min.js/script.js';

const title = 'Pomodoro Timer';

export class Pomodoro {

constructor({workPeriod, breakPeriod} = {}) {

scrapbox.PageMenu.addMenu({title, image, onClick: () => Pomodoro.requestPermission()});

this.menu = scrapbox.PageMenu(title);

//Pomodoro.requestPermission();

個人差あり

好みの領域かも

code:diff

-this.start(workPeriod, this.stopWork);

+this.start(workPeriod, () => this.stopWork());

でも実際はstopにも2種類あってresetって感じじゃなくなったな

code:script.js

//this.stopBreak = this.stopBreak.bind(this);

//this.stopWork = this.stopWork.bind(this);

this.isRunning = false;

this.isWorkPeriod = false;

this.intervalID = undefined;

this.startTime = undefined;

this.endTime = undefined;

this.timeoutID = undefined;

this.workPeriod = workPeriod ?? 25 * 60 * 1000;

this.breakPeriod = breakPeriod ?? 5 * 60 * 1000;

this.setItems(this.startWorkButton);

}

// 定数の設定

get startWorkButton() { return { title: '\uf04b︎ Start Work', onClick: () => this.startWork() };}

get stopWorkButton() { return { title: '\uf04d Stop Work', onClick: () => this.stopWork() };}

get startBreakButton() { return { title: '\uf0f4 Start Break ', onClick: () => this.startBreak() };}

get stopBreakButton() { return { title: '\uf04d Stop Break', onClick: () => this.stopBreak() };}

get timerDisplay() { return { title: '--:--', onClick: () => { } };}

setItems(...items) {

this.menu.removeAllItems();

items.forEach(i => this.menu.addItem(i));

}

start(period, callback) {

this.isRunning = true;

this.startTime = new Date();

this.endTime = addMilliseconds(this.startTime, period);

this.intervalID = setInterval(() => callback(), period);

this.setUpdateTimerLoop();

}

startWork() {

this.start(this.workPeriod, () => this.stopWork('ポモドーロが完了しました。'));

this.setItems(this.timerDisplay, this.stopWorkButton);

}

startBreak() {

this.start(this.breakPeriod, () => this.stopBreak('休憩時間が終了しました。'));

this.setItems(this.timerDisplay, this.stopBreakButton);

}

stop(msg='') {

this.isRunning = false;

clearTimeout(this.timeoutID);

clearInterval(this.intervalID);

}

stopWork(msg='') {

this.stop();

this.setItems(this.startBreakButton);

if (msg) new Notification(msg, notificationOptions);

const endTime = new Date();

}

stopBreak(msg='') {

this.stop();

this.setItems(this.startWorkButton);

if (msg) new Notification(msg, notificationOptions);

}

setUpdateTimerLoop() {

if (!this.isRunning) return;

残り時間を表示しているitemのタイトルを変更したい

タイトルを関数で生成しているので、itemの位置をtitleから特定できない気がするのですが、なんかいい方法ありますかね？

code:script.js

this.menu.emitChange();

this.timeoutID = setTimeout(() => this.setUpdateTimerLoop(), 1000);

}

static requestPermission() {

if (Notification.permission === 'granted') return;

if (Notification.permission === 'denied') throw Error('Permission denied.');

// UI操作を通じて許可申請を出す

const a = document.createElement('a');

a.onclick = async () => {

const state = await Notification.requestPermission();

if (state !== 'granted') throw Error('Permission denied.');

};

document.body.appendChild(a);

a.click();

a.remove();

}

}

JavaScript.icon

MDN.icon