Cloud IO Prompt

Setting up UI for the file IO prompt on initialization of Ninja and whenever a cloud IO call is made and the server is not detected.

9 files changed, 439 insertions, 13 deletions

diff --git a/.gitignore b/.gitignore
index fd016bd0..6c288e8c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,5 @@ cloud/
 
 /.idea/scopes/scope_settings.xml
 _scss/imports/scss/_Stage.scss
-compass_app_log.txt
\ No newline at end of file
+compass_app_log.txt
+js/io/ui/cloudpopup.reel/.sass-cache/5fd824121af95f6044b06681535cf0639ffb5db3/cloudpopup.scssc
\ No newline at end of file
diff --git a/js/components/popup-manager.reel/popup-manager.js b/js/components/popup-manager.reel/popup-manager.js
index be3c1e8d..bc755f74 100755
--- a/js/components/popup-manager.reel/popup-manager.js
+++ b/js/components/popup-manager.reel/popup-manager.js
@@ -32,7 +32,8 @@ exports.PopupMananger = Montage.create(Component, {
     addPopup: {
         enumerable: true,
         value: function (popup, depth, blackout) {
-                //
+                //Fix to ensure always highest
+                this.element.style.zIndex = this._getNextHighestZindex(document.body); // Highest z-index in body
                 //TODO: Add blackout background
                 //Checking for manual or setting auto to next highest depth
                 if (depth) {
diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js
index 33c7bc28..4407d59a 100755
--- a/js/io/system/coreioapi.js
+++ b/js/io/system/coreioapi.js
@@ -10,7 +10,9 @@ NOTES:
 ////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////// */
 var Montage =           require("montage/core/core").Montage,
-    Component =         require("montage/ui/component").Component;
+    Component =         require("montage/ui/component").Component,
+    Popup =             require("js/components/popup.reel").Popup,
+    CloudPopup =        require("js/io/ui/cloudpopup.reel").CloudPopup;
 ////////////////////////////////////////////////////////////////////////
 //Exporting as Project I/O
 exports.CoreIoApi = Montage.create(Component, {
@@ -26,16 +28,11 @@ exports.CoreIoApi = Montage.create(Component, {
                                 //Checks for IO API to be active
                                 this.ioServiceDetected = this.cloudAvailable();
                                 //
-                                console.log('FileIO: localStorage URL detected | IO Service Detected: '+ this.ioServiceDetected);
-                                //
+                                console.log('Cloud Status: URL detected in localStorage as '+this.rootUrl);
                         } else {
-                                //TODO: Remove, automatically prompt user on welcome
-                                this.rootUrl = 'http://localhost:16380';
-                                //TODO: Changed to false, welcome screen prompts user
-                                this.ioServiceDetected = this.cloudAvailable();
-                                //
-                                console.log('FileIO: localStorage URL NOT detected | IO Service Detected: '+ this.ioServiceDetected);
                                 //
+                                this.ioServiceDetected = false;
+                                console.log('Cloud Status: No URL detected in localStorage');
                         }
                 }
         },
@@ -45,18 +42,83 @@ exports.CoreIoApi = Montage.create(Component, {
                 enumerable: false,
                 value: function () {
                         //
-                        if (this.getCloudStatus().status === 200) {
+                        if (this.rootUrl && this.getCloudStatus().status === 200) {
                                 //Active
                                 return true;
                         } else {
                                 //Inactive
-                                //TODO: Logic to prompt the user for cloud, otherwise return false
+                                if (!this._cloudDialogOpen || this.application.ninja) {
+                                        this.showCloudDialog();
+                                }
                                 return false;
                         }
                 }
         },
         ////////////////////////////////////////////////////////////////////
     //
+    _cloudDialogOpen: {
+        enumerable: false,
+                value: false
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    _cloudDialogComponents: {
+        enumerable: false,
+                value: {blackout: null, popup: null, dialog: null}
+    },
+        ////////////////////////////////////////////////////////////////////
+    //
+    showCloudDialog: {
+        enumerable: false,
+                value: function () {
+                        //
+                        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.application.ninja.popupManager.addPopup(this._cloudDialogComponents.blackout);
+                //
+                ////////////////////////////////////////////////////
+                //Creating popup from m-js component
+                var popup = document.createElement('div');
+                //
+                this._cloudDialogComponents.dialog = CloudPopup.create();
+                //
+                document.body.appendChild(popup);
+                //
+                this._cloudDialogComponents.dialog.element = popup;
+                this._cloudDialogComponents.dialog.needsDraw = true;
+                this._cloudDialogComponents.dialog.element.style.opacity = 0;
+                //
+                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.addEventListener('firstDraw', this, false);
+                        } else {
+                                //
+                                this._cloudDialogComponents.dialog.element.style.opacity = 1;
+                                this._cloudDialogComponents.popup.element.style.opacity = 1;
+                        }
+        }
+    },
+    
+    
+    ////////////////////////////////////////////////////////////////////
+    //
+    hideCloudDialog: {
+        enumerable: false,
+                value: function () {
+                }
+    },
+        ////////////////////////////////////////////////////////////////////
+    //
     _ioServiceDetected: {
         enumerable: false,
         value: false
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html
new file mode 100755
index 00000000..8e45f926
--- /dev/null
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+ 
+<html lang="en">
+        <head>
+        
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        
+        <link rel="stylesheet" type="text/css" href="css/cloudpopup.css">
+                
+                <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module": "js/io/ui/cloudpopup.reel",
+                "name": "cloudpopup",
+                "properties": {
+                    "element": {"#": "cloud_popup"}
+                }
+            }
+        }
+                </script>
+                
+        </head>
+        
+        <body>
+    
+        <div id="cloud_popup" class="cloud_popup">
+                <div class="content">
+                        
+                        <h3>Cloud Service Dialog</h3>
+                        
+                        <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" />
+                        
+                        <button class="test">Test</button>
+                        
+                        <label>Status:</label><div class="status">Disconnected</div>
+                        
+                        <button class="handle_cancel">Cancel</button>
+                        
+                        <button class="handle_ok">Ok</button>
+                        
+                </div>
+        </div>
+    
+        </body>
+
+</html>
\ No newline at end of file
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
new file mode 100755
index 00000000..3e104bb7
--- /dev/null
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -0,0 +1,55 @@
+/* <copyright>