Hooking cloud popup UI to core

Set up the popup UI for cloud to core API to detected cloud API connection.

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, {
                                 return true;
                         } else {
                                 //Inactive
-                                if (!this._cloudDialogOpen || this.application.ninja) {
+                                if (!this._cloudDialogOpen && this.application.ninja) {
                                         this.showCloudDialog();
                                 }
                                 return false;
@@ -72,10 +72,12 @@ exports.CoreIoApi = Montage.create(Component, {
         enumerable: false,
                 value: function () {
                         //
+                        this._cloudDialogOpen = true;
+                        //
                         this._cloudDialogComponents.blackout = document.createElement('div');
                         this._cloudDialogComponents.blackout.style.width = '100%';
                         this._cloudDialogComponents.blackout.style.height = '100%';
-                        this._cloudDialogComponents.blackout.style.background = 'rgba(0, 0, 0, .6)';
+                        this._cloudDialogComponents.blackout.style.background = '-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,0.8) 80%)';
                         this.application.ninja.popupManager.addPopup(this._cloudDialogComponents.blackout);
                 //
                 ////////////////////////////////////////////////////
@@ -93,28 +95,31 @@ exports.CoreIoApi = Montage.create(Component, {
                 this._cloudDialogComponents.dialog.addEventListener('firstDraw', this, false);
                 }
     },
-    
+    ////////////////////////////////////////////////////////////////////
+    //
     handleFirstDraw: {
         value: function (e) {
                         if (e._target._element.className === 'cloud_popup') {
                         this._cloudDialogComponents.dialog.removeEventListener('firstDraw', this, false);
                         //
-                                this._cloudDialogComponents.popup = this.application.ninja.popupManager.createPopup(this._cloudDialogComponents.dialog.element, {x: '200px', y: '200px'});
+                                this._cloudDialogComponents.popup = this.application.ninja.popupManager.createPopup(this._cloudDialogComponents.dialog.element, {x: '50%', y: '50%'});
                                 this._cloudDialogComponents.popup.addEventListener('firstDraw', this, false);
                         } else {
                                 //
                                 this._cloudDialogComponents.dialog.element.style.opacity = 1;
                                 this._cloudDialogComponents.popup.element.style.opacity = 1;
+                                this._cloudDialogComponents.popup.element.style.margin = '-100px 0px 0px -190px';
                         }
         }
     },
-    
-    
     ////////////////////////////////////////////////////////////////////
     //
     hideCloudDialog: {
         enumerable: false,
                 value: function () {
+                        //
+                        this.application.ninja.popupManager.removePopup(this._cloudDialogComponents.blackout);
+                        this.application.ninja.popupManager.removePopup(this._cloudDialogComponents.popup.element);
                 }
     },
         ////////////////////////////////////////////////////////////////////
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 @@
                         
                         <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas.</p>
                         
-                        <label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" value="http://localhost:16380" />
+                        <label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" class="cloud_url" value="http://localhost:16380" />
                         
-                        <button class="test">Test</button>
+                        <button class="btn_test">Test</button>
                         
-                        <label>Status:</label><div class="status">Disconnected</div>
+                        <label>Status:</label><div class="status">&nbsp;</div>
                         
-                        <button class="handle_cancel">Cancel</button>
+                        <button class="btn_cancel">Cancel</button>
                         
-                        <button class="handle_ok">Ok</button>
+                        <button class="btn_ok">Ok</button>
                         
                 </div>
         </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, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    components: {
+        enumerable: false,
+        value: {test_btn: null, ok_btn: null, cancel_btn: null, status: null, url: null}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     prepareForDraw: {
         enumerable: false,
         value: function () {
                 //
+                this.components.test_btn = this.element.getElementsByClassName('btn_test')[0];
+                this.components.ok_btn = this.element.getElementsByClassName('btn_ok')[0];
+                this.components.cancel_btn = this.element.getElementsByClassName('btn_cancel')[0];
+                this.components.status = this.element.getElementsByClassName('status')[0];
+                this.components.url = this.element.getElementsByClassName('cloud_url')[0];
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -30,6 +41,7 @@ exports.CloudPopup = Montage.create(Component, {
         enumerable: false,
         value: function() {
                 //
+                
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -38,6 +50,7 @@ exports.CloudPopup = Montage.create(Component, {
         enumerable: false,
         value: function() {
                 //
+                this.testConnection();
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -46,6 +59,36 @@ exports.CloudPopup = Montage.create(Component, {
         enumerable: false,
         value: function() {
                 //
+                this.components.test_btn.addEventListener('click', this.testConnection.bind(this), false);
+                //
+                this.components.ok_btn.addEventListener('click', this.closeDialog.bind(this), false);
+                this.components.cancel_btn.addEventListener('click', this.closeDialog.bind(this), false);
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //this.application.ninja.coreIoApi.hideCloudDialog
+    testConnection: {
+        enumerable: false,
+        value: function() {
+                //
+                this.application.ninja.coreIoApi.rootUrl = this.components.url.value;
+                //
+                        if (this.application.ninja.coreIoApi.cloudAvailable()) {
+                        this.components.status.style.color = '#77FF00';
+                        this.components.status.innerHTML = 'Connected';
+                } else {
+                        this.components.status.style.color = '#FF3A3A';
+                        this.components.status.innerHTML = 'Disconnected';
+                }
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    closeDialog: {
+        enumerable: false,
+        value: function() {
+                //
+                this.application.ninja.coreIoApi.hideCloudDialog();
         }
     }
     ////////////////////////////////////////////////////////////////////
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 @@
 
 /* line 40, cloudpopup.scss */
 .cloud_popup .content p {
-  text-shadow: 1px 1px 1px #333;
+  text-shadow: 1px 1px 1px #222;
   margin: 0px 0px 12px 0px;
   text-align: justify;
   color: #EEE;
 }
 
 /* line 48, cloudpopup.scss */
-.cloud_popup .content .test {
+.cloud_popup .content .btn_test {
   float: right;