From 6c640987b3d86f97e36a9bb1d5619c9d34385930 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 8 Jun 2015 16:33:53 -0400 Subject: [PATCH] Finishes embed component --- src/definitions/modules/embed.js | 169 +++++++++++---------- src/definitions/modules/embed.less | 20 ++- src/themes/default/modules/embed.variables | 28 +++- 3 files changed, 128 insertions(+), 89 deletions(-) diff --git a/src/definitions/modules/embed.js b/src/definitions/modules/embed.js index 9c55e0709..8289e6af1 100644 --- a/src/definitions/modules/embed.js +++ b/src/definitions/modules/embed.js @@ -63,6 +63,7 @@ $.fn.embed = function(parameters) { initialize: function() { module.debug('Initializing embed'); + module.determine.autoplay(); module.create(); module.bind.events(); module.instantiate(); @@ -94,7 +95,7 @@ $.fn.embed = function(parameters) { bind: { events: function() { - if( module.is.video() ) { + if( module.has.placeholder() ) { module.debug('Adding placeholder events'); $module .on('click' + eventNamespace, selector.placeholder, module.createAndShow) @@ -135,6 +136,7 @@ $.fn.embed = function(parameters) { .html( module.generate.embed(url) ) .appendTo($module) ; + settings.onCreate.call(element, url); module.debug('Creating embed object', $embed); }, @@ -152,7 +154,6 @@ $.fn.embed = function(parameters) { .data(metadata.url, url) ; module.create(); - settings.onChange.call(element); }, // clears embed @@ -223,6 +224,11 @@ $.fn.embed = function(parameters) { }, determine: { + autoplay: function() { + if(module.should.autoplay()) { + settings.autoplay = true; + } + }, source: function(url) { var matchedSource = false @@ -313,13 +319,13 @@ $.fn.embed = function(parameters) { }, parameters: function(source, extraParameters) { var - sourceParameters = (sources[source].parameters !== undefined) + parameters = (sources[source] && sources[source].parameters !== undefined) ? sources[source].parameters(settings) - : {}, - parameters + : {} ; + extraParameters = extraParameters || settings.parameters; if(extraParameters) { - parameters = $.extend({}, sourceParameters, extraParameters); + parameters = $.extend({}, parameters, extraParameters); } parameters = settings.onEmbed(parameters); return module.encode.parameters(parameters); @@ -332,13 +338,16 @@ $.fn.embed = function(parameters) { } }, - is: { + should: { autoplay: function() { return (settings.autoplay === 'auto') - ? ($module.data('image') !== undefined) + ? (settings.placeholder || $module.data(metadata.placeholder) !== undefined) : settings.autoplay ; - }, + } + }, + + is: { video: function() { return module.get.type() == 'video'; } @@ -538,30 +547,22 @@ $.fn.embed.settings = { id : false, // standard video settings - autoplay : 'auto', - color : '#444444', - hd : true, - showUI : false, + autoplay : 'auto', + color : '#444444', + hd : true, + brandedUI : false, + + // additional parameters to include with the embed + parameters: false, onDisplay : function() {}, onPlaceholderDisplay : function() {}, onReset : function() {}, - onChange : function() {}, + onCreate : function(url) {}, onEmbed : function(parameters) { return parameters; }, - width : 'auto', - height : 'auto', - - // additional parameters to include with the embed - parameters: false, - - // callbacks not coded yet (needs to use jsapi) - api : true, - onPause : function() {}, - onStop : function() {}, - metadata : { id : 'id', icon : 'icon', @@ -584,67 +585,75 @@ $.fn.embed.settings = { embed : '.embed', placeholder : '.placeholder', play : '.play' - } -}; + }, -$.fn.embed.settings.sources = { - youtube: { - name : 'youtube', - type : 'video', - icon : 'video play', - domain : 'youtube.com', - url : '//www.youtube.com/embed/{id}', - parameters: function(settings) { - return { - autohide : !settings.showUI, - autoplay : settings.autoplay, - color : settings.colors || undefined, - hq : settings.hd, - jsapi : settings.api, - modestbranding : 1 - }; + sources: { + youtube: { + name : 'youtube', + type : 'video', + icon : 'video play', + domain : 'youtube.com', + url : '//www.youtube.com/embed/{id}', + parameters: function(settings) { + return { + autohide : !settings.brandedUI, + autoplay : settings.autoplay, + color : settings.colors || undefined, + hq : settings.hd, + jsapi : settings.api, + modestbranding : !settings.brandedUI + }; + } + }, + vimeo: { + name : 'vimeo', + type : 'video', + icon : 'video play', + domain : 'vimeo.com', + url : '//www.youtube.com/embed/{id}', + parameters: function(settings) { + return { + api : settings.api, + autoplay : settings.autoplay, + byline : settings.brandedUI, + color : settings.colors || undefined, + portrait : settings.brandedUI, + title : settings.brandedUI + }; + } } }, - vimeo: { - name : 'vimeo', - type : 'video', - icon : 'video play', - domain : 'vimeo.com', - url : '//www.youtube.com/embed/{id}', - parameters: function(settings) { - return { - api : settings.api, - autoplay : settings.autoplay, - byline : settings.showUI, - color : settings.colors || undefined, - portrait : settings.showUI, - title : settings.showUI - }; - } - } -}; -$.fn.embed.settings.templates = { - iframe : function(url, parameters) { - return '' - + '' - ; - }, - placeholder : function(image, icon) { - var - html = '' - ; - if(icon) { - html += ''; - } - if(image) { - html += ''; + templates: { + iframe : function(url, parameters) { + return '' + + '' + ; + }, + placeholder : function(image, icon) { + var + html = '' + ; + if(icon) { + html += ''; + } + if(image) { + html += ''; + } + return html; } - return html; - } + }, + + // NOT YET IMPLEMENTED + api : true, + onPause : function() {}, + onPlay : function() {}, + onStop : function() {} + }; + })( jQuery, window , document ); diff --git a/src/definitions/modules/embed.less b/src/definitions/modules/embed.less index a046887ce..233cc1d88 100644 --- a/src/definitions/modules/embed.less +++ b/src/definitions/modules/embed.less @@ -65,6 +65,7 @@ /* Placeholder Image */ .ui.embed > .placeholder { position: absolute; + cursor: pointer; top: 0px; left: 0px; display: block; @@ -85,11 +86,25 @@ left: 0px; width: 100%; height: 100%; + z-index: 2; +} +.ui.embed > .icon:after { + position: absolute; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + z-index: 3; + content: ''; + background: @placeholderBackground; + opacity: @placeholderBackgroundOpacity; + transition: @placeholderBackgroundTransition; } .ui.embed > .icon:before { position: absolute; top: 50%; left: 50%; + z-index: 4; transform: translateX(-50%) translateY(-50%); color: @iconColor; @@ -107,8 +122,9 @@ Hover ---------------*/ -.ui.embed .icon:hover { - background: @hoverIconBackground; +.ui.embed .icon:hover:after { + background: @hoverPlaceholderBackground; + opacity: @hoverPlaceholderBackgroundOpacity; } .ui.embed .icon:hover:before { color: @hoverIconColor; diff --git a/src/themes/default/modules/embed.variables b/src/themes/default/modules/embed.variables index b4f14a079..355076d2b 100644 --- a/src/themes/default/modules/embed.variables +++ b/src/themes/default/modules/embed.variables @@ -8,23 +8,37 @@ /* Simple */ @background: @lightGrey; +@transitionDuration: 0.5s; +@transitionEasing: @defaultEasing; /* Placeholder */ -@placeholderBackground: @background; +@placeholderUnderlay: @background; + +/* Placeholder Overlayed Background */ +@placeholderBackground: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); +@placeholderBackgroundOpacity: 0.5; +@placeholderBackgroundTransition: opacity @transitionDuration @transitionEasing; /* Icon */ -@iconSize: 7rem; -@iconTransition: color @defaultDuration @defaultEasing; -@iconColor: @invertedTextColor; -@iconShadow: @subtleShadow; +@iconBackground: @veryStrongTransparentBlack; +@iconSize: 6rem; +@iconTransition: + opacity @transitionDuration @transitionEasing, + color @transitionDuration @transitionEasing +; +@iconColor: @white; +@iconShadow: + 0px 2px 10px rgba(34, 36, 38, 0.2) +; @iconZIndex: 10; /*------------------- States --------------------*/ -/* Video */ -@hoverIconBackground: rgba(0, 0, 0, 0); +/* Hover */ +@hoverPlaceholderBackground: @placeholderBackground; +@hoverPlaceholderBackgroundOpacity: 1; @hoverIconColor: @white;