Podstawowy zoom. Refs #32.

[redakcja.git] / project / templates / explorer / panels / gallery.html

diff --git a/project/templates/explorer/panels/gallery.html b/project/templates/explorer/panels/gallery.html
index d35366e..565a636 100644 (file)
--- a/project/templates/explorer/panels/gallery.html
+++ b/project/templates/explorer/panels/gallery.html
@@ -1,33 +1,45 @@
-<div class="panel">
-    <div class="images-wrap">
-        <div class="images">
-            <p>Aby zobaczyć obrazki wybierz folder poniżej:</p>
-            <p><select name="folders" class="id_folders">
-            <option value="" selected="selected">-- Wybierz folder z obrazkami --</option>
-            <option value="andersen_basnie">andersen_basnie</option>
-            </select></p>
-        </div>
-    </div>
+<div class="toolbar" style="height: 24px">
+    {{ form.folders }}
+</div>
+
+<div class="images-wrap" style="position: absolute; top: 24px; left:0px; right:0px; bottom: 0px;">
+    <div class="images"><!-- To jest div na obrazki, które są wstawiane później --></div>
 </div>
 <script type="text/javascript" charset="utf-8">
-    (function() {
-        function resizeEditor(event, panel) {
-            var panel = panel || event.data.panel;
-            $('.images-wrap', panel).height($(panel).height());
-        }
 
-        panel(function(event, panel) {
-            $('.id_folders', panel).change(function() {
-                $('.images', panel).load('{% url folder_image_ajax %}' + $('.id_folders', panel).val() + '/', function() {
-                    $('.images-wrap', panel).data('lazyload:lastCheckedScrollTop', -10000);
+panel_hooks = {
+    load: function() {
+        var contentDiv = this.contentDiv;
+        $('select[name=folders]', contentDiv).change(function() {
+            var select = this;
+            $('.images', contentDiv).fadeOut('slow', function() { 
+                $(this).html('').load('{% url folder_image_ajax %}' + $(select).val() + '/',  function() {
+                    $('.images', contentDiv).fadeIn('slow');
+                    $('.images-wrap', contentDiv).data('lazyload:lastCheckedScrollTop', -10000);
+                    $('.image-box').click(function() {
+                        var src = $('img', $(this)).attr('src');
+                        var idx = src.lastIndexOf('/');
+                        var bigSrc = src.substring(0, idx) + '/big' + src.substring(idx, src.length);
+                        var zoom = $('<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: scroll">'
+                            + '<img src="' + bigSrc + '" />'
+                            + '</div>').click(function() {
+                                $(this).remove();
+                            })
+                        zoom.appendTo(contentDiv);
+                    });
                 });
-            });
-            $('.images-wrap', panel).lazyload('.image-box', {threshold: 640 * 10, scrollTreshold: 640 * 5});
-            
-            $(window).bind('resize', {'panel': panel}, resizeEditor);
-            resizeEditor(null, panel);  
-        }, function(event, panel) {
-            console.log('unloaded gallery panel', panel);
+            })
         });
-    })()
+        
+        $('.images-wrap', contentDiv).lazyload('.image-box', 
+            {threshold: 640 * 10, scrollTreshold: 640 * 5}
+        );
+    },
+    refresh: function() {
+        return true; // gallery is always fresh
+    },
+    dirty: function() {
+        return true; // and it doesn't get dirty 
+    }
+};
 </script>