16 Feb
2011
16 Feb
'11
12:37 p.m.
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
Added:
platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/
platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js
platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/loading.gif
platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/maximize.gif
platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/minimize.gif
Log:
XWIKI-6010: Add a gallery macro to display images using a slide-show view
* Add resources to uicomponents/widgets/gallery
Added:
platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
===================================================================
---
platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
(rev 0)
+++
platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
2011-02-16 11:12:34 UTC (rev 34727)
@@ -0,0 +1,146 @@
+#macro(ieOpacity $selector $value)
+/* start IE opacity setting */
+$selector {
+ /* We need to quote the property value because the equal sign is not
valid inside a CSS property value. */
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$value)";
+}
+
+#foreach($item in $selector.split('\s*,\s*'))
+*+html $item, ##
+#end {
+ /* This is for IE7, which doesn't accept the quoted value but
fortunately understands the escape syntax. */
+ filter: alpha(opacity\=$value);
+ /* Unicode escape works too. */
+ /*filter: alpha(opacity\003d $value);*/
+}
+
+#foreach($item in $selector.split('\s*,\s*'))
+* html $item, ##
+#end {
+ /* This is for IE6, which doesn't understand the escaped equal sign (not
even the unicode escape) but fortunately accepts the quoted value. */
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$value)";
+}
+/* end IE opacity setting */
+#end
+
+#set($imageMaxWidth = 492)
+#set($imageMaxHeight = 369)
+
+.xGallery {
+ background-color: black;
+ padding: 10px;
+ position: relative;
+ width: ${mathtool.add($imageMaxWidth, 128)}px;
+}
+
+.xGallery.maximized {
+ left: 0;
+ position: absolute;
+ top: 0;
+ z-index: 1001;
+}
+
+.xGallery .currentImageWrapper {
+ height: ${imageMaxHeight}px;
+ line-height: ${imageMaxHeight}px;
+ text-align: center;
+ width: 100%;
+}
+
+.xGallery .currentImage {
+ max-height: ${imageMaxHeight}px;
+ max-width: ${imageMaxWidth}px;
+ vertical-align: middle;
+}
+
+.xGallery .navigation {
+ left: 0;
+ margin-top: -64px;
+ position: absolute;
+ top: 50%;
+ width: 100%;
+}
+
+.xGallery .previous, .xGallery .next {
+ color: #A0A0A0;
+ cursor: pointer;
+ font-family: courier,monospace;
+ font-size: 32px;
+ font-weight: 100;
+ height: 124px;
+ line-height: 124px;
+ text-align: center;
+ width: 32px;
+}
+
+.xGallery .previous:hover, .xGallery .next:hover {
+ color: white;
+}
+
+.xGallery .previous {
+ float: left;
+}
+
+.xGallery .next {
+ float: right;
+}
+
+.xGallery .index {
+ bottom: 10px;
+ color: #C0C0C0;
+ font-family: sans-serif;
+ font-size: smaller;
+ left: 10px;
+ position: absolute;
+}
+
+.xGallery .loading {
+ background-image: url('loading.gif') !important;
+}
+
+.xGallery .focusCatcher {
+ background-color: black;
+ border: 0 none;
+ color: black;
+ height: 1px;
+ left: 0;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ width: 1px;
+ z-index: -1;
+}
+
+.xGallery .maximize, .xGallery .minimize {
+ cursor: pointer;
+ height: 16px;
+ opacity: .5;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ width: 16px;
+}
+
+.xGallery .maximize:hover, .xGallery .minimize:hover {
+ opacity: 1;
+}
+
+#ieOpacity('.xGallery .maximize, .xGallery .minimize' 50)
+
+#ieOpacity('.xGallery .maximize:hover, .xGallery .minimize:hover' 100)
+
+.xGallery .maximize {
+ background: transparent url('maximize.gif') no-repeat scroll center;
+}
+
+.xGallery .minimize {
+ background: transparent url('minimize.gif') no-repeat scroll center;
+}
+
+html.maximized, html.maximized body {
+ height: 100% !important;
+ margin: 0 !important;
+ overflow: hidden !important;
+ padding: 0 !important;
+ width: 100% !important;
+}
Property changes on:
platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
___________________________________________________________________
Added: svn:keywords
+ Author Id Revision HeadURL
Added: svn:eol-style
+ native
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
+ 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') ?
+ for(var i = 0; i < imageElements.length; i++)
{
+ var imageElement = imageElements[i];
+ images.push({url: imageElement.getAttribute('src'), title:
imageElement.title});
+ imageElement.removeAttribute('src');
+ }
+ return images;
+ },
+ _onPreviousImage : function() {
+ this.show(this.index > 0 ? this.index - 1 : this.images.length - 1);
+ },
+ _onNextImage : function() {
+ this.show(this.index < this.images.length - 1 ? this.index + 1 : 0);
+ },
+ _onLoadImage : function() {
+ Element.removeClassName(this.currentImage.parentNode, 'loading');
+ this.currentImage.style.visibility = 'visible';
+ },
+ _onErrorImage: function() {
+ },
+ _onAbortImage: function() {
+ },
+ _onKeyDown : function(event) {
+ var stop = true;
+ switch(event.keyCode) {
+ case Event.KEY_LEFT:
+ this._onPreviousImage();
+ break;
+ case Event.KEY_RIGHT:
+ this._onNextImage();
+ break;
+ case Event.KEY_HOME:
+ this.show(0);
+ break;
+ case Event.KEY_END:
+ this.show(this.images.length - 1);
+ break;
+ case Event.KEY_ESC:
+ if (this.container.hasClassName('maximized')) {
+ this._onToggleMaximize();
+ }
+ break;
+ case 70: /* F */
+ this._onToggleMaximize();
+ break;
+ defualt:
+ stop = false;
+ break;
+ }
+ if (stop) {
+ Event.stop(event);
+ }
+ },
+ _onToggleMaximize : function() {
+ this.maximizeToggle.toggleClassName('maximize');
+ this.maximizeToggle.toggleClassName('minimize');
+ this.maximizeToggle.title =
this.maximizeToggle.hasClassName('maximize') ? 'Maximize' :
'Minimize';
+ this.container.toggleClassName('maximized');
+ $(document.documentElement).toggleClassName('maximized');
+ if (this.container.hasClassName('maximized')) {
+ this._updateSize();
+ } else {
+ this._resetSize();
+ }
+ },
+ _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.
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