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