From e75223a2c4c1e13d66639841e6418e94fe9b726f Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 31 Jan 2012 15:59:46 -0800
Subject: 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.
---
js/io/system/coreioapi.js | 84 +++++++++++++++---
js/io/ui/cloudpopup.reel/cloudpopup.html | 54 ++++++++++++
js/io/ui/cloudpopup.reel/cloudpopup.js | 55 ++++++++++++
js/io/ui/cloudpopup.reel/config.rb | 9 ++
js/io/ui/cloudpopup.reel/css/cloudpopup.css | 118 ++++++++++++++++++++++++++
js/io/ui/cloudpopup.reel/css/cloudpopup.scss | 122 +++++++++++++++++++++++++++
6 files changed, 431 insertions(+), 11 deletions(-)
create mode 100755 js/io/ui/cloudpopup.reel/cloudpopup.html
create mode 100755 js/io/ui/cloudpopup.reel/cloudpopup.js
create mode 100755 js/io/ui/cloudpopup.reel/config.rb
create mode 100644 js/io/ui/cloudpopup.reel/css/cloudpopup.css
create mode 100755 js/io/ui/cloudpopup.reel/css/cloudpopup.scss
(limited to 'js/io')
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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 @@
+/*
+This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component;
+////////////////////////////////////////////////////////////////////////
+//
+exports.CloudPopup = Montage.create(Component, {
+ ////////////////////////////////////////////////////////////////////
+ //
+ hasTemplate: {
+ value: true
+ },
+ ////////////////////////////////////////////////////////////////////
+ //
+ prepareForDraw: {
+ enumerable: false,
+ value: function () {
+ //
+ }
+ },
+ ////////////////////////////////////////////////////////////////////
+ //
+ willDraw: {
+ enumerable: false,
+ value: function() {
+ //
+ }
+ },
+ ////////////////////////////////////////////////////////////////////
+ //
+ draw: {
+ enumerable: false,
+ value: function() {
+ //
+ }
+ },
+ ////////////////////////////////////////////////////////////////////
+ //
+ didDraw: {
+ enumerable: false,
+ value: function() {
+ //
+ }
+ }
+ ////////////////////////////////////////////////////////////////////
+ ////////////////////////////////////////////////////////////////////
+});
+////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////
\ No newline at end of file
diff --git a/js/io/ui/cloudpopup.reel/config.rb b/js/io/ui/cloudpopup.reel/config.rb
new file mode 100755
index 00000000..9b55af19
--- /dev/null
+++ b/js/io/ui/cloudpopup.reel/config.rb
@@ -0,0 +1,9 @@
+# Require any additional compass plugins here.
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "css"
+images_dir = "img"
+javascripts_dir = "../"
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
new file mode 100644
index 00000000..009ba835
--- /dev/null
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
@@ -0,0 +1,118 @@
+@charset "UTF-8";
+/*
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+/* line 12, cloudpopup.scss */
+.cloud_popup {
+ font-size: 12px;
+ text-shadow: 1px 1px 1px #000;
+ font-family: 'Droid Sans', sans-serif;
+}
+
+/* line 19, cloudpopup.scss */
+.cloud_popup .content {
+ width: 360px;
+}
+
+/* line 24, cloudpopup.scss */
+.cloud_popup .content h3 {
+ text-transform: uppercase;
+ font-weight: normal;
+ font-size: 14px;
+ text-shadow: 1px 1px 1px #000;
+ font-family: 'Droid Sans', sans-serif;
+ display: block;
+ float: left;
+ clear: both;
+ margin: 4px 0px 8px 0px;
+ padding: 0px;
+ width: 100%;
+ text-align: center;
+}
+
+/* line 40, cloudpopup.scss */
+.cloud_popup .content p {
+ text-shadow: 1px 1px 1px #333;
+ margin: 0px 0px 12px 0px;
+ text-align: justify;
+ color: #EEE;
+}
+
+/* line 48, cloudpopup.scss */
+.cloud_popup .content .test {
+ float: right;
+ clear: right;
+ margin: 0px 0px 0px 8px;
+}
+
+/* line 55, cloudpopup.scss */
+.cloud_popup .content label {
+ float: left;
+ margin: 5px 8px 0px 0px;
+ display: block;
+ width: 96px;
+ text-align: right;
+}
+
+/* line 64, cloudpopup.scss */
+.cloud_popup .content input {
+ display: block;
+ border: 0px;
+ padding: 4px;
+ margin: 0px;
+ background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929));
+ border: 1px #5c5c5c solid;
+ color: #FFF;
+ float: left;
+ width: 202px;
+ border-radius: 4px;
+}
+
+/* line 77, cloudpopup.scss */
+.cloud_popup .content input:focus {
+ background: #FFF;
+ border: 1px #292929 solid;
+ color: #292929;
+}
+
+/* line 84, cloudpopup.scss */
+.cloud_popup .content button {
+ display: block;
+ border: 0px;
+ margin: 0px;
+ padding: 4px;
+ border: 1px #333 solid;
+ background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #494949), color-stop(100%, #292929));
+ border-radius: 4px;
+ color: #FFF;
+ text-transform: uppercase;
+ cursor: pointer;
+ text-shadow: 1px 1px 1px #000;
+}
+
+/* line 99, cloudpopup.scss */
+.cloud_popup .content button:hover {
+ border: 1px #222 solid;
+ background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c5c5c), color-stop(100%, #161616));
+ color: #EEE;
+}
+
+/* line 107, cloudpopup.scss */
+.cloud_popup .content .status {
+ color: red;
+ float: left;
+ clear: right;
+ margin: 5px 0px 0px 6px;
+ text-shadow: 1px 1px 1px #333;
+ width: 240px;
+}
+
+/* line 117, cloudpopup.scss */
+.cloud_popup .content .handle_ok, .cloud_popup .content .handle_cancel {
+ width: 80px;
+ text-align: center;
+ float: right;
+ margin: 4px 0px 0px 8px;
+}
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
new file mode 100755
index 00000000..ea54b1d8
--- /dev/null
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
@@ -0,0 +1,122 @@
+@charset "UTF-8";
+/*
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+$grey_dark: #292929;
+$grey_light: #494949;
+
+.cloud_popup
+{
+ font-size: 12px;
+ text-shadow: 1px 1px 1px #000;
+ font-family: 'Droid Sans', sans-serif;
+}
+
+.cloud_popup .content
+{
+ width: 360px;
+}
+
+.cloud_popup .content h3
+{
+ text-transform: uppercase;
+ font-weight: normal;
+ font-size: 14px;
+ text-shadow: 1px 1px 1px #000;
+ font-family: 'Droid Sans', sans-serif;
+ display: block;
+ float: left;
+ clear: both;
+ margin: 4px 0px 8px 0px;
+ padding: 0px;
+ width: 100%;
+ text-align: center;
+}
+
+.cloud_popup .content p
+{
+ text-shadow: 1px 1px 1px #333;
+ margin: 0px 0px 12px 0px;
+ text-align: justify;
+ color: #EEE;
+}
+
+.cloud_popup .content .test
+{
+ float: right;
+ clear: right;
+ margin: 0px 0px 0px 8px;
+}
+
+.cloud_popup .content label
+{
+ float: left;
+ margin: 5px 8px 0px 0px;
+ display: block;
+ width: 96px;
+ text-align: right;
+}
+
+.cloud_popup .content input
+{
+ display: block;
+ border: 0px;
+ padding: 4px;
+ margin: 0px;
+ background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(45%, lighten($grey_dark, 10%)), color-stop(100%, $grey_dark));
+ border: 1px lighten($grey_dark, 20%) solid;
+ color: #FFF;
+ float: left;
+ width: 202px;
+ border-radius: 4px;
+}
+
+.cloud_popup .content input:focus {
+ background: #FFF;
+ border: 1px $grey_dark solid;
+ color: $grey_dark;
+}
+
+.cloud_popup .content button
+{
+ display: block;
+ border: 0px;
+ margin: 0px;
+ padding: 4px;
+ border: 1px #333 solid;
+ background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(0%, $grey_light), color-stop(100%, $grey_dark));
+ border-radius: 4px;
+ color: #FFF;
+ text-transform: uppercase;
+ cursor: pointer;
+ text-shadow: 1px 1px 1px #000;
+}
+
+.cloud_popup .content button:hover
+{
+
+ border: 1px #222 solid;
+ background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(0%, lighten($grey_dark, 20%)), color-stop(100%, darken($grey_light, 20%)));
+ color: #EEE;
+}
+
+.cloud_popup .content .status
+{
+ color: red;
+ float: left;
+ clear: right;
+ margin: 5px 0px 0px 6px;
+ text-shadow: 1px 1px 1px #333;
+ width: 240px;
+}
+
+.cloud_popup .content .handle_ok, .cloud_popup .content .handle_cancel
+{
+ width: 80px;
+ text-align: center;
+ float: right;
+ margin: 4px 0px 0px 8px;
+}
\ No newline at end of file
--
cgit v1.2.3