CB-8367 [org.apache.cordova.dialogs] Add Prompt support on Windows
github close #47
diff --git a/doc/index.md b/doc/index.md
index 758dbbf..d891092 100644
--- a/doc/index.md
+++ b/doc/index.md
@@ -213,6 +213,8 @@
- Firefox OS
- iOS
- Windows Phone 7 and 8
+- Windows 8
+- Windows
### Android Quirks
@@ -220,6 +222,10 @@
- On Android 3.0 and later, buttons are displayed in reverse order for devices that use the Holo theme.
+### Windows Quirks
+
+- On Windows prompt dialog is html-based due to lack of such native api.
+
### Firefox OS Quirks:
Both native-blocking `window.prompt()` and non-blocking `navigator.notification.prompt()` are available.
diff --git a/src/windows/NotificationProxy.js b/src/windows/NotificationProxy.js
index e18c703..149f8a6 100644
--- a/src/windows/NotificationProxy.js
+++ b/src/windows/NotificationProxy.js
@@ -26,6 +26,88 @@
var isAlertShowing = false;
var alertStack = [];
+// Windows does not provide native UI for promp dialog so we use some
+// simple html-based implementation until it is available
+function createPromptDialog(title, message, buttons, defaultText, callback) {
+
+ var isPhone = cordova.platformId == "windows" && WinJS.Utilities.isPhone;;
+
+ var dlgWrap = document.createElement("div");
+ dlgWrap.style.position = "absolute";
+ dlgWrap.style.width = "100%";
+ dlgWrap.style.height = "100%";
+ dlgWrap.style.backgroundColor = "rgba(0,0,0,0.25)";
+ dlgWrap.style.zIndex = "100000";
+
+ var dlg = document.createElement("div");
+ dlg.style.width = "100%";
+ dlg.style.minHeight = "180px";
+ dlg.style.height = "auto";
+ dlg.style.overflow = "auto";
+ dlg.style.backgroundColor = "white";
+ dlg.style.position = "relative";
+ dlg.style.lineHeight = "2";
+
+ if (isPhone) {
+ dlg.style.padding = "0px 5%";
+ } else {
+ dlg.style.top = "50%"; // center vertically
+ dlg.style.transform = "translateY(-50%)";
+ dlg.style.padding = "0px 30%";
+ }
+
+ // dialog layout template
+ dlg.innerHTML = toStaticHTML("<span id='lbl-title' style='font-size: 24pt'></span><br/>" // title
+ + "<span id='lbl-message'></span><br/>" // message
+ + "<input id='prompt-input' style='width: 100%'/><br/>"); // input fields
+
+ dlg.querySelector('#lbl-title').appendChild(document.createTextNode(title));
+ dlg.querySelector('#lbl-message').appendChild(document.createTextNode(message));
+ dlg.querySelector('#prompt-input').setAttribute('placeholder', defaultText);
+
+ function makeButtonCallback(idx) {
+ return function () {
+ var value = promptInput = dlg.querySelector('#prompt-input').value;
+ dlgWrap.parentNode.removeChild(dlgWrap);
+
+ if (callback) {
+ callback({ input1: value, buttonIndex: idx });
+ }
+ }
+ }
+
+ function addButton(idx, label) {
+ var button = document.createElement('button');
+ button.style.margin = "8px 0 8px 16px";
+ button.style.float = "right";
+ button.style.fontSize = "12pt";
+ button.tabIndex = idx;
+ button.onclick = makeButtonCallback(idx + 1);
+ if (idx == 0) {
+ button.style.color = "white";
+ button.style.backgroundColor = "#464646";
+ } else {
+ button.style.backgroundColor = "#cccccc";
+ }
+ button.style.border = "none";
+ button.appendChild(document.createTextNode(label));
+ dlg.appendChild(button);
+ }
+
+ // reverse order is used since we align buttons to the right
+ for (var idx = buttons.length - 1; idx >= 0; idx--) {
+ addButton(idx, buttons[idx]);
+ }
+
+ dlgWrap.appendChild(dlg);
+ document.body.appendChild(dlgWrap);
+
+ // make sure input field is under focus
+ dlg.querySelector('#prompt-input').focus();
+
+ return dlgWrap;
+}
+
module.exports = {
alert:function(win, loseX, args) {
@@ -55,6 +137,41 @@
});
},
+ prompt: function (win, lose, args) {
+ if (isAlertShowing) {
+ var later = function () {
+ module.exports.prompt(win, lose, args);
+ };
+ alertStack.push(later);
+ return;
+ }
+
+ isAlertShowing = true;
+
+ var message = args[0],
+ title = args[1],
+ buttons = args[2],
+ defaultText = args[3];
+
+ try {
+ createPromptDialog(title, message, buttons, defaultText, function (evt) {
+ isAlertShowing = false;
+ if (win) {
+ win(evt);
+ }
+ });
+
+ } catch (e) {
+ // set isAlertShowing flag back to false in case of exception
+ isAlertShowing = false;
+ if (alertStack.length) {
+ setTimeout(alertStack.shift(), 0);
+ }
+ // rethrow exception
+ throw e;
+ }
+ },
+
confirm:function(win, loseX, args) {
if (isAlertShowing) {
