Add map component

src/dom_components/model/ComponentMap.js

@@ -1,18 +1,35 @@
-define(['./Component'],
+define(['./ComponentImage'],
 	function (Component) {
 
 		return Component.extend({
 
 			defaults: _.extend({}, Component.prototype.defaults, {
+					mapUrl: 'https://maps.google.com/maps',
 					tagName: 'iframe',
-          staticUrl: 'http://maps.googleapis.com/maps/api/staticmap',
+					mapType: 'q',
-          mapUrl: 'https://maps.google.com/maps',
+					address: '',
-          zoom: '1',
+					zoom: '1',
-          mapType: '',
+					traits: [{
-          staticHeight: '',
+						label: 'Address',
-          staticWidth: '',
+						name: 'address',
-          src: 'http://maps.googleapis.com/maps/api/staticmap?zoom=1&format=jpg&size=500x300',//'https://maps.google.com/maps?output=embed',
+						changeProp: 1,
-					traits: ['mapTraits'],
+					},{
+						type: 'select',
+						label: 'Map type',
+						name: 'mapType',
+						changeProp: 1,
+						options: [
+							{value: 'q', name: 'Roadmap'},
+							{value: 'w', name: 'Satellite'}
+						]
+					},{
+						label: 'Zoom',
+						name: 'zoom',
+						type: 'range',
+						min: '1',
+						max: '20',
+						changeProp: 1,
+					}],
 			}),
 
 		});

src/dom_components/view/ComponentMapView.js

@@ -3,12 +3,56 @@ define(['backbone', './ComponentImageView'],
 
 	return ComponentView.extend({
 
+		tagName: 'div',
+
 		events: {},
 
 		initialize: function(o){
 			ComponentView.prototype.initialize.apply(this, arguments);
-			//on width/height change update static url
+			this.listenTo(this.model, 'change:address change:zoom change:mapType', this.updateMap);
-			//zomm 1-22
+			this.classEmpty = this.ppfx + 'plh-map';
+		},
+
+		/**
+		 * Update the map on the canvas
+		 * @private
+		 */
+		updateMap: function(e, m) {
+			this.getIframe().src = this.getMapUrl();
+		},
+
+		getMapUrl: function() {
+			var md = this.model;
+			var addr = md.get('address');
+			var zoom = md.get('zoom');
+			var type = md.get('mapType');
+			var size = '';
+			addr = addr ? '&q=' + addr : '';
+			zoom = zoom ? '&z=' + zoom : '';
+			type = type ? '&t=' + type : '';
+			var result = md.get('mapUrl')+'?' + addr + zoom + type;
+			result += '&output=embed';
+			return result;
+		},
+
+		getIframe: function() {
+			if(!this.iframe){
+				var ifrm = document.createElement("iframe");
+				ifrm.src = this.getMapUrl();
+				ifrm.frameBorder = 0;
+				ifrm.style.pointerEvents = 'none';
+				ifrm.style.height = '100%';
+				ifrm.style.width = '100%';
+				this.iframe = ifrm;
+			}
+			return this.iframe;
+		},
+
+		render: function() {
+			ComponentView.prototype.render.apply(this, arguments);
+			this.updateClasses();
+			this.el.appendChild(this.getIframe());
+			return this;
 		},
 
 	});

src/domain_abstract/view/DomainViews.js

@@ -3,6 +3,7 @@ function(Backbone) {
 
   return Backbone.View.extend({
 
+    // Default view
     itemView: '',
 
     // Defines the View per type
@@ -33,8 +34,8 @@ function(Backbone) {
     add: function(model, fragment){
       var frag = fragment || null;
       var itemView = this.itemView;
-      if(this.itemsView){
+      var typeField = model.get(this.itemType);
-        var typeField = model.get(this.itemType);
+      if(this.itemsView && this.itemsView[typeField]){
         itemView = this.itemsView[typeField];
       }
       var view = new itemView({

src/editor/config/config.js

@@ -185,15 +185,15 @@ define(function () {
 						content:'Link',
 						style:{color: '#d983a6'}
 					},
-	      }/*,{
+	      },{
 					id: 'map',
 	        label: 'Map',
 	        attributes: {class:'fa fa-map-o'},
 	        content: {
 						type: 'map',
-						style: {color: '#fff'}
+						style: {height: '350px'}
 					},
-	      }*/],
+	      }],
 		},
 
 	};

src/trait_manager/model/Trait.js

@@ -7,10 +7,13 @@ define(['backbone'],
         type: 'text', // text, number, range, select
 				label: '',
         name: '',
+				min: '',
+				max: '',
         value: '',
 				target: '',
 				default: '',
 				placeholder: '',
+				changeProp: 0,
         options: [],
 			},
 

src/trait_manager/view/TraitSelectView.js

@@ -6,7 +6,6 @@ define(['backbone','./TraitView'],
 		initialize: function(o) {
 			TraitView.prototype.initialize.apply(this, arguments);
 			var ppfx = this.ppfx;
-			this.fieldClass += ' ' + ppfx + 'select';
 			this.tmpl = '<div class="' + this.fieldClass +'"><div class="' + this.inputhClass +'"></div>'+
 			'<div class="' + ppfx + 'sel-arrow"><div class="' + ppfx + 'd-s-arrow"></div></div> </div>';
 		},

src/trait_manager/view/TraitView.js

@@ -7,16 +7,17 @@ define(['backbone'], function (Backbone) {
 		},
 
 		initialize: function(o) {
+			var md = this.model;
 			this.config = o.config || {};
 			this.pfx = this.config.stylePrefix || '';
 			this.ppfx = this.config.pStylePrefix || '';
-			this.target = this.model.get('target');
+			this.target = md.get('target');
 			this.className = this.pfx + 'trait';
 			this.labelClass = this.ppfx + 'label';
-			this.fieldClass = this.ppfx + 'field';
+			this.fieldClass = this.ppfx + 'field ' + this.ppfx + 'field-' + md.get('type');
 			this.inputhClass = this.ppfx + 'input-holder';
-			this.model.off('change:value', this.onValueChange);
+			md.off('change:value', this.onValueChange);
-			this.listenTo(this.model, 'change:value', this.onValueChange);
+			this.listenTo(md, 'change:value', this.onValueChange);
 			this.tmpl = '<div class="' + this.fieldClass +'"><div class="' + this.inputhClass +'"></div></div>';
 		},
 
@@ -35,9 +36,16 @@ define(['backbone'], function (Backbone) {
 		onValueChange: function() {
 			var m = this.model;
 			var trg = this.target;
-			var attrs = _.clone(trg.get('attributes'));
+			var name = m.get('name');
-			attrs[m.get('name')] = m.get('value');
+			var value = m.get('value');
-			trg.set('attributes', attrs);
+			// Chabge property if requested otherwise attributes
+			if(m.get('changeProp')){
+				trg.set(name, value);
+			}else{
+				var attrs = _.clone(trg.get('attributes'));
+				attrs[name] = value;
+				trg.set('attributes', attrs);
+			}
 		},
 
 		/**
@@ -67,11 +75,16 @@ define(['backbone'], function (Backbone) {
 		getInputEl: function() {
 			if(!this.$input){
 				var md = this.model;
-				this.$input = $('<input>', {
+				var opts = {
 					placeholder: md.get('placeholder') || md.get('default'),
-					type: 'text',
+					type: md.get('type') || 'text',
 					value: md.get('value')
-				});
+				};
+				if(md.get('min'))
+					opts.min = md.get('min');
+				if(md.get('max'))
+					opts.max = md.get('max');
+				this.$input = $('<input>', opts);
 			}
 			return this.$input.get(0);
 		},

src/trait_manager/view/TraitsView.js

@@ -3,6 +3,8 @@ define(['backbone', 'Abstract/view/DomainViews', './TraitView', './TraitSelectVi
 
 		return DomainViews.extend({
 
+			itemView: TraitView,
+
 			itemsView: {
 				'text': TraitView,
 				'select': TraitSelectView,

styles/css/main.css

@@ -3102,7 +3102,7 @@ ol.example li.placeholder:before {
     content: "\f03e"; }
 
 /***********  END Components *************/
-/********* Inputs **********/
+/********* Input style **********/
 /*#d5d5d5*/
 /*303030*/
 /*414141*/
@@ -3154,6 +3154,55 @@ ol.example li.placeholder:before {
     border-right: 4px solid transparent;
     cursor: pointer; }
 
+.gjs-field-select {
+  padding: 0; }
+
+.gjs-field-range {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0; }
+  .gjs-field-range input {
+    margin: 0; }
+  .gjs-field-range input::-moz-range-thumb {
+    height: 10px;
+    width: 10px;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 100%;
+    background-color: #ddd;
+    cursor: pointer; }
+  .gjs-field-range input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: -5px;
+    height: 10px;
+    width: 10px;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 100%;
+    background-color: #ddd;
+    cursor: pointer; }
+  .gjs-field-range input::-ms-thumb {
+    height: 10px;
+    width: 10px;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 100%;
+    background-color: #ddd;
+    cursor: pointer; }
+  .gjs-field-range input::-moz-range-track {
+    background-color: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 1px;
+    height: 2px; }
+  .gjs-field-range input::-webkit-slider-runnable-track {
+    background-color: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 1px;
+    height: 2px; }
+  .gjs-field-range input::-ms-track {
+    background-color: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 1px;
+    height: 2px; }
+
 .gjs-add-trasp {
   background: none;
   border: none;
@@ -3306,7 +3355,7 @@ ol.example li.placeholder:before {
     .gjs-sm-sector .gjs-sm-field.gjs-sm-select select, .gjs-clm-tags .gjs-sm-field.gjs-sm-select select, .gjs-sm-sector .gjs-sm-select.gjs-clm-field select, .gjs-clm-tags .gjs-sm-select.gjs-clm-field select, .gjs-sm-sector .gjs-clm-select select, .gjs-clm-tags .gjs-clm-select select {
       height: 20px; }
     .gjs-sm-sector .gjs-sm-field.gjs-sm-select option, .gjs-clm-tags .gjs-sm-field.gjs-sm-select option, .gjs-sm-sector .gjs-sm-select.gjs-clm-field option, .gjs-clm-tags .gjs-sm-select.gjs-clm-field option, .gjs-sm-sector .gjs-clm-select option, .gjs-clm-tags .gjs-clm-select option {
-      margin: 5px 0; }
+      padding: 3px 0; }
     .gjs-sm-sector .gjs-sm-field.gjs-sm-composite, .gjs-clm-tags .gjs-sm-field.gjs-sm-composite, .gjs-sm-sector .gjs-sm-composite.gjs-clm-field, .gjs-clm-tags .gjs-sm-composite.gjs-clm-field {
       background-color: rgba(0, 0, 0, 0.1);
       border: 1px solid rgba(0, 0, 0, 0.25); }

styles/scss/main.scss

@@ -646,13 +646,28 @@ ol.example li.placeholder:before {position: absolute;}
 /***********  END Components *************/
 
 
-/********* Inputs **********/
+/********* Input style **********/
 
-$inputFontColor:  $mainLhlColor; /*#d5d5d5*/
+$inputFontColor: $mainLhlColor; /*#d5d5d5*/
-$darkBorder:    rgba(0, 0, 0, 0.15); /*303030*/
+$darkBorder: rgba(0, 0, 0, 0.15); /*303030*/
-$lightBorder:   rgba(255, 255, 255, 0.05); /*414141*/
+$lightBorder: rgba(255, 255, 255, 0.05); /*414141*/
-$darkTextShadow:  $mainDkColor; /*#252525*/
+$darkTextShadow: $mainDkColor; /*#252525*/
-$arrowColor:    $mainLhlColor; /*b1b1b1*/
+$arrowColor: $mainLhlColor; /*b1b1b1*/
+
+@mixin rangeThumbStyle() {
+  height: 10px; width: 10px;
+  border: 1px solid $mainDkColor;
+  border-radius: 100%;
+  background-color: $fontColor;
+  cursor: pointer;
+}
+
+@mixin rangeTrackStyle() {
+  background-color: $mainDkColor;
+  border: 1px solid $darkBorder;
+  border-radius: 1px;
+  height: 2px;
+}
 
 .#{$app-prefix}label {
   line-height: 18px;
@@ -703,6 +718,48 @@ $arrowColor:    $mainLhlColor; /*b1b1b1*/
   }
 }
 
+.#{$app-prefix}field-select {
+  padding: 0;
+}
+
+.#{$app-prefix}field-range {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+
+  input {
+    margin: 0;
+  }
+
+  input::-moz-range-thumb {
+    @include rangeThumbStyle();
+  }
+
+  input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: -5px;
+    @include rangeThumbStyle();
+  }
+
+  input::-ms-thumb {
+    @include rangeThumbStyle();
+  }
+
+  input::-moz-range-track {
+    @include rangeTrackStyle();
+  }
+
+  input::-webkit-slider-runnable-track {
+    @include rangeTrackStyle();
+  }
+
+  input::-ms-track {
+    @include rangeTrackStyle();
+  }
+}
+
+
 .#{$app-prefix}add-trasp {
   background: none;
   border: none;
@@ -874,7 +931,7 @@ $arrowColor:    $mainLhlColor; /*b1b1b1*/
     }
 		&.#{$sm-prefix}select{ padding:0; }
 		&.#{$sm-prefix}select select{ height: 20px; }
-		&.#{$sm-prefix}select option { margin: 5px 0;}
+		&.#{$sm-prefix}select option { padding: 3px 0;}
 		&.#{$sm-prefix}composite{
 			background-color: rgba(0,0,0,0.1);
 			border: 1px solid rgba(0, 0, 0, 0.25);