--- /dev/null
+<!DOCTYPE html>
+<!--
+/*
+ * 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.
+ */
+-->
+<html>
+ <head>
+ <title>Notification Sample</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="styles/main.css" />
+ <script type="text/javascript" charset="utf-8" src="../../lib/cordova.js"></script>
+ <script type="text/javascript" charset="utf-8" src="scripts/main.js"></script>
+ </head>
+ <body>
+ <header class="header">
+ <h1>Notification Sample</h1>
+ </header>
+ <div class="content">
+ <div class="action-area ch70">
+ <button class="button dh" id="button-beep">Beep</button>
+ <button class="button dh" id="button-alert">Show Alert</button>
+ <button class="button dh" id="button-confirm">Show Confirm</button>
+ <button class="button dh" id="button-prompt">Show Prompt</button>
+ <button class="button dh" id="button-native-alert">Show built-in Alert</button>
+ <button class="button dh" id="button-native-confirm">Show built-in Confirm</button>
+ <button class="button dh" id="button-native-prompt">Show built-in Prompt</button>
+ </div>
+ <div class="result-area ch30">
+ <div class="results">
+ <div id="infoField" class="desc" type="text" readonly="readonly"></div>
+ </div>
+ <div class="separator"></div>
+ </div>
+ </div>
+ <footer class="footer">
+ <div>Cordova API Samples</div>
+ </footer>
+ </body>
+</html>
--- /dev/null
+/*
+ * 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');
+ }
+})();
--- /dev/null
+/*
+ * 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;
+}