d8c5e6bb153915aea50b1523346a7f9f5381f099
[redakcja.git] / project / static / js / views / split.js
1 /*globals Class*/
2
3 // Split view inspired by jQuery Splitter Plugin http://methvin.com/splitter/
4 var SplitView = Class.extend({
5   splitbarClass: 'splitview-splitbar',
6   activeClass: 'splitview-active',
7   element: null,
8   zombie: null,
9   leftViewOffset: 0,
10   
11   // Cache
12   _splitbarWidth: 0,
13   
14   init: function(element) {
15     this.element = $(element).css('position', 'relative');
16     this.views = $(">*", this.element[0]).css({
17         position: 'absolute',                     // positioned inside splitter container
18         'z-index': 1,                                           // splitbar is positioned above
19         '-moz-outline-style': 'none',   // don't show dotted outline
20         overflow: 'auto'
21     });
22     
23     this.leftView = $(this.views[0]);
24     this.rightView = $(this.views[1]);
25     this.splitbar = $(this.views[2] || '<div></div>')
26       .insertAfter(this.leftView)
27       .css({
28         position: 'absolute',
29         'user-select': 'none',
30         '-webkit-user-select': 'none',
31         '-khtml-user-select': 'none',
32         '-moz-user-select': 'none',
33         'z-index': 100
34       })
35       .attr('unselectable', 'on')
36       .addClass(this.splitbarClass)
37       .bind('mousedown.splitview', this.beginResize.bind(this));
38     
39     this._splitbarWidth = this.splitbar.outerWidth();
40     
41     // Solomon's algorithm ;-)
42     this.resplit(this.element.width() / 2);
43   },
44     
45   beginResize: function(event) {
46     this.zombie = this.zombie || this.splitbar.clone(false).insertAfter(this.leftView);
47     this.views.css("-webkit-user-select", "none"); // Safari selects A/B text on a move
48     this.splitbar.addClass(this.activeClass);
49     this.leftViewOffset = this.leftView[0].offsetWidth - event.pageX;
50     
51     $(document)
52       .bind('mousemove.splitview', this.resizeChanged.bind(this))
53       .bind('mouseup.splitview', this.endResize.bind(this));
54   },
55   
56   resizeChanged: function(event) {
57     var newPosition = event.pageX + this.leftViewOffset;
58     newPosition = Math.max(0, Math.min(newPosition, this.element.width() - this._splitbarWidth));
59     this.splitbar.css('left', newPosition);
60   },
61
62   endResize: function(event) {
63     var newPosition = event.pageX + this.leftViewOffset;
64     this.zombie.remove();
65     this.zombie = null;
66     this.resplit(newPosition);
67
68     $(document)
69       .unbind('mousemove.splitview')
70       .unbind('mouseup.splitview');
71   },
72
73   resplit: function(newPosition) {
74     newPosition = Math.max(0, Math.min(newPosition, this.element.width() - this._splitbarWidth));
75     this.splitbar.css('left', newPosition);
76     this.leftView.css({
77       left: 0,
78       width: newPosition
79     });
80     this.rightView.css({
81       left: newPosition + this._splitbarWidth,
82       width: this.element.width() - newPosition - this._splitbarWidth
83     });
84     if (!$.browser.msie) {
85                   this.views.trigger("resize");
86                 }
87   },
88   
89   dispose: function() {
90     this.splitter.unbind('mousedown.splitview');
91   }
92 });
93