tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add map component

pull/36/head
Artur Arseniev 10 years ago
parent
61c6e24cce
commit
b648d9b7b3
10 changed files with 221 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      src/dom_components/model/ComponentMap.js
  2. 48
      src/dom_components/view/ComponentMapView.js
  3. 5
      src/domain_abstract/view/DomainViews.js
  4. 6
      src/editor/config/config.js
  5. 3
      src/trait_manager/model/Trait.js
  6. 1
      src/trait_manager/view/TraitSelectView.js
  7. 33
      src/trait_manager/view/TraitView.js
  8. 2
      src/trait_manager/view/TraitsView.js
  9. 53
      styles/css/main.css
  10. 71
      styles/scss/main.scss

35
src/dom_components/model/ComponentMap.js
View File

@ -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,
}],
}),
});

48
src/dom_components/view/ComponentMapView.js
View File

@ -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;
},
});

5
src/domain_abstract/view/DomainViews.js
View File

@ -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({

6
src/editor/config/config.js
View File

@ -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'}
},
}*/],
}],
},
};

3
src/trait_manager/model/Trait.js
View File

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

1
src/trait_manager/view/TraitSelectView.js
View File

@ -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>';
},

33
src/trait_manager/view/TraitView.js
View File

@ -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 = '<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'));
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 = $('<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);
},

2
src/trait_manager/view/TraitsView.js
View File

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

53
styles/css/main.css
View File

@ -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); }

71
styles/scss/main.scss
View File

@ -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);

Write Preview
Loading…
Cancel
Save