2f917a883fc234382c221aa3424f6e9b9507c7c5
[redakcja.git] / project / static / js / jquery.hpanel.js
1 (function($){
2     
3         /* behaviour */
4         $.hpanel = {
5         settings: {},
6                 current_data: {},
7         resize_start: function(event, mydata) {
8                         $(document).bind('mousemove', mydata, $.hpanel.resize_changed).
9                                 bind('mouseup', mydata, $.hpanel.resize_stop); 
10
11                         $('.panel-overlay', mydata.root).css('display', 'block');
12                         return false;
13                 },
14                 resize_changed: function(event) {
15                         var old_width = parseInt(event.data.overlay.css('width'));
16                         var delta = event.pageX + event.data.hotspot_x - old_width;
17                         event.data.overlay.css({'width': old_width + delta});
18
19                         if(event.data.overlay.next) {
20                                 var left = parseInt(event.data.overlay.next.css('left'));
21                                 event.data.overlay.next.css('left', left+delta);
22                         }
23
24             return false; 
25         },
26         resize_stop: function(event) {
27             $(document).unbind('mousemove', $.hpanel.resize_changed).unbind('mouseup', $.hpanel.resize_stop);
28                         // $('.panel-content', event.data.root).css('display', 'block');
29                         var overlays = $('.panel-content-overlay', event.data.root);
30                         $('.panel-content-overlay', event.data.root).each(function(i) {
31                                 if( $(this).data('panel').hasClass('last-panel') )
32                                         $(this).data('panel').css({
33                                                 'left': $(this).css('left'), 'right': $(this).css('right')}); 
34                                 else
35                                         $(this).data('panel').css({
36                                                 'left': $(this).css('left'), 'width': $(this).css('width')}); 
37                         });
38
39                         $('.panel-overlay', event.data.root).css('display', 'none');
40         }
41     };
42     
43     $.fn.makeHorizPanel = function(options) 
44         {
45                 var root = $(this)
46                 var all_panels = $('.panel-wrap', root)
47
48                 /* create an overlay */
49                 var overlay_root = $("<div class='panel-overlay'></div>");
50                 root.append(overlay_root);
51
52                 var prev = null;
53
54                 all_panels.each(function(i) {
55                         var panel = $(all_panels[i]);
56                         var handle = $('.panel-slider', panel);
57
58                         var overlay     = $("<div class='panel-content-overlay panel-wrap'><p>Panel #"+i+"</p></div>");
59                         overlay_root.append(overlay);
60                         overlay.data('panel', panel);
61                         overlay.data('next', null);
62
63                         if( panel.hasClass('last-panel') )                              
64                                 overlay.css({'left': panel.css('left'), 'right': panel.css('right')});
65                         else
66                                 overlay.css({'left': panel.css('left'), 'width': panel.css('width')});
67
68                         if (prev) prev.next = overlay;
69
70                         if(handle) {
71                                 overlay.append(handle.clone());
72                                 /* attach the trigger */
73                                 handle.mousedown(function(event) {
74                                         var touch_data = {
75                                                 root: root, overlay: overlay,
76                                                 hotspot_x: event.pageX - handle.position().left
77                                         };
78
79                                         $(this).trigger('hpanel:panel-resize-start', touch_data);
80                                         return false;
81                                 });
82                                 $('.panel-content', panel).css('right', 
83                                         (handle.outerWidth() || 10) + 'px');
84                                 $('.panel-content-overlay', panel).css('right',
85                                         (handle.outerWidth() || 10) + 'px');
86                         }
87                                 
88                         prev = overlay;
89         });
90
91         root.bind('hpanel:panel-resize-start', $.hpanel.resize_start);
92     };
93 })(jQuery);
94