Skip to content
Browse files

create multiple sidebar templates, get basics of edit mode working

  • Loading branch information...
1 parent a87dc06 commit 92b8abe808bbcb4a46441fe985f873788013770a @bmcmahen committed Mar 26, 2013
View
656 trailmix/client/scripts/editSidebar.js
@@ -1,330 +1,330 @@
-(function(){
-
- var global = this;
-
- // Take an array of features, and insert them into the database
- // with the currentTrail _id as the trail attribute. This should
- // update our trail automatically.
- var createFeatures = function(json){
- _.each(json, function(feature, i){
- _.extend(feature, {trail : Session.get('currentTrail')});
- Features.insert(feature);
- }, this);
- };
-
-
- // EDIT SIDEBAR TEMPLATE
- Template.editSidebar.helpers({
-
- trail : function() {
- var current = Session.get('currentTrail');
- return current && Trails.findOne(current);
- },
-
- features : function() {
- var currentTrail = Session.get('currentTrail');
- return currentTrail && Features.find({ trail : currentTrail });
- },
-
- featuresTab : function() {
- return Session.equals('tabView', 'features');
- },
-
- descriptionTab : function() {
- return Session.equals('tabView', 'description');
- },
-
- addFeaturesTab : function() {
- return Session.equals('tabView', 'addFeatures');
- },
-
- editingFeature: function(){
- return Features.findOne(Session.get('editingFeature'));
- }
-
- });
-
- Template.editSidebar.created = function() {
- Session.set('tabView', 'description');
- };
-
- Template.editSidebar.rendered = function() {
- // Meteor doesn't handle universal events very well,
- // so we handle them here.
- $(window).on('dragover', function(e){
- e.preventDefault();
- $('#features').addClass('dragover');
- });
-
- $(window).on('dragleave', function(e){
- $('#features').removeClass('dragover');
- });
-
- $(window).on('drop', function(e){
- e.preventDefault();
- });
- };
-
- var parseGPXFiles = function(files){
- if (!files || !window.FileReader) return;
-
- // XXX Make sure our browser supports the FIleReader
- // ... i.e., not IE < 10 (hah)
- var reader = new FileReader();
- reader.onload = function(e){
- var util = Trailmix.Utils;
- util.GPXtoGeoJSON(e.target.result, function(json){
- createFeatures(json);
- });
- };
-
- reader.readAsText(files[0]);
- };
-
- Template.editSidebar.events({
-
- 'dragover #features' : function(e, t) {
- e.preventDefault();
- $(e.currentTarget).addClass('dragover');
- },
-
- 'click .upload': function(e, t){
- $('#upload-field').trigger('click');
- },
-
- 'change #upload-field': function(e, t){
- parseGPXFiles(e.currentTarget.files);
- },
-
- 'dragleave #features' : function(e, t) {
- $(e.currentTarget).removeClass('dragover');
- },
-
- // Converts a GPX file and inserts it into the currently
- // selected trail.
- 'drop #features' : function(e, t) {
- e.preventDefault();
- $(e.currentTarget).removeClass('dragover');
-
- var files = e.dataTransfer.files;
- parseGPXFiles(files);
- },
-
- // Update trail name & description
- 'submit #trail-metadata' : function(e, t) {
-
- e.preventDefault();
-
- var name = t.find('.trail-name').value,
- desc = t.find('#trail-description').value;
-
- Trails.update({_id: this._id}, {'$set' : {
- name: name,
- description: desc
- }});
-
- return false;
- },
-
- 'submit #feature-form' : function(e, t){
- var name = t.find('.name').value
- , desc = t.find('.description').value;
-
- Features.update({_id: this._id}, {'$set' : {
- 'properties.name' : name,
- 'properties.description' : desc
- }});
-
- Session.set('editingFeature', null);
- },
-
- // TabView -> Description
- 'click .description' : function(){
- Session.set('tabView', 'description');
- return false;
- },
-
- // TabView -> Features
- 'click .features' : function(){
- Session.set('tabView', 'features');
- return false;
- },
-
- 'click .add-features' : function(){
- Session.set('tabView', 'addFeatures');
- return false;
- },
-
- 'click #add-line' : function(){
- Trailmix.map.addDrawingControls();
- return false;
- },
-
- 'click #add-point' : function(){
- console.log('add point');
- return false;
- },
-
- // Trigger autocomplete
- 'input textarea' : function(e){
-
-
- this.endTagging = function(){
- delete this.start;
- delete this.end;
- this.tagging = false;
- console.log('end tagging');
- Session.set('taggingQuery', null);
- };
-
- // Behaviour is different when
- // (1) we are starting at the beginning of the textarea. Our index
- // is one ahead.
- // (2) we place n @ after the fact, directly before a letter.
- // Build for the typical user interaction:
- // - space + @
-
- if (this.tagging){
-
- var currentPos = this.textarea.selectionStart;
-
- if ((currentPos - this.start) < 0){
- this.endTagging();
- return;
- }
-
- if (typeof this.start === 'undefined')
- this.start = currentPos;
-
- if (this.start === 0)
- this.textarea.selectionStart = 1;
- else if (this.textarea.value.charAt(this.start) === '@') {
- this.start += 1;
- }
-
- // if we've started inputting text before the @ or after our
- // end point (by more than one space) then we assume that
- // tagging has finished.
- if (currentPos > this.end + 1 || currentPos < this.start) {
- this.endTagging();
- return;
- }
-
- // if we don't have an end position, or our currentPos is greater
- // than our endPos, we set our endPos to our currentPos
- if (!this.end || currentPos > this.end) {
- this.end = this.textarea.selectionStart + 1;
- }
-
- // If we are selecting/deleting part of our tag, update our
- // end position accordingly.
- if (this.selectionLength > 0){
- if (this.key === 8 || this.key === 46) {
- if (this.end - selectionLength === 0) this.endTagging();
- this.end -= selectionLength;
- }
- else {
- if ((this.end - (selectionLength - 1)) <= 1) this.endTagging();
- this.end -= selectionLength - 1;
- }
- }
- // otherwise, if our currentPosition is less than our endPos and we are
- // entering text, then we need to increment our endPos
- else if (currentPos < this.end && currentPos > this.start) {
- // unless we are deleting, and then we need to decrement our endPos
- if (this.key === 8 || this.key === 46) this.end -= 1;
- else if (currentPos + 1 < this.end){
- console.log(currentPos, this.end);
- this.end += 1;
- }
- }
-
- var query = this.textarea.value.substring(this.start, this.end + 1);
- console.log(query);
- Session.set('taggingQuery', this.query);
- }
-
- },
-
- 'keydown textarea' : function(e){
- this.key = e.which;
- this.selectionLength = null;
- // If tagging, record our selection length
- if (!this.textarea)
- this.textarea = document.getElementById('trail-description');
-
- if (this.tagging){
- this.selectionLength = this.textarea.selectionEnd - this.textarea.selectionStart;
- }
-
- // @symbol
- if (e.shiftKey && e.which === 50){
- if (this.tagging) this.endTagging();
- this.tagging = true;
- }
-
-
- },
-
- 'click .back' : function(){
- Session.set('editingFeature', null);
- },
-
-
- 'click .trailorigin' : function(e, t){
- console.log('hi??');
- Session.set('promptInput', 'selectTrailhead');
- },
-
- 'click .btn-back': function(e, t){
- Session.set('mapView', 'browse');
- return false;
- }
-
- });
-
- Template.editSidebar.destroyed = function(){
- $(window).off('dragover, dragleave, drop');
- };
-
- // FEATURE TEMPLATE
- Template.feature.events({
-
- // remove a feature
- 'click .delete' : function(e, t) {
- Features.remove(this._id);
- },
-
- // edit the selected feature in the map
- 'click .edit' : function(e, t) {
- Session.set('editingFeature', this._id);
- Trailmix.map.editFeature(this);
- },
-
- // enter editing mode
- 'click .edit-trail' : function(e, t) {
- Session.set('isEditing', true);
- },
-
- 'click .feature-instance' : function(e, t){
- Session.set('selectedFeature', this._id);
- Trailmix.map.highlightFeature(this._id);
- }
-
- });
-
- Template.feature.helpers({
-
- // highlight the currently selected feature
- selected: function(){
- return Session.equals('selectedFeature', this._id);
- }
-
- });
-
- Template.feature.preserve({
- 'img[id]': function(node) { return node.id; }
- });
+// (function(){
+
+// var global = this;
+
+// // Take an array of features, and insert them into the database
+// // with the currentTrail _id as the trail attribute. This should
+// // update our trail automatically.
+// var createFeatures = function(json){
+// _.each(json, function(feature, i){
+// _.extend(feature, {trail : Session.get('currentTrail')});
+// Features.insert(feature);
+// }, this);
+// };
+
+
+// // EDIT SIDEBAR TEMPLATE
+// Template.editSidebar.helpers({
+
+// trail : function() {
+// var current = Session.get('currentTrail');
+// return current && Trails.findOne(current);
+// },
+
+// features : function() {
+// var currentTrail = Session.get('currentTrail');
+// return currentTrail && Features.find({ trail : currentTrail });
+// },
+
+// featuresTab : function() {
+// return Session.equals('tabView', 'features');
+// },
+
+// descriptionTab : function() {
+// return Session.equals('tabView', 'description');
+// },
+
+// addFeaturesTab : function() {
+// return Session.equals('tabView', 'addFeatures');
+// },
+
+// editingFeature: function(){
+// return Features.findOne(Session.get('editingFeature'));
+// }
+
+// });
+
+// Template.editSidebar.created = function() {
+// Session.set('tabView', 'description');
+// };
+
+// Template.editSidebar.rendered = function() {
+// // Meteor doesn't handle universal events very well,
+// // so we handle them here.
+// $(window).on('dragover', function(e){
+// e.preventDefault();
+// $('#features').addClass('dragover');
+// });
+
+// $(window).on('dragleave', function(e){
+// $('#features').removeClass('dragover');
+// });
+
+// $(window).on('drop', function(e){
+// e.preventDefault();
+// });
+// };
+
+// var parseGPXFiles = function(files){
+// if (!files || !window.FileReader) return;
+
+// // XXX Make sure our browser supports the FIleReader
+// // ... i.e., not IE < 10 (hah)
+// var reader = new FileReader();
+// reader.onload = function(e){
+// var util = Trailmix.Utils;
+// util.GPXtoGeoJSON(e.target.result, function(json){
+// createFeatures(json);
+// });
+// };
+
+// reader.readAsText(files[0]);
+// };
+
+// Template.editSidebar.events({
+
+// 'dragover #features' : function(e, t) {
+// e.preventDefault();
+// $(e.currentTarget).addClass('dragover');
+// },
+
+// 'click .upload': function(e, t){
+// $('#upload-field').trigger('click');
+// },
+
+// 'change #upload-field': function(e, t){
+// parseGPXFiles(e.currentTarget.files);
+// },
+
+// 'dragleave #features' : function(e, t) {
+// $(e.currentTarget).removeClass('dragover');
+// },
+
+// // Converts a GPX file and inserts it into the currently
+// // selected trail.
+// 'drop #features' : function(e, t) {
+// e.preventDefault();
+// $(e.currentTarget).removeClass('dragover');
+
+// var files = e.dataTransfer.files;
+// parseGPXFiles(files);
+// },
+
+// // Update trail name & description
+// 'submit #trail-metadata' : function(e, t) {
+
+// e.preventDefault();
+
+// var name = t.find('.trail-name').value,
+// desc = t.find('#trail-description').value;
+
+// Trails.update({_id: this._id}, {'$set' : {
+// name: name,
+// description: desc
+// }});
+
+// return false;
+// },
+
+// 'submit #feature-form' : function(e, t){
+// var name = t.find('.name').value
+// , desc = t.find('.description').value;
+
+// Features.update({_id: this._id}, {'$set' : {
+// 'properties.name' : name,
+// 'properties.description' : desc
+// }});
+
+// Session.set('editingFeature', null);
+// },
+
+// // TabView -> Description
+// 'click .description' : function(){
+// Session.set('tabView', 'description');
+// return false;
+// },
+
+// // TabView -> Features
+// 'click .features' : function(){
+// Session.set('tabView', 'features');
+// return false;
+// },
+
+// 'click .add-features' : function(){
+// Session.set('tabView', 'addFeatures');
+// return false;
+// },
+
+// 'click #add-line' : function(){
+// Trailmix.map.addDrawingControls();
+// return false;
+// },
+
+// 'click #add-point' : function(){
+// console.log('add point');
+// return false;
+// },
+
+// // Trigger autocomplete
+// 'input textarea' : function(e){
+
+
+// this.endTagging = function(){
+// delete this.start;
+// delete this.end;
+// this.tagging = false;
+// console.log('end tagging');
+// Session.set('taggingQuery', null);
+// };
+
+// // Behaviour is different when
+// // (1) we are starting at the beginning of the textarea. Our index
+// // is one ahead.
+// // (2) we place n @ after the fact, directly before a letter.
+// // Build for the typical user interaction:
+// // - space + @
+
+// if (this.tagging){
+
+// var currentPos = this.textarea.selectionStart;
+
+// if ((currentPos - this.start) < 0){
+// this.endTagging();
+// return;
+// }
+
+// if (typeof this.start === 'undefined')
+// this.start = currentPos;
+
+// if (this.start === 0)
+// this.textarea.selectionStart = 1;
+// else if (this.textarea.value.charAt(this.start) === '@') {
+// this.start += 1;
+// }
+
+// // if we've started inputting text before the @ or after our
+// // end point (by more than one space) then we assume that
+// // tagging has finished.
+// if (currentPos > this.end + 1 || currentPos < this.start) {
+// this.endTagging();
+// return;
+// }
+
+// // if we don't have an end position, or our currentPos is greater
+// // than our endPos, we set our endPos to our currentPos
+// if (!this.end || currentPos > this.end) {
+// this.end = this.textarea.selectionStart + 1;
+// }
+
+// // If we are selecting/deleting part of our tag, update our
+// // end position accordingly.
+// if (this.selectionLength > 0){
+// if (this.key === 8 || this.key === 46) {
+// if (this.end - selectionLength === 0) this.endTagging();
+// this.end -= selectionLength;
+// }
+// else {
+// if ((this.end - (selectionLength - 1)) <= 1) this.endTagging();
+// this.end -= selectionLength - 1;
+// }
+// }
+// // otherwise, if our currentPosition is less than our endPos and we are
+// // entering text, then we need to increment our endPos
+// else if (currentPos < this.end && currentPos > this.start) {
+// // unless we are deleting, and then we need to decrement our endPos
+// if (this.key === 8 || this.key === 46) this.end -= 1;
+// else if (currentPos + 1 < this.end){
+// console.log(currentPos, this.end);
+// this.end += 1;
+// }
+// }
+
+// var query = this.textarea.value.substring(this.start, this.end + 1);
+// console.log(query);
+// Session.set('taggingQuery', this.query);
+// }
+
+// },
+
+// 'keydown textarea' : function(e){
+// this.key = e.which;
+// this.selectionLength = null;
+// // If tagging, record our selection length
+// if (!this.textarea)
+// this.textarea = document.getElementById('trail-description');
+
+// if (this.tagging){
+// this.selectionLength = this.textarea.selectionEnd - this.textarea.selectionStart;
+// }
+
+// // @symbol
+// if (e.shiftKey && e.which === 50){
+// if (this.tagging) this.endTagging();
+// this.tagging = true;
+// }
+
+
+// },
+
+// 'click .back' : function(){
+// Session.set('editingFeature', null);
+// },
+
+
+// 'click .trailorigin' : function(e, t){
+// console.log('hi??');
+// Session.set('promptInput', 'selectTrailhead');
+// },
+
+// 'click .btn-back': function(e, t){
+// Session.set('mapView', 'browse');
+// return false;
+// }
+
+// });
+
+// Template.editSidebar.destroyed = function(){
+// $(window).off('dragover, dragleave, drop');
+// };
+
+// // FEATURE TEMPLATE
+// Template.feature.events({
+
+// // remove a feature
+// 'click .delete' : function(e, t) {
+// Features.remove(this._id);
+// },
+
+// // edit the selected feature in the map
+// 'click .edit' : function(e, t) {
+// Session.set('editingFeature', this._id);
+// Trailmix.map.editFeature(this);
+// },
+
+// // enter editing mode
+// 'click .edit-trail' : function(e, t) {
+// Session.set('isEditing', true);
+// },
+
+// 'click .feature-instance' : function(e, t){
+// Session.set('selectedFeature', this._id);
+// Trailmix.map.highlightFeature(this._id);
+// }
+
+// });
+
+// Template.feature.helpers({
+
+// // highlight the currently selected feature
+// selected: function(){
+// return Session.equals('selectedFeature', this._id);
+// }
+
+// });
+
+// Template.feature.preserve({
+// 'img[id]': function(node) { return node.id; }
+// });
-}).call(this);
+// }).call(this);
View
4 trailmix/client/scripts/map-class.js
@@ -5,8 +5,8 @@ Trailmix.MapView = (function(){
this.map = new L.Map('map', {
center: new L.LatLng(53.1103, -119.1567),
zoom: 10,
- // layers: new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
- layers: new L.TileLayer('http://a.tiles.mapbox.com/v3/bmcmahen.map-75dbjjhk/{z}/{x}/{y}.png'),
+ layers: new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
+ // layers: new L.TileLayer('http://a.tiles.mapbox.com/v3/bmcmahen.map-75dbjjhk/{z}/{x}/{y}.png'),
maxZoom: 15,
attributionControl: false
});
View
232 trailmix/client/scripts/sidebar.js
@@ -1,30 +1,19 @@
-(function(Trailmix){
+(function(){
- // Our Sidebar should change views if we are in browse
- // mode, or detail mode.
+ // SIDEBAR WRAPPER
+ // Slides left or right to reveal detail/browse views.
Template.sideBar.helpers({
- browsingView : function() {
- return Session.equals('mapView', 'browse');
- },
- detailView : function(){
- return Session.equals('mapView', 'detail');
- },
- width: function(){
- return Session.get('carouselItemWidth');
- },
- position: function(){
- return Session.get('carouselPosition');
- },
- totalWidth: function(){
- return Session.get('carouselTotalWidth');
- },
- height: function(){
- return Session.get('carouselItemHeight');
- }
+ browsingView : function(){ return Session.equals('mapView', 'browse'); },
+ detailView : function(){ return Session.equals('mapView', 'detail'); },
+ width: function(){ return Session.get('carouselItemWidth'); },
+ position: function(){ return Session.get('carouselPosition'); },
+ totalWidth: function(){ return Session.get('carouselTotalWidth'); },
+ height: function(){ return Session.get('carouselItemHeight'); }
});
Template.sideBar.preserve(['#carousel-inner']);
+ // XXX Optimize - This code will run a bazillion times.
Template.sideBar.rendered = function(){
this.$el = this.$el || $(this.firstNode).parent();
var width = this.$el.width();
@@ -39,30 +28,9 @@
Session.set('carouselPosition', 0);
};
- // Enter editing mode.
- Template.detailView.events({
- 'click .edit-trail' : function(){
- Session.set('isEditing', true);
- }
- });
-
- Template.detailView.helpers({
- isEditing: function(){
- return Session.get('isEditing');
- },
- trail: function(){
- return Trails.findOne(Session.get('currentTrail'));
- }
- });
-
+ // BROWSE TRAILS
Template.browseView.helpers({
trail: function(){
- // XXX Sort by rating?
- // XXX Handle limits?
- // XXX Optimize to also get those in the surrounding area? (or do
- // this on the subscription?)
- // XXX eventually use $where && $box if minimongo ever supports the
- // geo stuff.
var bounds = MapBounds.findOne();
if (bounds){
var sw = bounds.southWest
@@ -83,6 +51,182 @@
}
});
+ // TRAIL DETAIL
+ Template.detailView.events({
+ 'click .toggle-edit' : function(){
+ if (Session.get('isEditing')) {
+ Session.set('isEditing', false);
+ Session.set('tabView', 'description');
+ Session.set('editingFeature', null);
+ }
+ else Session.set('isEditing', true);
+ return false;
+ },
+ 'click .btn-back': function(){
+ Session.set('mapView', 'browse');
+ return false;
+ }
+ });
+
+ Template.detailView.helpers({
+ isEditing: function(){ return Session.get('isEditing'); },
+ trail: function(){ return Trails.findOne(Session.get('currentTrail')); }
+ });
+
+
+ // TRAIL TABS
+ Template.trailTabView.helpers({
+ isEditing: function(){ return Session.get('isEditing'); },
+ featuresTab : function(){ return Session.equals('tabView', 'features'); },
+ descriptionTab : function(){ return Session.equals('tabView', 'description'); }
+ });
+
+ Template.trailTabView.events({
+ // TabView -> Description
+ 'click .description' : function(){
+ Session.set('tabView', 'description');
+ Session.set('editingFeature', null);
+ return false;
+ },
+ // TabView -> Features
+ 'click .features' : function(){
+ Session.set('tabView', 'features');
+ return false;
+ }
+ });
+
+ Template.trailTabView.created = function(){
+ Session.set('tabView', 'description');
+ };
+
+ // DESCRIPTION TAB CONTENT
+ Template.descriptionTab.helpers({
+ trail : function() {
+ var current = Session.get('currentTrail');
+ return current && Trails.findOne(current);
+ },
+ isEditing: function(){ return Session.get('isEditing'); }
+ });
+
+ Template.descriptionTab.events({
+ // Update trail name & description
+ 'submit #trail-metadata' : function(e, t) {
+ e.preventDefault();
+ var name = t.find('.trail-name').value,
+ desc = t.find('#trail-description').value;
+
+ Trails.update({_id: this._id}, {'$set' : {
+ name: name,
+ description: desc
+ }});
+ Session.set('isEditing', null);
+ return false;
+ },
+ // Set our trail origin
+ 'click .trailorigin' : function(e, t){
+ Session.set('promptInput', 'selectTrailhead');
+ }
+ });
+
+ // FEATURES TAB
+ Template.featuresTab.helpers({
+ editingFeature: function(){
+ return Features.findOne(Session.get('editingFeature'));
+ },
+ features: function(){
+ var currentTrail = Session.get('currentTrail');
+ return currentTrail && Features.find({ trail : currentTrail });
+ }
+ });
+
+ // Take an array of features & insert them into the DB.
+ var createFeatures = function(json){
+ _.each(json, function(feature, i){
+ _.extend(feature, {trail : Session.get('currentTrail')});
+ Features.insert(feature);
+ }, this);
+ };
+
+ // Take a file, assume it's a GPX and create features
+ // out of it.
+ var parseGPXFiles = function(files){
+ if (!files || !window.FileReader) return;
+
+ // XXX Make sure our browser supports the FIleReader
+ // ... i.e., not IE < 10 (hah)
+ var reader = new FileReader();
+ reader.onload = function(e){
+ var util = Trailmix.Utils;
+ util.GPXtoGeoJSON(e.target.result, function(json){
+ createFeatures(json);
+ });
+ };
+
+ reader.readAsText(files[0]);
+ };
+
+ Template.featuresTab.events({
+ 'click .upload': function(){
+ $('#upload-field').trigger('click');
+ },
+ 'change #upload-field': function(){
+ parseGPXFiles(e.currentTarget.files);
+ }
+ });
+
+ // FEATURE
+ Template.feature.events({
+ 'click .delete' : function(e, t){
+ Features.remove(this._id);
+ return false;
+ },
+ 'click .edit' : function(e, t){
+ Session.set('editingFeature', this._id);
+ },
+ 'click .feature-instance' : function(e, t){
+ Session.set('selectedFeature', this._id);
+ Trailmix.map.highlightFeature(this._id);
+ }
+ });
+
+ // EDITING FEATURE TAB CONTENT
+ Template.editingFeature.helpers({
+ editingFeature: function(){
+ return Features.findOne(Session.get('editingFeature'));
+ },
+ featureTypePoint: function(){
+ if (Session.get('featureType'))
+ return Session.equals('featureType', 'Point');
+ var feature = Features.findOne(Session.get('editingFeature'));
+ if (feature.geometry.type === 'Point') return true;
+ }
+ });
+
+ Template.editingFeature.events({
+ 'submit #feature-form' : function(e, t){
+ var name = t.find('.name').value
+ , desc = t.find('.description').value;
+
+ Features.update({_id: this._id}, {'$set' : {
+ 'properties.name' : name,
+ 'properties.description' : desc
+ }});
+ Session.set('editingFeature', null);
+ },
+ 'click .back': function(e, t){
+ Session.set('editingFeature', null);
+ return false;
+ },
+ 'change select' : function(e, t){
+ var target = e.currentTarget;
+ var val = target.options[target.selectedIndex].value;
+ Session.set('featureType', val);
+ }
+ });
+
+ Template.editingFeature.created = function(){
+ Session.set('featureType', null);
+ };
-})(Trailmix);
+})();
View
1 trailmix/client/styles/application.styl
@@ -48,6 +48,7 @@ body
overflow auto
overflow-x hidden
overflow-y auto
+ -webkit-overflow-scrolling touch
img.logo
float left
View
3 trailmix/client/styles/fiddleware/body.styl
@@ -5,3 +5,6 @@ body
font 12px 'open sans', 'Helvetica Neue', Helvetica, arial, sans-serif
height 100%
background-image url("/images/backgrounds/satinweave.png")
+
+ *
+ -webkit-tap-highlight-color rgba(0,0,0,0)
View
10 trailmix/client/styles/fiddleware/buttons.styl
@@ -13,13 +13,14 @@
padding 0 10px 0 25px
line-height 40px
text-decoration none
+ cursor default
&:hover:before
&:hover:after
- background linear-gradient($white, #f6f6f6)
+ background linear-gradient(#f5f5f5,#f1f1f1)
border-color #bbb
box-shadow 1px 1px 2px rgba(0,0,0,0.1)
- cursor inherit
+ cursor default
&:active:before
&:active:after
@@ -36,7 +37,7 @@
margin-top 5px
z-index -1
border-left-width 0
- background $white
+ background #f5f5f5
box-shadow: 1px 1px 2px rgba(0,0,0,0.05)
border-radius 2px
@@ -51,7 +52,7 @@
box-shadow: 1px 1px 2px rgba(0,0,0,0.05)
top 9px
z-index -2
- background $white
+ background #f5f5f5
border-top 0 transparent
border-right 0 transparent
border-radius 2px 4px
@@ -68,6 +69,7 @@
border-radius 2px
margin 3px
color $gray
+ text-decoration none
padding 5px 11px
background-size auto 40px
text-shadow: 0 1px 1px rgba(255,255,255,0.4)
View
49 trailmix/client/styles/sidebar.styl
@@ -37,6 +37,9 @@
position relative
$clearfix()
+ &:hover
+ cursor pointer
+
&.selected
background $blue
color $white
@@ -48,14 +51,6 @@
&:hover
background $blue
-
- &:hover
- cursor pointer
- background #f8f8f8
-
- & i
- opacity 1
-
& .type
float left
padding-left 0
@@ -158,6 +153,9 @@
.sidebar-navigation
padding 7px
padding-bottom 0
+ height 47px
+ box-sizing border-box
+ $clearfix()
.browse-list
list-style none
@@ -172,7 +170,38 @@
& li
width 100%
- padding 15px
font-size 14px
border-bottom 1px solid rgb(238, 238, 238)
- font-weight 600
+ font-weight 400
+ position relative
+
+ & a
+ display block
+ padding 13px
+ text-decoration none
+ color #08c
+
+ &:hover i
+ opacity 1
+
+ & i
+ position absolute
+ top 16px
+ right 10px
+ opacity 0.6
+
+p.description
+ padding 0 15px
+
+.btn-back
+ float left
+
+.toggle-edit
+ float right
+ margin-top 6px
+
+.button-list
+ $clearfix()
+
+ & button
+ float right
View
139 trailmix/client/templates/editSidebar.html
@@ -1,139 +0,0 @@
-<template name='editSidebar'>
- <div class='sidebar-navigation'>
- <a class='btn-back' href='#'>Browse Trails</a>
- </div>
- {{#isolate}}
- {{#with trail}}
- <div class='meta-wrapper'>
- <h2>
- {{#if this.name}}
- {{this.name}} {{else}}
- Untitled Trail
- {{/if}}
- </h2>
- </div>
- {{/with}}
- {{/isolate}}
- <ul id='edit-tabs' class='nav nav-tabs'>
- <li>
- <a class='description {{#if descriptionTab}} active {{/if}}'>Description</a>
- </li>
- <li>
- <a class='features {{#if featuresTab}} active {{/if}}'>Features</a>
- </li>
- </ul>
-
- <div id='edit-tabs-content' class='tab-content'>
-
- {{#if featuresTab}}
- <div class='tab-pane' id='features'>
- <div id='features'>
- {{#unless editingFeature}}
- <div class='add-new'>
- <button class='btn upload'> Upload GPX </button>
- <button class='btn btn-blue'> New Feature </button>
- <input type='file' id='upload-field'>
- </div>
- <ul>
- {{#each features}}
- {{>feature}}
- {{/each}}
- </ul>
- {{/unless}}
- {{#if editingFeature}}
- {{#with editingFeature}}
-
- <form id='feature-form'>
- <div class='add-new'>
- <button class='back btn'>Back</button>
- <button class='save btn btn-blue'>Save</button>
- </div>
- <label> Feature Name
- <input type='text' class='name' value='{{this.properties.name}}'>
- </label> Feature Type
- <select>
- <option> Marker </option>
- <option> Line </option>
- </select>
- </label>
- <label> Description
- <textarea class='description'>
- {{this.properties.description}}
- </textarea>
- </label>
- <button class='btn btn-green place'>Place Marker</button>
- </form>
- <br>
- {{/with}}
- {{/if}}
- </div>
- </div>
- {{/if}}
-
- {{#if descriptionTab}}
- <div class='tab-pane'>
- <div class='sidebar-wrapper'>
- {{#with trail}}
- <form id='trail-metadata'>
- <label> Name
- <input type='text' class='trail-name large' value='{{this.name}}'>
- </label>
- <div class='trailhead'>
- <button class='btn trailorigin'>
- <i class='icon icon-screenshot'></i>
- Select Trailhead
- </button>
- {{#if this.coordinates}}
- <span> Lat: {{this.coordinates.[0]}} </span>
- <span> Lng: {{this.coordinates.[1]}} </span>
- {{/if}}
- </div>
- <label> Description
- <textarea id='trail-description' class='trail-description'>{{#if this.description}}{{this.description}}{{/if}}</textarea>
- </label>
- {{>autoComplete}}
- <div class='align-right'>
- <button class='btn btn-green publish'>Make Public</button>
- <input type='submit' class='btn btn-blue large' value='Save Changes'>
- </div>
-
- </form>
- {{/with}}
- </div>
- </div>
- {{/if}}
- </div>
-</template>
-
-<template name='autoComplete'>
- {{#if tagging}}
- <ul id='autocomplete'>
- {{#each tagResult}}
- {{#isolate}}
- <li> {{name}} </li>
- {{/isolate}}
- {{/each}}
- <ul>
- {{/if}}
-</template>
-
-<template name='feature'>
- <li class='feature-instance {{#if selected}} selected {{/if}}'>
- <div class='type'>
- {{#if this.properties.markerSymbol}}
- <img id='{{this._id}}' src='/images/icons/{{properties.markerSymbol}}-24.png'>
- {{else}}
- <img id='{{this._id}}' src='/images/icons/marker-24.png'>
- {{/if}}
- </div>
- <div class='name'>
- {{this.properties.name}}
- </div>
- <a class='edit action' href='#'>
- <img src='/images/icons/edit-icon.png'>
- </a>
- <a class='delete action' href='#'>
- <img src='/images/icons/delete-icon.png'>
- </a>
- </li>
-</template>
View
174 trailmix/client/templates/sideBar.html
@@ -5,9 +5,8 @@
{{else}} -webkit-transform: translate3d({{position}}px, 0, 0);'>
{{/if}}
<li class='carousel-item' style='width: {{width}}px; height: {{height}}px;'>
- {{>browseView}}
+ {{>browseView}}
</li>
-
<li class='carousel-item' style='width: {{width}}px; height: {{height}}px;'>
{{>detailView}}
</li>
@@ -28,18 +27,177 @@
<template name='browseTrailList'>
<li>
<a href='#'> {{name}} </a>
+ <i class='icon icon-chevron-right'></i>
</li>
</template>
<template name='detailView'>
- {{#if isEditing}}
- {{>editSidebar}}
- {{else}}
+ <div class='sidebar-navigation'>
+ {{#unless isEditing}}
+ <a class='btn-back' href='#'> Browse Trails</a>
+ {{/unless}}
+ {{#if isEditing}}
+ <a class='btn toggle-edit btn-blue' href='#'> Done </a>
+ {{else}}
+ <a class='btn toggle-edit' href='#'> Edit </a>
+ {{/if}}
+ </div>
+ {{#isolate}}
{{#with trail}}
- <h2> {{this.name}} </h2>
- <p> {{this.description}} </p>
- <button class='edit-trail'>Edit</button>
+ <div class='meta-wrapper'>
+ <h2> {{this.name}} </h2>
+ </div>
+ {{>trailTabView}}
{{/with}}
+ {{/isolate}}
+</template>
+
+<template name='trailTabView'>
+ <ul id='edit-tabs' class='nav nav-tabs'>
+ <li>
+ <a class='description {{#if descriptionTab}} active {{/if}}'>
+ Description</a>
+ </li>
+ {{#if isEditing}}
+ <li>
+ <a class='features {{#if featuresTab}} active {{/if}}'>Features</a>
+ </li>
+ {{/if}}
+ </ul>
+ <div id='edit-tabs-content' class='tab-content'>
+ {{#if descriptionTab}}
+ {{>descriptionTab}}
+ {{/if}}
+ {{#if featuresTab}}
+ {{>featuresTab}}
+ {{/if}}
+ </div>
+</template>
+
+<template name='descriptionTab'>
+ <div class='tab-pane'>
+ <div class='sidebar-wrapper'>
+ {{#with trail}}
+ {{#if isEditing}}
+ <form id='trail-metadata'>
+ <label> Name
+ <input type='text' class='trail-name large' value='{{this.name}}'>
+ </label>
+ <div class='trailhead'>
+ <button class='btn trailorigin'>
+ <i class='icon icon-screenshot'></i>
+ Select Trailhead
+ </button>
+ {{#if this.coordinates}}
+ <span> Lat: {{this.coordinates.[0]}} </span>
+ <span> Lng: {{this.coordinates.[1]}} </span>
+ {{/if}}
+ </div>
+ <label> Description
+ <textarea id='trail-description' class='trail-description'>{{#if this.description}}{{this.description}}{{/if}}</textarea>
+ </label>
+ {{>autoComplete}}
+ <div class='align-right'>
+ <input type='submit' class='btn btn-blue large' value='Save Changes'>
+ </div>
+ </form>
+ {{else}}
+ <p class='description'> {{this.description}} </p>
+ {{/if}}
+ {{/with}}
+ </div>
+ </div>
+</template>
+
+<template name='autoComplete'>
+ {{#if tagging}}
+ <ul id='autocomplete'>
+ {{#each tagResult}}
+ {{#isolate}}
+ <li> {{name}} </li>
+ {{/isolate}}
+ {{/each}}
+ <ul>
{{/if}}
</template>
+<template name='featuresTab'>
+ <div class='tab-pane' id='features'>
+ <div id='features'>
+ {{#unless editingFeature}}
+ <div class='add-new'>
+ <button class='btn upload'> Upload GPX </button>
+ <button class='btn btn-blue'> New Feature </button>
+ <input type='file' id='upload-field'>
+ </div>
+ <ul>
+ {{#each features}}
+ {{>feature}}
+ {{/each}}
+ </ul>
+ {{/unless}}
+ {{#if editingFeature}}
+ {{>editingFeature}}
+ {{/if}}
+ </div>
+ </div>
+</template>
+
+<template name='editingFeature'>
+ {{#with editingFeature}}
+ <form id='feature-form'>
+ <label> Feature Name
+ <input type='text' class='name' value='{{this.properties.name}}'>
+ </label> Feature Type
+ {{#isolate}}
+ <select>
+ <option value='Point' {{#if featureTypePoint}}selected{{/if}}> Point </option>
+ <option value='LineString' {{#unless featureTypePoint}}selected{{/unless}}> LineString </option>
+ </select>
+ {{/isolate}}
+ </label>
+ {{#if featureTypePoint}}
+ <button class='btn btn-green place'>Place Marker</button>
+ {{else}}
+ <button class='btn btn-green draw'>Draw LineString</button>
+ {{/if}}
+ <label> Description
+ <textarea class='description'>
+ {{this.properties.description}}
+ </textarea>
+ </label>
+ {{#if featureTypePoint}}
+ <p> point! </p>
+ {{else}}
+ <p> linestring! </p>
+ {{/if}}
+ <div class='button-list'>
+ <button class='save btn btn-blue'>Save Changes</button>
+ <button class='back btn'>Done</button>
+ </div>
+ </form>
+ <br>
+ {{/with}}
+</template>
+
+<template name='feature'>
+ <li class='feature-instance {{#if selected}} selected {{/if}}'>
+ <div class='type'>
+ {{#if this.properties.markerSymbol}}
+ <img id='{{this._id}}' src='/images/icons/{{properties.markerSymbol}}-24.png'>
+ {{else}}
+ <img id='{{this._id}}' src='/images/icons/marker-24.png'>
+ {{/if}}
+ </div>
+ <div class='name'>
+ {{this.properties.name}}
+ </div>
+ <a class='edit action' href='#'>
+ <img src='/images/icons/edit-icon.png'>
+ </a>
+ <a class='delete action' href='#'>
+ <img src='/images/icons/delete-icon.png'>
+ </a>
+ </li>
+</template>
+

0 comments on commit 92b8abe

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