← Back to branch summary

~dylanmccall/ubiquity-slideshow-ubuntu/maverick-ubuntu-design

« back to all changes in this revision

Viewing changes to slideshows/link-core/slideshow.js

  • Committer: Dylan McCall
  • Date: 2010-09-13 03:57:39 UTC
  • Revision ID: dylanmccall@gmail.com-20100913035739-jbo2wvnvxmqzxyww
Replaced scripaculous / Crossfade with jQuery and Cycle plugin.
Automatic slide switching now pauses after reaching the end, but manual controls continue to function.
Important note: This needed a change to the CSS for all slideshows, setting 100% width and height for #slideshow > div

Show diffs side-by-side

added added

removed removed

Lines of Context:
slideshows/link-core/slideshow.js
11
11
 
12
12
 
13
13
Dependencies (please load these first):
14
 
link-core/prototype.js
15
 
link-core/effects.js, link-core/fastinit.js, link-core/crossfade.js
 
14
link-core/jquery.js
 
15
link-core/jquery.cycle.all.js
16
16
directory.js (note that this file does not exist yet, but will when the build script runs)
17
17
*/
18
18
 
19
 
/* Accepts the following parameters using global variables set ahead of time:
20
 
     * SLIDESHOW_SLIDE_INTERVAL (default is 45)
21
 
     * SLIDESHOW_TRANSITION_DURATION (default is 0.5)
22
 
     * SLIDESHOW_LOOP (default is false)
23
 
     * SLIDESHOW_TRANSITION_TYPE (default is Crossfade.Transition.Cover)
 
19
/* Pass parameters by creating a global SLIDESHOW_OPTIONS object, containing
 
20
   any options described at <http://jquery.malsup.com/cycle/options.html>
 
21
   
 
22
   The default callback for cycle.next also checks an extra autopause parameter,
 
23
   which will pause the slideshow when it reaches the end (but doesn't stop it)
24
24
*/
25
25
 
26
 
window.onDomReady = DomReady;
27
 
function DomReady(fn)
28
 
{
29
 
        document.addEventListener("DOMContentLoaded", fn, false);
30
 
}
31
 
 
32
26
var slideshow;
33
27
 
34
 
