Events Sample

From 83788349d4415518bb91598a520a65d45f9c9f55 Mon Sep 17 00:00:00 2001 From: Pawel Andruszkiewicz Date: Thu, 3 Dec 2015 14:40:13 +0100 Subject: [PATCH] [SampleApp] Sample application for cordova events. Change-Id: Icbb3e3301620e192ffeb0dc76f227ed81a9f1b95 Signed-off-by: Pawel Andruszkiewicz --- sample/index.html | 2 +- sample/plugins/events/index.html | 48 ++++++ sample/plugins/events/scripts/main.js | 66 +++++++++ sample/plugins/events/styles/main.css | 269 ++++++++++++++++++++++++++++++++++ 4 files changed, 384 insertions(+), 1 deletion(-) create mode 100644 sample/plugins/events/index.html create mode 100644 sample/plugins/events/scripts/main.js create mode 100644 sample/plugins/events/styles/main.css diff --git a/sample/index.html b/sample/index.html index 72eeda6..7b213c6 100644 --- a/sample/index.html +++ b/sample/index.html @@ -40,7 +40,7 @@

Device

Device Motion

Dialogs

Events

File

FileTransfer

Globalization

diff --git a/sample/plugins/events/index.html b/sample/plugins/events/index.html new file mode 100644 index 0000000..1380c84 --- /dev/null +++ b/sample/plugins/events/index.html @@ -0,0 +1,48 @@ + + + + + Events Sample + + + + + + + + +

+ +

+ + + diff --git a/sample/plugins/events/scripts/main.js b/sample/plugins/events/scripts/main.js new file mode 100644 index 0000000..9920d33 --- /dev/null +++ b/sample/plugins/events/scripts/main.js @@ -0,0 +1,66 @@ +/* + * Copyright (c) 2014-2015 Telerik AD + * 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. + */ + +(function() { + var info, events = [ + 'pause', + 'resume', + 'backbutton', + 'menubutton', + 'searchbutton', + 'startcallbutton', + 'endcallbutton', + 'volumedownbutton', + 'volumeupbutton' + ]; + + function printEvent(text) { + var newDiv = document.createElement('div'), + currentTime = new Date().toLocaleTimeString().split(' ')[0]; + newDiv.innerHTML = '[' + currentTime + '] ' + text; + + info.appendChild(newDiv); + // scroll to bottom + info.scrollTop = info.scrollHeight; + console.log(newDiv.innerHTML); + } + + function callbackBuilder(e) { + return function() { + printEvent(e); + }; + } + + function onDeviceReady() { + printEvent('deviceready'); + + for (var i = 0; i < events.length; ++i) { + document.addEventListener(events[i], callbackBuilder(events[i]), false); + } + } + + document.addEventListener('deviceready', onDeviceReady, false); + + window.onload = function() { + info = document.getElementById('infoField'); + + // using UI button to go back, so we can press hardware back as many times as we want + document.getElementById('back').addEventListener('click', function() { + window.history.back(); + }); + }; +})(); diff --git a/sample/plugins/events/styles/main.css b/sample/plugins/events/styles/main.css new file mode 100644 index 0000000..32b91e0 --- /dev/null +++ b/sample/plugins/events/styles/main.css @@ -0,0 +1,269 @@ +/* + * Copyright (c) 2014-2015 Telerik AD + * 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. + */ + +/* 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; +} + +/*width, height*/ +.clear {clear:both;} + +.ch10 {height:10%;} +.ch20 {height:20%;} +.ch30 {height:30%;} +.ch40 {height:40%;} +.ch50 {height:50%;} +.ch60 {height:60%;} +.ch70 {height:70%;} +.ch80 {height:80%;} +.ch90 {height:90%;} +.ch100 {height:100%;} + +.cw10 {width:10%;} +.cw20 {width:20%;} +.cw30 {width:30%;} +.cw40 {width:40%;} +.cw50 {width:50%;} +.cw60 {width:60%;} +.cw70 {width:70%;} +.cw80 {width:80%;} +.cw90 {width:90%;} +.cw100 {width:100%;} + +/*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; +} + +/*content*/ +.content { + background:#f0f0f0; + min-height:100%; + height:100%; + overflow:hidden; +} + +.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; +} + +.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; +} + +.content > .result-area > .results { + margin:20px; +} + +.content > .result-area > .results > .desc { + font-size:12px; + color:#a7a9ad; + margin-top:20px; + text-align:center; +} + +.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; +} + +/*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; +} + +/*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); +} +.footer:before { + position: relative; + left: 12px; + top:2px; +} + +.footer div { + position:absolute; + right:12px; + top:4px;; + color: #afb1b5; + font-size:14px; +} + +/*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; +} + +.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; +} + +/* landscape */ +@media screen and (orientation:landscape) { + .button.dh { + height:32px; + width:220px; + } +} + +/*specific*/ +.content > .result-area > .results > .desc { + font-size:16px; + color:#639ecd; + word-wrap:break-word; +} + +#infoField { + text-align: left; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow-x: hidden; + overflow-y: auto; +} -- 2.7.4