Permalink
Browse files

changed modals from % to fixed size. Added create new button

  • Loading branch information...
1 parent c7218a7 commit a1f37590b1e009485a4f062c62c25648aa713f0f @Gabino3 Gabino3 committed Jul 26, 2012
Showing with 294 additions and 17 deletions.
  1. +1 −1 index.html
  2. +201 −0 js/ajaxfileupload.js
  3. +82 −6 js/geocamMaps.js
  4. +10 −10 style/styles.css
View
@@ -115,7 +115,7 @@
<div id="selectFile">
<script type="text/x-handlebars">
- <input type="file" id="fileUploadButton" onchange="GeocamResponderMaps.NewFileController.localFileSelect();"></input>
+ <input type="file" id="fileUploadButton" name="fileUploadButton" onchange="GeocamResponderMaps.NewFileController.localFileSelect();"></input>
</script>
</div>
<script type="text/x-handlebars">
View
@@ -0,0 +1,201 @@
+
+jQuery.extend({
+
+
+ createUploadIframe: function(id, uri)
+ {
+ //create frame
+ var frameId = 'jUploadFrame' + id;
+ var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
+ if(window.ActiveXObject)
+ {
+ if(typeof uri== 'boolean'){
+ iframeHtml += ' src="' + 'javascript:false' + '"';
+
+ }
+ else if(typeof uri== 'string'){
+ iframeHtml += ' src="' + uri + '"';
+
+ }
+ }
+ iframeHtml += ' />';
+ jQuery(iframeHtml).appendTo(document.body);
+
+ return jQuery('#' + frameId).get(0);
+ },
+ createUploadForm: function(id, fileElementId, data)
+ {
+ //create form
+ var formId = 'jUploadForm' + id;
+ var fileId = 'jUploadFile' + id;
+ var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
+ if(data)
+ {
+ for(var i in data)
+ {
+ jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
+ }
+ }
+ var oldElement = jQuery('#' + fileElementId);
+ var newElement = jQuery(oldElement).clone();
+ jQuery(oldElement).attr('id', fileId);
+ jQuery(oldElement).before(newElement);
+ jQuery(oldElement).appendTo(form);
+
+
+
+ //set attributes
+ jQuery(form).css('position', 'absolute');
+ jQuery(form).css('top', '-1200px');
+ jQuery(form).css('left', '-1200px');
+ jQuery(form).appendTo('body');
+ return form;
+ },
+
+ ajaxFileUpload: function(s) {
+ // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
+ s = jQuery.extend({}, jQuery.ajaxSettings, s);
+ var id = new Date().getTime()
+ var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
+ var io = jQuery.createUploadIframe(id, s.secureuri);
+ var frameId = 'jUploadFrame' + id;
+ var formId = 'jUploadForm' + id;
+ // Watch for a new set of requests
+ if ( s.global && ! jQuery.active++ )
+ {
+ jQuery.event.trigger( "ajaxStart" );
+ }
+ var requestDone = false;
+ // Create the request object
+ var xml = {}
+ if ( s.global )
+ jQuery.event.trigger("ajaxSend", [xml, s]);
+ // Wait for a response to come back
+ var uploadCallback = function(isTimeout)
+ {
+ var io = document.getElementById(frameId);
+ try
+ {
+ if(io.contentWindow)
+ {
+ xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
+ xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
+
+ }else if(io.contentDocument)
+ {
+ xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
+ xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
+ }
+ }catch(e)
+ {
+ jQuery.handleError(s, xml, null, e);
+ }
+ if ( xml || isTimeout == "timeout")
+ {
+ requestDone = true;
+ var status;
+ try {
+ status = isTimeout != "timeout" ? "success" : "error";
+ // Make sure that the request was successful or notmodified
+ if ( status != "error" )
+ {
+ // process the data (runs the xml through httpData regardless of callback)
+ var data = jQuery.uploadHttpData( xml, s.dataType );
+ // If a local callback was specified, fire it and pass it the data
+ if ( s.success )
+ s.success( data, status );
+
+ // Fire the global callback
+ if( s.global )
+ jQuery.event.trigger( "ajaxSuccess", [xml, s] );
+ } else
+ jQuery.handleError(s, xml, status);
+ } catch(e)
+ {
+ status = "error";
+ jQuery.handleError(s, xml, status, e);
+ }
+
+ // The request was completed
+ if( s.global )
+ jQuery.event.trigger( "ajaxComplete", [xml, s] );
+
+ // Handle the global AJAX counter
+ if ( s.global && ! --jQuery.active )
+ jQuery.event.trigger( "ajaxStop" );
+
+ // Process result
+ if ( s.complete )
+ s.complete(xml, status);
+
+ jQuery(io).unbind()
+
+ setTimeout(function()
+ { try
+ {
+ jQuery(io).remove();
+ jQuery(form).remove();
+
+ } catch(e)
+ {
+ jQuery.handleError(s, xml, null, e);
+ }
+
+ }, 100)
+
+ xml = null
+
+ }
+ }
+ // Timeout checker
+ if ( s.timeout > 0 )
+ {
+ setTimeout(function(){
+ // Check to see if the request is still happening
+ if( !requestDone ) uploadCallback( "timeout" );
+ }, s.timeout);
+ }
+ try
+ {
+
+ var form = jQuery('#' + formId);
+ jQuery(form).attr('action', s.url);
+ jQuery(form).attr('method', 'POST');
+ jQuery(form).attr('target', frameId);
+ if(form.encoding)
+ {
+ jQuery(form).attr('encoding', 'multipart/form-data');
+ }
+ else
+ {
+ jQuery(form).attr('enctype', 'multipart/form-data');
+ }
+ jQuery(form).submit();
+
+ } catch(e)
+ {
+ jQuery.handleError(s, xml, null, e);
+ }
+
+ jQuery('#' + frameId).load(uploadCallback );
+ return {abort: function () {}};
+
+ },
+
+ uploadHttpData: function( r, type ) {
+ var data = !type;
+ data = type == "xml" || data ? r.responseXML : r.responseText;
+ // If the type is "script", eval it in global context
+ if ( type == "script" )
+ jQuery.globalEval( data );
+ // Get the JavaScript object, if JSON is used.
+ if ( type == "json" )
+ eval( "data = " + data );
+ // evaluate scripts within html
+ if ( type == "html" )
+ jQuery("<div>").html(data).evalScripts();
+
+ return data;
+ }
+})
+
View
@@ -187,7 +187,7 @@ GeocamResponderMaps.MapSetView = Ember.View.create({
*/
GeocamResponderMaps.MapSetView = Ember.View.create({
classNames: ['map_set', 'overlayContainer'],
- template: Ember.Handlebars.compile('<button id="undo" {{action "undo" target="GeocamResponderMaps.LibController"}}>Undo</button><button id="redo" {{action "redo" target="GeocamResponderMaps.LibController"}}>Redo</button><button id="save" {{action "save" target="GeocamResponderMaps.LibController"}} >Save</button><button id="load" {{action "load" target="GeocamResponderMaps.LibController"}} >Load</button>')
+ template: Ember.Handlebars.compile('<button id="undo" {{action "undo" target="GeocamResponderMaps.LibController"}}>Undo</button><button id="redo" {{action "redo" target="GeocamResponderMaps.LibController"}}>Redo</button><button id="save" {{action "save" target="GeocamResponderMaps.LibController"}} >Save</button><button id="load" {{action "load" target="GeocamResponderMaps.LibController"}} >Load</button><button id="load" {{action "showOverlay" target="GeocamResponderMaps.LibController"}} >Create New</button>')
}).appendTo('#mapset_canvas');
@@ -387,6 +387,7 @@ GeocamResponderMaps.FileURLTextField = Em.TextField.extend({
GeocamResponderMaps.DropHere = Ember.View.create({
classNames: ['DropHere'],
+ attributeBindings: ['display'],
template: Ember.Handlebars.compile('<h3>Drop Here</h3>'),
dragEnter: GeocamResponderMaps.cancel,
dragOver: GeocamResponderMaps.cancel,
@@ -487,11 +488,15 @@ GeocamResponderMaps.LibController = Em.ArrayController.create({
// });
},
- load: function(){
+ loadChoose: function(){
+
+ },
+ load: function(mapset){ //this loads mapsets
library = this.library;
$.get(GeocamResponderMaps.HOST+'map/alice/hurricane-irene-2011.json', function(data){
- console.log(library);
+ console.log(data)
+ //console.log(JSON.dumps(data.json));
var overlayIndex;
var numOfErrors = 0;
@@ -712,6 +717,7 @@ GeocamResponderMaps.NewFileController = Em.ArrayController.create({
external: false,
externalGeoXml: '',
metaUrl: '',
+ file: null,
createPrep: function(){
var metaUrl;
var externalCopy = this.externalCopy;
@@ -824,18 +830,81 @@ GeocamResponderMaps.NewFileController = Em.ArrayController.create({
document.getElementById('fileUploadButton').value='';
},
localFileSelect: function() {
- var file = document.getElementById("fileUploadButton").files[0]; // FileList object
+ this.file = document.getElementById("fileUploadButton").files[0]; // FileList object
var type = "application/vnd.google-earth.kml+xml";
- if(!type==file.type){
+ if(!type==this.file.type){
alert("Please choose a kml file");
document.getElementById('fileUploadButton').value='';
return ;
}
var reader = new FileReader();
- localCopy = file;
+ localCopy = this.file;
},
+ fileUpload: function() {
+ //starting setting some animation when the ajax starts and completes
+ /* $("#loading")
+ .ajaxStart(function(){
+ $(this).show();
+ })
+ .ajaxComplete(function(){
+ $(this).hide();
+ });
+ */
+
+ /*
+ prepareing ajax file upload
+ url: the url of script file handling the uploaded files
+ fileElementId: the file type of input element id and it will be the index of $_FILES Array()
+ dataType: it support json, xml
+ secureuri:use secure protocol
+ success: call back function when the ajax complete
+ error: callback function when the ajax failed
+
+ */
+ /* $.ajaxFileUpload
+ (
+ {
+ url:'',
+ secureuri:false,
+ fileElementId:'fileUploadButton',
+ dataType: 'json',
+ success: function (data, status)
+ {
+ if(typeof(data.error) != 'undefined')
+ {
+ if(data.error != '')
+ {
+ alert(data.error);
+ }else
+ {
+ alert(data.msg);
+ }
+ }
+ },
+ error: function (data, status, e)
+ {
+ alert(e);
+ }
+ }
+ )*/
+
+ $.ajax({
+ url: GeocamResponderMaps.HOST+'layer/new/',
+ data: data,
+ cache: false,
+ contentType: false,
+ processData: false,
+ type: 'POST',
+ success: function(data){
+ alert(data);
+ }
+ });
+
+ return false;
+
+ },
modalWinUrl: function() {
$( "#divModalDialogUrl" ).dialog({ closeText: '', closeOnEscape: false});
$( "#divModalDialogUpload" ).dialog('close');
@@ -849,6 +918,13 @@ GeocamResponderMaps.NewFileController = Em.ArrayController.create({
modalWinForm: function() {
if(this.externalCopy != '')
this.createPrep();
+ else if(this.file != null)
+ console.log('');// this.fileUpload();
+ else{
+ alert('You need a file or a url.');
+ return false;
+ }
+
$( "#divModalDialogForm" ).dialog({ closeText: '', closeOnEscape: false });
$( "#divModalDialogUrl" ).dialog('close');
$( "#divModalDialogUpload" ).dialog('close');
Oops, something went wrong.

0 comments on commit a1f3759

Please sign in to comment.