aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-01-31 22:44:15 -0800
committerJose Antonio Marquez2012-01-31 22:44:15 -0800
commitd2ff7026abd7e40b49917491773cba9367221f99 (patch)
tree22ab4103ebe645dbd3d38937860c137bf1c18801
parent67097a84b13199a6e7ee3185f1c5521208f1732f (diff)
downloadninja-d2ff7026abd7e40b49917491773cba9367221f99.tar.gz
Hooking cloud popup UI to core
Set up the popup UI for cloud to core API to detected cloud API connection.
-rwxr-xr-xjs/io/system/coreioapi.js17
-rwxr-xr-xjs/io/ui/cloudpopup.reel/cloudpopup.html10
-rwxr-xr-xjs/io/ui/cloudpopup.reel/cloudpopup.js43
-rw-r--r--js/io/ui/cloudpopup.reel/css/cloudpopup.css34
-rwxr-xr-xjs/io/ui/cloudpopup.reel/css/cloudpopup.scss23
5 files changed, 90 insertions, 37 deletions
diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js
index 4407d59a..6b803f22 100755
--- a/js/io/system/coreioapi.js
+++ b/js/io/system/coreioapi.js
@@ -47,7 +47,7 @@ exports.CoreIoApi = Montage.create(Component, {
47 return true; 47 return true;
48 } else { 48 } else {
49 //Inactive 49 //Inactive
50 if (!this._cloudDialogOpen || this.application.ninja) { 50 if (!this._cloudDialogOpen && this.application.ninja) {
51 this.showCloudDialog(); 51 this.showCloudDialog();
52 } 52 }
53 return false; 53 return false;
@@ -72,10 +72,12 @@ exports.CoreIoApi = Montage.create(Component, {
72 enumerable: false, 72 enumerable: false,
73 value: function () { 73 value: function () {
74 // 74 //
75 this._cloudDialogOpen = true;
76 //
75 this._cloudDialogComponents.blackout = document.createElement('div'); 77 this._cloudDialogComponents.blackout = document.createElement('div');
76 this._cloudDialogComponents.blackout.style.width = '100%'; 78 this._cloudDialogComponents.blackout.style.width = '100%';
77 this._cloudDialogComponents.blackout.style.height = '100%'; 79 this._cloudDialogComponents.blackout.style.height = '100%';
78 this._cloudDialogComponents.blackout.style.background = 'rgba(0, 0, 0, .6)'; 80 this._cloudDialogComponents.blackout.style.background = '-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,0.8) 80%)';
79 this.application.ninja.popupManager.addPopup(this._cloudDialogComponents.blackout); 81 this.application.ninja.popupManager.addPopup(this._cloudDialogComponents.blackout);
80 // 82 //
81 //////////////////////////////////////////////////// 83 ////////////////////////////////////////////////////
@@ -93,28 +95,31 @@ exports.CoreIoApi = Montage.create(Component, {
93 this._cloudDialogComponents.dialog.addEventListener('firstDraw', this, false); 95 this._cloudDialogComponents.dialog.addEventListener('firstDraw', this, false);
94 } 96 }
95 }, 97 },
96 98 ////////////////////////////////////////////////////////////////////
99 //
97 handleFirstDraw: { 100 handleFirstDraw: {
98 value: function (e) { 101 value: function (e) {
99 if (e._target._element.className === 'cloud_popup') { 102 if (e._target._element.className === 'cloud_popup') {
100 this._cloudDialogComponents.dialog.removeEventListener('firstDraw', this, false); 103 this._cloudDialogComponents.dialog.removeEventListener('firstDraw', this, false);
101 // 104 //
102 this._cloudDialogComponents.popup = this.application.ninja.popupManager.createPopup(this._cloudDialogComponents.dialog.element, {x: '200px', y: '200px'}); 105 this._cloudDialogComponents.popup = this.application.ninja.popupManager.createPopup(this._cloudDialogComponents.dialog.element, {x: '50%', y: '50%'});
103 this._cloudDialogComponents.popup.addEventListener('firstDraw', this, false); 106 this._cloudDialogComponents.popup.addEventListener('firstDraw', this, false);
104 } else { 107 } else {
105 // 108 //
106 this._cloudDialogComponents.dialog.element.style.opacity = 1; 109 this._cloudDialogComponents.dialog.element.style.opacity = 1;
107 this._cloudDialogComponents.popup.element.style.opacity = 1; 110 this._cloudDialogComponents.popup.element.style.opacity = 1;
111 this._cloudDialogComponents.popup.element.style.margin = '-100px 0px 0px -190px';
108 } 112 }
109 } 113 }
110 }, 114 },
111
112
113 //////////////////////////////////////////////////////////////////// 115 ////////////////////////////////////////////////////////////////////
114 // 116 //
115 hideCloudDialog: { 117 hideCloudDialog: {
116 enumerable: false, 118 enumerable: false,
117 value: function () { 119 value: function () {
120 //
121 this.application.ninja.popupManager.removePopup(this._cloudDialogComponents.blackout);
122 this.application.ninja.popupManager.removePopup(this._cloudDialogComponents.popup.element);
118 } 123 }
119 }, 124 },
120 //////////////////////////////////////////////////////////////////// 125 ////////////////////////////////////////////////////////////////////
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html
index 8e45f926..5d7de347 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.html
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.html
@@ -36,15 +36,15 @@
36 36
37 <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas.</p> 37 <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas.</p>
38 38
39 <label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" value="http://localhost:16380" /> 39 <label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" class="cloud_url" value="http://localhost:16380" />
40 40
41 <button class="test">Test</button> 41 <button class="btn_test">Test</button>
42 42
43 <label>Status:</label><div class="status">Disconnected</div> 43 <label>Status:</label><div class="status">&nbsp;</div>
44 44
45 <button class="handle_cancel">Cancel</button> 45 <button class="btn_cancel">Cancel</button>
46 46
47 <button class="handle_ok">Ok</button> 47 <button class="btn_ok">Ok</button>
48 48
49 </div> 49 </div>
50 </div> 50 </div>
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
index 3e104bb7..f81dc93c 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.js
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -18,10 +18,21 @@ exports.CloudPopup = Montage.create(Component, {
18 }, 18 },
19 //////////////////////////////////////////////////////////////////// 19 ////////////////////////////////////////////////////////////////////
20 // 20 //
21 components: {
22 enumerable: false,
23 value: {test_btn: null, ok_btn: null, cancel_btn: null, status: null, url: null}
24 },
25 ////////////////////////////////////////////////////////////////////
26 //
21 prepareForDraw: { 27 prepareForDraw: {
22 enumerable: false, 28 enumerable: false,
23 value: function () { 29 value: function () {
24 // 30 //
31 this.components.test_btn = this.element.getElementsByClassName('btn_test')[0];
32 this.components.ok_btn = this.element.getElementsByClassName('btn_ok')[0];
33 this.components.cancel_btn = this.element.getElementsByClassName('btn_cancel')[0];
34 this.components.status = this.element.getElementsByClassName('status')[0];
35 this.components.url = this.element.getElementsByClassName('cloud_url')[0];
25 } 36 }
26 }, 37 },
27 //////////////////////////////////////////////////////////////////// 38 ////////////////////////////////////////////////////////////////////
@@ -30,6 +41,7 @@ exports.CloudPopup = Montage.create(Component, {
30 enumerable: false, 41 enumerable: false,
31 value: function() { 42 value: function() {
32 // 43 //
44
33 } 45 }
34 }, 46 },
35 //////////////////////////////////////////////////////////////////// 47 ////////////////////////////////////////////////////////////////////
@@ -38,6 +50,7 @@ exports.CloudPopup = Montage.create(Component, {
38 enumerable: false, 50 enumerable: false,
39 value: function() { 51 value: function() {
40 // 52 //
53 this.testConnection();
41 } 54 }
42 }, 55 },
43 //////////////////////////////////////////////////////////////////// 56 ////////////////////////////////////////////////////////////////////
@@ -46,6 +59,36 @@ exports.CloudPopup = Montage.create(Component, {
46 enumerable: false, 59 enumerable: false,
47 value: function() { 60 value: function() {
48 // 61 //
62 this.components.test_btn.addEventListener('click', this.testConnection.bind(this), false);
63 //
64 this.components.ok_btn.addEventListener('click', this.closeDialog.bind(this), false);
65 this.components.cancel_btn.addEventListener('click', this.closeDialog.bind(this), false);
66 }
67 },
68 ////////////////////////////////////////////////////////////////////
69 //this.application.ninja.coreIoApi.hideCloudDialog
70 testConnection: {
71 enumerable: false,
72 value: function() {
73 //
74 this.application.ninja.coreIoApi.rootUrl = this.components.url.value;
75 //
76 if (this.application.ninja.coreIoApi.cloudAvailable()) {
77 this.components.status.style.color = '#77FF00';
78 this.components.status.innerHTML = 'Connected';
79 } else {
80 this.components.status.style.color = '#FF3A3A';
81 this.components.status.innerHTML = 'Disconnected';
82 }
83 }
84 },
85 ////////////////////////////////////////////////////////////////////
86 //
87 closeDialog: {
88 enumerable: false,
89 value: function() {
90 //
91 this.application.ninja.coreIoApi.hideCloudDialog();
49 } 92 }
50 } 93 }
51 //////////////////////////////////////////////////////////////////// 94 ////////////////////////////////////////////////////////////////////
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
index 009ba835..81e0742f 100644
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.css
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
@@ -34,20 +34,21 @@
34 34
35/* line 40, cloudpopup.scss */ 35/* line 40, cloudpopup.scss */
36.cloud_popup .content p { 36.cloud_popup .content p {
37 text-shadow: 1px 1px 1px #333; 37 text-shadow: 1px 1px 1px #222;
38 margin: 0px 0px 12px 0px; 38 margin: 0px 0px 12px 0px;
39 text-align: justify; 39 text-align: justify;
40 color: #EEE; 40 color: #EEE;
41} 41}
42 42
43/* line 48, cloudpopup.scss */ 43/* line 48, cloudpopup.scss */
44.cloud_popup .content .test { 44.cloud_popup .content .btn_test {
45 float: right; 45 float: right;