Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
gallery-2012.10.03-20-02 wrumsby gallery-node-fitvids
- Loading branch information
YUI Builder
committed
Oct 3, 2012
1 parent
c925c96
commit a2fbc6d
Showing
3 changed files
with
148 additions
and
171 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
src/gallery-node-fitvids/assets/skins/sam/gallery-node-fitvids-skin.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
|
|
||
| /* nothing to see here */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| #component.supersedes= | ||
| #component.optional= | ||
| component.skinnable=true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,162 +1,159 @@ | ||
| /** | ||
| * <p>The FitVids Node Plugin transforms video embeds into fluid width video embeds. | ||
| * | ||
| * <p> | ||
| * <code> | ||
| * <script type="text/javascript"> <br> | ||
| * <br> | ||
| * // Call the "use" method, passing in "gallery-node-fitvids". This will <br> | ||
| * // load the script and CSS for the FitVids Node Plugin and all of <br> | ||
| * // the required dependencies. <br> | ||
| * <br> | ||
| * YUI().use('gallery-node-fitvids', 'event-base', function(Y) { <br> | ||
| * <br> | ||
| * // Use the 'contentready' event to initialize fitvids when <br> | ||
| * // the element that contains the video embed<br> | ||
| * // is ready to be scripted. <br> | ||
| * <br> | ||
| * Y.on('contentready', function () { <br> | ||
| * <br> | ||
| * // The scope of the callback will be a Node instance <br> | ||
| * // representing the container element (<div id="container">). <br> | ||
| * // Therefore, since "this" represents a Node instance, it <br> | ||
| * // is possible to just call "this.plug" passing in a <br> | ||
| * // reference to the FitVids Node Plugin. <br> | ||
| * <br> | ||
| * this.plug(Y.Plugin.NodeFitVids); <br> | ||
| * <br> | ||
| * }, '#container'); <br> | ||
| * <br> | ||
| * }); <br> | ||
| * <br> | ||
| * </script> <br> | ||
| * </code> | ||
| * </p> | ||
| * | ||
| * 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')); | ||
| /** | ||
| * <p>The FitVids Node Plugin transforms video embeds into fluid width video embeds. | ||
| * | ||
| * <p> | ||
| * <code> | ||
| * <script type="text/javascript"> <br> | ||
| * <br> | ||
| * // Call the "use" method, passing in "gallery-node-fitvids". This will <br> | ||
| * // load the script and CSS for the FitVids Node Plugin and all of <br> | ||
| * // the required dependencies. <br> | ||
| * <br> | ||
| * YUI().use('gallery-node-fitvids', 'event-base', function(Y) { <br> | ||
| * <br> | ||
| * // Use the 'contentready' event to initialize fitvids when <br> | ||
| * // the element that contains the video embed<br> | ||
| * // is ready to be scripted. <br> | ||
| * <br> | ||
| * Y.on('contentready', function () { <br> | ||
| * <br> | ||
| * // The scope of the callback will be a Node instance <br> | ||
| * // representing the container element (<div id="container">). <br> | ||
| * // Therefore, since "this" represents a Node instance, it <br> | ||
| * // is possible to just call "this.plug" passing in a <br> | ||
| * // reference to the FitVids Node Plugin. <br> | ||
| * <br> | ||
| * this.plug(Y.Plugin.NodeFitVids); <br> | ||
| * <br> | ||
| * }, '#container'); <br> | ||
| * <br> | ||
| * }); <br> | ||
| * <br> | ||
| * </script> <br> | ||
| * </code> | ||
| * </p> | ||
| * | ||
| * 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('<div class="' + CLASS_NAME + '"></div>'); | ||
| this.ancestor(ANCESTOR_SELECTOR).setStyle('paddingTop', (aspectRatio * 100) + '%'); | ||
| this.wrap('<div class="' + CLASS_NAME + '"></div>'); | ||
| 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 | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
| }, { | ||
| 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 | ||
| } | ||
| }); |