git.maemo.org Git - marble/blob - www/scripts/jd.gallery.set.js

   1 /*
   2     This file is part of JonDesign's SmoothGallery v2.1beta1.
   3
   4     JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
   5     it under the terms of the GNU General Public License as published by
   6     the Free Software Foundation; either version 3 of the License, or
   7     (at your option) any later version.
   8
   9     JonDesign's SmoothGallery is distributed in the hope that it will be useful,
  10     but WITHOUT ANY WARRANTY; without even the implied warranty of
  11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  12     GNU General Public License for more details.
  13
  14     You should have received a copy of the GNU General Public License
  15     along with JonDesign's SmoothGallery; if not, write to the Free Software
  16     Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
  17
  18     Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
  19 */
  20
  21 var gallerySet = new Class({
  22         Extends: gallery,
  23         initialize: function(element, options) {
  24                 this.setOptions({
  25                         manualSetData: [],
  26                         gallerySelector: "div.galleryElement",
  27                         galleryTitleSelector: "h2",
  28                         textGallerySelector: 'Galleries',
  29                         textShowGallerySelector: 'Other Galleries',
  30                         textGalleryInfo: '{0} pictures',
  31                         startWithSelector: true,
  32                         /* Changing default options */
  33                         textShowCarousel: '{0}/{1} Pictures',
  34                         carouselPreloader: false
  35                 });
  36                 this.setOptions(options);
  37                 this.gallerySet = this.options.manualSetData;
  38                 this.addEvent('onPopulated', this.createGallerySelectorTab.bind(this));
  39                 this.addEvent('onPopulated', this.createGallerySelector.bind(this));
  40                 this.startWithSelectorFn = this.toggleGallerySelector.pass(true, this);
  41                 if (this.options.startWithSelector)
  42                         this.addEvent('onGallerySelectorCreated', this.startWithSelectorFn);
  43                 this.parent(element, this.options);
  44         },
  45         populateData: function() {
  46                 options = this.options;
  47                 var data = $A(this.gallerySet);
  48                 this.populateFrom.getElements(options.gallerySelector).each(function (galEl) {
  49                         currentGalArrayPlace = 0;
  50                         galleryDict = {
  51                                 title: galEl.getElement(options.galleryTitleSelector).innerHTML,
  52                                 elements: []
  53                         }
  54                         galleryDict.elements.extend(this.populateGallery(galEl, 0));
  55                         data.extend([galleryDict]);
  56                         if (this.options.destroyAfterPopulate)
  57                                 galEl.dispose();
  58                 }, this);
  59                 this.gallerySet = data;
  60                 this.galleryData = data[0].elements;
  61                 this.currentGallery = 0;
  62                 this.fireEvent('onPopulated');
  63         },
  64         changeGallery: function(number)
  65         {
  66                 if (number!=this.currentGallery)
  67                 {
  68                         this.changeData(this.gallerySet[number].elements);
  69                         this.maxIter = this.gallerySet[number].elements.length;
  70                         this.currentGallery = number;
  71                         this.gallerySelectorBtn.set('html', this.gallerySet[number].title);
  72                         this.fireEvent('onGalleryChanged');
  73                 }
  74                 this.toggleGallerySelector(false);
  75         },
  76         createGallerySelectorTab: function() {
  77                 this.gallerySelectorBtn = new Element('a').addClass('gallerySelectorBtn').setProperties({
  78                         title: this.options.textShowGallerySelector
  79                 }).set('html', this.options.textShowGallerySelector).addEvent(
  80                         'click',
  81                         function(){ this.toggleGallerySelector(true); }.bind(this)
  82                 ).injectInside(this.galleryElement);
  83                 this.addEvent('onShowCarousel', function(){this.gallerySelectorBtn.setStyle('zIndex', 10)}.bind(this));
  84                 this.addEvent('onCarouselHidden', function(){this.gallerySelectorBtn.setStyle('zIndex', 15)}.bind(this));
  85         },
  86         createGallerySelector: function() {
  87                 this.gallerySelector = new Fx.Morph(
  88                         new Element('div').addClass(
  89                                 'gallerySelector'
  90                         ).injectInside(
  91                                 this.galleryElement
  92                         ).setStyles({
  93                                 'display': 'none',
  94                                 'opacity': '0'
  95                         })
  96                 );
  97                 this.gallerySelectorTitle =
  98                         new Element('h2').set('html',
  99                                 this.options.textGallerySelector
 100                         ).injectInside(this.gallerySelector.element);
 101                 var gallerySelectorHeight = this.galleryElement.offsetHeight - 50 - 10 - 2;
 102                 this.gallerySelectorWrapper = new Fx.Morph(
 103                         new Element('div').addClass(
 104                                 'gallerySelectorWrapper'
 105                         ).setStyle(
 106                                 'height',
 107                                 gallerySelectorHeight + "px"
 108                         ).injectInside(this.gallerySelector.element)
 109                 );
 110                 this.gallerySelectorInner =     new Element('div').addClass('gallerySelectorInner').injectInside(this.gallerySelectorWrapper.element);
 111                 this.gallerySelectorWrapper.scroller = new Scroller(this.gallerySelectorWrapper.element, {
 112                         area: 100,
 113                         velocity: 0.3
 114                 }).start();
 115                 this.createGalleryButtons();
 116                 this.fireEvent('onGallerySelectorCreated');
 117         },
 118         createGalleryButtons: function () {
 119                 var galleryButtonWidth =
 120                         ((this.galleryElement.offsetWidth - 30) / 2) - 14;
 121                 this.gallerySet.each(function(galleryItem, index){
 122                         var button = new Element('div').addClass('galleryButton').injectInside(
 123                                 this.gallerySelectorInner
 124                         ).addEvents({
 125                                 'mouseover': function(myself){
 126                                         myself.button.addClass('hover');
 127                                 }.pass(galleryItem, this),
 128                                 'mouseout': function(myself){
 129                                         myself.button.removeClass('hover');
 130                                 }.pass(galleryItem, this),
 131                                 'click': function(myself, number){
 132                                         this.changeGallery.pass(number,this)();
 133                                 }.pass([galleryItem, index], this)
 134                         }).setStyle('width', galleryButtonWidth);
 135                         galleryItem.button = button;
 136                         var thumbnail = "";
 137                         if (this.options.showCarousel)
 138                                 thumbnail = galleryItem.elements[0].thumbnail;
 139                         else
 140                                 thumbnail = galleryItem.elements[0].image;
 141                         new Element('div').addClass('preview').setStyle(
 142                                 'backgroundImage',
 143                                 "url('" + thumbnail + "')"
 144                         ).injectInside(button);
 145                         new Element('h3').set('html', galleryItem.title).injectInside(button);
 146                         new Element('p').addClass('info').set('html', formatString(this.options.textGalleryInfo, galleryItem.elements.length)).injectInside(button);
 147                 }, this);
 148                 new Element('br').injectInside(this.gallerySelectorInner).setStyle('clear','both');
 149         },
 150         toggleGallerySelector: function(state) {
 151                 if (state)
 152                         this.gallerySelector.start({'opacity' : 1}).element.setStyle('display','block');
 153                 else
 154                         this.gallerySelector.start({'opacity' : 0});
 155         },
 156         initHistory: function() {
 157                 this.fireEvent('onHistoryInit');
 158                 this.historyKey = this.galleryElement.id + '-gallery';
 159                 if (this.options.customHistoryKey)
 160                         this.historyKey = this.options.customHistoryKey();
 161                 this.history = new History.Route({
 162                         defaults: [1,1],
 163                         pattern: this.historyKey + '\\((\\d+)\\)-picture\\((\\d+)\\)',
 164                         generate: function(values) {
 165                                 return [this.historyKey, '(', values[0], ')', '-picture','(', values[1], ')'].join('');
 166                         }.bind(this),
 167                         onMatch: function(values, defaults) {
 168                                 this.changeGallery.pass(parseInt(values[0]) - 1, this).delay(10);
 169                                 if(this.gallerySelector)
 170                                         this.toggleGallerySelector.pass(false, this).delay(500);
 171                                 this.goTo.pass(parseInt(values[1]) - 1, this).delay(100);
 172                         }.bind(this)
 173                 });
 174                 updateHistory = function(){
 175                         this.history.setValues([this.currentGallery + 1, this.currentIter + 1]);
 176                         this.history.defaults=[this.currentGallery + 1, this.currentIter + 1];
 177                 }.bind(this);
 178
 179                 this.addEvent('onChanged', updateHistory);
 180                 this.addEvent('onGalleryChanged', updateHistory);
 181                 this.fireEvent('onHistoryInited');
 182         }
 183 });