From 9300c935272f808a709b75007a277e5e5770a8ac Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 3 Nov 2016 15:18:58 +0100 Subject: [PATCH] Update video and map parsers --- index.html | 9 +++- src/dom_components/model/ComponentImage.js | 32 ++++++++++++++- src/dom_components/model/ComponentLink.js | 2 +- src/dom_components/model/ComponentMap.js | 22 +++++++++- src/dom_components/model/ComponentVideo.js | 48 ++++++++++++++++++++-- src/parser/model/ParserHtml.js | 4 +- 6 files changed, 106 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index a5a16174d..20f68b03b 100755 --- a/index.html +++ b/index.html @@ -26,6 +26,8 @@ Row31 Row32 Row33 + + -->
@@ -36,8 +38,6 @@
WEB
- -
Build your templates without coding
All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel
Hover me
@@ -782,6 +782,11 @@ margin: 20px 30px; } + .iframe { + height: 300px; + width: 500px; + } + @media (max-width: 768px){ .foot-form-cont{ width:400px; diff --git a/src/dom_components/model/ComponentImage.js b/src/dom_components/model/ComponentImage.js index 6b1ff27e6..a98f06c59 100644 --- a/src/dom_components/model/ComponentImage.js +++ b/src/dom_components/model/ComponentImage.js @@ -30,7 +30,35 @@ define(['./Component'], attr += ' src="' + src + '"'; return attr; - } + }, + + /** + * Parse uri + * @param {string} uri + * @return {object} + * @private + */ + parseUri: function(uri) { + var el = document.createElement('a'); + el.href = uri; + var query = {}; + var qrs = el.search.substring(1).split('&'); + for (var i = 0; i < qrs.length; i++) { + var pair = qrs[i].split('='); + var name = decodeURIComponent(pair[0]); + if(name) + query[name] = decodeURIComponent(pair[1]); + } + return { + hostname: el.hostname, + pathname: el.pathname, + protocol: el.protocol, + search: el.search, + hash: el.hash, + port: el.port, + query: query, + }; + }, },{ @@ -45,7 +73,7 @@ define(['./Component'], isComponent: function(el) { var result = ''; if(el.tagName == 'IMG'){ - result = {type: 'image', tagName: 'img'}; + result = {type: 'image'}; result.src = el.src; } return result; diff --git a/src/dom_components/model/ComponentLink.js b/src/dom_components/model/ComponentLink.js index 95849f02b..d4125c845 100644 --- a/src/dom_components/model/ComponentLink.js +++ b/src/dom_components/model/ComponentLink.js @@ -21,7 +21,7 @@ define(['./ComponentText'], isComponent: function(el) { var result = ''; if(el.tagName == 'A'){ - result = {type: 'link', tagName: 'a'}; + result = {type: 'link'}; } return result; }, diff --git a/src/dom_components/model/ComponentMap.js b/src/dom_components/model/ComponentMap.js index 7ad0146d2..010028ac5 100644 --- a/src/dom_components/model/ComponentMap.js +++ b/src/dom_components/model/ComponentMap.js @@ -33,6 +33,26 @@ define(['./ComponentImage'], }], }), + initialize: function(o, opt) { + if(this.get('src')) + this.parseFromSrc(); + Component.prototype.initialize.apply(this, arguments); + }, + + /** + * Set attributes by src string + */ + parseFromSrc: function() { + var uri = this.parseUri(this.get('src')); + var qr = uri.query; + if(qr.q) + this.set('address', qr.q); + if(qr.z) + this.set('zoom', qr.z); + if(qr.t) + this.set('mapType', qr.t); + }, + },{ /** @@ -47,7 +67,7 @@ define(['./ComponentImage'], var result = ''; if(el.tagName == 'IFRAME' && /maps\.google\.com/.test(el.src) ){ - result = {type: 'map', src: el.src, tagName: 'iframe'}; + result = {type: 'map', src: el.src}; } return result; }, diff --git a/src/dom_components/model/ComponentVideo.js b/src/dom_components/model/ComponentVideo.js index e13e766be..fa0ae2166 100644 --- a/src/dom_components/model/ComponentVideo.js +++ b/src/dom_components/model/ComponentVideo.js @@ -1,6 +1,9 @@ define(['./ComponentImage'], function (Component) { + var yt = 'yt'; + var vi = 'vi'; + return Component.extend({ defaults: _.extend({}, Component.prototype.defaults, { @@ -20,12 +23,50 @@ define(['./ComponentImage'], }), initialize: function(o, opt) { - this.set('traits', this.getSourceTraits()); + var traits = []; + var prov = this.get('provider'); + switch (prov) { + case yt: + traits = this.getYoutubeTraits(); + break; + case vi: + traits = this.getVimeoTraits(); + break; + default: + traits = this.getSourceTraits(); + } + if(this.get('src')) + this.parseFromSrc(); + this.set('traits', traits); Component.prototype.initialize.apply(this, arguments); this.listenTo(this, 'change:provider', this.updateTraits); this.listenTo(this, 'change:videoId', this.updateSrc); }, + /** + * Set attributes by src string + */ + parseFromSrc: function() { + var prov = this.get('provider'); + var uri = this.parseUri(this.get('src')); + var qr = uri.query; + switch (prov) { + case yt: case vi: + var videoId = uri.pathname.split('/').pop(); + this.set('videoId', videoId); + if(qr.autoplay) + this.set('autoplay', 1); + if(qr.loop) + this.set('loop', 1); + if(parseInt(qr.controls) === 0) + this.set('controls', 0); + if(qr.color) + this.set('color', qr.color); + break; + default: + } + }, + /** * Update src on change of video ID * @private @@ -259,15 +300,14 @@ define(['./ComponentImage'], var isExtProv = isYtProv || isViProv; if(el.tagName == 'VIDEO' || (el.tagName == 'IFRAME' && isExtProv) ){ - result = {type: 'video', tagName: 'video'}; + result = {type: 'video'}; if(el.src) result.src = el.src; if(isExtProv){ - result.tagName = 'iframe'; if(isYtProv) result.provider = 'yt'; else if(isViProv) - result.provider = 'vi'; + result.provider = 'vi'; } } return result; diff --git a/src/parser/model/ParserHtml.js b/src/parser/model/ParserHtml.js index 1f1c30180..c3c40b719 100644 --- a/src/parser/model/ParserHtml.js +++ b/src/parser/model/ParserHtml.js @@ -68,7 +68,6 @@ define(function(require) { var attrsLen = attrs.length; var prevI = result.length - 1; var prevSib = result[prevI]; - model.tagName = node.tagName ? node.tagName.toLowerCase() : ''; var ct = this.compTypes; if(ct){ @@ -82,6 +81,9 @@ define(function(require) { model = obj; } + if(!model.tagName) + model.tagName = node.tagName ? node.tagName.toLowerCase() : ''; + if(attrsLen) model.attributes = {};