https://www.mattatallvarnerfh.com/swd/js/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
21var 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});