16 Feb
2011
16 Feb
'11
1:24 p.m.
Hi Jerome,
On 02/16/2011 01:37 PM, Jerome Velociter wrote:
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.
On Wed, Feb 16, 2011 at 12:12 PM, mflorea
<platform-notifications(a)xwiki.org>wrote;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'
}) + 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
notifications(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/notifications
_______________________________________________
devs mailing list
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs