From 456187c9000834d77372cf03f7a63c7bb4d9da49 Mon Sep 17 00:00:00 2001 From: =?utf8?q?=C5=81ukasz=20Rekucki?= Date: Mon, 24 Aug 2009 12:27:58 +0200 Subject: [PATCH] Ulepszone zmienianie rozmiaru. Fixes #58. --- project/static/css/master.css | 34 +++++++--- project/static/js/jquery.hpanel.js | 80 ++++++++++++++++-------- project/static/js/panels.js | 6 +- project/templates/explorer/file_xml.html | 6 +- 4 files changed, 83 insertions(+), 43 deletions(-) diff --git a/project/static/css/master.css b/project/static/css/master.css index 84a91294..88e6583e 100644 --- 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 bd75e9cb..0877400c 100644 --- 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 = $("
"); + 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 = $("

Panel #"+i+"

"); + 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 5d0aa08e..0c8761c8 100644 --- 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 1681d9cd..c6caca69 100644 --- a/project/templates/explorer/file_xml.html +++ b/project/templates/explorer/file_xml.html @@ -22,10 +22,10 @@ -
+
-
+
-
+
{% endblock maincontent %} -- 2.20.1