source: extensions/luciano/js/script.js @ 12533

Last change on this file since 12533 was 12533, checked in by plg, 12 years ago

bug fixed: when rating a photo, display the score and not the average rate in Ajax
File size: 11.6 KB
Line 
1window.addEvent('domready', function() {
2        galleryThumbs = $$('.thumbnailCategories li');
3        galleryThumbs.each(function(el){
4                el.linkUrl = el.getElement('a').href;
5                el.addEvents({
6                        'mouseenter'    : function(){addOver(el)},
7                        'mouseleave'    : function(){removeOver(el)},
8                        'click'                 : function(){goToUrl(el)}
9                });
10        });
11       
12        catThumbs = $$('.thumbnails li');
13        catThumbs.each(function(el){
14                el.addEvents({
15                        'mouseenter'    : function(){addOver(el)},
16                        'mouseleave'    : function(){removeOver(el)}
17                });
18        });
19       
20        var mySelect = new elSelect( {container : 'order', onClicked: function(){new URI(this.hiddenInput.value).go();}} );
21  var themeSelect = new elSelect( {container : 'themeSelect'} );
22  var languageSelect = new elSelect( {container : 'languageSelect'} );
23       
24        var photoPrev = $('linkPrev');
25       
26        if(photoPrev)
27        {
28                photoPrev.image = photoPrev.getElement('img');
29                photoPrev.image.setStyle('opacity', 0);
30                photoPrev.setStyle('display', 'block');
31                photoPrev.addEvents({
32                        'mouseenter': function(){ showElement(photoPrev.image) },
33                        'mouseleave': function(){ hideElement(photoPrev.image)}
34                });
35        }
36       
37        var photoNext = $('linkNext');
38        if(photoNext)
39        {
40                photoNext.image = photoNext.getElement('img');
41                photoNext.image.setStyle('opacity', 0);
42                photoNext.setStyle('display', 'block');
43                photoNext.addEvents({
44                        'mouseenter': function(){ showElement(photoNext.image) },
45                        'mouseleave': function(){ hideElement(photoNext.image)}
46                });
47        }
48});
49
50function addOver(el){
51        if(!el.hasClass('hover')) el.addClass('hover');
52}
53
54function removeOver(el){
55        if(el.hasClass('hover')) el.removeClass('hover');
56}
57
58function goToUrl(el){
59        new URI(el.linkUrl).go();
60}
61
62function showElement(el)
63{
64        el.morph({'opacity': 1});
65}
66
67function hideElement(el)
68{
69        el.morph({'opacity': 0});
70}
71
72function toggleElement(el)
73{
74        if(el.getStyle('opacity') == 0) showElement(el); else hideElement(el);
75}
76
77var gRatingOptions, gRatingButtons, gUserRating;
78
79function makeNiceRatingForm(options)
80{
81        gRatingOptions = options || {};
82        var form = $('rateForm');
83        if (!form) return;
84
85        gRatingButtons = form.getElements('input');
86        gUserRating = "";
87       
88        gRatingButtons.each(function(el){ if ( el.type=="button" ) { gUserRating = el.value; } });
89
90        gRatingButtons.each(function(el, i){
91               
92                el.initialRateValue = el.value; // save it as a property
93               
94                try { el.type = "button"; } catch (e){}// avoid normal submit (use ajax); not working in IE6
95               
96                //hide the text IE/Opera - breaks safari
97                if (navigator.userAgent.indexOf('AppleWebKit/') == -1 ) el.value = ""; 
98               
99                el.setStyles({
100                        'textIndent' : "-50px",
101                        'marginLeft' : 0,
102                        'marginRight' : 0
103                });
104
105                if (i!=gRatingButtons.length-1 && el.nextSibling.nodeType == 3 /*TEXT_NODE*/)
106                        el.parentNode.removeChild(el.nextSibling);
107                       
108                if (i>0 && el.previousSibling.nodeType == 3 /*TEXT_NODE*/)
109                        el.parentNode.removeChild(el.previousSibling);
110               
111                el.addEvents({
112                        'mouseenter'    : function(){updateRating(el)},
113                        'mouseleave'    : function(){resetRating(el)},
114                        'click'                 : function(e){submitRating(e)}
115                });
116
117        });
118}
119
120function resetRating(el)
121{
122        for (i = 1; i<gRatingButtons.length; i++){
123                gRatingButtons[i].removeClass('rateButtonUserFull2');
124                gRatingButtons[i].removeClass('rateButtonUserHalf2');
125                gRatingButtons[i].removeClass('rateButtonUserEmpty2');
126                gRatingButtons[i].removeClass('rateButtonFull2');
127                gRatingButtons[i].removeClass('rateButtonHalf2');
128                gRatingButtons[i].removeClass('rateButtonEmpty2');
129                if(gRatingButtons[i].value > el.value) break;
130        }
131}
132
133function updateRating(el)
134{
135        for (i = 1; i<gRatingButtons.length; i++){
136                                                                                                                                                                                                                                var newClass = 'rateButton';
137                if(gRatingButtons[i].title <= el.title)                                                                                                                                         newClass = newClass+'User';
138                if(gRatingButtons[i].hasClass('rateButtonFull') || gRatingButtons[i].hasClass('rateButtonUserFull'))            newClass = newClass+'Full2';
139                else if(gRatingButtons[i].hasClass('rateButtonHalf') || gRatingButtons[i].hasClass('rateButtonUserHalf'))       newClass = newClass+'Half2';
140                else                                                                                                                                                                                                            newClass = newClass+'Empty2';
141                gRatingButtons[i].addClass(newClass);
142        }
143}
144
145function setNewRate(score, count, stdev, newRating)
146{
147        var score = score+"";
148        ratingSplitted = score.split('.');
149        starFull = ratingSplitted[0];
150        starHalf = (ratingSplitted[1] > 49) ? true : false;
151       
152        for (i = 1; i<gRatingButtons.length; i++){
153                gRatingButtons[i].removeClass('rateButtonFull');
154                gRatingButtons[i].removeClass('rateButtonHalf');
155                gRatingButtons[i].removeClass('rateButtonEmpty');
156                gRatingButtons[i].removeClass('rateButtonUserFull');
157                gRatingButtons[i].removeClass('rateButtonUserHalf');
158                gRatingButtons[i].removeClass('rateButtonUserEmpty');
159                gRatingButtons[i].removeClass('rateButtonFull2');
160                gRatingButtons[i].removeClass('rateButtonHalf2');
161                gRatingButtons[i].removeClass('rateButtonEmpty2');
162                gRatingButtons[i].removeClass('rateButtonUserFull2');
163                gRatingButtons[i].removeClass('rateButtonUserHalf2');
164                gRatingButtons[i].removeClass('rateButtonUserEmpty2');
165               
166               
167                if(gRatingButtons[i].title <= starFull)                                 gRatingButtons[i].addClass((gRatingButtons[i].title <= newRating) ? 'rateButtonUserFull': 'rateButtonFull');
168                else if(gRatingButtons[i].title == starFull.toInt()+1)
169                        if(gRatingButtons[i].title <= newRating)                        gRatingButtons[i].addClass((starHalf) ? 'rateButtonUserHalf': 'rateButtonUserEmpty');
170                        else                                                                                            gRatingButtons[i].addClass((starHalf) ? 'rateButtonHalf': 'rateButtonEmpty');
171                else                                                                                                    gRatingButtons[i].addClass((gRatingButtons[i].title <= newRating) ? 'rateButtonUserEmpty': 'rateButtonEmpty');
172        }
173}
174
175function submitRating(e)
176{
177        var rateButton = e.target;
178        if (rateButton.initialRateValue == gUserRating)
179                return false; //nothing to do
180
181        for (var i=0; i<gRatingButtons.length; i++) gRatingButtons[i].disabled=true;
182        var y = new PwgWS(gRatingOptions.rootUrl);
183        y.callService(
184                "pwg.images.rate", {image_id: gRatingOptions.image_id, rate: rateButton.initialRateValue } ,
185                {
186                        onFailure: function(num, text) {
187                                alert(num + " " + text);
188                                document.location = rateButton.form.action + "&rate="+rateButton.initialRateValue;
189                        },
190                        onSuccess: function(result)     {
191                                gUserRating = rateButton.initialRateValue;
192                                for (var i=0; i<gRatingButtons.length; i++) gRatingButtons[i].disabled=false;
193                                setNewRate(result.score, result.count, result.stdev, rateButton.initialRateValue);
194                                if (gRatingOptions.ratingSummaryElement)
195                                {
196                                        var t = gRatingOptions.ratingSummaryText;
197                                        var args =[result.score, result.count, result.stdev], idx = 0, rexp = new RegExp( /%\.?\d*[sdf]/ );
198                                        _xxx = t.match( rexp );
199                                        while (idx<args.length) t=t.replace(rexp, args[idx++]);
200                                        gRatingOptions.ratingSummaryElement.innerHTML = t;
201                                }
202                        }
203                }
204        );
205        return false;
206}
207
208
209/**
210* @file elSelect.js
211* @downloaded from http://www.cult-f.net/2007/12/14/elselect/
212* @hacked by Luciano Amodio www.lucianoamodio.it
213* @author Sergey Korzhov aka elPas0
214* @site  http://www.cult-f.net
215* @date December 14, 2007
216*
217*/
218var elSelect = new Class({
219        options: {
220                container: false,
221                baseClass : 'elSelect',
222                onClicked: $lambda(false)
223        },
224        source : false,
225        selected : false,
226        _select : false,
227        current : false,
228        selectedOption : false,
229        dropDown : false,
230        optionsContainer : false,
231        hiddenInput : false,
232        /*
233        pass the options,
234        create html and inject into container
235        */
236        initialize: function(options){
237                this.setOptions(options)
238               
239                if ( !$(this.options.container) ) return
240               
241                this.selected = false
242                this.source = $(this.options.container).getElement('select')
243                this.buildFrameWork()
244               
245                $(this.source).getElements('option').each( this.addOption, this )
246                $(this.options.container).set('html', '')
247                this._select.injectInside($(this.options.container))
248               
249                this.bindEvents()
250               
251        },
252       
253        buildFrameWork : function() {
254                this._select = new Element('div').addClass( this.options.baseClass )
255                this.current = new Element('div').addClass('selected').injectInside($(this._select))
256                this.selectedOption = new Element('div').addClass('selectedOption').injectInside($(this.current))
257                this.dropDown = new Element('div').addClass('dropDown').injectInside($(this.current))
258                new Element('div').addClass('clear').injectInside($(this._select))
259                this.optionsContainer = new Element('div').addClass('optionsContainer').injectInside($(this._select))
260                var t = new Element('div').addClass('optionsContainerTop').injectInside($(this.optionsContainer))
261                var o = new Element('div').injectInside($(t))
262                var p = new Element('div').injectInside($(o))
263                var t = new Element('div').addClass('optionsContainerBottom').injectInside($(this.optionsContainer))
264                var o = new Element('div').injectInside($(t))
265                var p = new Element('div').injectInside($(o))
266
267                this.hiddenInput = new Element('input', {
268                        'type'  : 'hidden',
269                        'name'  : this.source.get('name')                               
270                }).inject($(this.options.container), 'before');
271               
272        },
273       
274        bindEvents : function() {
275                document.addEvent('click', function() { 
276                                if ( this.optionsContainer.getStyle('display') == 'block') 
277                                        this.onDropDown()
278                        }.bind(this));
279                       
280                $(this.options.container).addEvent( 'click', function(e) { new Event(e).stop(); } )             
281                this.current.addEvent('click', this.onDropDown.bindWithEvent(this) )
282               
283        },
284       
285        //add single option to select
286        addOption: function( option ){
287        var o = new Element('div').addClass('option').setProperty('value',option.value)
288                if ( option.disabled ) { o.addClass('disabled') } else {
289                        o.addEvents( {
290                                'click': this.onOptionClick.bindWithEvent(this),
291                                'mouseout': this.onOptionMouseout.bindWithEvent(this),
292                                'mouseover': this.onOptionMouseover.bindWithEvent(this)
293                        })
294                }
295               
296                if ( $defined(option.getProperty('class')) && $chk(option.getProperty('class')) ) 
297                        o.addClass(option.getProperty('class'))
298
299       
300                if ( option.selected ) { 
301                        if ( this.selected) this.selected.removeClass('selected');
302                        this.selected = o
303                        o.addClass('selected')
304                        this.selectedOption.set('text', option.text);
305                        this.hiddenInput.setProperty('value',option.value);
306                }
307                o.set('text', option.text);     
308                o.injectBefore($(this.optionsContainer).getLast());
309        },
310       
311        onDropDown : function( e ) {
312                       
313                        if ( this.optionsContainer.getStyle('display') == 'block') {
314                                this.optionsContainer.setStyle('display','none')
315                        } else {
316                                this.optionsContainer.setStyle('display','block')
317                                this.selected.addClass('selected')
318                                //needed to fix min-width in ie6
319                                var width =  this.optionsContainer.getStyle('width').toInt() > this._select.getStyle('width').toInt() ?
320                                                                                                                        this.optionsContainer.getStyle('width')
321                                                                                                                        :
322                                                                                                                        this._select.getStyle('width')
323                                                                                                                       
324                                this.optionsContainer.setStyle('width', width)
325                                this.optionsContainer.getFirst().setStyle('width', width)
326                                this.optionsContainer.getLast().setStyle('width', width)
327                        }                                               
328        },
329        onOptionClick : function(e) {
330                var event = new Event(e)
331                if ( this.selected != event.target ) {
332                        this.selected.removeClass('selected')
333                        event.target.addClass('selected')
334                        this.selected = event.target
335                        this.selectedOption.set('text', this.selected.get('text'));
336                        this.hiddenInput.setProperty('value',this.selected.getProperty('value'));
337                        this.fireEvent('clicked');
338                }
339                this.onDropDown()
340        },
341        onOptionMouseover : function(e){
342                var event = new Event(e)
343                this.selected.removeClass('selected')
344                event.target.addClass('selected')
345        },
346        onOptionMouseout : function(e){
347                var event = new Event(e)
348                event.target.removeClass('selected')
349        }
350       
351});
352elSelect.implement(new Events);
353elSelect.implement(new Options);
Note: See TracBrowser for help on using the repository browser.