← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to lib/jquery/jquery.ui-1.6rc2/demos/real-world/photo-manager/js/demo.js

  • Committer: V. Keith Hughitt
  • Date: 2009-03-26 19:20:57 UTC
  • Revision ID: hughitt1@kore-20090326192057-u0x8rf8sf5lmmnwh
nightly build 03-26-2009: Using alpha-channel JPEG 2000 dataset

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/jquery/jquery.ui-1.6rc2/demos/real-world/photo-manager/js/demo.js
1
 
/*
2
 
 * The very first increment of Droppables&Draggables demo. The code is going to
3
 
 * be more concise (remove unnecessary code repetitions etc.). And imho the
4
 
 * photo management is a good candidate for demonstration of more jQuery UI
5
 
 * components (sortables, selectables...). More to come...
6
 
 *
7
 
 */
8
 
 
9
 
$(window).bind('load', function() {
10
 
        // make images in the gallery draggable
11
 
        $('ul.gallery img').addClass('img_content').draggable({
12
 
                helper: 'clone'
13
 
        });
14
 
 
15
 
        // make the trash box droppable, accepting images from the content section only
16
 
        $('#trash div').droppable({
17
 
                accept: '.img_content',
18
 
                activeClass: 'active',
19
 
                drop: function(ev, ui) {
20
 
                        var $that = $(this);
21
 
                        ui.draggable.parent().fadeOut('slow', function() {
22
 
                                ui.draggable
23
 
                                        .hide()
24
 
                                        .appendTo($that)
25
 
                                        .fadeIn('slow')
26
 
                                        .animate({
27
 
                                                width: '72px',
28
 
                                                height: '54px'
29
 
                                        })
30
 
                                        .removeClass('img_content')
31
 
                                        .addClass('img_trash');
32
 
                                $(this).remove();
33
 
                        });
34
 
                }
35
 
        });
36
 
 
37
 
        // make the shredder box droppable, accepting images from both content and trash sections
38
 
        $('#shred div').droppable({
39
 
                accept: '.img_content, .img_trash',
40
 
                activeClass: 'active',
41
 
                drop: function(ev, ui) {
42
 
                        var $that = $(this);
43
 
                        // images from the content
44
 
                        if (ui.draggable.hasClass('img_content')) {
45
 
                                ui.draggable.parent().fadeOut('slow', function() {
46
 
                                        ui.draggable
47
 
                                                .appendTo($that)
48
 
                                                .animate({
49
 
                                                        width: '0',
50
 
                                                        height: '0'
51
 
                                                }, 'slow', function(){
52
 
                                                        $(this).remove();
53
 
                                                });
54
 
                                        $(this).remove();
55
 
                                });
56
 
                        }
57
 
                        // images from the trash
58
 
                        else if (ui.draggable.hasClass('img_trash')) {
59
 
                                ui.draggable
60
 
                                        .appendTo($that)
61
 
                                        .animate({
62
 
                                                width: '0',
63
 
                                                height: '0'
64
 
                                        }, 'slow', function(){
65
 
                                                $(this).remove();
66
 
                                        });
67
 
                        }
68
 
                }
69
 
        });
70
 
 
71
 
        // make the gallery droppable as well, accepting images from the trash only
72
 
        $('ul.gallery').droppable({
73
 
                accept: '.img_trash',
74
 
                activeClass: 'active',
75
 
                drop: function(ev, ui) {
76
 
                        var $that = $(this);
77
 
                        ui.draggable.fadeOut('slow', function() {
78
 
                                var $item = createGalleryItem(this).appendTo($that);
79
 
                                $(this)
80
 
                                        .removeClass('img_trash')
81
 
                                        .addClass('img_content')
82
 
                                        .css({ width: '144px', height: '108px' })
83
 
                                        .show();
84
 
                                $item.fadeIn('slow');
85
 
                        });
86
 
                }
87
 
        });
88
 
 
89
 
        // handle the trash icon behavior
90
 
        $('a.tb_trash').livequery('click', function() {
91
 
                var $this = $(this);
92
 
                var $img = $this.parent().siblings('img');
93
 
                var $item = $this.parents('li');
94
 
 
95
 
                $item.fadeOut('slow', function() {
96
 
                        $img
97
 
                                .hide()
98
 
                                .appendTo('#trash div')
99
 
                                .fadeIn('slow')
100
 
                                .animate({
101
 
                                        width: '72px',
102
 
                                        height: '54px'
103
 
                                })
104
 
                                .removeClass('img_content')
105
 
                                .addClass('img_trash');
106
 
                        $(this).remove();
107
 
                });
108
 
 
109
 
                return false;
110
 
        });
111
 
 
112
 
        // handle the magnify button
113
 
        $('a.tb_supersize').livequery('click', function() {
114
 
                $('<img width="576" height="432">')
115
 
                        .attr('src', $(this).attr('href'))
116
 
                        .appendTo('#body_wrap')
117
 
                        .displayBox();
118
 
                return false;
119
 
        });
120
 
        
121
 
        
122
 
        var sliderChange = function(e, ui){
123
 
                $('.img_content').each(function(index, item){
124
 
                        var _new = 1.44 * $('#sliderSize').slider("value");
125
 
                        
126
 
                        $(this).css("width", _new+'px')
127
 
                                .parent().css("width", (_new+16)+'px');
128
 
                        
129
 
                });
130
 
        }
131
 
        $('#sliderSize').slider({
132
 
                startValue : 100,
133
 
                min : 50,
134
 
                max : 100,
135
 
                stepping : 5,
136
 
                slide : sliderChange,
137
 
                change : sliderChange
138
 
        });
139
 
        
140
 
});
141
 
 
142
 
function createGalleryItem(img) {
143
 
        var title = img.getAttribute('alt');
144
 
        var href = img.getAttribute('src').replace(/thumbs\//, '');
145
 
 
146
 
        var $item = $('<li><p>'+title+'</p><div><a href="#" title="Trash me" class="tb_trash">Trash me</a><a href="'+href+'" title="See me supersized" class="tb_supersize">See me supersized</a></div></li>').hide();
147
 
        $item.prepend($(img));
148
 
 
149
 
        return $item;
150
 
}