pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-23 18:54:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

[se/embed] dynamic scroll calculations, update styles, add elements to another .html files

Browse Source
This commit is contained in:
Konstantin Kireyev
2024-04-25 11:52:22 +05:00
parent e5a8242fbd
commit 026242c8dd
6 changed files with 59 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/spreadsheeteditor/embed/index.html
View File

@ -224,9 +224,9 @@
<div id="editor_sdk" class="sdk-view" style="overflow: hidden;" tabindex="-1"></div>
<div id="worksheet-container" class="worksheet-list-container">
<div class="worksheet-list-buttons">
<button id="worksheet-list-button-prev" class="svg-icon search-arrow-left" disabled>
<button id="worksheet-list-button-prev" class="control-btn svg-icon search-arrow-left" disabled>
</button>
<button id="worksheet-list-button-next" class="svg-icon search-arrow-right" disabled>
<button id="worksheet-list-button-next" class="control-btn svg-icon search-arrow-right" disabled>
</button>
</div>
<ul id="worksheets" class="worksheet-list"></ul>

14
apps/spreadsheeteditor/embed/index.html.deploy
View File

@ -205,10 +205,18 @@
}
</script>
<div class="viewer">
<div id="editor_sdk" class="sdk-view" style="overflow: hidden;" tabindex="-1"></div>
<ul id="worksheets" class="worksheet-list"></ul>
<div class="viewer">
<div id="editor_sdk" class="sdk-view" style="overflow: hidden;" tabindex="-1"></div>
<div id="worksheet-container" class="worksheet-list-container">
<div class="worksheet-list-buttons">
<button id="worksheet-list-button-prev" class="control-btn svg-icon search-arrow-left" disabled>
</button>
<button id="worksheet-list-button-next" class="control-btn svg-icon search-arrow-right" disabled>
</button>
</div>
<ul id="worksheets" class="worksheet-list"></ul>
</div>
</div>
<div class="overlay-controls" style="margin-left: -32px">
<ul class="left">

10
apps/spreadsheeteditor/embed/index_loader.html
View File

@ -286,7 +286,15 @@
<div class="viewer">
<div id="editor_sdk" class="sdk-view" style="overflow: hidden;" tabindex="-1"></div>
<ul id="worksheets" class="worksheet-list"></ul>
<div id="worksheet-container" class="worksheet-list-container">
<div class="worksheet-list-buttons">
<button id="worksheet-list-button-prev" class="control-btn svg-icon search-arrow-left" disabled>
</button>
<button id="worksheet-list-button-next" class="control-btn svg-icon search-arrow-right" disabled>
</button>
</div>
<ul id="worksheets" class="worksheet-list"></ul>
</div>
</div>
<div class="overlay-controls" style="margin-left: -32px">

14
apps/spreadsheeteditor/embed/index_loader.html.deploy
View File

@ -270,10 +270,18 @@
'</div>');
</script>
<div class="viewer">
<div id="editor_sdk" class="sdk-view" style="overflow: hidden;" tabindex="-1"></div>
<ul id="worksheets" class="worksheet-list"></ul>
<div class="viewer">
<div id="editor_sdk" class="sdk-view" style="overflow: hidden;" tabindex="-1"></div>
<div id="worksheet-container" class="worksheet-list-container">
<div class="worksheet-list-buttons">
<button id="worksheet-list-button-prev" class="control-btn svg-icon search-arrow-left" disabled>
</button>
<button id="worksheet-list-button-next" class="control-btn svg-icon search-arrow-right" disabled>
</button>
</div>
<ul id="worksheets" class="worksheet-list"></ul>
</div>
</div>
<div class="overlay-controls" style="margin-left: -32px">
<ul class="left">

32
apps/spreadsheeteditor/embed/js/ApplicationController.js
View File

@ -229,11 +229,16 @@ SSE.ApplicationController = new(function(){
$(item).appendTo($box).on('click', handleWorksheet);
}
setActiveWorkSheet(api.asc_getActiveWorksheetIndex());
}
function setupScrollButtons() {
var $container = $('#worksheet-container');
var $prevButton = $('#worksheet-list-button-prev');
var $nextButton = $('#worksheet-list-button-next');
var $box = $('#worksheets');
var handleScroll = function() {
var handleScrollButtonsState = function() {
if ($container[0].scrollWidth > $container[0].clientWidth) {
var scrollLeft = $container.scrollLeft();
var scrollWidth = $container[0].scrollWidth;
@ -255,17 +260,22 @@ SSE.ApplicationController = new(function(){
}
};
$container.on('scroll', handleScroll);
$(window).on('resize', handleScroll);
$container.on('scroll', handleScrollButtonsState);
$(window).on('resize', handleScrollButtonsState);
handleScroll();
handleScrollButtonsState();
var buttonWidth = $('.worksheet-list-buttons').outerWidth();
$prevButton.on('click', function() {
$($box.children().get().reverse()).each(function () {
var $tab = $(this);
var left = $tab.position().left - 62;
var offsetAdjust = $tab.outerWidth() * buttonWidth / $box.outerWidth() * 0.05;
var left = $tab.position().left - buttonWidth;
if (left < 0) {
$container.scrollLeft($container.scrollLeft() + left - 26);
$container.scrollLeft($container.scrollLeft() + left + offsetAdjust);
return false;
}
});
@ -275,15 +285,16 @@ SSE.ApplicationController = new(function(){
var rightBound = $container.width();
$box.children().each(function () {
var $tab = $(this);
var offsetAdjust = $tab.outerWidth() * rightBound / $box.outerWidth() * 0.05;
var right = $tab.position().left + $tab.outerWidth();
if (right > rightBound) {
$container.scrollLeft($container.scrollLeft() + right - rightBound + ($container.width() > 400 ? 20 : 5));
$container.scrollLeft($container.scrollLeft() + right - rightBound + offsetAdjust);
return false;
}
});
});
setActiveWorkSheet(api.asc_getActiveWorksheetIndex());
}
function onDownloadUrl(url, fileType) {
@ -492,6 +503,8 @@ SSE.ApplicationController = new(function(){
}
});
// setupScrollButtons();
Common.Gateway.documentReady();
Common.Analytics.trackEvent('Load', 'Complete');
}
@ -564,6 +577,7 @@ SSE.ApplicationController = new(function(){
onDocumentContentReady();
onSheetsChanged();
setupScrollButtons();
break;
}

22
apps/spreadsheeteditor/embed/resources/less/application.less
View File

@ -19,27 +19,11 @@
.worksheet-list-buttons {
display: flex;
padding: 2px 12px 0 10px;
padding: 1px 12px;
height: 24px;
position: fixed;
background: #f7f7f7;
button {
display: inline-block;
position: relative;
border: 0;
min-width: 20px;
border-radius: 1px;
&:disabled {
opacity: 0.4;
cursor: default;
}
}
button:hover:not(:disabled) {
background-color: #e8e8e8;
}
border-right: 1px solid #c0c0cd;
}
@media screen and (min--moz-device-pixel-ratio:0) {
@ -121,7 +105,7 @@
padding: 0;
margin: 0;
white-space: nowrap;
margin-left: 62px;
margin-left: 68px;
li {
display: inline-block;