Hi Jerome, On 02/16/2011 01:37 PM, Jerome Velociter wrote:
On Wed, Feb 16, 2011 at 12:12 PM, mflorea <[email protected]>wrote:
Author: mflorea Date: 2011-02-16 12:12:34 +0100 (Wed, 16 Feb 2011) New Revision: 34727
[snip]
Added: platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js =================================================================== --- platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js (rev 0) +++ platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js 2011-02-16 11:12:34 UTC (rev 34727) @@ -0,0 +1,139 @@ +var XWiki = (function (XWiki) { +// Start XWiki augmentation. +XWiki.Gallery = Class.create({ + initialize : function(container) { + this.images = this._collectImages(container); + + this.container = container.update('<input type="text" tabindex="-1" class="focusCatcher"/><div class="currentImageWrapper"><img class="currentImage" alt="Current image"/></div><div class="navigation"><div class="previous" title="Show previous image"><</div><div class="next" title="Show next image">></div><div style="clear:both"></div></div><div class="index">0 / 0</div><div class="maximize" title="Maximize"></div>');
Titles will not be localized here
Right. Thanks for catching this. I forgot about it.
+ this.container.addClassName('xGallery');
+ + this.focusCatcher = this.container.down('.focusCatcher'); + this.focusCatcher.observe('keydown', this._onKeyDown.bindAsEventListener(this)); + this.container.observe('click', function() { + this.focusCatcher.focus(); + }.bind(this)); + + this.container.down('.previous').observe('click', this._onPreviousImage.bind(this)); + this.container.down('.next').observe('click', this._onNextImage.bind(this)); + + this.currentImage = this.container.down('.currentImage'); + this.currentImage.observe('load', this._onLoadImage.bind(this)); + this.currentImage.observe('error', this._onErrorImage.bind(this)); + this.currentImage.observe('abort', this._onAbortImage.bind(this)); + + this.indexDisplay = this.container.down('.index'); + + this.maximizeToggle = this.container.down('.maximize'); + this.maximizeToggle.observe('click', this._onToggleMaximize.bind(this)); + + this.show(0); + }, + _collectImages : function(container) { + var images = []; + var imageElements = container.getElementsByTagName('img');
Why not use container.select('img') ?
[snip]
+ _updateSize : function() { + var dimensions = document.viewport.getDimensions(); + // Remove container padding; + var width = dimensions.width - 20; + var height = dimensions.height - 20; + this.container.style.width = width + 'px'; + this.container.style.height = height + 'px'; + this.currentImage.parentNode.style.height = height + 'px'; + this.currentImage.parentNode.style.lineHeight = height + 'px';
I think as a best practice we should prefer prototype.js accessors versus. a mix of prototype helpers and native DOM properties. It's more consistent and more bug-proof in my opinion. I tend to always assume elements have been extended by prototype, but when the code mixes prototype.js and native accessors, you have greater chances to introduce non-extended elements as variables / members of your class that another developer will maybe miss.
Here you would do
this.currentImage.up().setStyle({ lineHeight: height + 'px' })
I prefer to use native JavaScript APIs whenever possible and use Prototype only when: * it simplifies my code * it fixes a cross browser issue. You can make a proposal but I'd be -0 for using Prototype in any situation.
+ this.currentImage.style.maxHeight = height + 'px'; + // Remove width reserved for the navigation arrows. + this.currentImage.style.maxWidth = (width - 128) + 'px'; + }, + _resetSize : function() { + this.container.style.cssText = ''; + this.container.removeAttribute('style'); + this.currentImage.parentNode.style.cssText = ''; + this.currentImage.parentNode.removeAttribute('style'); + this.currentImage.style.cssText = ''; + this.currentImage.removeAttribute('style'); + }, + show : function(index) { + if (index< 0 || index>= this.images.length || index == this.index) { + return; + } + this.currentImage.style.visibility = 'hidden'; + Element.addClassName(this.currentImage.parentNode, 'loading'); + this.currentImage.title = this.images[index].title; + this.currentImage.src = this.images[index].url; + this.index = index; + this.indexDisplay.firstChild.nodeValue = (index + 1) + ' / ' + this.images.length;
Same for firstChild.nodeValue, I would prefer .down().update()
+ } +}); +// End XWiki augmentation. +return XWiki; +}(XWiki || {})); + +Element.observe(document, "dom:loaded", function() { + $$('.gallery').each(function(gallery) {
Same remark as for the dashboard macro, IMO this is too greedy and $mainContentArea.select('.gallery') would perform better.
The problem is not really each such selector taken individually, but if we continue adding more and more, it will make the loading after DOM is loaded clumsy.
I agree, but I don't like the fact that gallery.js would depend on the presence of the mainContentArea element. Is this element part of the public "API"? Thanks, Marius
Jerome.
+ new XWiki.Gallery(gallery); + }); +});
Property changes on: platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js ___________________________________________________________________ Added: svn:keywords + Author Id Revision HeadURL Added: svn:eol-style + native
Added: platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/loading.gif =================================================================== (Binary files differ)
Property changes on: platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/loading.gif ___________________________________________________________________ Added: svn:mime-type + image/gif
Added: platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/maximize.gif =================================================================== (Binary files differ)
Property changes on: platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/maximize.gif ___________________________________________________________________ Added: svn:mime-type + image/gif
Added: platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/minimize.gif =================================================================== (Binary files differ)
Property changes on: platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/minimize.gif ___________________________________________________________________ Added: svn:mime-type + image/gif
_______________________________________________ notifications mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/notifications
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs