root/other-projects/tipple-android/i-greenstone-server-files/greenstone/webapps/greenstone3/interfaces/default/js/jquery-ui-1.8.15/demos/droppable/photo-manager.html @ 26899

Revision 26899, 6.9 KB (checked in by davidb, 7 years ago)

Tipple reborn after Chris's Summer of Code 2013

Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <title>jQuery UI Droppable - Simple photo manager</title>
6    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7    <script src="../../jquery-1.6.2.js"></script>
8    <script src="../../ui/jquery.ui.position.js"></script>
9    <script src="../../ui/jquery.ui.core.js"></script>
10    <script src="../../ui/jquery.ui.widget.js"></script>
11    <script src="../../ui/jquery.ui.mouse.js"></script>
12    <script src="../../ui/jquery.ui.draggable.js"></script>
13    <script src="../../ui/jquery.ui.droppable.js"></script>
14    <script src="../../ui/jquery.ui.resizable.js"></script>
15    <script src="../../ui/jquery.ui.dialog.js"></script>
16    <link rel="stylesheet" href="../demos.css">
17    <style>
18    #gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
19    .gallery.custom-state-active { background: #eee; }
20    .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
21    .gallery li h5 { margin: 0 0 0.4em; cursor: move; }
22    .gallery li a { float: right; }
23    .gallery li a.ui-icon-zoomin { float: left; }
24    .gallery li img { width: 100%; cursor: move; }
25
26    #trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
27    #trash h4 { line-height: 16px; margin: 0 0 0.4em; }
28    #trash h4 .ui-icon { float: left; }
29    #trash .gallery h5 { display: none; }
30    </style>
31    <script>
32    $(function() {
33        // there's the gallery and the trash
34        var $gallery = $( "#gallery" ),
35            $trash = $( "#trash" );
36
37        // let the gallery items be draggable
38        $( "li", $gallery ).draggable({
39            cancel: "a.ui-icon", // clicking an icon won't initiate dragging
40            revert: "invalid", // when not dropped, the item will revert back to its initial position
41            containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
42            helper: "clone",
43            cursor: "move"
44        });
45
46        // let the trash be droppable, accepting the gallery items
47        $trash.droppable({
48            accept: "#gallery > li",
49            activeClass: "ui-state-highlight",
50            drop: function( event, ui ) {
51                deleteImage( ui.draggable );
52            }
53        });
54
55        // let the gallery be droppable as well, accepting items from the trash
56        $gallery.droppable({
57            accept: "#trash li",
58            activeClass: "custom-state-active",
59            drop: function( event, ui ) {
60                recycleImage( ui.draggable );
61            }
62        });
63
64        // image deletion function
65        var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
66        function deleteImage( $item ) {
67            $item.fadeOut(function() {
68                var $list = $( "ul", $trash ).length ?
69                    $( "ul", $trash ) :
70                    $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
71
72                $item.find( "a.ui-icon-trash" ).remove();
73                $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
74                    $item
75                        .animate({ width: "48px" })
76                        .find( "img" )
77                            .animate({ height: "36px" });
78                });
79            });
80        }
81
82        // image recycle function
83        var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
84        function recycleImage( $item ) {
85            $item.fadeOut(function() {
86                $item
87                    .find( "a.ui-icon-refresh" )
88                        .remove()
89                    .end()
90                    .css( "width", "96px")
91                    .append( trash_icon )
92                    .find( "img" )
93                        .css( "height", "72px" )
94                    .end()
95                    .appendTo( $gallery )
96                    .fadeIn();
97            });
98        }
99
100        // image preview function, demonstrating the ui.dialog used as a modal window
101        function viewLargerImage( $link ) {
102            var src = $link.attr( "href" ),
103                title = $link.siblings( "img" ).attr( "alt" ),
104                $modal = $( "img[src$='" + src + "']" );
105
106            if ( $modal.length ) {
107                $modal.dialog( "open" );
108            } else {
109                var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
110                    .attr( "src", src ).appendTo( "body" );
111                setTimeout(function() {
112                    img.dialog({
113                        title: title,
114                        width: 400,
115                        modal: true
116                    });
117                }, 1 );
118            }
119        }
120
121        // resolve the icons behavior with event delegation
122        $( "ul.gallery > li" ).click(function( event ) {
123            var $item = $( this ),
124                $target = $( event.target );
125
126            if ( $target.is( "a.ui-icon-trash" ) ) {
127                deleteImage( $item );
128            } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
129                viewLargerImage( $target );
130            } else if ( $target.is( "a.ui-icon-refresh" ) ) {
131                recycleImage( $item );
132            }
133
134            return false;
135        });
136    });
137    </script>
138</head>
139<body>
140
141<div class="demo ui-widget ui-helper-clearfix">
142
143<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
144    <li class="ui-widget-content ui-corner-tr">
145        <h5 class="ui-widget-header">High Tatras</h5>
146        <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
147        <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
148        <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
149    </li>
150    <li class="ui-widget-content ui-corner-tr">
151        <h5 class="ui-widget-header">High Tatras 2</h5>
152        <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
153        <a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
154        <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
155    </li>
156    <li class="ui-widget-content ui-corner-tr">
157        <h5 class="ui-widget-header">High Tatras 3</h5>
158        <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
159        <a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
160        <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
161    </li>
162    <li class="ui-widget-content ui-corner-tr">
163        <h5 class="ui-widget-header">High Tatras 4</h5>
164        <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
165        <a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
166        <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
167    </li>
168</ul>
169
170<div id="trash" class="ui-widget-content ui-state-default">
171    <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
172</div>
173
174</div><!-- End demo -->
175
176
177<div class="demo-description">
178<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
179<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
180<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
181</div><!-- End demo-description -->
182
183</body>
184</html>
Note: See TracBrowser for help on using the browser.