2205 lines
74 KiB
JavaScript
2205 lines
74 KiB
JavaScript
/*
|
|
* (c) Copyright Ascensio System SIA 2010-2024
|
|
*
|
|
* This program is a free software product. You can redistribute it and/or
|
|
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
|
* version 3 as published by the Free Software Foundation. In accordance with
|
|
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
|
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
|
* of any third-party rights.
|
|
*
|
|
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
|
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
|
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
|
*
|
|
* You can contact Ascensio System SIA at 20A-6 Ernesta Birznieka-Upish
|
|
* street, Riga, Latvia, EU, LV-1050.
|
|
*
|
|
* The interactive user interfaces in modified source and object code versions
|
|
* of the Program must display Appropriate Legal Notices, as required under
|
|
* Section 5 of the GNU AGPL version 3.
|
|
*
|
|
* Pursuant to Section 7(b) of the License you must retain the original Product
|
|
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
|
* grant you any rights under trademark law for use of our trademarks.
|
|
*
|
|
* All the Product's GUI elements, including illustrations and icon sets, as
|
|
* well as technical writing content are licensed under the terms of the
|
|
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
|
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
|
*
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
( /**
|
|
* @param {Window} window
|
|
* @param {undefined} undefined
|
|
*/
|
|
function (window, undefined) {
|
|
|
|
var AscBrowser = window['AscCommon'].AscBrowser;
|
|
|
|
var debug = false;
|
|
|
|
var ArrowType = {
|
|
NONE: 0,
|
|
ARROW_TOP: 1,
|
|
ARROW_RIGHT: 2,
|
|
ARROW_BOTTOM: 3,
|
|
ARROW_LEFT: 4
|
|
};
|
|
|
|
var AnimationType = {
|
|
NONE: 0,
|
|
SCROLL_HOVER: 1,
|
|
ARROW_HOVER: 2,
|
|
SCROLL_ACTIVE: 3,
|
|
ARROW_ACTIVE: 4
|
|
};
|
|
|
|
function GetClientWidth( elem ) {
|
|
if (!elem) return 0;
|
|
var _w = elem.clientWidth;
|
|
if ( 0 != _w )
|
|
return _w;
|
|
|
|
var _string_w = "" + elem.style.width;
|
|
if ( -1 < _string_w.indexOf( "%" ) )
|
|
return 0;
|
|
|
|
var _intVal = parseInt( _string_w );
|
|
if ( !isNaN( _intVal ) && 0 < _intVal )
|
|
return _intVal;
|
|
|
|
return 0;
|
|
}
|
|
function GetClientHeight( elem ) {
|
|
if (!elem) return 0;
|
|
var _w = elem.clientHeight;
|
|
if ( 0 != _w )
|
|
return _w;
|
|
|
|
var _string_w = "" + elem.style.height;
|
|
if ( -1 < _string_w.indexOf( "%" ) )
|
|
return 0;
|
|
|
|
var _intVal = parseInt( _string_w );
|
|
if ( !isNaN( _intVal ) && 0 < _intVal )
|
|
return _intVal;
|
|
|
|
return 0;
|
|
}
|
|
|
|
function CArrowDrawer( settings ) {
|
|
// размер квадратика в пикселах
|
|
this.Size = 16;
|
|
this.SizeW = 16;
|
|
this.SizeH = 16;
|
|
|
|
this.SizeNaturalW = this.SizeW;
|
|
this.SizeNaturalH = this.SizeH;
|
|
|
|
this.ColorGradStart = {R: _HEXTORGB_(settings.arrowColor).R, G: _HEXTORGB_(settings.arrowColor).G, B: _HEXTORGB_(settings.arrowColor).B};
|
|
this.InstalledColorGradStart = null;
|
|
|
|
// вот такие мега настройки для кастомизации)
|
|
this.IsDrawBorderInNoneMode = false;
|
|
this.IsDrawBorders = true;
|
|
|
|
//arrow pixel size
|
|
this.pxCount = settings.slimScroll ? 4 : 6;
|
|
|
|
// имя - направление стрелки
|
|
this.ImageLeft = null;
|
|
this.ImageTop = null;
|
|
this.ImageRight = null;
|
|
this.ImageBottom = null;
|
|
|
|
this.fadeInFadeOutDelay = settings.fadeInFadeOutDelay || 30;
|
|
}
|
|
CArrowDrawer.prototype.checkSettings = function ( settings )
|
|
{
|
|
this.ColorGradStart = {R: _HEXTORGB_(settings.arrowColor).R, G: _HEXTORGB_(settings.arrowColor).G, B: _HEXTORGB_(settings.arrowColor).B};
|
|
}
|
|
|
|
CArrowDrawer.prototype.InitSize = function ( sizeW, sizeH )
|
|
{
|
|
if (this.ImageLeft)
|
|
{
|
|
if (sizeH === this.SizeH && sizeW === this.SizeW)
|
|
{
|
|
if (this.InstalledColorGradStart &&
|
|
this.InstalledColorGradStart.R === this.ColorGradStart.R &&
|
|
this.InstalledColorGradStart.G === this.ColorGradStart.G &&
|
|
this.InstalledColorGradStart.B === this.ColorGradStart.B)
|
|
{
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
var dPR = AscBrowser.retinaPixelRatio;
|
|
this.SizeW = Math.max( sizeW, 1 );
|
|
this.SizeH = Math.max( sizeH, 1 );
|
|
|
|
this.SizeNaturalW = this.SizeW;
|
|
this.SizeNaturalH = this.SizeH;
|
|
|
|
if (null == this.ImageLeft || null == this.ImageTop || null == this.ImageRight || null == this.ImageBottom)
|
|
{
|
|
this.ImageLeft = document.createElement('canvas');
|
|
this.ImageTop = document.createElement('canvas');
|
|
this.ImageRight = document.createElement('canvas');
|
|
this.ImageBottom = document.createElement('canvas');
|
|
}
|
|
|
|
var len = Math.floor(this.pxCount * dPR);
|
|
if ( this.SizeH < this.pxCount )
|
|
return;
|
|
|
|
// теперь делаем нечетную длину
|
|
if ( 0 == (len & 1) )
|
|
len += 1;
|
|
|
|
var countPart = (len + 1) >> 1,
|
|
_data, px,
|
|
_x = ((this.SizeW - len) >> 1),
|
|
_y = this.SizeH - ((this.SizeH - countPart) >> 1),
|
|
r, g, b;
|
|
var __x = _x, __y = _y, _len = len;
|
|
r = this.ColorGradStart.R;
|
|
g = this.ColorGradStart.G;
|
|
b = this.ColorGradStart.B;
|
|
|
|
// запоминаем цвет, чтобы перерисоваться при смене темы
|
|
if (!this.InstalledColorGradStart)
|
|
this.InstalledColorGradStart = { R : 0, G : 0, B : 0 };
|
|
this.InstalledColorGradStart.R = r;
|
|
this.InstalledColorGradStart.G = g;
|
|
this.InstalledColorGradStart.B = b;
|
|
|
|
this.ImageTop.width = this.SizeW;
|
|
this.ImageTop.height = this.SizeH;
|
|
this.ImageBottom.width = this.SizeW;
|
|
this.ImageBottom.height = this.SizeH;
|
|
this.ImageLeft.width = this.SizeW;
|
|
this.ImageLeft.height = this.SizeH;
|
|
this.ImageRight.width = this.SizeW;
|
|
this.ImageRight.height = this.SizeH;
|
|
var ctx = this.ImageTop.getContext('2d');
|
|
var ctxBottom = this.ImageBottom.getContext('2d');
|
|
var ctxLeft = this.ImageLeft.getContext('2d');
|
|
var ctxRight = this.ImageRight.getContext('2d');
|
|
|
|
_data = ctx.createImageData(this.SizeW, this.SizeH);
|
|
px = _data.data;
|
|
|
|
while (_len > 0) {
|
|
var ind = 4 * (this.SizeW * __y + __x);
|
|
for (var i = 0; i < _len; i++) {
|
|
px[ind++] = r;
|
|
px[ind++] = g;
|
|
px[ind++] = b;
|
|
px[ind++] = 255;
|
|
}
|
|
|
|
r = r >> 0;
|
|
g = g >> 0;
|
|
b = b >> 0;
|
|
|
|
__x += 1;
|
|
__y -= 1;
|
|
_len -= 2;
|
|
}
|
|
var dy = dPR <= 1 ? -1 : 0;
|
|
|
|
ctx.putImageData(_data, 0, dy);
|
|
|
|
_data = ctxLeft.createImageData(this.SizeW, this.SizeH);
|
|
px = _data.data;
|
|
_len = len;
|
|
__x = _x, __y = _y;
|
|
while (_len > 0) {
|
|
var ind = 4 * (this.SizeH * __x + __y);
|
|
var xx = __x;
|
|
for (var i = 0; i < _len; i++) {
|
|
px[ind++] = r;
|
|
px[ind++] = g;
|
|
px[ind++] = b;
|
|
px[ind++] = 255;
|
|
++xx;
|
|
ind = 4 * (this.SizeH * xx + __y);
|
|
}
|
|
r = r >> 0;
|
|
g = g >> 0;
|
|
b = b >> 0;
|
|
__x += 1;
|
|
__y -= 1;
|
|
_len -= 2;
|
|
}
|
|
var dx = dPR <= 1 ? -1 : 0;
|
|
var dy = this.SizeW % 2 === 0 ? 1 : 0;
|
|
ctxLeft.putImageData(_data, dx, dy);
|
|
|
|
dx = this.SizeW % 2 === 0 ? 1 : 0;
|
|
ctxBottom.translate( this.SizeW / 2, this.SizeH / 2);
|
|
ctxBottom.rotate(Math.PI);
|
|
ctxBottom.translate(-this.SizeW / 2, -this.SizeH / 2);
|
|
ctxBottom.drawImage( this.ImageTop, dx, 0, this.ImageBottom.width, this.ImageBottom.height);
|
|
|
|
dy = this.SizeH % 2 === 0 ? -1 : 0;
|
|
ctxRight.translate( this.SizeW / 2, this.SizeH / 2);
|
|
ctxRight.rotate(Math.PI);
|
|
ctxRight.translate(-this.SizeW / 2, -this.SizeH / 2);
|
|
ctxRight.drawImage( this.ImageLeft, 0, dy, this.ImageRight.width, this.ImageRight.height);
|
|
};
|
|
|
|
/**
|
|
* @constructor
|
|
*/
|
|
function ScrollSettings() {
|
|
this.showArrows = true;
|
|
this.screenW = -1;
|
|
this.screenH = -1;
|
|
this.screenAddH = 0;
|
|
|
|
this.contentH = 0;
|
|
this.contentW = 0;
|
|
|
|
//timeout when scroll move
|
|
this.initialDelay = 300;
|
|
this.arrowRepeatFreq = 50;
|
|
this.trackClickRepeatFreq = 70;
|
|
|
|
this.scrollPagePercent = 1. / 8;
|
|
|
|
//max and min scroll size
|
|
this.scrollerMinHeight = 34;
|
|
this.scrollerMaxHeight = 99999;
|
|
this.scrollerMinWidth = 34;
|
|
this.scrollerMaxWidth = 99999;
|
|
|
|
//arrow dimension
|
|
this.arrowDim = Math.round(13 * AscBrowser.retinaPixelRatio);
|
|
|
|
//scroll elements color
|
|
this.scrollerColor = "#f1f1f1";
|
|
this.scrollerHoverColor = "#cfcfcf";
|
|
this.scrollerActiveColor = "#adadad";
|
|
this.scrollBackgroundColor = "#f4f4f4";
|
|
this.scrollBackgroundColorHover = "#f4f4f4";
|
|
this.scrollBackgroundColorActive = "#f4f4f4";
|
|
this.strokeStyleNone = "#cfcfcf";
|
|
this.strokeStyleOver = "#cfcfcf";
|
|
this.strokeStyleActive = "#ADADAD";
|
|
|
|
//scroll speed
|
|
this.vscrollStep = 10;
|
|
this.hscrollStep = 10;
|
|
this.wheelScrollLines = 1;
|
|
|
|
//arrow elements color
|
|
this.arrowColor = "#ADADAD";
|
|
this.arrowHoverColor = "#f1f1f1";
|
|
this.arrowActiveColor = "#f1f1f1";
|
|
|
|
this.arrowBorderColor = "#cfcfcf";
|
|
this.arrowOverBorderColor = "#cfcfcf";
|
|
this.arrowOverBackgroundColor = "#cfcfcf";
|
|
this.arrowActiveBorderColor = "#ADADAD";
|
|
this.arrowActiveBackgroundColor = "#ADADAD";
|
|
|
|
//scroll animation time delay
|
|
this.fadeInFadeOutDelay = 20;
|
|
|
|
//stripes color
|
|
this.targetColor = "#cfcfcf";
|
|
this.targetHoverColor = "#f1f1f1";
|
|
this.targetActiveColor = "#f1f1f1";
|
|
|
|
this.defaultColor = 241;
|
|
this.hoverColor = 207;
|
|
this.activeColor = 173;
|
|
|
|
this.arrowSizeW = Math.round(13 * AscBrowser.retinaPixelRatio);
|
|
this.arrowSizeH = Math.round(13 * AscBrowser.retinaPixelRatio);
|
|
this.cornerRadius = 0;
|
|
this.slimScroll = false;
|
|
this.alwaysVisible = false;
|
|
this.isVerticalScroll = true;
|
|
this.isHorizontalScroll = false;
|
|
}
|
|
|
|
/**
|
|
* @constructor
|
|
*/
|
|
function ScrollObject( elemID, settings, dbg ) {
|
|
if ( dbg )
|
|
debug = dbg;
|
|
this.that = this;
|
|
|
|
this.settings = settings;
|
|
this.ArrowDrawer = new CArrowDrawer( this.settings );
|
|
|
|
this.mouseUp = false;
|
|
this.mouseDown = false;
|
|
|
|
this.that.mouseover = false;
|
|
|
|
this.scrollerMouseDown = false;
|
|
this.animState = AnimationType.NONE;
|
|
this.lastAnimState = this.animState;
|
|
this.arrowState = ArrowType.NONE;
|
|
this.lastArrowState = this.arrowState;
|
|
|
|
this.moveble = false;
|
|
this.lock = false;
|
|
this.scrollTimeout = null;
|
|
|
|
this.StartMousePosition = {x:0, y:0};
|
|
this.EndMousePosition = {x:0, y:0};
|
|
|
|
this.dragMinY = 0;
|
|
this.dragMaxY = 0;
|
|
|
|
this.scrollVCurrentY = 0;
|
|
this.scrollHCurrentX = 0;
|
|
this.arrowPosition = 0;
|
|
|
|
this.verticalTrackHeight = 0;
|
|
this.horizontalTrackWidth = 0;
|
|
|
|
this.paneHeight = 0;
|
|
this.paneWidth = 0;
|
|
|
|
this.maxScrollY = 0;
|
|
this.maxScrollX = 0;
|
|
this.maxScrollY2 = 0;
|
|
this.maxScrollX2 = 0;
|
|
|
|
this.scrollCoeff = 0;
|
|
this.isResizeArrows = false;
|
|
|
|
this.scroller = {x:0, y:1, h:0, w:0};
|
|
|
|
this.canvas = null;
|
|
this.context = null;
|
|
|
|
this.eventListeners = [];
|
|
|
|
this.canvasW = 1;
|
|
this.canvasH = 1;
|
|
this.canvasOriginalW = 1;
|
|
this.canvasOriginalH = 1;
|
|
|
|
this.scrollColor = _HEXTORGB_(this.settings.scrollerColor).R;
|
|
this.arrowColor = _HEXTORGB_(this.settings.arrowColor).R;
|
|
this.firstArrow = {arrowColor: _HEXTORGB_(this.settings.arrowColor).R, arrowBackColor: _HEXTORGB_(this.settings.scrollerColor).R, arrowStrokeColor: _HEXTORGB_(this.settings.strokeStyleNone).R};
|
|
this.secondArrow = {arrowColor: _HEXTORGB_(this.settings.arrowColor).R, arrowBackColor: _HEXTORGB_(this.settings.scrollerColor).R, arrowStrokeColor: _HEXTORGB_(this.settings.strokeStyleNone).R};
|
|
|
|
this.targetColor = _HEXTORGB_(this.settings.targetColor).R;
|
|
this.strokeColor = _HEXTORGB_(this.settings.strokeStyleNone).R;
|
|
|
|
this.fadeTimeoutScroll = null;
|
|
this.fadeTimeoutArrows = null;
|
|
|
|
this.disableCurrentScroll = false;
|
|
this._initPiperImg();
|
|
|
|
this._init( elemID );
|
|
}
|
|
|
|
ScrollObject.prototype._initPiperImg = function() {
|
|
var dPR = AscBrowser.retinaPixelRatio;
|
|
this.piperImgVert = document.createElement( 'canvas' );
|
|
this.piperImgHor = document.createElement( 'canvas' );
|
|
|
|
this.piperImgVert.height = Math.round( 13 * dPR);
|
|
this.piperImgVert.width = Math.round(5 * dPR);
|
|
|
|
this.piperImgHor.width = Math.round( 13 * dPR);
|
|
this.piperImgHor.height = Math.round(5 * dPR);
|
|
|
|
if(this.settings.slimScroll){
|
|
this.piperImgVert.width =
|
|
this.piperImgHor.height = Math.round(3 * dPR);
|
|
}
|
|
|
|
var ctx_piperImg;
|
|
ctx_piperImg = this.piperImgVert.getContext('2d');
|
|
ctx_piperImg.beginPath();
|
|
ctx_piperImg.lineWidth = Math.floor(dPR);
|
|
var count = 0;
|
|
|
|
var _dPR = dPR < 0.5 ? Math.ceil(dPR) : Math.round(dPR);
|
|
|
|
for (var i = 0; i < this.piperImgVert.height; i += _dPR + Math.floor(dPR)) {
|
|
ctx_piperImg.moveTo(0, i + 0.5 * ctx_piperImg.lineWidth);
|
|
ctx_piperImg.lineTo(this.piperImgVert.width, i + 0.5 * ctx_piperImg.lineWidth);
|
|
ctx_piperImg.stroke();
|
|
++count;
|
|
if (count > 6 && dPR >= 1) break;
|
|
}
|
|
|
|
ctx_piperImg = this.piperImgHor.getContext('2d');
|
|
ctx_piperImg.beginPath();
|
|
ctx_piperImg.lineWidth = Math.floor(dPR);
|
|
var count = 0;
|
|
for (var i = 0; i < this.piperImgHor.width; i += _dPR + Math.floor(dPR)) {
|
|
ctx_piperImg.moveTo(i + 0.5 * ctx_piperImg.lineWidth, 0);
|
|
ctx_piperImg.lineTo(i + 0.5 * ctx_piperImg.lineWidth, this.piperImgHor.height);
|
|
ctx_piperImg.stroke();
|
|
++count;
|
|
if (count > 6 && dPR >= 1) break;
|
|
}
|
|
}
|
|
|
|
ScrollObject.prototype._init = function ( elemID ) {
|
|
if ( !elemID ) return false;
|
|
|
|
var dPR = AscBrowser.retinaPixelRatio;
|
|
var holder = document.getElementById( elemID );
|
|
|
|
if ( holder.getElementsByTagName( 'canvas' ).length == 0 ){
|
|
this.canvas = holder.appendChild( document.createElement( "CANVAS" ) );
|
|
}
|
|
else {
|
|
this.canvas = holder.children[1];
|
|
}
|
|
|
|
this.canvas.setAttribute("oo_no_focused", true);
|
|
|
|
this.canvas.style.width = "100%";
|
|
this.canvas.style.height = "100%";
|
|
|
|
this.canvas.that = this;
|
|
this.canvas.style.zIndex = 100;
|
|
this.canvas.style.position = "absolute";
|
|
this.canvas.style.top = "0px";
|
|
this.canvas.style["msTouchAction"] = "none";
|
|
if ( navigator.userAgent.toLowerCase().indexOf( "webkit" ) != -1 ){
|
|
this.canvas.style.webkitUserSelect = "none";
|
|
}
|
|
|
|
this.context = this.canvas.getContext( '2d' );
|
|
|
|
this._setDimension( holder.clientHeight, holder.clientWidth );
|
|
|
|
this.maxScrollY = this.maxScrollY2 = this.settings.contentH - this.settings.screenH > 0 ? this.settings.contentH - this.settings.screenH : 0;
|
|
this.maxScrollX = this.maxScrollX2 = this.settings.contentW - this.settings.screenW > 0 ? this.settings.contentW - this.settings.screenW : 0;
|
|
|
|
if(this.settings.isVerticalScroll && !this.settings.alwaysVisible) {
|
|
this.canvas.style.display = this.maxScrollY == 0 ? "none" : "";
|
|
}
|
|
|
|
if(this.settings.isHorizontalScroll && !this.settings.alwaysVisible) {
|
|
this.canvas.style.display = this.maxScrollX == 0 ? "none" : "";
|
|
}
|
|
|
|
this._setScrollerHW();
|
|
this.settings.arrowDim = this.settings.slimScroll && this.settings.isVerticalScroll ? this.scroller.w : this.settings.arrowDim;
|
|
this.settings.arrowDim = this.settings.slimScroll && this.settings.isHorizontalScroll ? this.scroller.h : this.settings.arrowDim;
|
|
this.arrowPosition = this.settings.showArrows ? Math.round(this.settings.arrowDim + this._roundForScale(dPR) + this._roundForScale(dPR)) : Math.round(dPR);
|
|
|
|
this.paneHeight = this.canvasH - this.arrowPosition * 2;
|
|
this.paneWidth = this.canvasW - this.arrowPosition * 2;
|
|
|
|
this.RecalcScroller();
|
|
|
|
AscCommon.addMouseEvent(this.canvas, "down", this.evt_mousedown);
|
|
AscCommon.addMouseEvent(this.canvas, "move", this.evt_mousemove);
|
|
AscCommon.addMouseEvent(this.canvas, "up", this.evt_mouseup);
|
|
AscCommon.addMouseEvent(this.canvas, "over", this.evt_mouseover);
|
|
AscCommon.addMouseEvent(this.canvas, "out", this.evt_mouseout);
|
|
this.canvas.onmousewheel = this.evt_mousewheel;
|
|
|
|
var _that = this;
|
|
this.canvas.ontouchstart = function ( e ) {
|
|
_that.evt_mousedown( e.touches[0] );
|
|
return false;
|
|
};
|
|
this.canvas.ontouchmove = function ( e ) {
|
|
_that.evt_mousemove( e.touches[0] );
|
|
return false;
|
|
};
|
|
this.canvas.ontouchend = function ( e ) {
|
|
_that.evt_mouseup( e.changedTouches[0] );
|
|
return false;
|
|
};
|
|
|
|
if ( this.canvas.addEventListener ){
|
|
this.canvas.addEventListener( 'DOMMouseScroll', this.evt_mousewheel, false );
|
|
}
|
|
|
|
this.context.fillStyle = this.settings.scrollBackgroundColor;
|
|
this.context.fillRect(0,0,this.canvasW,this.canvasH);
|
|
this._drawArrows();
|
|
this._draw();
|
|
|
|
return true;
|
|
};
|
|
ScrollObject.prototype.disableCurrentScroll = function() {
|
|
this.disableCurrentScroll = true;
|
|
};
|
|
ScrollObject.prototype.checkDisableCurrentScroll = function() {
|
|
var ret = this.disableCurrentScroll;
|
|
this.disableCurrentScroll = false;
|
|
return ret;
|
|
};
|
|
ScrollObject.prototype.getMousePosition = function ( evt ) {
|
|
// get canvas position
|
|
var obj = this.canvas;
|
|
var top = 0;
|
|
var left = 0;
|
|
while ( obj && obj.tagName != 'BODY' ) {
|
|
top += obj.offsetTop;
|
|
left += obj.offsetLeft;
|
|
obj = obj.offsetParent;
|
|
}
|
|
var dPR = AscBrowser.retinaPixelRatio;
|
|
// return relative mouse position
|
|
var mouseX = (((evt.clientX * AscBrowser.zoom) >> 0) - left + window.pageXOffset) * dPR;
|
|
var mouseY = (((evt.clientY * AscBrowser.zoom) >> 0) - top + window.pageYOffset) * dPR;
|
|
|
|
let api = window.Asc.editor;
|
|
let wb = api && api.wb;
|
|
let ws = wb && wb.getWorksheet();
|
|
if (ws && ws.getRightToLeft()) {
|
|
mouseX = this.that.canvasW - mouseX;
|
|
}
|
|
|
|
return {
|
|
x:mouseX,
|
|
y:mouseY
|
|
};
|
|
};
|
|
ScrollObject.prototype.RecalcScroller = function ( startpos ) {
|
|
var dPR = AscBrowser.retinaPixelRatio;
|
|
if ( this.settings.isVerticalScroll ) {
|
|
if ( this.settings.showArrows ) {
|
|
this.verticalTrackHeight = this.canvasH - this.arrowPosition * 2;
|
|
this.scroller.y = this.arrowPosition;
|
|
}
|
|
else {
|
|
this.verticalTrackHeight = this.canvasH;
|
|
this.scroller.y = Math.round(dPR);
|
|
}
|
|
var percentInViewV;
|
|
|
|
percentInViewV = (this.maxScrollY * dPR + this.paneHeight) / this.paneHeight;
|
|
this.scroller.h = Math.ceil(Math.ceil( 1 / percentInViewV * this.verticalTrackHeight / dPR) * dPR);
|
|
|
|
var scrollMinH = Math.round(this.settings.scrollerMinHeight * dPR);
|
|
|
|
if ( this.scroller.h < scrollMinH)
|
|
this.scroller.h = scrollMinH;
|
|
else if ( this.scroller.h > this.settings.scrollerMaxHeight )
|
|
this.scroller.h = this.settings.scrollerMaxHeight;
|
|
this.scrollCoeff = this.maxScrollY / Math.max( 1, this.paneHeight - this.scroller.h );
|
|
if ( startpos ) {
|
|
this.scroller.y = startpos / this.scrollCoeff + this.arrowPosition;
|
|
}
|
|
this.dragMaxY = this.canvasH - this.arrowPosition - this.scroller.h + 1;
|
|
this.dragMinY = this.arrowPosition;
|
|
}
|
|
|
|
if ( this.settings.isHorizontalScroll ) {
|
|
if ( this.settings.showArrows ) {
|
|
this.horizontalTrackWidth = this.canvasW - this.arrowPosition * 2;
|
|
this.scroller.x = this.arrowPosition;
|
|
}
|
|
else {
|
|
this.horizontalTrackWidth = this.canvasW;
|
|
this.scroller.x = Math.round(dPR);
|
|
}
|
|
var percentInViewH;
|
|
percentInViewH = ( this.maxScrollX * dPR + this.paneWidth ) / this.paneWidth;
|
|
this.scroller.w = Math.ceil(Math.ceil( 1 / percentInViewH * this.horizontalTrackWidth / dPR) * dPR);
|
|
|
|
var scrollMinW = Math.round(this.settings.scrollerMinWidth * dPR);
|
|
|
|
if ( this.scroller.w < scrollMinW)
|
|
this.scroller.w = scrollMinW;
|
|
else if ( this.scroller.w > this.settings.scrollerMaxWidth )
|
|
this.scroller.w = this.settings.scrollerMaxWidth;
|
|
this.scrollCoeff = this.maxScrollX / Math.max( 1, this.paneWidth - this.scroller.w );
|
|
if ( typeof startpos !== "undefined" ) {
|
|
this.scroller.x = startpos / this.scrollCoeff + this.arrowPosition;
|
|
}
|
|
this.dragMaxX = this.canvasW - this.arrowPosition - this.scroller.w;
|
|
this.dragMinX = this.arrowPosition;
|
|
}
|
|
};
|
|
ScrollObject.prototype.Repos = function ( settings, bIsHorAttack, bIsVerAttack, pos, isAttack ) {
|
|
let dPR = AscBrowser.retinaPixelRatio;
|
|
let isChangeTheme = settings && this.settings.scrollBackgroundColor !== settings.scrollBackgroundColor;
|
|
|
|
if (isChangeTheme || isAttack) {
|
|
for (let i in settings) {
|
|
this.settings[i] = settings[i];
|
|
}
|
|
}
|
|
|
|
if (this.settings.showArrows) {
|
|
this.settings.arrowSizeW = Math.round(13 * dPR);
|
|
this.settings.arrowSizeH = Math.round(13 * dPR);
|
|
this.ArrowDrawer.InitSize(this.settings.arrowSizeH, this.settings.arrowSizeW);
|
|
}
|
|
|
|
if (bIsVerAttack) {
|
|
let _canvasH = settings.screenH;
|
|
if (undefined !== _canvasH && settings.screenAddH) {
|
|
_canvasH += settings.screenAddH;
|
|
}
|
|
|
|
if (_canvasH == this.canvasH && undefined !== settings.contentH) {
|
|
let _maxScrollY = settings.contentH - settings.screenH > 0 ? settings.contentH - settings.screenH : 0;
|
|
if (_maxScrollY == this.maxScrollY && !isChangeTheme) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
if (bIsHorAttack) {
|
|
if (settings.screenW == this.canvasW && undefined !== settings.contentW) {
|
|
let _maxScrollX = settings.contentW - settings.screenW > 0 ? settings.contentW - settings.screenW : 0;
|
|
if (_maxScrollX == this.maxScrollX && !isChangeTheme) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
let _parentClientW = GetClientWidth(this.canvas.parentNode);
|
|
let _parentClientH = GetClientHeight(this.canvas.parentNode);
|
|
|
|
let _firstChildW = settings.contentW;
|
|
let _firstChildH = settings.contentH;
|
|
|
|
this.maxScrollY = this.maxScrollY2 = _firstChildH - settings.screenH > 0 ? _firstChildH - settings.screenH : 0;
|
|
this.maxScrollX = this.maxScrollX2 = _firstChildW - settings.screenW > 0 ? _firstChildW - settings.screenW : 0;
|
|
|
|
this._setDimension(_parentClientH, _parentClientW);
|
|
this._setScrollerHW();
|
|
|
|
this.settings.arrowDim = Math.round(13 * dPR);
|
|
this.settings.arrowDim = this.settings.slimScroll && this.settings.isVerticalScroll ? this.scroller.w : this.settings.arrowDim;
|
|
this.settings.arrowDim = this.settings.slimScroll && this.settings.isHorizontalScroll ? this.scroller.h : this.settings.arrowDim;
|
|
this.arrowPosition = this.settings.showArrows ? Math.round(this.settings.arrowDim + this._roundForScale(dPR) + this._roundForScale(dPR)) : Math.round(dPR);
|
|
this.paneHeight = this.canvasH - this.arrowPosition * 2;
|
|
this.paneWidth = this.canvasW - this.arrowPosition * 2;
|
|
this.RecalcScroller();
|
|
if (this.settings.isVerticalScroll && !this.settings.alwaysVisible) {
|
|
|
|
if (this.scrollVCurrentY > this.maxScrollY) {
|
|
this.scrollVCurrentY = this.maxScrollY;
|
|
}
|
|
|
|
this.scrollToY(this.scrollVCurrentY);
|
|
if (this.maxScrollY == 0) {
|
|
this.canvas.style.display = "none";
|
|
} else {
|
|
this.canvas.style.display = "";
|
|
}
|
|
} else if (this.settings.isHorizontalScroll) {
|
|
|
|
if (this.scrollHCurrentX > this.maxScrollX) {
|
|
this.scrollHCurrentX = this.maxScrollX;
|
|
}
|
|
|
|
this.scrollToX(this.scrollHCurrentX);
|
|
if (this.maxScrollX == 0 && !this.settings.alwaysVisible) {
|
|
this.canvas.style.display = "none";
|
|
} else {
|
|
this.canvas.style.display = "";
|
|
}
|
|
}
|
|
|
|
this.reinit = true;
|
|
if (this.settings.isVerticalScroll && pos != null) {
|
|
//pos !== undefined ? this.scrollByY( pos - this.scrollVCurrentY ) : this.scrollToY( this.scrollVCurrentY );
|
|
this.scrollByY(pos - this.scrollVCurrentY);
|
|
}
|
|
|
|
if (this.settings.isHorizontalScroll && pos != null) {
|
|
//pos !== undefined ? this.scrollByX( pos - this.scrollHCurrentX ) : this.scrollToX( this.scrollHCurrentX );
|
|
this.scrollByX(pos - this.scrollHCurrentX)
|
|
}
|
|
this.reinit = false;
|
|
|
|
if (this.isResizeArrows || isChangeTheme) {
|
|
this.context.fillStyle = this.settings.scrollBackgroundColor;
|
|
this.context.fillRect(0,0,this.canvasW,this.canvasH);
|
|
|
|
this.firstArrow = {arrowColor: _HEXTORGB_(this.settings.arrowColor).R, arrowBackColor: _HEXTORGB_(this.settings.scrollerColor).R, arrowStrokeColor: _HEXTORGB_(this.settings.strokeStyleNone).R};
|
|
this.secondArrow = {arrowColor: _HEXTORGB_(this.settings.arrowColor).R, arrowBackColor: _HEXTORGB_(this.settings.scrollerColor).R, arrowStrokeColor: _HEXTORGB_(this.settings.strokeStyleNone).R};
|
|
this._drawArrows();
|
|
}
|
|
this._initPiperImg();
|
|
this._draw();
|
|
};
|
|
ScrollObject.prototype._scrollV = function ( that, evt, pos, isTop, isBottom, bIsAttack ) {
|
|
if ( !this.settings.isVerticalScroll ) {
|
|
return;
|
|
}
|
|
|
|
if ( that.scrollVCurrentY !== pos || bIsAttack === true ) {
|
|
var oldPos = that.scrollVCurrentY;
|
|
that.scrollVCurrentY = pos;
|
|
evt.scrollD = evt.scrollPositionY = that.scrollVCurrentY;
|
|
evt.maxScrollY = that.maxScrollY;
|
|
that.handleEvents( "onscrollvertical", evt );
|
|
if (that.checkDisableCurrentScroll()) {
|
|
// prevented...
|
|
that.scrollVCurrentY = oldPos;
|
|
return;
|
|
}
|
|
that._draw();
|
|
}
|
|
else if ( that.scrollVCurrentY === pos && pos > 0 && !this.reinit && !this.moveble && !this.lock ) {
|
|
evt.pos = pos;
|
|
that.handleEvents( "onscrollVEnd", evt );
|
|
}
|
|
};
|
|
ScrollObject.prototype._correctScrollV = function ( that, yPos ) {
|
|
if ( !this.settings.isVerticalScroll )
|
|
return null;
|
|
|
|
var events = that.eventListeners["oncorrectVerticalScroll"];
|
|
if ( events ) {
|
|
if ( events.length != 1 )
|
|
return null;
|
|
|
|
return events[0].handler.apply( that, [yPos] );
|
|
}
|
|
return null;
|
|
};
|
|
ScrollObject.prototype._correctScrollByYDelta = function ( that, delta ) {
|
|
if ( !this.settings.isVerticalScroll )
|
|
return null;
|
|
|
|
var events = that.eventListeners["oncorrectVerticalScrollDelta"];
|
|
if ( events ) {
|
|
if ( events.length != 1 )
|
|
return null;
|
|
|
|
return events[0].handler.apply( that, [delta] );
|
|
}
|
|
return null;
|
|
};
|
|
ScrollObject.prototype._scrollH = function ( that, evt, pos, isTop, isBottom ) {
|
|
if ( !this.settings.isHorizontalScroll ) {
|
|
return;
|
|
}
|
|
if ( that.scrollHCurrentX !== pos ) {
|
|
that.scrollHCurrentX = pos;
|
|
evt.scrollD = evt.scrollPositionX = that.scrollHCurrentX;
|
|
evt.maxScrollX = that.maxScrollX;
|
|
|
|
that._draw();
|
|
that.handleEvents( "onscrollhorizontal", evt );
|
|
}
|
|
else if ( that.scrollHCurrentX === pos && pos > 0 && !this.reinit && !this.moveble && !this.lock ) {
|
|
evt.pos = pos;
|
|
that.handleEvents( "onscrollHEnd", evt );
|
|
}
|
|
};
|
|
ScrollObject.prototype.scrollByY = function ( delta, isAttack) {
|
|
if ( !this.settings.isVerticalScroll ) {
|
|
return;
|
|
}
|
|
|
|
var dPR = AscBrowser.retinaPixelRatio;
|
|
var result = this._correctScrollByYDelta( this, delta );
|
|
if ( result != null && result.isChange === true )
|
|
delta = result.Pos;
|
|
|
|
var destY = this.scrollVCurrentY + delta, isTop = false, isBottom = false, vend = false;
|
|
|
|
if ( this.scrollVCurrentY + delta < 0 ) {
|
|
destY = 0;
|
|
isTop = true;
|
|
isBottom = false;
|
|
}
|
|
else if ( this.scrollVCurrentY + delta > this.maxScrollY2 ) {
|
|
this.handleEvents( "onscrollVEnd", destY - this.maxScrollY );
|
|
vend = true;
|
|
destY = this.maxScrollY2;
|
|
isTop = false;
|
|
isBottom = true;
|
|
}
|
|
var scrollCoeff = this.scrollCoeff === 0 ? 1 : this.scrollCoeff;
|
|
this.scroller.y = destY / scrollCoeff + this.arrowPosition;
|
|
if ( this.scroller.y < this.dragMinY )
|
|
this.scroller.y = this.dragMinY + 1;
|
|
else if ( this.scroller.y > this.dragMaxY )
|
|
this.scroller.y = this.dragMaxY;
|
|
|
|
var arrow = this.settings.showArrows ? this.arrowPosition : 0;
|
|
if ( this.scroller.y + this.scroller.h > this.canvasH - arrow) {
|
|
this.scroller.y -= Math.abs( this.canvasH - arrow - this.scroller.y - this.scroller.h);
|
|
}
|
|
|
|
this.scroller.y = Math.round(this.scroller.y);
|
|
|
|
if ( vend ) {
|
|
this.moveble = true;
|
|
}
|
|
this._scrollV( this, {}, destY, isTop, isBottom, isAttack);
|
|
if ( vend ) {
|
|
this.moveble = false;
|
|
}
|
|
};
|
|
ScrollObject.prototype.scrollToY = function ( destY ) {
|
|
if ( !this.settings.isVerticalScroll ) {
|
|
return;
|
|
}
|
|
|
|
this.scroller.y = destY / Math.max( 1, this.scrollCoeff ) + this.arrowPosition;
|
|
if ( this.scroller.y < this.dragMinY )
|
|
this.scroller.y = this.dragMinY + 1;
|
|
else if ( this.scroller.y > this.dragMaxY )
|
|
this.scroller.y = this.dragMaxY;
|
|
|
|
var arrow = this.settings.showArrows ? this.arrowPosition : 0;
|
|
if ( this.scroller.y + this.scroller.h > this.canvasH - arrow ) {
|
|
this.scroller.y -= Math.abs( this.canvasH - arrow - this.scroller.y - this.scroller.h );
|
|
}
|
|
|
|
this.scroller.y = Math.round(this.scroller.y);
|
|
|
|
this._scrollV( this, {}, destY, false, false );
|
|
};
|
|
ScrollObject.prototype.scrollByX = function ( delta ) {
|
|
if ( !this.settings.isHorizontalScroll ) {
|
|
return;
|
|
}
|
|
var dPR = AscBrowser.retinaPixelRatio;
|
|
var destX = this.scrollHCurrentX + delta, isTop = false, isBottom = false, hend = false;
|
|
|
|
if ( destX < 0 ) {
|
|
destX = 0;
|
|
isTop = true;
|
|
isBottom = false;
|
|
}
|
|
else if ( destX > this.maxScrollX2 ) {
|
|
this.handleEvents( "onscrollHEnd", destX - this.maxScrollX );
|
|
hend = true;
|
|
destX = this.maxScrollX2;
|
|
isTop = false;
|
|
isBottom = true;
|
|
}
|
|
var scrollCoeff = this.scrollCoeff === 0 ? 1 : this.scrollCoeff;
|
|
this.scroller.x = destX / scrollCoeff + this.arrowPosition;
|
|
if ( this.scroller.x < this.dragMinX )
|
|
this.scroller.x = this.dragMinX + 1;
|
|
else if ( this.scroller.x > this.dragMaxX )
|
|
this.scroller.x = this.dragMaxX;
|
|
|
|
var arrow = this.settings.showArrows ? this.arrowPosition : 0;
|
|
if ( this.scroller.x + this.scroller.w > this.canvasW - arrow) {
|
|
this.scroller.x -= Math.abs( this.canvasW - arrow - this.scroller.x - this.scroller.w);
|
|
}
|
|
|
|
this.scroller.x = Math.round(this.scroller.x);
|
|
|
|
if ( hend ) {
|
|
this.moveble = true;
|
|
}
|
|
this._scrollH( this, {}, destX, isTop, isBottom );
|
|
if ( hend ) {
|
|
this.moveble = true;
|
|
}
|
|
};
|
|
ScrollObject.prototype.scrollToX = function ( destX ) {
|
|
if ( !this.settings.isHorizontalScroll ) {
|
|
return;
|
|
}
|
|
this.scroller.x = destX / Math.max( 1, this.scrollCoeff ) + this.arrowPosition;
|
|
if ( this.scroller.x < this.dragMinX )
|
|
this.scroller.x = this.dragMinX + 1;
|
|
else if ( this.scroller.x > this.dragMaxX )
|
|
this.scroller.x = this.dragMaxX;
|
|
|
|
var arrow = this.settings.showArrows ? this.arrowPosition : 0;
|
|
if ( this.scroller.x + this.scroller.w > this.canvasW - arrow) {
|
|
this.scroller.x -= Math.abs( this.canvasW - arrow - this.scroller.x - this.scroller.w);
|
|
}
|
|
|
|
this.scroller.x = Math.round(this.scroller.x);
|
|
|
|
this._scrollH( this, {}, destX, false, false );
|
|
};
|
|
ScrollObject.prototype.scrollTo = function ( destX, destY ) {
|
|
this.scrollToX( destX );
|
|
this.scrollToY( destY );
|
|
};
|
|
ScrollObject.prototype.scrollBy = function ( deltaX, deltaY ) {
|
|
this.scrollByX( deltaX );
|
|
this.scrollByY( deltaY );
|
|
};
|
|
|
|
ScrollObject.prototype.roundRect = function ( x, y, width, height, radius ) {
|
|
if ( typeof radius === "undefined" ) {
|
|
radius = 1;
|
|
}
|
|
this.context.beginPath();
|
|
this.context.moveTo( x + radius, y );
|
|
this.context.lineTo( x + width - radius, y );
|
|
this.context.quadraticCurveTo( x + width, y, x + width, y + radius );
|
|
this.context.lineTo( x + width, y + height - radius );
|
|
this.context.quadraticCurveTo( x + width, y + height, x + width - radius, y + height );
|
|
this.context.lineTo( x + radius, y + height );
|
|
this.context.quadraticCurveTo( x, y + height, x, y + height - radius );
|
|
this.context.lineTo( x, y + radius );
|
|
this.context.quadraticCurveTo( x, y, x + radius, y );
|
|
this.context.closePath();
|
|
};
|
|
|
|
ScrollObject.prototype._clearContent = function () {
|
|
this.context.clearRect( 0, 0, this.canvasW, this.canvasH );
|
|
};
|
|
|
|
ScrollObject.prototype._drawArrows = function () {
|
|
var that = this;
|
|
if (!that.settings.showArrows) {
|
|
return;
|
|
}
|
|
var t = that.ArrowDrawer;
|
|
var xDeltaBORDER = 0.5, yDeltaBORDER = 1.5;
|
|
var roundDPR = that._roundForScale(AscBrowser.retinaPixelRatio);
|
|
var x1 = 0, y1 = 0, x2 = 0, y2 = 0;
|
|
var ctx = that.context;
|
|
|
|
ctx.beginPath();
|
|
ctx.fillStyle = that.settings.scrollerColor;
|
|
var arrowImage = that.ArrowDrawer.ImageTop;
|
|
var imgContext = arrowImage.getContext('2d');
|
|
imgContext.globalCompositeOperation = "source-in";
|
|
imgContext.fillStyle = that.settings.arrowColor;
|
|
ctx.lineWidth = roundDPR;
|
|
if (that.settings.isVerticalScroll) {
|
|
for (var i = 0; i < 2; i++) {
|
|
imgContext.fillRect( x1 + xDeltaBORDER * ctx.lineWidth, 0, t.SizeW - roundDPR, t.SizeH - roundDPR);
|
|
ctx.fillRect( x1, y1 + roundDPR, t.SizeW, t.SizeH);
|
|
ctx.drawImage(arrowImage, x1, y2, t.SizeW, t.SizeH);
|
|
|
|
if (t.IsDrawBorders) {
|
|
ctx.strokeStyle = that.settings.strokeStyleNone;
|
|
ctx.rect(x1 + xDeltaBORDER * ctx.lineWidth, y1 + yDeltaBORDER * ctx.lineWidth, t.SizeW - roundDPR, t.SizeH - roundDPR);
|
|
ctx.stroke();
|
|
}
|
|
|
|
y1 = that.canvasH - t.SizeH - 2 * roundDPR;
|
|
y2 = that.canvasH - t.SizeH;
|
|
arrowImage = that.ArrowDrawer.ImageBottom;
|
|
imgContext = arrowImage.getContext('2d');
|
|
imgContext.globalCompositeOperation = "source-in";
|
|
imgContext.fillStyle = that.settings.arrowColor;
|
|
}
|
|
}
|
|
|
|
var arrowImage = that.ArrowDrawer.ImageLeft;
|
|
var imgContext = arrowImage.getContext('2d');
|
|
imgContext.globalCompositeOperation = "source-in";
|
|
imgContext.fillStyle = that.settings.arrowColor;
|
|
if (that.settings.isHorizontalScroll) {
|
|
for (var i = 0; i < 2; i++) {
|
|
imgContext.fillRect( 0, y1 + yDeltaBORDER * ctx.lineWidth, t.SizeW - roundDPR, t.SizeH - roundDPR);
|
|
ctx.fillRect( x1 + roundDPR, y1, t.SizeW, t.SizeH);
|
|
ctx.drawImage(arrowImage, x2, y2, t.SizeW, t.SizeH);
|
|
|
|
if (t.IsDrawBorders) {
|
|
ctx.strokeStyle = that.settings.strokeStyleNone;
|
|
ctx.lineWidth = roundDPR;
|
|
ctx.rect(x1 + yDeltaBORDER * ctx.lineWidth, y1 + xDeltaBORDER * ctx.lineWidth, t.SizeW - roundDPR, t.SizeH - roundDPR);
|
|
ctx.stroke();
|
|
}
|
|
|
|
x1 = that.canvasW - t.SizeW - 2 * roundDPR;
|
|
x2 = that.canvasW - t.SizeW;
|
|
y2 = 0;
|
|
arrowImage = that.ArrowDrawer.ImageRight;
|
|
imgContext = arrowImage.getContext('2d');
|
|
imgContext.globalCompositeOperation = "source-in";
|
|
imgContext.fillStyle = that.settings.arrowColor;
|
|
}
|
|
}
|
|
};
|
|
|
|
ScrollObject.prototype._drawScroll = function (fillColor, targetColor, strokeColor) {
|
|
fillColor = Math.round(fillColor);
|
|
targetColor = Math.round(targetColor);
|
|
strokeColor = Math.round(strokeColor);
|
|
|
|
var that = this;
|
|
that.context.beginPath();
|
|
var roundDPR = this._roundForScale(AscBrowser.retinaPixelRatio);
|
|
that.context.lineWidth = roundDPR;
|
|
|
|
let api = window.Asc.editor;
|
|
let wb = api && api.wb;
|
|
let ws = wb && wb.getWorksheet();
|
|
|
|
if (that.settings.isVerticalScroll) {
|
|
var _y = that.settings.showArrows ? that.arrowPosition : 0,
|
|
_h = that.canvasH - (_y << 1);
|
|
|
|
if (_h > 0) {
|
|
that.context.rect(0, _y, that.canvasW, _h);
|
|
}
|
|
} else if (that.settings.isHorizontalScroll) {
|
|
var _x = that.settings.showArrows ? that.arrowPosition : 0,
|
|
_w = that.canvasW - (_x << 1);
|
|
|
|
if (_w > 0) {
|
|
that.context.rect(_x, 0, _w, that.canvasH);
|
|
}
|
|
}
|
|
|
|
switch (that.animState) {
|
|
|
|
case AnimationType.SCROLL_HOVER: {
|
|
that.context.fillStyle = that.settings.scrollBackgroundColorHover;
|
|
break;
|
|
}
|
|
case AnimationType.SCROLL_ACTIVE: {
|
|
that.context.fillStyle = that.settings.scrollBackgroundColorActive;
|
|
break;
|
|
}
|
|
case AnimationType.NONE:
|
|
default: {
|
|
that.context.fillStyle = that.settings.scrollBackgroundColor;
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
that.context.fill();
|
|
that.context.beginPath();
|
|
|
|
if (that.settings.isVerticalScroll && that.maxScrollY != 0) {
|
|
var _y = that.scroller.y >> 0, arrow = that.settings.showArrows ? that.arrowPosition : 0;
|
|
if (_y < arrow) {
|
|
_y = arrow;
|
|
}
|
|
var _b = Math.round(that.scroller.y + that.scroller.h);// >> 0;
|
|
if (_b > (that.canvasH - arrow - 1)) {
|
|
_b = that.canvasH - arrow - 1;
|
|
}
|
|
|
|
if (_b > _y) {
|
|
that.roundRect(that.scroller.x - 0.5 * that.context.lineWidth, _y + 0.5 * that.context.lineWidth, that.scroller.w - roundDPR, that.scroller.h - roundDPR, that.settings.cornerRadius * roundDPR);
|
|
}
|
|
} else if (that.settings.isHorizontalScroll && that.maxScrollX != 0) {
|
|
var _x = that.scroller.x >> 0, arrow = that.settings.showArrows ? that.arrowPosition : 0;
|
|
if (_x < arrow) {
|
|
_x = arrow;
|
|
}
|
|
var _r = (that.scroller.x + that.scroller.w) >> 0;
|
|
if (_r > (that.canvasW - arrow - 2)) {
|
|
_r = that.canvasW - arrow - 1;
|
|
}
|
|
|
|
if (_r > _x) {
|
|
that.roundRect(_x + 0.5 * that.context.lineWidth, that.scroller.y - 0.5 * that.context.lineWidth, that.scroller.w - roundDPR, that.scroller.h - roundDPR, that.settings.cornerRadius * roundDPR);
|
|
}
|
|
}
|
|
|
|
that.context.fillStyle = "rgb(" + fillColor + "," + fillColor + "," + fillColor + ")"
|
|
that.context.fill();
|
|
|
|
|
|
|
|
that.context.strokeStyle = "rgb(" + strokeColor + "," + strokeColor + "," + strokeColor + ")";
|
|
that.strokeColor = strokeColor;
|
|
that.context.stroke();
|
|
|
|
var ctx_piperImg, _data, px, img, x, y;
|
|
|
|
//drawing scroll stripes
|
|
if (that._checkPiperImagesV()) {
|
|
|
|
x = Math.round((that.scroller.w - that.piperImgVert.width) / 2);
|
|
y = Math.floor((that.scroller.y + Math.floor(that.scroller.h / 2) - 6 * AscBrowser.retinaPixelRatio));
|
|
|
|
ctx_piperImg = that.piperImgVert.getContext('2d');
|
|
ctx_piperImg.globalCompositeOperation = "source-in";
|
|
ctx_piperImg.fillStyle = "rgb(" + targetColor + "," +
|
|
targetColor + "," +
|
|
targetColor + ")";
|
|
ctx_piperImg.fillRect(0, 0, that.scroller.w - 1, that.scroller.h - 1);
|
|
|
|
img = that.piperImgVert;
|
|
} else if (that._checkPiperImagesH()) {
|
|
x = Math.round(that.scroller.x + (that.scroller.w - that.piperImgHor.width) / 2);
|
|
y = Math.round((that.scroller.h - that.piperImgHor.height) / 2);
|
|
|
|
ctx_piperImg = that.piperImgHor.getContext('2d');
|
|
ctx_piperImg.globalCompositeOperation = "source-in";
|
|
ctx_piperImg.fillStyle = "rgb(" + targetColor + "," +
|
|
targetColor + "," +
|
|
targetColor + ")";
|
|
ctx_piperImg.fillRect(0, 0, that.scroller.w - 1, that.scroller.h - 1);
|
|
|
|
img = that.piperImgHor;
|
|
}
|
|
|
|
if (img)
|
|
that.context.drawImage(img, x, y);
|
|
|
|
that.scrollColor = fillColor;
|
|
that.targetColor = targetColor;
|
|
};
|
|
|
|
ScrollObject.prototype._animateArrow = function (fadeIn, curArrowType, backgroundColorUnfade) {
|
|
var that = this;
|
|
var roundDPR = that._roundForScale(AscBrowser.retinaPixelRatio);
|
|
var sizeW = that.ArrowDrawer.SizeW, sizeH = that.ArrowDrawer.SizeH;
|
|
|
|
if (!that.settings.showArrows || !curArrowType) {
|
|
return;
|
|
}
|
|
var cnvs = document.createElement('canvas'), arrowType,
|
|
ctx = cnvs.getContext('2d'), context = that.context,
|
|
hoverColor = _HEXTORGB_(that.settings.scrollerHoverColor).R, defaultColor = _HEXTORGB_(that.settings.scrollerColor).R,
|
|
arrowColor = _HEXTORGB_(that.settings.arrowColor).R,
|
|
arrowHoverColor = _HEXTORGB_(that.settings.arrowHoverColor).R,
|
|
strokeColor = _HEXTORGB_(that.settings.strokeStyleNone).R,
|
|
strokeHoverColor = _HEXTORGB_(that.settings.strokeStyleOver).R;
|
|
|
|
cnvs.width = sizeW;
|
|
cnvs.height = sizeH;
|
|
|
|
if (curArrowType === ArrowType.ARROW_TOP || curArrowType === ArrowType.ARROW_LEFT) {
|
|
arrowType = this.firstArrow;
|
|
} else if (curArrowType === ArrowType.ARROW_BOTTOM || curArrowType === ArrowType.ARROW_RIGHT) {
|
|
arrowType = this.secondArrow;
|
|
} else return;
|
|
|
|
|
|
var x = 0, y = 0, fillRectX = 0, fillRectY = 0, strokeRectX = 0, strokeRectY = 0;
|
|
var arrowImage = that.settings.isVerticalScroll ? that.ArrowDrawer.ImageTop : that.ArrowDrawer.ImageLeft;
|
|
|
|
//what type of arrow to draw
|
|
switch (curArrowType) {
|
|
case ArrowType.ARROW_TOP: {
|
|
fillRectY = roundDPR;
|
|
break;
|
|
}
|
|
case ArrowType.ARROW_BOTTOM: {
|
|
y = that.canvasH - sizeH;
|
|
fillRectY = -roundDPR;
|
|
strokeRectY = -2 * roundDPR;
|
|
arrowImage = that.ArrowDrawer.ImageBottom;
|
|
break;
|
|
}
|
|
case ArrowType.ARROW_RIGHT: {
|
|
y = 0;
|
|
x = that.canvasW - sizeW;
|
|
fillRectX = -roundDPR;
|
|
strokeRectX = -roundDPR;
|
|
strokeRectY = -roundDPR;
|
|
arrowImage = that.ArrowDrawer.ImageRight;
|
|
break;
|
|
}
|
|
case ArrowType.ARROW_LEFT: {
|
|
y = 0;
|
|
x = 0;
|
|
fillRectX = roundDPR;
|
|
strokeRectX = roundDPR;
|
|
strokeRectY = -roundDPR;
|
|
break;
|
|
}
|
|
}
|
|
|
|
var stepsCount = 17;
|
|
var step = Math.abs((defaultColor - hoverColor)) / stepsCount;
|
|
|
|
//dimming the arrow
|
|
if (fadeIn) {
|
|
if(arrowType.arrowColor === arrowHoverColor && arrowType.arrowBackColor === hoverColor) {
|
|
return;
|
|
}
|
|
|
|
if (arrowType.arrowBackColor - hoverColor > step) {
|
|
arrowType.arrowBackColor -= step;
|
|
} else if (arrowType.arrowBackColor - hoverColor < -step) {
|
|
arrowType.arrowBackColor += step;
|
|
} else {
|
|
arrowType.arrowBackColor = hoverColor;
|
|
}
|
|
|
|
step = Math.abs((strokeColor - strokeHoverColor)) / stepsCount;
|
|
|
|
if (arrowType.arrowStrokeColor - strokeHoverColor > step) {
|
|
arrowType.arrowStrokeColor -= step;
|
|
} else if (arrowType.arrowStrokeColor - strokeHoverColor < -step) {
|
|
arrowType.arrowStrokeColor += step;
|
|
} else {
|
|
arrowType.arrowStrokeColor = strokeHoverColor;
|
|
}
|
|
|
|
step = Math.abs((arrowColor - arrowHoverColor)) / stepsCount;
|
|
|
|
if (arrowType.arrowColor - arrowHoverColor > step) {
|
|
arrowType.arrowColor -= step;
|
|
} else if (arrowType.arrowColor - arrowHoverColor < -step) {
|
|
arrowType.arrowColor += step;
|
|
} else {
|
|
arrowType.arrowColor = arrowHoverColor;
|
|
}
|
|
} else
|
|
//reverse dimming
|
|
if (fadeIn === false) {
|
|
if(arrowType.arrowColor === arrowColor && arrowType.arrowBackColor === defaultColor) {
|
|
return;
|
|
}
|
|
|
|
if (arrowType.arrowBackColor - defaultColor < -step) {
|
|
arrowType.arrowBackColor += step;
|
|
} else if (arrowType.arrowBackColor - defaultColor > step) {
|
|
arrowType.arrowBackColor -= step;
|
|
} else {
|
|
arrowType.arrowBackColor = defaultColor;
|
|
}
|
|
|
|
step = Math.abs((arrowColor - arrowHoverColor)) / stepsCount;
|
|
|
|
if (arrowType.arrowColor - arrowColor > step) {
|
|
arrowType.arrowColor -= step;
|
|
} else if (arrowType.arrowColor - arrowColor < -step) {
|
|
arrowType.arrowColor += step;
|
|
} else {
|
|
arrowType.arrowColor = arrowColor;
|
|
}
|
|
|
|
step = Math.abs((strokeColor - strokeHoverColor)) / stepsCount;
|
|
|
|
if (arrowType.arrowStrokeColor - strokeColor > step) {
|
|
arrowType.arrowStrokeColor -= step;
|
|
} else if (arrowType.arrowStrokeColor - strokeColor < -step) {
|
|
arrowType.arrowStrokeColor += step;
|
|
} else {
|
|
arrowType.arrowStrokeColor = strokeColor;
|
|
}
|
|
} else {
|
|
//instant change arrow color
|
|
arrowType.arrowBackColor = backgroundColorUnfade;
|
|
switch(backgroundColorUnfade) {
|
|
case _HEXTORGB_(that.settings.scrollerColor).R:
|
|
arrowType.arrowColor = _HEXTORGB_(that.settings.arrowColor).R;
|
|
arrowType.arrowStrokeColor = _HEXTORGB_(that.settings.strokeStyleNone).R;
|
|
break;
|
|
case _HEXTORGB_(that.settings.scrollerHoverColor).R:
|
|
arrowType.arrowColor = _HEXTORGB_(that.settings.arrowHoverColor).R;
|
|
arrowType.arrowStrokeColor = _HEXTORGB_(that.settings.strokeStyleOver).R;
|
|
break;
|
|
case _HEXTORGB_(that.settings.scrollerActiveColor).R:
|
|
arrowType.arrowColor = _HEXTORGB_(that.settings.arrowActiveColor).R;
|
|
arrowType.arrowStrokeColor = _HEXTORGB_(that.settings.strokeStyleActive).R;
|
|
break;
|
|
|
|
}
|
|
}
|
|
|
|
ctx = that.context;
|
|
|
|
ctx.beginPath();
|
|
var arrowBackColor = Math.round(arrowType.arrowBackColor);
|
|
ctx.fillStyle = "rgb(" + arrowBackColor + "," +
|
|
arrowBackColor + "," +
|
|
arrowBackColor + ")";
|
|
|
|
ctx.fillRect( x + fillRectX, y + fillRectY, sizeW, sizeH);
|
|
|
|
if (that.ArrowDrawer.IsDrawBorders) {
|
|
var arrowStrokeColor = Math.round(arrowType.arrowStrokeColor)
|
|
ctx.strokeStyle = "rgb(" + arrowStrokeColor + "," + arrowStrokeColor + "," + arrowStrokeColor + ")";
|
|
ctx.lineWidth = roundDPR;
|
|
ctx.rect(x + 0.5 * ctx.lineWidth + strokeRectX, y + 1.5 * ctx.lineWidth + strokeRectY, sizeW - roundDPR, sizeH - roundDPR);
|
|
ctx.stroke();
|
|
}
|
|
|
|
//drawing arrow icon
|
|
var imgContext = arrowImage.getContext('2d');
|
|
imgContext.globalCompositeOperation = "source-in";
|
|
var arrowColor = Math.round(arrowType.arrowColor);
|
|
imgContext.fillStyle = "rgb(" + arrowColor + "," +
|
|
arrowColor + "," +
|
|
arrowColor + ")";
|
|
imgContext.fillRect(0.5, 1.5, sizeW , sizeH);
|
|
ctx.drawImage(arrowImage, x, y, sizeW, sizeH);
|
|
ctx.closePath();
|
|
context.drawImage(cnvs, x, y);
|
|
|
|
if (fadeIn === undefined)
|
|
return;
|
|
|
|
that.fadeTimeoutArrows = setTimeout(function () {
|
|
that._animateArrow(fadeIn, curArrowType, backgroundColorUnfade)
|
|
}, that.settings.fadeInFadeOutDelay);
|
|
};
|
|
|
|
ScrollObject.prototype._animateScroll = function (fadeIn) {
|
|
var that = this;
|
|
var hoverColor = _HEXTORGB_(that.settings.scrollerHoverColor).R,
|
|
defaultColor = _HEXTORGB_(that.settings.scrollerColor).R,
|
|
targetDefaultColor = _HEXTORGB_(that.settings.targetColor).R,
|
|
targetHoverColor = _HEXTORGB_(that.settings.targetHoverColor).R,
|
|
strokeHoverColor = _HEXTORGB_(that.settings.strokeStyleOver).R,
|
|
strokeColor = _HEXTORGB_(that.settings.strokeStyleNone).R;
|
|
|
|
that.context.beginPath();
|
|
that._drawScroll(that.scrollColor, that.targetColor, that.strokeColor);
|
|
|
|
//animation end condition
|
|
if ((fadeIn && that.scrollColor === hoverColor && that.targetColor === targetHoverColor) || (!fadeIn && that.scrollColor === defaultColor && that.targetColor === targetDefaultColor)) {
|
|
return;
|
|
}
|
|
|
|
var stepsCount = 17;
|
|
var step = Math.abs((defaultColor - hoverColor)) / stepsCount;
|
|
|
|
//dimming the scroll
|
|
if (fadeIn) {
|
|
|
|
if (that.scrollColor - hoverColor > step) {
|
|
that.scrollColor -= step;
|
|
} else if (that.scrollColor - hoverColor < -step) {
|
|
that.scrollColor += step;
|
|
} else {
|
|
that.scrollColor = hoverColor;
|
|
}
|
|
|
|
step = Math.abs((targetDefaultColor - targetHoverColor)) / stepsCount;
|
|
|
|
if (that.targetColor - targetHoverColor > step) {
|
|
that.targetColor -= step;
|
|
} else if (that.targetColor - targetHoverColor < -step) {
|
|
that.targetColor += step;
|
|
} else {
|
|
that.targetColor = targetHoverColor;
|
|
}
|
|
|
|
step = Math.abs((strokeColor - strokeHoverColor)) / stepsCount;
|
|
|
|
if (that.strokeColor - strokeHoverColor > step) {
|
|
that.strokeColor -= step;
|
|
} else if (that.strokeColor - strokeHoverColor < -step) {
|
|
that.strokeColor += step;
|
|
} else {
|
|
that.strokeColor = strokeHoverColor;
|
|
}
|
|
|
|
} else
|
|
//reverse dimming
|
|
if (fadeIn === false) {
|
|
if (that.scrollColor - defaultColor > step) {
|
|
that.scrollColor -= step;
|
|
} else if (that.scrollColor - defaultColor < -step) {
|
|
that.scrollColor += step;
|
|
} else {
|
|
that.scrollColor = defaultColor;
|
|
}
|
|
|
|
step = Math.abs((targetDefaultColor - targetHoverColor)) / stepsCount;
|
|
|
|
if (that.targetColor - targetDefaultColor > step) {
|
|
that.targetColor -= step;
|
|
} else if (that.targetColor - targetDefaultColor < -step) {
|
|
that.targetColor += step;
|
|
} else {
|
|
that.targetColor = targetDefaultColor;
|
|
that.strokeColor = strokeColor;
|
|
}
|
|
|
|
step = Math.abs((strokeColor - strokeHoverColor)) / stepsCount;
|
|
|
|
if (that.strokeColor - strokeColor > step) {
|
|
that.strokeColor -= step;
|
|
} else if (that.strokeColor - strokeColor < -step) {
|
|
that.strokeColor += step;
|
|
} else {
|
|
that.strokeColor = strokeColor;
|
|
}
|
|
|
|
}
|
|
|
|
that.fadeTimeoutScroll = setTimeout(function () {
|
|
that._animateScroll(fadeIn)
|
|
}, that.settings.fadeInFadeOutDelay);
|
|
};
|
|
|
|
ScrollObject.prototype._doAnimation = function (lastAnimState) {
|
|
var that = this, secondArrow,
|
|
hoverColor = _HEXTORGB_(that.settings.scrollerHoverColor).R,
|
|
defaultColor = _HEXTORGB_(that.settings.scrollerColor).R,
|
|
activeColor = _HEXTORGB_(that.settings.scrollerActiveColor).R,
|
|
targetColor = _HEXTORGB_(that.settings.targetColor).R,
|
|
targetHoverColor = _HEXTORGB_(that.settings.targetHoverColor).R,
|
|
targetActiveColor = _HEXTORGB_(that.settings.targetActiveColor).R,
|
|
strokeColor = _HEXTORGB_(that.settings.strokeStyleNone).R,
|
|
strokeHoverColor = _HEXTORGB_(that.settings.strokeStyleOver).R,
|
|
strokeActiveColor = _HEXTORGB_(that.settings.strokeStyleActive).R;
|
|
|
|
switch(that.arrowState) {
|
|
case ArrowType.ARROW_TOP:
|
|
secondArrow = ArrowType.ARROW_BOTTOM;
|
|
break;
|
|
case ArrowType.ARROW_BOTTOM:
|
|
secondArrow = ArrowType.ARROW_TOP;
|
|
break;
|
|
case ArrowType.ARROW_LEFT:
|
|
secondArrow = ArrowType.ARROW_RIGHT;
|
|
break;
|
|
case ArrowType.ARROW_RIGHT:
|
|
secondArrow = ArrowType.ARROW_LEFT;
|
|
break;
|
|
}
|
|
|
|
//current and previous scroll state
|
|
if (that.animState === AnimationType.NONE && lastAnimState === AnimationType.NONE) {
|
|
that._drawScroll(defaultColor, targetColor, strokeColor);
|
|
} else if (that.animState === AnimationType.SCROLL_HOVER && lastAnimState === AnimationType.SCROLL_HOVER) {
|
|
that._animateArrow(false, that.arrowState);
|
|
that._animateScroll(true);
|
|
} else if (that.animState === AnimationType.ARROW_HOVER && lastAnimState === AnimationType.NONE) {
|
|
that._animateArrow(false, secondArrow);
|
|
that._animateArrow(true, that.arrowState);
|
|
that._animateScroll(true);
|
|
} else if (that.animState === AnimationType.SCROLL_HOVER && lastAnimState === AnimationType.NONE) {
|
|
that._animateArrow(false, that.arrowState);
|
|
that._animateScroll(true);
|
|
} else if (that.animState === AnimationType.NONE && lastAnimState === AnimationType.ARROW_HOVER) {
|
|
that._animateArrow(false, that.arrowState);
|
|
that._animateScroll(false);
|
|
} else if (that.animState === AnimationType.NONE && lastAnimState === AnimationType.SCROLL_ACTIVE) {
|
|
that._animateArrow(false, that.arrowState);
|
|
that._drawScroll(defaultColor, targetColor, strokeColor);
|
|
} else if (that.animState === AnimationType.SCROLL_HOVER && lastAnimState === AnimationType.ARROW_HOVER) {
|
|
that._animateArrow(false, that.arrowState);
|
|
that._animateScroll(true);
|
|
} else if (that.animState === AnimationType.NONE && lastAnimState === AnimationType.SCROLL_HOVER) {
|
|
that._animateArrow(false, that.arrowState);
|
|
that._animateScroll(false);
|
|
} else if (that.animState === AnimationType.ARROW_HOVER && lastAnimState === AnimationType.SCROLL_HOVER) {
|
|
that._animateArrow(false, secondArrow);
|
|
that._animateArrow(true, that.arrowState);
|
|
that._animateScroll(true);
|
|
} else if (this.animState === AnimationType.SCROLL_HOVER && lastAnimState === AnimationType.SCROLL_ACTIVE) {
|
|
that._animateArrow(undefined, that.arrowState, defaultColor);
|
|
that._drawScroll(hoverColor, targetHoverColor, strokeHoverColor);
|
|
} else if (this.animState === AnimationType.SCROLL_HOVER && lastAnimState === AnimationType.ARROW_ACTIVE) {
|
|
that._animateArrow(undefined, that.arrowState, defaultColor);
|
|
that._drawScroll(hoverColor, targetHoverColor, strokeHoverColor);
|
|
} else if (this.animState === AnimationType.ARROW_ACTIVE) {
|
|
that._animateArrow(undefined, that.arrowState, activeColor);
|
|
that._animateScroll(true);
|
|
} else if (this.animState === AnimationType.ARROW_HOVER && lastAnimState === AnimationType.ARROW_ACTIVE) {
|
|
//if different arrows
|
|
if (this.lastArrowState && this.lastArrowState !== this.arrowState) {
|
|
that._animateArrow(undefined, secondArrow, defaultColor);
|
|
that._animateArrow(true, that.arrowState);
|
|
that._animateScroll(true);
|
|
} else {
|
|
that._animateArrow(undefined, that.arrowState, hoverColor);
|
|
that._animateScroll(true);
|
|
}
|
|
} else if (this.animState === AnimationType.NONE && lastAnimState === AnimationType.ARROW_ACTIVE) {
|
|
that._animateArrow(undefined, that.arrowState, defaultColor);
|
|
that._animateScroll(false);
|
|
} else if (this.animState === AnimationType.ARROW_HOVER && lastAnimState === AnimationType.SCROLL_ACTIVE) {
|
|
that._animateArrow(false, secondArrow);
|
|
that._animateArrow(true, that.arrowState);
|
|
|
|
if (that.mouseUp && !that.mouseDown) {
|
|
that._drawScroll(hoverColor, targetHoverColor, strokeHoverColor);
|
|
}
|
|
else if(that.mouseDown && that.scrollerMouseDown) {
|
|
that._drawScroll(activeColor, targetActiveColor, strokeActiveColor);
|
|
}
|
|
} else if (this.animState === AnimationType.SCROLL_ACTIVE) {
|
|
that._animateArrow(false, that.arrowState);
|
|
that._drawScroll(activeColor, targetActiveColor, strokeActiveColor);
|
|
} else if (this.animState === AnimationType.ARROW_HOVER && lastAnimState === AnimationType.ARROW_HOVER) {
|
|
that._animateArrow(true, that.arrowState);
|
|
that._drawScroll(hoverColor, targetHoverColor, strokeHoverColor);
|
|
} else return;
|
|
};
|
|
|
|
ScrollObject.prototype._draw = function () {
|
|
|
|
clearTimeout(this.fadeTimeoutScroll);
|
|
this.fadeTimeoutScroll = null;
|
|
clearTimeout(this.fadeTimeoutArrows);
|
|
this.fadeTimeoutArrows = null;
|
|
|
|
//scroll animation
|
|
this._doAnimation(this.lastAnimState);
|
|
this.lastAnimState = this.animState;
|
|
};
|
|
|
|
ScrollObject.prototype._checkPiperImagesV = function() {
|
|
if ( this.settings.isVerticalScroll && this.maxScrollY != 0 && this.scroller.h >= Math.round(13 * AscBrowser.retinaPixelRatio) )
|
|
return true;
|
|
return false;
|
|
};
|
|
ScrollObject.prototype._checkPiperImagesH = function() {
|
|
if ( this.settings.isHorizontalScroll && this.maxScrollX != 0 && this.scroller.w >= Math.round(13 * AscBrowser.retinaPixelRatio) )
|
|
return true;
|
|
return false;
|
|
};
|
|
|
|
ScrollObject.prototype._setDimension = function ( h, w ) {
|
|
|
|
var dPR = AscBrowser.retinaPixelRatio;
|
|
if(this.canvasH === Math.round(h * dPR) && this.canvasW === Math.round(w * dPR)) {
|
|
this.isResizeArrows = false;
|
|
return;
|
|
}
|
|
this.isResizeArrows = true;
|
|
this.canvasH = Math.round(h * dPR);
|
|
this.canvasW = Math.round(w * dPR);
|
|
this.canvasOriginalH = h;
|
|
this.canvasOriginalW = w;
|
|
this.canvas.height = this.canvasH;
|
|
this.canvas.width = this.canvasW;
|
|
};
|
|
ScrollObject.prototype._setScrollerHW = function () {
|
|
var dPR = AscBrowser.retinaPixelRatio;
|
|
if ( this.settings.isVerticalScroll ) {
|
|
this.scroller.x = this._roundForScale(dPR);
|
|
this.scroller.w = Math.round((this.canvasOriginalW - 1) * dPR);
|
|
if(this.settings.slimScroll) {
|
|
this.settings.arrowSizeW = this.settings.arrowSizeH = this.scroller.w;
|
|
}
|
|
if ( this.settings.showArrows )
|
|
this.ArrowDrawer.InitSize( this.settings.arrowSizeW, this.settings.arrowSizeH );
|
|
}
|
|
else if ( this.settings.isHorizontalScroll ) {
|
|
this.scroller.y = this._roundForScale(dPR);
|
|
this.scroller.h = Math.round((this.canvasOriginalH - 1) * dPR);
|
|
if(this.settings.slimScroll) {
|
|
this.settings.arrowSizeH = this.settings.arrowSizeW = this.scroller.h;
|
|
}
|
|
if ( this.settings.showArrows )
|
|
this.ArrowDrawer.InitSize( this.settings.arrowSizeH, this.settings.arrowSizeW );
|
|
}
|
|
};
|
|
ScrollObject.prototype._MouseHoverOnScroller = function ( mp ) {
|
|
if(this.settings.isVerticalScroll && mp.x >= 0 && mp.x <= this.scroller.x + this.scroller.w &&
|
|
mp.y >= this.scroller.y && mp.y <= this.scroller.y + this.scroller.h) {
|
|
return true;
|
|
} else if(this.settings.isHorizontalScroll && mp.x >= this.scroller.x && mp.x <= this.scroller.x + this.scroller.w &&
|
|
mp.y >= 0 && mp.y <= this.scroller.y + this.scroller.h) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
ScrollObject.prototype._MouseArrowHover = function (mp) {
|
|
|
|
var arrowDim =this.settings.arrowDim;
|
|
if (this.settings.isVerticalScroll) {
|
|
if (
|
|
mp.x >= 0 &&
|
|
mp.x <= this.canvasW &&
|
|
mp.y >= 0 &&
|
|
mp.y <= arrowDim
|
|
) {
|
|
return ArrowType.ARROW_TOP;
|
|
} else if (
|
|
mp.x >= 0 &&
|
|
mp.x <= this.canvasW &&
|
|
mp.y >= this.canvasH - arrowDim &&
|
|
mp.y <= this.canvasH
|
|
) {
|
|
return ArrowType.ARROW_BOTTOM;
|
|
} else return ArrowType.NONE;
|
|
}
|
|
if (this.settings.isHorizontalScroll) {
|
|
if (
|
|
mp.x >= 0 &&
|
|
mp.x <= arrowDim &&
|
|
mp.y >= 0 &&
|
|
mp.y <= this.canvasH
|
|
) {
|
|
return ArrowType.ARROW_LEFT;
|
|
} else if (
|
|
mp.x >= this.canvasW - arrowDim &&
|
|
mp.x <= this.canvasW &&
|
|
mp.y >= 0 &&
|
|
mp.y <= this.canvasH
|
|
) {
|
|
return ArrowType.ARROW_RIGHT;
|
|
} else return ArrowType.NONE;
|
|
}
|
|
};
|
|
|
|
ScrollObject.prototype._arrowDownMouseDown = function () {
|
|
var that = this, scrollTimeout, isFirst = true,
|
|
doScroll = function () {
|
|
if ( that.settings.isVerticalScroll )
|
|
that.scrollByY( that.settings.vscrollStep );
|
|
else if ( that.settings.isHorizontalScroll )
|
|
that.scrollByX( that.settings.hscrollStep);
|
|
|
|
if(that.mouseDown)
|
|
scrollTimeout = setTimeout( doScroll, isFirst ? that.settings.initialDelay : that.settings.arrowRepeatFreq );
|
|
isFirst = false;
|
|
};
|
|
doScroll();
|
|
this.bind( "mouseup.main mouseout", function () {
|
|
scrollTimeout && clearTimeout( scrollTimeout );
|
|
scrollTimeout = null;
|
|
} );
|
|
};
|
|
ScrollObject.prototype._arrowUpMouseDown = function () {
|
|
var that = this, scrollTimeout, isFirst = true,
|
|
doScroll = function () {
|
|
if ( that.settings.isVerticalScroll )
|
|
that.scrollByY( -that.settings.vscrollStep );
|
|
else if ( that.settings.isHorizontalScroll )
|
|
that.scrollByX( -that.settings.hscrollStep);
|
|
|
|
if(that.mouseDown)
|
|
scrollTimeout = setTimeout( doScroll, isFirst ? that.settings.initialDelay : that.settings.arrowRepeatFreq );
|
|
isFirst = false;
|
|
};
|
|
doScroll();
|
|
this.bind( "mouseup.main mouseout", function () {
|
|
scrollTimeout && clearTimeout( scrollTimeout );
|
|
scrollTimeout = null;
|
|
} )
|
|
};
|
|
|
|
ScrollObject.prototype.getCurScrolledX = function () {
|
|
return this.scrollHCurrentX;
|
|
};
|
|
ScrollObject.prototype.getCurScrolledY = function () {
|
|
return this.scrollVCurrentY;
|
|
};
|
|
ScrollObject.prototype.getMaxScrolledY = function () {
|
|
return this.maxScrollY;
|
|
};
|
|
ScrollObject.prototype.getMaxScrolledX = function () {
|
|
return this.maxScrollX;
|
|
};
|
|
ScrollObject.prototype.getIsLockedMouse = function () {
|
|
return (this.that.mouseDownArrow || this.that.mouseDown);
|
|
};
|
|
/************************************************************************/
|
|
/*events*/
|
|
ScrollObject.prototype.evt_mousemove = function ( e ) {
|
|
|
|
if (this.style)
|
|
this.style.cursor = "default";
|
|
|
|
var evt = e || window.event;
|
|
|
|
if ( evt.preventDefault )
|
|
evt.preventDefault();
|
|
else
|
|
evt.returnValue = false;
|
|
|
|
var mousePos = this.that.getMousePosition( evt );
|
|
this.that.EndMousePosition.x = mousePos.x;
|
|
this.that.EndMousePosition.y = mousePos.y;
|
|
var arrowHover = this.that._MouseArrowHover(mousePos);
|
|
var dPR = AscBrowser.retinaPixelRatio;
|
|
|
|
//arrow pressed
|
|
if (this.that.settings.showArrows && this.that.mouseDownArrow) {
|
|
if (arrowHover && arrowHover === this.that.arrowState) {
|
|
this.that.arrowState = arrowHover;
|
|
}
|
|
this.that.animState = AnimationType.ARROW_ACTIVE;
|
|
} else if (!this.that.mouseDownArrow) {
|
|
if (!arrowHover || !this.that.settings.showArrows) {
|
|
this.that.animState = AnimationType.SCROLL_HOVER;
|
|
} else {
|
|
this.that.animState = AnimationType.ARROW_HOVER;
|
|
this.that.arrowState = arrowHover;
|
|
}
|
|
}
|
|
|
|
if ( this.that.mouseDown && this.that.scrollerMouseDown ) {
|
|
this.that.moveble = true;
|
|
}
|
|
else {
|
|
this.that.moveble = false;
|
|
}
|
|
|
|
if ( this.that.settings.isVerticalScroll ) {
|
|
if ( this.that.moveble && this.that.scrollerMouseDown ) {
|
|
var isTop = false, isBottom = false;
|
|
if (arrowHover && this.that.settings.showArrows) {
|
|
this.that.animState = AnimationType.ARROW_HOVER;
|
|
} else {
|
|
this.that.animState = AnimationType.SCROLL_ACTIVE;
|
|
}
|
|
var _dlt = this.that.EndMousePosition.y - this.that.StartMousePosition.y;
|
|
_dlt = _dlt >= 0 ? Math.floor(_dlt) : Math.ceil(_dlt);
|
|
|
|
if ( this.that.EndMousePosition.y == this.that.StartMousePosition.y ) {
|
|
return;
|
|
}
|
|
else if ( this.that.EndMousePosition.y < this.that.arrowPosition ) {
|
|
this.that.EndMousePosition.y = this.that.arrowPosition;
|
|
this.that.scroller.y = this.that.arrowPosition;
|
|
}
|
|
else if ( this.that.EndMousePosition.y > this.that.canvasH - this.that.arrowPosition ) {
|
|
this.that.EndMousePosition.y = this.that.canvasH - this.that.arrowPosition;
|
|
this.that.scroller.y = this.that.canvasH - this.that.arrowPosition - this.that.scroller.h;
|
|
}
|
|
else {
|
|
var dltY = _dlt > 0 ? this.that.canvasH - this.that.arrowPosition - this.that.scroller.h - this.that.scroller.y : this.that.arrowPosition - this.that.scroller.y;
|
|
_dlt = (_dlt > 0) ? (dltY < _dlt ? dltY : _dlt) : (dltY > _dlt ? dltY : _dlt);
|
|
|
|
if(_dlt > 0 && this.that.scroller.y + this.that.scroller.h + _dlt + Math.round(dPR) <= this.that.canvasH - this.that.arrowPosition ||
|
|
(_dlt < 0 && this.that.scroller.y + _dlt >= this.that.arrowPosition)) {
|
|
this.that.scroller.y += _dlt;
|
|
} else if(_dlt > 0) {
|
|
this.that.scroller.y = this.that.canvasH - this.that.arrowPosition - this.that.scroller.h;
|
|
} else if(_dlt < 0) {
|
|
this.that.scroller.y = this.that.arrowPosition;
|
|
}
|
|
|
|
}
|
|
|
|
var destY = (this.that.scroller.y - this.that.arrowPosition) * this.that.scrollCoeff;
|
|
//var result = editor.WordControl.CorrectSpeedVerticalScroll(destY);
|
|
var result = this.that._correctScrollV( this.that, destY );
|
|
if ( result != null && result.isChange === true ) {
|
|
destY = result.Pos;
|
|
}
|
|
|
|
this.that._scrollV( this.that, evt, destY, isTop, isBottom );
|
|
this.that.StartMousePosition.x = this.that.EndMousePosition.x;
|
|
this.that.StartMousePosition.y = this.that.EndMousePosition.y;
|
|
}
|
|
}
|
|
else if ( this.that.settings.isHorizontalScroll ) {
|
|
if ( this.that.moveble && this.that.scrollerMouseDown ) {
|
|
|
|
var isTop = false, isBottom = false;
|
|
if (arrowHover && this.that.settings.showArrows) {
|
|
this.that.animState = AnimationType.ARROW_HOVER;
|
|
} else {
|
|
this.that.animState = AnimationType.SCROLL_ACTIVE;
|
|
}
|
|
var _dlt =this.that.EndMousePosition.x - this.that.StartMousePosition.x;
|
|
_dlt = _dlt >= 0 ? Math.floor(_dlt) : Math.ceil(_dlt);
|
|
|
|
if ( this.that.EndMousePosition.x == this.that.StartMousePosition.x )
|
|
return;
|
|
else if ( this.that.EndMousePosition.x < this.that.arrowPosition ) {
|
|
this.that.EndMousePosition.x = this.that.arrowPosition;
|
|
this.that.scroller.x = this.that.arrowPosition;
|
|
}
|
|
else if ( this.that.EndMousePosition.x > this.that.canvasW - this.that.arrowPosition ) {
|
|
this.that.EndMousePosition.x = this.that.canvasW - this.that.arrowPosition;
|
|
this.that.scroller.x = this.that.canvasW - this.that.arrowPosition - this.that.scroller.w;
|
|
}
|
|
else {
|
|
var dltX = _dlt > 0 ? this.that.canvasW - this.that.arrowPosition - this.that.scroller.w - this.that.scroller.x : this.that.arrowPosition - this.that.scroller.x;
|
|
_dlt = (_dlt > 0) ? (dltX < _dlt ? dltX : _dlt) : (dltX > _dlt ? dltX : _dlt);
|
|
|
|
if(_dlt > 0 && this.that.scroller.x + this.that.scroller.w + _dlt <= this.that.canvasW - this.that.arrowPosition ||
|
|
(_dlt < 0 && this.that.scroller.x + _dlt >= this.that.arrowPosition)) {
|
|
this.that.scroller.x += _dlt;
|
|
} else if(_dlt > 0) {
|
|
this.that.scroller.x = this.that.canvasW - this.that.arrowPosition - this.that.scroller.w;
|
|
} else if(_dlt < 0) {
|
|
this.that.scroller.x = this.that.arrowPosition;
|
|
}
|
|
}
|
|
var destX = (this.that.scroller.x - this.that.arrowPosition) * this.that.scrollCoeff;
|
|
|
|
this.that._scrollH( this.that, evt, destX, isTop, isBottom );
|
|
|
|
this.that.StartMousePosition.x = this.that.EndMousePosition.x;
|
|
this.that.StartMousePosition.y = this.that.EndMousePosition.y;
|
|
}
|
|
}
|
|
|
|
this.that.moveble = false;
|
|
|
|
if ( this.that.lastAnimState != this.that.animState) {
|
|
this.that._draw();
|
|
}
|
|
|
|
};
|
|
ScrollObject.prototype.evt_mouseout = function ( e ) {
|
|
|
|
var evt = e || window.event;
|
|
|
|
if ( this.that.settings.showArrows ) {
|
|
this.that.mouseDown = this.that.mouseDownArrow ? false : this.that.mouseDown;
|
|
this.that.mouseDownArrow = false;
|
|
this.that.handleEvents( "onmouseout", evt );
|
|
}
|
|
|
|
if (this.that.mouseDown && this.that.scrollerMouseDown) {
|
|
this.that.animState = AnimationType.SCROLL_ACTIVE;
|
|
} else this.that.animState = AnimationType.NONE;
|
|
|
|
this.that._draw();
|
|
|
|
};
|
|
ScrollObject.prototype.evt_mouseover = function ( e ) {
|
|
this.that.mouseover = true;
|
|
};
|
|
|
|
ScrollObject.prototype.evt_mouseup = function ( e ) {
|
|
var evt = e || window.event;
|
|
|
|
this.that.handleEvents( "onmouseup", evt );
|
|
|
|
// prevent pointer events on all iframes (while only plugin!)
|
|
if (window.g_asc_plugins)
|
|
window.g_asc_plugins.enablePointerEvents();
|
|
|
|
if ( evt.preventDefault )
|
|
evt.preventDefault();
|
|
else
|
|
evt.returnValue = false;
|
|
|
|
this.that.mouseDown = false;
|
|
var mousePos = this.that.getMousePosition( evt );
|
|
var arrowHover = this.that._MouseArrowHover(mousePos);
|
|
var mouseHover = this.that._MouseHoverOnScroller( mousePos );
|
|
this.that.scrollTimeout && clearTimeout( this.that.scrollTimeout );
|
|
this.that.scrollTimeout = null;
|
|
|
|
|
|
if ( this.that.scrollerMouseDown ) {
|
|
this.that.mouseUp = true;
|
|
this.that.scrollerMouseDown = false;
|
|
this.that.mouseDownArrow = false;
|
|
if ( this.that._MouseHoverOnScroller( mousePos ) ) {
|
|
this.that.animState = AnimationType.SCROLL_HOVER;
|
|
}
|
|
else {
|
|
if(arrowHover && this.that.settings.showArrows) {
|
|
this.that.lastAnimState = AnimationType.SCROLL_ACTIVE;
|
|
this.that.animState = AnimationType.ARROW_HOVER;
|
|
} else {
|
|
if (mouseHover)
|
|
this.that.animState = AnimationType.SCROLL_HOVER;
|
|
else
|
|
this.that.animState = AnimationType.NONE;
|
|
}
|
|
}
|
|
} else {
|
|
if(arrowHover && this.that.settings.showArrows) {
|
|
this.that.lastArrowState = this.that.arrowState;
|
|
this.that.arrowState = arrowHover;
|
|
this.that.animState = AnimationType.ARROW_HOVER;
|
|
} else {
|
|
if (this.that._MouseHoverOnScroller(mousePos)) {
|
|
this.that.animState = AnimationType.SCROLL_HOVER;
|
|
} else {
|
|
this.that.animState = AnimationType.NONE;
|
|
}
|
|
}
|
|
this.that.mouseDownArrow = false;
|
|
}
|
|
this.that._draw();
|
|
//for unlock global mouse event
|
|
if ( this.that.onLockMouse && this.that.offLockMouse ) {
|
|
this.that.offLockMouse( evt );
|
|
}
|
|
};
|
|
ScrollObject.prototype.evt_mousedown = function ( e ) {
|
|
var evt = e || window.event;
|
|
|
|
// prevent pointer events on all iframes (while only plugin!)
|
|
if (window.g_asc_plugins)
|
|
window.g_asc_plugins.disablePointerEvents();
|
|
|
|
// если сделать превент дефолт - перестанет приходить mousemove от window
|
|
/*
|
|
if (evt.preventDefault)
|
|
evt.preventDefault();
|
|
else
|
|
evt.returnValue = false;
|
|
*/
|
|
|
|
var mousePos = this.that.getMousePosition( evt ),
|
|
arrowHover = this.that._MouseArrowHover(mousePos);
|
|
|
|
this.that.mouseDown = true;
|
|
|
|
AscCommon.capturePointer(e, this.that.canvas);
|
|
|
|
//arrow pressed
|
|
if (this.that.settings.showArrows && arrowHover) {
|
|
this.that.mouseDownArrow = true;
|
|
this.that.arrowState = arrowHover;
|
|
this.that.animState = AnimationType.ARROW_ACTIVE;
|
|
if (arrowHover === ArrowType.ARROW_TOP || arrowHover === ArrowType.ARROW_LEFT) {
|
|
this.that._arrowUpMouseDown();
|
|
} else if (arrowHover === ArrowType.ARROW_BOTTOM || arrowHover === ArrowType.ARROW_RIGHT) {
|
|
this.that._arrowDownMouseDown();
|
|
}
|
|
this.that._draw();
|
|
} else {
|
|
this.that.mouseUp = false;
|
|
|
|
if ( this.that._MouseHoverOnScroller( mousePos ) ) {
|
|
this.that.scrollerMouseUp = false;
|
|
this.that.scrollerMouseDown = true;
|
|
|
|
if ( this.that.onLockMouse ) {
|
|
this.that.onLockMouse( evt );
|
|
}
|
|
this.that.StartMousePosition.x = mousePos.x;
|
|
this.that.StartMousePosition.y = mousePos.y;
|
|
this.that.animState = AnimationType.SCROLL_ACTIVE;
|
|
this.that._draw();
|
|
}
|
|
else {
|
|
//scroll pressed, but not slider
|
|
if ( this.that.settings.isVerticalScroll ) {
|
|
var _tmp = this,
|
|
direction = mousePos.y - this.that.scroller.y - this.that.scroller.h / 2,
|
|
step = this.that.paneHeight * this.that.settings.scrollPagePercent,
|
|
// verticalDragPosition = this.that.scroller.y,
|
|
isFirst = true,
|
|
doScroll = function () {
|
|
_tmp.that.lock = true;
|
|
if ( direction > 0 ) {
|
|
if ( _tmp.that.scroller.y + _tmp.that.scroller.h / 2 + step < mousePos.y ) {
|
|
_tmp.that.scrollByY( step * _tmp.that.scrollCoeff );
|
|
}
|
|
else {
|
|
var _step = Math.abs( _tmp.that.scroller.y + _tmp.that.scroller.h / 2 - mousePos.y );
|
|
_tmp.that.scrollByY( _step * _tmp.that.scrollCoeff );
|
|
cancelClick();
|
|
return;
|
|
}
|
|
}
|
|
else if ( direction < 0 ) {
|
|
if ( _tmp.that.scroller.y + _tmp.that.scroller.h / 2 - step > mousePos.y ) {
|
|
_tmp.that.scrollByY( -step * _tmp.that.scrollCoeff );
|
|
}
|
|
else {
|
|
var _step = Math.abs( _tmp.that.scroller.y + _tmp.that.scroller.h / 2 - mousePos.y );
|
|
_tmp.that.scrollByY( -_step * _tmp.that.scrollCoeff );
|
|
cancelClick();
|
|
return;
|
|
}
|
|
}
|
|
_tmp.that.scrollTimeout = setTimeout( doScroll, isFirst ? _tmp.that.settings.initialDelay : _tmp.that.settings.trackClickRepeatFreq );
|
|
isFirst = false;
|
|
},
|
|
cancelClick = function () {
|
|
_tmp.that.scrollTimeout && clearTimeout( _tmp.that.scrollTimeout );
|
|
_tmp.that.scrollTimeout = null;
|
|
_tmp.that.unbind( "mouseup.main", cancelClick );
|
|
_tmp.that.lock = false;
|
|
};
|
|
|
|
if ( this.that.onLockMouse ) {
|
|
this.that.onLockMouse( evt );
|
|
}
|
|
|
|
doScroll();
|
|
this.that.bind( "mouseup.main", cancelClick );
|
|
}
|
|
if ( this.that.settings.isHorizontalScroll ) {
|
|
var _tmp = this,
|
|
direction = mousePos.x - this.that.scroller.x - this.that.scroller.w / 2,
|
|
step = this.that.paneWidth * this.that.settings.scrollPagePercent,
|
|
// horizontalDragPosition = this.that.scroller.x,
|
|
isFirst = true,
|
|
doScroll = function () {
|
|
_tmp.that.lock = true;
|
|
if ( direction > 0 ) {
|
|
if ( _tmp.that.scroller.x + _tmp.that.scroller.w / 2 + step < mousePos.x ) {
|
|
_tmp.that.scrollByX( step * _tmp.that.scrollCoeff );
|
|
}
|
|
else {
|
|
var _step = Math.abs( _tmp.that.scroller.x + _tmp.that.scroller.w / 2 - mousePos.x );
|
|
_tmp.that.scrollByX( _step * _tmp.that.scrollCoeff );
|
|
cancelClick();
|
|
return;
|
|
}
|
|
}
|
|
else if ( direction < 0 ) {
|
|
if ( _tmp.that.scroller.x + _tmp.that.scroller.w / 2 - step > mousePos.x ) {
|
|
_tmp.that.scrollByX( -step * _tmp.that.scrollCoeff );
|
|
}
|
|
else {
|
|
var _step = Math.abs( _tmp.that.scroller.x + _tmp.that.scroller.w / 2 - mousePos.x );
|
|
_tmp.that.scrollByX( -_step * _tmp.that.scrollCoeff );
|
|
cancelClick();
|
|
return;
|
|
}
|
|
}
|
|
_tmp.that.scrollTimeout = setTimeout( doScroll, isFirst ? _tmp.that.settings.initialDelay : _tmp.that.settings.trackClickRepeatFreq );
|
|
isFirst = false;
|
|
// _tmp.that._drawArrow( ArrowStatus.arrowHover );
|
|
},
|
|
cancelClick = function () {
|
|
_tmp.that.scrollTimeout && clearTimeout( _tmp.that.scrollTimeout );
|
|
_tmp.that.scrollTimeout = null;
|
|
_tmp.that.unbind( "mouseup.main", cancelClick );
|
|
_tmp.that.lock = false;
|
|
};
|
|
|
|
if ( this.that.onLockMouse ) {
|
|
this.that.onLockMouse( evt );
|
|
}
|
|
|
|
doScroll();
|
|
this.that.bind( "mouseup.main", cancelClick );
|
|
}
|
|
}
|
|
}
|
|
};
|
|
ScrollObject.prototype.evt_mousewheel = function ( e ) {
|
|
var evt = e || window.event;
|
|
/* if ( evt.preventDefault )
|
|
evt.preventDefault();
|
|
else
|
|
evt.returnValue = false;*/
|
|
|
|
var delta = 1;
|
|
if ( this.that.settings.isHorizontalScroll ) return;
|
|
if ( undefined != evt.wheelDelta )
|
|
delta = (evt.wheelDelta > 0) ? -this.that.settings.vscrollStep : this.that.settings.vscrollStep;
|
|
else
|
|
delta = (evt.detail > 0) ? this.that.settings.vscrollStep : -this.that.settings.vscrollStep;
|
|
delta *= this.that.settings.wheelScrollLines;
|
|
this.that.scroller.y += delta;
|
|
if ( this.that.scroller.y < 0 ) {
|
|
this.that.scroller.y = 0;
|
|
}
|
|
else if ( this.that.scroller.y + this.that.scroller.h > this.that.canvasH ) {
|
|
this.that.scroller.y = this.that.canvasH - this.that.arrowPosition - this.that.scroller.h;
|
|
}
|
|
this.that.scrollByY( delta )
|
|
};
|
|
ScrollObject.prototype.evt_click = function ( e ) {
|
|
var evt = e || window.event;
|
|
var mousePos = this.that.getMousePosition( evt );
|
|
if ( this.that.settings.isHorizontalScroll ) {
|
|
if ( mousePos.x > this.arrowPosition && mousePos.x < this.that.canvasW - this.that.arrowPosition ) {
|
|
if ( this.that.scroller.x > mousePos.x ) {
|
|
this.that.scrollByX( -this.that.settings.vscrollStep );
|
|
}
|
|
if ( this.that.scroller.x < mousePos.x && this.that.scroller.x + this.that.scroller.w > mousePos.x ) {
|
|
return false;
|
|
}
|
|
if ( this.that.scroller.x + this.that.scroller.w < mousePos.x ) {
|
|
this.that.scrollByX( this.that.settings.hscrollStep );
|
|
}
|
|
}
|
|
}
|
|
if ( this.that.settings.isVerticalScroll ) {
|
|
if ( mousePos.y > this.that.arrowPosition && mousePos.y < this.that.canvasH - this.that.arrowPosition ) {
|
|
if ( this.that.scroller.y > mousePos.y ) {
|
|
this.that.scrollByY( -this.that.settings.vscrollStep );
|
|
}
|
|
if ( this.that.scroller.y < mousePos.y && this.that.scroller.y + this.that.scroller.h > mousePos.y ) {
|
|
return false;
|
|
}
|
|
if ( this.that.scroller.y + this.that.scroller.h < mousePos.y ) {
|
|
this.that.scrollByY( this.that.settings.hscrollStep );
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/************************************************************************/
|
|
/*for events*/
|
|
ScrollObject.prototype.bind = function ( typesStr, handler ) {
|
|
var types = typesStr.split( " " );
|
|
/*
|
|
* loop through types and attach event listeners to
|
|
* each one. eg. "click mouseover.namespace mouseout"
|
|
* will create three event bindings
|
|
*/
|
|
for ( var n = 0; n < types.length; n++ ) {
|
|
var type = types[n];
|
|
var event = (type.indexOf( 'touch' ) == -1) ? 'on' + type : type;
|
|
var parts = event.split( "." );
|
|
var baseEvent = parts[0];
|
|
var name = parts.length > 1 ? parts[1] : "";
|
|
|
|
if ( !this.eventListeners[baseEvent] ) {
|
|
this.eventListeners[baseEvent] = [];
|
|
}
|
|
|
|
this.eventListeners[baseEvent].push( {
|
|
name:name,
|
|
handler:handler
|
|
} );
|
|
}
|
|
};
|
|
ScrollObject.prototype.unbind = function ( typesStr ) {
|
|
var types = typesStr.split( " " );
|
|
|
|
for ( var n = 0; n < types.length; n++ ) {
|
|
var type = types[n];
|
|
var event = (type.indexOf( 'touch' ) == -1) ? 'on' + type : type;
|
|
var parts = event.split( "." );
|
|
var baseEvent = parts[0];
|
|
|
|
if ( this.eventListeners[baseEvent] && parts.length > 1 ) {
|
|
var name = parts[1];
|
|
|
|
for ( var i = 0; i < this.eventListeners[baseEvent].length; i++ ) {
|
|
if ( this.eventListeners[baseEvent][i].name == name ) {
|
|
this.eventListeners[baseEvent].splice( i, 1 );
|
|
if ( this.eventListeners[baseEvent].length === 0 ) {
|
|
this.eventListeners[baseEvent] = undefined;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
this.eventListeners[baseEvent] = undefined;
|
|
}
|
|
}
|
|
};
|
|
ScrollObject.prototype.handleEvents = function ( eventType, evt, p ) {
|
|
var that = this;
|
|
// generic events handler
|
|
function handle( obj ) {
|
|
var el = obj.eventListeners;
|
|
if ( el[eventType] ) {
|
|
var events = el[eventType];
|
|
for ( var i = 0; i < events.length; i++ ) {
|
|
events[i].handler.apply( obj, [evt] );
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* simulate bubbling by handling shape events
|
|
* first, followed by group events, folulowed
|
|
* by layer events
|
|
*/
|
|
handle( that );
|
|
};
|
|
|
|
function _HEXTORGB_( colorHEX ) {
|
|
return {
|
|
R:parseInt( colorHEX.substring( 1, 3 ), 16 ),
|
|
G:parseInt( colorHEX.substring( 3, 5 ), 16 ),
|
|
B:parseInt( colorHEX.substring( 5, 7 ), 16 )
|
|
}
|
|
}
|
|
|
|
ScrollObject.prototype._roundForScale = function (value) {
|
|
return ((value - Math.floor(value)) <= 0.5) ? Math.floor(value) : Math.round(value);
|
|
};
|
|
//---------------------------------------------------------export---------------------------------------------------
|
|
window["AscCommon"].ScrollSettings = ScrollSettings;
|
|
window["AscCommon"].ScrollObject = ScrollObject;
|
|
})(window);
|