Skip to content
Browse files

Added Drag and Drop, forms do not change address

  • Loading branch information...
1 parent 3ba1737 commit 7430d54bb856ed80291ba00af95d9ef16aa6e32b @Gabino3 Gabino3 committed Jul 6, 2012
Showing with 177 additions and 75 deletions.
  1. +36 −25 index.html
  2. +133 −43 js/geocamMaps.js
  3. +8 −7 style/styles.css
View
61 index.html
@@ -1,10 +1,14 @@
<!doctype html>
<html>
<head>
- <!-- <script id="template" type="text/handlebars">-->
- <title>temporary</title>
+ <script id="template" type="text/handlebars">
+
+ <title>{{GeocamResponderMaps.name}}</title>
+ </script>
+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="style/styles.css">
@@ -20,7 +24,7 @@
</head>
<body>
-
+ <!-- MAIN PAGE -->
<div id="pageHeader">
<div id="topBar">
<img src="icons/responderMapsLogo.png">
@@ -37,11 +41,15 @@
<td><div id="map_canvas"></div></td>
<td>
<div>
- <div class="columnHeader"></div>
- <script type="text/x-handlebars">
- {{GeocamResponderMaps.name}}
- </script>
- <div class="columnHeader"></div>
+ <div class="columnHeader">
+ <script type="text/x-handlebars">
+ {{GeocamResponderMaps.name}}
+
+ </script>
+ <div>Current Map Set</div>
+ </div>
+
+
</div>
<div id="mapset_canvas"></div></td>
<td>
@@ -56,8 +64,8 @@
<div id="dialogDiv" style="display: none;"></div>
</div>
-
-<div id="divModalDialog1" class="divModalDialog">
+<!-- FIRST DIALOG -->
+<div id="divModalDialogUrl" class="divModalDialog">
<div id="modalInner1" >
<table id="selectFileMethod">
<tr>
@@ -67,7 +75,9 @@
</tr>
<tr>
<td>
- <a href="#divModalDialog1.1">Upload</a>
+ <script type="text/x-handlebars">
+ <a {{action "modalWinUpload" target="GeocamResponderMaps.NewFileController"}}>Upload</a>
+ </script>
</td>
</tr>
</table>
@@ -77,19 +87,21 @@
</script>
</div>
<script type="text/x-handlebars">
- <form style="display: inline" action="#" method="get"{{action "resetValues" target="GeocamResponderMaps.NewFileController" }}><button>Back</button></form>
- <form style="display: inline" action="#divModalDialog2" method="get"><button>Next</button></form>
+ <button {{action "modalWinClose" target="GeocamResponderMaps.NewFileController"}}>Back</button>
+ <button {{action "modalWinForm" target="GeocamResponderMaps.NewFileController"}}>Next</button>
</script>
</div>
</div>
-
-<div id="divModalDialog1.1" class="divModalDialog">
+<!-- ALT FIRST DIALOG -->
+<div id="divModalDialogUpload" class="divModalDialog">
<div id="modalInner1" >
<table id="selectFileMethod">
<tr>
<td>
- <a href="#divModalDialog1">From a URL</a>
+ <script type="text/x-handlebars">
+ <a {{action "modalWinUrl" target="GeocamResponderMaps.NewFileController"}}>From a URL</a>
+ </script>
</td>
</tr>
<tr>
@@ -101,21 +113,20 @@
<div id="selectFile">
<script type="text/x-handlebars">
- <input type="file" id="fileButton"></input>
+ <input type="file" id="fileUploadButton" onchange="GeocamResponderMaps.NewFileController.localFileSelect();"></input>
</script>
</div>
<script type="text/x-handlebars">
- <form style="display: inline" action="#" method="get"{{action "resetValues" target="GeocamResponderMaps.NewFileController" }}><button>Back</button></form>
-
- <form style="display: inline" action="#divModalDialog2" method="get"><button>Next</button></form>
+ <button {{action "modalWinClose" target="GeocamResponderMaps.NewFileController"}}>Back</button>
+ <button {{action "modalWinForm" target="GeocamResponderMaps.NewFileController"}}>Next</button>
</script>
</div>
</div>
-
-
-<div id="divModalDialog2" class="divModalDialog">
+
+<!-- SECOND DIALOG -->
+<div id="divModalDialogForm" class="divModalDialog">
<div id="modalInner2" >
<script type="text/x-handlebars">
<table id="metaForm">
@@ -211,8 +222,8 @@
</tr>
</table>
- <form style="display: inline" action="#divModalDialog1" method="get"><button>Back</button></form>
- <button {{action create target="GeocamResponderMaps.NewFileController"}}>Next</button>
+ <button {{action "modalWinUpload" target="GeocamResponderMaps.NewFileController"}}>Back</button>
+ <button {{action "modalWinCloseAndCreate" target="GeocamResponderMaps.NewFileController"}}>Next</button>
</script>
</div>
View
176 js/geocamMaps.js
@@ -5,9 +5,14 @@ GeocamResponderMaps = Em.Application.create({
name: 'Hurricane',
ready: function(){
GeocamResponderMaps.MapController.showMap();
- //document.getElementById('fileButton').addEventListener('change', GeocamResponderMaps.NewFileController.localFileSelect(), false);
+ //document.getElementById('fileUploadButton').addEventListener('change', GeocamResponderMaps.NewFileController.localFileSelect(), false);
+ GeocamResponderMaps.LibController.emptyMapSet();
+ },
+ cancel: function(event) {
+ event.preventDefault();
+ return false;
+ },
- }
});
/**************************
@@ -72,13 +77,14 @@ GeocamResponderMaps.Library = Em.Object.extend({
//defines the Mapset area
GeocamResponderMaps.MapSetView = Ember.View.create({
classNames: ['map_set', 'overlayContainer'],
+ template: Ember.Handlebars.compile('<button>Undo</button><button>Redo</button><button>Save</button>')
}).appendTo('#mapset_canvas');
//defines the library area
GeocamResponderMaps.LibraryView = Ember.View.create({
classNames: ['library', 'overlayContainer'],
- template: Ember.Handlebars.compile('<form style="display: inline" action="#divModalDialog1" method="get"><button>New Layer</button></form>')
+ template: Ember.Handlebars.compile('<button {{action "modalWinUrl" target="GeocamResponderMaps.NewFileController"}}>New Layer</button>')
}).appendTo('#mapsetlib_canvas');
@@ -92,9 +98,11 @@ GeocamResponderMaps.MapSetsLib = Ember.CollectionView.create({
template: Ember.Handlebars.compile("{{content}}"),
attributeBindings: 'draggable',
draggable: 'true',
- doubleClick: function(){
- return GeocamResponderMaps.LibController.addOverlayToMapSet(this.content);
-
+
+ dragStart: function(event) {
+ var dataTransfer = event.originalEvent.dataTransfer;
+ dataTransfer.setData('obj', this.get('content'));
+
}
})
}).appendTo('.library');
@@ -105,30 +113,39 @@ GeocamResponderMaps.MapSets = Ember.CollectionView.create({
tagName: 'ul',
classNames: ['ulList'],
content: Em.A([]),
-
+ //container for each list item
itemViewClass: Ember.View.extend({
- template: Ember.Handlebars.compile('<input type="checkbox" {{action check}}>{{content}}'),
+ template: Ember.Handlebars.compile('<input type="checkbox" {{action displayOverlay}}>{{content}}'),
attributeBindings: 'draggable',
draggable: 'true',
isChecked: false,
- check: function(){
+
+ displayOverlay: function(){
this.isChecked = !this.isChecked;
- //console.log(GeocamResponderMaps.MapSets.content.objectAt(this.contentIndex).externalCopy);
- if(this.isChecked){
- GeocamResponderMaps.MapController.showOverlay(GeocamResponderMaps.MapSets.content.objectAt(this.contentIndex).externalGeoXml);
- }else{
- GeocamResponderMaps.MapController.removeOverlay(GeocamResponderMaps.MapSets.content.objectAt(this.contentIndex).externalGeoXml);
-
- }
+ GeocamResponderMaps.LibController.displayOverlay(this.isChecked, this);
+ },
+ dragEnter: GeocamResponderMaps.cancel,
+ dragOver: GeocamResponderMaps.cancel,
+ dragStart: function(event) {
+ var dataTransfer = event.originalEvent.dataTransfer;
+ dataTransfer.setData('obj', this.get('content'));
+
+ },
+ drop: function(event) {
+ var obj = event.originalEvent.dataTransfer.getData('obj');
+ var index = GeocamResponderMaps.MapSets.content.indexOf(this.get('content'));
+ if(GeocamResponderMaps.MapSets.content.indexOf(obj)>=0)
+ GeocamResponderMaps.MapSets.content.removeAt(GeocamResponderMaps.MapSets.content.indexOf(obj));
+ GeocamResponderMaps.MapSets.content.insertAt(index,obj);
+ GeocamResponderMaps.LibController.emptyMapSet();
+ event.preventDefault();
+ return false;
},
doubleClick: function(){
- if(this.isChecked){
- GeocamResponderMaps.MapController.removeOverlay(GeocamResponderMaps.MapSets.content.objectAt(this.contentIndex).externalGeoXml);
- }
- GeocamResponderMaps.LibController.removeOverlayFromMapSet(this);
-
+ GeocamResponderMaps.LibController.removeOverlayFromMapSet(this);
},
+
})
@@ -159,28 +176,55 @@ GeocamResponderMaps.FormInformation = Em.TextField.extend({
**************************/
GeocamResponderMaps.LibController = Em.ArrayController.create({
contentLib: [],
+ undoStackG: [],
+ undoStackIndexG: -1,
+ UNDO_STACK_MAX_SIZE: 50,
+ dropSpot: GeocamResponderMaps.MapOverlay.create({name: 'DROP HERE'}),
library: GeocamResponderMaps.Library.create({MapOverlays: []}),
updateLibrary: function() {
GeocamResponderMaps.MapSetsLib.content.clear();
GeocamResponderMaps.MapSetsLib.content.pushObjects(this.library.MapOverlays);
},
- addOverlayToMapSet: function(overlay) {
- GeocamResponderMaps.MapSets.content.pushObject(overlay);
+ emptyMapSet: function() {
+ if(GeocamResponderMaps.MapSets.content.length==0)
+ GeocamResponderMaps.MapSets.content.pushObject(this.dropSpot);
+ else
+ if(GeocamResponderMaps.MapSets.content.indexOf(this.dropSpot)>=0)
+ GeocamResponderMaps.MapSets.content.removeAt(GeocamResponderMaps.MapSets.content.indexOf(this.dropSpot));
},
showOverlay: function(that){
console.log("dummy function");
},
removeOverlayFromMapSet: function(that){
- var index = that.valueOf().contentIndex;
- var end = GeocamResponderMaps.MapSets.get('childViews').length;
+ var index = GeocamResponderMaps.MapSets.content.indexOf(that.get('content'));
GeocamResponderMaps.MapSets.content.removeAt(index);
- //updating the variable (contentIndex) that keeps track of their position
- var childs = GeocamResponderMaps.MapSets.get('childViews');
- for(index;index<end;index++){
- childs.objectAt(index).valueOf().contentIndex = index;
+ this.emptyMapSet();
+
+ },
+ displayOverlay: function(isChecked, that){
+ var overlay;
+ if(GeocamResponderMaps.MapSets.content.objectAt(that.contentIndex).external){
+ overlay = GeocamResponderMaps.MapSets.content.objectAt(that.contentIndex).externalGeoXml;
+ console.log('external true');
}
- }
+ else{
+ //this is a default until I get it working
+ var url_end = "?nocache=" + (new Date()).valueOf();
+ var server_root = "http://www.littled.net/exp/";
+ var kmlFile = server_root + "gmap.kml" + url_end;
+ overlay = new GGeoXml(kmlFile);
+ //TODO
+ console.log('external false');
+ }
+ if(isChecked){
+ GeocamResponderMaps.MapController.showOverlay(overlay);
+ }else{
+ GeocamResponderMaps.MapController.removeOverlay(overlay);
+
+ }
+ },
+
});
@@ -204,10 +248,14 @@ GeocamResponderMaps.NewFileController = Em.ArrayController.create({
external: false,
externalGeoXml: '',
create: function(){
- if(this.name == '')
+ if(this.name == ''){
alert('Name must be filled in.');
- else if(!this.acceptTerms)
+ return false;
+ }
+ else if(!this.acceptTerms){
alert('Must accept terms of service.');
+ return false;
+ }
else{
if(!this.externalCopy==''){
this.external = true;
@@ -234,8 +282,7 @@ GeocamResponderMaps.NewFileController = Em.ArrayController.create({
GeocamResponderMaps.LibController.library.add(newOverlay);
GeocamResponderMaps.LibController.updateLibrary();
this.resetValues();
-
- document.location.href = '#';
+ return true;
}
},
@@ -254,17 +301,52 @@ GeocamResponderMaps.NewFileController = Em.ArrayController.create({
this.set('license', '');
this.set('permissions', '');
this.set('acceptTerms', false);
-
+ this.set('external', false);
+ this.set('externalGeoXml', '');
+ document.getElementById('fileUploadButton').value='';
},
- localFileSelect: function(evt) {
- var file = evt.target.fileButton; // FileList object
-
+ localFileSelect: function() {
+ var file = document.getElementById("fileUploadButton").files[0]; // FileList object
+ var type = "application/vnd.google-earth.kml+xml";
+ if(!type==file.type){
+ alert("Please choose a kml file");
+ document.getElementById('fileUploadButton').value='';
+ return ;
+ }
var reader = new FileReader();
-
- // Read in the image file as a data URL.
- // console.log(reader.readAsDataURL(file));
- //console.log(file);
- }
+ localCopy = file;
+
+
+ },
+ modalWinUrl: function() {
+ $( "#divModalDialogUrl" ).dialog({ closeText: '', closeOnEscape: false});
+ $( "#divModalDialogUpload" ).dialog('close');
+ $( "#divModalDialogForm" ).dialog('close');
+ },
+ modalWinUpload: function() {
+ $( "#divModalDialogUpload" ).dialog({ closeText: '', closeOnEscape: false});
+ $( "#divModalDialogUrl" ).dialog('close');
+ $( "#divModalDialogForm" ).dialog('close');
+ },
+ modalWinForm: function() {
+ $( "#divModalDialogForm" ).dialog({ closeText: '', closeOnEscape: false });
+ $( "#divModalDialogUrl" ).dialog('close');
+ $( "#divModalDialogUpload" ).dialog('close');
+ },
+ modalWinClose: function() {
+ $( "#divModalDialogForm" ).dialog('destroy');
+ $( "#divModalDialogUrl" ).dialog('destroy');
+ $( "#divModalDialogUpload" ).dialog('destroy');
+ this.resetValues();
+ },
+ modalWinCloseAndCreate: function() {
+ if(this.create()){
+ $( "#divModalDialogForm" ).dialog('destroy');
+ $( "#divModalDialogUrl" ).dialog('destroy');
+ $( "#divModalDialogUpload" ).dialog('destroy');
+ }
+
+ },
@@ -295,10 +377,18 @@ GeocamResponderMaps.MapController = Em.ArrayController.create({
//geoxml = new GGeoXml(kmlFile);
this.map.addOverlay(geo);
//http://www.littled.net/exp/gmap.kml?nocache=1341509049207
+ //https://developers.google.com/kml/documentation/KML_Samples.kml
+ //http://www.skisprungschanzen.com/EN/Ski+Jumps/USA-United+States/CA-California.kml
+ //http://faculty.cs.wit.edu/~ldeligia/PROJECTS/TCP/StatesPolys/California.kml
+ //http://cordc.ucsd.edu/projects/asbs/asbs_locations.kml
+ //http://www.coolworks.com/listings/placemarks/california.kml
+ //http://www.ca.gov/kml/CSU.kml
},
removeOverlay: function(geo){
this.map.removeOverlay(geo);
}
});
+
+
View
15 style/styles.css
@@ -9,7 +9,7 @@
}
-button, #fileButton{
+button, #fileUploadButton{
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
@@ -46,8 +46,10 @@ button:active {
}
+
+
.overlayContainer{
- width: 440px;
+ width: 400px;
height: 490px;
background: #6a6a6a;
@@ -175,15 +177,14 @@ body input[type='text'] {
/** Modal Window **/
.divModalDialog {
- position:fixed;
+ position: fixed;
top:0;
left:0;
- width:100%;
- height:100%;
+ width:90%;
+ height:90%;
/*! important !*/
display:none;
- /* last attribute set darkness on scale: 0...1.0 */
- background-color:rgba(0,0,0,0.5);
+ background-color:rgba(0,0,0,.5);
text-align:center;
z-index:101;
}

0 comments on commit 7430d54

Please sign in to comment.
Something went wrong with that request. Please try again.