4 * Copyright, Moxiecode Systems AB
5 * Released under LGPL License.
7 * License: http://www.tinymce.com/license
8 * Contributing: http://www.tinymce.com/contributing
12 * This mixin makes controls scrollable using custom scrollbars.
14 * @-x-less Scrollable.less
15 * @mixin tinymce.ui.Scrollable
17 define("tinymce/ui/Scrollable", [
18 "tinymce/ui/DomUtils",
19 "tinymce/ui/DragHelper"
20 ], function(DomUtils, DragHelper) {
26 self.on('repaint', self.renderScroll);
29 renderScroll: function() {
30 var self = this, margin = 2;
32 function repaintScroll() {
33 var hasScrollH, hasScrollV, bodyElm;
35 function repaintAxis(axisName, posName, sizeName, contentSizeName, hasScroll, ax) {
36 var containerElm, scrollBarElm, scrollThumbElm;
37 var containerSize, scrollSize, ratio, rect;
38 var posNameLower, sizeNameLower;
40 scrollBarElm = self.getEl('scroll' + axisName);
42 posNameLower = posName.toLowerCase();
43 sizeNameLower = sizeName.toLowerCase();
45 if (self.getEl('absend')) {
46 DomUtils.css(self.getEl('absend'), posNameLower, self.layoutRect()[contentSizeName] - 1);
50 DomUtils.css(scrollBarElm, 'display', 'none');
54 DomUtils.css(scrollBarElm, 'display', 'block');
55 containerElm = self.getEl('body');
56 scrollThumbElm = self.getEl('scroll' + axisName + "t");
57 containerSize = containerElm["client" + sizeName] - (margin * 2);
58 containerSize -= hasScrollH && hasScrollV ? scrollBarElm["client" + ax] : 0;
59 scrollSize = containerElm["scroll" + sizeName];
60 ratio = containerSize / scrollSize;
63 rect[posNameLower] = containerElm["offset" + posName] + margin;
64 rect[sizeNameLower] = containerSize;
65 DomUtils.css(scrollBarElm, rect);
68 rect[posNameLower] = containerElm["scroll" + posName] * ratio;
69 rect[sizeNameLower] = containerSize * ratio;
70 DomUtils.css(scrollThumbElm, rect);
74 bodyElm = self.getEl('body');
75 hasScrollH = bodyElm.scrollWidth > bodyElm.clientWidth;
76 hasScrollV = bodyElm.scrollHeight > bodyElm.clientHeight;
78 repaintAxis("h", "Left", "Width", "contentW", hasScrollH, "Height");
79 repaintAxis("v", "Top", "Height", "contentH", hasScrollV, "Width");
82 function addScroll() {
83 function addScrollAxis(axisName, posName, sizeName, deltaPosName, ax) {
84 var scrollStart, axisId = self._id + '-scroll' + axisName, prefix = self.classPrefix;
86 self.getEl().appendChild(DomUtils.createFragment(
87 '<div id="' + axisId + '" class="' + prefix + 'scrollbar ' + prefix + 'scrollbar-' + axisName + '">' +
88 '<div id="' + axisId + 't" class="' + prefix + 'scrollbar-thumb"></div>' +
92 self.draghelper = new DragHelper(axisId + 't', {
94 scrollStart = self.getEl('body')["scroll" + posName];
95 DomUtils.addClass(DomUtils.get(axisId), prefix + 'active');
99 var ratio, hasScrollH, hasScrollV, containerSize, layoutRect = self.layoutRect();
101 hasScrollH = layoutRect.contentW > layoutRect.innerW;
102 hasScrollV = layoutRect.contentH > layoutRect.innerH;
103 containerSize = self.getEl('body')["client" + sizeName] - (margin * 2);
104 containerSize -= hasScrollH && hasScrollV ? self.getEl('scroll' + axisName)["client" + ax] : 0;
106 ratio = containerSize / self.getEl('body')["scroll" + sizeName];
107 self.getEl('body')["scroll" + posName] = scrollStart + (e["delta" + deltaPosName] / ratio);
111 DomUtils.removeClass(DomUtils.get(axisId), prefix + 'active');
115 self.on('click', function(e) {
116 if (e.target.id == self._id + '-scrollv') {
122 self.addClass('scroll');
124 addScrollAxis("v", "Top", "Height", "Y", "Width");
125 addScrollAxis("h", "Left", "Width", "X", "Height");
128 if (self.settings.autoScroll) {
129 if (!self._hasScroll) {
130 self._hasScroll = true;
133 self.on('wheel', function(e) {
134 var bodyEl = self.getEl('body');
136 bodyEl.scrollLeft += (e.deltaX || 0) * 10;
137 bodyEl.scrollTop += e.deltaY * 10;
142 DomUtils.on(self.getEl('body'), "scroll", repaintScroll);