From: jaekuk, lee Date: Tue, 21 Nov 2017 16:58:28 +0000 (+0900) Subject: [WRT][Extension] Update AppManager & app timer X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=5273d4914e3e65adb4a48daa2bd61e2428c0ebad;p=platform%2Fframework%2Fweb%2Fcrosswalk-tizen.git [WRT][Extension] Update AppManager & app timer Change-Id: Ia52adaafcff85970a14663c36671064a8225038b Signed-off-by: jaekuk, lee --- diff --git a/wrt/wrt_support/extensions_repo/app_timer/background.js b/wrt/wrt_support/extensions_repo/app_timer/background.js index 13b3859d7..c0e1a4fcb 100755 --- a/wrt/wrt_support/extensions_repo/app_timer/background.js +++ b/wrt/wrt_support/extensions_repo/app_timer/background.js @@ -7,28 +7,47 @@ var TimerState = { time: { hours: 0, minutes: 0, - seconds: 10 + seconds: 10, + }, + displayTime: { + hours: '00', + minutes: '00', + seconds: '10', }, defaultTime: { hours: 0, minutes: 0, - seconds: 10 + seconds: 10, + }, + defaultDisplayTime: { + hours: '00', + minutes: '00', + seconds: '10', } }; var thisclock; chrome.runtime.onConnect.addListener(function(port) { + chrome.pageAction.onClicked.addListener(function(tab) { + console.log('Send page action from background to contentscript!'); + port.postMessage({page_action: 'execute'}); + }); - function init() { + (function () { thisclock = new Clock({ - second: function (clock) { - update(clock); - }, - finish: function (clock) { - port.postMessage({background: "timer-finish"}); - } - }); + second: function (clock) { + update(clock); + }, + finish: function (clock) { + port.postMessage({background: "timer-finish"}); + } + }); +})(); + + + function init() { + port.postMessage({background: "timer-init", value:TimerState}); } function reset() { @@ -40,13 +59,21 @@ chrome.runtime.onConnect.addListener(function(port) { if (time.hours != TimerState.time.hours || time.minutes != TimerState.time.minutes || time.seconds != TimerState.time.seconds) { - TimerState.defaultTime = time; + //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() { -// 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 4e79c0a63..3d8ccb5c8 100755 --- a/wrt/wrt_support/extensions_repo/app_timer/contentscript.js +++ b/wrt/wrt_support/extensions_repo/app_timer/contentscript.js @@ -4,27 +4,77 @@ const EXIT_HTML = '\ \ \ '; -//" const TIME_HTML = '\
\
\ -00 \ -: \ -00 \ -: \ -00 \ +00 \ +: \ +00 \ +: \ +00 \
\
'; +const SET_HTML = '\ +
\ +
\ +

App Timer

\ +
\ +
\ +
\ +00 \ +: \ +00 \ +: \ +10 \ +
\ + \ +
\ +
\ +
\ +
\ + \ + \ +
\ +
\ +
\ +
'; + +var tmpTime = { + displayTime: { + hours: '00', + minutes: '00', + seconds: '10', + }, + defaultDisplayTime: { + hours: '00', + minutes: '00', + seconds: '10', + } +}; + +var f1Key = false; +const path = require('path'); var jsonfile = require('jsonfile'); -var jsonobj = {timerStart: false, time:{hours: 0, minutes: 0, seconds: 0}}; -var filepath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('apps_repo'))+'apps_repo/AppManager/data/timer.json'; +var jsonobj = {timerStart: false, time:{hours: 0, minutes: 0, seconds: 10}}; +var filepath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('apps_repo'))+'extensions/app_timer/data/timer.json'; var app_id = location.href.split('/'); - var port = chrome.runtime.connect({name: "contentscript"}); + port.onMessage.addListener(function(msg) { console.log('from background : ' + msg.background); + + if (msg.page_action === 'execute') { + if (f1Key) { + hideModal(); + f1Key = false; + } else { + showModal(); + f1Key = true; + } + } + if (msg.background == "timer-init") { setTime(msg.value); } @@ -36,32 +86,50 @@ port.onMessage.addListener(function(msg) { jsonfile.writeFile(filepath, jsonobj, function (err) { console.error(err); }); - document.getElementById('hours-digit').innerHTML = jsonobj.time.hours; - document.getElementById('minutes-digit').innerHTML = jsonobj.time.minutes; - document.getElementById('seconds-digit').innerHTML = jsonobj.time.seconds; + document.getElementById('hours-setdigit').innerHTML = jsonobj.time.hours; + document.getElementById('minutes-setdigit').innerHTML = jsonobj.time.minutes; + document.getElementById('seconds-setdigit').innerHTML = jsonobj.time.seconds; + document.getElementById('hours-timedigit').innerHTML = jsonobj.time.hours; + document.getElementById('minutes-timedigit').innerHTML = jsonobj.time.minutes; + document.getElementById('seconds-timedigit').innerHTML = jsonobj.time.seconds; } else if (msg.background == "timer-finish") { + port.postMessage({contentscript: "timer-stop"}); + jsonfile.writeFile(filepath, jsonobj, function (err) { + console.error(err); + }); exitPopup(); } }); +document.body.insertAdjacentHTML('beforeend', EXIT_HTML); +document.body.insertAdjacentHTML('afterbegin', TIME_HTML); +document.body.insertAdjacentHTML('beforeend', SET_HTML); + 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') { + 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('/'))); + if ( err ) + console.log('err; '+err); + else jsonobj = obj; - if (obj.time.hours + obj.time.minutes + obj.time.seconds > 0) { - initialize(); - } - else { - exitPopup(); - } + runningMode(); + + tmpTime.displayTime=_getDisplayableTime(jsonobj.time); + setTime(tmpTime); + bindAll(); + + console.log('exitPopup: '+window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'))); + if (jsonobj.time.hours + jsonobj.time.minutes + jsonobj.time.seconds > 0) { + initialize(); + } + else { + exitPopup(); } }); @@ -73,58 +141,132 @@ window.onbeforeunload = function() { console.log('Except for '+app_id[app_id.length - 2]); return; } - stop(); -} - -window.onkeydown = function(event) { - 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 (event.keyCode === 10009){ //esc - stop(); - } + pauseMode(); + port.postMessage({contentscript: "timer-stop"}); } function exitPopup() { - document.body.insertAdjacentHTML('beforeend', EXIT_HTML); - stop(); + document.getElementById('exit-container').style.display = 'block'; document.getElementById('exit-img').onclick= function(event) { console.log('exitPopup: '); + document.getElementById('exit-container').style.display = 'none'; var launcher = require('electron').remote.getCurrentWindow(); launcher.close(); }; } +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 initialize() { port.postMessage({contentscript: "timer-init"}); start(); + document.getElementById('time-container').style.display = 'block'; +} + +function showModal() { + console.log('showModal()'); + document.getElementById('exit-container').style.display = 'none'; + document.getElementById('time-container').style.display = 'none'; + document.getElementById('set-container').style.display = 'block'; +} + +function hideModal() { + console.log('hideModal()'); + if (jsonobj.timerStart === true && jsonobj.time.hours + jsonobj.time.minutes + jsonobj.time.seconds === 0) { + document.getElementById('exit-container').style.display = 'block'; + } + if (jsonobj.timerStart === true && jsonobj.time.hours + jsonobj.time.minutes + jsonobj.time.seconds > 0) { + document.getElementById('time-container').style.display = 'block'; + } + document.getElementById('set-container').style.display = 'none'; +} + +function bindAll() { + document.getElementById('work_time_range_input').addEventListener("input", function(event){ + tmpTime.displayTime.hours = (Math.floor(event.srcElement.value / 3600)).toString(); + tmpTime.displayTime.minutes = (Math.floor(Math.floor(event.srcElement.value % 3600) / 60)).toString(); + tmpTime.displayTime.seconds = (event.srcElement.value % 60).toString(); + if(tmpTime.displayTime.hours .length < 2){ + tmpTime.displayTime.hours = "0" + tmpTime.displayTime.hours ; + }; + if(tmpTime.displayTime.minutes.length < 2){ + tmpTime.displayTime.minutes = "0" + tmpTime.displayTime.minutes; + }; + if(tmpTime.displayTime.seconds.length < 2){ + tmpTime.displayTime.seconds = "0" + tmpTime.displayTime.seconds; + }; + setTime(tmpTime); + }); + document.getElementById('start-button').onclick= function(event) { + if (jsonobj.timerStart === false) { + start(); + } else { + stop(); + } + }; + document.getElementById('reset-button').onclick= function(event) { + if (jsonobj.timerStart === false) { + reset(); + } + }; } function start() { - console.log('start, '+jsonobj.time.hours+' : '+jsonobj.time.minutes+' : '+jsonobj.time.seconds); - document.body.insertAdjacentHTML('afterbegin', TIME_HTML); - port.postMessage({contentscript: "timer-setTime", value:jsonobj.time}); - port.postMessage({contentscript: "timer-start"}); + jsonobj.timerStart = true; + jsonobj.time.hours = Number(document.getElementById('hours-setdigit').innerHTML); + jsonobj.time.minutes = Number(document.getElementById('minutes-setdigit').innerHTML); + jsonobj.time.seconds = Number(document.getElementById('seconds-setdigit').innerHTML); + + if (jsonobj.time.hours + jsonobj.time.minutes + jsonobj.time.seconds > 0) { + runningMode(); + port.postMessage({contentscript: "timer-setTime", value:jsonobj.time}); + port.postMessage({contentscript: "timer-start"}); + } } function reset() { + jsonobj.timerStart = false; + jsonobj.time.hours = 0; + jsonobj.time.minutes = 0; + jsonobj.time.seconds = 10; + tmpTime.displayTime=_getDisplayableTime(jsonobj.time); + setTime(tmpTime); port.postMessage({contentscript: "timer-reset"}); } function stop() { + jsonobj.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-setdigit').innerHTML = time.displayTime.hours; + document.getElementById('minutes-setdigit').innerHTML = time.displayTime.minutes; + document.getElementById('seconds-setdigit').innerHTML = time.displayTime.seconds; + document.getElementById('hours-timedigit').innerHTML = time.displayTime.hours; + document.getElementById('minutes-timedigit').innerHTML = time.displayTime.minutes; + document.getElementById('seconds-timedigit').innerHTML = time.displayTime.seconds; +} + +function runningMode() { + document.getElementById('start-button').innerHTML = 'stop'; + document.getElementById('work_time_range_input').disabled = true; jsonfile.writeFile(filepath, jsonobj, function (err) { console.error(err); }); } -function setTime(time) { - console.log('setTime, '+time.defaultTime.hours+' : '+time.defaultTime.minutes+' : '+time.defaultTime.seconds); - jsonobj.time.hours = time.defaultTime.hours; - jsonobj.time.minutes = time.defaultTime.minutes; - jsonobj.time.seconds = time.defaultTime.seconds; +function pauseMode() { + document.getElementById('start-button').innerHTML = 'start'; + document.getElementById('work_time_range_input').disabled = false; + jsonfile.writeFile(filepath, jsonobj, function (err) { + console.error(err); + }); } diff --git a/wrt/wrt_support/extensions_repo/app_timer/data/timer.json b/wrt/wrt_support/extensions_repo/app_timer/data/timer.json new file mode 100755 index 000000000..e69de29bb diff --git a/wrt/wrt_support/extensions_repo/app_timer/icon.png b/wrt/wrt_support/extensions_repo/app_timer/icon.png index 249ab4877..55153650e 100755 Binary files a/wrt/wrt_support/extensions_repo/app_timer/icon.png and b/wrt/wrt_support/extensions_repo/app_timer/icon.png differ diff --git a/wrt/wrt_support/extensions_repo/app_timer/manifest.json b/wrt/wrt_support/extensions_repo/app_timer/manifest.json index 7fb0db37a..c3417b0a5 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": "2.0.0", + "version": "4.0.0", "manifest_version": 1, "background": { "scripts": ["background.js"] @@ -11,5 +11,8 @@ "js": ["contentscript.js"], "css": ["style.css"] } - ] + ], + "page_action": { + "default_icon" : "icon.png" + } } diff --git a/wrt/wrt_support/extensions_repo/app_timer/style.css b/wrt/wrt_support/extensions_repo/app_timer/style.css index 895366306..e09b5b8c7 100755 --- a/wrt/wrt_support/extensions_repo/app_timer/style.css +++ b/wrt/wrt_support/extensions_repo/app_timer/style.css @@ -1,5 +1,83 @@ /*----------------------------------------------------*/ +#set-container { + display: none; /* Hidden by default */ + 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 */ +} +#set-contents { + margin: auto; + margin-top: 10%; + border: 1px solid #888; + height: auto; + width: 350px; + background-color: rgb(255,255,255); +} +#set-title { + line-height: 24px; + font-weight: bold; + text-shadow:0 0 10px white; + position: relative; + margin-top: 5%; +} +.setline { + width:90%; + height: 1%; + border-top: 1px solid rgba(175, 154, 110, 0.51); + padding: 0 0 5px; + position: relative; + margin-top: 5%; +} +.action { + display: block; + position: relative; +} +.timer-group { + margin-top: 5%; +} +.seteditable { + display: inline-block; + font-size: 80px; + overflow: hidden; + white-space: nowrap; + cursor: pointer; +} +.seteditable:focus { + outline: none; +} +.setcolon { + display: inline-block; + font-size: 70px; + vertical-align: top; +} +.setdigit { + vertical-align: middle; +} +#work_time_range_input { + cursor: pointer; + width: 30%; +} +.btn-group { + margin-top: 25%; + margin-bottom: 10%; +} +.setbutton { + width: 100px; + height: 50px; + font-size: 30px; + margin-left: 5%; + margin-right: 5%; + cursor: pointer; +} +/*----------------------------------------------------*/ #exit-container { + display: none; /* Hidden by default */ position: fixed; z-index: 1; /* Sit on top */ left: 0; @@ -20,6 +98,7 @@ } /*----------------------------------------------------*/ #time-container { + display: none; /* Hidden by default */ margin-top: 2%; margin-left: 2%; height: auto; @@ -34,11 +113,12 @@ text-align: center; } -.colon { +.timecolon { display: inline-block; vertical-align: top; } -.digit { +.timedigit { vertical-align: middle; } +/*----------------------------------------------------*/ diff --git a/wrt/wrt_support/sample/wgt/AppManager.wgt b/wrt/wrt_support/sample/wgt/AppManager.wgt deleted file mode 100755 index 3c76a552f..000000000 Binary files a/wrt/wrt_support/sample/wgt/AppManager.wgt and /dev/null differ