var EditorRouter = Backbone.Router.extend({ init: false, currentEdit: null, experience: null, isKeyInit: false, routes : { "editor/tour/edit/id/:id(/*rest)" : "editTour", "editor/poi/edit/id/:id(/*rest)" : "editPoi", "editor/net/edit/id/:id(/*rest)" : "editNet", "editor/net-tour/edit/id/:id(/*rest)" : "editNetTour", "editor/cache/edit/id/:id(/*rest)" : "editCache", "editor/cache-tour/edit/id/:id(/*rest)" : "editCacheTour", "editor/tour/add" : "addTour", "editor/poi/add" : "addPoi", "editor/poi(/*rest)" : "showPois", "editor/cache(/*rest)" : "showCaches", "editor/tour(/*rest)" : "showTouren", "editor/cache/add" : "addCache", "editor/cache-tour/add" : "addCacheTour", }, addTour: function(showOtherExperiences) { var that = this; that.addPoint('tour', false); }, showPois: function() { application.controller.experience.loadUserExperiences('experience', 'mainType,type,trackpoints,position,extra', function(experiences) { application.controller.map.options.experienceMode = 'full'; application.controller.map.drawExperiences(experiences); application.controller.map.options.experienceMode = 'marker'; $.each(experiences, function() { if (this.mainType.id == 1101 && this.extra && this.extra['geocaching-board-number']) { $('.experience-icon', this.mapElement._icon).text(this.extra['geocaching-board-number']) } }) }); this._initSearchName(); $('#btn-experience-add').click(function() { var href = $(this).attr('href'); var lat = application.controller.map.map.getCenter().lat; var lon = application.controller.map.map.getCenter().lng; var zoom = application.controller.map.map.getZoom(); href = href + '?lat=' + lat + '&lon=' + lon + '&zoom=' + zoom + '&fit=false&new=true'; $(this).attr('href', href); }); }, showCaches: function() { application.controller.experience.loadUserExperiences('cache', 'mainType,type,position,extra', function(experiences) { application.controller.map.options.experienceMode = 'marker'; application.controller.map.drawExperiences(experiences); $.each(experiences, function() { if (this.mainType.id == 1101 && this.extra && this.extra['geocaching-board-number']) { $('.experience-icon', this.mapElement._icon).text(this.extra['geocaching-board-number']) } }) }); this._initSearchName(); $('#btn-experience-add').click(function() { var href = $(this).attr('href'); var lat = application.controller.map.map.getCenter().lat; var lon = application.controller.map.map.getCenter().lng; var zoom = application.controller.map.map.getZoom(); href = href + '?lat=' + lat + '&lon=' + lon + '&zoom=' + zoom + '&fit=false&new=true'; $(this).attr('href', href); }); }, showTouren: function() { application.controller.experience.loadUserExperiences('tour', 'type,mainType,trackpoints,position', function(experiences) { application.controller.map.options.experienceMode = 'full'; application.controller.map.drawExperiences(experiences); }); this._initSearchName(); }, addPoi: function(showOtherExperiences) { var that = this; if ($.getUrlVar('showOther') == 'false') { showOtherExperiences = false; } that.addPoint('poi', showOtherExperiences, 'experience'); }, addCache: function(showOtherExperiences) { var that = this; that.addPoint('cache', showOtherExperiences, 'cache'); }, addCacheTour: function(showOtherExperiences) { var that = this; that.addPoint('cacheTour', false); }, addPoint: function(type, showOtherExperiences, otherType) { var that = this; application.controller.map.options.experienceMode = 'marker'; application.controller.map.options.symbolizer.icon.marker[type].draggable = true; $('#abs-map-nav .js-edit').hide(); that.initEdit('media'); if (showOtherExperiences !== false) { application.controller.experience.loadUserExperiences(otherType, 'mainType,type,trackpoints,position', function(experiences) { application.controller.map.options.experienceMode = 'full'; application.controller.map.drawExperiences(experiences); application.controller.map.options.experienceMode = 'marker'; }); } }, editExperience: function() { var that = this; var hash = location.hash; if (hash !== '') { selectEditTab(hash.substr(1)); } application.controller.map.options.symbolizer.icon.image.draggable = true; $('#' + application.controller.map.options.containerId).droppable({ drop: function(event, ui) { that.initEdit('media'); var offset = $('#' + application.controller.map.options.containerId).offset(); var latLng = application.controller.map.map.containerPointToLatLng([ui.offset.left - offset.left + $(ui.draggable).width()/2, ui.offset.top- offset.top + $(ui.draggable).height()/2]); imageId = $(ui.draggable).parent().attr('data'); application.controller.map.setExperienceImagePosition(that.experience, imageId, latLng); } }); var edit = application.controller.cookie.getStorage('edit.mode', 'trackpoints'); that.initEdit(edit); this._initSearchName(); }, editPoi : function(id, rest) { var that = this; that.addPoi(false); that.editExperience(); application.controller.experience.loadExperiences(id, 'type,position,mainType,subTypes,images,extra', function(experiences) { that.experience = experiences[0]; application.controller.map.drawExperiences([that.experience]); if (that.experience.mainType.id == 1101 && that.experience.extra && that.experience.extra['geocaching-board-number']) { $('.experience-icon', that.experience.mapElement._icon).text(that.experience.extra['geocaching-board-number']) } if (that.experience.mainType.length == 0) { openExperienceTypeSelector('AbsPoi'); } }); }, editCache : function(id, rest) { var that = this; that.addCache(false); that.editExperience(); application.controller.map.drawFakepoints([{fakepoints:$('#fakepoints').val()}]); application.controller.experience.loadExperiences(id, 'type,position,mainType,subTypes,images', function(experiences) { that.experience = experiences[0]; application.controller.map.drawExperiences([that.experience]); }); }, editCacheTour : function(id, rest) { var that = this; that.addCacheTour(false); that.editExperience(); application.controller.experience.loadExperiences(id, 'type,position,mainType,subTypes,images', function(experiences) { that.experience = experiences[0]; if (application.options.experience.entries.length == 0) { application.controller.map.drawExperiences([that.experience]); } }); if (application.options.experience.entries.length > 0) { drawCacheTour(application.options.experience); $('#edit-cache-tour tbody.sortable').sortable({ change: function() { getOrderFromTable(application.options.experience); $('#edit-cache-tour #entries').val(JSON.stringify(application.options.experience.entries)); drawCacheTour(application.options.experience, {fitBounds: false}); }, update: function() { getOrderFromTable(application.options.experience); $('#edit-cache-tour #entries').val(JSON.stringify(application.options.experience.entries)); } }).disableSelection(); $('#edit-cache-tour #entries').val(JSON.stringify(application.options.experience.entries)); } }, editTour : function(id, rest) { var that = this; //application.controller.map.options.symbolizer.icon.routing.draggable = true; that.editExperience(); that._setChangesCheck(); application.controller.map.setTrackMode('underground'); application.controller.experience.loadExperiences(id, 'user,type,mainType,trackpoints,routingpoints,position,images', function(experiences) { that.experience = experiences[0]; application.controller.map.drawExperiences([that.experience]); if (that.experience.mainType.length == 0) { openExperienceTypeSelector('AbsTour'); } var track = that.experience.track; var bounds = {north:track.NORTH, south:track.SOUTH, east:track.EAST, west:track.WEST}; application.controller.experience.loadPoisInBounds(bounds, true, function(experiences) { application.controller.map.setExperienceMode('marker'); application.controller.map.nextFitBounds = false; application.controller.map.userId = that.experience.user.id; application.controller.map.showUserOpacity = true; application.controller.map.drawExperiences(experiences, false); application.controller.map.layers.marker.blocked = true; application.controller.map.setExperienceMode('full'); }); application.controller.experience.addProfile(that.experience.track, $('#abs-map-profile-wrapper'), application.controller.map); }); if (application.controller.cookie.getStorage('map.fullscreen', false)) { application.controller.map.toggleFullscreen(); } that.initKeys(); }, editNetTour : function(id, rest) { var that = this; //application.controller.map.options.symbolizer.icon.routing.draggable = true; that._setChangesCheck(); $('#abs-map-funcs .js-add-trackpoints').hide(); $('#abs-map-funcs .js-func-simplify').hide(); $('#abs-map-funcs .js-func-srtm').hide(); $('#abs-map-funcs .js-func-reverse').hide(); $('#abs-map-funcs .js-func-version').hide(); that.editExperience(); application.controller.map.setTrackMode('underground'); application.controller.experience.loadExperiences(id, 'user,data,type,mainType,experiences,routingpoints,position,images', function(experiences) { that.experience = experiences[0]; if (that.experience.mainType.length == 0) { openExperienceTypeSelector('AbsTour'); } var ids = []; $.each (that.experience.experiences, function(i, exp) { ids.push(exp.id); }); application.controller.experience.loadExperiences(ids.join(','), 'user,type,mainType,trackpoints', function(experiences) { that.experience.experiences = experiences; $.each(experiences, function(i, e) { e.hasNetTour = true; e.netTour = that.experience; }); application.controller.experience.setTrackpointsToNetTour(that.experience); application.controller.experience.updateTrackInfos([that.experience]); application.controller.map.drawExperiences(that.experience.experiences); application.controller.experience.addProfile(that.experience.track, $('#abs-map-profile-wrapper'), application.controller.map); var track = that.experience.track; var bounds = {north:track.NORTH, south:track.SOUTH, east:track.EAST, west:track.WEST}; application.controller.experience.loadPoisInBounds(bounds, true, function(experiences) { application.controller.map.setExperienceMode('marker'); application.controller.map.nextFitBounds = false; application.controller.map.userId = that.experience.user.id; application.controller.map.showUserOpacity = true; application.controller.map.drawExperiences(experiences, false); application.controller.map.layers.marker.blocked = true; application.controller.map.setExperienceMode('full'); }); }); }); if (application.controller.cookie.getStorage('map.fullscreen', false)) { application.controller.map.toggleFullscreen(); } that.initKeys(); }, editNet : function(id, rest) { var that = this; //application.controller.map.options.symbolizer.icon.routing.draggable = true; application.controller.map.options.hoverTour = true; application.controller.map.options.disableMarker = true; that.editExperience(); application.controller.map.setTrackMode('underground'); application.controller.experience.loadExperiences(id, 'user,type,mainType,experiences,images', function(experience) { that.experience = experience[0]; var ids = []; $.each(that.experience.experiences, function() { ids.push(this.id); }); application.controller.experience.loadExperiences(ids.join(','), 'user,type,mainType,trackpoints', function(experiences) { that.experience.experiences = experiences; application.controller.map.drawExperiences(that.experience.experiences); application.controller.experience.updateTrackInfos(that.experience.experiences); }); }); if (application.controller.cookie.getStorage('map.fullscreen', false)) { application.controller.map.toggleFullscreen(); } that.initKeys(); }, _setChangesCheck: function() { window.onbeforeunload = function() { var hasChanges = application.controller.experience.hasChanges; if (hasChanges) { return "Es existieren noch ungespeicherte Änderungen an der Strecke"; } }; }, _onEditUndergroundKeypress: function(e) { var that = application.router.editor; if ($("input:focus").length > 0 || $("textarea:focus").length) { return; } if (e.keyCode == 84 && that.currentEdit !== 'trackpoints') { //t application.controller.map.drawUnderground(false); that.initEdit('trackpoints'); } else if ((e.keyCode >= 49 && e.keyCode <= 54) || e.keyCode == 48) { // 1-5 + 0 if (that.currentEdit !== 'underground') { that.initEdit('underground'); } var c = e.keyCode - 48; if (c == 0) { c = 10; } application.controller.map.drawUnderground(c); } else if (e.keyCode == 27) { //ESC application.controller.map.drawUnderground(false); } else if (e.keyCode == 82) { // r if (that.currentEdit !== 'routing') { that.initEdit('routing'); } else { application.controller.routing.addCrossover(); } } else if (e.keyCode == 87) { // w if (that.currentEdit !== 'routing') { that.initEdit('routing'); } else { application.controller.map.drawRouting(256); } } else if (e.keyCode == 70) { // f application.controller.local.toggleLayer(); } }, _onMapMouseover: function() { var that = application.router.editor; if (!that.isKeyInit) { $(document).bind('keydown', that._onEditUndergroundKeypress); that.isKeyInit = true; } }, _onMapMouseout: function(e) { if ($(e.toElement).parents('#abs-map').length == 0) { var that = application.router.editor; $(document).unbind('keydown', that._onEditUndergroundKeypress); that.isKeyInit = false; } }, _initSearchName: function() { $("#searchName").keyup(function(event){ if(event.keyCode == 13){ var url = location.href; if (url.indexOf('/index') === -1) { url += '/index'; } url = url.split('/'); var val = $('#searchName').val(); var found = false; for (var i = 0; i < url.length; i++) { var part = url[i]; if (part == 'name') { url[i+1] = val; found = true; } } if (!found) { url.push('name'); url.push(val); } location.href = url.join('/'); } }); }, initEdit: function(edit) { var that = this; if (edit !== that.currentEdit) { var e = jQuery.Event("keydown"); e.which = 27; // # Some key code value e.keyCode = 27; $(document).trigger(e); if (that.init) { if (that.currentEdit == 'trackpoints') { that.reinitEditTrackpoints(); } if (that.currentEdit == 'routing') { that.reinitEditRouting(); } if (that.currentEdit == 'underground') { that.reinitEditUnderground(); } if (that.currentEdit == 'media') { that.reinitEditMedia(); } } if (edit == 'trackpoints') { that.initEditTrackpoints(); } if (edit == 'routing') { that.initEditRouting(); } if (edit == 'underground') { that.initEditUnderground(); } if (edit == 'media') { that.initEditMedia(); } if (that.init) { application.controller.map.nextFitBounds = false; if (that.experience.type !== 'net' && that.experience.type !== 'net-tour') { application.controller.map.drawExperiences([that.experience]); } else { application.controller.map.drawExperiences(that.experience.experiences); } } $('#abs-map-nav .add').hide(); $('#abs-map-nav .add.' + edit).show(); $('#abs-map-nav .js-edit .navi-item').removeClass('active'); $('#abs-map-nav .js-edit .' + edit).addClass('active'); that.init = true; that.currentEdit = edit; application.controller.cookie.setStorage('edit.mode', edit); } }, initEditUnderground: function() { }, reinitEditUnderground: function() { }, initEditTrackpoints: function() { application.controller.map.editing = true; application.controller.map.trackMode = 'underground'; }, reinitEditTrackpoints: function() { application.controller.map.editing = false; }, initEditRouting: function() { application.controller.map.showRouting = true; application.controller.map.editRouting = true; application.controller.map.trackMode = 'underground'; application.controller.map.showDirection = true; }, reinitEditRouting: function() { application.controller.map.showRouting = false; application.controller.map.editRouting = false; application.controller.map.showDirection = false; }, initEditMedia: function() { application.controller.map.showMedia = true; application.controller.map.trackMode = 'underground'; }, reinitEditMedia: function() { application.controller.map.showMedia = false; }, initKeys: function() { var that = this; $('#' + application.controller.map.options.containerId).bind('mouseover', that._onMapMouseover); $('#' + application.controller.map.options.containerId).bind('mouseout', that._onMapMouseout); } }); $(document).ready(function() { application.addRouter('editor', new EditorRouter()); }); $.extend({ getUrlVars : function() { var vars = [], hash; var hashes = window.location.href.slice( window.location.href.indexOf('?') + 1).split('&'); for ( var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; }, getUrlVar : function(name) { return $.getUrlVars()[name]; } });