Ulepszone zmienianie rozmiaru. Fixes #58.

diff --git a/project/static/css/master.css b/project/static/css/master.css
index 84a9129..88e6583 100644 (file)
--- a/project/static/css/master.css
+++ b/project/static/css/master.css
@@ -94,13 +94,6 @@ label {
        bottom: 0px; left: 0px; right: 0px; top: 50px;
 }
 
-.panels-mouse-overlay {
-       position: absolute;
-       top: 0px; bottom: 0px; left: 0px; right: 0px;
-       z-index: 0;
-       background: transparent;
-}
-
 .panel-wrap {
     overflow: hidden;
        position: absolute; /* absolute to relation with #panels */
@@ -120,12 +113,26 @@ label {
 }
 
 /* contents */
-.panel-contents {
+.panel-content {
        position: absolute;
-       top: 22px; left: 0px; right: 8px; bottom:0px;
+       top: 22px; left: 0px; bottom:0px; right: 0px;
 }
 
-.panel-wrap.no-slider .panel-contents {
+.panel-overlay {
+       position: absolute;
+       top: 0px; bottom: 0px; left: 0px; right: 0px;
+       z-index: 10;
+       background: gray;
+       opacity: 0.8;
+       text-align: center;
+       overflow: hidden;
+       display: none;
+}
+
+.panel-content-overlay {
+}
+
+.panel-wrap.last-panel .panel-content {
        right: 0px;
 }
 
@@ -153,6 +160,7 @@ label {
 /* Slider between panels */
 .panel-wrap .panel-slider {
     position: absolute;
+       background-color: #DDD;
 
     top: 0px; bottom: 0px; right: 0px; width: 6px;
 
@@ -160,6 +168,8 @@ label {
     border-right: 1px solid #999;
     border-top: none;
     border-bottom: none;
+
+       z-index: 5;
 }
 
 .panel-wrap .panel-slider:hover {
@@ -167,6 +177,10 @@ label {
     cursor: col-resize;
 }
 
+.panel-content-overlay.panel-wrap .panel-slider {
+       background-color: #DDD;
+}
+
 /* ================= */
 /* = Gallery panel = */
 /* ================= */

diff --git a/project/static/js/jquery.hpanel.js b/project/static/js/jquery.hpanel.js
index bd75e9c..0877400 100644 (file)
--- a/project/static/js/jquery.hpanel.js
+++ b/project/static/js/jquery.hpanel.js
@@ -5,63 +5,89 @@
         settings: {},
                current_data: {},
         resize_start: function(event, mydata) {
-                       console.log('Panel ' + mydata.panel.attr('id') + ' started resizing');
+                       console.log('Overlay: ' + mydata.overlay);
                        $(document).bind('mousemove', mydata, $.hpanel.resize_changed).
                                bind('mouseup', mydata, $.hpanel.resize_stop); 
-                       $('iframe').bind('mousemove', mydata, $.hpanel.resize_changed).
-                               bind('mouseup', mydata, $.hpanel.resize_stop); 
+
+                       $('.panel-overlay', mydata.root).css('display', 'block');
                        return false;
                },
                resize_changed: function(event) {
-                       var old_width = parseInt(event.data.panel.css('width'));
+                       var old_width = parseInt(event.data.overlay.css('width'));
                        var delta = event.pageX + event.data.hotspot_x - old_width;
-                       event.data.panel.css({'width': old_width + delta});
+                       event.data.overlay.css({'width': old_width + delta});
 
-                       if(event.data.panel.next_panel) {
-                               var left = parseInt(event.data.panel.next_panel.css('left'));
-                               console.log('left: ' + left + ' new_left: ' + (left+delta) );
-                               event.data.panel.next_panel.css('left', left+delta);
+                       if(event.data.overlay.next) {
+                               var left = parseInt(event.data.overlay.next.css('left'));
+                               event.data.overlay.next.css('left', left+delta);
                        }
 
             return false; 
         },
         resize_stop: function(event) {
             $(document).unbind('mousemove', $.hpanel.resize_changed).unbind('mouseup', $.hpanel.resize_stop);
-           $('iframe').unbind('mousemove', $.hpanel.resize_changed).unbind('mouseup', $.hpanel.resize_stop);
-            $('body').css('cursor', 'auto');
+                       // $('.panel-content', event.data.root).css('display', 'block');
+                       var overlays = $('.panel-content-overlay', event.data.root);
+                       $('.panel-content-overlay', event.data.root).each(function(i) {
+                               $(this).data('panel').css({
+                                       'left': $(this).css('left'), 
+                                       'width': $(this).css('width') 
+                               });
+                       });
+
+                       $('.panel-overlay', event.data.root).css('display', 'none');
         }
     };
     
-    $.fn.make_hpanel = function(options) 
+    $.fn.makeHorizPanel = function(options) 
        {
                console.log('Making an hpanel out of "#' +  $(this).attr('id') + '"'); 
                var root = $(this)
                var all_panels = $('.panel-wrap', root)
                console.log('Panels: ' + all_panels);
 
+               /* create an overlay */
+               var overlay_root = $("<div class='panel-overlay'></div>");
+               root.append(overlay_root);
+
                var prev = null;
 
                all_panels.each(function(i) {
                        var panel = $(all_panels[i]);
-                       var handle = $('.panel-slider', panel) 
+                       var handle = $('.panel-slider', panel);
 
-                       panel.next_panel = null;
-                       if (prev) prev.next_panel = panel;
+                       var overlay     = $("<div class='panel-content-overlay panel-wrap'><p>Panel #"+i+"</p></div>");
+                       overlay_root.append(overlay);
+                       overlay.data('panel', panel);
+                       overlay.data('next', null);
 
-                       /* attach the trigger */
-               handle.mousedown(function(event) {
-                               var touch_data = {
-                                       panel_root: root, 
-                                       panel: panel, 
-                                       hotspot_x: event.pageX - handle.position().left
-                               };
-                               $(this).trigger('hpanel:panel-resize-start', touch_data);
-                               return false;
-                       });
-                       prev = panel;
+                       if( panel.hasClass('last-panel') )
+                               overlay.css({'left': panel.css('left'), 'right': panel.css('right')});
+                       else
+                               overlay.css({'left': panel.css('left'), 'width': panel.css('width')});
+
+                       if (prev) prev.next = overlay;
+
+                       if(handle) {
+                               overlay.append(handle.clone());
+                               /* attach the trigger */
+                               handle.mousedown(function(event) {
+                                       var touch_data = {
+                                               root: root, overlay: overlay,
+                                               hotspot_x: event.pageX - handle.position().left
+                                       };
+
+                                       $(this).trigger('hpanel:panel-resize-start', touch_data);
+                                       return false;
+                               });
+                               $('.panel-content', panel).css('right',handle.outerWidth() + 'px');
+                               $('.panel-content-overlay', panel).css('right',handle.outerWidth() + 'px');
+                       }
+                               
+                       prev = overlay;
         });
 
-               root.bind('hpanel:panel-resize-start', $.hpanel.resize_start);
+       root.bind('hpanel:panel-resize-start', $.hpanel.resize_start);
     };
 })(jQuery);
 

diff --git a/project/static/js/panels.js b/project/static/js/panels.js
index 5d0aa08..0c8761c 100644 (file)
--- a/project/static/js/panels.js
+++ b/project/static/js/panels.js
@@ -49,7 +49,7 @@ $(function() {
 //    function resizePanels() {
 //             // called on resize
 //        $('.panel').height($(window).height() - $('.panel').position().top);
-//        $('.panel-contents').height($(window).height() - $('.panel-contents').position().top);
+//        $('.panel-content').height($(window).height() - $('.panel-contents').position().top);
 //        $('#right-panel-wrap').width($(window).width() - $('#left-panel-wrap').outerWidth());
 //    }
     
@@ -57,7 +57,7 @@ $(function() {
 //        resizePanels();
 //    })
 
-    $('#panels').make_hpanel({});
+    $('#panels').makeHorizPanel({});
     $('#panels').css('top', ($('#header').outerHeight() ) + 'px');
        
 //    $('#left-panel-wrap').bind('resizable:stop', resizePanels)
@@ -65,7 +65,7 @@ $(function() {
 //    resizePanels();
     
     $('.panel-toolbar select').change(function() {
-        loadPanel($('.panel-contents', $(this).parent().parent()), $(this).val())
+        loadPanel($('.panel-content', $(this).parent().parent()), $(this).val())
     });
     // $('#id_folders').change(function() {
     //     $('#images').load('{% url folder_image_ajax %}' + $('#id_folders').val() + '/', function() {

diff --git a/project/templates/explorer/file_xml.html b/project/templates/explorer/file_xml.html
index 1681d9c..c6caca6 100644 (file)
--- a/project/templates/explorer/file_xml.html
+++ b/project/templates/explorer/file_xml.html
@@ -22,10 +22,10 @@
                                 <option value="{% url htmleditor_panel hash %}">Edytor HTML</option>
                             <option value="{% url gallery_panel hash %}">Galeria skanów</option>                                              </select>
                </div>
-               <div id="left-panel-contents" class="panel-contents"></div>
+               <div id="left-panel-content" class="panel-content"></div>
                <button class="panel-slider">&nbsp;</button>
             </div>
-            <div id="right-panel-wrap" class="panel-wrap no-slider">
+            <div id="right-panel-wrap" class="panel-wrap last-panel">
                 <div id="right-panel-toolbar" class="panel-toolbar">
                        <label for="select-right-panel">Prawy panel:</label>
                     <select name="select-right-panel" id="select-right-panel">
@@ -34,7 +34,7 @@
                             <option value="{% url gallery_panel hash %}">Galeria skanów</option>
                     </select>
                  </div>
-                 <div id="right-panel-contents" class="panel-contents"></div>
+                 <div id="right-panel-content" class="panel-content"></div>
             </div>
         </div>
 {% endblock maincontent %}