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