From fbe830fabe497d01f4f2eaddb867161a8187c101 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Thu, 9 Feb 2012 23:42:04 -0800
Subject: Adding download cloud app UI
---
js/io/system/coreioapi.js | 2 +-
js/io/ui/cloudpopup.reel/cloudpopup.html | 12 ++++++++
js/io/ui/cloudpopup.reel/cloudpopup.js | 26 ++++++++++++++--
js/io/ui/cloudpopup.reel/css/cloudpopup.css | 46 ++++++++++++++++++++++++++++
js/io/ui/cloudpopup.reel/css/cloudpopup.scss | 46 ++++++++++++++++++++++++++++
js/mediators/io-mediator.js | 20 ++++++------
6 files changed, 138 insertions(+), 14 deletions(-)
(limited to 'js')
diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js
index f62133ac..b19f1e70 100755
--- a/js/io/system/coreioapi.js
+++ b/js/io/system/coreioapi.js
@@ -323,7 +323,7 @@ window.hack = function (name, type) {
//
this._cloudDialogComponents.dialog.element.style.opacity = 1;
this._cloudDialogComponents.popup.element.style.opacity = 1;
- this._cloudDialogComponents.popup.element.style.margin = '-100px 0px 0px -190px';
+ this._cloudDialogComponents.popup.element.style.margin = '-170px 0px 0px -190px';
}
}
},
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html
index 1ab0892d..8e65a705 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.html
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.html
@@ -46,6 +46,18 @@
+
+
+ Install Ninja Cloud App
+
+ Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus.
+
+
+
+
+
+
+
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
index 7f494dcf..1344661b 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.js
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -16,11 +16,16 @@ exports.CloudPopup = Montage.create(Component, {
hasTemplate: {
value: true
},
+ ////////////////////////////////////////////////////////////////////
+ //
+ _os: {
+ value: null
+ },
////////////////////////////////////////////////////////////////////
//
components: {
enumerable: false,
- value: {test_btn: null, ok_btn: null, cancel_btn: null, status: null, url: null}
+ value: {test_btn: null, ok_btn: null, cancel_btn: null, download_btn: null, status: null, url: null}
},
////////////////////////////////////////////////////////////////////
//
@@ -33,6 +38,7 @@ exports.CloudPopup = Montage.create(Component, {
this.components.cancel_btn = this.element.getElementsByClassName('btn_cancel nj-skinned')[0];
this.components.status = this.element.getElementsByClassName('status')[0];
this.components.url = this.element.getElementsByClassName('cloud_url')[0];
+ this.components.download_btn = this.element.getElementsByClassName('btn_download nj-skinned')[0];
}
},
////////////////////////////////////////////////////////////////////
@@ -41,7 +47,11 @@ exports.CloudPopup = Montage.create(Component, {
enumerable: false,
value: function() {
//
-
+ if (navigator.appVersion.indexOf("Win")!=-1) {
+ this._os = 'windows';
+ } else if (navigator.appVersion.indexOf("Mac")!=-1) {
+ this._os = 'mac';
+ }
}
},
////////////////////////////////////////////////////////////////////
@@ -61,6 +71,8 @@ exports.CloudPopup = Montage.create(Component, {
didDraw: {
enumerable: false,
value: function() {
+ //
+ this.components.download_btn.addEventListener('click', this.downloadCloudApp.bind(this), false);
//
this.components.test_btn.addEventListener('click', this.testConnection.bind(this), false);
//
@@ -69,7 +81,15 @@ exports.CloudPopup = Montage.create(Component, {
}
},
////////////////////////////////////////////////////////////////////
- //this.application.ninja.coreIoApi.hideCloudDialog
+ //
+ downloadCloudApp: {
+ enumerable: false,
+ value: function() {
+ console.log(this._os);
+ }
+ },
+ ////////////////////////////////////////////////////////////////////
+ //
testConnection: {
enumerable: false,
value: function() {
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
index fcf85e75..85c80ad5 100644
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.css
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
@@ -96,3 +96,49 @@
float: right;
margin: 8px 2px 2px 8px;
}
+
+/* line 105, cloudpopup.scss */
+.cloud_popup section {
+ float: left;
+ clear: both;
+ margin: 16px 0px 0px 0px;
+ background: #333333 -webkit-linear-gradient(top, #323232 0%, #3c3c3c 100%);
+ border: 1px solid #333;
+ padding: 8px;
+ border-radius: 6px;
+}
+
+/* line 116, cloudpopup.scss */
+.cloud_popup section h4 {
+ text-transform: uppercase;
+ font-weight: normal;
+ font-size: 12px;
+ text-shadow: 1px 1px 1px #000;
+ font-family: 'Droid Sans', sans-serif;
+ display: block;
+ float: left;
+ clear: both;
+ margin: 2px 0px 6px 0px;
+ padding: 0px;
+ width: 100%;
+ text-align: center;
+}
+
+/* line 132, cloudpopup.scss */
+.cloud_popup section .btn_download {
+ width: 120px;
+ text-align: center;
+ margin: 10px 0px 2px 4px;
+ float: left;
+ font-size: 11px;
+}
+
+/* line 141, cloudpopup.scss */
+.cloud_popup section .cloud_icon {
+ background-image: url(../../../../../ninja_icon_128.png);
+ background-size: 100% 100%;
+ width: 60px;
+ height: 60px;
+ float: left;
+ margin: -10px 0px -6px 56px;
+}
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
index b8c9f880..deab188e 100755
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
@@ -99,4 +99,50 @@ $grey_light: #494949;
text-align: center;
float: right;
margin: 8px 2px 2px 8px;
+}
+
+.cloud_popup section
+{
+ float: left;
+ clear: both;
+ margin: 16px 0px 0px 0px;
+ background: #333 -webkit-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(60, 60, 60) 100%);
+ border: 1px solid #333;
+ padding: 8px;
+ border-radius: 6px;
+}
+
+.cloud_popup section h4
+{
+ text-transform: uppercase;
+ font-weight: normal;
+ font-size: 12px;
+ text-shadow: 1px 1px 1px #000;
+ font-family: 'Droid Sans', sans-serif;
+ display: block;
+ float: left;
+ clear: both;
+ margin: 2px 0px 6px 0px;
+ padding: 0px;
+ width: 100%;
+ text-align: center;
+}
+
+.cloud_popup section .btn_download
+{
+ width: 120px;
+ text-align: center;
+ margin: 10px 0px 2px 4px;
+ float: left;
+ font-size: 11px;
+}
+
+.cloud_popup section .cloud_icon
+{
+ background-image: url(../../../../../ninja_icon_128.png);
+ background-size: 100% 100%;
+ width: 60px;
+ height: 60px;
+ float: left;
+ margin: -10px 0px -6px 56px;
}
\ No newline at end of file
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index 630b0aa2..2f286e5e 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -86,16 +86,17 @@ exports.IoMediator = Montage.create(Component, {
case 204:
//Creating and formatting result object for callbak
result = read.file.details;
- //TODO: Add handling for converting HTML to Ninja format
+ //Checking for type of content to returns
if (result.extension !== 'html' && result.extension !== 'htm') {
+ //Simple string
result.content = read.file.content;
} else {
- //
+ //Object to be used by Ninja Template
result.content = this.parseHtmlToNinjaTemplate(read.file.content);
}
-
+ //Status of call
result.status = read.status;
- //
+ //Calling back with result
if (callback) callback(result);
break;
case 404:
@@ -143,7 +144,7 @@ exports.IoMediator = Montage.create(Component, {
//
fileSaveAs: {
enumerable: false,
- value: function (file, copy, callback) {
+ value: function (copyTo, copyFrom, callback) {
//
}
},
@@ -152,13 +153,12 @@ exports.IoMediator = Montage.create(Component, {
parseHtmlToNinjaTemplate: {
enumerable: false,
value: function (html) {
+ //Creating temp object to mimic HTML
var doc = window.document.implementation.createHTMLDocument(), template;
- //
+ //Setting content to temp
doc.getElementsByTagName('html')[0].innerHTML = html;
- template = {head: doc.head, body: doc.body, document: doc};
- doc = null;
- //
- return template;
+ //Creating return object
+ return {head: doc.head.innerHTML, body: doc.body.innerHTML, document: doc};
}
}
////////////////////////////////////////////////////////////////////
--
cgit v1.2.3