Skip to content

S
sdkjs
Commit fb10794c authored by Dmitry.Shahtanov's avatar Dmitry.Shahtanov Committed by Alexander.Trofimov
Browse files
Options

новый скролл 

git-svn-id: svn://192.168.3.15/activex/AVS/Sources/TeamlabOffice/trunk/OfficeWeb@57984 954022d7-b5bf-4e40-9824-e11837661b57
parent 681fc30d
Hide whitespace changes
Inline Side-by-side
Showing with 492 additions and 297 deletions
Common/scroll.js
View file @ fb10794c
...@@ -19,7 +19,8 @@ var ArrowStatus = { ...@@ -19,7 +19,8 @@ var ArrowStatus = {
upLeftArrowActive_downRightArrowNonActive:1, upLeftArrowActive_downRightArrowNonActive:1,
upLeftArrowNonActive_downRightArrowHover:2, upLeftArrowNonActive_downRightArrowHover:2,
upLeftArrowNonActive_downRightArrowActive:3, upLeftArrowNonActive_downRightArrowActive:3,
upLeftArrowNonActive_downRightArrowNonActive:4 upLeftArrowNonActive_downRightArrowNonActive:4,
arrowHover:5
} }
function GetClientWidth( elem ) { function GetClientWidth( elem ) {
...@@ -53,22 +54,35 @@ function GetClientHeight( elem ) { ...@@ -53,22 +54,35 @@ function GetClientHeight( elem ) {
return 0; return 0;
} }
function CArrowDrawer(settings) { function CArrowDrawer( settings ) {
// размер квадратика в пикселах // размер квадратика в пикселах
this.Size = 16; this.Size = 16;
this.IsRetina = false; this.IsRetina = false;
// просто рисовать - неправильно. рисуется с антиалиазингом - и получается некрасиво // просто рисовать - неправильно. рисуется с антиалиазингом - и получается некрасиво
this.ColorGradStart = {R:69, G:70, B:71}; /*this.ColorGradStart = {R:69, G:70, B:71};
this.ColorGradEnd = {R:116, G:117, B:118}; this.ColorGradEnd = {R:116, G:117, B:118};*/
this.ColorBorder = settings && settings.strokeStyle ? settings.strokeStyle : "#BBBEC2"; this.ColorGradStart = [];
this.ColorBackNone = settings && settings.scrollBackgroundColor ? settings.scrollBackgroundColor : "#F4F4F4"; this.ColorGradEnd = [];
this.ColorBackOver = settings && settings.scrollerColorOver ? settings.scrollerColorOver : "#D8DADC";
this.ColorBackActive = settings && settings.scrollerColorActive ? settings.scrollerColorActive : "#7A7A7A"; this.ColorGradStart[ScrollOverType.NONE] = {R:203, G:203, B:203};
this.ColorGradEnd[ScrollOverType.NONE] = {R:203, G:203, B:203};
this.ColorGradStart[ScrollOverType.OVER] = {R:144, G:144, B:144};
this.ColorGradEnd[ScrollOverType.OVER] = {R:144, G:144, B:144};
this.ColorGradStart[ScrollOverType.ACTIVE] = {R:93, G:93, B:93};
this.ColorGradEnd[ScrollOverType.ACTIVE] = {R:93, G:93, B:93};
this.ColorBorder = settings && settings.strokeStyle ? settings.strokeStyle : "#BBBEC2";
this.ColorBackNone = settings && settings.scrollBackgroundColor ? settings.scrollBackgroundColor : "#F4F4F4";
this.ColorBackOver = settings && settings.scrollBackgroundColorHover ? settings.scrollBackgroundColorHover : "#D8DADC";
this.ColorBackActive = settings && settings.scrollBackgroundColorHover ? settings.scrollBackgroundColorHover : "#7A7A7A";
// вот такие мега настройки для кастомизации) // вот такие мега настройки для кастомизации)
this.IsDrawBorderInNoneMode = false; this.IsDrawBorderInNoneMode = false;
this.IsDrawBorders = false
// имя - направление стрелки // имя - направление стрелки
this.ImageLeft = null; this.ImageLeft = null;
...@@ -76,7 +90,7 @@ function CArrowDrawer(settings) { ...@@ -76,7 +90,7 @@ function CArrowDrawer(settings) {
this.ImageRight = null; this.ImageRight = null;
this.ImageBottom = null; this.ImageBottom = null;
this.IsNeedInvertOnActive = settings && settings.isNeedInvertOnActive ? settings.isNeedInvertOnActive : false; this.IsNeedInvertOnActive = settings && settings.isNeedInvertOnActive ? settings.isNeedInvertOnActive : false;
this.InitSize = function ( size, is_retina ) { this.InitSize = function ( size, is_retina ) {
if ( size == this.Size && is_retina == this.IsRetina && null != this.ImageLeft ) if ( size == this.Size && is_retina == this.IsRetina && null != this.ImageLeft )
...@@ -88,133 +102,158 @@ function CArrowDrawer(settings) { ...@@ -88,133 +102,158 @@ function CArrowDrawer(settings) {
if ( this.IsRetina ) if ( this.IsRetina )
this.Size <<= 1; this.Size <<= 1;
this.ImageLeft = document.createElement( 'canvas' ); this.ImageLeft = [document.createElement( 'canvas' ),document.createElement( 'canvas' ),document.createElement( 'canvas' )];
this.ImageTop = document.createElement( 'canvas' ); this.ImageTop = [document.createElement( 'canvas' ),document.createElement( 'canvas' ),document.createElement( 'canvas' )];
this.ImageRight = document.createElement( 'canvas' ); this.ImageRight = [document.createElement( 'canvas' ),document.createElement( 'canvas' ),document.createElement( 'canvas' )];
this.ImageBottom = document.createElement( 'canvas' ); this.ImageBottom = [document.createElement( 'canvas' ),document.createElement( 'canvas' ),document.createElement( 'canvas' )];
this.ImageLeft.width = this.Size; this.ImageLeft[ScrollOverType.NONE].width = this.ImageLeft[ScrollOverType.NONE].height = this.Size;
this.ImageLeft.height = this.Size; this.ImageLeft[ScrollOverType.OVER].width = this.ImageLeft[ScrollOverType.OVER].height = this.Size;
this.ImageTop.width = this.Size; this.ImageLeft[ScrollOverType.ACTIVE].width = this.ImageLeft[ScrollOverType.ACTIVE].height = this.Size;
this.ImageTop.height = this.Size;
this.ImageRight.width = this.Size; this.ImageTop[ScrollOverType.NONE].width = this.Size;
this.ImageRight.height = this.Size; this.ImageTop[ScrollOverType.NONE].height = this.Size;
this.ImageBottom.width = this.Size; this.ImageTop[ScrollOverType.OVER].width = this.Size;
this.ImageBottom.height = this.Size; this.ImageTop[ScrollOverType.OVER].height = this.Size;
this.ImageTop[ScrollOverType.ACTIVE].width = this.Size;
var ctx_l = this.ImageLeft.getContext( '2d' ); this.ImageTop[ScrollOverType.ACTIVE].height = this.Size;
var ctx_t = this.ImageTop.getContext( '2d' );
var ctx_r = this.ImageRight.getContext( '2d' ); this.ImageRight[ScrollOverType.NONE].width = this.ImageRight[ScrollOverType.NONE].height = this.Size;
var ctx_b = this.ImageBottom.getContext( '2d' ); this.ImageRight[ScrollOverType.OVER].width = this.ImageRight[ScrollOverType.OVER].height = this.Size;
this.ImageRight[ScrollOverType.ACTIVE].width = this.ImageRight[ScrollOverType.ACTIVE].height = this.Size;
var len = 5;
if ( this.Size < 5 ) this.ImageBottom[ScrollOverType.NONE].width = this.ImageBottom[ScrollOverType.NONE].height = this.Size;
this.ImageBottom[ScrollOverType.OVER].width = this.ImageBottom[ScrollOverType.OVER].height = this.Size;
this.ImageBottom[ScrollOverType.ACTIVE].width = this.ImageBottom[ScrollOverType.ACTIVE].height = this.Size;
var len = 6;
if ( this.Size < 6 )
return; return;
else (this.Size > 12) // else (this.Size > 12)
len = this.Size - 8; // len = this.Size - 8;
// теперь делаем нечетную длину // теперь делаем нечетную длину
if ( 0 == (len & 1) ) if ( 0 == (len & 1) )
len += 1; len += 1;
var countPart = (len + 1) >> 1; var countPart = (len + 1) >> 1,
var plusColor = (this.ColorGradEnd.R - this.ColorGradStart.R) / countPart; plusColor, _data, px,
_x = (this.Size - len) >> 1,
var _data = ctx_l.createImageData( this.Size, this.Size ); _y = this.Size - ((this.Size - countPart) >> 1),
var px = _data.data; _radx = _x + (len >> 1) + 0.5,
_rady = _y - (countPart >> 1) - 0.5,
var _x = (this.Size - len) >> 1; ctx_lInactive, ctx_tInactive, ctx_rInactive, ctx_bInactive;
var _y = this.Size - ((this.Size - countPart) >> 1) - 1;
var r, g, b;
for( var index = 0; index < 3; 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.Size, this.Size );
px = _data.data;
while ( _len > 0 ) {
var ind = 4 * this.Size * __y + 4 * __x;
for ( var i = 0; i < _len; i++ ) {
px[ind++] = r;
px[ind++] = g;
px[ind++] = b;
px[ind++] = 255;
}
var _radx = _x + (len >> 1) + 0.5; r = (r + plusColor) >> 0;
var _rady = _y - (countPart >> 1) - 0.5; g = (g + plusColor) >> 0;
b = (b + plusColor) >> 0;
var r = this.ColorGradStart.R; __x += 1;
var g = this.ColorGradStart.G; __y -= 1;
var b = this.ColorGradStart.B; _len -= 2;
while ( len > 0 ) {
var ind = 4 * this.Size * _y + 4 * _x;
for ( var i = 0; i < len; i++ ) {
px[ind++] = r;
px[ind++] = g;
px[ind++] = b;
px[ind++] = 255;
} }
r = (r + plusColor) >> 0; ctx_tInactive.putImageData( _data, 0, 0 );
g = (g + plusColor) >> 0;
b = (b + plusColor) >> 0;
_x += 1;
_y -= 1;
len -= 2;
}
ctx_t.putImageData( _data, 0, 0 ); ctx_lInactive.translate( _radx , _rady );
ctx_lInactive.rotate( -Math.PI / 2 );
ctx_lInactive.translate( -_radx, -_rady );
ctx_lInactive.drawImage( this.ImageTop[index], 0, 0 );
ctx_l.translate( _radx - 1, _rady ); ctx_rInactive.translate( _radx + 1, _rady );
ctx_l.rotate( -Math.PI / 2 ); ctx_rInactive.rotate( Math.PI / 2 );
ctx_l.translate( -_radx, -_rady ); ctx_rInactive.translate( -_radx, -_rady );
ctx_l.drawImage( this.ImageTop, 0, 0 ); ctx_rInactive.drawImage( this.ImageTop[index], 0, 0 );
ctx_r.translate( _radx + 2, _rady ); ctx_bInactive.translate( _radx, _rady + 1 );
ctx_r.rotate( Math.PI / 2 ); ctx_bInactive.rotate( Math.PI );
ctx_r.translate( -_radx, -_rady ); ctx_bInactive.translate( -_radx, -_rady );
ctx_r.drawImage( this.ImageTop, 0, 0 ); ctx_bInactive.drawImage( this.ImageTop[index], 0, 0 );
ctx_b.translate( _radx, _rady + 2 ); }
ctx_b.rotate( Math.PI );
ctx_b.translate( -_radx, -_rady );
ctx_b.drawImage( this.ImageTop, 0, 0 );
if ( this.IsRetina ) if ( this.IsRetina )
this.Size >>= 1; this.Size >>= 1;
} }
this.drawArrow = function ( type, mode, ctx, w, h ) { this.drawArrow = function ( type, mode, ctx, w, h ) {
var img = this.ImageTop;
var x = 0; if( mode === null || mode === undefined ){
var y = 0; mode = ScrollOverType.NONE;
var is_vertical = true; }
var img = this.ImageTop[mode],
x = 0, y = 0, is_vertical = true;
switch ( type ) { switch ( type ) {
case ScrollArrowType.ARROW_LEFT: case ScrollArrowType.ARROW_LEFT:
{ {
x=-1;
is_vertical = false; is_vertical = false;
img = this.ImageLeft; img = this.ImageLeft[mode];
break; break;
} }
case ScrollArrowType.ARROW_RIGHT: case ScrollArrowType.ARROW_RIGHT:
{ {
is_vertical = false; is_vertical = false;
x = w - this.Size; x = w - this.Size - 2;
img = this.ImageRight; img = this.ImageRight[mode];
break; break;
} }
case ScrollArrowType.ARROW_BOTTOM: case ScrollArrowType.ARROW_BOTTOM:
{ {
y = h - this.Size; y = h - this.Size - 2;
img = this.ImageBottom; img = this.ImageBottom[mode];
break; break;
} }
default: default:
y=-1;
break; break;
} }
ctx.lineWidth = 1; ctx.lineWidth = 1;
var strokeW = is_vertical ? this.Size - 2 : this.Size - 1; var strokeW = is_vertical ? this.Size - 1 : this.Size;
var strokeH = is_vertical ? this.Size - 1 : this.Size - 2; var strokeH = is_vertical ? this.Size : this.Size - 1;
ctx.fillStyle = this.ColorBackNone; ctx.fillStyle = this.ColorBackNone;
ctx.fillRect( x, y, this.Size, this.Size ); ctx.fillRect( x+1, y+1, this.Size, this.Size );
ctx.beginPath(); ctx.beginPath();
switch ( mode ) { switch ( mode ) {
case ScrollOverType.NONE: case ScrollOverType.NONE:
{ {
ctx.drawImage( img, x, y, this.Size, this.Size ); ctx.drawImage( img, x+0.5, y+0.5, this.Size, this.Size );
if ( this.IsDrawBorderInNoneMode ) { if ( this.IsDrawBorders ) {
ctx.strokeStyle = this.ColorBorder; ctx.strokeStyle = this.ColorBorder;
ctx.rect( x + 0.5, y + 0.5, strokeW, strokeH ); ctx.rect( x + 1.5, y + 1.5, strokeW, strokeH );
ctx.stroke(); ctx.stroke();
} }
break; break;
...@@ -222,63 +261,61 @@ function CArrowDrawer(settings) { ...@@ -222,63 +261,61 @@ function CArrowDrawer(settings) {
case ScrollOverType.OVER: case ScrollOverType.OVER:
{ {
ctx.fillStyle = this.ColorBackOver; ctx.fillStyle = this.ColorBackOver;
ctx.rect( x + 0.5, y + 0.5, strokeW, strokeH ); ctx.rect( x + 1, y + 1, strokeW, strokeH );
ctx.fill(); ctx.fill();
ctx.drawImage( img, x, y, this.Size, this.Size ); ctx.drawImage( img, x+0.5, y+0.5, this.Size, this.Size );
ctx.strokeStyle = this.ColorBorder; if( this.IsDrawBorders ){
ctx.rect( x + 0.5, y + 0.5, strokeW, strokeH ); ctx.strokeStyle = this.ColorBorder;
ctx.stroke(); ctx.rect( x + 0.5, y + 0.5, strokeW, strokeH );
ctx.stroke();
}
break; break;
} }
case ScrollOverType.ACTIVE: case ScrollOverType.ACTIVE:
{ {
ctx.fillStyle = this.ColorBackActive; ctx.fillStyle = this.ColorBackActive;
ctx.rect( x + 0.5, y + 0.5, strokeW, strokeH ); ctx.rect( x + 1, y + 1, strokeW, strokeH );
ctx.fill(); ctx.fill();
if (!this.IsNeedInvertOnActive) if ( !this.IsNeedInvertOnActive ) {
{ ctx.drawImage( img, x+0.5, y+0.5, this.Size, this.Size );
ctx.drawImage( img, x, y, this.Size, this.Size );
} }
else else {
{
// slow method // slow method
var _ctx = img.getContext("2d"); var _ctx = img.getContext( "2d" );
var _data = _ctx.getImageData(0, 0, this.Size, this.Size); var _data = _ctx.getImageData( 0, 0, this.Size, this.Size );
var _data2 = _ctx.getImageData(0, 0, this.Size, this.Size); var _data2 = _ctx.getImageData( 0, 0, this.Size, this.Size );
var _len = 4 * this.Size * this.Size; var _len = 4 * this.Size * this.Size;
for (var i = 0; i < _len; i += 4) for ( var i = 0; i < _len; i += 4 ) {
{ if ( _data.data[i + 3] == 255 ) {
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] = 255;// - _data.data[i]; _data.data[i + 2] = 255;// - _data.data[i + 2];
_data.data[i + 1] = 255;// - _data.data[i + 1];
_data.data[i + 2] = 255;// - _data.data[i + 2];
} }
} }
_ctx.putImageData(_data, 0, 0); _ctx.putImageData( _data, 0, 0 );
ctx.drawImage( img, x, y, this.Size, this.Size ); ctx.drawImage( img, x+1, y+1, this.Size, this.Size );
for (var i = 0; i < _len; i += 4) for ( var i = 0; i < _len; i += 4 ) {
{ if ( _data.data[i + 3] == 255 ) {
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] = 255 - _data.data[i]; _data.data[i + 2] = 255 - _data.data[i + 2];
_data.data[i + 1] = 255 - _data.data[i + 1];
_data.data[i + 2] = 255 - _data.data[i + 2];
} }
} }
_ctx.putImageData(_data2, 0, 0); _ctx.putImageData( _data2, 0, 0 );
_data = null; _data = null;
_data2 = null; _data2 = null;
} }
ctx.strokeStyle = this.ColorBorder; if( this.IsDrawBorders ){
ctx.rect( x + 0.5, y + 0.5, strokeW, strokeH ); ctx.strokeStyle = this.ColorBorder;
ctx.stroke(); ctx.rect( x + 0.5, y + 0.5, strokeW, strokeH );
ctx.stroke();
}
break; break;
} }
default: default:
...@@ -324,20 +361,24 @@ function ScrollObject( elemID, settings, dbg ) { ...@@ -324,20 +361,24 @@ function ScrollObject( elemID, settings, dbg ) {
showArrows:false, showArrows:false,
screenW:-1, screenW:-1,
screenH:-1, screenH:-1,
scrollerMinHeight:20, scrollerMinHeight:35,
scrollerMaxHeight:99999, scrollerMaxHeight:99999,
scrollerMinWidth:20, scrollerMinWidth:35,
scrollerMaxWidth:99999, scrollerMaxWidth:99999,
initialDelay:300, initialDelay:300,
arrowRepeatFreq:50, arrowRepeatFreq:50,
trackClickRepeatFreq:70, trackClickRepeatFreq:70,
scrollPagePercent:1. / 8, scrollPagePercent:1. / 8,
arrowDim:16, arrowDim:17,
scrollerColor:"#F4F4F4", // scrollerColor:"#F4F4F4",
scrollerColor:"#909090",
scrollerColorOver:"#D8DADC", scrollerColorOver:"#D8DADC",
scrollerColorActive:"#7A7A7A", scrollerColorActive:"#7A7A7A",
scrollBackgroundColor:"#F4F4F4", // scrollBackgroundColor:"#F4F4F4",
strokeStyle : "#BBBEC2", scrollBackgroundColor:"#F1F1F1",
scrollBackgroundColorHover:"#E1E1E1",
strokeStyle:"#909090",
// strokeStyle : "#BBBEC2",
vscrollStep:10, vscrollStep:10,
hscrollStep:10, hscrollStep:10,
wheelScrollLines:1 wheelScrollLines:1
...@@ -345,11 +386,15 @@ function ScrollObject( elemID, settings, dbg ) { ...@@ -345,11 +386,15 @@ function ScrollObject( elemID, settings, dbg ) {
this.settings = extendSettings( settings, scrollSettings ); this.settings = extendSettings( settings, scrollSettings );
this.ArrowDrawer = new CArrowDrawer(this.settings); this.ArrowDrawer = new CArrowDrawer( this.settings );
this.mouseUp = false; this.mouseUp = false;
this.mouseDown = false; this.mouseDown = false;
this.that.mouseover = false;
this.that.mouseOverOut = -1;
this.scrollerMouseDown = false; this.scrollerMouseDown = false;
this.scrollerStatus = ScrollOverType.NONE; this.scrollerStatus = ScrollOverType.NONE;
...@@ -397,6 +442,48 @@ function ScrollObject( elemID, settings, dbg ) { ...@@ -397,6 +442,48 @@ function ScrollObject( elemID, settings, dbg ) {
if ( window.devicePixelRatio == 2 ) if ( window.devicePixelRatio == 2 )
this.IsRetina = true; this.IsRetina = true;
this.piperImgVert = document.createElement( 'canvas' );
this.piperImgVert.width = 5;
this.piperImgVert.height = 13;
var r, g, b = g = r = 213,
ctx_piperImgVert = this.piperImgVert.getContext( '2d' );
var _data = ctx_piperImgVert.createImageData( this.piperImgVert.width, this.piperImgVert.height );
var px = _data.data;
for ( var i = 0; i < this.piperImgVert.width * this.piperImgVert.height * 4; ) {
px[i++] = r;
px[i++] = g;
px[i++] = b;
px[i++] = 255;
i = ( i % 20 === 0 ) ? i+20: i
}
ctx_piperImgVert.putImageData( _data, 0, 0 )
this.piperImgHor = document.createElement( 'canvas' );
this.piperImgHor.width = 13;
this.piperImgHor.height = 5;
var r, g, b = g = r = 213,
ctx_piperImgHor = this.piperImgHor.getContext( '2d' );
var _data = ctx_piperImgHor.createImageData( this.piperImgHor.width, this.piperImgHor.height );
var px = _data.data;
for ( var i = 0; i < this.piperImgHor.width * this.piperImgHor.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_piperImgHor.putImageData( _data, 0, 0 )
this._init( elemID ); this._init( elemID );
} }
...@@ -404,6 +491,7 @@ ScrollObject.prototype = { ...@@ -404,6 +491,7 @@ ScrollObject.prototype = {
_init:function ( elemID ) { _init:function ( elemID ) {
if ( !elemID ) return false; if ( !elemID ) return false;
var holder = document.getElementById( elemID ); var holder = document.getElementById( elemID );
if ( holder.getElementsByTagName( 'canvas' ).length == 0 ) if ( holder.getElementsByTagName( 'canvas' ).length == 0 )
...@@ -437,6 +525,7 @@ ScrollObject.prototype = { ...@@ -437,6 +525,7 @@ ScrollObject.prototype = {
this.isVerticalScroll = holder.firstElementChild.clientHeight / Math.max( this.canvasH, 1 ) > 1; this.isVerticalScroll = holder.firstElementChild.clientHeight / Math.max( this.canvasH, 1 ) > 1;
this.isHorizontalScroll = holder.firstElementChild.clientWidth / Math.max( this.canvasW, 1 ) > 1; this.isHorizontalScroll = holder.firstElementChild.clientWidth / Math.max( this.canvasW, 1 ) > 1;
this._setScrollerHW(); this._setScrollerHW();
this.paneHeight = this.canvasH - this.arrowPosition * 2; this.paneHeight = this.canvasH - this.arrowPosition * 2;
...@@ -449,6 +538,7 @@ ScrollObject.prototype = { ...@@ -449,6 +538,7 @@ ScrollObject.prototype = {
this.canvas.onmouseup = this.evt_mouseup; this.canvas.onmouseup = this.evt_mouseup;
this.canvas.onmousedown = this.evt_mousedown; this.canvas.onmousedown = this.evt_mousedown;
this.canvas.onmousewheel = this.evt_mousewheel; this.canvas.onmousewheel = this.evt_mousewheel;
this.canvas.onmouseover = this.evt_mouseover;
var _that = this; var _that = this;
this.canvas.ontouchstart = function ( e ) { this.canvas.ontouchstart = function ( e ) {
...@@ -780,6 +870,23 @@ ScrollObject.prototype = { ...@@ -780,6 +870,23 @@ ScrollObject.prototype = {
this.scrollByY( deltaY ); 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 () { _clearContent:function () {
this.context.clearRect( 0, 0, this.canvasW, this.canvasH ); this.context.clearRect( 0, 0, this.canvasW, this.canvasH );
}, },
...@@ -790,22 +897,38 @@ ScrollObject.prototype = { ...@@ -790,22 +897,38 @@ ScrollObject.prototype = {
this.context.beginPath(); this.context.beginPath();
if ( this.isVerticalScroll ) { if ( this.isVerticalScroll ) {
var _y = this.settings.showArrows ? this.ArrowDrawer.Size : 0 var _y = this.settings.showArrows ? this.ArrowDrawer.Size : 0,
var _h = this.canvasH - (_y << 1); _h = this.canvasH - (_y << 1);
if ( _h > 0 ) if ( _h > 0 )
this.context.rect( 0, _y, this.canvasW, _h ); this.context.rect( 1, _y, this.canvasW, _h );
} }
else if ( this.isHorizontalScroll ) { else if ( this.isHorizontalScroll ) {
var _x = this.settings.showArrows ? this.ArrowDrawer.Size : 0; var _x = this.settings.showArrows ? this.ArrowDrawer.Size : 0,
var _w = this.canvasW - (_x << 1); _w = this.canvasW - (_x << 1);
if ( _w > 0 ) if ( _w > 0 )
this.context.rect( _x, 0, _w, this.canvasH ); this.context.rect( _x, 1, _w, this.canvasH );
}
switch ( this.scrollerStatus ) {
case ScrollOverType.OVER:
case ScrollOverType.ACTIVE:
{
this.context.fillStyle = this.settings.scrollBackgroundColorHover;
break;
}
case ScrollOverType.NONE:
default:
{
this.context.fillStyle = this.settings.scrollBackgroundColor;
break;
}
} }
this.context.fillStyle = this.settings.scrollBackgroundColor;
this.context.fill();
this.context.fill();
this.context.beginPath(); this.context.beginPath();
if ( this.isVerticalScroll && this.maxScrollY != 0 ) { if ( this.isVerticalScroll && this.maxScrollY != 0 ) {
...@@ -817,7 +940,8 @@ ScrollObject.prototype = { ...@@ -817,7 +940,8 @@ ScrollObject.prototype = {
_b = this.canvasH - arrow - 2; _b = this.canvasH - arrow - 2;
if ( _b > _y ) if ( _b > _y )
this.context.rect( 0.5, _y + 0.5, this.canvasW - 2, _b - _y + 1 ); // this.context.rect( this.scroller.x + 1.5, _y + 0.5, this.scroller.w - 1, _b - _y + 1 );
this.roundRect( this.scroller.x + 1.5, _y + 0.5, this.scroller.w - 1, _b - _y -1 );
} }
else if ( this.isHorizontalScroll && this.maxScrollX != 0 ) { else if ( this.isHorizontalScroll && this.maxScrollX != 0 ) {
var _x = this.scroller.x >> 0, arrow = this.settings.showArrows ? this.ArrowDrawer.Size : 0 var _x = this.scroller.x >> 0, arrow = this.settings.showArrows ? this.ArrowDrawer.Size : 0
...@@ -828,28 +952,31 @@ ScrollObject.prototype = { ...@@ -828,28 +952,31 @@ ScrollObject.prototype = {
_r = this.canvasW - arrow - 2; _r = this.canvasW - arrow - 2;
if ( _r > _x ) if ( _r > _x )
this.context.rect( _x + 0.5, 0.5, _r - _x + 1, this.canvasH - 2 ); // this.context.rect( _x + 0.5, this.scroller.y + 1.5, _r - _x + 1, this.scroller.h - 1 );
this.roundRect( _x + 0.5, this.scroller.y + 1.5, _r - _x - 1, this.scroller.h - 1 );
} }
this.context.lineWidth = 1; this.context.lineWidth = 1;
this.context.strokeStyle = this.settings.strokeStyle; // this.context.strokeStyle = this.settings.strokeStyle;
//this.context.stroke(); // this.context.stroke();
switch ( this.scrollerStatus ) { switch ( this.scrollerStatus ) {
case ScrollOverType.OVER: case ScrollOverType.OVER:
{ /*{
this.context.fillStyle = this.settings.scrollerColorOver; this.context.fillStyle = this.settings.scrollerColorOver;
break; break;
} }*/
case ScrollOverType.ACTIVE: case ScrollOverType.ACTIVE:
{ {
this.context.fillStyle = this.settings.scrollerColorActive; this.context.fillStyle = this.settings.scrollerColorActive;
this.context.strokeStyle = this.settings.scrollerColorActive;
break; break;
} }
case ScrollOverType.NONE: case ScrollOverType.NONE:
default: default:
{ {
this.context.fillStyle = this.settings.scrollerColor; this.context.fillStyle = this.settings.scrollerColor;
this.context.strokeStyle = this.settings.scrollerColor;
break; break;
} }
...@@ -857,103 +984,15 @@ ScrollObject.prototype = { ...@@ -857,103 +984,15 @@ ScrollObject.prototype = {
this.context.fill(); this.context.fill();
this.context.stroke(); this.context.stroke();
},
_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 = 0;
this.scroller.w = this.canvasW - 1;
if ( this.settings.showArrows )
this.ArrowDrawer.InitSize( this.canvasW, this.IsRetina );
}
else if ( this.isHorizontalScroll ) {
this.scroller.y = 0;
this.scroller.h = this.canvasH - 1;
if ( this.settings.showArrows )
this.ArrowDrawer.InitSize( this.canvasH, 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 ( this.isVerticalScroll ) {
if ( this.context.drawImage(this.piperImgVert,this.scroller.x + 5, this.scroller.y + Math.floor(this.scroller.h / 2) - 6.5 )
mp.x >= 0 &&
mp.x <= this.canvasW &&
mp.y >= 0 &&
mp.y <= this.settings.arrowDim
) {
return true;
}
else return false;
} }
if ( this.isHorizontalScroll ) { if ( this.isHorizontalScroll ) {
if ( this.context.drawImage(this.piperImgHor,this.scroller.x + Math.floor(this.scroller.w / 2) - 6.5, this.scroller.y + 5 )
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;
}
},
},
_drawArrow:function ( type ) { _drawArrow:function ( type ) {
if ( this.settings.showArrows ) { if ( this.settings.showArrows ) {
var w = this.canvasW; var w = this.canvasW;
...@@ -965,9 +1004,9 @@ ScrollObject.prototype = { ...@@ -965,9 +1004,9 @@ ScrollObject.prototype = {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_TOP, ScrollOverType.OVER, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_TOP, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType1 = ScrollOverType.OVER; this.ScrollOverType1 = ScrollOverType.OVER;
} }
if ( ScrollOverType.NONE != this.ScrollOverType2 ) { if ( ScrollOverType.OVER != this.ScrollOverType2 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_BOTTOM, ScrollOverType.NONE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_BOTTOM, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType2 = ScrollOverType.NONE; this.ScrollOverType2 = ScrollOverType.OVER;
} }
break; break;
case ArrowStatus.upLeftArrowActive_downRightArrowNonActive://upArrow mouse down, downArrow stable case ArrowStatus.upLeftArrowActive_downRightArrowNonActive://upArrow mouse down, downArrow stable
...@@ -975,15 +1014,15 @@ ScrollObject.prototype = { ...@@ -975,15 +1014,15 @@ ScrollObject.prototype = {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_TOP, ScrollOverType.ACTIVE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_TOP, ScrollOverType.ACTIVE, this.context, w, h );
this.ScrollOverType1 = ScrollOverType.ACTIVE; this.ScrollOverType1 = ScrollOverType.ACTIVE;
} }
if ( ScrollOverType.NONE != this.ScrollOverType2 ) { if ( ScrollOverType.OVER != this.ScrollOverType2 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_BOTTOM, ScrollOverType.NONE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_BOTTOM, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType2 = ScrollOverType.NONE; this.ScrollOverType2 = ScrollOverType.OVER;
} }
break; break;
case ArrowStatus.upLeftArrowNonActive_downRightArrowHover://upArrow stable, downArrow mouse hover case ArrowStatus.upLeftArrowNonActive_downRightArrowHover://upArrow stable, downArrow mouse hover
if ( ScrollOverType.NONE != this.ScrollOverType1 ) { if ( ScrollOverType.OVER != this.ScrollOverType1 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_TOP, ScrollOverType.NONE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_TOP, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType1 = ScrollOverType.NONE; this.ScrollOverType1 = ScrollOverType.OVER;
} }
if ( ScrollOverType.OVER != this.ScrollOverType2 ) { if ( ScrollOverType.OVER != this.ScrollOverType2 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_BOTTOM, ScrollOverType.OVER, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_BOTTOM, ScrollOverType.OVER, this.context, w, h );
...@@ -991,15 +1030,25 @@ ScrollObject.prototype = { ...@@ -991,15 +1030,25 @@ ScrollObject.prototype = {
} }
break; break;
case ArrowStatus.upLeftArrowNonActive_downRightArrowActive://upArrow stable, downArrow mouse down case ArrowStatus.upLeftArrowNonActive_downRightArrowActive://upArrow stable, downArrow mouse down
if ( ScrollOverType.NONE != this.ScrollOverType1 ) { if ( ScrollOverType.OVER != this.ScrollOverType1 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_TOP, ScrollOverType.NONE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_TOP, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType1 = ScrollOverType.NONE; this.ScrollOverType1 = ScrollOverType.OVER;
} }
if ( ScrollOverType.ACTIVE != this.ScrollOverType2 ) { if ( ScrollOverType.ACTIVE != this.ScrollOverType2 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_BOTTOM, ScrollOverType.ACTIVE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_BOTTOM, ScrollOverType.ACTIVE, this.context, w, h );
this.ScrollOverType2 = ScrollOverType.ACTIVE; this.ScrollOverType2 = ScrollOverType.ACTIVE;
} }
break; break;
case ArrowStatus.arrowHover://upArrow stable, downArrow mouse down
if ( ScrollOverType.OVER != this.ScrollOverType1 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_TOP, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType1 = ScrollOverType.OVER;
}
if ( ScrollOverType.OVER != this.ScrollOverType2 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_BOTTOM, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType2 = ScrollOverType.OVER;
}
break;
default ://upArrow stable, downArrow stable default ://upArrow stable, downArrow stable
if ( ScrollOverType.NONE != this.ScrollOverType1 ) { if ( ScrollOverType.NONE != this.ScrollOverType1 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_TOP, ScrollOverType.NONE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_TOP, ScrollOverType.NONE, this.context, w, h );
...@@ -1019,9 +1068,9 @@ ScrollObject.prototype = { ...@@ -1019,9 +1068,9 @@ ScrollObject.prototype = {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_LEFT, ScrollOverType.OVER, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_LEFT, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType1 = ScrollOverType.OVER; this.ScrollOverType1 = ScrollOverType.OVER;
} }
if ( ScrollOverType.NONE != this.ScrollOverType2 ) { if ( ScrollOverType.OVER != this.ScrollOverType2 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_RIGHT, ScrollOverType.NONE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_RIGHT, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType2 = ScrollOverType.NONE; this.ScrollOverType2 = ScrollOverType.OVER;
} }
break; break;
case ArrowStatus.upLeftArrowActive_downRightArrowNonActive://leftArrow mouse down, rightArrow stable case ArrowStatus.upLeftArrowActive_downRightArrowNonActive://leftArrow mouse down, rightArrow stable
...@@ -1029,15 +1078,15 @@ ScrollObject.prototype = { ...@@ -1029,15 +1078,15 @@ ScrollObject.prototype = {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_LEFT, ScrollOverType.ACTIVE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_LEFT, ScrollOverType.ACTIVE, this.context, w, h );
this.ScrollOverType1 = ScrollOverType.ACTIVE; this.ScrollOverType1 = ScrollOverType.ACTIVE;
} }
if ( ScrollOverType.NONE != this.ScrollOverType2 ) { if ( ScrollOverType.OVER != this.ScrollOverType2 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_RIGHT, ScrollOverType.NONE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_RIGHT, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType2 = ScrollOverType.NONE; this.ScrollOverType2 = ScrollOverType.OVER;
} }
break; break;
case ArrowStatus.upLeftArrowNonActive_downRightArrowHover://leftArrow stable, rightArrow mouse hover case ArrowStatus.upLeftArrowNonActive_downRightArrowHover://leftArrow stable, rightArrow mouse hover
if ( ScrollOverType.NONE != this.ScrollOverType1 ) { if ( ScrollOverType.OVER != this.ScrollOverType1 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_LEFT, ScrollOverType.NONE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_LEFT, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType1 = ScrollOverType.NONE; this.ScrollOverType1 = ScrollOverType.OVER;
} }
if ( ScrollOverType.OVER != this.ScrollOverType2 ) { if ( ScrollOverType.OVER != this.ScrollOverType2 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_RIGHT, ScrollOverType.OVER, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_RIGHT, ScrollOverType.OVER, this.context, w, h );
...@@ -1045,15 +1094,25 @@ ScrollObject.prototype = { ...@@ -1045,15 +1094,25 @@ ScrollObject.prototype = {
} }
break; break;
case ArrowStatus.upLeftArrowNonActive_downRightArrowActive://leftArrow stable, rightArrow mouse down case ArrowStatus.upLeftArrowNonActive_downRightArrowActive://leftArrow stable, rightArrow mouse down
if ( ScrollOverType.NONE != this.ScrollOverType1 ) { if ( ScrollOverType.OVER != this.ScrollOverType1 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_LEFT, ScrollOverType.NONE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_LEFT, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType1 = ScrollOverType.NONE; this.ScrollOverType1 = ScrollOverType.OVER;
} }
if ( ScrollOverType.ACTIVE != this.ScrollOverType2 ) { if ( ScrollOverType.ACTIVE != this.ScrollOverType2 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_RIGHT, ScrollOverType.ACTIVE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_RIGHT, ScrollOverType.ACTIVE, this.context, w, h );
this.ScrollOverType2 = ScrollOverType.ACTIVE; this.ScrollOverType2 = ScrollOverType.ACTIVE;
} }
break; break;
case ArrowStatus.arrowHover://upArrow stable, downArrow mouse down
if ( ScrollOverType.OVER != this.ScrollOverType1 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_LEFT, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType1 = ScrollOverType.OVER;
}
if ( ScrollOverType.OVER != this.ScrollOverType2 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_RIGHT, ScrollOverType.OVER, this.context, w, h );
this.ScrollOverType2 = ScrollOverType.OVER;
}
break;
default ://leftArrow stable, rightArrow stable default ://leftArrow stable, rightArrow stable
if ( ScrollOverType.NONE != this.ScrollOverType1 ) { if ( ScrollOverType.NONE != this.ScrollOverType1 ) {
this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_LEFT, ScrollOverType.NONE, this.context, w, h ); this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_LEFT, ScrollOverType.NONE, this.context, w, h );
...@@ -1068,6 +1127,102 @@ ScrollObject.prototype = { ...@@ -1068,6 +1127,102 @@ ScrollObject.prototype = {
} }
} }
}, },
_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 = 13//this.canvasW - 1;
if ( this.settings.showArrows )
this.ArrowDrawer.InitSize( this.canvasW, this.IsRetina );
}
else if ( this.isHorizontalScroll ) {
this.scroller.y = 1//0;
this.scroller.h = 13//this.canvasH - 1;
if ( this.settings.showArrows )
this.ArrowDrawer.InitSize( this.canvasH, 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 () { _arrowDownMouseDown:function () {
var that = this, scrollTimeout, isFirst = true, var that = this, scrollTimeout, isFirst = true,
doScroll = function () { doScroll = function () {
...@@ -1106,19 +1261,16 @@ ScrollObject.prototype = { ...@@ -1106,19 +1261,16 @@ ScrollObject.prototype = {
getCurScrolledX:function () { getCurScrolledX:function () {
return this.scrollHCurrentX; return this.scrollHCurrentX;
}, },
getCurScrolledY:function () { getCurScrolledY:function () {
return this.scrollVCurrentY; return this.scrollVCurrentY;
}, },
getMaxScrolledY:function () { getMaxScrolledY:function () {
return this.maxScrollY; return this.maxScrollY;
}, },
getMaxScrolledX:function () { getMaxScrolledX:function () {
return this.maxScrollX; return this.maxScrollX;
}, },
getIsLockedMouse : function() getIsLockedMouse:function () {
{
return (this.that.mouseDownArrow || this.that.mouseDown); return (this.that.mouseDownArrow || this.that.mouseDown);
}, },
/************************************************************************/ /************************************************************************/
...@@ -1126,32 +1278,38 @@ ScrollObject.prototype = { ...@@ -1126,32 +1278,38 @@ ScrollObject.prototype = {
evt_mousemove:function ( e ) { evt_mousemove:function ( e ) {
var evt = e || window.event; var evt = e || window.event;
if (evt.preventDefault) if ( evt.preventDefault )
evt.preventDefault(); evt.preventDefault();
else else
evt.returnValue = false; evt.returnValue = false;
/*if( !this.that.mouseover ){
return;
}*/
var mousePos = this.that.getMousePosition( evt ); var mousePos = this.that.getMousePosition( evt );
this.that.EndMousePosition.x = mousePos.x; this.that.EndMousePosition.x = mousePos.x;
this.that.EndMousePosition.y = mousePos.y; this.that.EndMousePosition.y = mousePos.y;
var downHover = this.that._MouseHoverOnArrowDown( mousePos ); var downHover = this.that._MouseHoverOnArrowDown( mousePos ),
var upHover = this.that._MouseHoverOnArrowUp( mousePos ); upHover = this.that._MouseHoverOnArrowUp( mousePos ),
var scrollerHover = this.that._MouseHoverOnScroller( mousePos ); scrollerHover = this.that._MouseHoverOnScroller( mousePos );
if ( scrollerHover ) { if ( scrollerHover ) {
this.that.scrollerStatus = ScrollOverType.OVER; // this.that.scrollerStatus = ScrollOverType.OVER;
this.that.canvas.style.cursor = "pointer"; this.that.canvas.style.cursor = "pointer";
this.that._drawArrow(); // this.that._drawArrow();
// this.that._drawArrow( ArrowStatus.arrowHover );
} }
else if ( this.that.settings.showArrows && (downHover || upHover) ) { else if ( this.that.settings.showArrows && (downHover || upHover) ) {
this.that.scrollerStatus = ScrollOverType.NONE; // this.that.scrollerStatus = ScrollOverType.NONE;
this.that.canvas.style.cursor = "pointer"; this.that.canvas.style.cursor = "pointer";
if ( !this.that.mouseDownArrow ) { if ( !this.that.mouseDownArrow ) {
if ( upHover ) { if ( upHover ) {
this.that._drawArrow( ArrowStatus.upLeftArrowHover_downRightArrowNonActive ); // this.that._drawArrow( ArrowStatus.upLeftArrowHover_downRightArrowNonActive );
this.that.nonePointer = true; this.that.nonePointer = true;
} }
else if ( downHover ) { else if ( downHover ) {
this.that._drawArrow( ArrowStatus.upLeftArrowNonActive_downRightArrowHover ); // this.that._drawArrow( ArrowStatus.upLeftArrowNonActive_downRightArrowHover );
this.that.nonePointer = true; this.that.nonePointer = true;
} }
} }
...@@ -1159,10 +1317,12 @@ ScrollObject.prototype = { ...@@ -1159,10 +1317,12 @@ ScrollObject.prototype = {
else { else {
this.that.canvas.style.cursor = "default"; this.that.canvas.style.cursor = "default";
if ( this.that.nonePointer ) { if ( this.that.nonePointer ) {
this.that._drawArrow(); // this.that._drawArrow();
this.that._drawArrow( ArrowStatus.arrowHover );
this.that.nonePointer = false; this.that.nonePointer = false;
} }
this.that.scrollerStatus = ScrollOverType.NONE; // this.that._drawArrow( ArrowStatus.arrowHover );
// this.that.scrollerStatus = ScrollOverType.NONE;
} }
if ( this.that.mouseDown && this.that.scrollerMouseDown ) if ( this.that.mouseDown && this.that.scrollerMouseDown )
this.that.moveble = true; this.that.moveble = true;
...@@ -1172,7 +1332,7 @@ ScrollObject.prototype = { ...@@ -1172,7 +1332,7 @@ ScrollObject.prototype = {
if ( this.that.isVerticalScroll ) { if ( this.that.isVerticalScroll ) {
if ( this.that.moveble && this.that.scrollerMouseDown ) { if ( this.that.moveble && this.that.scrollerMouseDown ) {
var isTop = false, isBottom = false; var isTop = false, isBottom = false;
this.that.scrollerStatus = ScrollOverType.ACTIVE; // this.that.scrollerStatus = ScrollOverType.ACTIVE;
var _dlt = this.that.EndMousePosition.y - this.that.StartMousePosition.y; var _dlt = this.that.EndMousePosition.y - this.that.StartMousePosition.y;
if ( this.that.EndMousePosition.y == this.that.StartMousePosition.y ) if ( this.that.EndMousePosition.y == this.that.StartMousePosition.y )
return; return;
...@@ -1202,13 +1362,14 @@ ScrollObject.prototype = { ...@@ -1202,13 +1362,14 @@ ScrollObject.prototype = {
this.that.moveble = false; this.that.moveble = false;
this.that.StartMousePosition.x = this.that.EndMousePosition.x; this.that.StartMousePosition.x = this.that.EndMousePosition.x;
this.that.StartMousePosition.y = this.that.EndMousePosition.y; this.that.StartMousePosition.y = this.that.EndMousePosition.y;
this.that._drawArrow( ArrowStatus.arrowHover );
} }
} }
else if ( this.that.isHorizontalScroll ) { else if ( this.that.isHorizontalScroll ) {
if ( this.that.moveble && this.that.scrollerMouseDown ) { if ( this.that.moveble && this.that.scrollerMouseDown ) {
var isTop = false, isBottom = false; var isTop = false, isBottom = false;
this.that.scrollerStatus = ScrollOverType.ACTIVE; // this.that.scrollerStatus = ScrollOverType.ACTIVE;
var _dlt = this.that.EndMousePosition.x - this.that.StartMousePosition.x; var _dlt = this.that.EndMousePosition.x - this.that.StartMousePosition.x;
if ( this.that.EndMousePosition.x == this.that.StartMousePosition.x ) if ( this.that.EndMousePosition.x == this.that.StartMousePosition.x )
return; return;
...@@ -1227,30 +1388,49 @@ ScrollObject.prototype = { ...@@ -1227,30 +1388,49 @@ ScrollObject.prototype = {
(_dlt < 0 && this.that.scroller.x + _dlt >= this.that.arrowPosition) ) (_dlt < 0 && this.that.scroller.x + _dlt >= this.that.arrowPosition) )
this.that.scroller.x += _dlt; this.that.scroller.x += _dlt;
} }
var destX = (this.that.scroller.x - this.that.arrowPosition) * this.that.scrollCoeff var destX = (this.that.scroller.x - this.that.arrowPosition) * this.that.scrollCoeff;
this.that._scrollH( this.that, evt, destX, isTop, isBottom ); this.that._scrollH( this.that, evt, destX, isTop, isBottom );
this.that.moveble = false; this.that.moveble = false;
this.that.StartMousePosition.x = this.that.EndMousePosition.x; this.that.StartMousePosition.x = this.that.EndMousePosition.x;
this.that.StartMousePosition.y = this.that.EndMousePosition.y; this.that.StartMousePosition.y = this.that.EndMousePosition.y;
this.that._drawArrow( ArrowStatus.arrowHover );
} }
} }
if( this.that.mouseover ){
this.that.scrollerStatus = ScrollOverType.ACTIVE;
this.that._drawArrow( ArrowStatus.arrowHover );
}
// this.that._drawArrow( ArrowStatus.arrowHover );
this.that._draw(); this.that._draw();
}, },
evt_mouseout:function ( e ) { evt_mouseout:function ( e ) {
var evt = e || window.event; var evt = e || window.event;
if (evt.preventDefault) if ( evt.preventDefault )
evt.preventDefault(); evt.preventDefault();
else else
evt.returnValue = false; evt.returnValue = false;
clearInterval(this.that.mouseOverOut);
this.that.mouseover = false;
/* if( this.that.mouseover ){
this.that.mouseover = false;
this.that.handleEvents( "onmouseout", evt );
return;
}*/
if ( this.that.settings.showArrows ) { if ( this.that.settings.showArrows ) {
this.that.mouseDownArrow = false; this.that.mouseDownArrow = false;
if ( this.that.nonePointer ) { if ( this.that.nonePointer ) {
this.that._drawArrow(); if( this.that.moveble ){
this.that._drawArrow(ArrowStatus.arrowHover);
}
else
this.that._drawArrow();
this.that.nonePointer = false; this.that.nonePointer = false;
} }
...@@ -1258,13 +1438,24 @@ ScrollObject.prototype = { ...@@ -1258,13 +1438,24 @@ ScrollObject.prototype = {
} }
if(!this.that.moveble){ if(!this.that.moveble){
this.that.scrollerStatus = ScrollOverType.NONE; this.that.scrollerStatus = ScrollOverType.NONE;
this.that._drawArrow();
} }
this.that._draw(); this.that._draw();
},
evt_mouseover:function( e ){
// this.that.scrollerStatus = ScrollOverType.ACTIVE;
// this.that._draw();
var _tmp = this;
this.that.mouseOverOut = setTimeout(function(e){
_tmp.that.mouseover = true;
},20)
}, },
evt_mouseup:function ( e ) { evt_mouseup:function ( e ) {
var evt = e || window.event; var evt = e || window.event;
if (evt.preventDefault) if ( evt.preventDefault )
evt.preventDefault(); evt.preventDefault();
else else
evt.returnValue = false; evt.returnValue = false;
...@@ -1275,11 +1466,11 @@ ScrollObject.prototype = { ...@@ -1275,11 +1466,11 @@ ScrollObject.prototype = {
if ( !this.that.scrollerMouseDown ) { if ( !this.that.scrollerMouseDown ) {
if ( this.that.settings.showArrows && this.that._MouseHoverOnArrowDown( mousePos ) ) { if ( this.that.settings.showArrows && this.that._MouseHoverOnArrowDown( mousePos ) ) {
this.that.handleEvents( "onmouseup", evt ); this.that.handleEvents( "onmouseup", evt );
this.that._drawArrow( 2 ); this.that._drawArrow( ArrowStatus.upLeftArrowNonActive_downRightArrowHover );
} }
else if ( this.that.settings.showArrows && this.that._MouseHoverOnArrowUp( mousePos ) ) { else if ( this.that.settings.showArrows && this.that._MouseHoverOnArrowUp( mousePos ) ) {
this.that.handleEvents( "onmouseup", evt ); this.that.handleEvents( "onmouseup", evt );
this.that._drawArrow( 0 ); this.that._drawArrow( ArrowStatus.upLeftArrowHover_downRightArrowNonActive );
} }
} }
else { else {
...@@ -1289,6 +1480,7 @@ ScrollObject.prototype = { ...@@ -1289,6 +1480,7 @@ ScrollObject.prototype = {
this.that.mouseDownArrow = false; this.that.mouseDownArrow = false;
this.that.scrollerStatus = ScrollOverType.NONE; this.that.scrollerStatus = ScrollOverType.NONE;
this.that._draw(); this.that._draw();
this.that._drawArrow();
} }
//for unlock global mouse event //for unlock global mouse event
...@@ -1302,15 +1494,16 @@ ScrollObject.prototype = { ...@@ -1302,15 +1494,16 @@ ScrollObject.prototype = {
// если сделать превент дефолт - перестанет приходить mousemove от window // если сделать превент дефолт - перестанет приходить mousemove от window
/* /*
if (evt.preventDefault) if (evt.preventDefault)
evt.preventDefault(); evt.preventDefault();
else else
evt.returnValue = false; evt.returnValue = false;
*/ */
var mousePos = this.that.getMousePosition( evt ),
downHover = this.that._MouseHoverOnArrowDown( mousePos ),
upHover = this.that._MouseHoverOnArrowUp( mousePos );
var mousePos = this.that.getMousePosition( evt );
var downHover = this.that._MouseHoverOnArrowDown( mousePos );
var upHover = this.that._MouseHoverOnArrowUp( mousePos );
if ( this.that.settings.showArrows && downHover ) { if ( this.that.settings.showArrows && downHover ) {
this.that.mouseDownArrow = true; this.that.mouseDownArrow = true;
this.that._arrowDownMouseDown(); this.that._arrowDownMouseDown();
...@@ -1368,6 +1561,7 @@ ScrollObject.prototype = { ...@@ -1368,6 +1561,7 @@ ScrollObject.prototype = {
} }
_tmp.that.scrollTimeout = setTimeout( doScroll, isFirst ? _tmp.that.settings.initialDelay : _tmp.that.settings.trackClickRepeatFreq ); _tmp.that.scrollTimeout = setTimeout( doScroll, isFirst ? _tmp.that.settings.initialDelay : _tmp.that.settings.trackClickRepeatFreq );
isFirst = false; isFirst = false;
_tmp.that._drawArrow( ArrowStatus.arrowHover );
}, },
cancelClick = function () { cancelClick = function () {
_tmp.that.scrollTimeout && clearTimeout( _tmp.that.scrollTimeout ); _tmp.that.scrollTimeout && clearTimeout( _tmp.that.scrollTimeout );
...@@ -1415,6 +1609,7 @@ ScrollObject.prototype = { ...@@ -1415,6 +1609,7 @@ ScrollObject.prototype = {
} }
_tmp.that.scrollTimeout = setTimeout( doScroll, isFirst ? _tmp.that.settings.initialDelay : _tmp.that.settings.trackClickRepeatFreq ); _tmp.that.scrollTimeout = setTimeout( doScroll, isFirst ? _tmp.that.settings.initialDelay : _tmp.that.settings.trackClickRepeatFreq );
isFirst = false; isFirst = false;
_tmp.that._drawArrow( ArrowStatus.arrowHover );
}, },
cancelClick = function () { cancelClick = function () {
_tmp.that.scrollTimeout && clearTimeout( _tmp.that.scrollTimeout ); _tmp.that.scrollTimeout && clearTimeout( _tmp.that.scrollTimeout );
...@@ -1426,7 +1621,7 @@ ScrollObject.prototype = { ...@@ -1426,7 +1621,7 @@ ScrollObject.prototype = {
if ( this.that.onLockMouse ) { if ( this.that.onLockMouse ) {
this.that.onLockMouse( evt ); this.that.onLockMouse( evt );
} }
doScroll(); doScroll();
this.that.bind( "mouseup.main", cancelClick ); this.that.bind( "mouseup.main", cancelClick );
} }
...@@ -1435,7 +1630,7 @@ ScrollObject.prototype = { ...@@ -1435,7 +1630,7 @@ ScrollObject.prototype = {
}, },
evt_mousewheel:function ( e ) { evt_mousewheel:function ( e ) {
var evt = e || window.event; var evt = e || window.event;
if (evt.preventDefault) if ( evt.preventDefault )
evt.preventDefault(); evt.preventDefault();
else else
evt.returnValue = false; evt.returnValue = false;
......
Word/Drawing/HtmlPage.js
View file @ fb10794c
...@@ -63,7 +63,7 @@ var GlobalSkinFlat = { ...@@ -63,7 +63,7 @@ var GlobalSkinFlat = {
PageOutline : "#BBBEC2", PageOutline : "#BBBEC2",
STYLE_THUMBNAIL_WIDTH : 109, STYLE_THUMBNAIL_WIDTH : 109,
STYLE_THUMBNAIL_HEIGHT : 45, STYLE_THUMBNAIL_HEIGHT : 45,
isNeedInvertOnActive: true isNeedInvertOnActive: false
}; };
var GlobalSkin = GlobalSkinTeamlab; var GlobalSkin = GlobalSkinTeamlab;
......
Word/api.js
View file @ fb10794c
...@@ -1167,14 +1167,14 @@ asc_docs_api.prototype.CreateComponents = function() ...@@ -1167,14 +1167,14 @@ asc_docs_api.prototype.CreateComponents = function()
</div>\ </div>\
<div id=\"id_panel_right\" class=\"block_elem\" style=\"margin-right:1px;background-color:" + GlobalSkin.BackgroundScroll + ";\">\ <div id=\"id_panel_right\" class=\"block_elem\" style=\"margin-right:1px;background-color:" + GlobalSkin.BackgroundScroll + ";\">\
<div id=\"id_buttonRulers\" class=\"block_elem buttonRuler\"></div>\ <div id=\"id_buttonRulers\" class=\"block_elem buttonRuler\"></div>\
<div id=\"id_vertical_scroll\" style=\"left:0;top:0;width:16px;overflow:hidden;position:absolute;\">\ <div id=\"id_vertical_scroll\" style=\"left:0;top:0px;width:16px;overflow:hidden;position:absolute;background-color:#cbcbcb\">\
<div id=\"panel_right_scroll\" class=\"block_elem\" style=\"left:0;top:0;width:16px;height:6000px;\"></div>\ <div id=\"panel_right_scroll\" class=\"block_elem\" style=\"left:0;top:0;width:16px;height:6000px;\"></div>\
</div>\ </div>\
<div id=\"id_buttonPrevPage\" class=\"block_elem buttonPrevPage\"></div>\ <div id=\"id_buttonPrevPage\" class=\"block_elem buttonPrevPage\"></div>\
<div id=\"id_buttonNextPage\" class=\"block_elem buttonNextPage\"></div>\ <div id=\"id_buttonNextPage\" class=\"block_elem buttonNextPage\"></div>\
</div>\ </div>\
<div id=\"id_horscrollpanel\" class=\"block_elem\" style=\"margin-bottom:1px;background-color:" + GlobalSkin.BackgroundScroll + ";\">\ <div id=\"id_horscrollpanel\" class=\"block_elem\" style=\"margin-bottom:1px;background-color:" + GlobalSkin.BackgroundScroll + ";\">\
<div id=\"id_horizontal_scroll\" style=\"left:0;top:0;height:16px;overflow:hidden;position:absolute;width:100%;\">\ <div id=\"id_horizontal_scroll\" style=\"left:0px;top:0;height:16px;overflow:hidden;position:absolute;background-color:#cbcbcb\">\
<div id=\"panel_hor_scroll\" class=\"block_elem\" style=\"left:0;top:0;width:6000px;height:16px;\"></div>\ <div id=\"panel_hor_scroll\" class=\"block_elem\" style=\"left:0;top:0;width:6000px;height:16px;\"></div>\
</div>\ </div>\
</div>"; </div>";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7