1 /**

     2  * Scrollable.js

     3  *

     4  * Copyright, Moxiecode Systems AB

     5  * Released under LGPL License.

     6  *

     7  * License: http://www.tinymce.com/license

     8  * Contributing: http://www.tinymce.com/contributing

     9  */

    10 

    11 /**

    12  * This mixin makes controls scrollable using custom scrollbars.

    13  *

    14  * @-x-less Scrollable.less

    15  * @mixin tinymce.ui.Scrollable

    16  */

    17 define("tinymce/ui/Scrollable", [

    18 	"tinymce/ui/DomUtils",

    19 	"tinymce/ui/DragHelper"

    20 ], function(DomUtils, DragHelper) {

    21 	"use strict";

    22 

    23 	return {

    24 		init: function() {

    25 			var self = this;

    26 			self.on('repaint', self.renderScroll);

    27 		},

    28 

    29 		renderScroll: function() {

    30 			var self = this, margin = 2;

    31 

    32 			function repaintScroll() {

    33 				var hasScrollH, hasScrollV, bodyElm;

    34 

    35 				function repaintAxis(axisName, posName, sizeName, contentSizeName, hasScroll, ax) {

    36 					var containerElm, scrollBarElm, scrollThumbElm;

    37 					var containerSize, scrollSize, ratio, rect;

    38 					var posNameLower, sizeNameLower;

    39 

    40 					scrollBarElm = self.getEl('scroll' + axisName);

    41 					if (scrollBarElm) {

    42 						posNameLower = posName.toLowerCase();

    43 						sizeNameLower = sizeName.toLowerCase();

    44 

    45 						if (self.getEl('absend')) {

    46 							DomUtils.css(self.getEl('absend'), posNameLower, self.layoutRect()[contentSizeName] - 1);

    47 						}

    48 

    49 						if (!hasScroll) {

    50 							DomUtils.css(scrollBarElm, 'display', 'none');

    51 							return;

    52 						}

    53 

    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;

    61 

    62 						rect = {};

    63 						rect[posNameLower] = containerElm["offset" + posName] + margin;

    64 						rect[sizeNameLower] = containerSize;

    65 						DomUtils.css(scrollBarElm, rect);

    66 

    67 						rect = {};

    68 						rect[posNameLower] = containerElm["scroll" + posName] * ratio;

    69 						rect[sizeNameLower] = containerSize * ratio;

    70 						DomUtils.css(scrollThumbElm, rect);

    71 					}

    72 				}

    73 

    74 				bodyElm = self.getEl('body');

    75 				hasScrollH = bodyElm.scrollWidth > bodyElm.clientWidth;

    76 				hasScrollV = bodyElm.scrollHeight > bodyElm.clientHeight;

    77 

    78 				repaintAxis("h", "Left", "Width", "contentW", hasScrollH, "Height");

    79 				repaintAxis("v", "Top", "Height", "contentH", hasScrollV, "Width");

    80 			}

    81 

    82 			function addScroll() {

    83 				function addScrollAxis(axisName, posName, sizeName, deltaPosName, ax) {

    84 					var scrollStart, axisId = self._id + '-scroll' + axisName, prefix = self.classPrefix;

    85 

    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>' +

    89 						'</div>'

    90 					));

    91 

    92 					self.draghelper = new DragHelper(axisId + 't', {

    93 						start: function() {

    94 							scrollStart = self.getEl('body')["scroll" + posName];

    95 							DomUtils.addClass(DomUtils.get(axisId), prefix + 'active');

    96 						},

    97 

    98 						drag: function(e) {

    99 							var ratio, hasScrollH, hasScrollV, containerSize, layoutRect = self.layoutRect();

   100 

   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;

   105 

   106 							ratio = containerSize / self.getEl('body')["scroll" + sizeName];

   107 							self.getEl('body')["scroll" + posName] = scrollStart + (e["delta" + deltaPosName] / ratio);

   108 						},

   109 

   110 						stop: function() {

   111 							DomUtils.removeClass(DomUtils.get(axisId), prefix + 'active');

   112 						}

   113 					});

   114 /*

   115 					self.on('click', function(e) {

   116 						if (e.target.id == self._id + '-scrollv') {

   117 

   118 						}

   119 					});*/

   120 				}

   121 

   122 				self.addClass('scroll');

   123 

   124 				addScrollAxis("v", "Top", "Height", "Y", "Width");

   125 				addScrollAxis("h", "Left", "Width", "X", "Height");

   126 			}

   127 

   128 			if (self.settings.autoScroll) {

   129 				if (!self._hasScroll) {

   130 					self._hasScroll = true;

   131 					addScroll();

   132 

   133 					self.on('wheel', function(e) {

   134 						var bodyEl = self.getEl('body');

   135 

   136 						bodyEl.scrollLeft += (e.deltaX || 0) * 10;

   137 						bodyEl.scrollTop += e.deltaY * 10;

   138 

   139 						repaintScroll();

   140 					});

   141 

   142 					DomUtils.on(self.getEl('body'), "scroll", repaintScroll);

   143 				}

   144 

   145 				repaintScroll();

   146 			}

   147 		}

   148 	};

   149 });