Notification Sample

From e063ddef5d1bf8f36199cde3d34b0a6a66ca754b Mon Sep 17 00:00:00 2001 From: Pawel Andruszkiewicz Date: Wed, 2 Dec 2015 14:48:32 +0100 Subject: [PATCH] [SampleApp] Sample application for cordova-plugin-dialogs. Change-Id: I0bba45d8e3857065f463574f697c6c4cf067860f Signed-off-by: Pawel Andruszkiewicz --- sample/index.html | 2 +- sample/plugins/dialogs/index.html | 54 ++++++ sample/plugins/dialogs/scripts/main.js | 120 ++++++++++++ sample/plugins/dialogs/styles/main.css | 258 +++++++++++++++++++++++++ 4 files changed, 433 insertions(+), 1 deletion(-) create mode 100644 sample/plugins/dialogs/index.html create mode 100644 sample/plugins/dialogs/scripts/main.js create mode 100644 sample/plugins/dialogs/styles/main.css diff --git a/sample/index.html b/sample/index.html index 26796fb..72eeda6 100644 --- a/sample/index.html +++ b/sample/index.html @@ -39,7 +39,7 @@

Console

Device

Device Motion

Dialogs

Events

File

FileTransfer

diff --git a/sample/plugins/dialogs/index.html b/sample/plugins/dialogs/index.html new file mode 100644 index 0000000..68df02e --- /dev/null +++ b/sample/plugins/dialogs/index.html @@ -0,0 +1,54 @@ + + + + + Notification Sample + + + + + + + + +

+ + + + + + + +

+ + + diff --git a/sample/plugins/dialogs/scripts/main.js b/sample/plugins/dialogs/scripts/main.js new file mode 100644 index 0000000..f6c46ef --- /dev/null +++ b/sample/plugins/dialogs/scripts/main.js @@ -0,0 +1,120 @@ +/* + * 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; + + function updateInfo(msg) { + info.innerHTML = msg; + } + + function clearInfo() { + updateInfo(''); + } + + var action = { + beep: function() { + navigator.notification.beep(3); + }, + alert: function() { + clearInfo(); + navigator.notification.alert('Very important message from Cordova.', function() { + updateInfo('The Cordova alert dialog has been dismissed.'); + }, 'Cordova alert dialog', 'Great!'); + }, + confirm: function() { + clearInfo(); + + var buttons = ['Yes', 'Sure', 'Certainly']; + + navigator.notification.confirm('Coffee?', function(idx) { + if (idx > 0) { + updateInfo('The Cordova confirm dialog has been closed with button: ' + buttons[idx - 1]); + } else { + updateInfo('The Cordova confirm dialog has been dismissed.'); + } + }, 'Cordova confirm dialog', buttons); + }, + prompt: function() { + clearInfo(); + + var buttons = ['Confirm', 'Repeat', 'Decline']; + + navigator.notification.prompt('What... is your favourite colour?', function(r) { + if (r.buttonIndex > 0) { + var msg = 'The Cordova prompt dialog has been closed with button: ' + buttons[r.buttonIndex - 1] + '. User input'; + if (r.input1) { + msg += ': \"' + r.input1 + '\".'; + } else { + msg += ' is empty.'; + } + updateInfo(msg); + } else { + updateInfo('The Cordova prompt dialog has been dismissed.'); + } + }, 'Cordova prompt dialog', buttons, 'Blue. No, yel...'); + }, + 'native-alert': function() { + clearInfo(); + window.alert('This is a built-in alert dialog.'); + updateInfo('The built-in alert dialog has been dismissed.'); + }, + 'native-confirm': function() { + clearInfo(); + + if (window.confirm('This is a built-in confirm dialog.')) { + updateInfo('The built-in confirm dialog has been closed with button: OK'); + } else { + updateInfo('The built-in confirm dialog has been closed with button: Cancel'); + } + }, + 'native-prompt': function() { + clearInfo(); + + var input = window.prompt('This is a built-in prompt dialog.', 'Default value'); + + if (input) { + updateInfo('The built-in prompt dialog has been closed with button: OK. User input: \"' + input + '\".'); + } else if ('' === input) { + updateInfo('The built-in prompt dialog has been closed with button: OK. User input is empty.'); + } else { + updateInfo('The built-in prompt dialog has been closed with button: Cancel.'); + } + } + }; + + function onDeviceReady() { + document.addEventListener('backbutton', function() { + window.history.back(); + }, false); + + for (var a in action) { + if (action.hasOwnProperty(a)) { + var x = document.getElementById('button-' + a); + if (x) { + x.addEventListener('click', action[a]); + } + } + } + } + + document.addEventListener('deviceready', onDeviceReady, false); + + window.onload = function() { + info = document.getElementById('infoField'); + } +})(); diff --git a/sample/plugins/dialogs/styles/main.css b/sample/plugins/dialogs/styles/main.css new file mode 100644 index 0000000..53cd144 --- /dev/null +++ b/sample/plugins/dialogs/styles/main.css @@ -0,0 +1,258 @@ +/* + * 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; +} -- 2.34.1