Separated CSS from JS code.
Fixed the prompt dialog CSS to look close to native.
Fixed the positioning of the prompt dialog for Windows.
Fixed minor JSHint issues.
This closes #74
diff --git a/plugin.xml b/plugin.xml
index fffc4ec..9450b5c 100644
--- a/plugin.xml
+++ b/plugin.xml
@@ -41,13 +41,13 @@
</feature>
</config-file>
- <asset src="www/firefoxos/notification.css" target="css/notification.css" />
- <asset src="www/firefoxos/danger-press.png" target="img/danger-press.png" />
- <asset src="www/firefoxos/danger.png" target="img/danger.png" />
- <asset src="www/firefoxos/default.png" target="img/default.png" />
- <asset src="www/firefoxos/gradient.png" target="img/gradient.png" />
- <asset src="www/firefoxos/pattern.png" target="img/pattern.png" />
- <asset src="www/firefoxos/recommend.png" target="img/recommend.png" />
+ <asset src="www/firefoxos/notification.css" target="css/notification.css" />
+ <asset src="www/firefoxos/danger-press.png" target="img/danger-press.png" />
+ <asset src="www/firefoxos/danger.png" target="img/danger.png" />
+ <asset src="www/firefoxos/default.png" target="img/default.png" />
+ <asset src="www/firefoxos/gradient.png" target="img/gradient.png" />
+ <asset src="www/firefoxos/pattern.png" target="img/pattern.png" />
+ <asset src="www/firefoxos/recommend.png" target="img/recommend.png" />
<js-module src="src/firefoxos/notification.js" name="dialogs-impl">
<runs />
</js-module>
@@ -110,9 +110,9 @@
</feature>
</config-file>
<header-file src="src/ios/CDVNotification.h" />
- <source-file src="src/ios/CDVNotification.m" />
- <resource-file src="src/ios/CDVNotification.bundle" />
- <framework src="AudioToolbox.framework" weak="true" />
+ <source-file src="src/ios/CDVNotification.m" />
+ <resource-file src="src/ios/CDVNotification.bundle" />
+ <framework src="AudioToolbox.framework" weak="true" />
</platform>
<!-- blackberry10 -->
@@ -167,5 +167,7 @@
<js-module src="src/windows/NotificationProxy.js" name="NotificationProxy">
<merges target="" />
</js-module>
+
+ <asset src="www/windows/notification.css" target="css/notification.css" />
</platform>
</plugin>
diff --git a/src/windows/NotificationProxy.js b/src/windows/NotificationProxy.js
index c9c9233..cacdb1f 100644
--- a/src/windows/NotificationProxy.js
+++ b/src/windows/NotificationProxy.js
@@ -17,15 +17,34 @@
* specific language governing permissions and limitations
* under the License.
*
-*/
+ */
/*global Windows:true, WinJS, toStaticHTML */
var cordova = require('cordova');
+var urlutil = require('cordova/urlutil');
var isAlertShowing = false;
var alertStack = [];
+function createCSSElem(fileName) {
+ var elemId = fileName.substr(0, fileName.lastIndexOf(".")) + "-plugin-style";
+ // If the CSS element exists, don't recreate it.
+ if (document.getElementById(elemId)) {
+ return false;
+ }
+
+ // Create CSS and append it to DOM.
+ var $elem = document.createElement('link');
+ $elem.id = elemId;
+ $elem.rel = "stylesheet";
+ $elem.type = "text/css";
+ $elem.href = urlutil.makeAbsolute("/www/css/" + fileName);
+
+ document.head.appendChild($elem);
+ return true;
+}
+
// CB-8928: When toStaticHTML is undefined, prompt fails to run
var _cleanHtml = function(html) { return html; };
if (typeof toStaticHTML !== 'undefined') {
@@ -36,37 +55,28 @@
// simple html-based implementation until it is available
function createPromptDialog(title, message, buttons, defaultText, callback) {
- var isPhone = cordova.platformId == "windows" && WinJS.Utilities.isPhone;
+ var isPhone = cordova.platformId === "windows" && WinJS.Utilities.isPhone;
+ var isWindows = !!cordova.platformId.match(/windows/);
+
+ createCSSElem("notification.css");
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";
dlgWrap.className = "dlgWrap";
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";
+ dlg.className = "dlgContainer";
- if (isPhone) {
- dlg.style.padding = "0px 5%";
- } else {
- dlg.style.top = "50%"; // center vertically
- dlg.style.transform = "translateY(-50%)";
- dlg.style.padding = "0px 30%";
+ if (isWindows) {
+ dlg.className += " dlgContainer-windows";
+ } else if (isPhone) {
+ dlg.className += " dlgContainer-phone";
}
+
// dialog layout template
- dlg.innerHTML = _cleanHtml("<span id='lbl-title' style='font-size: 24pt'></span><br/>" + // title
+ dlg.innerHTML = _cleanHtml("<span id='lbl-title'></span><br/>" + // title
"<span id='lbl-message'></span><br/>" + // message
- "<input id='prompt-input' style='width: 100%'/><br/>"); // input fields
+ "<input id='prompt-input'/><br/>"); // input fields
dlg.querySelector('#lbl-title').appendChild(document.createTextNode(title));
dlg.querySelector('#lbl-message').appendChild(document.createTextNode(message));
@@ -85,18 +95,12 @@
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.className = "dlgButton";
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.className += " dlgButtonFirst";
}
- button.style.border = "none";
button.appendChild(document.createTextNode(label));
dlg.appendChild(button);
}
diff --git a/www/windows/notification.css b/www/windows/notification.css
new file mode 100644
index 0000000..cb4fb2d
--- /dev/null
+++ b/www/windows/notification.css
@@ -0,0 +1,63 @@
+.dlgWrap {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.25);
+ z-index: 100000;
+ top: 0;
+}
+
+.dlgContainer {
+ width: 100%;
+ min-height: 180px;
+ height: auto;
+ overflow: auto;
+ background-color: white;
+ position: relative;
+ line-height: 2;
+ top: 50%;
+ transform: translateY(-50%);
+ padding: 0 30%;
+}
+
+.dlgContainer #lbl-title {
+ font-size: 24pt;
+}
+
+.dlgContainer #prompt-input {
+ width: 100%;
+}
+
+.dlgButton {
+ margin: 8px 0 0 16px;
+ float: right;
+ font-size: 11pt;
+ background-color: #cccccc;
+ border: none;
+ font-weight: 600;
+ font-family: "Segoe UI", Arial, sans-serif;
+ padding: 0 22px;
+}
+
+.dlgButton.dlgButtonFirst {
+ color: white;
+ background-color: #464646;
+}
+
+.dlgContainer.dlgContainer-windows {
+ width: 50%;
+ max-width: 680px;
+ padding: 0 5%;
+ top: 50%;
+ left: 50%;
+ position: fixed;
+ transform: translate(-50%, -50%);
+ border: 1px solid rgb(24, 160, 191);
+ border-image: none;
+ box-shadow: 0 0 14px 6px rgba(0,0,0,0.16);
+ text-transform: none;
+}
+
+.dlgContainer.dlgContainer-phone {
+ padding: 0 5%;
+}
\ No newline at end of file
