From: jaekuk, lee <juku1999@samsung.com>
Date: Tue, 7 Nov 2017 10:20:21 +0000 (+0900)
Subject: [Extension] Add App Timer extension & sample app
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=057cb1b10dcb1e8d69a587f1dc31a73db480b498;p=platform%2Fframework%2Fweb%2Fcrosswalk-tizen.git

[Extension] Add App Timer extension & sample app

This extension sets the timer for App.
version 2.0.0

Change-Id: I5065b67b94ca1a2bbdc75108aa7d9bd9311567fb
Signed-off-by: jaekuk, lee <juku1999@samsung.com>
---

diff --git a/wrt/wrt_support/extensions_repo/app_timer/background.js b/wrt/wrt_support/extensions_repo/app_timer/background.js
index 8b0897441..13b3859d7 100755
--- a/wrt/wrt_support/extensions_repo/app_timer/background.js
+++ b/wrt/wrt_support/extensions_repo/app_timer/background.js
@@ -6,23 +6,13 @@ document.body.appendChild(js);
 var TimerState = {
   time: {
     hours: 0,
-    minutes: 1,
-    seconds: 0
-  },
-  displayTime: {
-    hours: '00',
-    minutes: '01',
-    seconds: '00',
+    minutes: 0,
+    seconds: 10
   },
   defaultTime: {
     hours: 0,
-    minutes: 1,
-    seconds: 0
-  },
-  defaultDisplayTime: {
-	hours: '00',
-	minutes: '01',
-	seconds: '00',
+    minutes: 0,
+    seconds: 10
   }
 };
 
