X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/80ba576b659d4ee4e19e9f422cef4e1644a03d8d..f02d58db2f0a5f06c38d669c4b4c4fff95e55395:/project/static/js/jquery.hpanel.js?ds=sidebyside diff --git a/project/static/js/jquery.hpanel.js b/project/static/js/jquery.hpanel.js index ec8c1e74..bec82e06 100644 --- a/project/static/js/jquery.hpanel.js +++ b/project/static/js/jquery.hpanel.js @@ -5,63 +5,90 @@ settings: {}, current_data: {}, resize_start: function(event, mydata) { - console.log('Panel ' + mydata.panel.attr('id') + ' started resizing'); $(document).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.overlay.css({'width': old_width + delta}); - console.log('o: ' + (old_width) + ' pX: ' + event.pageX + ' hX: ' + event.data.hotspot_x); - console.log('next_panel: ' + $(event.data.panel.next_panel).attr('id')); - event.data.panel.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); - $('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) { + if( $(this).data('panel').hasClass('last-panel') ) + $(this).data('panel').css({ + 'left': $(this).css('left'), 'right': $(this).css('right')}); + else + $(this).data('panel').css({ + 'left': $(this).css('left'), 'width': $(this).css('width')}); + }); + $('.panel-overlay', event.data.root).css('display', 'none'); + $(event.data.root).trigger('stopResize'); } }; - $.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) + $('*.panel-wrap', root).each( function() + { + var panel = $(this); + var handle = $('.panel-slider', panel); + var overlay = $("
 
"); + overlay_root.append(overlay); + overlay.data('panel', panel); + overlay.data('next', null); - panel.next_panel = null; - if (prev) prev.next_panel = panel; + if (prev) prev.next = overlay; - /* 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')}); + $.log('Has handle: ' + panel.attr('id')); + 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() || 10) + 'px'); + $('.panel-content-overlay', panel).css('right', + (handle.outerWidth() || 10) + 'px'); + }; + + prev = overlay; }); - root.bind('hpanel:panel-resize-start', $.hpanel.resize_start); + root.bind('hpanel:panel-resize-start', $.hpanel.resize_start); }; })(jQuery);