Re: [xwiki-devs] [xwiki-notifications] r34727 - in platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets: . gallery

16 Feb 2011


      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
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
[email protected]
http://lists.xwiki.org/mailman/listinfo/notifications

    

Re: [xwiki-devs] [xwiki-notifications] r34727 - in platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets: . gallery

Jerome Velociter