diff --git a/src/gallery-node-fitvids/assets/skins/sam/gallery-node-fitvids-skin.css b/src/gallery-node-fitvids/assets/skins/sam/gallery-node-fitvids-skin.css index 8b13789179..e5aa092a43 100644 --- a/src/gallery-node-fitvids/assets/skins/sam/gallery-node-fitvids-skin.css +++ b/src/gallery-node-fitvids/assets/skins/sam/gallery-node-fitvids-skin.css @@ -1 +1 @@ - +/* nothing to see here */ \ No newline at end of file diff --git a/src/gallery-node-fitvids/build.properties b/src/gallery-node-fitvids/build.properties index 008a5b5577..dee1fa634a 100644 --- a/src/gallery-node-fitvids/build.properties +++ b/src/gallery-node-fitvids/build.properties @@ -1,29 +1,9 @@ -# My Custom Module Build Properties - -# As long as the 'builder' project is cloned to the default folder -# next to the 'yui3-gallery' project folder, the 'builddir' property does not -# need to be changed -# # If the 'builder' project is checked out to an alternate location, this # property should be updated to point to the checkout location. builddir=../../../builder/componentbuild - -# The name of the component. E.g. event, attribute, widget component=gallery-node-fitvids - -# The list of files which should be concatenated to create the component -# NOTE: For a css component. (e.g. cssfonts, cssgrids etc.) use component.cssfiles instead. -# component.jsfiles=my.custom.module.js, my.custom.moduleHelperClass.js, my.custom.moduleSubComponentClass.js component.jsfiles=node-fitvids.js - -# The list of modules this component. requires. Used to set up the Y.add module call for YUI 3. component.requires=plugin, base-build, node-base, node-style, node-pluginhost, classnamemanager - -# The list of modules this component. supersedes. Used to set up the Y.add module call for YUI 3. -component.supersedes= - -# The list of modules that are optional for this module. Used to set up the Y.add module call for YUI 3. -component.optional= -# If your module has a skin file, set this flag to "true" -component.skinnable=true -#component.skinnable=true \ No newline at end of file +#component.supersedes= +#component.optional= +component.skinnable=true \ No newline at end of file diff --git a/src/gallery-node-fitvids/js/node-fitvids.js b/src/gallery-node-fitvids/js/node-fitvids.js index 2e63ca9d15..06757b59eb 100644 --- a/src/gallery-node-fitvids/js/node-fitvids.js +++ b/src/gallery-node-fitvids/js/node-fitvids.js @@ -1,162 +1,159 @@ -/** - *

The FitVids Node Plugin transforms video embeds into fluid width video embeds. - * - *

- * - * <script type="text/javascript">
- *
- * // Call the "use" method, passing in "gallery-node-fitvids". This will
- * // load the script and CSS for the FitVids Node Plugin and all of
- * // the required dependencies.
- *
- * YUI().use('gallery-node-fitvids', 'event-base', function(Y) {
- *
- * // Use the 'contentready' event to initialize fitvids when
- * // the element that contains the video embed
- * // is ready to be scripted.
- *
- * Y.on('contentready', function () {
- *
- * // The scope of the callback will be a Node instance
- * // representing the container element (<div id="container">).
- * // Therefore, since "this" represents a Node instance, it
- * // is possible to just call "this.plug" passing in a
- * // reference to the FitVids Node Plugin.
- *
- * this.plug(Y.Plugin.NodeFitVids);
- *
- * }, '#container');
- *
- * });
- *
- * </script>
- * - *

- * - * Based on FitVids - https://github.com/davatron5000/FitVids.js - * - * @module gallery-node-fitvids - */ - -'use strict'; - -var CLASS_NAME = Y.ClassNameManager.getClassName('fluid-width-video-wrapper'), - - ANCESTOR_SELECTOR = '.' + CLASS_NAME, - - DATA_KEY = 'fitvids:originalAttributes', - - SELECTORS = [ - 'iframe[src^="http://player.vimeo.com"]', - 'iframe[src^="http://www.youtube.com"]', - 'iframe[src^="https://www.youtube.com"]', - 'iframe[src^="http://www.kickstarter.com"]', - 'object', - 'embed' - ]; - -function getSelectors(customSelector) { - var selectors = [].concat(SELECTORS); - - if (customSelector) { - selectors.push(customSelector); - } - - return selectors.join(','); -} - -/** - * FitVids Node Plugin. - * - * @namespace Y.Plugin - * @class NodeFitVids - * @extends Plugin.Base - */ -Y.namespace('Plugin').NodeFitVids = Y.Base.create('NodeFitVids', Y.Plugin.Base, [], { - initializer: function(config) { - var host = this.get('host'), - query = getSelectors(this.get('customSelector')); + /** + *

The FitVids Node Plugin transforms video embeds into fluid width video embeds. + * + *

+ * + * <script type="text/javascript">
+ *
+ * // Call the "use" method, passing in "gallery-node-fitvids". This will
+ * // load the script and CSS for the FitVids Node Plugin and all of
+ * // the required dependencies.
+ *
+ * YUI().use('gallery-node-fitvids', 'event-base', function(Y) {
+ *
+ * // Use the 'contentready' event to initialize fitvids when
+ * // the element that contains the video embed
+ * // is ready to be scripted.
+ *
+ * Y.on('contentready', function () {
+ *
+ * // The scope of the callback will be a Node instance
+ * // representing the container element (<div id="container">).
+ * // Therefore, since "this" represents a Node instance, it
+ * // is possible to just call "this.plug" passing in a
+ * // reference to the FitVids Node Plugin.
+ *
+ * this.plug(Y.Plugin.NodeFitVids);
+ *
+ * }, '#container');
+ *
+ * });
+ *
+ * </script>
+ * + *