@@ -30,20 +20,15 @@ var thisclock;
 
 chrome.runtime.onConnect.addListener(function(port) {
 
-  (function () {
-    thisclock = new Clock({
-    second: function (clock) {
-      update(clock);
-    },
-    finish: function (clock) {
-      port.postMessage({background: "timer-finish"});
-    }
-  });
-})();
-
-
   function init() {
-    port.postMessage({background: "timer-init", value:TimerState});
+    thisclock = new Clock({
+      second: function (clock) {
+        update(clock);
+      },
+      finish: function (clock) {
+        port.postMessage({background: "timer-finish"});
+      }
+    });
   }
 
   function reset() {
@@ -56,20 +41,12 @@ chrome.runtime.onConnect.addListener(function(port) {
       time.minutes != TimerState.time.minutes ||
       time.seconds != TimerState.time.seconds) {
         TimerState.defaultTime = time;
-	  TimerState.defaultDisplayTime = _getDisplayableTime(time);
       }
       TimerState.time = time;
-      TimerState.displayTime = _getDisplayableTime(time);
-  }
-
-  function _getDisplayableTime(time) {
-    var dh = (time.hours < 10 ? '0' : '') + String(time.hours),
-      dm = (time.minutes < 10 ? '0' : '') + String(time.minutes),
-      ds = (time.seconds < 10 ? '0' : '') + String(time.seconds)
-    return {hours: dh, minutes: dm, seconds: ds};
   }
 
-  function start() {	
+  function start() {
+//    alert('start, '+TimerState.time.hours+' : '+TimerState.time.minutes+' : '+TimerState.time.seconds);
     thisclock.start(TimerState.time.hours, TimerState.time.minutes, TimerState.time.seconds);
   }
 
diff --git a/wrt/wrt_support/extensions_repo/app_timer/contentscript.js b/wrt/wrt_support/extensions_repo/app_timer/contentscript.js
index f8a5040d8..c27a8705c 100755
--- a/wrt/wrt_support/extensions_repo/app_timer/contentscript.js
+++ b/wrt/wrt_support/extensions_repo/app_timer/contentscript.js
@@ -1,239 +1,70 @@
 const EXIT_HTML = '\
-<div id="exit-popup"> \
-\
-<center><div id="exit-popup-container"> \
-\
-<div id = "exit-title"><h1> Exit App? </h1></div> \
-<div class = "line"> </div> \
-<img src = "../../extensions/app_timer/images/exit.png"></img> \
-<div class = "line"> </div> \
-<div class="exit-button-group"> \
-<button id="yes-button" class="exit-button">Yes</button> \
-<button id="no-button"class="exit-button">No</button> \
-</div> \
-\
-</div></center> \
-\
+<div id="exit-container"> \
+<div id="exit-contents"> \
+<img id = "exit-img" src = "../../extensions/app_timer/images/exit.jpg"></img> \
+</div>\
 </div>';
 //"
 
-const SET_HTML = '\
-<div id="main-popup"> \
-\
-<center><div id="popup-container"> \
-\
-<div id = "title"><h1> App Timer </h1></div> \
-\
-<div class = "line"> </div> \
-\
-<label class = "switch"> \
-<input type = "checkbox" class = "switch_input" id = "sme_switch" checked> \
-<span class = "switch_label" data-on = "On" data-off = "Off"></span> \
-<span class = "switch_handle"><div class = "switch_pix"></div></span> \
-</label> \
-\
-<div class = "line"> </div> \
-\
-<div class = "action"> \
-\
-<div class="timer-group"> \
-<span id="hours-digit" class="digit editable" >00</span> \
-<span class="colon">:</span> \
-<span id="minutes-digit" class="digit editable">00</span> \
-<span class="colon">:</span> \
-<span id="seconds-digit" class="digit editable">00</span> \
-</div> \
-\
-<div class = "line"> </div> \
-\
-<div class="btn-group"> \
-<button id="start-button" class="button">start</button> \
-<button id="reset-button" class="button">reset</button> \
-</div> \
-</div> \
-\
-</div></center> \
-\
-</div>';
-//"
+var defaultTime = {hours: 0, minutes: 0, seconds: 10};
+var jsonfile = require('jsonfile')
+var filepath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('apps_repo'))+'apps_repo/AppManager/data/timer.json';
+var app_id = location.href.split('/');
 
-var timerStart = false;
-var defaultDisplayTime = {hours: 0, minutes: 1, seconds: 0};
-var f1Key = false;
 var port = chrome.runtime.connect({name: "contentscript"});
-
 port.onMessage.addListener(function(msg) {
   console.log('from background : ' + msg.background);
   if (msg.background == "timer-init") {
     setTime(msg.value);
   }
   else if (msg.background == "timer-update") {
-    console.log('value, '+msg.value.displayTime.hours+' : '+msg.value.displayTime.minutes+' : '+msg.value.displayTime.seconds);
-    setTime(msg.value);
+    console.log('value, '+msg.value.time.hours+' : '+msg.value.time.minutes+' : '+msg.value.time.seconds);
   }
   else if (msg.background == "timer-finish") {
     exitPopup();
   }
 });
 
-document.body.insertAdjacentHTML('beforeend', SET_HTML);
-initialize(); 
+jsonfile.readFile(filepath, function(err, obj) {
+  if (app_id[app_id.length - 2] == 'installer'
+    || app_id[app_id.length - 2] == 'launcher'
+    || app_id[app_id.length - 2] == 'extensions_settings'
+    || app_id[app_id.length - 2] == 'AppManager') {
+    console.log('Except for '+app_id[app_id.length - 2]);
+    return;
+  }
+  if (obj.timerStart==true) {
+
+	console.log('exitPopup: '+window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')));
+
+
+	
+    defaultTime = obj.time;
+    initialize();
+  }
+});
 
 function exitPopup() {
-  hideModal();	
   document.body.insertAdjacentHTML('beforeend', EXIT_HTML);
-
-  document.getElementById('yes-button').onclick= function(event) {
-    console.log('exitPopup: yes');
+  document.getElementById('exit-img').onclick= function(event) {
+    console.log('exitPopup: ');
     reset();
     stop();
     var launcher = require('electron').remote.getCurrentWindow();
     launcher.close();
   };
-
-  document.getElementById('no-button').onclick= function(event) {
-    console.log('exitPopup: no');
-    document.body.removeChild(document.getElementById('exit-popup'));
-    document.getElementById('hours-digit').innerHTML = defaultDisplayTime.hours;
-    document.getElementById('minutes-digit').innerHTML = defaultDisplayTime.minutes;
-    document.getElementById('seconds-digit').innerHTML = defaultDisplayTime.seconds;
-    reset();
-    start();
-  };    
-}
-
-window.onkeydown = function(event) {
-  if (event.keyCode != 112)  // F1 key
-    return;
-  if (f1Key) {
-    hideModal();
-    f1Key = false ; 	
-  } else {
-    showModal();
-    f1Key = true ; 	
-  }
 }
 
 function initialize() {
   port.postMessage({contentscript: "timer-init"});
-  if (!timerStart) {
-    pauseMode();
-  } else {
-    runningMode();
-  }
-  bindAll();
-}
-
-function showModal() {
-  document.getElementById('main-popup').style.display = 'block';
-}
-
-function hideModal() {
-  document.getElementById('main-popup').style.display = 'none';
-}
-
-function bindAll() {
-  document.getElementById('sme_switch').addEventListener("change", function(event){
-    if(event.srcElement.checked){
-      document.querySelector(".action").style.display = "block";
-    } else{
-      reset();
-      stop();
-      document.querySelector(".action").style.display = "none";
-    };
-  });
-
-  document.getElementById('start-button').onclick= function(event) {
-    if (timerStart == false) {
-      start();
-    } else {
-      stop();
-    }
-  };
-
-  document.getElementById('reset-button').onclick= function(event) {
-    if (!timerStart) {
-      reset();
-    }
-  };
-
-  document.getElementById('hours-digit').onclick= function(event) {
-    event.stopPropagation();
-    if (timerStart)
-      return;
-    document.getElementById('hours-digit').setAttribute("contenteditable", true);
-    document.getElementById('hours-digit').addEventListener('mouseout', hoursMouseoutHandler );
-  };
-
-function hoursMouseoutHandler(e){
-    document.getElementById('hours-digit').removeEventListener('mouseout', hoursMouseoutHandler);
-    var value = document.getElementById('hours-digit').innerHTML;
-    if (value.length == 0 || Number(value) == 0) {
-      document.getElementById('hours-digit').innerHTML = '00';
-    } else if (!/^[0-9]{1,2}$/.test(value)) {
-      value = value.replace(/[^0-9]/,'').substr(0,2);
-      document.getElementById('hours-digit').innerHTML = value;
-    } else {
-      value = ((Number(value) < 10) ? '0' : '') + Number(value);
-      document.getElementById('hours-digit').innerHTML = value;
-    }
-  }
-
-  document.getElementById('minutes-digit').onclick= function(event) {
-    event.stopPropagation();
-    if (timerStart)
-      return;
-    document.getElementById('minutes-digit').setAttribute("contenteditable", true);
-    document.getElementById('minutes-digit').addEventListener('mouseout', minutesMouseoutHandler );
-  };
-
-  function minutesMouseoutHandler(e){
-    document.getElementById('minutes-digit').removeEventListener('mouseout', minutesMouseoutHandler);
-    var value = document.getElementById('minutes-digit').innerHTML;
-    if (value.length == 0 || Number(value) == 0) {
-      document.getElementById('minutes-digit').innerHTML = '00';
-    } else if (!/^[0-9]{1,2}$/.test(value)) {
-      value = value.replace(/[^0-9]/,'').substr(0,2);
-      document.getElementById('minutes-digit').innerHTML = value;
-    } else {
-      value = ((Number(value) < 10) ? '0' : '') + Number(value);
-      document.getElementById('minutes-digit').innerHTML = value;
-    }
-  }
-
-  document.getElementById('seconds-digit').onclick= function(event) {
-    event.stopPropagation();
-    if (timerStart)
-      return;
-    document.getElementById('seconds-digit').setAttribute("contenteditable", true);
-    document.getElementById('seconds-digit').addEventListener('mouseout', secondsMouseoutHandler );
-  };
-  
-  function secondsMouseoutHandler(e){
-    document.getElementById('seconds-digit').removeEventListener('mouseout', secondsMouseoutHandler);
-     var value = document.getElementById('seconds-digit').innerHTML;
-    if (value.length == 0 || Number(value) == 0) {
-      document.getElementById('seconds-digit').innerHTML = '00';
-    } else if (!/^[0-9]{1,2}$/.test(value)) {
-      value = value.replace(/[^0-9]/,'').substr(0,2);
-      document.getElementById('seconds-digit').innerHTML = value;
-    } else {
-      value = ((Number(value) < 10) ? '0' : '') + Number(value);
-      document.getElementById('seconds-digit').innerHTML = value;
-    }
-  }
+  start();
 }
 
 function start() {
-  timerStart = true;
-  var time = {hours: 0, minutes: 0, seconds: 0};
-  time.hours   = Number(document.getElementById('hours-digit').innerHTML);
-  time.minutes = Number(document.getElementById('minutes-digit').innerHTML);
-  time.seconds = Number(document.getElementById('seconds-digit').innerHTML);
-  console.log('start, '+time.hours+' : '+time.minutes+' : '+time.seconds); 
+  var time = defaultTime;
+  console.log('start, '+time.hours+' : '+time.minutes+' : '+time.seconds);
   if (time.hours + time.minutes + time.seconds > 0) {
-    runningMode();
-    port.postMessage({contentscript: "timer-setTime", value:time});
+    port.postMessage({contentscript: "timer-setTime", value:defaultTime});
     port.postMessage({contentscript: "timer-start"});
   }
 }
@@ -243,25 +74,12 @@ function reset() {
 }
 
 function stop() {
-  timerStart = false;
-  pauseMode();
   port.postMessage({contentscript: "timer-stop"});
 }
 
 function setTime(time) {
-  console.log('setTime, '+time.displayTime.hours+' : '+time.displayTime.minutes+' : '+time.displayTime.seconds); 
-  document.getElementById('hours-digit').innerHTML = time.displayTime.hours;
-  document.getElementById('minutes-digit').innerHTML = time.displayTime.minutes;
-  document.getElementById('seconds-digit').innerHTML = time.displayTime.seconds;
-  defaultDisplayTime.hours = time.defaultDisplayTime.hours;
-  defaultDisplayTime.minutes = time.defaultDisplayTime.minutes;
-  defaultDisplayTime.seconds = time.defaultDisplayTime.seconds;
-}
-
-function runningMode() {
-  document.getElementById('start-button').innerHTML = 'stop';
-}
-
-function pauseMode() {
-  document.getElementById('start-button').innerHTML = 'start';
+  console.log('setTime, '+time.defaultTime.hours+' : '+time.defaultTime.minutes+' : '+time.defaultTime.seconds);
+  defaultTime.hours = time.defaultTime.hours;
+  defaultTime.minutes = time.defaultTime.minutes;
+  defaultTime.seconds = time.defaultTime.seconds;
 }
diff --git a/wrt/wrt_support/extensions_repo/app_timer/images/exit.jpg b/wrt/wrt_support/extensions_repo/app_timer/images/exit.jpg
new file mode 100755
index 000000000..cb83eeff8
Binary files /dev/null and b/wrt/wrt_support/extensions_repo/app_timer/images/exit.jpg differ
diff --git a/wrt/wrt_support/extensions_repo/app_timer/images/exit.png b/wrt/wrt_support/extensions_repo/app_timer/images/exit.png
deleted file mode 100755
index 6500ffd77..000000000
Binary files a/wrt/wrt_support/extensions_repo/app_timer/images/exit.png and /dev/null differ
diff --git a/wrt/wrt_support/extensions_repo/app_timer/manifest.json b/wrt/wrt_support/extensions_repo/app_timer/manifest.json
index eb5907bb3..7fb0db37a 100755
--- a/wrt/wrt_support/extensions_repo/app_timer/manifest.json
+++ b/wrt/wrt_support/extensions_repo/app_timer/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "app_timer",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "manifest_version": 1,
   "background": {
     "scripts": ["background.js"]
diff --git a/wrt/wrt_support/extensions_repo/app_timer/style.css b/wrt/wrt_support/extensions_repo/app_timer/style.css
index d1fb9bc24..f24b663ec 100755
--- a/wrt/wrt_support/extensions_repo/app_timer/style.css
+++ b/wrt/wrt_support/extensions_repo/app_timer/style.css
@@ -1,6 +1,5 @@
 /*----------------------------------------------------*/
-#main-popup {
-  display: none; /* Hidden by default */
+#exit-container {
   position: fixed;
   z-index: 1; /* Sit on top */
   left: 0;
@@ -11,230 +10,12 @@
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
-#popup-container {
+#exit-contents {
   margin: auto;
   margin-top: 20%;
   border: 1px solid #888;
   height: auto;
-  width: 350px;
-  background-color: rgb(255,255,255); 
-}
-#title {
-  line-height: 24px;
-  font-weight: bold;
-  text-shadow:0 0 10px white;
-  position: relative;
-  margin-top: 5%;
-}	
-.line  {
-  width:90%;
-  height: 1%;
-  border-top:  1px solid rgba(175, 154, 110, 0.51);
-  padding: 0 0 5px;
-  position: relative;
-  margin-top: 5%;
-}
-/*----------------------------------------------------*/
-.switch {
-  position: relative;
-  display: inline-block;
-  vertical-align: top;
-  width: 85px;
-  height: 30px;
-  padding: 3px;
-  background-color: white;
-  border-radius: 18px;
-  box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
-  cursor: pointer;
-  background-image: -webkit-linear-gradient(top, #eeeeee, white 25px);
-  background-image: -moz-linear-gradient(top, #eeeeee, white 25px);
-  background-image: -o-linear-gradient(top, #eeeeee, white 25px);
-  background-image: linear-gradient(to bottom, #eeeeee, white 25px);
-}
-.switch .switch_input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-}
-.switch .switch_label {
-  position: relative;
-  display: block;
-  height: inherit;
-  font-size: 15px;
-  text-transform: uppercase;
-  background: #FF5D1F;
-  border-radius: inherit;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-  -webkit-transition: 0.15s ease-out;
-  -moz-transition: 0.15s ease-out;
-  -o-transition: 0.15s ease-out;
-  transition: 0.15s ease-out;
-  -moz-transition-property: opacity background;
-  -o-transition-property: opacity background;
-}
-.switch .switch_label:before, .switch_label:after {
-  position: absolute;
-  top: 50%;
-  margin-top: -.5em;
-  line-height: 1;
-  -webkit-transition: inherit;
-  -moz-transition: inherit;
-  -o-transition: inherit;
-  transition: inherit;
-}
-.switch .switch_label:before {
-  content: attr(data-off);
-  right: 11px;
-  color: white;
-  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
-}
-.switch .switch_label:after {
-  content: attr(data-on);
-  left: 11px;
-  color: white;
-  text-shadow: 0 1px rgba(0, 0, 0, 0.2);
-  opacity: 0;
-}
-.switch .switch_input:checked ~ .switch_label {
-  background: #47a8d8;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
-}
-.switch .switch_input:checked ~ .switch_label:before {
-  opacity: 0;
-}
-.switch .switch_input:checked ~ .switch_label:after {
-  opacity: 1;
-}
-.switch .switch_handle {
-  position: absolute;
-  top: 5px;
-  left: 4px;
-  width: 35px;
-  height: 26px;
-  background: white;
-  border-radius: 10px;
-  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
-  background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
-  background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
-  background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
-  background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
-  -webkit-transition: left 0.15s ease-out;
-  -moz-transition: left 0.15s ease-out;
-  -o-transition: left 0.15s ease-out;
-  transition: left 0.15s ease-out;
-}
-.switch .switch_handle .switch_pix{
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: -6px 0 0 -6px;
-  width: 12px;
-  height: 12px;
-  background: #f9f9f9;
-  border-radius: 6px;
-  box-shadow:  0px 0px 15px #D5D5D5;
-  background-color: #FF5D1F;
-}
-.switch .switch_input:checked ~ .switch_handle {
-  left: 51px;
-  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
-}
-.switch .switch_input:checked ~ .switch_handle .switch_pix{
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: -6px 0 0 -6px;
-  width: 12px;
-  height: 12px;
-  background: #f9f9f9;
-  border-radius: 6px;
-  box-shadow:  0px 0px 15px #D5D5D5;
-  background-color: #4fb845;
-}
-.switch > .switch_input:checked ~ .switch_label {
-  background: #4fb845;
-}
-/*----------------------------------------------------*/
-.action {
-  display: block;
-  position: relative;
-}
-/*----------------------------------------------------*/
-.timer-group {
-  margin-top: 5%;
-}
-.editable {
-  display: inline-block;
-  font-size: 80px;
-  overflow: hidden;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.editable:focus {
-  outline: none;
-}
-.colon {
-  display: inline-block;
-  font-size: 70px;
-  vertical-align: top;
-}
-.digit {
-  vertical-align: middle;
-}
-/*----------------------------------------------------*/
-.btn-group {
-  margin-top: 25%;
-  margin-bottom: 10%;
-}
-.button {
-  width: 100px;
-  height: 50px;
-  font-size: 30px;
-  margin-left: 5%;
-  margin-right: 5%;
-  cursor: pointer;
-}
-/*----------------------------------------------------*/
-/*----------------------------------------------------*/
-#exit-popup {
-  position: fixed;
-  z-index: 1; /* Sit on top */
-  left: 0;
-  top: 0;
-  width: 100%; /* Full width */
-  height: 100%; /* Full height */
-  overflow: auto; /* Enable scroll if needed */
-  background-color: rgb(0,0,0); /* Fallback color */
-  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-}
-#exit-popup-container {
-  margin: auto;
-  margin-top: 20%;
-  border: 1px solid #888;
-  height: auto;
-  width: 350px;
-  background-color: rgb(255,255,255); 
-}
-#exit-title {
-  line-height: 24px;
-  font-weight: bold;
-  text-shadow:0 0 10px white;
-  position: relative;
-  margin-top: 5%;
-}
-/*----------------------------------------------------*/
-.exit-button-group {
-  margin-top: 25%;
-  margin-bottom: 10%;
-}
-.exit-button {
-  width: 100px;
-  height: 50px;
-  font-size: 30px;
-  margin-left: 5%;
-  margin-right: 5%;
+  width: 400px;
+  background-color: rgb(255,255,255);
   cursor: pointer;
 }
\ No newline at end of file
diff --git a/wrt/wrt_support/sample/wgt/AppManager.wgt b/wrt/wrt_support/sample/wgt/AppManager.wgt
new file mode 100755
index 000000000..9ecd59aa2
Binary files /dev/null and b/wrt/wrt_support/sample/wgt/AppManager.wgt differ