work

geocam · Jun 29, 2012 · 83c21bf · 83c21bf
1 parent 389b6e8
commit 83c21bf
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -52,8 +52,70 @@
 
     </div>
 
-
-
+<div id="divModalDialog1" class="divModalDialog">
+        <div id="modalInner1" >
+        	<table id="selectFileMethod">
+      			<tr>
+      				<td>
+        		<h6>Upload</h6>
+        		</td>
+        		</tr>
+        		<tr>
+        			<td>
+        				<a href="#divModalDialog1.1">From a URL</a>
+        			</td>
+        		</tr>
+        	</table>
+        	<div id="selectFile">
+        		<script type="text/x-handlebars">
+        			{{view GeocamResponderMaps.FileURLTextField placeholder="URL" valueBinding="ToDoApp.NewFileController.externalURL"}}
+        		</script>
+        	</div>
+
+            <form style="display: inline" action="#" method="get"><button>Back</button></form>
+            <form style="display: inline" action="#divModalDialog2" method="get"><button>Next</button></form>
+        </div>
+
+    </div>
+
+<div id="divModalDialog1.1" class="divModalDialog">
+        <div id="modalInner1" >
+        	<table id="selectFileMethod">
+      			<tr>
+      				<td>
+        				<a href="#divModalDialog1">Upload</a>
+        			</td>
+        		</tr>
+        		<tr>
+        			<td>
+        				<h6>From a URL</h6>
+        			</td>
+        		</tr>
+        	</table>
+
+        	<div id="selectFile">
+        		<script type="text/x-handlebars">
+        			<button {{action "showOverlay" target="GeocamResponderMaps.LibController"}}>Choose File</button>
+				</script>
+        	</div>
+            <form style="display: inline" action="#" method="get"><button>Back</button></form>
+            <form style="display: inline" action="#divModalDialog2" method="get"><button>Next</button></form>
+        </div>
+
+    </div>    
+
+
+
+<div id="divModalDialog2" class="divModalDialog">
+        <div id="modalInner2" >
+        	<div>
+
+        	</div>
+            <form style="display: inline" action="#divModalDialog1" method="get"><button>Back</button></form>
+            <form style="display: inline" action="#" method="get"><button>Next</button></form>
+        </div>
+
+    </div>
 
 
 

diff --git a/js/geocamMaps.js b/js/geocamMaps.js
@@ -78,8 +78,8 @@ GeocamResponderMaps.MapSetView = Ember.View.create({
 
 GeocamResponderMaps.LibraryView = Ember.View.create({
     classNames: ['library', 'overlayContainer'],
-    template: Ember.Handlebars.compile('<button {{action "createLayer" target="GeocamResponderMaps.LibController"}}>New Layer</button>')
-
+    template: Ember.Handlebars.compile('<form style="display: inline" action="#divModalDialog1" method="get"><button>New Layer</button></form>')
+//{{action "createLayer" target="GeocamResponderMaps.LibController"}}
 }).appendTo('#mapsetlib_canvas');
 
 GeocamResponderMaps.MapSetsLib = Ember.CollectionView.create({
@@ -116,7 +116,11 @@ GeocamResponderMaps.MapSets = Ember.CollectionView.create({
       })
   }).appendTo('.map_set');
 
-
+GeocamResponderMaps.FileURLTextField = Em.TextField.extend({
+    insertNewline: function(){
+        ToDoApp.ListController.prepItem();
+    }
+});
 
 /**************************
 * Controllers
@@ -139,7 +143,7 @@ GeocamResponderMaps.LibController = Em.ArrayController.create({
     	console.log(overlay);
     },
     showOverlay: function(that){
-    	console.log();
+    	console.log("dummy function");
     },
     removeOverlay: function(that){
     	var index = that.valueOf().contentIndex;
@@ -155,5 +159,11 @@ GeocamResponderMaps.LibController = Em.ArrayController.create({
 
 
 
+GeocamResponderMaps.NewFileController = Em.ArrayController.create({
+    contentLib: [],
+    externalURL: null
+
+});
+
 
 
diff --git a/style/styles.css b/style/styles.css
@@ -48,7 +48,7 @@ button:active {
 }
 .overlayContainer{
 	width: 440px;
-    height: 500px;
+    height: 490px;
 	background: #6a6a6a;
 
 }
@@ -61,13 +61,13 @@ button:active {
 
 #navBar{
 	width: 100%;
-	height: 25px;
+	height: 25%;
 	background: #ababab;
 	clear:both;
 }
 #topBar{
 	width: 100%;
-	height: 75px;
+	height: 75%;
 	background: #6a6a6a;
 }
 #mapSetTable{
@@ -164,10 +164,71 @@ body input[type='text'] {
     box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.6);
     color: #999;
     background-color: #f0f0f0;
-    width: 500px;
-    font-size: 30px;
+    width: 400px;
+    font-size: 22px;
     font-family: Helvetica, sans-serif;
     padding: 5px;
     border: 1px solid #bbbbbb;
-    font-weight: 500; }
+    font-weight: 400; 
+    }
+
+
+/**  Modal Window **/
+.divModalDialog  {
+    position:fixed;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    /*! important !*/
+    display:none;
+    /* last attribute set darkness on scale: 0...1.0 */
+    background-color:rgba(0,0,0,0.5);
+    text-align:center;
+    z-index:101;
+}
+/*** ! target attribute does the job ! ***/
+.divModalDialog:target  { display:block; }
+
+
+.divModalDialog div {
+	/* rounded corners */
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	border-radius: 10px;
+	z-index:102;
+	background:#bbbbbb;
+}
+
+.divModalDialog #modalInner1 {
+	/* either absolute or fixed */
+	position:fixed;
+	top:10%;
+	right:25%;
+	width:50%;
+	height:40%;
+
+}
+
+.divModalDialog #modalInner2 {
+	/* either absolute or fixed */
+	position:fixed;
+	top:10%;
+	right:30%;
+	width:40%;
+	height:80%;
+
+}
+
+.divModalDialog a {font-size: 22px; text-decoration:none; padding: 5px; margin: 5px;} 
+.divModalDialog a:link {color:#000000;}      /* unvisited link */
+.divModalDialog a:visited {color:#000000;}  /* visited link */
+.divModalDialog a:hover {color:#000000;}  /* mouse over link */
+.divModalDialog a:active {color:#000000;}  /* selected link */
+.divModalDialog h6 {color:#CD3700; font-size: 22px; padding: 5px; margin: 5px; font-weight:normal;}
+
+#selectFileMethod{ float: left;  border-color: #600; border-width: 0 1px 0 0; border-style: solid; height:100%;}
+#selectFile {height:80%; width: 50%}
+
+