wrt/wrt_support/extensions_repo/app_timer/contentscript.js

   1 const EXIT_HTML = '\
   2 <div id="exit-popup"> \
   3 \
   4 <center><div id="exit-popup-container"> \
   5 \
   6 <div id = "exit-title"><h1> Exit App? </h1></div> \
   7 <div class = "line"> </div> \
   8 <img src = "../../extensions/app_timer/images/exit.png"></img> \
   9 <div class = "line"> </div> \
  10 <div class="exit-button-group"> \
  11 <button id="yes-button" class="exit-button">Yes</button> \
  12 <button id="no-button"class="exit-button">No</button> \
  13 </div> \
  14 \
  15 </div></center> \
  16 \
  17 </div>';
  18 //"
  19
  20 const SET_HTML = '\
  21 <div id="main-popup"> \
  22 \
  23 <center><div id="popup-container"> \
  24 \
  25 <div id = "title"><h1> App Timer </h1></div> \
  26 \
  27 <div class = "line"> </div> \
  28 \
  29 <label class = "switch"> \
  30 <input type = "checkbox" class = "switch_input" id = "sme_switch" checked> \
  31 <span class = "switch_label" data-on = "On" data-off = "Off"></span> \
  32 <span class = "switch_handle"><div class = "switch_pix"></div></span> \
  33 </label> \
  34 \
  35 <div class = "line"> </div> \
  36 \
  37 <div class = "action"> \
  38 \
  39 <div class="timer-group"> \
  40 <span id="hours-digit" class="digit editable" >00</span> \
  41 <span class="colon">:</span> \
  42 <span id="minutes-digit" class="digit editable">00</span> \
  43 <span class="colon">:</span> \
  44 <span id="seconds-digit" class="digit editable">00</span> \
  45 </div> \
  46 \
  47 <div class = "line"> </div> \
  48 \
  49 <div class="btn-group"> \
  50 <button id="start-button" class="button">start</button> \
  51 <button id="reset-button" class="button">reset</button> \
  52 </div> \
  53 </div> \
  54 \
  55 </div></center> \
  56 \
  57 </div>';
  58 //"
  59
  60 var timerStart = false;
  61 var defaultDisplayTime = {hours: 0, minutes: 1, seconds: 0};
  62 var f1Key = false;
  63 var port = chrome.runtime.connect({name: "contentscript"});
  64
  65 port.onMessage.addListener(function(msg) {
  66   console.log('from background : ' + msg.background);
  67   if (msg.background == "timer-init") {
  68     setTime(msg.value);
  69   }
  70   else if (msg.background == "timer-update") {
  71     console.log('value, '+msg.value.displayTime.hours+' : '+msg.value.displayTime.minutes+' : '+msg.value.displayTime.seconds);
  72     setTime(msg.value);
  73   }
  74   else if (msg.background == "timer-finish") {
  75     exitPopup();
  76   }
  77 });
  78
  79 document.body.insertAdjacentHTML('beforeend', SET_HTML);
  80 initialize();
  81
  82 function exitPopup() {
  83   hideModal();
  84   document.body.insertAdjacentHTML('beforeend', EXIT_HTML);
  85
  86   document.getElementById('yes-button').onclick= function(event) {
  87     console.log('exitPopup: yes');
  88     reset();
  89     stop();
  90     var launcher = require('electron').remote.getCurrentWindow();
  91     launcher.close();
  92   };
  93
  94   document.getElementById('no-button').onclick= function(event) {
  95     console.log('exitPopup: no');
  96     document.body.removeChild(document.getElementById('exit-popup'));
  97     document.getElementById('hours-digit').innerHTML = defaultDisplayTime.hours;
  98     document.getElementById('minutes-digit').innerHTML = defaultDisplayTime.minutes;
  99     document.getElementById('seconds-digit').innerHTML = defaultDisplayTime.seconds;
 100     reset();
 101     start();
 102   };
 103 }
 104
 105 window.onkeydown = function(event) {
 106   if (event.keyCode != 112)  // F1 key
 107     return;
 108   if (f1Key) {
 109     hideModal();
 110     f1Key = false ;
 111   } else {
 112     showModal();
 113     f1Key = true ;
 114   }
 115 }
 116
 117 function initialize() {
 118   port.postMessage({contentscript: "timer-init"});
 119   if (!timerStart) {
 120     pauseMode();
 121   } else {
 122     runningMode();
 123   }
 124   bindAll();
 125 }
 126
 127 function showModal() {
 128   document.getElementById('main-popup').style.display = 'block';
 129 }
 130
 131 function hideModal() {
 132   document.getElementById('main-popup').style.display = 'none';
 133 }
 134
 135 function bindAll() {
 136   document.getElementById('sme_switch').addEventListener("change", function(event){
 137     if(event.srcElement.checked){
 138       document.querySelector(".action").style.display = "block";
 139     } else{
 140       reset();
 141       stop();
 142       document.querySelector(".action").style.display = "none";
 143     };
 144   });
 145
 146   document.getElementById('start-button').onclick= function(event) {
 147     if (timerStart == false) {
 148       start();
 149     } else {
 150       stop();
 151     }
 152   };
 153
 154   document.getElementById('reset-button').onclick= function(event) {
 155     if (!timerStart) {
 156       reset();
 157     }
 158   };
 159
 160   document.getElementById('hours-digit').onclick= function(event) {
 161     event.stopPropagation();
 162     if (timerStart)
 163       return;
 164     document.getElementById('hours-digit').setAttribute("contenteditable", true);
 165     document.getElementById('hours-digit').addEventListener('mouseout', hoursMouseoutHandler );
 166   };
 167
 168 function hoursMouseoutHandler(e){
 169     document.getElementById('hours-digit').removeEventListener('mouseout', hoursMouseoutHandler);
 170     var value = document.getElementById('hours-digit').innerHTML;
 171     if (value.length == 0 || Number(value) == 0) {
 172       document.getElementById('hours-digit').innerHTML = '00';
 173     } else if (!/^[0-9]{1,2}$/.test(value)) {
 174       value = value.replace(/[^0-9]/,'').substr(0,2);
 175       document.getElementById('hours-digit').innerHTML = value;
 176     } else {
 177       value = ((Number(value) < 10) ? '0' : '') + Number(value);
 178       document.getElementById('hours-digit').innerHTML = value;
 179     }
 180   }
 181
 182   document.getElementById('minutes-digit').onclick= function(event) {
 183     event.stopPropagation();
 184     if (timerStart)
 185       return;
 186     document.getElementById('minutes-digit').setAttribute("contenteditable", true);
 187     document.getElementById('minutes-digit').addEventListener('mouseout', minutesMouseoutHandler );
 188   };
 189
 190   function minutesMouseoutHandler(e){
 191     document.getElementById('minutes-digit').removeEventListener('mouseout', minutesMouseoutHandler);
 192     var value = document.getElementById('minutes-digit').innerHTML;
 193     if (value.length == 0 || Number(value) == 0) {
 194       document.getElementById('minutes-digit').innerHTML = '00';
 195     } else if (!/^[0-9]{1,2}$/.test(value)) {
 196       value = value.replace(/[^0-9]/,'').substr(0,2);
 197       document.getElementById('minutes-digit').innerHTML = value;
 198     } else {
 199       value = ((Number(value) < 10) ? '0' : '') + Number(value);
 200       document.getElementById('minutes-digit').innerHTML = value;
 201     }
 202   }
 203
 204   document.getElementById('seconds-digit').onclick= function(event) {
 205     event.stopPropagation();
 206     if (timerStart)
 207       return;
 208     document.getElementById('seconds-digit').setAttribute("contenteditable", true);
 209     document.getElementById('seconds-digit').addEventListener('mouseout', secondsMouseoutHandler );
 210   };
 211
 212   function secondsMouseoutHandler(e){
 213     document.getElementById('seconds-digit').removeEventListener('mouseout', secondsMouseoutHandler);
 214      var value = document.getElementById('seconds-digit').innerHTML;
 215     if (value.length == 0 || Number(value) == 0) {
 216       document.getElementById('seconds-digit').innerHTML = '00';
 217     } else if (!/^[0-9]{1,2}$/.test(value)) {
 218       value = value.replace(/[^0-9]/,'').substr(0,2);
 219       document.getElementById('seconds-digit').innerHTML = value;
 220     } else {
 221       value = ((Number(value) < 10) ? '0' : '') + Number(value);
 222       document.getElementById('seconds-digit').innerHTML = value;
 223     }
 224   }
 225 }
 226
 227 function start() {
 228   timerStart = true;
 229   var time = {hours: 0, minutes: 0, seconds: 0};
 230   time.hours   = Number(document.getElementById('hours-digit').innerHTML);
 231   time.minutes = Number(document.getElementById('minutes-digit').innerHTML);
 232   time.seconds = Number(document.getElementById('seconds-digit').innerHTML);
 233   console.log('start, '+time.hours+' : '+time.minutes+' : '+time.seconds);
 234   if (time.hours + time.minutes + time.seconds > 0) {
 235     runningMode();
 236     port.postMessage({contentscript: "timer-setTime", value:time});
 237     port.postMessage({contentscript: "timer-start"});
 238   }
 239 }
 240
 241 function reset() {
 242   port.postMessage({contentscript: "timer-reset"});
 243 }
 244
 245 function stop() {
 246   timerStart = false;
 247   pauseMode();
 248   port.postMessage({contentscript: "timer-stop"});
 249 }
 250
 251 function setTime(time) {
 252   console.log('setTime, '+time.displayTime.hours+' : '+time.displayTime.minutes+' : '+time.displayTime.seconds);
 253   document.getElementById('hours-digit').innerHTML = time.displayTime.hours;
 254   document.getElementById('minutes-digit').innerHTML = time.displayTime.minutes;
 255   document.getElementById('seconds-digit').innerHTML = time.displayTime.seconds;
 256   defaultDisplayTime.hours = time.defaultDisplayTime.hours;
 257   defaultDisplayTime.minutes = time.defaultDisplayTime.minutes;
 258   defaultDisplayTime.seconds = time.defaultDisplayTime.seconds;
 259 }
 260
 261 function runningMode() {
 262   document.getElementById('start-button').innerHTML = 'stop';
 263 }
 264
 265 function pauseMode() {
 266   document.getElementById('start-button').innerHTML = 'start';
 267 }