imageloader-debug.js revision bf892aff6a5186f95f716fa21af51f89466f66f2
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6mikloshYUI.add('imageloader', function(Y) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh/**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * The ImageLoader Utility is a framework to dynamically load images according to certain triggers,
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * enabling faster load times and a more responsive UI.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh *
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @module imageloader
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @requires base-base, dom-screen, node
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * A group for images. A group can have one time limit and a series of triggers. Thus the images belonging to this group must share these constraints.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @class ImgLoadGroup
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @extends Base
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @constructor
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.ImgLoadGroup = function() {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // call init first, because it sets up local vars for storing attribute-related info
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._init();
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.ImgLoadGroup.superclass.constructor.apply(this, arguments);
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh };
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.ImgLoadGroup.NAME = 'imgLoadGroup';
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.ImgLoadGroup.ATTRS = {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Name for the group. Only used to identify the group in logging statements.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @attribute name
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @type String
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh name: {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh value: ''
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh },
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Time limit, in seconds, after which images are fetched regardless of trigger events.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @attribute timeLimit
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @type Number
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib */
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib timeLimit: {
54e660c4de9d37185e3953165d053526632ef4f0johanengelen value: null
54e660c4de9d37185e3953165d053526632ef4f0johanengelen },
54e660c4de9d37185e3953165d053526632ef4f0johanengelen
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Distance below the fold for which images are loaded. Images are not loaded until they are at most this distance away from (or above) the fold.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * This check is performed at page load (domready) and after any window scroll or window resize event (until all images are loaded).
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @attribute foldDistance
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @type Number
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh foldDistance: {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh validator: Y.Lang.isNumber,
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh setter: function(val) { this._setFoldTriggers(); return val; },
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh lazyAdd: false
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh },
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
dd69425007680aafc47fdd994e1985625571d252bryce /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Class name that will identify images belonging to the group. This class name will be removed from each element in order to fetch images.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * This class should have, in its CSS style definition, "<code>background:none !important;</code>".
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @attribute className
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @type String
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh className: {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh value: null,
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh setter: function(name) { this._className = name; return name; },
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh lazyAdd: false
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh };
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh var groupProto = {
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Initialize all private members needed for the group.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @method _init
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh _init: function() {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Collection of triggers for this group.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Keeps track of each trigger's event handle, as returned from <code>Y.on</code>.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @property _triggers
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @type Array
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._triggers = [];
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Collection of images (<code>Y.ImgLoadImgObj</code> objects) registered with this group, keyed by DOM id.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @property _imgObjs
d444ed610362dab3c3e727d1b110312318b84cb8miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @type Object
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._imgObjs = {};
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Timeout object to keep a handle on the time limit.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @property _timeout
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @type Object
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._timeout = null;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * DOM elements having the class name that is associated with this group.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Elements are stored during the <code>_foldCheck</code> function and reused later during any subsequent <code>_foldCheck</code> calls - gives a slight performance improvement when the page fold is repeatedly checked.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @property _classImageEls
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @type Array
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._classImageEls = null;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Keep the CSS class name in a member variable for ease and speed.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @property _className
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @type String
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._className = null;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Boolean tracking whether the window scroll and window resize triggers have been set if this is a fold group.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @property _areFoldTriggersSet
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @type Boolean
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._areFoldTriggersSet = false;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * The maximum pixel height of the document that has been made visible.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * During fold checks, if the user scrolls up then there's no need to check for newly exposed images.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @property _maxKnownHLimit
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @type Int
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen this._maxKnownHLimit = 0;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // add a listener to domready that will start the time limit
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.on('domready', this._onloadTasks, this);
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh },
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Adds a trigger to the group. Arguments are passed to <code>Y.on</code>.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @method addTrigger
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @chainable
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib * @param {Object} obj The DOM object to attach the trigger event to
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @param {String} type The event type
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh addTrigger: function(obj, type) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (! obj || ! type) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh return this;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.log('adding trigger to group: ' + this.get('name'), 'info', 'imageloader');
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /* Need to wrap the fetch function. Event Util can't distinguish prototyped functions of different instantiations.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Leads to this scenario: groupA and groupZ both have window-scroll triggers. groupZ also has a 2-sec timeout (groupA has no timeout).
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * groupZ's timeout fires; we remove the triggers. The detach call finds the first window-scroll event with Y.ILG.p.fetch, which is groupA's.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * groupA's trigger is removed and never fires, leaving images unfetched.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh var wrappedFetch = function() {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this.fetch();
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh };
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib this._triggers.push( Y.on(type, wrappedFetch, obj, this) );
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
54e660c4de9d37185e3953165d053526632ef4f0johanengelen return this;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh },
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Adds a custom event trigger to the group.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @method addCustomTrigger
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @chainable
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @param {String} name The name of the event
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @param {Object} obj The object on which to attach the event. <code>obj</code> is optional - by default the event is attached to the <code>Y</code> instance
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen addCustomTrigger: function(name, obj) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (! name) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh return this;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
7cc06cc17ffc875601993118f9533dfe36bd2dd5johanengelen Y.log('adding custom trigger to group: ' + this.get('name'), 'info', 'imageloader');
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
7cc06cc17ffc875601993118f9533dfe36bd2dd5johanengelen // see comment in addTrigger()
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh var wrappedFetch = function() {
c87a66337fedd13cf951d99e604362432220deb5johanengelen this.fetch();
54e660c4de9d37185e3953165d053526632ef4f0johanengelen };
54e660c4de9d37185e3953165d053526632ef4f0johanengelen if (Y.Lang.isUndefined(obj)) {
54e660c4de9d37185e3953165d053526632ef4f0johanengelen this._triggers.push( Y.on(name, wrappedFetch, this) );
54e660c4de9d37185e3953165d053526632ef4f0johanengelen }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh else {
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen this._triggers.push( obj.on(name, wrappedFetch, this) );
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
54e660c4de9d37185e3953165d053526632ef4f0johanengelen
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen return this;
54e660c4de9d37185e3953165d053526632ef4f0johanengelen },
54e660c4de9d37185e3953165d053526632ef4f0johanengelen
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen /**
54e660c4de9d37185e3953165d053526632ef4f0johanengelen * Sets the window scroll and window resize triggers for any group that is fold-conditional (i.e., has a fold distance set).
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen * @method _setFoldTriggers
54e660c4de9d37185e3953165d053526632ef4f0johanengelen * @private
54e660c4de9d37185e3953165d053526632ef4f0johanengelen */
54e660c4de9d37185e3953165d053526632ef4f0johanengelen _setFoldTriggers: function() {
54e660c4de9d37185e3953165d053526632ef4f0johanengelen if (this._areFoldTriggersSet) {
54e660c4de9d37185e3953165d053526632ef4f0johanengelen return;
e21d4ac16bee82a55fd227660aa14af10ecac9b1johanengelen }
54e660c4de9d37185e3953165d053526632ef4f0johanengelen
54e660c4de9d37185e3953165d053526632ef4f0johanengelen Y.log('setting window scroll and resize events for group: ' + this.get('name'), 'info', 'imageloader');
54e660c4de9d37185e3953165d053526632ef4f0johanengelen
54e660c4de9d37185e3953165d053526632ef4f0johanengelen var wrappedFoldCheck = function() {
54e660c4de9d37185e3953165d053526632ef4f0johanengelen this._foldCheck();
54e660c4de9d37185e3953165d053526632ef4f0johanengelen };
54e660c4de9d37185e3953165d053526632ef4f0johanengelen this._triggers.push( Y.on('scroll', wrappedFoldCheck, window, this) );
54e660c4de9d37185e3953165d053526632ef4f0johanengelen this._triggers.push( Y.on('resize', wrappedFoldCheck, window, this) );
54e660c4de9d37185e3953165d053526632ef4f0johanengelen this._areFoldTriggersSet = true;
54e660c4de9d37185e3953165d053526632ef4f0johanengelen },
54e660c4de9d37185e3953165d053526632ef4f0johanengelen
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Performs necessary setup at domready time.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Initiates time limit for group; executes the fold check for the images.
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen * @method _onloadTasks
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen _onloadTasks: function() {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh var timeLim = this.get('timeLimit');
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen if (timeLim && timeLim > 0) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.log('setting time limit of ' + timeLim + ' seconds for group: ' + this.get('name'), 'info', 'imageloader');
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._timeout = setTimeout(this._getFetchTimeout(), timeLim * 1000);
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
54e660c4de9d37185e3953165d053526632ef4f0johanengelen
54e660c4de9d37185e3953165d053526632ef4f0johanengelen if (! Y.Lang.isUndefined(this.get('foldDistance'))) {
54e660c4de9d37185e3953165d053526632ef4f0johanengelen this._foldCheck();
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh },
54e660c4de9d37185e3953165d053526632ef4f0johanengelen
54e660c4de9d37185e3953165d053526632ef4f0johanengelen /**
54e660c4de9d37185e3953165d053526632ef4f0johanengelen * Returns the group's <code>fetch</code> method, with the proper closure, for use with <code>setTimeout</code>.
54e660c4de9d37185e3953165d053526632ef4f0johanengelen * @method _getFetchTimeout
54e660c4de9d37185e3953165d053526632ef4f0johanengelen * @return {Function} group's <code>fetch</code> method
e21d4ac16bee82a55fd227660aa14af10ecac9b1johanengelen * @private
e21d4ac16bee82a55fd227660aa14af10ecac9b1johanengelen */
e21d4ac16bee82a55fd227660aa14af10ecac9b1johanengelen _getFetchTimeout: function() {
e21d4ac16bee82a55fd227660aa14af10ecac9b1johanengelen var self = this;
e21d4ac16bee82a55fd227660aa14af10ecac9b1johanengelen return function() { self.fetch(); };
e21d4ac16bee82a55fd227660aa14af10ecac9b1johanengelen },
e21d4ac16bee82a55fd227660aa14af10ecac9b1johanengelen
e21d4ac16bee82a55fd227660aa14af10ecac9b1johanengelen /**
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen * Registers an image with the group.
54e660c4de9d37185e3953165d053526632ef4f0johanengelen * Arguments are passed through to a <code>Y.ImgLoadImgObj</code> constructor; see that class' attribute documentation for detailed information. "<code>domId</code>" is a required attribute.
54e660c4de9d37185e3953165d053526632ef4f0johanengelen * @method registerImage
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen * @param {Object} * A configuration object literal with attribute name/value pairs (passed through to a <code>Y.ImgLoadImgObj</code> constructor)
54e660c4de9d37185e3953165d053526632ef4f0johanengelen * @return {Object} <code>Y.ImgLoadImgObj</code> that was registered
54e660c4de9d37185e3953165d053526632ef4f0johanengelen */
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen registerImage: function() {
54e660c4de9d37185e3953165d053526632ef4f0johanengelen var domId = arguments[0].domId;
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen if (! domId) {
54e660c4de9d37185e3953165d053526632ef4f0johanengelen return null;
54e660c4de9d37185e3953165d053526632ef4f0johanengelen }
54e660c4de9d37185e3953165d053526632ef4f0johanengelen
54e660c4de9d37185e3953165d053526632ef4f0johanengelen Y.log('adding image with id: ' + domId + ' to group: ' + this.get('name'), 'info', 'imageloader');
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._imgObjs[domId] = new Y.ImgLoadImgObj(arguments[0]);
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh return this._imgObjs[domId];
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh },
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Displays the images in the group.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * This method is called when a trigger fires or the time limit expires; it shouldn't be called externally, but is not private in the rare event that it needs to be called immediately.
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib * @method fetch
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh fetch: function() {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.log('Fetching images in group: "' + this.get('name') + '".', 'info', 'imageloader');
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // done with the triggers
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib this._clearTriggers();
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // fetch whatever we need to by className
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._fetchByClass();
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // fetch registered images
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh for (var id in this._imgObjs) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (this._imgObjs.hasOwnProperty(id)) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._imgObjs[id].fetch();
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh },
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Clears the timeout and all triggers associated with the group.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @method _clearTriggers
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh _clearTriggers: function() {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh clearTimeout(this._timeout);
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // detach all listeners
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh for (var i=0, len = this._triggers.length; i < len; i++) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._triggers[i].detach();
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh },
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Checks the position of each image in the group. If any part of the image is within the specified distance (<code>foldDistance</code>) of the client viewport, the image is fetched immediately.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @method _foldCheck
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh _foldCheck: function() {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.log('Checking for images above the fold in group: "' + this.get('name') + '"', 'info', 'imageloader');
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh var allFetched = true,
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh viewReg = Y.DOM.viewportRegion(),
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh hLimit = viewReg.bottom + this.get('foldDistance'),
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh id, imgFetched, els, i, len;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // unless we've uncovered new frontiers, there's no need to continue
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (hLimit <= this._maxKnownHLimit) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh return;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._maxKnownHLimit = hLimit;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh for (id in this._imgObjs) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (this._imgObjs.hasOwnProperty(id)) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh imgFetched = this._imgObjs[id].fetch(hLimit);
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh allFetched = allFetched && imgFetched;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // and by class
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (this._className) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (this._classImageEls === null) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // get all the relevant elements and store them
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._classImageEls = [];
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh els = Y.all('.' + this._className);
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh els.each( function(node) { this._classImageEls.push( { el: node, y: node.getY(), fetched: false } ); }, this);
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh els = this._classImageEls;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh for (i=0, len = els.length; i < len; i++) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (els[i].fetched) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh continue;
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (els[i].y && els[i].y <= hLimit) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh els[i].el.removeClass(this._className);
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh els[i].fetched = true;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.log('Image with id "' + els[i].el.get('id') + '" is within distance of the fold. Fetching image. (Image registered by class name with the group - may not have an id.)', 'info', 'imageloader');
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen }
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen else {
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen allFetched = false;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // if allFetched, remove listeners
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (allFetched) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.log('All images fetched; removing listeners for group: "' + this.get('name') + '"', 'info', 'imageloader');
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._clearTriggers();
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib },
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Finds all elements in the DOM with the class name specified in the group. Removes the class from the element in order to let the style definitions trigger the image fetching.
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib * @method _fetchByClass
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen _fetchByClass: function() {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (! this._className) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh return;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.log('Fetching all images with class "' + this._className + '" in group "' + this.get('name') + '".', 'info', 'imageloader');
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib Y.all('.' + this._className).removeClass(this._className);
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib };
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.extend(Y.ImgLoadGroup, Y.Base, groupProto);
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh //------------------------------------------------
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Image objects to be registered with the groups
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @class ImgLoadImgObj
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @extends Base
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib * @constructor
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.ImgLoadImgObj = function() {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.ImgLoadImgObj.superclass.constructor.apply(this, arguments);
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._init();
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh };
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.ImgLoadImgObj.NAME = 'imgLoadImgObj';
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.ImgLoadImgObj.ATTRS = {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * HTML DOM id of the image element.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @attribute domId
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @type String
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen domId: {
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen value: null,
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh writeOnce: true
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh },
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Background URL for the image.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * For an image whose URL is specified by "<code>background-image</code>" in the element's style.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @attribute bgUrl
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @type String
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib */
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib bgUrl: {
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib value: null
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib },
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Source URL for the image.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * For an image whose URL is specified by a "<code>src</code>" attribute in the DOM element.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @attribute srcUrl
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen * @type String
26b62dfb088a00b6debad350538a64c2af145f50johanengelen */
26b62dfb088a00b6debad350538a64c2af145f50johanengelen srcUrl: {
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib value: null
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib },
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Pixel width of the image. Will be set as a <code>width</code> attribute on the DOM element after the image is fetched.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Defaults to the natural width of the image (no <code>width</code> attribute will be set).
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Usually only used with src images.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @attribute width
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @type Int
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib */
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib width: {
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib value: null
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib },
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
861fa436e7a6d6ff3eaa889b2298e0b82a0b238ctheadib * Pixel height of the image. Will be set as a <code>height</code> attribute on the DOM element after the image is fetched.
861fa436e7a6d6ff3eaa889b2298e0b82a0b238ctheadib * Defaults to the natural height of the image (no <code>height</code> attribute will be set).
861fa436e7a6d6ff3eaa889b2298e0b82a0b238ctheadib * Usually only used with src images.
861fa436e7a6d6ff3eaa889b2298e0b82a0b238ctheadib * @attribute height
861fa436e7a6d6ff3eaa889b2298e0b82a0b238ctheadib * @type Int
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib */
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib height: {
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib value: null
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib },
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Whether the image's <code>style.visibility</code> should be set to <code>visible</code> after the image is fetched.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Used when setting images as <code>visibility:hidden</code> prior to image fetching.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @attribute setVisible
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @type Boolean
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib */
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib setVisible: {
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib value: false
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib },
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Whether the image is a PNG.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * PNG images get special treatment in that the URL is specified through AlphaImageLoader for IE, versions 6 and earlier.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Only used with background images.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @attribute isPng
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @type Boolean
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib */
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib isPng: {
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib value: false
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib },
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * AlphaImageLoader <code>sizingMethod</code> property to be set for the image.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Only set if <code>isPng</code> value for this image is set to <code>true</code>.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Defaults to <code>scale</code>.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @attribute sizingMethod
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @type String
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen */
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen sizingMethod: {
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib value: 'scale'
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib },
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * AlphaImageLoader <code>enabled</code> property to be set for the image.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Only set if <code>isPng</code> value for this image is set to <code>true</code>.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Defaults to <code>true</code>.
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen * @attribute enabled
45d0b0d0dc24df8e321cbe8a085ab9b1f60b4a42theadib * @type String
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen */
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib enabled: {
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib value: 'true'
45d0b0d0dc24df8e321cbe8a085ab9b1f60b4a42theadib }
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib };
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib var imgProto = {
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Initialize all private members needed for the group.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @method _init
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @private
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib */
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib _init: function() {
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Whether this image has already been fetched.
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen * In the case of fold-conditional groups, images won't be fetched twice.
45d0b0d0dc24df8e321cbe8a085ab9b1f60b4a42theadib * @property _fetched
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen * @private
3955580a5a68a873b098921626f5b9d841b964ecjaspervdg * @type Boolean
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib */
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib this._fetched = false;
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * The Node object returned from <code>Y.get</code>, to avoid repeat calls to access the DOM.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @property _imgEl
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @private
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @type Object
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib */
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib this._imgEl = null;
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * The vertical position returned from <code>getY</code>, to avoid repeat calls to access the DOM.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * The Y position is checked only for images registered with fold-conditional groups. The position is checked first at page load (domready)
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * and this caching enhancement assumes that the image's vertical position won't change after that first check.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @property _yPos
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @private
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @type Int
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib */
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib this._yPos = null;
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib },
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib /**
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * Displays the image; puts the URL into the DOM.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * This method shouldn't be called externally, but is not private in the rare event that it needs to be called immediately.
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @method fetch
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @param {Int} withinY The pixel distance from the top of the page, for which if the image lies within, it will be fetched. Undefined indicates that no check should be made, and the image should always be fetched
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib * @return {Boolean} Whether the image has been fetched (either during this execution or previously)
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib */
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib fetch: function(withinY) {
5c45c5153b0415f7573f69f4ee3e946b5872a8d1theadib if (this._fetched) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh return true;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
1babefb17e4c8157ca2a0f588625a8ac0258dc53buliabyak
1babefb17e4c8157ca2a0f588625a8ac0258dc53buliabyak var el = this._getImgEl(),
1babefb17e4c8157ca2a0f588625a8ac0258dc53buliabyak yPos;
1babefb17e4c8157ca2a0f588625a8ac0258dc53buliabyak if (! el) {
1babefb17e4c8157ca2a0f588625a8ac0258dc53buliabyak return false;
45d0b0d0dc24df8e321cbe8a085ab9b1f60b4a42theadib }
861fa436e7a6d6ff3eaa889b2298e0b82a0b238ctheadib
45d0b0d0dc24df8e321cbe8a085ab9b1f60b4a42theadib if (withinY) {
45d0b0d0dc24df8e321cbe8a085ab9b1f60b4a42theadib // need a distance check
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib yPos = this._getYPos();
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (! yPos || yPos > withinY) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh return false;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.log('Image with id "' + this.get('domId') + '" is within distance of the fold. Fetching image.', 'info', 'imageloader');
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.log('Fetching image with id "' + this.get('domId') + '".', 'info', 'imageloader');
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // apply url
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (this.get('bgUrl') !== null) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // bg url
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (this.get('isPng') && Y.UA.ie && Y.UA.ie <= 6) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // png for which to apply AlphaImageLoader
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh el.setStyle('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + this.get('url') + '", sizingMethod="' + this.get('sizingMethod') + '", enabled="' + this.get('enabled') + '")');
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh else {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // regular bg image
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh el.setStyle('backgroundImage', "url('" + this.get('bgUrl') + "')");
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh else if (this.get('srcUrl') !== null) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // regular src image
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh el.setAttribute('src', this.get('srcUrl'));
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh // apply attributes
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (this.get('setVisible')) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh el.setStyle('visibility', 'visible');
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (this.get('width')) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh el.setAttribute('width', this.get('width'));
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (this.get('height')) {
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib el.setAttribute('height', this.get('height'));
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._fetched = true;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh return true;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh },
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Gets the object (as a <code>Y.Node</code>) of the DOM element indicated by "<code>domId</code>".
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @method _getImgEl
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @returns {Object} DOM element of the image as a <code>Y.Node</code> object
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh _getImgEl: function() {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh if (this._imgEl === null) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._imgEl = Y.get('#' + this.get('domId'));
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh return this._imgEl;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh },
4b1c2be41ce8c1a88502c1b1885ad1468646fbfftheadib
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh /**
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Gets the Y position of the node in page coordinates.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * Expects that the page-coordinate position of the image won't change.
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @method _getYPos
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @returns {Object} The Y position of the image
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh * @private
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh */
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen _getYPos: function() {
17d87f5698f5c2958d38c6a6207c7b322a7adaf9johanengelen if (this._yPos === null) {
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh this._yPos = this._getImgEl().getY();
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh return this._yPos;
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh }
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh };
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh Y.extend(Y.ImgLoadImgObj, Y.Base, imgProto);
ddc1f1d1291eb21b244c7328d260c7d4a43be2fcbuliabyak
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh}, '@VERSION@' ,{requires:['base-base', 'dom-screen', 'node']});
b7f07692f95074fdcf74c7350fbf5f3099ffc1b6miklosh