diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index fec61cd4b..515baa527 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -42,6 +42,18 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana this.set('traits', traits); }, + /** + * Load traits + * @param {Array} traits + * @private + */ + loadTraits: function(traits) { + var trt = new Traits(); + trt.setTarget(this); + trt.add(traits); + this.set('traits', trt); + }, + /** * Normalize input classes from array to array of objects * @param {Array} arr diff --git a/src/dom_components/model/ComponentVideo.js b/src/dom_components/model/ComponentVideo.js index 2dbce5530..c7b3cb9ed 100644 --- a/src/dom_components/model/ComponentVideo.js +++ b/src/dom_components/model/ComponentVideo.js @@ -7,9 +7,38 @@ define(['./ComponentImage'], type: 'video', tagName: 'video', provider: '', // on change of provider, traits are switched + loop: 0, + muted: 0, + autoplay: 0, + controls: 1, sources: [], }), + initialize: function(o, opt) { + this.set('traits', this.getSourceTraits()); + Component.prototype.initialize.apply(this, arguments); + this.listenTo(this, 'change:provider', this.updateTraits); + }, + + /** + * Update traits by provider + * @private + */ + updateTraits: function() { + var prov = this.get('provider'); + var traits = this.getSourceTraits(); + switch (prov) { + case 'yt': + traits = this.getYoutubeTraits(); + break; + case 'vi': + traits = this.getVimeoTraits(); + break; + } + this.loadTraits(traits); + this.sm.trigger('change:selectedComponent'); + }, + // Listen provider change and switch traits, in TraitView listen traits change /** @@ -23,6 +52,7 @@ define(['./ComponentImage'], label: 'Provider', name: 'provider', changeProp: 1, + value: this.get('provider'), options: [ {value: 'so', name: 'HTML5 Source'}, {value: 'yt', name: 'Youtube'}, @@ -39,10 +69,56 @@ define(['./ComponentImage'], getSourceTraits: function() { return [ this.getProviderTrait(), { - type: 'stack', - label: 'Sources', - layers: [] - }]; + label: 'Source', + name: 'src', + placeholder: 'eg. ./media/video.mp4', + changeProp: 1, + },{ + type: 'checkbox', + label: 'Autoplay', + name: 'autoplay', + changeProp: 1, + },{ + type: 'checkbox', + label: 'Loop', + name: 'loop', + changeProp: 1, + },{ + type: 'checkbox', + label: 'Controls', + name: 'controls', + changeProp: 1, + }]; + }, + + /** + * Return traits for the source provider + * @return {Array} + * @private + */ + getYoutubeTraits: function() { + return [ + this.getProviderTrait(), { + label: 'Video ID', + name: 'src', + placeholder: 'eg. jNQXAC9IVRw', + changeProp: 1, + }]; + }, + + /** + * Return traits for the source provider + * @return {Array} + * @private + */ + getVimeoTraits: function() { + return [ + this.getProviderTrait(), { + label: 'Video ID', + name: 'src', + placeholder: 'eg. 123456789', + changeProp: 1, + }]; }, }); diff --git a/src/dom_components/view/ComponentVideoView.js b/src/dom_components/view/ComponentVideoView.js index 6ef1f2eaf..4ca5cf40a 100644 --- a/src/dom_components/view/ComponentVideoView.js +++ b/src/dom_components/view/ComponentVideoView.js @@ -1,15 +1,66 @@ -define(['backbone', './ComponentView'], +define(['backbone', './ComponentImageView'], function (Backbone, ComponentView) { return ComponentView.extend({ - tagName: 'video', + tagName: 'div', events: {}, initialize: function(o){ ComponentView.prototype.initialize.apply(this, arguments); - console.log('Video view loaded'); + this.listenTo(this.model, 'change:loop change:autoplay change:controls', this.updateVideo); + }, + + /** + * Update the source of the video + * @private + */ + updateSrc: function() { + this.videoEl.src = this.model.get('src'); + console.log('update source'); + }, + + /** + * Update video parameters + * @private + */ + updateVideo: function() { + var videoEl = this.videoEl; + var md = this.model; + videoEl.loop = md.get('loop'); + videoEl.autoplay = md.get('autoplay'); + videoEl.controls = md.get('controls'); + }, + + renderByProvider: function(prov) { + var videoEl; + switch (prov) { + case 'yt': + + break; + default: + videoEl = this.renderSource(); + } + this.videoEl = videoEl; + return videoEl; + }, + + renderSource: function() { + var el = document.createElement('video'); + el.src = this.model.get('src'); + el.style.pointerEvents = 'none'; + el.style.height = '100%'; + el.style.width = '100%'; + return el; + }, + + render: function() { + ComponentView.prototype.render.apply(this, arguments); + this.updateClasses(); + var prov = this.model.get('provider'); + this.el.appendChild(this.renderByProvider(prov)); + return this; }, }); diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 7a6e2aa75..1ea6353a0 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -199,7 +199,11 @@ define(function () { attributes: {class:'fa fa-youtube-play'}, content: { type: 'video', - style: {height: '350px'} + src: 'img/video2.webm', + style: { + height: '350px', + width: '615px', + } }, }], }, diff --git a/src/trait_manager/view/TraitCheckboxView.js b/src/trait_manager/view/TraitCheckboxView.js new file mode 100644 index 000000000..c729647d7 --- /dev/null +++ b/src/trait_manager/view/TraitCheckboxView.js @@ -0,0 +1,41 @@ +define(['./TraitView'], + function (TraitView) { + + return TraitView.extend({ + + initialize: function(o) { + TraitView.prototype.initialize.apply(this, arguments); + var iconCls = this.ppfx + 'chk-icon'; + this.tmpl = '
'; + }, + + /** + * Fires when the input is changed + * @private + */ + onChange: function() { + this.model.set('value', this.getInputEl().checked); + }, + + /** + * Returns input element + * @return {HTMLElement} + * @private + */ + getInputEl: function() { + var first; + if(!this.$input) + first = 1; + var el = TraitView.prototype.getInputEl.apply(this, arguments); + if(first){ + var md = this.model; + var name = md.get('name'); + if(md.get('changeProp')){ + el.checked = this.target.get(name); + } + } + return el; + }, + + }); +}); diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js index 2d26138e9..2463c00de 100644 --- a/src/trait_manager/view/TraitView.js +++ b/src/trait_manager/view/TraitView.js @@ -75,11 +75,15 @@ define(['backbone'], function (Backbone) { getInputEl: function() { if(!this.$input){ var md = this.model; + var name = md.get('name'); var opts = { placeholder: md.get('placeholder') || md.get('default'), type: md.get('type') || 'text', value: md.get('value') }; + if(md.get('changeProp')){ + opts.value = this.target.get(name); + } if(md.get('min')) opts.min = md.get('min'); if(md.get('max')) @@ -97,7 +101,7 @@ define(['backbone'], function (Backbone) { if(!this.$input){ this.$el.append(this.tmpl); var el = this.getInputEl(); - this.$el.find('.' + this.inputhClass).html(el); + this.$el.find('.' + this.inputhClass).prepend(el); } }, diff --git a/src/trait_manager/view/TraitsView.js b/src/trait_manager/view/TraitsView.js index 0107ce745..f6d00652e 100644 --- a/src/trait_manager/view/TraitsView.js +++ b/src/trait_manager/view/TraitsView.js @@ -1,5 +1,5 @@ -define(['backbone', 'Abstract/view/DomainViews', './TraitView', './TraitSelectView'], - function (Backbone, DomainViews, TraitView, TraitSelectView) { +define(['backbone', 'Abstract/view/DomainViews', './TraitView', './TraitSelectView', './TraitCheckboxView'], + function (Backbone, DomainViews, TraitView, TraitSelectView, TraitCheckboxView) { return DomainViews.extend({ @@ -8,6 +8,7 @@ define(['backbone', 'Abstract/view/DomainViews', './TraitView', './TraitSelectVi itemsView: { 'text': TraitView, 'select': TraitSelectView, + 'checkbox': TraitCheckboxView, }, initialize: function(o) { diff --git a/styles/css/main.css b/styles/css/main.css index 603a11b58..805117829 100644 --- a/styles/css/main.css +++ b/styles/css/main.css @@ -2728,7 +2728,7 @@ div.gjs-select { .gjs-trt-trait { display: flex; - justify-content: space-between; + justify-content: start; padding: 5px 10px; font-size: 0.75em; font-weight: lighter; } @@ -3203,6 +3203,28 @@ ol.example li.placeholder:before { border-radius: 1px; height: 2px; } +.gjs-chk-icon { + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + box-sizing: border-box; + display: block; + height: 14px; + margin: 0 5px; + width: 6px; + cursor: pointer; } + +.gjs-field-checkbox { + padding: 0; + width: auto !important; } + .gjs-field-checkbox input { + display: none; } + .gjs-field-checkbox input:checked + .gjs-chk-icon { + border-color: rgba(255, 255, 255, 0.5); + border-width: 0 2px 2px 0; + border-style: solid; } + .gjs-add-trasp { background: none; border: none; diff --git a/styles/scss/main.scss b/styles/scss/main.scss index ef2e6884e..72131f2d0 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -79,6 +79,13 @@ $fontV: 5;//random(1000) appearance: $v; } +@mixin transform($v) { + -ms-transform: $v; + -webkit-transform: $v; + -moz-transform: $v; + transform: $v; +} + //.#{$app-prefix}fonts {} .#{$app-prefix}fonts::before { @@ -235,7 +242,7 @@ div.#{$app-prefix}select { } .#{$trt-prefix}trait { display: flex; - justify-content: space-between; + justify-content: start; padding: 5px 10px; font-size: 0.75em; font-weight: lighter; @@ -759,6 +766,31 @@ $arrowColor: $mainLhlColor; /*b1b1b1*/ } } +.#{$app-prefix}chk-icon{ + @include transform(rotate(45deg)); + box-sizing: border-box; + display: block; + height: 14px; + margin: 0 5px; + width: 6px; + cursor: pointer; +} + +.#{$app-prefix}field-checkbox { + padding: 0; + width: auto !important; + + input { + display: none; + } + + input:checked + .#{$app-prefix}chk-icon{ + border-color: rgba(255, 255, 255, 0.5); + border-width: 0 2px 2px 0; + border-style: solid; + } +} + .#{$app-prefix}add-trasp { background: none;