window.onDomReady(function(){
35
 
        var settings = {
36
 
                slide_interval : window.SLIDESHOW_SLIDE_INTERVAL || 45,
37
 
                slide_transition_duration : window.SLIDESHOW_TRANSITION_DURATION || 0.5,
38
 
                loop : window.SLIDESHOW_LOOP || false,
39
 
                transition_type : window.SLIDESHOW_TRANSITION_TYPE || Crossfade.Transition.Cover
 
28
$(document).ready(function() {
 
29
        slideshow = $('#slideshow');
 
30
        
 
31
        var slideshow_options = {
 
32
                fx:'scrollHorz',
 
33
                timeout:45000,
 
34
                speed:500,
 
35
                nowrap:false,
 
36
                autopause:true,
 
37
                manualTrump:false,
40
38
        };
41
39
        
42
 
        var instance_options = []; /* this will hold parameters passed to the slideshow */
 
40
        
 
41
        
 
42
        var instance_options = [];
43
43
        parameters = window.location.hash.slice(window.location.hash.indexOf('#') + 1).split('?');
44
44
        for(var i = 0; i < parameters.length; i++)
45
45
        {
52
52
                setLocale(instance_options['locale']);
53
53
        
54
54
        if ( instance_options.indexOf('rtl') > -1 )
55
 
                loadRTL();
56
 
        
57
 
        
58
 
        Crossfade.setup({
59
 
                autoLoad:false,
60
 
                random:false,
61
 
                interval:settings.slide_interval,
62
 
                duration:settings.slide_transition_duration,
63
 
                loop:settings.loop,
64
 
                transition:settings.transition_type
65
 
        });
66
 
        slideshow = new Crossfade('slideshow');
 
55
                $(document.body).addClass('rtl');
 
56
        
 
57
        loadSlides();
 
58
        
67
59
        
68
60
        
69
61
        var debug_controls;
70
62
        if ( instance_options.indexOf('controls') > -1 )
71
 
                debug_controls = $('debug-controls');
72
 
        var controls = $('controls') || debug_controls;
 
63
                debug_controls = $('#debug-controls');
 
64
        var controls = $('#controls') || debug_controls;
73
65
        
74
66
        if (debug_controls) {
75
 
                debug_controls.style.display = "block";
 
67
                debug_controls.show();
76
68
        }
77
69
        
78
70
        if (controls) {
79
71
                /* we assume #controls contains
80
72
                   #current-slide, #prev-slide and #next-slide */
81
 
                
82
 
                /* TODO: only loop when the user is interacting with the controls; we
83
 
                   should still stop the timer if it reaches the end on its own */
84
 
                slideshow.options.loop = true;
85
 
                
86
 
                $('current-slide').value = slideshow.filenames[0];
87
 
                $('prev-slide').onclick = prevSlide;
88
 
                $('next-slide').onclick = nextSlide;
89
 
        }
 
73
                /*slideshow.options.loop = true;*/ /* TODO: USE CYCLE.NOWRAP */
 
74
                
 
75
                slideshow_options.prev = $('#prev-slide');
 
76
                slideshow_options.next = $('#next-slide');
 
77
        }
 
78
        
 
79
        
 
80
        
 
81
        slideshow_options.after = function(curr, next, opts) {
 
82
                var index = opts.currSlide;
 
83
                /* pause at last slide if requested in options */
 
84
                if ( index == opts.slideCount - 1 && opts.autopause ) {
 
85
                        slideshow.cycle('pause'); /* slides can still be advanced manually */
 
86
                }
 
87
        }
 
88
        
 
89
        $.extend(slideshow_options, window.SLIDESHOW_OPTIONS);
 
90
        slideshow.cycle(slideshow_options);
90
91
});
91
92
 
92
93
 
93
94
function setLocale(locale) {
94
 
        var slideanchors = $$("div#slideshow div a");
95
 
        
96
 
        slideanchors.each(function(anchor) {
97
 
                var slide_name = anchor.readAttribute("href");
98
 
                var new_url = _get_translated_url(slide_name, locale);
 
95
        slideshow.find('div>a').each(function() {
 
96
                var new_url = get_translated_url($(this).attr('href'), locale);
99
97
                
100
98
                if ( new_url != null ) {
101
 
                        anchor.href = new_url;
102
 
                        /*console.log("Using translation at: "+ new_url);*/
 
99
                        $(this).attr('href', new_url);
103
100
                }
104
101
        })
105
102
        
106
 
        function _get_translated_url(slide_name, locale) {
 
103
        function get_translated_url(slide_name, locale) {
107
104
                var translated_url = null
108
105
                
109
 
                if ( _translation_exists(slide_name, locale) ) {
 
106
                if ( translation_exists(slide_name, locale) ) {
110
107
                        translated_url = "./loc."+locale+"/"+slide_name;
111
108
                } else {
112
109
                        var before_dot = locale.split(".",1)[0];
113
110
                        var before_underscore = before_dot.split("_",1)[0];
114
 
                        if ( before_underscore != null && _translation_exists(slide_name, before_underscore) )
 
111
                        if ( before_underscore != null && translation_exists(slide_name, before_underscore) )
115
112
                                translated_url = "./loc."+before_underscore+"/"+slide_name;
116
 
                        else if ( before_dot != null && _translation_exists(slide_name, before_dot) )
 
113
                        else if ( before_dot != null && translation_exists(slide_name, before_dot) )
117
114
                                translated_url = "./loc."+before_dot+"/"+slide_name;
118
115
                }
119
116
                
120
117
                return translated_url;
121
118
        }
122
119
        
123
 
        function _translation_exists(slide_name, locale) {
 
120
        function translation_exists(slide_name, locale) {
124
121
                result = false;
125
122
                try {
126
123
                        result = ( directory[locale][slide_name] == true );
136
133
        }
137
134
}
138
135
 
139
 
function loadRTL() {
140
 
        document.body.addClassName("rtl")
141
 
}
142
 
 
143
 
function nextSlide() {
144
 
        slideshow.next();
145
 
}
146
 
 
147
 
function prevSlide() {
148
 
        slideshow.previous();
149
 
}
 
136
 
 
137
function loadSlides() {
 
138
        slideshow.children('div').each(function() {
 
139
                url = $(this).children('a').attr('href');
 
140
                $(this).load(url);
 
141
        });
 
142
}
 
143