From 907a6e6aa034896ba04da7d697e522e6f2baa756 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 27 Oct 2016 15:32:07 +0200 Subject: [PATCH] Start map component --- src/dom_components/main.js | 12 +++++++++++- src/dom_components/model/ComponentMap.js | 19 +++++++++++++++++++ src/dom_components/model/Components.js | 12 +++++++++--- src/dom_components/view/ComponentImageView.js | 4 ++-- src/dom_components/view/ComponentMapView.js | 15 +++++++++++++++ src/dom_components/view/ComponentsView.js | 5 +++++ src/editor/config/config.js | 8 ++++++++ src/trait_manager/view/TraitView.js | 1 - 8 files changed, 69 insertions(+), 7 deletions(-) create mode 100644 src/dom_components/model/ComponentMap.js create mode 100644 src/dom_components/view/ComponentMapView.js diff --git a/src/dom_components/main.js b/src/dom_components/main.js index c0aa7a864..f3d75369a 100644 --- a/src/dom_components/main.js +++ b/src/dom_components/main.js @@ -41,9 +41,11 @@ define(function(require) { ComponentText = require('./model/ComponentText'), ComponentImage = require('./model/ComponentImage'), ComponentLink = require('./model/ComponentLink'), + ComponentMap = require('./model/ComponentMap'), ComponentView = require('./view/ComponentView'), ComponentImageView = require('./view/ComponentImageView'), - ComponentTextView = require('./view/ComponentTextView'); + ComponentTextView = require('./view/ComponentTextView'), + ComponentMapView = require('./view/ComponentMapView'), ComponentLinkView = require('./view/ComponentLinkView'); var component, componentView; @@ -283,6 +285,14 @@ define(function(require) { this.clear().addComponent(components); }, + /** + * Add new component type + * @private + */ + addComponentType: function(type, methods) { + + } + }; }; }); diff --git a/src/dom_components/model/ComponentMap.js b/src/dom_components/model/ComponentMap.js new file mode 100644 index 000000000..164e84b4a --- /dev/null +++ b/src/dom_components/model/ComponentMap.js @@ -0,0 +1,19 @@ +define(['./Component'], + function (Component) { + + return Component.extend({ + + defaults: _.extend({}, Component.prototype.defaults, { + 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'], + }), + + }); +}); diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js index af4dd334b..4399f22aa 100644 --- a/src/dom_components/model/Components.js +++ b/src/dom_components/model/Components.js @@ -26,7 +26,7 @@ define([ 'backbone', 'require'], case 'text': if(!this.mComponentText) - this.mComponentText = require("./ComponentText"); + this.mComponentText = require("./ComponentText"); model = new this.mComponentText(attrs, options); break; @@ -38,13 +38,19 @@ define([ 'backbone', 'require'], case 'image': if(!this.mComponentImage) - this.mComponentImage = require("./ComponentImage"); + this.mComponentImage = require("./ComponentImage"); model = new this.mComponentImage(attrs, options); break; + case 'map': + if(!this.mComponentMap) + this.mComponentMap = require("./ComponentMap"); + model = new this.mComponentMap(attrs, options); + break; + default: if(!this.mComponent) - this.mComponent = require("./Component"); + this.mComponent = require("./Component"); model = new this.mComponent(attrs, options); } diff --git a/src/dom_components/view/ComponentImageView.js b/src/dom_components/view/ComponentImageView.js index a22cba174..2bff4c4dc 100644 --- a/src/dom_components/view/ComponentImageView.js +++ b/src/dom_components/view/ComponentImageView.js @@ -3,9 +3,9 @@ define(['backbone', './ComponentView'], return ComponentView.extend({ - tagName : 'img', + tagName: 'img', - events : { + events: { 'dblclick' : 'openModal', }, diff --git a/src/dom_components/view/ComponentMapView.js b/src/dom_components/view/ComponentMapView.js new file mode 100644 index 000000000..1857c21e8 --- /dev/null +++ b/src/dom_components/view/ComponentMapView.js @@ -0,0 +1,15 @@ +define(['backbone', './ComponentImageView'], + function (Backbone, ComponentView) { + + return ComponentView.extend({ + + events: {}, + + initialize: function(o){ + ComponentView.prototype.initialize.apply(this, arguments); + //on width/height change update static url + //zomm 1-22 + }, + + }); +}); diff --git a/src/dom_components/view/ComponentsView.js b/src/dom_components/view/ComponentsView.js index fd748aee4..bab0293c9 100644 --- a/src/dom_components/view/ComponentsView.js +++ b/src/dom_components/view/ComponentsView.js @@ -52,6 +52,11 @@ function(Backbone, require) { this.compViewLink = require('./ComponentLinkView'); viewObject = this.compViewLink; break; + case 'map': + if(!this.compViewMap) + this.compViewMap = require('./ComponentMapView'); + viewObject = this.compViewMap; + break; } var view = new viewObject({ diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 9c540d296..e9861c4d0 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -185,6 +185,14 @@ define(function () { content:'Link', style:{color: '#d983a6'} }, + },{ + id: 'map', + label: 'Map', + attributes: {class:'fa fa-map-o'}, + content: { + type: 'map', + style: {color: '#fff'} + }, }], }, diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js index 3d39d0703..e21f00ea4 100644 --- a/src/trait_manager/view/TraitView.js +++ b/src/trait_manager/view/TraitView.js @@ -18,7 +18,6 @@ define(['backbone'], function (Backbone) { this.model.off('change:value', this.onValueChange); this.listenTo(this.model, 'change:value', this.onValueChange); this.tmpl = '
'; - console.log(this.model.attributes); }, /**