mirror of
https://github.com/ONLYOFFICE/sdkjs.git
synced 2026-04-07 14:09:12 +08:00
39bd2eeb3d
git-svn-id: svn://192.168.3.15/activex/AVS/Sources/TeamlabOffice/trunk/OfficeWeb@60155 954022d7-b5bf-4e40-9824-e11837661b57
3302 lines
129 KiB
JavaScript
3302 lines
129 KiB
JavaScript
"use strict";
|
||
|
||
var debug = false;
|
||
|
||
var ScrollArrowType = {
|
||
ARROW_TOP:0,
|
||
ARROW_RIGHT:1,
|
||
ARROW_BOTTOM:2,
|
||
ARROW_LEFT:3
|
||
};
|
||
var ScrollOverType = {
|
||
NONE:0,
|
||
OVER:1,
|
||
ACTIVE:2,
|
||
STABLE:3,
|
||
LAYER:4
|
||
};
|
||
|
||
var ArrowStatus = {
|
||
upLeftArrowHover_downRightArrowNonActive:0,
|
||
upLeftArrowActive_downRightArrowNonActive:1,
|
||
upLeftArrowNonActive_downRightArrowHover:2,
|
||
upLeftArrowNonActive_downRightArrowActive:3,
|
||
upLeftArrowNonActive_downRightArrowNonActive:4,
|
||
arrowHover:5
|
||
}
|
||
|
||
function GetClientWidth( elem ) {
|
||
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 ) {
|
||
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.IsRetina = false;
|
||
|
||
// просто рисовать - неправильно. рисуется с антиалиазингом - и получается некрасиво
|
||
/*this.ColorGradStart = {R:69, G:70, B:71};
|
||
this.ColorGradEnd = {R:116, G:117, B:118};*/
|
||
|
||
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 )
|
||
}
|
||
}
|
||
|
||
this.ColorGradStart = [];
|
||
this.ColorGradEnd = [];
|
||
|
||
this.ColorGradStart[ScrollOverType.NONE] = HEXTORGB( settings && settings.arrowColor ? settings.arrowColor : "#888888" );
|
||
this.ColorGradEnd[ScrollOverType.NONE] = HEXTORGB( settings && settings.arrowColor ? settings.arrowColor : "#888888" );
|
||
|
||
this.ColorGradStart[ScrollOverType.STABLE] = HEXTORGB( settings && settings.arrowStableColor ? settings.arrowStableColor : "#888888" );
|
||
this.ColorGradEnd[ScrollOverType.STABLE] = HEXTORGB( settings && settings.arrowStableColor ? settings.arrowStableColor : "#888888" );
|
||
|
||
this.ColorGradStart[ScrollOverType.OVER] = HEXTORGB( settings && settings.arrowOverColor ? settings.arrowOverColor : "#f1f1f1" );
|
||
this.ColorGradEnd[ScrollOverType.OVER] = HEXTORGB( settings && settings.arrowOverColor ? settings.arrowOverColor : "#f1f1f1" );
|
||
|
||
this.ColorGradStart[ScrollOverType.ACTIVE] = HEXTORGB( settings && settings.arrowActiveColor ? settings.arrowActiveColor : "#f1f1f1" );
|
||
this.ColorGradEnd[ScrollOverType.ACTIVE] = HEXTORGB( settings && settings.arrowActiveColor ? settings.arrowActiveColor : "#f1f1f1" );
|
||
|
||
this.ColorBorderNone = settings && settings.arrowBorderColor ? settings.arrowBorderColor : "#cfcfcf";
|
||
this.ColorBorderStable = settings && settings.arrowStableBorderColor ? settings.arrowStableBorderColor : "#cfcfcf";
|
||
this.ColorBorderOver = settings && settings.arrowOverBorderColor ? settings.arrowOverBorderColor : "#cfcfcf";
|
||
this.ColorBorderActive = settings && settings.arrowActiveBorderColor ? settings.arrowActiveBorderColor : "#848484";
|
||
|
||
this.ColorBackNone = settings && settings.arrowBackgroundColor ? settings.arrowBackgroundColor : "#F1F1F1";
|
||
this.ColorBackStable = settings && settings.arrowStableBackgroundColor ? settings.arrowStableBackgroundColor : "#F1F1F1";
|
||
this.ColorBackOver = settings && settings.arrowOverBackgroundColor ? settings.arrowOverBackgroundColor : "#cfcfcf";
|
||
this.ColorBackActive = settings && settings.arrowActiveBackgroundColor ? settings.arrowActiveBackgroundColor : "#848484";
|
||
|
||
// вот такие мега настройки для кастомизации)
|
||
this.IsDrawBorderInNoneMode = false;
|
||
this.IsDrawBorders = true
|
||
|
||
// имя - направление стрелки
|
||
this.ImageLeft = null;
|
||
this.ImageTop = null;
|
||
this.ImageRight = null;
|
||
this.ImageBottom = null;
|
||
|
||
this.IsNeedInvertOnActive = settings && settings.isNeedInvertOnActive ? settings.isNeedInvertOnActive : false;
|
||
|
||
this.lastArrowStatus1 = -1;
|
||
this.lastArrowStatus2 = -1;
|
||
this.startColorFadeInOutStart1 = {R:-1,G:-1,B:-1};
|
||
this.startColorFadeInOutStart2 = {R:-1,G:-1,B:-1};
|
||
|
||
this.fadeInTimeoutFirst = -1;
|
||
this.fadeOutTimeoutFirst = -1;
|
||
|
||
this.fadeInTimeout1 = -1;
|
||
this.fadeOutTimeout1 = -1;
|
||
this.fadeInTimeout2 = -1;
|
||
this.fadeOutTimeout2 = -1;
|
||
|
||
|
||
this.fadeInActive1 = false;
|
||
this.fadeOutActive1 = false;
|
||
|
||
this.fadeInActive2 = false;
|
||
this.fadeOutActive2 = false;
|
||
|
||
this.fadeInFadeOutDelay = settings.fadeInFadeOutDelay ? settings.fadeInFadeOutDelay : 30;
|
||
|
||
}
|
||
CArrowDrawer.prototype.InitSize = function ( sizeW, sizeH, is_retina ) {
|
||
if ( ( sizeH == this.SizeH || sizeW == this.SizeW ) && is_retina == this.IsRetina && null != this.ImageLeft )
|
||
return;
|
||
|
||
this.SizeW = Math.max( sizeW, 1 );
|
||
this.SizeH = Math.max( sizeH, 1 );
|
||
this.IsRetina = is_retina;
|
||
|
||
this.SizeNaturalW = this.SizeW;
|
||
this.SizeNaturalH = this.SizeH;
|
||
|
||
if ( this.IsRetina ) {
|
||
this.SizeW <<= 1;
|
||
this.SizeH <<= 1;
|
||
|
||
this.SizeNaturalW <<= 1;
|
||
this.SizeNaturalH <<= 1;
|
||
}
|
||
|
||
this.ImageLeft = [document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' )];
|
||
this.ImageTop = [document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' )];
|
||
this.ImageRight = [document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' )];
|
||
this.ImageBottom = [document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' )];
|
||
|
||
this.ImageLeft[ScrollOverType.NONE].width = this.SizeW;
|
||
this.ImageLeft[ScrollOverType.NONE].height = this.SizeH;
|
||
this.ImageLeft[ScrollOverType.STABLE].width = this.SizeW;
|
||
this.ImageLeft[ScrollOverType.STABLE].height = this.SizeH;
|
||
this.ImageLeft[ScrollOverType.OVER].width = this.SizeW;
|
||
this.ImageLeft[ScrollOverType.OVER].height = this.SizeH;
|
||
this.ImageLeft[ScrollOverType.ACTIVE].width = this.SizeW;
|
||
this.ImageLeft[ScrollOverType.ACTIVE].height = this.SizeH;
|
||
|
||
this.ImageTop[ScrollOverType.NONE].width = this.SizeW;
|
||
this.ImageTop[ScrollOverType.NONE].height = this.SizeH;
|
||
this.ImageTop[ScrollOverType.STABLE].width = this.SizeW;
|
||
this.ImageTop[ScrollOverType.STABLE].height = this.SizeH;
|
||
this.ImageTop[ScrollOverType.OVER].width = this.SizeW;
|
||
this.ImageTop[ScrollOverType.OVER].height = this.SizeH;
|
||
this.ImageTop[ScrollOverType.ACTIVE].width = this.SizeW;
|
||
this.ImageTop[ScrollOverType.ACTIVE].height = this.SizeH;
|
||
|
||
this.ImageRight[ScrollOverType.NONE].width = this.SizeW;
|
||
this.ImageRight[ScrollOverType.NONE].height = this.SizeH;
|
||
this.ImageRight[ScrollOverType.STABLE].width = this.SizeW;
|
||
this.ImageRight[ScrollOverType.STABLE].height = this.SizeH;
|
||
this.ImageRight[ScrollOverType.OVER].width = this.SizeW;
|
||
this.ImageRight[ScrollOverType.OVER].height = this.SizeH;
|
||
this.ImageRight[ScrollOverType.ACTIVE].width = this.SizeW;
|
||
this.ImageRight[ScrollOverType.ACTIVE].height = this.SizeH;
|
||
|
||
this.ImageBottom[ScrollOverType.NONE].width = this.SizeW;
|
||
this.ImageBottom[ScrollOverType.NONE].height = this.SizeH;
|
||
this.ImageBottom[ScrollOverType.STABLE].width = this.SizeW;
|
||
this.ImageBottom[ScrollOverType.STABLE].height = this.SizeH;
|
||
this.ImageBottom[ScrollOverType.OVER].width = this.SizeW;
|
||
this.ImageBottom[ScrollOverType.OVER].height = this.SizeH;
|
||
this.ImageBottom[ScrollOverType.ACTIVE].width = this.SizeW;
|
||
this.ImageBottom[ScrollOverType.ACTIVE].height = this.SizeH;
|
||
|
||
|
||
var len = 6;
|
||
if ( this.SizeH < 6 )
|
||
return;
|
||
|
||
if (this.IsRetina)
|
||
len <<= 1;
|
||
|
||
// else (this.SizeH > 12)
|
||
// len = this.Size - 8;
|
||
|
||
// теперь делаем нечетную длину
|
||
if ( 0 == (len & 1) )
|
||
len += 1;
|
||
|
||
var countPart = (len + 1) >> 1,
|
||
plusColor, _data, px,
|
||
_x = ((this.SizeW - len) >> 1),
|
||
_y = this.SizeH - ((this.SizeH - countPart) >> 1),
|
||
_radx = _x + (len >> 1),
|
||
_rady = _y - (countPart >> 1),
|
||
ctx_lInactive, ctx_tInactive, ctx_rInactive, ctx_bInactive,
|
||
r, g, b;
|
||
|
||
for ( var index = 0; index < this.ImageTop.length; index++ ) {
|
||
var __x = _x, __y = _y, _len = len;
|
||
r = this.ColorGradStart[index].R;
|
||
g = this.ColorGradStart[index].G;
|
||
b = this.ColorGradStart[index].B;
|
||
|
||
ctx_tInactive = this.ImageTop[index].getContext( '2d' );
|
||
ctx_lInactive = this.ImageLeft[index].getContext( '2d' );
|
||
ctx_rInactive = this.ImageRight[index].getContext( '2d' );
|
||
ctx_bInactive = this.ImageBottom[index].getContext( '2d' );
|
||
|
||
plusColor = (this.ColorGradEnd[index].R - this.ColorGradStart[index].R) / countPart;
|
||
|
||
_data = ctx_tInactive.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 + plusColor) >> 0;
|
||
g = (g + plusColor) >> 0;
|
||
b = (b + plusColor) >> 0;
|
||
|
||
__x += 1;
|
||
__y -= 1;
|
||
_len -= 2;
|
||
}
|
||
|
||
ctx_tInactive.putImageData( _data, 0, -1 );
|
||
|
||
ctx_lInactive.translate( _radx, _rady + 1 );
|
||
ctx_lInactive.rotate( -Math.PI / 2 );
|
||
ctx_lInactive.translate( -_radx, -_rady );
|
||
ctx_lInactive.drawImage( this.ImageTop[index], 0, 0 );
|
||
|
||
ctx_rInactive.translate( _radx + 1, _rady );
|
||
ctx_rInactive.rotate( Math.PI / 2 );
|
||
ctx_rInactive.translate( -_radx, -_rady );
|
||
ctx_rInactive.drawImage( this.ImageTop[index], 0, 0 );
|
||
|
||
ctx_bInactive.translate( _radx + 1, _rady + 1 );
|
||
ctx_bInactive.rotate( Math.PI );
|
||
ctx_bInactive.translate( -_radx, -_rady );
|
||
ctx_bInactive.drawImage( this.ImageTop[index], 0, 0 );
|
||
|
||
}
|
||
|
||
if ( this.IsRetina ) {
|
||
this.SizeW >>= 1;
|
||
this.SizeH >>= 1;
|
||
}
|
||
}
|
||
CArrowDrawer.prototype.drawArrow = function ( type, mode, ctx, w, h ) {
|
||
|
||
ctx.beginPath();
|
||
|
||
var startColorFadeIn = _HEXTORGB_( this.ColorBackNone ),
|
||
startColorFadeOut = _HEXTORGB_( this.ColorBackOver ),
|
||
that = this,
|
||
img = this.ImageTop[mode],
|
||
x = 0, y = 0, is_vertical = true,
|
||
bottomRightDelta = 1,
|
||
xDeltaIMG = 0, yDeltaIMG = 0, xDeltaBORDER = 0.5, yDeltaBORDER = 1.5,
|
||
tempIMG1 = document.createElement( 'canvas' ),
|
||
tempIMG2 = document.createElement( 'canvas' );
|
||
|
||
tempIMG1.width = this.SizeNaturalW;
|
||
tempIMG1.height = this.SizeNaturalH;
|
||
tempIMG2.width = this.SizeNaturalW;
|
||
tempIMG2.height = this.SizeNaturalH;
|
||
|
||
var ctx1 = tempIMG1.getContext('2d'),
|
||
ctx2 = tempIMG2.getContext('2d');
|
||
|
||
if (this.IsRetina)
|
||
{
|
||
ctx1.setTransform(2, 0, 0, 2, 0, 0);
|
||
ctx2.setTransform(2, 0, 0, 2, 0, 0);
|
||
}
|
||
|
||
function fadeIn(){
|
||
|
||
ctx1.fillStyle = "rgb(" + that.startColorFadeInOutStart1.R + "," +
|
||
that.startColorFadeInOutStart1.G + "," +
|
||
that.startColorFadeInOutStart1.B + ")";
|
||
|
||
startColorFadeIn.R -= 2;
|
||
startColorFadeIn.G -= 2;
|
||
startColorFadeIn.B -= 2;
|
||
|
||
ctx1.rect( x + xDeltaBORDER, y + yDeltaBORDER, strokeW, strokeH );
|
||
ctx1.fill();
|
||
|
||
if ( that.IsDrawBorders ) {
|
||
ctx.strokeStyle = that.ColorBorderOver;
|
||
ctx.stroke();
|
||
}
|
||
|
||
ctx1.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, that.SizeW, that.SizeH );
|
||
|
||
if ( startColorFadeIn.R >= 207 ) {
|
||
that.startColorFadeInOutStart1 = startColorFadeIn;
|
||
that.fadeInTimeout = setTimeout( fadeIn, that.fadeInFadeOutDelay );
|
||
}
|
||
else {
|
||
clearTimeout( that.fadeInTimeout );
|
||
that.fadeInTimeout = null;
|
||
that.fadeInActiveFirst = false;
|
||
startColorFadeIn.R += 2;
|
||
startColorFadeIn.G += 2;
|
||
startColorFadeIn.B += 2;
|
||
that.startColorFadeInOutStart1 = startColorFadeIn;
|
||
}
|
||
|
||
}
|
||
|
||
function fadeOut(){
|
||
|
||
ctx.fillStyle = "rgb(" + that.startColorFadeInOutStart1.R + "," +
|
||
that.startColorFadeInOutStart1.G + "," +
|
||
that.startColorFadeInOutStart1.B + ")";
|
||
|
||
startColorFadeOut.R += 2;
|
||
startColorFadeOut.G += 2;
|
||
startColorFadeOut.B += 2;
|
||
|
||
ctx.rect( x + xDeltaBORDER, y + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.fill();
|
||
|
||
if ( that.IsDrawBorders ) {
|
||
ctx.strokeStyle = that.ColorBorderOver;
|
||
ctx.stroke();
|
||
}
|
||
|
||
ctx.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, that.SizeW, that.SizeH );
|
||
|
||
if ( startColorFadeOut.R <= 241 ) {
|
||
that.startColorFadeInOutStart1 = startColorFadeOut;
|
||
that.fadeOutTimeout = setTimeout( fadeOut, that.fadeInFadeOutDelay );
|
||
}
|
||
else {
|
||
clearTimeout( that.fadeOutTimeout );
|
||
that.fadeOutTimeout = null;
|
||
that.fadeOutActiveFirst = false;
|
||
startColorFadeOut.R -= 2;
|
||
startColorFadeOut.G -= 2;
|
||
startColorFadeOut.B -= 2;
|
||
that.startColorFadeInOutStart1 = startColorFadeOut;
|
||
}
|
||
|
||
}
|
||
|
||
if ( mode === null || mode === undefined ) {
|
||
mode = ScrollOverType.NONE;
|
||
}
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_LEFT:
|
||
{
|
||
x = 1;
|
||
y = -1;
|
||
is_vertical = false;
|
||
img = this.ImageLeft[mode];
|
||
break;
|
||
}
|
||
case ScrollArrowType.ARROW_RIGHT:
|
||
{
|
||
is_vertical = false;
|
||
x = w - this.SizeW - bottomRightDelta;
|
||
y = -1;
|
||
img = this.ImageRight[mode];
|
||
break;
|
||
}
|
||
case ScrollArrowType.ARROW_BOTTOM:
|
||
{
|
||
y = h - this.SizeH - bottomRightDelta - 1;
|
||
img = this.ImageBottom[mode];
|
||
break;
|
||
}
|
||
default:{
|
||
y = 0;
|
||
break;
|
||
}
|
||
}
|
||
|
||
ctx.lineWidth = 1;
|
||
var strokeW = is_vertical ? this.SizeW - 1 : this.SizeW - 1;
|
||
var strokeH = is_vertical ? this.SizeH - 1 : this.SizeH - 1;
|
||
|
||
switch ( mode ) {
|
||
case ScrollOverType.NONE:
|
||
{
|
||
if ( this.lastArrowStatus1 == ScrollOverType.OVER ) {
|
||
|
||
clearTimeout( this.fadeInTimeout );
|
||
this.fadeInTimeout = null;
|
||
clearTimeout( this.fadeOutTimeout );
|
||
this.fadeOutTimeout = null;
|
||
|
||
this.lastArrowStatus1 = mode;
|
||
this.startColorFadeInOutStart1 = this.startColorFadeInOutStart1.R < 0 ? startColorFadeOut : this.startColorFadeInOutStart1;
|
||
this.fadeOutActiveFirst = true;
|
||
fadeOut();
|
||
}
|
||
else{
|
||
ctx.fillStyle = this.ColorBackNone;
|
||
ctx.fillRect( x + 0, y + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
|
||
ctx.beginPath();
|
||
ctx.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, this.SizeW, this.SizeH );
|
||
if ( this.IsDrawBorders ) {
|
||
ctx.strokeStyle = this.ColorBorderNone;
|
||
ctx.rect( x + xDeltaBORDER, y + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
case ScrollOverType.STABLE:
|
||
{
|
||
if ( this.lastArrowStatus1 == ScrollOverType.OVER ) {
|
||
|
||
clearTimeout( this.fadeInTimeout );
|
||
this.fadeInTimeout = null;
|
||
clearTimeout( this.fadeOutTimeout );
|
||
this.fadeOutTimeout = null;
|
||
|
||
this.lastArrowStatus1 = mode;
|
||
this.startColorFadeInOutStart1 = this.startColorFadeInOutStart1.R < 0 ? startColorFadeOut : this.startColorFadeInOutStart1;
|
||
this.fadeOutActiveFirst = true;
|
||
fadeOut();
|
||
}
|
||
else{
|
||
ctx.fillStyle = this.ColorBackStable;
|
||
ctx.fillRect( x + 0, y + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
|
||
ctx.beginPath();
|
||
ctx.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, this.SizeW, this.SizeH );
|
||
ctx.strokeStyle = this.ColorBackStable;
|
||
if ( this.IsDrawBorders ) {
|
||
ctx.strokeStyle = this.ColorBorderStable;
|
||
ctx.rect( x + xDeltaBORDER, y + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
case ScrollOverType.OVER:
|
||
{
|
||
|
||
if ( this.lastArrowStatus1 == ScrollOverType.NONE || this.lastArrowStatus1 == ScrollOverType.STABLE ) {
|
||
|
||
clearTimeout( this.fadeInTimeout );
|
||
this.fadeInTimeout = null;
|
||
clearTimeout( this.fadeOutTimeout );
|
||
this.fadeOutTimeout = null;
|
||
|
||
this.lastArrowStatus1 = mode;
|
||
this.startColorFadeInOutStart1 = this.startColorFadeInOutStart1.R < 0 ? startColorFadeIn : this.startColorFadeInOutStart1;
|
||
this.fadeInActiveFirst = true;
|
||
fadeIn();
|
||
}
|
||
else{
|
||
ctx.beginPath();
|
||
ctx.fillStyle = this.ColorBackOver;
|
||
|
||
ctx.fillRect( x + xDeltaBORDER - .5, y + yDeltaBORDER - .5, strokeW + 1, strokeH + 1 );
|
||
ctx.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, this.SizeW, this.SizeH );
|
||
if ( this.IsDrawBorders ) {
|
||
ctx.strokeStyle = this.ColorBorderOver;
|
||
ctx.rect( x + xDeltaBORDER, y + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.stroke();
|
||
}
|
||
|
||
}
|
||
break;
|
||
}
|
||
case ScrollOverType.ACTIVE:
|
||
{
|
||
ctx.fillStyle = this.ColorBackActive;
|
||
ctx.fillRect( x + 0, y + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
|
||
ctx.beginPath();
|
||
ctx.fillStyle = this.ColorBackActive;
|
||
ctx.fillRect( x + xDeltaBORDER - .5, y + yDeltaBORDER - .5, strokeW + 1, strokeH + 1 );
|
||
|
||
if ( !this.IsNeedInvertOnActive ) {
|
||
ctx.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, this.SizeW, this.SizeH );
|
||
}
|
||
else {
|
||
// slow method
|
||
var _ctx = img.getContext( "2d" );
|
||
|
||
var _data = _ctx.getImageData( 0, 0, this.SizeNaturalW, this.SizeNaturalH );
|
||
var _data2 = _ctx.getImageData( 0, 0, this.SizeNaturalW, this.SizeNaturalH );
|
||
|
||
var _len = 4 * this.SizeNaturalW * this.SizeNaturalH;
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( _data.data[i + 3] == 255 ) {
|
||
_data.data[i] = 255;// - _data.data[i];
|
||
_data.data[i + 1] = 255;// - _data.data[i + 1];
|
||
_data.data[i + 2] = 255;// - _data.data[i + 2];
|
||
}
|
||
}
|
||
|
||
_ctx.putImageData( _data, 0, 0 );
|
||
ctx.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, this.SizeW, this.SizeH );
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( _data.data[i + 3] == 255 ) {
|
||
_data.data[i] = 255 - _data.data[i];
|
||
_data.data[i + 1] = 255 - _data.data[i + 1];
|
||
_data.data[i + 2] = 255 - _data.data[i + 2];
|
||
}
|
||
}
|
||
_ctx.putImageData( _data2, 0, 0 );
|
||
|
||
_data = null;
|
||
_data2 = null;
|
||
}
|
||
if ( this.IsDrawBorders ) {
|
||
ctx.strokeStyle = this.ColorBorderActive;
|
||
ctx.rect( x + xDeltaBORDER, y + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.stroke();
|
||
}
|
||
break;
|
||
}
|
||
default:{
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.lastArrowStatus1 = mode;
|
||
|
||
}
|
||
CArrowDrawer.prototype.drawTopLeftArrow = function(type,mode,ctx,w,h){
|
||
|
||
clearTimeout( this.fadeInTimeout1 );
|
||
this.fadeInTimeout1 = null;
|
||
clearTimeout( this.fadeOutTimeout1 );
|
||
this.fadeOutTimeout1 = null;
|
||
|
||
ctx.beginPath();
|
||
|
||
var startColorFadeIn = this.startColorFadeInOutStart1.R < 0 ? _HEXTORGB_( this.ColorBackNone ) : this.startColorFadeInOutStart1,
|
||
startColorFadeOut = this.startColorFadeInOutStart1.R < 0 ? _HEXTORGB_( this.ColorBackOver ) : this.startColorFadeInOutStart1,
|
||
that = this,
|
||
img1 = this.ImageTop[mode],
|
||
x1 = 0, y1 = 0,
|
||
is_vertical = true,
|
||
xDeltaIMG = 0, yDeltaIMG = 0, xDeltaBORDER = 0.5, yDeltaBORDER = 1.5,
|
||
tempIMG1 = document.createElement( 'canvas' );
|
||
|
||
tempIMG1.width = this.SizeNaturalW;
|
||
tempIMG1.height = this.SizeNaturalH;
|
||
|
||
var ctx1 = tempIMG1.getContext('2d');
|
||
if (this.IsRetina)
|
||
{
|
||
ctx1.setTransform(2, 0, 0, 2, 0, 0);
|
||
}
|
||
|
||
function fadeIn(){
|
||
|
||
var ctx_piperImg, px, _len;
|
||
|
||
ctx1.fillStyle = "rgb(" + that.startColorFadeInOutStart1.R + "," +
|
||
that.startColorFadeInOutStart1.G + "," +
|
||
that.startColorFadeInOutStart1.B + ")";
|
||
|
||
startColorFadeIn.R -= 2;
|
||
startColorFadeIn.G -= 2;
|
||
startColorFadeIn.B -= 2;
|
||
|
||
ctx1.rect( 0.5, 1.5, strokeW, strokeH );
|
||
ctx1.fill();
|
||
|
||
if ( that.IsDrawBorders ) {
|
||
ctx1.strokeStyle = that.ColorBorderOver;
|
||
ctx1.stroke();
|
||
}
|
||
|
||
ctx_piperImg = img1.getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
|
||
px = _data.data;
|
||
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] += 4;
|
||
px[i + 1] += 4;
|
||
px[i + 2] += 4;
|
||
}
|
||
}
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
|
||
ctx1.drawImage( img1, 0, 0, that.SizeW, that.SizeH );
|
||
|
||
if ( startColorFadeIn.R >= 207 ) {
|
||
that.startColorFadeInOutStart1 = startColorFadeIn;
|
||
ctx.drawImage(tempIMG1,x1 + xDeltaIMG,y1 + yDeltaIMG, that.SizeW, that.SizeH);
|
||
that.fadeInTimeout1 = setTimeout( fadeIn, that.fadeInFadeOutDelay );
|
||
}
|
||
else {
|
||
clearTimeout( that.fadeInTimeout1 );
|
||
that.fadeInTimeout1 = null;
|
||
that.fadeInActive1 = false;
|
||
startColorFadeIn.R += 2;
|
||
startColorFadeIn.G += 2;
|
||
startColorFadeIn.B += 2;
|
||
that.startColorFadeInOutStart1 = startColorFadeIn;
|
||
|
||
ctx_piperImg = img1.getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
|
||
px = _data.data;
|
||
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] -= 4;
|
||
px[i + 1] -= 4;
|
||
px[i + 2] -= 4;
|
||
}
|
||
}
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
}
|
||
|
||
}
|
||
|
||
function fadeOut(){
|
||
|
||
var ctx_piperImg, px, _len;
|
||
|
||
ctx1.fillStyle = "rgb(" + that.startColorFadeInOutStart1.R + "," +
|
||
that.startColorFadeInOutStart1.G + "," +
|
||
that.startColorFadeInOutStart1.B + ")";
|
||
|
||
startColorFadeOut.R += 2;
|
||
startColorFadeOut.G += 2;
|
||
startColorFadeOut.B += 2;
|
||
|
||
ctx1.rect( 0.5, 1.5, strokeW, strokeH );
|
||
ctx1.fill();
|
||
|
||
if ( that.IsDrawBorders ) {
|
||
ctx1.strokeStyle = that.ColorBorderOver;
|
||
ctx1.stroke();
|
||
}
|
||
|
||
ctx_piperImg = img1.getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
|
||
px = _data.data;
|
||
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
// console.log("3 " + i + " " + " " + px[i])
|
||
px[i] -= 4;
|
||
px[i + 1] -= 4;
|
||
px[i + 2] -= 4;
|
||
}
|
||
}
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
|
||
ctx1.drawImage( img1, 0, 0, that.SizeW, that.SizeH );
|
||
|
||
if ( startColorFadeOut.R <= 241 ) {
|
||
that.startColorFadeInOutStart1 = startColorFadeOut;
|
||
ctx.drawImage(tempIMG1,x1 + xDeltaIMG,y1 + yDeltaIMG, that.SizeW, that.SizeH);
|
||
that.fadeOutTimeout1 = setTimeout( fadeOut, that.fadeInFadeOutDelay );
|
||
}
|
||
else {
|
||
clearTimeout( that.fadeOutTimeout1 );
|
||
that.fadeOutTimeout1 = null;
|
||
that.fadeOutActive1 = false;
|
||
startColorFadeOut.R -= 2;
|
||
startColorFadeOut.G -= 2;
|
||
startColorFadeOut.B -= 2;
|
||
that.startColorFadeInOutStart1 = startColorFadeOut;
|
||
|
||
ctx_piperImg = img1.getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
|
||
px = _data.data;
|
||
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] += 4;
|
||
px[i + 1] += 4;
|
||
px[i + 2] += 4;
|
||
}
|
||
}
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
}
|
||
|
||
}
|
||
|
||
if ( mode === null || mode === undefined ) {
|
||
mode = ScrollOverType.NONE;
|
||
}
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_LEFT:
|
||
{
|
||
x1 = 1;
|
||
y1 = -1;
|
||
is_vertical = false;
|
||
img1 = this.ImageLeft[mode];
|
||
break;
|
||
}
|
||
default:
|
||
{
|
||
y1 = 0;
|
||
img1 = this.ImageTop[mode];
|
||
break;
|
||
}
|
||
}
|
||
|
||
ctx.lineWidth = 1;
|
||
var strokeW = is_vertical ? this.SizeW - 1 : this.SizeW - 1;
|
||
var strokeH = is_vertical ? this.SizeH - 1 : this.SizeH - 1;
|
||
|
||
switch ( mode ) {
|
||
case ScrollOverType.NONE:
|
||
{
|
||
if ( this.lastArrowStatus1 == ScrollOverType.OVER ) {
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_LEFT:
|
||
{
|
||
img1 = this.ImageLeft[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
default:
|
||
{
|
||
img1 = this.ImageTop[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.lastArrowStatus1 = mode;
|
||
this.startColorFadeInOutStart1 = this.startColorFadeInOutStart1.R < 0 ? startColorFadeOut : this.startColorFadeInOutStart1;
|
||
this.fadeOutActive1 = true;
|
||
fadeOut();
|
||
}
|
||
else{
|
||
|
||
if ( this.lastArrowStatus1 == ScrollOverType.ACTIVE ) {
|
||
|
||
var im, ctx_im, px, _data, c = this.ColorGradStart[ScrollOverType.STABLE];
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_LEFT:
|
||
{
|
||
im = this.ImageLeft[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
default:
|
||
{
|
||
im = this.ImageTop[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
}
|
||
|
||
ctx_im = im.getContext( '2d' );
|
||
_data = ctx_im.getImageData( 0, 0, img1.width, img1.height );
|
||
px = _data.data;
|
||
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] = c.R;
|
||
px[i + 1] = c.G;
|
||
px[i + 2] = c.B;
|
||
}
|
||
}
|
||
|
||
this.startColorFadeInOutStart1 = {R:-1,G:-1,B:-1};
|
||
|
||
ctx_im.putImageData( _data, 0, 0 )
|
||
|
||
}
|
||
|
||
ctx.beginPath();
|
||
ctx.fillStyle = this.ColorBackNone;
|
||
ctx.fillRect( x1 + 0, y1 + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
|
||
ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
|
||
if ( this.IsDrawBorders ) {
|
||
ctx.strokeStyle = this.ColorBorderNone;
|
||
ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
case ScrollOverType.STABLE:
|
||
{
|
||
if ( this.lastArrowStatus1 == ScrollOverType.OVER ) {
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_LEFT:
|
||
{
|
||
img1 = this.ImageLeft[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
default:
|
||
{
|
||
img1 = this.ImageTop[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.lastArrowStatus1 = mode;
|
||
this.startColorFadeInOutStart1 = this.startColorFadeInOutStart1.R < 0 ? startColorFadeOut : this.startColorFadeInOutStart1;
|
||
this.fadeOutActive1 = true;
|
||
fadeOut();
|
||
}
|
||
else{
|
||
|
||
if ( this.lastArrowStatus1 != ScrollOverType.STABLE ) {
|
||
|
||
var im, ctx_im, px, _data, c = this.ColorGradStart[ScrollOverType.STABLE];
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_LEFT:
|
||
{
|
||
im = this.ImageLeft[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
default:
|
||
{
|
||
im = this.ImageTop[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
}
|
||
|
||
ctx_im = im.getContext( '2d' );
|
||
_data = ctx_im.getImageData( 0, 0, img1.width, img1.height );
|
||
px = _data.data;
|
||
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] = c.R;
|
||
px[i + 1] = c.G;
|
||
px[i + 2] = c.B;
|
||
}
|
||
}
|
||
|
||
this.startColorFadeInOutStart1 = {R:-1,G:-1,B:-1};
|
||
|
||
ctx_im.putImageData( _data, 0, 0 )
|
||
|
||
}
|
||
|
||
ctx.beginPath();
|
||
ctx.fillStyle = this.ColorBackStable;
|
||
ctx.fillRect( x1 + 0, y1 + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
|
||
ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
|
||
if ( this.IsDrawBorders ) {
|
||
ctx.strokeStyle = this.ColorBorderStable;
|
||
ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
case ScrollOverType.OVER:
|
||
{
|
||
if ( this.lastArrowStatus1 == ScrollOverType.NONE || this.lastArrowStatus1 == ScrollOverType.STABLE ) {
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_LEFT:
|
||
{
|
||
img1 = this.ImageLeft[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
default:
|
||
{
|
||
img1 = this.ImageTop[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.lastArrowStatus1 = mode;
|
||
this.startColorFadeInOutStart1 = this.startColorFadeInOutStart1.R < 0 ? startColorFadeIn : this.startColorFadeInOutStart1;
|
||
this.fadeInActive1 = true;
|
||
fadeIn();
|
||
}
|
||
else{
|
||
ctx.beginPath();
|
||
ctx.fillStyle = this.ColorBackOver;
|
||
ctx.fillRect( x1 + xDeltaBORDER - .5, y1 + yDeltaBORDER - .5, strokeW + 1, strokeH + 1 );
|
||
ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
|
||
if ( this.IsDrawBorders ) {
|
||
ctx.strokeStyle = this.ColorBorderOver;
|
||
ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
case ScrollOverType.ACTIVE:
|
||
{
|
||
ctx.beginPath();
|
||
ctx.fillStyle = this.ColorBackActive;
|
||
ctx.fillRect( x1 + xDeltaBORDER - .5, y1 + yDeltaBORDER - .5, strokeW + 1, strokeH + 1 );
|
||
|
||
if ( !this.IsNeedInvertOnActive ) {
|
||
ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
|
||
}
|
||
else {
|
||
// slow method
|
||
var _ctx = img1.getContext( "2d" );
|
||
|
||
var _data = _ctx.getImageData( 0, 0, this.SizeW, this.SizeH );
|
||
var _data2 = _ctx.getImageData( 0, 0, this.SizeW, this.SizeH );
|
||
|
||
var _len = 4 * this.SizeW * this.SizeH;
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( _data.data[i + 3] == 255 ) {
|
||
_data.data[i] = 255;// - _data.data[i];
|
||
_data.data[i + 1] = 255;// - _data.data[i + 1];
|
||
_data.data[i + 2] = 255;// - _data.data[i + 2];
|
||
}
|
||
}
|
||
|
||
_ctx.putImageData( _data, 0, 0 );
|
||
ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( _data.data[i + 3] == 255 ) {
|
||
_data.data[i] = 255 - _data.data[i];
|
||
_data.data[i + 1] = 255 - _data.data[i + 1];
|
||
_data.data[i + 2] = 255 - _data.data[i + 2];
|
||
}
|
||
}
|
||
_ctx.putImageData( _data2, 0, 0 );
|
||
|
||
_data = null;
|
||
_data2 = null;
|
||
}
|
||
if ( this.IsDrawBorders ) {
|
||
ctx.strokeStyle = this.ColorBorderActive;
|
||
ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.stroke();
|
||
}
|
||
break;
|
||
}
|
||
default:{
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.lastArrowStatus1 = mode;
|
||
|
||
}
|
||
CArrowDrawer.prototype.drawBottomRightArrow = function(type,mode,ctx,w,h){
|
||
|
||
clearTimeout( this.fadeInTimeout2 );
|
||
this.fadeInTimeout2 = null;
|
||
clearTimeout( this.fadeOutTimeout2 );
|
||
this.fadeOutTimeout2 = null;
|
||
|
||
ctx.beginPath();
|
||
|
||
var startColorFadeIn = this.startColorFadeInOutStart2.R < 0 ? _HEXTORGB_( this.ColorBackNone ) : this.startColorFadeInOutStart2,
|
||
startColorFadeOut = this.startColorFadeInOutStart2.R < 0 ? _HEXTORGB_( this.ColorBackOver ) : this.startColorFadeInOutStart2,
|
||
that = this,
|
||
img1 = this.ImageTop[mode],
|
||
x1 = 0, y1 = 0,
|
||
is_vertical = true,
|
||
bottomRightDelta = 1,
|
||
xDeltaIMG = 0, yDeltaIMG = 0, xDeltaBORDER = 0.5, yDeltaBORDER = 1.5,
|
||
tempIMG1 = document.createElement( 'canvas' );
|
||
|
||
tempIMG1.width = this.SizeNaturalW;
|
||
tempIMG1.height = this.SizeNaturalH;
|
||
|
||
var ctx1 = tempIMG1.getContext('2d');
|
||
|
||
if (this.IsRetina)
|
||
{
|
||
ctx1.setTransform(2, 0, 0, 2, 0, 0);
|
||
}
|
||
|
||
function fadeIn(){
|
||
|
||
var ctx_piperImg, px, _len;
|
||
|
||
ctx1.fillStyle = "rgb(" + that.startColorFadeInOutStart2.R + "," +
|
||
that.startColorFadeInOutStart2.G + "," +
|
||
that.startColorFadeInOutStart2.B + ")";
|
||
|
||
startColorFadeIn.R -= 2;
|
||
startColorFadeIn.G -= 2;
|
||
startColorFadeIn.B -= 2;
|
||
|
||
ctx1.rect( .5, 1.5, strokeW, strokeH );
|
||
ctx1.fill();
|
||
|
||
if ( that.IsDrawBorders ) {
|
||
ctx1.strokeStyle = that.ColorBorderOver;
|
||
ctx1.stroke();
|
||
}
|
||
|
||
ctx_piperImg = img1.getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
|
||
px = _data.data;
|
||
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] += 4;
|
||
px[i + 1] += 4;
|
||
px[i + 2] += 4;
|
||
}
|
||
}
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
|
||
ctx1.drawImage( img1, 0, 0, that.SizeW, that.SizeH );
|
||
|
||
if ( startColorFadeIn.R >= 207 ) {
|
||
that.startColorFadeInOutStart2 = startColorFadeIn;
|
||
ctx.drawImage(tempIMG1,x1 + xDeltaIMG,y1 + yDeltaIMG, that.SizeW, that.SizeH);
|
||
that.fadeInTimeout2 = setTimeout( fadeIn, that.fadeInFadeOutDelay );
|
||
}
|
||
else {
|
||
clearTimeout( that.fadeInTimeout2 );
|
||
that.fadeInTimeout2 = null;
|
||
that.fadeInActive2 = false;
|
||
startColorFadeIn.R += 2;
|
||
startColorFadeIn.G += 2;
|
||
startColorFadeIn.B += 2;
|
||
that.startColorFadeInOutStart2 = startColorFadeIn;
|
||
|
||
ctx_piperImg = img1.getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
|
||
px = _data.data;
|
||
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] -= 4;
|
||
px[i + 1] -= 4;
|
||
px[i + 2] -= 4;
|
||
}
|
||
}
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
|
||
}
|
||
|
||
}
|
||
|
||
function fadeOut(){
|
||
|
||
var ctx_piperImg, px, _len;
|
||
|
||
ctx1.fillStyle = "rgb(" + that.startColorFadeInOutStart2.R + "," +
|
||
that.startColorFadeInOutStart2.G + "," +
|
||
that.startColorFadeInOutStart2.B + ")";
|
||
|
||
startColorFadeOut.R += 2;
|
||
startColorFadeOut.G += 2;
|
||
startColorFadeOut.B += 2;
|
||
|
||
ctx1.rect( .5, 1.5, strokeW, strokeH );
|
||
ctx1.fill();
|
||
|
||
if ( that.IsDrawBorders ) {
|
||
ctx1.strokeStyle = that.ColorBorderOver;
|
||
ctx1.stroke();
|
||
}
|
||
|
||
ctx_piperImg = img1.getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
|
||
px = _data.data;
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] -= 4;
|
||
px[i + 1] -= 4;
|
||
px[i + 2] -= 4;
|
||
}
|
||
}
|
||
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
|
||
ctx1.drawImage( img1, 0, 0, that.SizeW, that.SizeH );
|
||
|
||
if ( startColorFadeOut.R <= 241 ) {
|
||
that.startColorFadeInOutStart2 = startColorFadeOut;
|
||
ctx.drawImage(tempIMG1,x1 + xDeltaIMG,y1 + yDeltaIMG, that.SizeW, that.SizeH);
|
||
that.fadeOutTimeout2 = setTimeout( fadeOut, that.fadeInFadeOutDelay );
|
||
}
|
||
else {
|
||
clearTimeout( that.fadeOutTimeout2 );
|
||
that.fadeOutTimeout2 = null;
|
||
that.fadeOutActive2 = false;
|
||
startColorFadeOut.R -= 2;
|
||
startColorFadeOut.G -= 2;
|
||
startColorFadeOut.B -= 2;
|
||
that.startColorFadeInOutStart2 = startColorFadeOut;
|
||
|
||
ctx_piperImg = img1.getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
|
||
px = _data.data;
|
||
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] += 4;
|
||
px[i + 1] += 4;
|
||
px[i + 2] += 4;
|
||
}
|
||
}
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
|
||
}
|
||
|
||
}
|
||
|
||
if ( mode === null || mode === undefined ) {
|
||
mode = ScrollOverType.NONE;
|
||
}
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_RIGHT:
|
||
{
|
||
is_vertical = false;
|
||
x1 = w - this.SizeW - bottomRightDelta;
|
||
y1 = -1;
|
||
img1 = this.ImageRight[mode];
|
||
|
||
break;
|
||
}
|
||
case ScrollArrowType.ARROW_BOTTOM:
|
||
{
|
||
y1 = h - this.SizeH - bottomRightDelta - 1;
|
||
img1 = this.ImageBottom[mode];
|
||
|
||
break;
|
||
}
|
||
}
|
||
|
||
ctx.lineWidth = 1;
|
||
var strokeW = is_vertical ? this.SizeW - 1 : this.SizeW - 1;
|
||
var strokeH = is_vertical ? this.SizeH - 1 : this.SizeH - 1;
|
||
|
||
switch ( mode ) {
|
||
case ScrollOverType.NONE:
|
||
{
|
||
if ( this.lastArrowStatus2 == ScrollOverType.OVER ) {
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_RIGHT:
|
||
{
|
||
img1 = this.ImageRight[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
default:
|
||
{
|
||
img1 = this.ImageBottom[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.lastArrowStatus2 = mode;
|
||
this.startColorFadeInOutStart2 = this.startColorFadeInOutStart2.R < 0 ? startColorFadeOut : this.startColorFadeInOutStart2;
|
||
this.fadeOutActive2 = true;
|
||
fadeOut();
|
||
}
|
||
else{
|
||
|
||
if ( this.lastArrowStatus2 == ScrollOverType.ACTIVE ) {
|
||
|
||
var im, ctx_im, px, _data, c = this.ColorGradStart[ScrollOverType.STABLE];
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_RIGHT:
|
||
{
|
||
im = this.ImageRight[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
default:
|
||
{
|
||
im = this.ImageBottom[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
}
|
||
|
||
ctx_im = im.getContext( '2d' );
|
||
_data = ctx_im.getImageData( 0, 0, img1.width, img1.height );
|
||
px = _data.data;
|
||
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] = c.R;
|
||
px[i + 1] = c.G;
|
||
px[i + 2] = c.B;
|
||
}
|
||
}
|
||
|
||
this.startColorFadeInOutStart2 = {R:-1,G:-1,B:-1};
|
||
|
||
ctx_im.putImageData( _data, 0, 0 )
|
||
|
||
}
|
||
|
||
ctx.beginPath();
|
||
ctx.fillStyle = this.ColorBackNone;
|
||
ctx.fillRect( x1 + 0, y1 + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
|
||
ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
|
||
if ( this.IsDrawBorders ) {
|
||
ctx.strokeStyle = this.ColorBorderNone;
|
||
ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
case ScrollOverType.STABLE:
|
||
{
|
||
if ( this.lastArrowStatus2 == ScrollOverType.OVER ) {
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_RIGHT:
|
||
{
|
||
img1 = this.ImageRight[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
default:
|
||
{
|
||
img1 = this.ImageBottom[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.lastArrowStatus2 = mode;
|
||
this.startColorFadeInOutStart2 = this.startColorFadeInOutStart2.R < 0 ? startColorFadeOut : this.startColorFadeInOutStart2;
|
||
this.fadeOutActive2 = true;
|
||
fadeOut();
|
||
}
|
||
else{
|
||
|
||
if ( this.lastArrowStatus2 != ScrollOverType.STABLE ) {
|
||
|
||
var im, ctx_im, px, _data, c = this.ColorGradStart[ScrollOverType.STABLE];
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_RIGHT:
|
||
{
|
||
im = this.ImageRight[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
default:
|
||
{
|
||
im = this.ImageBottom[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
}
|
||
|
||
ctx_im = im.getContext( '2d' );
|
||
_data = ctx_im.getImageData( 0, 0, img1.width, img1.height );
|
||
px = _data.data;
|
||
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] = c.R;
|
||
px[i + 1] = c.G;
|
||
px[i + 2] = c.B;
|
||
}
|
||
}
|
||
|
||
this.startColorFadeInOutStart2 = {R:-1,G:-1,B:-1};
|
||
|
||
ctx_im.putImageData( _data, 0, 0 )
|
||
|
||
}
|
||
|
||
ctx.beginPath();
|
||
ctx.fillStyle = this.ColorBackStable;
|
||
ctx.fillRect( x1 + 0, y1 + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
|
||
ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
|
||
ctx.strokeStyle = this.ColorBackStable;
|
||
if ( this.IsDrawBorders ) {
|
||
ctx.strokeStyle = this.ColorBorderStable;
|
||
ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
case ScrollOverType.OVER:
|
||
{
|
||
|
||
if ( this.lastArrowStatus2 == ScrollOverType.NONE || this.lastArrowStatus2 == ScrollOverType.STABLE ) {
|
||
|
||
switch ( type ) {
|
||
case ScrollArrowType.ARROW_RIGHT:
|
||
{
|
||
img1 = this.ImageRight[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
default:
|
||
{
|
||
img1 = this.ImageBottom[ScrollOverType.STABLE];
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.lastArrowStatus2 = mode;
|
||
this.startColorFadeInOutStart2 = this.startColorFadeInOutStart2.R < 0 ? startColorFadeIn : this.startColorFadeInOutStart2;
|
||
this.fadeInActive2 = true;
|
||
fadeIn();
|
||
}
|
||
else{
|
||
ctx.beginPath();
|
||
ctx.fillStyle = this.ColorBackOver;
|
||
ctx.fillRect( x1 + xDeltaBORDER - .5, y1 + yDeltaBORDER - .5, strokeW + 1, strokeH + 1 );
|
||
ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
|
||
if ( this.IsDrawBorders ) {
|
||
ctx.strokeStyle = this.ColorBorderOver;
|
||
ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.stroke();
|
||
}
|
||
|
||
}
|
||
break;
|
||
}
|
||
case ScrollOverType.ACTIVE:
|
||
{
|
||
ctx.beginPath();
|
||
ctx.fillStyle = this.ColorBackNone;
|
||
ctx.fillRect( x1 + 0, y1 + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
|
||
ctx.fillStyle = this.ColorBackActive;
|
||
ctx.fillRect( x1 + xDeltaBORDER - .5, y1 + yDeltaBORDER - .5, strokeW + 1, strokeH + 1 );
|
||
|
||
if ( !this.IsNeedInvertOnActive ) {
|
||
ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
|
||
}
|
||
else {
|
||
// slow method
|
||
var _ctx = img1.getContext( "2d" );
|
||
|
||
var _data = _ctx.getImageData( 0, 0, this.SizeW, this.SizeH );
|
||
var _data2 = _ctx.getImageData( 0, 0, this.SizeW, this.SizeH );
|
||
|
||
var _len = 4 * this.SizeW * this.SizeH;
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( _data.data[i + 3] == 255 ) {
|
||
_data.data[i] = 255;// - _data.data[i];
|
||
_data.data[i + 1] = 255;// - _data.data[i + 1];
|
||
_data.data[i + 2] = 255;// - _data.data[i + 2];
|
||
}
|
||
}
|
||
|
||
_ctx.putImageData( _data, 0, 0 );
|
||
ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( _data.data[i + 3] == 255 ) {
|
||
_data.data[i] = 255 - _data.data[i];
|
||
_data.data[i + 1] = 255 - _data.data[i + 1];
|
||
_data.data[i + 2] = 255 - _data.data[i + 2];
|
||
}
|
||
}
|
||
_ctx.putImageData( _data2, 0, 0 );
|
||
|
||
_data = null;
|
||
_data2 = null;
|
||
}
|
||
if ( this.IsDrawBorders ) {
|
||
ctx.strokeStyle = this.ColorBorderActive;
|
||
ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
|
||
ctx.stroke();
|
||
}
|
||
break;
|
||
}
|
||
default:{
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.lastArrowStatus2 = mode;
|
||
}
|
||
|
||
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 )
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @constructor
|
||
*/
|
||
function ScrollObject( elemID, settings, dbg ) {
|
||
if ( dbg )
|
||
debug = dbg;
|
||
var that = this;
|
||
this.that = this;
|
||
|
||
var extendSettings = function ( settings1, settings2 ) {
|
||
var _st = {};
|
||
if ( settings1 == null || settings1 == undefined )
|
||
return settings2;
|
||
else for ( var _item in settings1 ) {
|
||
if ( typeof settings1[_item] === "object" )
|
||
_st[_item] = extendSettings( _st, settings1[_item] );
|
||
else
|
||
_st[_item] = settings1[_item];
|
||
}
|
||
for ( var _item in settings2 ) {
|
||
if ( !_st.hasOwnProperty( _item ) ) {
|
||
if ( typeof settings2[_item] === "object" )
|
||
_st[_item] = extendSettings( _st, settings2[_item] );
|
||
else
|
||
_st[_item] = settings2[_item];
|
||
}
|
||
}
|
||
return _st;
|
||
}
|
||
|
||
var scrollSettings = {
|
||
showArrows:false,
|
||
screenW:-1,
|
||
screenH:-1,
|
||
scrollerMinHeight:34,
|
||
scrollerMaxHeight:99999,
|
||
scrollerMinWidth:34,
|
||
scrollerMaxWidth:99999,
|
||
initialDelay:300,
|
||
arrowRepeatFreq:50,
|
||
trackClickRepeatFreq:70,
|
||
scrollPagePercent:1. / 8,
|
||
arrowDim:13,
|
||
marginScroller:4,
|
||
scrollerColor:"#f1f1f1",
|
||
scrollerColorOver:"#cfcfcf",
|
||
scrollerColorLayerOver:"#cfcfcf",
|
||
scrollerColorActive:"#ADADAD",
|
||
scrollBackgroundColor:"#f4f4f4",
|
||
scrollBackgroundColorHover:"#f4f4f4",
|
||
scrollBackgroundColorActive:"#f4f4f4",
|
||
strokeStyleNone:"#cfcfcf",
|
||
strokeStyleOver:"#cfcfcf",
|
||
strokeStyleActive:"#ADADAD",
|
||
vscrollStep:10,
|
||
hscrollStep:10,
|
||
wheelScrollLines:1,
|
||
arrowColor:"#ADADAD",
|
||
arrowBorderColor:"#cfcfcf",
|
||
arrowBackgroundColor:"#F1F1F1",
|
||
arrowStableColor:"#ADADAD",
|
||
arrowStableBorderColor:"#cfcfcf",
|
||
arrowStableBackgroundColor:"#F1F1F1",
|
||
arrowOverColor:"#f1f1f1",
|
||
arrowOverBorderColor:"#cfcfcf",
|
||
arrowOverBackgroundColor:"#cfcfcf",
|
||
arrowActiveColor:"#f1f1f1",
|
||
arrowActiveBorderColor:"#ADADAD",
|
||
arrowActiveBackgroundColor:"#ADADAD",
|
||
fadeInFadeOutDelay:20,
|
||
piperColor:"#cfcfcf",
|
||
piperColorHover:"#f1f1f1",
|
||
arrowSizeW: 13,
|
||
arrowSizeH: 13,
|
||
cornerRadius: 0,
|
||
slimScroll: false
|
||
};
|
||
|
||
this.settings = extendSettings( settings, scrollSettings );
|
||
|
||
this.ArrowDrawer = new CArrowDrawer( this.settings );
|
||
|
||
this.mouseUp = false;
|
||
this.mouseDown = false;
|
||
|
||
this.that.mouseover = false;
|
||
|
||
this.that.mouseOverOut = -1;
|
||
|
||
this.scrollerMouseDown = false;
|
||
this.scrollerStatus = ScrollOverType.NONE;
|
||
this.lastScrollerStatus = this.scrollerStatus;
|
||
|
||
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.scrollCoeff = 0;
|
||
|
||
this.scroller = {x:0, y:1, h:0, w:0};
|
||
|
||
this.canvas = null;
|
||
this.context = null;
|
||
|
||
this.eventListeners = [];
|
||
|
||
this.IsRetina = false;
|
||
this.canvasW = 1;
|
||
this.canvasH = 1;
|
||
|
||
this.ScrollOverType1 = -1;
|
||
this.ScrollOverType2 = -1;
|
||
|
||
this.fadeInActive = false;
|
||
this.fadeOutActive = false;
|
||
this.fadeInTimeout = null;
|
||
this.fadeOutTimeout = null;
|
||
this.startColorFadeInStart = _HEXTORGB_(this.settings.scrollerColor).R;
|
||
this.startColorFadeOutStart = _HEXTORGB_(this.settings.scrollerColorOver).R;
|
||
this.startColorFadeInOutStart = -1;
|
||
|
||
if ( window.devicePixelRatio == 2 )
|
||
this.IsRetina = true;
|
||
|
||
this.piperImgVert = [document.createElement( 'canvas' ), document.createElement( 'canvas' )]
|
||
this.piperImgHor = [document.createElement( 'canvas' ), document.createElement( 'canvas' )]
|
||
|
||
this.piperImgVert[0].height = 13;
|
||
this.piperImgVert[1].height = 13;
|
||
this.piperImgVert[0].width = 5;
|
||
this.piperImgVert[1].width = 5;
|
||
|
||
this.piperImgHor[0].width = 13;
|
||
this.piperImgHor[1].width = 13;
|
||
this.piperImgHor[0].height = 5;
|
||
this.piperImgHor[1].height = 5;
|
||
|
||
if(this.settings.slimScroll){
|
||
this.piperImgVert[0].width =
|
||
this.piperImgVert[1].width =
|
||
this.piperImgHor[0].height =
|
||
this.piperImgHor[1].height = 3;
|
||
}
|
||
|
||
var r, g, b, ctx_piperImg, _data, px, k;
|
||
r = _HEXTORGB_( this.settings.piperColor );
|
||
g = r.G;
|
||
b = r.B;
|
||
r = r.R;
|
||
|
||
k = this.piperImgVert[0].width * 4;
|
||
|
||
for ( var index = 0; index < this.piperImgVert.length; index++ ) {
|
||
ctx_piperImg = this.piperImgVert[index].getContext( '2d' );
|
||
_data = ctx_piperImg.createImageData( this.piperImgVert[index].width, this.piperImgVert[index].height );
|
||
px = _data.data;
|
||
|
||
for ( var i = 0; i < this.piperImgVert[index].width * this.piperImgVert[index].height * 4; ) {
|
||
px[i++] = r;
|
||
px[i++] = g;
|
||
px[i++] = b;
|
||
px[i++] = 255;
|
||
i = ( i % k === 0 ) ? i + k : i
|
||
}
|
||
|
||
ctx_piperImg.putImageData( _data, 0, 0 )
|
||
|
||
ctx_piperImg = this.piperImgHor[index].getContext( '2d' );
|
||
|
||
_data = ctx_piperImg.createImageData( this.piperImgHor[index].width, this.piperImgHor[index].height );
|
||
px = _data.data;
|
||
|
||
for ( var i = 0; i < this.piperImgHor[index].width * this.piperImgHor[index].height * 4; ) {
|
||
px[i++] = r;
|
||
px[i++] = g;
|
||
px[i++] = b;
|
||
px[i++] = 255;
|
||
i = ( i % 4 === 0 && i % 52 !== 0 ) ? i + 4 : i
|
||
}
|
||
|
||
ctx_piperImg.putImageData( _data, 0, 0 )
|
||
|
||
r = _HEXTORGB_( this.settings.piperColorHover );
|
||
g = r.G;
|
||
b = r.B;
|
||
r = r.R;
|
||
|
||
}
|
||
|
||
this._init( elemID );
|
||
}
|
||
ScrollObject.prototype = {
|
||
|
||
_init:function ( elemID ) {
|
||
if ( !elemID ) return false;
|
||
|
||
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.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";
|
||
if ( navigator.userAgent.toLowerCase().indexOf( "webkit" ) != -1 ){
|
||
this.canvas.style.webkitUserSelect = "none";
|
||
}
|
||
|
||
this.context = this.canvas.getContext( '2d' );
|
||
if ( !this.IsRetina ){
|
||
this.context.setTransform( 1, 0, 0, 1, 0, 0 );
|
||
}
|
||
else{
|
||
this.context.setTransform( 2, 0, 0, 2, 0, 0 );
|
||
}
|
||
|
||
if ( this.settings.showArrows ){
|
||
this.arrowPosition = this.settings.arrowDim + 2;
|
||
}
|
||
else{
|
||
this.arrowPosition = this.settings.marginScroller;
|
||
}
|
||
|
||
this._setDimension( holder.clientHeight, holder.clientWidth );
|
||
this.maxScrollY = holder.firstElementChild.clientHeight - this.settings.screenH > 0 ? holder.firstElementChild.clientHeight - this.settings.screenH : 0;
|
||
this.maxScrollX = holder.firstElementChild.clientWidth - this.settings.screenW > 0 ? holder.firstElementChild.clientWidth - this.settings.screenW : 0;
|
||
|
||
this.isVerticalScroll = holder.firstElementChild.clientHeight / Math.max( this.canvasH, 1 ) > 1;
|
||
this.isHorizontalScroll = holder.firstElementChild.clientWidth / Math.max( this.canvasW, 1 ) > 1;
|
||
|
||
this._setScrollerHW();
|
||
|
||
this.paneHeight = this.canvasH - this.arrowPosition * 2;
|
||
this.paneWidth = this.canvasW - this.arrowPosition * 2;
|
||
|
||
this.RecalcScroller();
|
||
|
||
this.canvas.onmousemove = this.evt_mousemove;
|
||
this.canvas.onmouseout = this.evt_mouseout;
|
||
this.canvas.onmouseup = this.evt_mouseup;
|
||
this.canvas.onmousedown = this.evt_mousedown;
|
||
this.canvas.onmousewheel = this.evt_mousewheel;
|
||
this.canvas.onmouseover = this.evt_mouseover;
|
||
|
||
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._drawArrow();
|
||
this._draw();
|
||
|
||
return true;
|
||
},
|
||
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;
|
||
}
|
||
|
||
// return relative mouse position
|
||
var mouseX = evt.clientX - left + window.pageXOffset;
|
||
var mouseY = evt.clientY - top + window.pageYOffset;
|
||
return {
|
||
x:mouseX,
|
||
y:mouseY
|
||
};
|
||
},
|
||
RecalcScroller:function ( startpos ) {
|
||
if ( this.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 = 1;
|
||
}
|
||
var percentInViewV;
|
||
|
||
percentInViewV = (this.maxScrollY + this.paneHeight ) / this.paneHeight;
|
||
this.scroller.h = Math.ceil( 1 / percentInViewV * this.verticalTrackHeight );
|
||
|
||
if ( this.scroller.h < this.settings.scrollerMinHeight )
|
||
this.scroller.h = this.settings.scrollerMinHeight;
|
||
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.isHorizontalScroll ) {
|
||
if ( this.settings.showArrows ) {
|
||
this.horizontalTrackWidth = this.canvasW - this.arrowPosition * 2;
|
||
this.scroller.x = this.arrowPosition + 1;
|
||
}
|
||
else {
|
||
this.horizontalTrackWidth = this.canvasW;
|
||
this.scroller.x = 1;
|
||
}
|
||
var percentInViewH;
|
||
percentInViewH = ( this.maxScrollX + this.paneWidth ) / this.paneWidth;
|
||
this.scroller.w = Math.ceil( 1 / percentInViewH * this.horizontalTrackWidth );
|
||
|
||
if ( this.scroller.w < this.settings.scrollerMinWidth )
|
||
this.scroller.w = this.settings.scrollerMinWidth
|
||
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;
|
||
}
|
||
},
|
||
Repos:function ( settings, bIsHorAttack, bIsVerAttack )
|
||
{
|
||
if (bIsVerAttack)
|
||
{
|
||
var _canvasH = settings.screenH;
|
||
if (undefined !== _canvasH && undefined !== settings.screenAddH)
|
||
_canvasH += settings.screenAddH;
|
||
|
||
if (_canvasH == this.canvasH && undefined !== settings.contentH)
|
||
{
|
||
var _maxScrollY = settings.contentH - settings.screenH > 0 ? settings.contentH - settings.screenH : 0;
|
||
if (_maxScrollY == this.maxScrollY)
|
||
return;
|
||
}
|
||
}
|
||
if (bIsHorAttack)
|
||
{
|
||
if (settings.screenW == this.canvasW && undefined !== settings.contentW)
|
||
{
|
||
var _maxScrollX = settings.contentW - settings.screenW > 0 ? settings.contentW - settings.screenW : 0;
|
||
if (_maxScrollX == this.maxScrollX)
|
||
return;
|
||
}
|
||
}
|
||
|
||
var _parentClientW = GetClientWidth( this.canvas.parentNode );
|
||
var _parentClientH = GetClientHeight( this.canvas.parentNode );
|
||
|
||
var _firstChildW = GetClientWidth( this.canvas.parentNode.firstElementChild );
|
||
var _firstChildH = GetClientHeight( this.canvas.parentNode.firstElementChild );
|
||
|
||
this._setDimension( _parentClientH, _parentClientW );
|
||
this.maxScrollY = _firstChildH - settings.screenH > 0 ? _firstChildH - settings.screenH : 0;
|
||
this.maxScrollX = _firstChildW - settings.screenW > 0 ? _firstChildW - settings.screenW : 0;
|
||
|
||
this.isVerticalScroll = _firstChildH / Math.max( this.canvasH, 1 ) > 1 || this.isVerticalScroll || (true === bIsVerAttack);
|
||
this.isHorizontalScroll = _firstChildW / Math.max( this.canvasW, 1 ) > 1 || this.isHorizontalScroll || (true === bIsHorAttack);
|
||
this._setScrollerHW();
|
||
|
||
this.paneHeight = this.canvasH - this.arrowPosition * 2;
|
||
this.paneWidth = this.canvasW - this.arrowPosition * 2;
|
||
this.RecalcScroller();
|
||
if ( this.isVerticalScroll ) {
|
||
this.scrollToY( this.scrollVCurrentY );
|
||
if(this.maxScrollY == 0){
|
||
this.canvas.style.display = "none";
|
||
}
|
||
else{
|
||
this.canvas.style.display = "";
|
||
}
|
||
}
|
||
else if ( this.isHorizontalScroll ) {
|
||
this.scrollToX( this.scrollHCurrentX );
|
||
if(this.maxScrollX == 0){
|
||
this.canvas.style.display = "none";
|
||
}
|
||
else{
|
||
this.canvas.style.display = "";
|
||
}
|
||
}
|
||
|
||
this._drawArrow();
|
||
this._draw();
|
||
},
|
||
Reinit:function ( settings, pos ) {
|
||
this._setDimension( this.canvas.parentNode.clientHeight, this.canvas.parentNode.clientWidth );
|
||
this.maxScrollY = this.canvas.parentNode.firstElementChild.clientHeight - (settings.screenH || this.canvas.parentNode.offsetHeight) > 0 ?
|
||
this.canvas.parentNode.firstElementChild.clientHeight - (settings.screenH || this.canvas.parentNode.offsetHeight) :
|
||
0;
|
||
|
||
this.maxScrollX = this.canvas.parentNode.firstElementChild.clientWidth - (settings.screenH || this.canvas.parentNode.offsetWidth) > 0 ?
|
||
this.canvas.parentNode.firstElementChild.clientWidth - (settings.screenH || this.canvas.parentNode.offsetWidth) :
|
||
0;
|
||
|
||
this.isVerticalScroll = this.canvas.parentNode.firstElementChild.clientHeight / Math.max( this.canvasH, 1 ) > 1 || this.isVerticalScroll;
|
||
this.isHorizontalScroll = this.canvas.parentNode.firstElementChild.clientWidth / Math.max( this.canvasW, 1 ) > 1 || this.isHorizontalScroll;
|
||
this._setScrollerHW();
|
||
|
||
this.paneHeight = this.canvasH - this.arrowPosition * 2;
|
||
this.paneWidth = this.canvasW - this.arrowPosition * 2;
|
||
this.RecalcScroller();
|
||
this.reinit = true;
|
||
if ( this.isVerticalScroll ) {
|
||
pos !== undefined ? this.scrollByY( pos - this.scrollVCurrentY ) : this.scrollToY( this.scrollVCurrentY );
|
||
}
|
||
|
||
if ( this.isHorizontalScroll ) {
|
||
pos !== undefined ? this.scrollByX( pos - this.scrollHCurrentX ) : this.scrollToX( this.scrollHCurrentX );
|
||
}
|
||
this.reinit = false;
|
||
this._drawArrow();
|
||
this._draw();
|
||
},
|
||
_scrollV:function ( that, evt, pos, isTop, isBottom, bIsAttack ) {
|
||
if ( !this.isVerticalScroll ) {
|
||
return;
|
||
}
|
||
|
||
if ( that.scrollVCurrentY !== pos || bIsAttack === true ) {
|
||
that.scrollVCurrentY = pos;
|
||
evt.scrollD = evt.scrollPositionY = that.scrollVCurrentY;
|
||
evt.maxScrollY = that.maxScrollY;
|
||
that._draw();
|
||
that.handleEvents( "onscrollvertical", evt );
|
||
}
|
||
else if ( that.scrollVCurrentY === pos && pos > 0 && !this.reinit && !this.moveble && !this.lock ) {
|
||
evt.pos = pos;
|
||
that.handleEvents( "onscrollVEnd", evt );
|
||
}
|
||
},
|
||
_correctScrollV:function ( that, yPos ) {
|
||
if ( !this.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;
|
||
},
|
||
_correctScrollByYDelta:function ( that, delta ) {
|
||
if ( !this.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;
|
||
},
|
||
_scrollH:function ( that, evt, pos, isTop, isBottom ) {
|
||
if ( !this.isHorizontalScroll ) {
|
||
return;
|
||
}
|
||
if ( that.scrollHCurrentX !== pos ) {
|
||
that.scrollHCurrentX = pos;
|
||
evt.scrollD = evt.scrollPositionX = that.scrollHCurrentX;
|
||
evt.maxScrollX = that.maxScrollX;
|
||
|
||
// that._drawArrow();
|
||
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 );
|
||
}
|
||
|
||
},
|
||
scrollByY:function ( delta, bIsAttack ) {
|
||
if ( !this.isVerticalScroll ) {
|
||
return;
|
||
}
|
||
|
||
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 ( destY < 0 ) {
|
||
destY = 0;
|
||
isTop = true;
|
||
isBottom = false;
|
||
}
|
||
else if ( destY > this.maxScrollY ) {
|
||
// Новое смещение превышает maxScroll, надо вызвать ивент, спрашивающий что делать.
|
||
// Чтобы не создавать новый, использую onscrollVEnd, он все равно больше нигде не используется
|
||
// 50 = max число wheelScrollLine, если она больше, то будет работать неправильно
|
||
for ( var c = 50; destY > this.maxScrollY && c > 0; --c ) {
|
||
this.handleEvents( "onscrollVEnd", {} );
|
||
vend = true;
|
||
}
|
||
if ( destY > this.maxScrollY ) {
|
||
// Обработчик onscrollVEnd решил, что расширение области скрола не нужно, изменяем destY
|
||
destY = this.maxScrollY;
|
||
}
|
||
isTop = false, isBottom = true;
|
||
}
|
||
|
||
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);
|
||
|
||
if ( vend ) {
|
||
this.moveble = true;
|
||
}
|
||
this._scrollV( this, {}, destY, isTop, isBottom, bIsAttack );
|
||
if ( vend ) {
|
||
this.moveble = false;
|
||
}
|
||
},
|
||
scrollToY:function ( destY ) {
|
||
if ( !this.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 );
|
||
},
|
||
scrollByX:function ( delta ) {
|
||
if ( !this.isHorizontalScroll ) {
|
||
return;
|
||
}
|
||
var destX = this.scrollHCurrentX + delta, isTop = false, isBottom = false, hend = false;
|
||
|
||
if ( destX < 0 ) {
|
||
destX = 0;
|
||
isTop = true;
|
||
isBottom = false;
|
||
}
|
||
else if ( destX > this.maxScrollX ) {
|
||
for ( var c = 50; destX > this.maxScrollX && c > 0; --c ) {
|
||
this.handleEvents( "onscrollHEnd", {} );
|
||
hend = true;
|
||
}
|
||
if ( destX > this.maxScrollX ) {
|
||
destX = this.maxScrollX;
|
||
}
|
||
isTop = false, isBottom = true;
|
||
}
|
||
|
||
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);
|
||
|
||
if ( hend ) {
|
||
this.moveble = true;
|
||
}
|
||
this._scrollH( this, {}, destX, isTop, isBottom );
|
||
if ( hend ) {
|
||
this.moveble = true;
|
||
}
|
||
},
|
||
scrollToX:function ( destX ) {
|
||
if ( !this.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 );
|
||
},
|
||
scrollTo:function ( destX, destY ) {
|
||
this.scrollToX( destX );
|
||
this.scrollToY( destY );
|
||
},
|
||
scrollBy:function ( deltaX, deltaY ) {
|
||
this.scrollByX( deltaX );
|
||
this.scrollByY( deltaY );
|
||
},
|
||
|
||
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();
|
||
},
|
||
|
||
_clearContent:function () {
|
||
this.context.clearRect( 0, 0, this.canvasW, this.canvasH );
|
||
},
|
||
_draw:function () {
|
||
// очистку не нужно делать - если потом рисовать рект такой же
|
||
//this._clearContent();
|
||
var piperImgIndex = 0, that = this,
|
||
startColorFadeIn = this.startColorFadeInOutStart < 0 ? this.startColorFadeInStart : this.startColorFadeInOutStart,
|
||
startColorFadeOut = this.startColorFadeInOutStart < 0 ? this.startColorFadeOutStart : this.startColorFadeInOutStart;
|
||
|
||
function fadeIn() {
|
||
|
||
clearTimeout( that.fadeInTimeout );
|
||
that.fadeInTimeout = null;
|
||
clearTimeout( that.fadeOutTimeout );
|
||
that.fadeOutTimeout = null;
|
||
|
||
var x, y, img, ctx_piperImg, _data, px;
|
||
|
||
that.context.beginPath();
|
||
|
||
drawScroller();
|
||
|
||
that.context.fillStyle = "rgb(" + that.startColorFadeInOutStart + "," + that.startColorFadeInOutStart + "," + that.startColorFadeInOutStart + ")";
|
||
that.context.strokeStyle = that.settings.strokeStyleOver;
|
||
|
||
that.context.fill();
|
||
that.context.stroke();
|
||
|
||
startColorFadeIn -= 2;
|
||
|
||
if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
|
||
x = that.scroller.x + (that.settings.slimScroll ? 2 : 3);
|
||
y = (that.scroller.y >> 0) + Math.floor( that.scroller.h / 2 ) - 6;
|
||
|
||
ctx_piperImg = that.piperImgVert[0].getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
|
||
px = _data.data;
|
||
|
||
for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] += 2;
|
||
px[i + 1] += 2;
|
||
px[i + 2] += 2;
|
||
}
|
||
}
|
||
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
|
||
img = that.piperImgVert[0];
|
||
}
|
||
else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
|
||
x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6;
|
||
y = that.scroller.y + (that.settings.slimScroll ? 2 : 3);
|
||
|
||
ctx_piperImg = that.piperImgHor[0].getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
|
||
px = _data.data;
|
||
|
||
for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; i += 4) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] += 2;
|
||
px[i + 1] += 2;
|
||
px[i + 2] += 2;
|
||
}
|
||
}
|
||
|
||
ctx_piperImg.putImageData( _data, 0, 0 )
|
||
|
||
img = that.piperImgHor[0];
|
||
}
|
||
|
||
if ( startColorFadeIn >= _HEXTORGB_(that.settings.scrollerColorOver).R ) {
|
||
that.startColorFadeInOutStart = startColorFadeIn;
|
||
that.fadeInTimeout = setTimeout( fadeIn, that.settings.fadeInFadeOutDelay );
|
||
}
|
||
else {
|
||
clearTimeout( that.fadeInTimeout );
|
||
that.fadeInTimeout = null;
|
||
that.fadeInActive = false;
|
||
that.startColorFadeInOutStart = startColorFadeIn + 2;
|
||
|
||
if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
|
||
|
||
ctx_piperImg = that.piperImgVert[0].getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
|
||
px = _data.data;
|
||
|
||
for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] -= 2;
|
||
px[i + 1] -= 2;
|
||
px[i + 2] -= 2;
|
||
}
|
||
}
|
||
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
|
||
img = that.piperImgVert[0];
|
||
|
||
}
|
||
else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
|
||
|
||
ctx_piperImg = that.piperImgHor[0].getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
|
||
px = _data.data;
|
||
|
||
for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; i += 4) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] -= 2;
|
||
px[i + 1] -= 2;
|
||
px[i + 2] -= 2;
|
||
}
|
||
}
|
||
|
||
ctx_piperImg.putImageData( _data, 0, 0 )
|
||
|
||
img = that.piperImgHor[0];
|
||
|
||
}
|
||
}
|
||
|
||
if(img){
|
||
that.context.drawImage( img, x, y );
|
||
}
|
||
|
||
}
|
||
|
||
function fadeOut() {
|
||
|
||
clearTimeout( that.fadeInTimeout );
|
||
that.fadeInTimeout = null;
|
||
clearTimeout( that.fadeOutTimeout );
|
||
that.fadeOutTimeout = null;
|
||
|
||
var x, y, img, ctx_piperImg, _data, px;
|
||
|
||
that.context.beginPath();
|
||
|
||
drawScroller();
|
||
|
||
that.context.fillStyle = "rgb(" + that.startColorFadeInOutStart + "," + that.startColorFadeInOutStart + "," + that.startColorFadeInOutStart + ")";
|
||
that.context.strokeStyle = that.settings.strokeStyleOver;
|
||
|
||
that.context.fill();
|
||
that.context.stroke();
|
||
|
||
startColorFadeOut += 2;
|
||
|
||
if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
|
||
x = that.scroller.x + (that.settings.slimScroll ? 2 : 3);
|
||
y = (that.scroller.y >> 0) + Math.floor( that.scroller.h / 2 ) - 6;
|
||
|
||
ctx_piperImg = that.piperImgVert[0].getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
|
||
px = _data.data;
|
||
|
||
for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; i += 4) {
|
||
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] -= 2;
|
||
px[i + 1] -= 2;
|
||
px[i + 2] -= 2;
|
||
}
|
||
}
|
||
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
|
||
img = that.piperImgVert[0];
|
||
|
||
}
|
||
else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
|
||
x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6;
|
||
y = that.scroller.y + (that.settings.slimScroll ? 2 : 3);
|
||
|
||
ctx_piperImg = that.piperImgHor[0].getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
|
||
px = _data.data;
|
||
|
||
for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; i+=4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] -= 2;
|
||
px[i + 1] -= 2;
|
||
px[i + 2] -= 2;
|
||
}
|
||
}
|
||
|
||
ctx_piperImg.putImageData( _data, 0, 0 )
|
||
|
||
img = that.piperImgHor[0];
|
||
}
|
||
|
||
if ( startColorFadeOut <= _HEXTORGB_(that.settings.scrollerColor).R ) {
|
||
that.startColorFadeInOutStart = startColorFadeOut;
|
||
that.fadeOutTimeout = setTimeout( fadeOut, that.settings.fadeInFadeOutDelay );
|
||
}
|
||
else {
|
||
clearTimeout( that.fadeOutTimeout );
|
||
that.fadeOutTimeout = null;
|
||
that.startColorFadeInOutStart = startColorFadeOut - 2;
|
||
that.fadeOutActive = false;
|
||
|
||
if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
|
||
|
||
ctx_piperImg = that.piperImgVert[0].getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
|
||
px = _data.data;
|
||
|
||
for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; i+= 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] += 2;
|
||
px[i + 1] += 2;
|
||
px[i + 2] += 2;
|
||
}
|
||
}
|
||
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
|
||
img = that.piperImgVert[0];
|
||
|
||
}
|
||
else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
|
||
x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6;
|
||
y = that.scroller.y + 3;
|
||
|
||
ctx_piperImg = that.piperImgHor[0].getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
|
||
px = _data.data;
|
||
|
||
for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; i+=4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] += 2;
|
||
px[i + 1] += 2;
|
||
px[i + 2] += 2;
|
||
}
|
||
}
|
||
|
||
ctx_piperImg.putImageData( _data, 0, 0 )
|
||
|
||
img = that.piperImgHor[0];
|
||
}
|
||
}
|
||
|
||
if(img){
|
||
that.context.drawImage( img, x, y );
|
||
}
|
||
}
|
||
|
||
function drawScroller() {
|
||
|
||
|
||
that.context.beginPath();
|
||
|
||
if ( that.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.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.scrollerStatus ) {
|
||
|
||
case ScrollOverType.OVER:
|
||
{
|
||
that.context.fillStyle = that.settings.scrollBackgroundColorHover;
|
||
break;
|
||
}
|
||
case ScrollOverType.ACTIVE:
|
||
{
|
||
that.context.fillStyle = that.settings.scrollBackgroundColorActive;
|
||
break;
|
||
}
|
||
case ScrollOverType.NONE:
|
||
default:
|
||
{
|
||
that.context.fillStyle = that.settings.scrollBackgroundColor;
|
||
break;
|
||
}
|
||
|
||
}
|
||
|
||
that.context.fill();
|
||
that.context.beginPath();
|
||
|
||
if ( that.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, _y + 0.5, that.scroller.w - 1, that.scroller.h - 1, that.settings.cornerRadius );
|
||
}
|
||
}
|
||
else if ( that.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.scroller.y - 0.5, that.scroller.w - 1, that.scroller.h - 1, that.settings.cornerRadius );
|
||
}
|
||
}
|
||
}
|
||
|
||
if ( this.fadeInActive && this.lastScrollerStatus == ScrollOverType.OVER && this.scrollerStatus == ScrollOverType.OVER ) {
|
||
return;
|
||
}
|
||
|
||
clearTimeout( this.fadeInTimeout );
|
||
this.fadeInTimeout = null;
|
||
clearTimeout( this.fadeOutTimeout );
|
||
this.fadeOutTimeout = null;
|
||
|
||
this.fadeInActive = false;
|
||
this.fadeOutActive = false;
|
||
|
||
drawScroller();
|
||
|
||
this.context.lineWidth = 1;
|
||
switch ( this.scrollerStatus ) {
|
||
|
||
case ScrollOverType.LAYER:
|
||
case ScrollOverType.OVER:
|
||
{
|
||
if ( this.lastScrollerStatus == ScrollOverType.NONE ) {
|
||
this.lastScrollerStatus = this.scrollerStatus;
|
||
this.startColorFadeInOutStart = this.startColorFadeInOutStart < 0 ? startColorFadeIn : this.startColorFadeInOutStart;
|
||
this.fadeInActive = true;
|
||
fadeIn();
|
||
}
|
||
else{
|
||
this.context.fillStyle = this.settings.scrollerColorOver;
|
||
this.context.strokeStyle = this.settings.strokeStyleOver;
|
||
piperImgIndex = 1;
|
||
}
|
||
break;
|
||
}
|
||
case ScrollOverType.ACTIVE:
|
||
{
|
||
this.context.fillStyle = this.settings.scrollerColorActive;
|
||
this.context.strokeStyle = this.settings.strokeStyleActive;
|
||
piperImgIndex = 1;
|
||
break;
|
||
}
|
||
case ScrollOverType.NONE:
|
||
default:
|
||
{
|
||
if ( this.lastScrollerStatus == ScrollOverType.OVER ) {
|
||
this.lastScrollerStatus = this.scrollerStatus;
|
||
this.startColorFadeInOutStart = this.startColorFadeInOutStart < 0 ? startColorFadeOut : this.startColorFadeInOutStart;
|
||
this.fadeOutActive = true;
|
||
fadeOut();
|
||
}
|
||
else{
|
||
this.context.fillStyle = this.settings.scrollerColor;
|
||
this.context.strokeStyle = this.settings.strokeStyleNone;
|
||
|
||
this.startColorFadeInOutStart = this.startColorFadeInStart = _HEXTORGB_(this.settings.scrollerColor).R;
|
||
this.startColorFadeOutStart = _HEXTORGB_(this.settings.scrollerColorOver).R;
|
||
|
||
piperImgIndex = 0;
|
||
|
||
var r, g, b, ctx_piperImg, _data, px, _len
|
||
r = _HEXTORGB_( this.settings.piperColor );
|
||
g = r.G;
|
||
b = r.B;
|
||
r = r.R;
|
||
|
||
if ( this.isVerticalScroll ) {
|
||
ctx_piperImg = this.piperImgVert[piperImgIndex].getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, this.piperImgVert[piperImgIndex].width, this.piperImgVert[piperImgIndex].height );
|
||
}
|
||
else if ( this.isHorizontalScroll ) {
|
||
ctx_piperImg = this.piperImgHor[piperImgIndex].getContext( '2d' );
|
||
_data = ctx_piperImg.getImageData( 0, 0, this.piperImgHor[piperImgIndex].width, this.piperImgHor[piperImgIndex].height );
|
||
}
|
||
|
||
if( this.isVerticalScroll || this.isHorizontalScroll ){
|
||
|
||
px = _data.data;
|
||
_len = px.length;
|
||
|
||
for ( var i = 0; i < _len; i += 4 ) {
|
||
if ( px[i + 3] == 255 ) {
|
||
px[i] = r;
|
||
px[i + 1] = g;
|
||
px[i + 2] = b;
|
||
}
|
||
}
|
||
|
||
ctx_piperImg.putImageData( _data, 0, 0 );
|
||
|
||
}
|
||
|
||
}
|
||
break;
|
||
}
|
||
|
||
}
|
||
|
||
if ( !this.fadeInActive && !this.fadeOutActive ) {
|
||
this.context.fill();
|
||
this.context.stroke();
|
||
|
||
if ( this.isVerticalScroll && this.maxScrollY != 0 ) {
|
||
this.context.drawImage( this.piperImgVert[piperImgIndex], this.scroller.x + (this.settings.slimScroll ? 2 : 3), (this.scroller.y >> 0) + Math.floor( this.scroller.h / 2 ) - 6 );
|
||
}
|
||
else if ( this.isHorizontalScroll && this.maxScrollX != 0 ) {
|
||
this.context.drawImage( this.piperImgHor[piperImgIndex], (this.scroller.x >> 0) + Math.floor( this.scroller.w / 2 ) - 6, this.scroller.y + (this.settings.slimScroll ? 2 : 3) );
|
||
}
|
||
|
||
}
|
||
|
||
this.lastScrollerStatus = this.scrollerStatus;
|
||
|
||
},
|
||
_drawArrow:function ( type ) {
|
||
if ( this.settings.showArrows ) {
|
||
var w = this.canvasW;
|
||
var h = this.canvasH;
|
||
if ( this.isVerticalScroll ) {
|
||
switch ( type ) {
|
||
case ArrowStatus.upLeftArrowHover_downRightArrowNonActive://upArrow mouse hover, downArrow stable
|
||
if ( ScrollOverType.OVER != this.ScrollOverType1 ) {
|
||
this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_TOP, ScrollOverType.OVER, this.context, w, h);
|
||
this.ScrollOverType1 = ScrollOverType.OVER;
|
||
}
|
||
if ( ScrollOverType.STABLE != this.ScrollOverType2 ) {
|
||
this.ArrowDrawer.drawBottomRightArrow( ScrollArrowType.ARROW_BOTTOM, ScrollOverType.STABLE, this.context, w, h );
|
||
this.ScrollOverType2 = ScrollOverType.STABLE;
|
||
}
|
||
break;
|
||
case ArrowStatus.upLeftArrowActive_downRightArrowNonActive://upArrow mouse down, downArrow stable
|
||
if ( ScrollOverType.ACTIVE != this.ScrollOverType1 ) {
|
||
this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_TOP, ScrollOverType.ACTIVE, this.context, w, h);
|
||
this.ScrollOverType1 = ScrollOverType.ACTIVE;
|
||
}
|
||
if ( ScrollOverType.STABLE != this.ScrollOverType2 ) {
|
||
this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_BOTTOM, ScrollOverType.STABLE, this.context, w, h);
|
||
this.ScrollOverType2 = ScrollOverType.STABLE;
|
||
}
|
||
break;
|
||
case ArrowStatus.upLeftArrowNonActive_downRightArrowHover://upArrow stable, downArrow mouse hover
|
||
if ( ScrollOverType.STABLE != this.ScrollOverType1 ) {
|
||
this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_TOP, ScrollOverType.STABLE, this.context, w, h);
|
||
this.ScrollOverType1 = ScrollOverType.STABLE;
|
||
}
|
||
if ( ScrollOverType.OVER != this.ScrollOverType2 ) {
|
||
this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_BOTTOM, ScrollOverType.OVER, this.context, w, h);
|
||
this.ScrollOverType2 = ScrollOverType.OVER;
|
||
}
|
||
break;
|
||
case ArrowStatus.upLeftArrowNonActive_downRightArrowActive://upArrow stable, downArrow mouse down
|
||
if ( ScrollOverType.STABLE != this.ScrollOverType1 ) {
|
||
this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_TOP, ScrollOverType.STABLE, this.context, w, h);
|
||
this.ScrollOverType1 = ScrollOverType.STABLE;
|
||
}
|
||
if ( ScrollOverType.ACTIVE != this.ScrollOverType2 ) {
|
||
this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_BOTTOM, ScrollOverType.ACTIVE, this.context, w, h);
|
||
this.ScrollOverType2 = ScrollOverType.ACTIVE;
|
||
}
|
||
break;
|
||
case ArrowStatus.arrowHover://upArrow stable, downArrow mouse down
|
||
if ( ScrollOverType.STABLE != this.ScrollOverType1 ) {
|
||
this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_TOP, ScrollOverType.STABLE, this.context, w, h);
|
||
this.ScrollOverType1 = ScrollOverType.STABLE;
|
||
}
|
||
if ( ScrollOverType.STABLE != this.ScrollOverType2 ) {
|
||
this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_BOTTOM, ScrollOverType.STABLE, this.context, w, h);
|
||
this.ScrollOverType2 = ScrollOverType.STABLE;
|
||
}
|
||
break;
|
||
default ://upArrow stable, downArrow stable
|
||
if ( ScrollOverType.NONE != this.ScrollOverType1 ) {
|
||
this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_TOP, ScrollOverType.NONE, this.context, w, h);
|
||
this.ScrollOverType1 = ScrollOverType.NONE;
|
||
}
|
||
if ( ScrollOverType.NONE != this.ScrollOverType2 ) {
|
||
this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_BOTTOM, ScrollOverType.NONE, this.context, w, h);
|
||
this.ScrollOverType2 = ScrollOverType.NONE;
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
if ( this.isHorizontalScroll ) {
|
||
switch ( type ) {
|
||
case ArrowStatus.upLeftArrowHover_downRightArrowNonActive://leftArrow mouse hover, rightArrow stable
|
||
if ( ScrollOverType.OVER != this.ScrollOverType1 ) {
|
||
this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_LEFT, ScrollOverType.OVER, this.context, w, h);
|
||
this.ScrollOverType1 = ScrollOverType.OVER;
|
||
}
|
||
if ( ScrollOverType.STABLE != this.ScrollOverType2 ) {
|
||
this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_RIGHT, ScrollOverType.STABLE, this.context, w, h);
|
||
this.ScrollOverType2 = ScrollOverType.STABLE;
|
||
}
|
||
break;
|
||
case ArrowStatus.upLeftArrowActive_downRightArrowNonActive://leftArrow mouse down, rightArrow stable
|
||
if ( ScrollOverType.ACTIVE != this.ScrollOverType1 ) {
|
||
this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_LEFT, ScrollOverType.ACTIVE, this.context, w, h);
|
||
this.ScrollOverType1 = ScrollOverType.ACTIVE;
|
||
}
|
||
if ( ScrollOverType.STABLE != this.ScrollOverType2 ) {
|
||
// this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_RIGHT, ScrollOverType.STABLE, this.context, w, h );
|
||
this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_RIGHT, ScrollOverType.STABLE, this.context, w, h);
|
||
this.ScrollOverType2 = ScrollOverType.STABLE;
|
||
}
|
||
break;
|
||
case ArrowStatus.upLeftArrowNonActive_downRightArrowHover://leftArrow stable, rightArrow mouse hover
|
||
if ( ScrollOverType.STABLE != this.ScrollOverType1 ) {
|
||
this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_LEFT, ScrollOverType.STABLE, this.context, w, h);
|
||
this.ScrollOverType1 = ScrollOverType.STABLE;
|
||
}
|
||
if ( ScrollOverType.OVER != this.ScrollOverType2 ) {
|
||
this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_RIGHT, ScrollOverType.OVER, this.context, w, h);
|
||
this.ScrollOverType2 = ScrollOverType.OVER;
|
||
}
|
||
break;
|
||
case ArrowStatus.upLeftArrowNonActive_downRightArrowActive://leftArrow stable, rightArrow mouse down
|
||
if ( ScrollOverType.STABLE != this.ScrollOverType1 ) {
|
||
this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_LEFT, ScrollOverType.STABLE, this.context, w, h);
|
||
this.ScrollOverType1 = ScrollOverType.STABLE;
|
||
}
|
||
if ( ScrollOverType.ACTIVE != this.ScrollOverType2 ) {
|
||
this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_RIGHT, ScrollOverType.ACTIVE, this.context, w, h);
|
||
this.ScrollOverType2 = ScrollOverType.ACTIVE;
|
||
}
|
||
break;
|
||
case ArrowStatus.arrowHover://upArrow stable, downArrow mouse down
|
||
if ( ScrollOverType.STABLE != this.ScrollOverType1 ) {
|
||
this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_LEFT, ScrollOverType.STABLE, this.context, w, h);
|
||
this.ScrollOverType1 = ScrollOverType.STABLE;
|
||
}
|
||
if ( ScrollOverType.STABLE != this.ScrollOverType2 ) {
|
||
this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_RIGHT, ScrollOverType.STABLE, this.context, w, h);
|
||
this.ScrollOverType2 = ScrollOverType.STABLE;
|
||
}
|
||
break;
|
||
default ://leftArrow stable, rightArrow stable
|
||
if ( ScrollOverType.NONE != this.ScrollOverType1 ) {
|
||
this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_LEFT, ScrollOverType.NONE, this.context, w, h);
|
||
this.ScrollOverType1 = ScrollOverType.NONE;
|
||
}
|
||
if ( ScrollOverType.NONE != this.ScrollOverType2 ) {
|
||
this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_RIGHT, ScrollOverType.NONE, this.context, w, h);
|
||
this.ScrollOverType2 = ScrollOverType.NONE;
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
_setDimension:function ( h, w ) {
|
||
|
||
if ( w == this.canvasW && h == this.canvasH )
|
||
return;
|
||
|
||
this.ScrollOverType1 = -1;
|
||
this.ScrollOverType2 = -1;
|
||
|
||
this.canvasW = w;
|
||
this.canvasH = h;
|
||
|
||
if ( !this.IsRetina ) {
|
||
this.canvas.height = h;
|
||
this.canvas.width = w;
|
||
|
||
this.context.setTransform( 1, 0, 0, 1, 0, 0 );
|
||
}
|
||
else {
|
||
this.canvas.height = h << 1;
|
||
this.canvas.width = w << 1;
|
||
|
||
this.context.setTransform( 2, 0, 0, 2, 0, 0 );
|
||
}
|
||
},
|
||
_setScrollerHW:function () {
|
||
if ( this.isVerticalScroll ) {
|
||
this.scroller.x = 1;//0;
|
||
this.scroller.w = this.canvasW - 1;
|
||
if ( this.settings.showArrows )
|
||
this.ArrowDrawer.InitSize( this.settings.arrowSizeW, this.settings.arrowSizeH, this.IsRetina );
|
||
}
|
||
else if ( this.isHorizontalScroll ) {
|
||
this.scroller.y = 1;//0;
|
||
this.scroller.h = this.canvasH - 1;
|
||
if ( this.settings.showArrows )
|
||
this.ArrowDrawer.InitSize( this.settings.arrowSizeH, this.settings.arrowSizeW, this.IsRetina );
|
||
}
|
||
},
|
||
_MouseHoverOnScroller:function ( mp ) {
|
||
if ( mp.x >= this.scroller.x && mp.x <= this.scroller.x + this.scroller.w &&
|
||
mp.y >= this.scroller.y && mp.y <= this.scroller.y + this.scroller.h ) {
|
||
return true;
|
||
}
|
||
else {
|
||
return false;
|
||
}
|
||
},
|
||
_MouseHoverOnArrowUp:function ( mp ) {
|
||
if ( this.isVerticalScroll ) {
|
||
if (
|
||
mp.x >= 0 &&
|
||
mp.x <= this.canvasW &&
|
||
mp.y >= 0 &&
|
||
mp.y <= this.settings.arrowDim
|
||
) {
|
||
return true;
|
||
}
|
||
else return false;
|
||
}
|
||
if ( this.isHorizontalScroll ) {
|
||
if (
|
||
mp.x >= 0 &&
|
||
mp.x <= this.settings.arrowDim &&
|
||
mp.y >= 0 &&
|
||
mp.y <= this.canvasH
|
||
) {
|
||
return true;
|
||
}
|
||
else return false;
|
||
}
|
||
},
|
||
_MouseHoverOnArrowDown:function ( mp ) {
|
||
if ( this.isVerticalScroll ) {
|
||
if (
|
||
mp.x >= 0 &&
|
||
mp.x <= this.canvasW &&
|
||
mp.y >= this.canvasH - this.settings.arrowDim &&
|
||
mp.y <= this.canvasH
|
||
) {
|
||
return true;
|
||
}
|
||
else return false;
|
||
}
|
||
if ( this.isHorizontalScroll ) {
|
||
if (
|
||
mp.x >= this.canvasW - this.settings.arrowDim &&
|
||
mp.x <= this.canvasW &&
|
||
mp.y >= 0 &&
|
||
mp.y <= this.canvasH
|
||
) {
|
||
return true;
|
||
}
|
||
else return false;
|
||
}
|
||
},
|
||
|
||
_arrowDownMouseDown:function () {
|
||
var that = this, scrollTimeout, isFirst = true,
|
||
doScroll = function () {
|
||
if ( that.isVerticalScroll )
|
||
that.scrollByY( that.settings.vscrollStep );
|
||
else if ( that.isHorizontalScroll )
|
||
that.scrollByX( that.settings.hscrollStep );
|
||
that._drawArrow( ArrowStatus.upLeftArrowNonActive_downRightArrowActive );
|
||
scrollTimeout = setTimeout( doScroll, isFirst ? that.settings.initialDelay : that.settings.arrowRepeatFreq );
|
||
isFirst = false;
|
||
};
|
||
doScroll();
|
||
this.bind( "mouseup.main mouseout", function () {
|
||
scrollTimeout && clearTimeout( scrollTimeout );
|
||
scrollTimeout = null;
|
||
} );
|
||
},
|
||
_arrowUpMouseDown:function () {
|
||
var that = this, scrollTimeout, isFirst = true,
|
||
doScroll = function () {
|
||
if ( that.isVerticalScroll )
|
||
that.scrollByY( -that.settings.vscrollStep );
|
||
else if ( that.isHorizontalScroll )
|
||
that.scrollByX( -that.settings.hscrollStep );
|
||
that._drawArrow( ArrowStatus.upLeftArrowActive_downRightArrowNonActive );
|
||
scrollTimeout = setTimeout( doScroll, isFirst ? that.settings.initialDelay : that.settings.arrowRepeatFreq );
|
||
isFirst = false;
|
||
};
|
||
doScroll();
|
||
this.bind( "mouseup.main mouseout", function () {
|
||
scrollTimeout && clearTimeout( scrollTimeout );
|
||
scrollTimeout = null;
|
||
} )
|
||
},
|
||
|
||
getCurScrolledX:function () {
|
||
return this.scrollHCurrentX;
|
||
},
|
||
getCurScrolledY:function () {
|
||
return this.scrollVCurrentY;
|
||
},
|
||
getMaxScrolledY:function () {
|
||
return this.maxScrollY;
|
||
},
|
||
getMaxScrolledX:function () {
|
||
return this.maxScrollX;
|
||
},
|
||
getIsLockedMouse:function () {
|
||
return (this.that.mouseDownArrow || this.that.mouseDown);
|
||
},
|
||
/************************************************************************/
|
||
/*events*/
|
||
evt_mousemove:function ( e ) {
|
||
|
||
var arrowStat = ArrowStatus.arrowHover;
|
||
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 downHover = this.that._MouseHoverOnArrowDown( mousePos ),
|
||
upHover = this.that._MouseHoverOnArrowUp( mousePos ),
|
||
scrollerHover = this.that._MouseHoverOnScroller( mousePos );
|
||
|
||
if ( scrollerHover ) {
|
||
this.that.scrollerStatus = ScrollOverType.OVER;
|
||
arrowStat = ArrowStatus.arrowHover;
|
||
}
|
||
else if ( this.that.settings.showArrows && (downHover || upHover) ) {
|
||
this.that.scrollerStatus = ScrollOverType.OVER;
|
||
if ( !this.that.mouseDownArrow ) {
|
||
if ( upHover ) {
|
||
arrowStat = ArrowStatus.upLeftArrowHover_downRightArrowNonActive;
|
||
}
|
||
else if ( downHover ) {
|
||
arrowStat = ArrowStatus.upLeftArrowNonActive_downRightArrowHover
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
if ( this.that.mouseover ) {
|
||
arrowStat = ArrowStatus.arrowHover;
|
||
}
|
||
this.that.scrollerStatus = ScrollOverType.OVER;
|
||
}
|
||
if ( this.that.mouseDown && this.that.scrollerMouseDown ) {
|
||
this.that.moveble = true;
|
||
}
|
||
else {
|
||
this.that.moveble = false;
|
||
}
|
||
|
||
if ( this.that.isVerticalScroll ) {
|
||
if ( this.that.moveble && this.that.scrollerMouseDown ) {
|
||
var isTop = false, isBottom = false;
|
||
this.that.scrollerStatus = ScrollOverType.ACTIVE;
|
||
var _dlt = this.that.EndMousePosition.y - this.that.StartMousePosition.y;
|
||
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;
|
||
_dlt = 0;
|
||
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;
|
||
_dlt = 0;
|
||
this.that.scroller.y = this.that.canvasH - this.that.arrowPosition - this.that.scroller.h;
|
||
}
|
||
else {
|
||
if ( (_dlt > 0 && this.that.scroller.y + _dlt + this.that.scroller.h <= this.that.canvasH - this.that.arrowPosition ) ||
|
||
(_dlt < 0 && this.that.scroller.y + _dlt >= this.that.arrowPosition) ) {
|
||
this.that.scroller.y += _dlt;
|
||
}
|
||
}
|
||
|
||
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.moveble = false;
|
||
this.that.StartMousePosition.x = this.that.EndMousePosition.x;
|
||
this.that.StartMousePosition.y = this.that.EndMousePosition.y;
|
||
}
|
||
}
|
||
else if ( this.that.isHorizontalScroll ) {
|
||
if ( this.that.moveble && this.that.scrollerMouseDown ) {
|
||
|
||
var isTop = false, isBottom = false;
|
||
this.that.scrollerStatus = ScrollOverType.ACTIVE;
|
||
var _dlt = this.that.EndMousePosition.x - this.that.StartMousePosition.x;
|
||
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;
|
||
_dlt = 0;
|
||
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;
|
||
_dlt = 0;
|
||
this.that.scroller.x = this.that.canvasW - this.that.arrowPosition - this.that.scroller.w;
|
||
}
|
||
else {
|
||
if ( (_dlt > 0 && this.that.scroller.x + _dlt + this.that.scroller.w <= this.that.canvasW - this.that.arrowPosition ) ||
|
||
(_dlt < 0 && this.that.scroller.x + _dlt >= this.that.arrowPosition) )
|
||
this.that.scroller.x += _dlt;
|
||
}
|
||
var destX = (this.that.scroller.x - this.that.arrowPosition) * this.that.scrollCoeff
|
||
|
||
this.that._scrollH( this.that, evt, destX, isTop, isBottom );
|
||
this.that.moveble = false;
|
||
|
||
this.that.StartMousePosition.x = this.that.EndMousePosition.x;
|
||
this.that.StartMousePosition.y = this.that.EndMousePosition.y;
|
||
}
|
||
}
|
||
|
||
if ( !this.that.mouseDownArrow ) {
|
||
this.that._drawArrow( arrowStat );
|
||
}
|
||
if ( this.that.lastScrollerStatus != this.that.scrollerStatus ) {
|
||
this.that._draw();
|
||
}
|
||
|
||
},
|
||
evt_mouseout:function ( e ) {
|
||
|
||
var evt = e || window.event;
|
||
|
||
if ( this.that.settings.showArrows ) {
|
||
this.that.mouseDownArrow = false;
|
||
this.that.handleEvents( "onmouseout", evt );
|
||
}
|
||
|
||
if ( !this.that.moveble ) {
|
||
this.that.scrollerStatus = ScrollOverType.NONE;
|
||
this.that._drawArrow();
|
||
}
|
||
|
||
if ( this.that.lastScrollerStatus != this.that.scrollerStatus ) {
|
||
this.that._draw();
|
||
}
|
||
|
||
},
|
||
evt_mouseover:function ( e ) {
|
||
|
||
this.that.mouseover = true;
|
||
|
||
},
|
||
evt_mouseup:function ( e ) {
|
||
var evt = e || window.event;
|
||
|
||
if ( evt.preventDefault )
|
||
evt.preventDefault();
|
||
else
|
||
evt.returnValue = false;
|
||
|
||
var mousePos = this.that.getMousePosition( evt );
|
||
this.that.scrollTimeout && clearTimeout( this.that.scrollTimeout );
|
||
this.that.scrollTimeout = null;
|
||
if ( !this.that.scrollerMouseDown ) {
|
||
if ( this.that.settings.showArrows && this.that._MouseHoverOnArrowDown( mousePos ) ) {
|
||
this.that.handleEvents( "onmouseup", evt );
|
||
this.that._drawArrow( ArrowStatus.upLeftArrowNonActive_downRightArrowHover );
|
||
}
|
||
else if ( this.that.settings.showArrows && this.that._MouseHoverOnArrowUp( mousePos ) ) {
|
||
this.that.handleEvents( "onmouseup", evt );
|
||
this.that._drawArrow( ArrowStatus.upLeftArrowHover_downRightArrowNonActive );
|
||
}
|
||
this.that.mouseDownArrow = false;
|
||
}
|
||
else {
|
||
this.that.mouseDown = false;
|
||
this.that.mouseUp = true;
|
||
this.that.scrollerMouseDown = false;
|
||
this.that.mouseDownArrow = false;
|
||
if ( this.that._MouseHoverOnScroller( mousePos ) ) {
|
||
this.that.scrollerStatus = ScrollOverType.OVER;
|
||
}
|
||
else {
|
||
this.that.scrollerStatus = ScrollOverType.NONE;
|
||
}
|
||
this.that._drawArrow();
|
||
this.that._draw();
|
||
}
|
||
|
||
//for unlock global mouse event
|
||
if ( this.that.onLockMouse && this.that.offLockMouse ) {
|
||
this.that.offLockMouse( evt );
|
||
}
|
||
this.that.handleEvents( "onmouseup", evt );
|
||
},
|
||
evt_mousedown:function ( e ) {
|
||
var evt = e || window.event;
|
||
|
||
// если сделать превент дефолт - перестанет приходить mousemove от window
|
||
/*
|
||
if (evt.preventDefault)
|
||
evt.preventDefault();
|
||
else
|
||
evt.returnValue = false;
|
||
*/
|
||
|
||
var mousePos = this.that.getMousePosition( evt ),
|
||
downHover = this.that._MouseHoverOnArrowDown( mousePos ),
|
||
upHover = this.that._MouseHoverOnArrowUp( mousePos );
|
||
|
||
if ( this.that.settings.showArrows && downHover ) {
|
||
this.that.mouseDownArrow = true;
|
||
this.that._arrowDownMouseDown();
|
||
}
|
||
else if ( this.that.settings.showArrows && upHover ) {
|
||
this.that.mouseDownArrow = true;
|
||
this.that._arrowUpMouseDown();
|
||
}
|
||
else {
|
||
this.that.mouseDown = true;
|
||
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.scrollerStatus = ScrollOverType.ACTIVE;
|
||
this.that._draw();
|
||
}
|
||
else {
|
||
if ( this.that.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;
|
||
_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 );
|
||
}
|
||
if ( this.that.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 );
|
||
}
|
||
}
|
||
}
|
||
},
|
||
evt_mousewheel:function ( e ) {
|
||
var evt = e || window.event;
|
||
/* if ( evt.preventDefault )
|
||
evt.preventDefault();
|
||
else
|
||
evt.returnValue = false;*/
|
||
|
||
var delta = 1;
|
||
if ( this.that.isHorizontalScroll ) return;
|
||
var mp = {}, isTop = false, isBottom = false;
|
||
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;
|
||
isTop = true, isBottom = false;
|
||
}
|
||
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;
|
||
isTop = false, isBottom = true;
|
||
}
|
||
this.that.scrollByY( delta )
|
||
},
|
||
evt_click:function ( e ) {
|
||
var evt = e || windows.event;
|
||
var mousePos = this.that.getMousePosition( evt );
|
||
if ( this.that.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.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*/
|
||
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
|
||
} );
|
||
}
|
||
},
|
||
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;
|
||
}
|
||
}
|
||
},
|
||
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, followed
|
||
* by layer events
|
||
*/
|
||
handle( that );
|
||
}
|
||
}; |