Ulepszone zmienianie rozmiaru. Fixes #58.

[redakcja.git] / project / static / js / panels.js

diff --git a/project/static/js/panels.js b/project/static/js/panels.js
index e502861..0c8761c 100644 (file)
--- a/project/static/js/panels.js
+++ b/project/static/js/panels.js
@@ -1,23 +1,71 @@
+function loadPanel(target, url) {
+    console.log('ajax', url, 'into', target);
+    $(document).trigger('panel:unload', target);
+    $.ajax({
+        url: url,
+        dataType: 'html',
+        success: function(data, textStatus) {
+            console.log(target, 'ajax success');
+            $(target).html(data);
+            console.log(target, 'triggering panel:load');
+            $(document).trigger('panel:load', target);
+            // panel(target);
+        },
+        error: function(request, textStatus, errorThrown) {
+            console.log('ajax', url, target, 'error:', textStatus, errorThrown);
+        }
+    });
+}
+
+// Funkcja do tworzenia nowych paneli
+function panel(load, unload) {
+    var self = null;
+    var eventId = Math.ceil(Math.random() * 1000000000);
+    
+    unloadHandler = function(event, panel) {
+        if (self && self == panel) {
+            console.log('Panel', panel, 'unloading');
+            $(document).unbind('panel:unload.' + eventId);
+            $(panel).html('');
+            unload(event, panel);
+            console.log('Panel', panel, 'unloaded');
+            return false;
+        }
+    };
+    
+    $(document).one('panel:load', function(event, panel) {
+        self = panel;
+        console.log('Panel', panel, 'loading');
+        $(document).bind('panel:unload.' + eventId, unloadHandler);
+        load(event, panel);
+        console.log('Panel', panel, 'loaded');
+    });
+}
+
 $(function() {
     // ========================
     // = Resizable panels =
     // ========================
-    function resizePanels() {
-        $('.panel').height($(window).height() - $('.panel').position().top);
-        $('#right-panel-wrap').width($(window).width() - $('#left-panel-wrap').outerWidth());
-    }
-    
-    $(window).resize(function() {
-        resizePanels();
-    })
+//    function resizePanels() {
+//             // called on resize
+//        $('.panel').height($(window).height() - $('.panel').position().top);
+//        $('.panel-content').height($(window).height() - $('.panel-contents').position().top);
+//        $('#right-panel-wrap').width($(window).width() - $('#left-panel-wrap').outerWidth());
+//    }
     
-    $('#left-panel-wrap').bind('resizable:resize', resizePanels)
-        .resizable('#slider', {minWidth: 8});
-    
-    resizePanels();
+//    $(window).resize(function() {
+//        resizePanels();
+//    })
+
+    $('#panels').makeHorizPanel({});
+    $('#panels').css('top', ($('#header').outerHeight() ) + 'px');
+       
+//    $('#left-panel-wrap').bind('resizable:stop', resizePanels)
+//        .resizable({minWidth: 8});    
+//    resizePanels();
     
     $('.panel-toolbar select').change(function() {
-        console.log('loading panel', $(this).val(), 'into', $('.panel-contents', $(this).parent()));
+        loadPanel($('.panel-content', $(this).parent().parent()), $(this).val())
     });
     // $('#id_folders').change(function() {
     //     $('#images').load('{% url folder_image_ajax %}' + $('#id_folders').val() + '/', function() {