Skip to content

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

slim scroll 

git-svn-id: svn://192.168.3.15/activex/AVS/Sources/TeamlabOffice/trunk/OfficeWeb@58674 954022d7-b5bf-4e40-9824-e11837661b57
parent 3241660f
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 72 deletions
Common/scroll.js
View file @ 1320ec21
...@@ -1449,6 +1449,7 @@ function ScrollObject( elemID, settings, dbg ) { ...@@ -1449,6 +1449,7 @@ function ScrollObject( elemID, settings, dbg ) {
trackClickRepeatFreq:70, trackClickRepeatFreq:70,
scrollPagePercent:1. / 8, scrollPagePercent:1. / 8,
arrowDim:13, arrowDim:13,
marginScroller:4,
scrollerColor:"#f1f1f1", scrollerColor:"#f1f1f1",
scrollerColorOver:"#cfcfcf", scrollerColorOver:"#cfcfcf",
scrollerColorLayerOver:"#cfcfcf", scrollerColorLayerOver:"#cfcfcf",
...@@ -1476,7 +1477,11 @@ function ScrollObject( elemID, settings, dbg ) { ...@@ -1476,7 +1477,11 @@ function ScrollObject( elemID, settings, dbg ) {
arrowActiveBackgroundColor:"#ADADAD", arrowActiveBackgroundColor:"#ADADAD",
fadeInFadeOutDelay:20, fadeInFadeOutDelay:20,
piperColor:"#cfcfcf", piperColor:"#cfcfcf",
piperColorHover:"#f1f1f1" piperColorHover:"#f1f1f1",
arrowSizeW: 13,
arrowSizeH: 13,
cornerRadius: 0,
slimScroll: false
}; };
this.settings = extendSettings( settings, scrollSettings ); this.settings = extendSettings( settings, scrollSettings );
...@@ -1547,22 +1552,31 @@ function ScrollObject( elemID, settings, dbg ) { ...@@ -1547,22 +1552,31 @@ function ScrollObject( elemID, settings, dbg ) {
this.piperImgVert = [document.createElement( 'canvas' ), document.createElement( 'canvas' )] this.piperImgVert = [document.createElement( 'canvas' ), document.createElement( 'canvas' )]
this.piperImgHor = [document.createElement( 'canvas' ), document.createElement( 'canvas' )] this.piperImgHor = [document.createElement( 'canvas' ), document.createElement( 'canvas' )]
this.piperImgVert[0].width = 5;
this.piperImgVert[0].height = 13; this.piperImgVert[0].height = 13;
this.piperImgVert[1].width = 5;
this.piperImgVert[1].height = 13; this.piperImgVert[1].height = 13;
this.piperImgVert[0].width = 5;
this.piperImgVert[1].width = 5;
this.piperImgHor[0].width = 13; this.piperImgHor[0].width = 13;
this.piperImgHor[0].height = 5;
this.piperImgHor[1].width = 13; this.piperImgHor[1].width = 13;
this.piperImgHor[0].height = 5;
this.piperImgHor[1].height = 5; this.piperImgHor[1].height = 5;
var r, g, b, ctx_piperImg, _data, px; 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 ); r = _HEXTORGB_( this.settings.piperColor );
g = r.G; g = r.G;
b = r.B; b = r.B;
r = r.R; r = r.R;
k = this.piperImgVert[0].width * 4;
for ( var index = 0; index < this.piperImgVert.length; index++ ) { for ( var index = 0; index < this.piperImgVert.length; index++ ) {
ctx_piperImg = this.piperImgVert[index].getContext( '2d' ); ctx_piperImg = this.piperImgVert[index].getContext( '2d' );
_data = ctx_piperImg.createImageData( this.piperImgVert[index].width, this.piperImgVert[index].height ); _data = ctx_piperImg.createImageData( this.piperImgVert[index].width, this.piperImgVert[index].height );
...@@ -1573,8 +1587,8 @@ function ScrollObject( elemID, settings, dbg ) { ...@@ -1573,8 +1587,8 @@ function ScrollObject( elemID, settings, dbg ) {
px[i++] = g; px[i++] = g;
px[i++] = b; px[i++] = b;
px[i++] = 255; px[i++] = 255;
i = ( i % 20 === 0 ) ? i + 20 : i i = ( i % k === 0 ) ? i + k : i
} }_
ctx_piperImg.putImageData( _data, 0, 0 ) ctx_piperImg.putImageData( _data, 0, 0 )
...@@ -1638,6 +1652,9 @@ ScrollObject.prototype = { ...@@ -1638,6 +1652,9 @@ ScrollObject.prototype = {
if ( this.settings.showArrows ){ if ( this.settings.showArrows ){
this.arrowPosition = this.settings.arrowDim + 2; this.arrowPosition = this.settings.arrowDim + 2;
} }
else{
this.arrowPosition = this.settings.marginScroller;
}
this._setDimension( holder.clientHeight, holder.clientWidth ); this._setDimension( holder.clientHeight, holder.clientWidth );
this.maxScrollY = holder.firstElementChild.clientHeight - this.settings.screenH > 0 ? holder.firstElementChild.clientHeight - this.settings.screenH : 0; this.maxScrollY = holder.firstElementChild.clientHeight - this.settings.screenH > 0 ? holder.firstElementChild.clientHeight - this.settings.screenH : 0;
...@@ -2070,19 +2087,19 @@ ScrollObject.prototype = { ...@@ -2070,19 +2087,19 @@ ScrollObject.prototype = {
startColorFadeIn -= 2; startColorFadeIn -= 2;
if ( that.isVerticalScroll && that.maxScrollY != 0 ) { if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
x = that.scroller.x + 3; x = that.scroller.x + (that.settings.slimScroll ? 2 : 3);
y = (that.scroller.y >> 0) + Math.floor( that.scroller.h / 2 ) - 6; y = (that.scroller.y >> 0) + Math.floor( that.scroller.h / 2 ) - 6;
ctx_piperImg = that.piperImgVert[0].getContext( '2d' ); ctx_piperImg = that.piperImgVert[0].getContext( '2d' );
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height ); _data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
px = _data.data; px = _data.data;
for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; ) { for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; i += 4 ) {
px[i++] += 2; if ( px[i + 3] == 255 ) {
px[i++] += 2; px[i] += 2;
px[i++] += 2; px[i + 1] += 2;
i++; px[i + 2] += 2;
i = ( i % 20 === 0 ) ? i + 20 : i; }
} }
ctx_piperImg.putImageData( _data, 0, 0 ); ctx_piperImg.putImageData( _data, 0, 0 );
...@@ -2091,18 +2108,18 @@ ScrollObject.prototype = { ...@@ -2091,18 +2108,18 @@ ScrollObject.prototype = {
} }
else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) { else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6; x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6;
y = that.scroller.y + 3; y = that.scroller.y + (that.settings.slimScroll ? 2 : 3);
ctx_piperImg = that.piperImgHor[0].getContext( '2d' ); ctx_piperImg = that.piperImgHor[0].getContext( '2d' );
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height ); _data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
px = _data.data; px = _data.data;
for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; ) { for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; i += 4) {
px[i++] += 2; if ( px[i + 3] == 255 ) {
px[i++] += 2; px[i] += 2;
px[i++] += 2; px[i + 1] += 2;
i++; px[i + 2] += 2;
i = ( i % 4 === 0 && i % 52 !== 0 ) ? i + 4 : i; }
} }
ctx_piperImg.putImageData( _data, 0, 0 ) ctx_piperImg.putImageData( _data, 0, 0 )
...@@ -2126,12 +2143,12 @@ ScrollObject.prototype = { ...@@ -2126,12 +2143,12 @@ ScrollObject.prototype = {
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height ); _data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
px = _data.data; px = _data.data;
for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; ) { for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; i += 4 ) {
px[i++] -= 2; if ( px[i + 3] == 255 ) {
px[i++] -= 2; px[i] -= 2;
px[i++] -= 2; px[i + 1] -= 2;
i++; px[i + 2] -= 2;
i = ( i % 20 === 0 ) ? i + 20 : i; }
} }
ctx_piperImg.putImageData( _data, 0, 0 ); ctx_piperImg.putImageData( _data, 0, 0 );
...@@ -2145,12 +2162,12 @@ ScrollObject.prototype = { ...@@ -2145,12 +2162,12 @@ ScrollObject.prototype = {
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height ); _data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
px = _data.data; px = _data.data;
for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; ) { for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; i += 4) {
px[i++] -= 2; if ( px[i + 3] == 255 ) {
px[i++] -= 2; px[i] -= 2;
px[i++] -= 2; px[i + 1] -= 2;
i++; px[i + 2] -= 2;
i = ( i % 4 === 0 && i % 52 !== 0 ) ? i + 4 : i; }
} }
ctx_piperImg.putImageData( _data, 0, 0 ) ctx_piperImg.putImageData( _data, 0, 0 )
...@@ -2188,20 +2205,20 @@ ScrollObject.prototype = { ...@@ -2188,20 +2205,20 @@ ScrollObject.prototype = {
startColorFadeOut += 2; startColorFadeOut += 2;
if ( that.isVerticalScroll && that.maxScrollY != 0 ) { if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
x = that.scroller.x + 3; x = that.scroller.x + (that.settings.slimScroll ? 2 : 3);
y = (that.scroller.y >> 0) + Math.floor( that.scroller.h / 2 ) - 6; y = (that.scroller.y >> 0) + Math.floor( that.scroller.h / 2 ) - 6;
ctx_piperImg = that.piperImgVert[0].getContext( '2d' ); ctx_piperImg = that.piperImgVert[0].getContext( '2d' );
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height ); _data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
px = _data.data; px = _data.data;
for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; ) { for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; i += 4) {
px[i++] -= 2; if ( px[i + 3] == 255 ) {
px[i++] -= 2; px[i] -= 2;
px[i++] -= 2; px[i + 1] -= 2;
i++; px[i + 2] -= 2;
i = ( i % 20 === 0 ) ? i + 20 : i }
} }
ctx_piperImg.putImageData( _data, 0, 0 ); ctx_piperImg.putImageData( _data, 0, 0 );
...@@ -2211,18 +2228,18 @@ ScrollObject.prototype = { ...@@ -2211,18 +2228,18 @@ ScrollObject.prototype = {
} }
else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) { else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6; x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6;
y = that.scroller.y + 3; y = that.scroller.y + (that.settings.slimScroll ? 2 : 3);
ctx_piperImg = that.piperImgHor[0].getContext( '2d' ); ctx_piperImg = that.piperImgHor[0].getContext( '2d' );
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height ); _data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
px = _data.data; px = _data.data;
for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; ) { for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; i+=4 ) {
px[i++] -= 2; if ( px[i + 3] == 255 ) {
px[i++] -= 2; px[i] -= 2;
px[i++] -= 2; px[i + 1] -= 2;
i++; px[i + 2] -= 2;
i = ( i % 4 === 0 && i % 52 !== 0 ) ? i + 4 : i }
} }
ctx_piperImg.putImageData( _data, 0, 0 ) ctx_piperImg.putImageData( _data, 0, 0 )
...@@ -2246,12 +2263,12 @@ ScrollObject.prototype = { ...@@ -2246,12 +2263,12 @@ ScrollObject.prototype = {
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height ); _data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
px = _data.data; px = _data.data;
for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; ) { for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; i+= 4 ) {
px[i++] += 2; if ( px[i + 3] == 255 ) {
px[i++] += 2; px[i] += 2;
px[i++] += 2; px[i + 1] += 2;
i++; px[i + 2] += 2;
i = ( i % 20 === 0 ) ? i + 20 : i }
} }
ctx_piperImg.putImageData( _data, 0, 0 ); ctx_piperImg.putImageData( _data, 0, 0 );
...@@ -2267,12 +2284,12 @@ ScrollObject.prototype = { ...@@ -2267,12 +2284,12 @@ ScrollObject.prototype = {
_data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height ); _data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
px = _data.data; px = _data.data;
for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; ) { for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; i+=4 ) {
px[i++] += 2; if ( px[i + 3] == 255 ) {
px[i++] += 2; px[i] += 2;
px[i++] += 2; px[i + 1] += 2;
i++; px[i + 2] += 2;
i = ( i % 4 === 0 && i % 52 !== 0 ) ? i + 4 : i }
} }
ctx_piperImg.putImageData( _data, 0, 0 ) ctx_piperImg.putImageData( _data, 0, 0 )
...@@ -2343,7 +2360,7 @@ ScrollObject.prototype = { ...@@ -2343,7 +2360,7 @@ ScrollObject.prototype = {
} }
if ( _b > _y ) { if ( _b > _y ) {
that.roundRect( that.scroller.x - 0.5, _y + 0.5, that.scroller.w - 1, that.scroller.h - 1, 0 ); 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 ) { else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
...@@ -2357,7 +2374,7 @@ ScrollObject.prototype = { ...@@ -2357,7 +2374,7 @@ ScrollObject.prototype = {
} }
if ( _r > _x ) { if ( _r > _x ) {
that.roundRect( _x + 0.5, that.scroller.y - 0.5, that.scroller.w - 1, that.scroller.h - 1, 0 ); that.roundRect( _x + 0.5, that.scroller.y - 0.5, that.scroller.w - 1, that.scroller.h - 1, that.settings.cornerRadius );
} }
} }
} }
...@@ -2459,10 +2476,10 @@ ScrollObject.prototype = { ...@@ -2459,10 +2476,10 @@ ScrollObject.prototype = {
this.context.stroke(); this.context.stroke();
if ( this.isVerticalScroll && this.maxScrollY != 0 ) { if ( this.isVerticalScroll && this.maxScrollY != 0 ) {
this.context.drawImage( this.piperImgVert[piperImgIndex], this.scroller.x + 3, (this.scroller.y >> 0) + Math.floor( this.scroller.h / 2 ) - 6 ); 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 ) { 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 + 3 ); 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) );
} }
} }
...@@ -2633,15 +2650,15 @@ ScrollObject.prototype = { ...@@ -2633,15 +2650,15 @@ ScrollObject.prototype = {
_setScrollerHW:function () { _setScrollerHW:function () {
if ( this.isVerticalScroll ) { if ( this.isVerticalScroll ) {
this.scroller.x = 1;//0; this.scroller.x = 1;//0;
this.scroller.w = 13;//this.canvasW - 1; this.scroller.w = this.canvasW - 1;
if ( this.settings.showArrows ) if ( this.settings.showArrows )
this.ArrowDrawer.InitSize( 13, 13, this.IsRetina ); this.ArrowDrawer.InitSize( this.settings.arrowSizeW, this.settings.arrowSizeH, this.IsRetina );
} }
else if ( this.isHorizontalScroll ) { else if ( this.isHorizontalScroll ) {
this.scroller.y = 1;//0; this.scroller.y = 1;//0;
this.scroller.h = 13;//this.canvasH - 1; this.scroller.h = this.canvasH - 1;
if ( this.settings.showArrows ) if ( this.settings.showArrows )
this.ArrowDrawer.InitSize( 13, 13, this.IsRetina ); this.ArrowDrawer.InitSize( this.settings.arrowSizeH, this.settings.arrowSizeW, this.IsRetina );
} }
}, },
_MouseHoverOnScroller:function ( mp ) { _MouseHoverOnScroller:function ( mp ) {
......
PowerPoint/Drawing/DrawingDocument.js
View file @ 1320ec21
...@@ -3803,9 +3803,9 @@ function CThumbnailsManager() ...@@ -3803,9 +3803,9 @@ function CThumbnailsManager()
// нужен скролл // нужен скролл
if (!this.m_bIsScrollVisible) if (!this.m_bIsScrollVisible)
{ {
word_control.m_oThumbnailsBack.Bounds.R = word_control.ScrollWidthPx * g_dKoef_pix_to_mm; word_control.m_oThumbnailsBack.Bounds.R = word_control.ScrollWidthPxThmbnl * g_dKoef_pix_to_mm;
word_control.m_oThumbnails.Bounds.R = word_control.ScrollWidthPx * g_dKoef_pix_to_mm; word_control.m_oThumbnails.Bounds.R = word_control.ScrollWidthPxThmbnl * g_dKoef_pix_to_mm;
word_control.m_oThumbnails_scroll.Bounds.AbsW = word_control.ScrollWidthPx * g_dKoef_pix_to_mm; word_control.m_oThumbnails_scroll.Bounds.AbsW = word_control.ScrollWidthPxThmbnl * g_dKoef_pix_to_mm;
word_control.m_oThumbnailsContainer.Resize(__w, __h); word_control.m_oThumbnailsContainer.Resize(__w, __h);
} }
...@@ -3827,7 +3827,9 @@ function CThumbnailsManager() ...@@ -3827,7 +3827,9 @@ function CThumbnailsManager()
showArrows: false, showArrows: false,
animateScroll: false, animateScroll: false,
screenW: word_control.m_oThumbnails.HtmlElement.width, screenW: word_control.m_oThumbnails.HtmlElement.width,
screenH: word_control.m_oThumbnails.HtmlElement.height screenH: word_control.m_oThumbnails.HtmlElement.height,
cornerRadius: 1,
slimScroll: true
}; };
document.getElementById('panel_right_scroll_thmbnl').style.height = parseInt(nHeightPix) + "px"; document.getElementById('panel_right_scroll_thmbnl').style.height = parseInt(nHeightPix) + "px";
......
PowerPoint/Drawing/HtmlPage.js
View file @ 1320ec21
...@@ -106,6 +106,7 @@ function CEditorPage(api) ...@@ -106,6 +106,7 @@ function CEditorPage(api)
this.m_oTopRuler_horRuler = null; this.m_oTopRuler_horRuler = null;
this.ScrollWidthPx = 14; this.ScrollWidthPx = 14;
this.ScrollWidthPxThmbnl= 10;
// main view // main view
this.m_oMainView = null; this.m_oMainView = null;
...@@ -320,7 +321,7 @@ function CEditorPage(api) ...@@ -320,7 +321,7 @@ function CEditorPage(api)
this.Splitter2PosMax = 100; this.Splitter2PosMax = 100;
var ScrollWidthMm = this.ScrollWidthPx * g_dKoef_pix_to_mm; var ScrollWidthMm = this.ScrollWidthPx * g_dKoef_pix_to_mm;
var ScrollWidthMm9 = 9 * g_dKoef_pix_to_mm; var ScrollWidthMm9 = 10 * g_dKoef_pix_to_mm;
this.Thumbnails.m_oWordControl = this; this.Thumbnails.m_oWordControl = this;
......
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