+ * + * Based on FitVids - https://github.com/davatron5000/FitVids.js + * + * @module gallery-node-fitvids + */ + + var CLASS_NAME = Y.ClassNameManager.getClassName('fluid-width-video-wrapper'), + + ANCESTOR_SELECTOR = '.' + CLASS_NAME, - if (!Y.instanceOf(host, Y.Node)) { - return; + DATA_KEY = 'fitvids:originalAttributes', + + SELECTORS = [ + 'iframe[src^="http://player.vimeo.com"]', + 'iframe[src^="http://www.youtube.com"]', + 'iframe[src^="https://www.youtube.com"]', + 'iframe[src^="http://www.kickstarter.com"]', + 'object', + 'embed' + ]; + + function getSelectors(customSelector) { + var selectors = [].concat(SELECTORS); + + if (customSelector) { + selectors.push(customSelector); } - host.all(query).each(function() { - var tagName = this.get('tagName'), - parentNode = this.get('parentNode'), - heightAttr = this.get('height'), - widthAttr = this.get('width'), - data = {}, - height, - width, - aspectRatio; + return selectors.join(','); + } - if ((tagName === 'EMBED' && parentNode.get('tagName') === 'OBJECT') || parentNode.hasClass(CLASS_NAME)) { + /** + * FitVids Node Plugin. + * + * @namespace Y.Plugin + * @class NodeFitVids + * @extends Plugin.Base + */ + Y.namespace('Plugin').NodeFitVids = Y.Base.create('NodeFitVids', Y.Plugin.Base, [], { + initializer: function (config) { + var host = this.get('host'), + query = getSelectors(this.get('customSelector')); + + if (!Y.instanceOf(host, Y.Node)) { return; } - height = tagName === 'OBJECT' ? heightAttr : this.getComputedStyle('height'); - width = this.getComputedStyle('width'); - aspectRatio = parseInt(height, 10) / parseInt(width, 10); + host.all(query).each(function () { + var tagName = this.get('tagName'), + parentNode = this.get('parentNode'), + heightAttr = this.get('height'), + widthAttr = this.get('width'), + data = {}, + height, + width, + aspectRatio; + + if ((tagName === 'EMBED' && parentNode.get('tagName') === 'OBJECT') || parentNode.hasClass(CLASS_NAME)) { + return; + } + + height = tagName === 'OBJECT' ? heightAttr : this.getComputedStyle('height'); + width = this.getComputedStyle('width'); + aspectRatio = parseInt(height, 10) / parseInt(width, 10); - this.wrap('
'); - this.ancestor(ANCESTOR_SELECTOR).setStyle('paddingTop', (aspectRatio * 100) + '%'); + this.wrap('
'); + this.ancestor(ANCESTOR_SELECTOR).setStyle('paddingTop', (aspectRatio * 100) + '%'); - if (heightAttr) { - data.height = heightAttr; - this.removeAttribute('height'); - } - - if (widthAttr) { - data.width = widthAttr; - this.removeAttribute('width'); - } + if (heightAttr) { + data.height = heightAttr; + this.removeAttribute('height'); + } + + if (widthAttr) { + data.width = widthAttr; + this.removeAttribute('width'); + } - // Save the original values of the height and width so we can restore them on unplug() - this.setData(DATA_KEY, data); - }); - }, - - - destructor: function() { - var host = this.get('host'), - query = getSelectors(this.get('customSelector')); + // Save the original values of the height and width so we can restore them on unplug() + this.setData(DATA_KEY, data); + }); + }, - if (!Y.instanceOf(host, Y.Node)) { - return; - } - host.all(query).each(function() { - var tagName = this.get('tagName'), - originalDimensions; + destructor: function () { + var host = this.get('host'), + query = getSelectors(this.get('customSelector')); - if (this.ancestor(ANCESTOR_SELECTOR)) { - this.unwrap(); - - originalDimensions = this.getData(DATA_KEY) || {}; + if (!Y.instanceOf(host, Y.Node)) { + return; + } + + host.all(query).each(function () { + var originalDimensions; - if (originalDimensions.height) { - this.set('height', originalDimensions.height); + if (this.ancestor(ANCESTOR_SELECTOR)) { + this.unwrap(); + + originalDimensions = this.getData(DATA_KEY) || {}; + + if (originalDimensions.height) { + this.set('height', originalDimensions.height); + } + + if (originalDimensions.width) { + this.set('width', originalDimensions.width); + } + + this.clearData(DATA_KEY); } - - if (originalDimensions.width) { - this.set('width', originalDimensions.width); - } - - this.clearData(DATA_KEY); - } - }); - } -}, { - NS: 'fitvids', - - ATTRS: { - /** - * @attribute customSelector - * @description Video vendor selector if none of the default selectors match the the player you wish to target. - * @type String - * @writeOnce - */ - customSelector: null - } -}); \ No newline at end of file + }); + } + }, { + NS: 'fitvids', + + ATTRS: { + /** + * @attribute customSelector + * @description Video vendor selector if none of the default selectors match the the player you wish to target. + * @type String + * @writeOnce + */ + customSelector: null + } + }); \ No newline at end of file