From: Lukasz Foniok Date: Wed, 2 Dec 2015 15:07:41 +0000 (+0100) Subject: [SampleApp] New style X-Git-Tag: accepted/tizen/mobile/20151221.223740^2~17^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=37919bd64cbac9f00949ca82c181bcbb27da94fa;p=platform%2Fcore%2Fapi%2Fcordova-plugins.git [SampleApp] New style Change-Id: I2254e397feb0fe98b440c8c9195e7065b0fdb1dd Signed-off-by: Lukasz Foniok --- diff --git a/sample/css/colors.css b/sample/css/colors.css deleted file mode 100644 index a5386b1..0000000 --- a/sample/css/colors.css +++ /dev/null @@ -1,93 +0,0 @@ -body { - background-color: #fdf6e3; /* solarized-base3 */ -} - -p { - color: #073642; /* solarized-base02 */ -} - -div#everything { - background-color: #eee8d5; /* solarized-base2 */ - border: 1px solid #657b83; /* one-pixel wide border of solarized-base00 color. */ -} - -div#top { - -} - -#top h1 { - color: #6c71c4; /* solarized-violet */ -} - -#top h2 { - color: #002b36; /* solarized-base03 */ -} - -div#right_column { - -} - -div#special_buttons { - background-color: #cb4b16; /* solarized-orange */ -} - -a.normal, a:visited.normal { - color: #073642; - background: transparent url('../images/button_normal.png') no-repeat; -} - -a.special, a:visited.special { - color: #073642; -} - -a.special.red, a:visited.special.red { - background: transparent url('../images/button_specialA.png') no-repeat; -} - -a.special.green, a:visited.special.green { - background: transparent url('../images/button_specialB.png') no-repeat; -} - -a.special.yellow, a:visited.special.yellow { - background: transparent url('../images/button_specialC.png') no-repeat; -} - -a.special.blue, a:visited.special.blue { - background: transparent url('../images/button_specialD.png') no-repeat; -} - -a.active, a:visited.active { - color: #002b36; - background: transparent url('../images/button_active.png') no-repeat; -} - -a:hover, a:visited:hover { - background: transparent url('../images/button_active_alt.png') no-repeat; -} - -#resultsLog { - color: #586e75; /* solarized-base01 */ -} - -div#footer p{ - color: #839496; /* solarized-base0 */ -} - -/* colors: -color: #002b36; / solarized-base03 / -color: #073642; / solarized-base02 / -color: #586e75; / solarized-base01 / -color: #657b83; / solarized-base00 / -color: #839496; / solarized-base0 / -color: #93a1a1; / solarized-base1 / -color: #eee8d5; / solarized-base2 / -color: #fdf6e3; / solarized-base3 / -color: #b58900; / solarized-yellow / -color: #cb4b16; / solarized-orange / -color: #dc322f; / solarized-red / -color: #d33682; / solarized-magenta / -color: #6c71c4; / solarized-violet / -color: #268bd2; / solarized-blue / -color: #2aa198; / solarized-cyan / -color: #859900; / solarized-green / -*/ \ No newline at end of file diff --git a/sample/css/colors_night.css b/sample/css/colors_night.css deleted file mode 100644 index 9a9fccf..0000000 --- a/sample/css/colors_night.css +++ /dev/null @@ -1,92 +0,0 @@ -body { - background-color: #002b36; /* solarized-base03 */ -} - -p { - color: #eee8d5; /* solarized-base2 */ -} - -div#everything { - background-color: #073642; /* solarized-base02 */ - border: 1px solid #839496; /* one pixel wide border, solarized-base0 */ -} - -div#top { - /* no rules needed yet. */ -} - -#top h1 { - color: #cb4b16; /* solarized-orange */ -} - -#top h2 { - color: #fdf6e3; /* solarized-base3 */ -} - -div#right_column { - -} - -a.normal, a:visited.normal { - color: #eee8d5; /* solarized-base2 */ - background: transparent url('../images/button_normal_night.png') no-repeat; -} - -/* these rules are common for EVERY special-class button: */ -a.special, a:visited.special { - /* this color should remain the same as in "colors.css" stylesheet: base02 */ - /* color: #eee8d5; /* solarized-base2 */ - color: #073642; /* solarized-base02 */ -} - -a.special.red, a:visited.special.red { - background: transparent url('../images/button_specialA.png') no-repeat; -} - -a.special.green, a:visited.special.green { - background: transparent url('../images/button_specialB.png') no-repeat; -} - -a.special.yellow, a:visited.special.yellow { - background: transparent url('../images/button_specialC.png') no-repeat; -} - -a.special.blue, a:visited.special.blue { - background: transparent url('../images/button_specialD.png') no-repeat; -} - -a.active, a:visited.active { - color: #fdf6e3; /* solarized-base3 */ - background: transparent url('../images/button_active.png') no-repeat; -} - -a:hover, a:visited:hover { - background: transparent url('../images/button_hover.png') no-repeat; -} - -#resultsLog { - color: #93a1a1; /* solarized-base1 */ -} - -div#footer p{ - color: #657b83; /* solarized-base00 */ -} - -/* colors: -color: #002b36; / solarized-base03 / -color: #073642; / solarized-base02 / -color: #586e75; / solarized-base01 / -color: #657b83; / solarized-base00 / -color: #839496; / solarized-base0 / -color: #93a1a1; / solarized-base1 / -color: #eee8d5; / solarized-base2 / -color: #fdf6e3; / solarized-base3 / -color: #b58900; / solarized-yellow / -color: #cb4b16; / solarized-orange / -color: #dc322f; / solarized-red / -color: #d33682; / solarized-magenta / -color: #6c71c4; / solarized-violet / -color: #268bd2; / solarized-blue / -color: #2aa198; / solarized-cyan / -color: #859900; / solarized-green / -*/ \ No newline at end of file diff --git a/sample/css/debug.css b/sample/css/debug.css deleted file mode 100644 index 9349c24..0000000 --- a/sample/css/debug.css +++ /dev/null @@ -1,19 +0,0 @@ -div#everything { - background-color: #93a1a1; /* solarized-base1 */ -} - -div#top { - background-color: #859900; /* solarized-green */ -} - -div#left_column { - background-color: #268bd2; /* solarized-blue */ -} - -div#right_column { - background-color: #6c71c4; /* solarized-violet */ -} - -div#footer { - background-color: #b58900; /* solarized-yellow */ -} \ No newline at end of file diff --git a/sample/css/style.css b/sample/css/style.css index 5fae309..3f46b98 100644 --- a/sample/css/style.css +++ b/sample/css/style.css @@ -1,96 +1,224 @@ -* { - font-family: Lucida Sans, Arial, Helvetica, sans-serif; +/* apply a natural box layout model to all elements */ +* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } + +html +{ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + height:100%; +} + +body +{ + font-family: sans-serif, Arial, Segoe UI; + font-size: 16px; + margin: 0; + padding: 0; + height:100%; + padding: 60px 0px 24px 0px; + overflow:hidden; } -p { - margin: 3px 10px 3px 10px; +/*width, height*/ +.ch50 {height:50%;} + +/*header*/ +.header +{ + position:absolute; + top: 0px; + left:0px; + width:100%; + height: 60px; + border:none; + background: #dedfe1; + background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6)); + background: -webkit-linear-gradient(top, #ffffff 0%,#e6e6e6 100%); + background: -o-linear-gradient(top, #ffffff 0%,#e6e6e6 100%); + background: -ms-linear-gradient(top, #ffffff 0%,#e6e6e6 100%); + background: linear-gradient(to bottom, #ffffff 0%,#e6e6e6 100%); + box-shadow: 0px 1px 0px 0px #fff; + -webkit-box-shadow: 0px 1px 0px 0px #fff; + -moz-box-shadow: 0px 1px 0px 0px #fff; + border-bottom: 1px solid #9ca1a5; + color: #639ecd; +} +.header > h1 +{ + font-size: 30px; + font-weight: normal; + border-bottom: 4px solid #639ecd; + display: inline-block; + margin: 0 0 0 12px; + position:absolute; + bottom:0; + text-shadow: 0 1px 0 #fff; } -div#everything { - width: 80%; - margin: 100px auto 20px auto; + +/*content*/ +.content +{ + background:#f0f0f0; + min-height:100%; + height:100%; + overflow:hidden; } -div#content { +.content > .input-area, +.content > .action-area, +.content > .result-area { + width: 100%; + border-top: 1px solid #9ca1a5; + position:relative; +} +.content > .input-area, +.content > .action-area { + border-top-color:#fff; +} +.content > .input-area.ch100, +.content > .action-areach100, +.content > .result-area.ch100 { + border-top-color:transparent; } -div#top { - height: 120px; +.content > .input-area > .inputBox { + background-color: #fff; + font-style: italic; + color: #A7A7A7; + width: 290px; + padding: 7px 10px; + border-radius: 3px; + border-width: 1px; + border-style: solid; + border-color: rgb(180, 180, 180); + border-bottom-color: rgb(255, 255, 255); + box-shadow: 0 -1px 0 #3C3C3C; + margin-left:12px; + margin-top:10px; +} +.content > .input-area { + background-color:#e4e4e4; } -#top h1 { - text-align: center; - font-size: 3em; - font-variant: small-caps; - margin: 10px 0px 0px 0px; - padding: 0px; - letter-spacing: 5px; +.content > .result-area > .results { + margin:20px; } -div#left_column { - width: 300px; - float: left; +.content > .result-area > .results > .desc { + font-size:12px; + color:#a7a9ad; + margin-top:20px; + text-align:center; } -div#right_column { - float: left; - margin: 0px 0px 0px 50px; +.content > .result-area > .results > .result-info > div:first-of-type { + color:#a7a9ad; + font-size:20px; + float:left; + text-align:right; + text-shadow: 0 1px 0 #fff; +} +.content > .result-area > .results > .result-info > div:first-of-type + div { + color:#414349; + font-size:20px; + margin-left:10px; + float:left; + text-shadow: 0 1px 0 #fff; } -a.normal, a:visited.normal, a.special, a:visited.special, a.active, a:visited.active { - display: block; - width: 250px; - height: 40px; - margin: 5px 20px 5px 20px; - padding: 0px 0px 0px 0px; - line-height: 40px; - font-size: 16pt; - font-weight: bold; - text-decoration: none; - text-align: center; +/*separator*/ +.content > .result-area > .separator +{ + height: 12px; + border: none; + background: -moz-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(227, 227, 227, 1)), color-stop(100%, rgba(240, 240, 240, 1))); + background: -webkit-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + background: -o-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + background: -ms-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + background: linear-gradient(to bottom, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + position: absolute; + top: 0px; + left: 0px; + right: 0px; + margin: 1px; } -#content p { +/*footer*/ +.footer +{ + position:fixed; + bottom: 0px; + left:0px; + width:100%; + height: 24px; + background:#5f626a; + border-top:1px solid #42444a; + box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5); + -webkit-box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5); + -moz-box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5); } -.info { - font-size: 1.5em; +.footer:before +{ + content: url(img/logo.png); + position: relative; + left: 12px; + top:2px; } -#resultsLog { - font-family: Monospace; - font-size: 1.7em; - margin: 15px 0px 0px 3em; +.footer div +{ + position:absolute; + right:12px; + top:4px;; + color: #afb1b5; + font-size:14px; } -div#footer { - clear: both; +/*button*/ +.button +{ + border: 1px solid #8d9096; + border-radius: 3px; + color: #4d5d6b; + background: transparent; + margin-left:12px; + margin-top:12px; + width: 140px; + height: 32px; + display: inline; + float: left; } -#footer p { +a { text-align: center; - font-size: 1.3em; - margin: 0px 0px 0px 0px; -} - -.name { - font-weight: bold; -} - -@media screen and (max-width:640px){ - div#everything { - width: 100%; - margin: 0px auto; - } - - div#left_column { - width: 50%; - float: left; - } - - div#right_column { - width: 50%; - float: left; - margin: 0px 0px 0px 50px; - } + text-decoration: none; +} + +.button:active +{ + border: 1px solid #639ecd; + background-image: none; + background-color: #639ecd; + color: #fff; + box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3); + -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3); + -moz-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3); } + +.button:disabled, +.button:disabled:hover, +.button:disabled:active +{ + background: rgba(49, 52, 55, 0.1); + color: rgba(255, 255, 255, 0.5); + border: 1px solid rgba(255, 255, 255, 0.5); +} +.button.dh { + height:60px; +} +.button.dw { + width:220px; +} \ No newline at end of file diff --git a/sample/images/button_active.png b/sample/images/button_active.png deleted file mode 100644 index 62c6daa..0000000 Binary files a/sample/images/button_active.png and /dev/null differ diff --git a/sample/images/button_active_alt.png b/sample/images/button_active_alt.png deleted file mode 100644 index b5d180d..0000000 Binary files a/sample/images/button_active_alt.png and /dev/null differ diff --git a/sample/images/button_normal.png b/sample/images/button_normal.png deleted file mode 100644 index 0164f02..0000000 Binary files a/sample/images/button_normal.png and /dev/null differ diff --git a/sample/images/button_normal_night.png b/sample/images/button_normal_night.png deleted file mode 100644 index 5b7ec2f..0000000 Binary files a/sample/images/button_normal_night.png and /dev/null differ diff --git a/sample/images/button_source.xcf b/sample/images/button_source.xcf deleted file mode 100644 index 298521e..0000000 Binary files a/sample/images/button_source.xcf and /dev/null differ diff --git a/sample/images/button_specialA.png b/sample/images/button_specialA.png deleted file mode 100644 index ca2ddb6..0000000 Binary files a/sample/images/button_specialA.png and /dev/null differ diff --git a/sample/images/button_specialB.png b/sample/images/button_specialB.png deleted file mode 100644 index ffc1cb7..0000000 Binary files a/sample/images/button_specialB.png and /dev/null differ diff --git a/sample/images/button_specialC.png b/sample/images/button_specialC.png deleted file mode 100644 index 6917506..0000000 Binary files a/sample/images/button_specialC.png and /dev/null differ diff --git a/sample/images/button_specialD.png b/sample/images/button_specialD.png deleted file mode 100644 index 901edb6..0000000 Binary files a/sample/images/button_specialD.png and /dev/null differ diff --git a/sample/index.html b/sample/index.html index 9eba781..aad24ec 100644 --- a/sample/index.html +++ b/sample/index.html @@ -17,61 +17,39 @@ */ --> - - - - + + + + - Tizen Cordova WebAPI Demonstration + Tizen Cordova WebAPI Demonstration - - - - - - - - - - - - + + + + + - -
-
-

Cordova WebAPI

-
-
- -
-

Commands' output:

-

Use the buttons on the left to see some output.

-
-
- -
- + +
+

Cordova WebAPI

+
+
+
+

Console

 +

Device

 +

Device Motion

 +

Dialogs

 +

Events

 +

File

 +

FileTransfer

 +

Globalization

 +

Media

 +

Network Information

 +
+
+ + \ No newline at end of file diff --git a/sample/js/main.js b/sample/js/main.js index 25290f8..8d0aff8 100644 --- a/sample/js/main.js +++ b/sample/js/main.js @@ -22,8 +22,6 @@ var init = function () { window.logger.log('Main window loaded'); document.addEventListener('deviceready', deviceReady, true); window.logger.log('Listener device ready added'); - // register TV remote keys for controlling the application with [UP], [DOWN], [LEFT], [RIGHT] keys: - window.stateController.registerTizenRemoteKeys(); }; window.onload = init; diff --git a/sample/js/remotemenu.js b/sample/js/remotemenu.js deleted file mode 100644 index 5e1625c..0000000 --- a/sample/js/remotemenu.js +++ /dev/null @@ -1,194 +0,0 @@ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd All Rights Reserved - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -// a set of functions utilizing Tizen's TVInputDevice API. -// Made to enable controlling the application via remote control -// (especially important on TVs with disabled mouse support). -// Creates a global reference: window.stateController. -// @author: Adam Szczerbiak (a.szczerbiak@samsung.com) -// created: 2015-11-24 -// last modified: 2015-11-30 - -// remote control initialization function is called here on boot: -// (@TODO) (@TODO_revised: not needed/?) -// not needed. All the submodules' init functions will now be called -// from main_init() method in main.js file. - -var stateController = {}; -stateController.NORMAL_BUTTONS_COUNT = 8; -stateController.TOTAL_BUTTONS_COUNT = stateController.NORMAL_BUTTONS_COUNT; -stateController.activeButtonNo = 0; - -// a helper function returning the full ID of currently active button: -stateController.getActiveButtonID = function() { - var btnNo, activeButtonID; - btnNo = this.activeButtonNo; - if (btnNo < this.NORMAL_BUTTONS_COUNT) { - activeButtonID = 'btn' + btnNo; - } else { - // currently selected button is a special button. - // these are numbered independently, starting from 0. - // to get special button's ID one needs to substract - // normal buttons count from current menu position: - btnNo -= this.NORMAL_BUTTONS_COUNT; - activeButtonID = 'btns' + btnNo; - } - return activeButtonID; -}; - -stateController.updateButtonsState = function() { - var i, normalButtonID; - // change the class of every "normal" button to "normal": - if (this.NORMAL_BUTTONS_COUNT > 0) { - for (i = 0; i < this.NORMAL_BUTTONS_COUNT; i++) { - normalButtonID = 'btn' + i; - document.getElementById(normalButtonID).className = 'normal'; - // logger.log('Set button id\'ed: ' + normalButtonID + ' to "normal".'); - } - } - - /* - * Decided to treat 'special colorful' buttons differently, they may not be - * accessed from the menu. Press A/B/C/D buttons on remote controller to use - * them. // change the class of every "special" button to "special": - * if(this.SPECIAL_BUTTONS_COUNT > 0) { for(i = 0; i < - * this.SPECIAL_BUTTONS_COUNT; i++) { specialButtonID = 'btns' + i; - * document.getElementById(specialButtonID).className = 'special'; // - * logger.log('set button id\'ed: ' + specialButtonID + ' to "special".'); } } - */ - - // change the class of currently active menu button to "active": - document.getElementById(this.getActiveButtonID()).className = 'active'; - - // logger.log('set button id\'ed: ' + activeButtonID + ' to "active".'); -}; - -stateController.selectNextMenuItem = function() { - // select next menu item: - this.activeButtonNo += 1; - - // but keep it in range [0, TOTAL_BUTTONS_COUNT-1]: - this.activeButtonNo %= this.TOTAL_BUTTONS_COUNT; - - // redraw the menu: - this.updateButtonsState(); - - // logger.log('Active button: ' + this.activeButtonNo); -}; - -stateController.selectPrevMenuItem = function() { - // select previous menu item: - // similar to "-=1", but allows for modular arithmetics: - this.activeButtonNo += (this.TOTAL_BUTTONS_COUNT - 1); - - // but keep it in range [0, TOTAL_BUTTONS_COUNT-1]: - this.activeButtonNo %= this.TOTAL_BUTTONS_COUNT; - - // redraw the menu: - this.updateButtonsState(); - - // logger.log('Active button: ' + this.activeButtonNo); -}; - -stateController.invokeActiveButtonAction = function() { - var activeButtonID = this.getActiveButtonID(); - document.getElementById(activeButtonID).click(); -}; - -stateController.invokeSpecialButtonAction = function(specialButtonID) { - document.getElementById(specialButtonID).click(); -}; - -// TizenTV remote control interface: -stateController.registerTizenRemoteKeys = function() { - if (!tizen.tvinputdevice) { - window.logger.log('This is not a TV, skipping remote support...'); - return; - } - - window.logger.log('Adding a TV Remote support...'); - // these are not present on the emulator: - // tizen.tvinputdevice.registerKey('Enter'); - // tizen.tvinputdevice.registerKey('Back'); - tizen.tvinputdevice.registerKey('ChannelUp'); - tizen.tvinputdevice.registerKey('ChannelDown'); - tizen.tvinputdevice.registerKey('ColorF0Red'); - tizen.tvinputdevice.registerKey('ColorF1Green'); - tizen.tvinputdevice.registerKey('ColorF2Yellow'); - tizen.tvinputdevice.registerKey('ColorF3Blue'); - window.addEventListener('keydown', function(keyEvent) { - if (keyEvent.keyCode === 37) { // left arrow - window.logger.log('ArrowLeft was pressed.'); - } else if (keyEvent.keyCode === 38) { // UP arrow - stateController.selectPrevMenuItem(); - } else if (keyEvent.keyCode === 39) { // right arrow - stateController.invokeActiveButtonAction(); - } else if (keyEvent.keyCode === 40) { // arrow down - stateController.selectNextMenuItem(); - } else if (keyEvent.keyCode === 427) { // ChannelUp: keycode 427 - window.logger.log('Channel UP was pressed!'); - // no idea what to do with these... may come in handy later. - } else if (keyEvent.keyCode === 428) { // ChannelDown: keycode 428 - window.logger.log('Channel DOWN was pressed!'); - } - // please note that there is no ENTER key support on this tizenTV - // else if(keyEvent.keyCode === 13) { - // logger.log('ENTER key was pressed.'); - // } - // else if(keyEvent.keyCode === 10009) { - // log('BACK key was pressed.'); - // } - else if (keyEvent.keyCode === 403) { // the red "A" button - keycode 403 - stateController.invokeSpecialButtonAction('btns0'); - } else if (keyEvent.keyCode === 404) { // the green "B" button - keycode - // 404 - stateController.invokeSpecialButtonAction('btns1'); - } else if (keyEvent.keyCode === 405) { // the yellow "C" button, keycode - // 405 - stateController.invokeSpecialButtonAction('btns2'); - } else if (keyEvent.keyCode === 406) { // the blue "D" button - keycode: - // 406 - stateController.invokeSpecialButtonAction('btns3'); - } - }); - - window.logger.log('EventListener has been added.'); -}; - -////////////////////////////////////////////////////////////////////////////////////// - -// prints all the supported remote keys. -// @requires privilege http://tizen.org/privilege/tv.inputdevice -// post: a list of all supported remote keys is printed using SimpleLogger -// interface. -function printAllSupportedRemoteKeys() { - var keyCodes, supportedKeys, i; - keyCodes = {}; - supportedKeys = tizen.tvinputdevice.getSupportedKeys(); - if (supportedKeys.length > 0) { - window.logger.log('The list of all supported remote keys (' - + supportedKeys.length + '):'); - for (i = 0; i < supportedKeys.length; i++) { - keyCodes[supportedKeys[i].name] = supportedKeys[i].code; - window.logger.log(supportedKeys[i].name + ': ' + supportedKeys[i].code); - } - window.logger.log('--- End of supported remote keys list ---'); - } else { - window.logger.log('No supported keys have been found.'); - } -} -////////////////////////////////////////////////////////////////////////////////////// -window.stateController = stateController; \ No newline at end of file diff --git a/sample/js/stylechooser.js b/sample/js/stylechooser.js deleted file mode 100644 index 288b9da..0000000 --- a/sample/js/stylechooser.js +++ /dev/null @@ -1,92 +0,0 @@ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd All Rights Reserved - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -// a subsystem enabling dynamically changing CSS file with colours definitions. -// its set of functions enable to either toggle through a predefined list of CSS files -// or load an arbitrarily chosen one directly. -// Creates a global reference: window.styleChooser. - -// @author: Adam Szczerbiak (a.szczerbiak@samsung.com) -// created: 2015-11-30 -// last modified: 2015-11-30 - -var styleChooser = {}; -styleChooser.STYLES = ['css/colors.css', 'css/colors_night.css']; -styleChooser.STYLES_COUNT = styleChooser.STYLES.length; -styleChooser.current = 0; -styleChooser.debugLevel = 0; // set this to 1 to enable debug info outputting. - -// a function to change the CSS stylesheet with colour definitions. -// it enables changing the "look and feel" of the application. -// pre: cssFileName is a valid, existing css file name -// given as either an absolute or relative to index.html path. -// post: instead of colors.css, the file provided as an argument gets loaded -// dynamically. -styleChooser.changeCSS = function(cssFileName) { - var oldLink, newLink; - - // whenever the debug info is needed: - if (this.debugLevel > 0) { - window.logger.log('styleChooser.changeCSS(' + cssFileName - + ') has been called.'); - } - - oldLink = document.getElementsByTagName('link').item(1); - - /* - * // this function prints all the document's CSS files. // use this to - * determine the index of "colors.css" file if needed. for(var i = 0; i < - * oldLink.length; i++) { window.logger.log(oldLink.item(i).href); } - */ - - newLink = document.createElement('link'); - newLink.setAttribute('REL', 'STYLESHEET'); - newLink.setAttribute('type', 'text/css'); - newLink.setAttribute('href', cssFileName); - - document.getElementsByTagName('head').item(0).replaceChild(newLink, oldLink); - - if (this.debugLevel > 0) { - window.logger.log('CSS style: ' + cssFileName - + ' has been set successfully.'); - } -}; - -// a method to select next style from a list of predefined CSS files. -// post: next CSS style from a list (this.STYLES) is loaded dynamically into -// index.html's section, -// inner variables (namely this.current) are updated to reflect the new state. -styleChooser.setNextStyle = function() { - var nextStyleIndex; - - if (this.debugLevel > 0) { - // inform the user about this action (debug info): - window.logger.log('styleChooser.setNextStyle() has been called.'); - } - - // set styleChooser.current to next style from the list: - nextStyleIndex = (this.current + 1) % this.STYLES_COUNT; - - // update index.html's head to reflect this change: - this.changeCSS(this.STYLES[nextStyleIndex]); - this.current = nextStyleIndex; -}; - -/////////////////////////////////////////////////////////////////////////////////////////////////// - -// make the reference to this object global, so that it may be accessed from -// other units: -window.styleChooser = styleChooser; \ No newline at end of file