diff --git a/src/dom_components/model/ComponentMap.js b/src/dom_components/model/ComponentMap.js index 164e84b4a..c0d433d53 100644 --- a/src/dom_components/model/ComponentMap.js +++ b/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', - mapUrl: 'https://maps.google.com/maps', - zoom: '1', - mapType: '', - staticHeight: '', - staticWidth: '', - src: 'http://maps.googleapis.com/maps/api/staticmap?zoom=1&format=jpg&size=500x300',//'https://maps.google.com/maps?output=embed', - traits: ['mapTraits'], + mapType: 'q', + address: '', + zoom: '1', + traits: [{ + label: 'Address', + name: 'address', + changeProp: 1, + },{ + 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, + }], }), }); diff --git a/src/dom_components/view/ComponentMapView.js b/src/dom_components/view/ComponentMapView.js index 1857c21e8..f12bdac11 100644 --- a/src/dom_components/view/ComponentMapView.js +++ b/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 - //zomm 1-22 + this.listenTo(this.model, 'change:address change:zoom change:mapType', this.updateMap); + 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; }, }); diff --git a/src/domain_abstract/view/DomainViews.js b/src/domain_abstract/view/DomainViews.js index 4ae5051f6..7c9032575 100644 --- a/src/domain_abstract/view/DomainViews.js +++ b/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({ diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 5a08b43d4..f4f2283d4 100644 --- a/src/editor/config/config.js +++ b/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'} }, - }*/], + }], }, }; diff --git a/src/trait_manager/model/Trait.js b/src/trait_manager/model/Trait.js index b15bc7f59..8594f5f8b 100644 --- a/src/trait_manager/model/Trait.js +++ b/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: [], }, diff --git a/src/trait_manager/view/TraitSelectView.js b/src/trait_manager/view/TraitSelectView.js index b2afcaa4a..e548eb549 100644 --- a/src/trait_manager/view/TraitSelectView.js +++ b/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 = '
'+ '
'; }, diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js index e21f00ea4..2d26138e9 100644 --- a/src/trait_manager/view/TraitView.js +++ b/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); - this.listenTo(this.model, 'change:value', this.onValueChange); + md.off('change:value', this.onValueChange); + this.listenTo(md, 'change:value', this.onValueChange); this.tmpl = '
'; }, @@ -35,9 +36,16 @@ define(['backbone'], function (Backbone) { onValueChange: function() { var m = this.model; var trg = this.target; - var attrs = _.clone(trg.get('attributes')); - attrs[m.get('name')] = m.get('value'); - trg.set('attributes', attrs); + var name = m.get('name'); + var value = m.get('value'); + // 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 = $('', { + 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 = $('', opts); } return this.$input.get(0); }, diff --git a/src/trait_manager/view/TraitsView.js b/src/trait_manager/view/TraitsView.js index 99ff00aa1..0107ce745 100644 --- a/src/trait_manager/view/TraitsView.js +++ b/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, diff --git a/styles/css/main.css b/styles/css/main.css index 81a35b479..603a11b58 100644 --- a/styles/css/main.css +++ b/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); } diff --git a/styles/scss/main.scss b/styles/scss/main.scss index e3e5d21bc..ef2e6884e 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -646,13 +646,28 @@ ol.example li.placeholder:before {position: absolute;} /*********** END Components *************/ -/********* Inputs **********/ +/********* Input style **********/ -$inputFontColor: $mainLhlColor; /*#d5d5d5*/ -$darkBorder: rgba(0, 0, 0, 0.15); /*303030*/ -$lightBorder: rgba(255, 255, 255, 0.05); /*414141*/ -$darkTextShadow: $mainDkColor; /*#252525*/ -$arrowColor: $mainLhlColor; /*b1b1b1*/ +$inputFontColor: $mainLhlColor; /*#d5d5d5*/ +$darkBorder: rgba(0, 0, 0, 0.15); /*303030*/ +$lightBorder: rgba(255, 255, 255, 0.05); /*414141*/ +$darkTextShadow: $mainDkColor; /*#252525*/ +$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);