X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/53aa67dfd12e44e9ed8fffabec228ec7a4e2d144..626e9c46c2cf49a63b887c8b8f800bf55f9d7ae9:/project/static/js/jquery.hpanel.js diff --git a/project/static/js/jquery.hpanel.js b/project/static/js/jquery.hpanel.js index bd75e9cb..eb6d8bdb 100644 --- a/project/static/js/jquery.hpanel.js +++ b/project/static/js/jquery.hpanel.js @@ -5,63 +5,86 @@ 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); - $('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 = $(" "); + 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);