butcherman /
Tech_Bench
| @@ 3353-3436 (lines=84) @@ | ||
| 3350 | var self = this; |
|
| 3351 | self.on('repaint', self.renderScroll); |
|
| 3352 | }, |
|
| 3353 | renderScroll: function () { |
|
| 3354 | var self = this, margin = 2; |
|
| 3355 | function repaintScroll() { |
|
| 3356 | var hasScrollH, hasScrollV, bodyElm; |
|
| 3357 | function repaintAxis(axisName, posName, sizeName, contentSizeName, hasScroll, ax) { |
|
| 3358 | var containerElm, scrollBarElm, scrollThumbElm; |
|
| 3359 | var containerSize, scrollSize, ratio, rect; |
|
| 3360 | var posNameLower, sizeNameLower; |
|
| 3361 | scrollBarElm = self.getEl('scroll' + axisName); |
|
| 3362 | if (scrollBarElm) { |
|
| 3363 | posNameLower = posName.toLowerCase(); |
|
| 3364 | sizeNameLower = sizeName.toLowerCase(); |
|
| 3365 | global$9(self.getEl('absend')).css(posNameLower, self.layoutRect()[contentSizeName] - 1); |
|
| 3366 | if (!hasScroll) { |
|
| 3367 | global$9(scrollBarElm).css('display', 'none'); |
|
| 3368 | return; |
|
| 3369 | } |
|
| 3370 | global$9(scrollBarElm).css('display', 'block'); |
|
| 3371 | containerElm = self.getEl('body'); |
|
| 3372 | scrollThumbElm = self.getEl('scroll' + axisName + 't'); |
|
| 3373 | containerSize = containerElm['client' + sizeName] - margin * 2; |
|
| 3374 | containerSize -= hasScrollH && hasScrollV ? scrollBarElm['client' + ax] : 0; |
|
| 3375 | scrollSize = containerElm['scroll' + sizeName]; |
|
| 3376 | ratio = containerSize / scrollSize; |
|
| 3377 | rect = {}; |
|
| 3378 | rect[posNameLower] = containerElm['offset' + posName] + margin; |
|
| 3379 | rect[sizeNameLower] = containerSize; |
|
| 3380 | global$9(scrollBarElm).css(rect); |
|
| 3381 | rect = {}; |
|
| 3382 | rect[posNameLower] = containerElm['scroll' + posName] * ratio; |
|
| 3383 | rect[sizeNameLower] = containerSize * ratio; |
|
| 3384 | global$9(scrollThumbElm).css(rect); |
|
| 3385 | } |
|
| 3386 | } |
|
| 3387 | bodyElm = self.getEl('body'); |
|
| 3388 | hasScrollH = bodyElm.scrollWidth > bodyElm.clientWidth; |
|
| 3389 | hasScrollV = bodyElm.scrollHeight > bodyElm.clientHeight; |
|
| 3390 | repaintAxis('h', 'Left', 'Width', 'contentW', hasScrollH, 'Height'); |
|
| 3391 | repaintAxis('v', 'Top', 'Height', 'contentH', hasScrollV, 'Width'); |
|
| 3392 | } |
|
| 3393 | function addScroll() { |
|
| 3394 | function addScrollAxis(axisName, posName, sizeName, deltaPosName, ax) { |
|
| 3395 | var scrollStart; |
|
| 3396 | var axisId = self._id + '-scroll' + axisName, prefix = self.classPrefix; |
|
| 3397 | global$9(self.getEl()).append('<div id="' + axisId + '" class="' + prefix + 'scrollbar ' + prefix + 'scrollbar-' + axisName + '">' + '<div id="' + axisId + 't" class="' + prefix + 'scrollbar-thumb"></div>' + '</div>'); |
|
| 3398 | self.draghelper = new DragHelper(axisId + 't', { |
|
| 3399 | start: function () { |
|
| 3400 | scrollStart = self.getEl('body')['scroll' + posName]; |
|
| 3401 | global$9('#' + axisId).addClass(prefix + 'active'); |
|
| 3402 | }, |
|
| 3403 | drag: function (e) { |
|
| 3404 | var ratio, hasScrollH, hasScrollV, containerSize; |
|
| 3405 | var layoutRect = self.layoutRect(); |
|
| 3406 | hasScrollH = layoutRect.contentW > layoutRect.innerW; |
|
| 3407 | hasScrollV = layoutRect.contentH > layoutRect.innerH; |
|
| 3408 | containerSize = self.getEl('body')['client' + sizeName] - margin * 2; |
|
| 3409 | containerSize -= hasScrollH && hasScrollV ? self.getEl('scroll' + axisName)['client' + ax] : 0; |
|
| 3410 | ratio = containerSize / self.getEl('body')['scroll' + sizeName]; |
|
| 3411 | self.getEl('body')['scroll' + posName] = scrollStart + e['delta' + deltaPosName] / ratio; |
|
| 3412 | }, |
|
| 3413 | stop: function () { |
|
| 3414 | global$9('#' + axisId).removeClass(prefix + 'active'); |
|
| 3415 | } |
|
| 3416 | }); |
|
| 3417 | } |
|
| 3418 | self.classes.add('scroll'); |
|
| 3419 | addScrollAxis('v', 'Top', 'Height', 'Y', 'Width'); |
|
| 3420 | addScrollAxis('h', 'Left', 'Width', 'X', 'Height'); |
|
| 3421 | } |
|
| 3422 | if (self.settings.autoScroll) { |
|
| 3423 | if (!self._hasScroll) { |
|
| 3424 | self._hasScroll = true; |
|
| 3425 | addScroll(); |
|
| 3426 | self.on('wheel', function (e) { |
|
| 3427 | var bodyEl = self.getEl('body'); |
|
| 3428 | bodyEl.scrollLeft += (e.deltaX || 0) * 10; |
|
| 3429 | bodyEl.scrollTop += e.deltaY * 10; |
|
| 3430 | repaintScroll(); |
|
| 3431 | }); |
|
| 3432 | global$9(self.getEl('body')).on('scroll', repaintScroll); |
|
| 3433 | } |
|
| 3434 | repaintScroll(); |
|
| 3435 | } |
|
| 3436 | } |
|
| 3437 | }; |
|
| 3438 | ||
| 3439 | var Panel = Container.extend({ |
|
| @@ 3295-3378 (lines=84) @@ | ||
| 3292 | var self = this; |
|
| 3293 | self.on('repaint', self.renderScroll); |
|
| 3294 | }, |
|
| 3295 | renderScroll: function () { |
|
| 3296 | var self = this, margin = 2; |
|
| 3297 | function repaintScroll() { |
|
| 3298 | var hasScrollH, hasScrollV, bodyElm; |
|
| 3299 | function repaintAxis(axisName, posName, sizeName, contentSizeName, hasScroll, ax) { |
|
| 3300 | var containerElm, scrollBarElm, scrollThumbElm; |
|
| 3301 | var containerSize, scrollSize, ratio, rect; |
|
| 3302 | var posNameLower, sizeNameLower; |
|
| 3303 | scrollBarElm = self.getEl('scroll' + axisName); |
|
| 3304 | if (scrollBarElm) { |
|
| 3305 | posNameLower = posName.toLowerCase(); |
|
| 3306 | sizeNameLower = sizeName.toLowerCase(); |
|
| 3307 | global$7(self.getEl('absend')).css(posNameLower, self.layoutRect()[contentSizeName] - 1); |
|
| 3308 | if (!hasScroll) { |
|
| 3309 | global$7(scrollBarElm).css('display', 'none'); |
|
| 3310 | return; |
|
| 3311 | } |
|
| 3312 | global$7(scrollBarElm).css('display', 'block'); |
|
| 3313 | containerElm = self.getEl('body'); |
|
| 3314 | scrollThumbElm = self.getEl('scroll' + axisName + 't'); |
|
| 3315 | containerSize = containerElm['client' + sizeName] - margin * 2; |
|
| 3316 | containerSize -= hasScrollH && hasScrollV ? scrollBarElm['client' + ax] : 0; |
|
| 3317 | scrollSize = containerElm['scroll' + sizeName]; |
|
| 3318 | ratio = containerSize / scrollSize; |
|
| 3319 | rect = {}; |
|
| 3320 | rect[posNameLower] = containerElm['offset' + posName] + margin; |
|
| 3321 | rect[sizeNameLower] = containerSize; |
|
| 3322 | global$7(scrollBarElm).css(rect); |
|
| 3323 | rect = {}; |
|
| 3324 | rect[posNameLower] = containerElm['scroll' + posName] * ratio; |
|
| 3325 | rect[sizeNameLower] = containerSize * ratio; |
|
| 3326 | global$7(scrollThumbElm).css(rect); |
|
| 3327 | } |
|
| 3328 | } |
|
| 3329 | bodyElm = self.getEl('body'); |
|
| 3330 | hasScrollH = bodyElm.scrollWidth > bodyElm.clientWidth; |
|
| 3331 | hasScrollV = bodyElm.scrollHeight > bodyElm.clientHeight; |
|
| 3332 | repaintAxis('h', 'Left', 'Width', 'contentW', hasScrollH, 'Height'); |
|
| 3333 | repaintAxis('v', 'Top', 'Height', 'contentH', hasScrollV, 'Width'); |
|
| 3334 | } |
|
| 3335 | function addScroll() { |
|
| 3336 | function addScrollAxis(axisName, posName, sizeName, deltaPosName, ax) { |
|
| 3337 | var scrollStart; |
|
| 3338 | var axisId = self._id + '-scroll' + axisName, prefix = self.classPrefix; |
|
| 3339 | global$7(self.getEl()).append('<div id="' + axisId + '" class="' + prefix + 'scrollbar ' + prefix + 'scrollbar-' + axisName + '">' + '<div id="' + axisId + 't" class="' + prefix + 'scrollbar-thumb"></div>' + '</div>'); |
|
| 3340 | self.draghelper = new DragHelper(axisId + 't', { |
|
| 3341 | start: function () { |
|
| 3342 | scrollStart = self.getEl('body')['scroll' + posName]; |
|
| 3343 | global$7('#' + axisId).addClass(prefix + 'active'); |
|
| 3344 | }, |
|
| 3345 | drag: function (e) { |
|
| 3346 | var ratio, hasScrollH, hasScrollV, containerSize; |
|
| 3347 | var layoutRect = self.layoutRect(); |
|
| 3348 | hasScrollH = layoutRect.contentW > layoutRect.innerW; |
|
| 3349 | hasScrollV = layoutRect.contentH > layoutRect.innerH; |
|
| 3350 | containerSize = self.getEl('body')['client' + sizeName] - margin * 2; |
|
| 3351 | containerSize -= hasScrollH && hasScrollV ? self.getEl('scroll' + axisName)['client' + ax] : 0; |
|
| 3352 | ratio = containerSize / self.getEl('body')['scroll' + sizeName]; |
|
| 3353 | self.getEl('body')['scroll' + posName] = scrollStart + e['delta' + deltaPosName] / ratio; |
|
| 3354 | }, |
|
| 3355 | stop: function () { |
|
| 3356 | global$7('#' + axisId).removeClass(prefix + 'active'); |
|
| 3357 | } |
|
| 3358 | }); |
|
| 3359 | } |
|
| 3360 | self.classes.add('scroll'); |
|
| 3361 | addScrollAxis('v', 'Top', 'Height', 'Y', 'Width'); |
|
| 3362 | addScrollAxis('h', 'Left', 'Width', 'X', 'Height'); |
|
| 3363 | } |
|
| 3364 | if (self.settings.autoScroll) { |
|
| 3365 | if (!self._hasScroll) { |
|
| 3366 | self._hasScroll = true; |
|
| 3367 | addScroll(); |
|
| 3368 | self.on('wheel', function (e) { |
|
| 3369 | var bodyEl = self.getEl('body'); |
|
| 3370 | bodyEl.scrollLeft += (e.deltaX || 0) * 10; |
|
| 3371 | bodyEl.scrollTop += e.deltaY * 10; |
|
| 3372 | repaintScroll(); |
|
| 3373 | }); |
|
| 3374 | global$7(self.getEl('body')).on('scroll', repaintScroll); |
|
| 3375 | } |
|
| 3376 | repaintScroll(); |
|
| 3377 | } |
|
| 3378 | } |
|
| 3379 | }; |
|
| 3380 | ||
| 3381 | var Panel = Container.extend({ |
|
