HyunmoAhn · HyunmoAhn · Oct 25, 2018 · Oct 24, 2018 · Oct 24, 2018 · Oct 24, 2018
diff --git a/app/index.js b/app/index.js
@@ -1,4 +1,4 @@
-import { app } from 'electron';
+import { app, globalShortcut } from 'electron';
 import path from 'path';
 import url from 'url';
 import TrayBar from 'menubar';
@@ -17,3 +17,19 @@ const tray = TrayBar({
 app.on('ready', () => {
   tray.showWindow();
 });
+
+tray.on('show', () => {
+  globalShortcut.register('Escape', () => {
+    if (tray.window && tray.window.isFocused()) {
+      tray.window.blur(); // Need to reopen in windowOS
+      tray.hideWindow(); // Need to reopen in macOS
+    }
+  });
+});
+
+tray.on('hide', () => {
+  /**
+   * If you don't this, Escape key doesn't active another application.
+   */
+  globalShortcut.unregister('Escape');
+});
diff --git a/app/page/timer.html b/app/page/timer.html
@@ -8,7 +8,8 @@
   <title>Timer</title>
 </head>
 <body>
-  <div id="root"></div>
+  <div id="timer-root"></div>
+  <div id="comment-root"></div>
 </body>
 <script>
   const scripts = [];

diff --git a/app/page/timer.js b/app/page/timer.js
@@ -1,18 +1,171 @@
-import { remote } from 'electron';
+import cx from 'classnames';
+import Mousetrap from 'mousetrap';
 
-function setTimer() {
-  return `<div>Set!!</div>`
+/**
+ * Manager data of timer.
+ */
+class Timer {
+  constructor(time) {
+    this.time = time;
+    this.remain = this.time;
+    this.tick = null;
+  }
+
+  setTime(num) {
+    this.time = num;
+    this.remain = num;
+  }
+
+  getRemainTime() {
+    return this.remain;
+  }
+
+  runTimeProgress(cb) {
+    this.tick = setInterval(() => {
+      this.remain -= 1;
+      cb();
+    }, 1000);
+  }
+
+  stopTimeProgress() {
+    clearInterval(this.tick);
+    this.tick = null;
+  }
+}
+
+/**
+ * Draw view and handle event for setting mode.
+ * @param(Timer) timer: data for timer.
+ */
+function settingMode(timer) {
+  const timerRoot = document.getElementById('timer-root');
+  timerRoot.innerHTML = settingView(timer.time);
+  const submitDOM = document.getElementsByTagName('form')[0];
+  submitDOM.addEventListener('submit', () => countingMode(timer));
+
+  timer.stopTimeProgress();
+  Mousetrap.unbind('space');
+  Mousetrap.unbind('backspace');
+  Mousetrap.bind('enter', () => countingMode(timer));
+}
+
+/**
+ * Draw view and handle event for counting mode.
+ * @param(Timer) timer: data for timer.
+ */
+function countingMode(timer) {
+  /**
+   * progress timer or stop timer.
+   */
+  function toggleTimer() {
+    if (timer.tick) {
+      timer.stopTimeProgress();
+    } else {
+      timer.runTimeProgress(progressTimer);
+    }
+  }
+
+  function progressTimer() {
+    if (timer.remain > 0) {
+      renderProgressView(timer.getRemainTime())
+    } else {
+      timer.stopTimeProgress();
+      settingMode(timer);
+    }
+  }
+
+  /**
+   * Calculate second using extracted data from DOM.
+   * @returns {number}: second of timer.
+   */
+  function calculateTime() {
+    const hour = Number(document.getElementsByClassName('Setting__hour')[0].value);
+    const minute = Number(document.getElementsByClassName('Setting__minute')[0].value);
+    const second = Number(document.getElementsByClassName('Setting__second')[0].value);
+
+    return hour * 3600 + minute * 60 + second;
+  }
+
+  const time = calculateTime();
+  renderProgressView(time);
+  timer.setTime(time);
+  timer.runTimeProgress(progressTimer);
+
+  const container = document.getElementsByClassName('Progress__Container')[0];
+  container.addEventListener('click', toggleTimer);
+  Mousetrap.bind('space', toggleTimer);
+  Mousetrap.bind('backspace', () => settingMode(timer));
+  Mousetrap.unbind('enter');
+}
+
+/**
+ * Update DOM about progress count.
+ * @param(Number) time: number of remain timer
+ */
+function renderProgressView(time) {
+  function progressView(number) {
+    const hour = parseInt(number / 3600);
+    const minute = parseInt((number - hour * 60) / 60);
+    const second = number % 60;
+
+    const hourClassName = cx('Progress__hour', { 'Progress__hour--hide': hour === 0 });
+    const minuteClassName = cx('Progress__minute', { 'Progress__minute--hide': minute === 0 && hour === 0 });
+    const secondClassName = cx('Progress__second');
+
+    return `
+    <div class="Progress__Container">
+      <span class=${hourClassName}>${hour}</span>
+      <span class=${minuteClassName}>${minute}</span>
+      <span class=${secondClassName}>${second}</span>
+    </div>
+  `;
+  }
+
+  const timerRoot = document.getElementById('timer-root');
+
+  timerRoot.innerHTML = progressView(time);
+}
+
+/**
+ * Update DOM about setting count.
+ * @param(Number) time: number of set timer
+ */
+function settingView(number) {
+  const hour = parseInt(number / 3600);
+  const minute = parseInt((number - hour * 60) / 60);
+  const second = number % 60;
+
+  return `
+    <form>
+      <input class="Setting__hour" autofocus placeholder="0" type="number" value=${hour}>
+      <span>:</span>
+      <input class="Setting__minute" placeholder="00" type="number" value=${minute}>
+      <span>:</span>
+      <input class="Setting__second" placeholder="00" type="number" value=${second}>
+      <input class="Setting__submit-btn" type="submit">
+    </form>
+  `;
 }
 
-function countTimer() {
-  return `<div>Count</div>`
+/**
+ * DOM about comment for alert when time is zero.
+ * @returns {string}
+ */
+function commentView() {
+  return `
+    <div>
+      <input type="text" placeholder="Please type to alert message">
+    </div>
+  `;
 }
 
 function init() {
-  const root = document.getElementById('root');
+  const commentRoot = document.getElementById('comment-root');
+  commentRoot.innerHTML = commentView();
+
+  const timer = new Timer(300);
 
-  console.log(remote);
-  root.innerHTML = setTimer();
+  settingMode(timer);
 }
 
 init();
diff --git a/package.json b/package.json
@@ -12,8 +12,10 @@
     "start": "NODE_ENV=development webpack-dev-server --hot --inline --watch"
   },
   "dependencies": {
+    "classnames": "^2.2.6",
     "electron": "^3.0.4",
-    "menubar": "^5.2.3"
+    "menubar": "^5.2.3",
+    "mousetrap": "^1.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",

diff --git a/yarn.lock b/yarn.lock
@@ -1189,6 +1189,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+
 clean-css@4.2.x:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -3159,6 +3163,10 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
   dependencies:
     minimist "0.0.8"
 
+mousetrap@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.2.tgz#caadd9cf886db0986fb2fee59a82f6bd37527587"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"