From 026242c8dd00a3391ac46310f59c9c91d1269400 Mon Sep 17 00:00:00 2001 From: Konstantin Kireyev Date: Thu, 25 Apr 2024 11:52:22 +0500 Subject: [PATCH] [se/embed] dynamic scroll calculations, update styles, add elements to another .html files --- apps/spreadsheeteditor/embed/index.html | 4 +-- .../spreadsheeteditor/embed/index.html.deploy | 14 ++++++-- .../spreadsheeteditor/embed/index_loader.html | 10 +++++- .../embed/index_loader.html.deploy | 14 ++++++-- .../embed/js/ApplicationController.js | 32 +++++++++++++------ .../embed/resources/less/application.less | 22 ++----------- 6 files changed, 59 insertions(+), 37 deletions(-) diff --git a/apps/spreadsheeteditor/embed/index.html b/apps/spreadsheeteditor/embed/index.html index 760e242090..d6258c016a 100644 --- a/apps/spreadsheeteditor/embed/index.html +++ b/apps/spreadsheeteditor/embed/index.html @@ -224,9 +224,9 @@
- -
diff --git a/apps/spreadsheeteditor/embed/index.html.deploy b/apps/spreadsheeteditor/embed/index.html.deploy index 65013a74ca..a45bc63a83 100644 --- a/apps/spreadsheeteditor/embed/index.html.deploy +++ b/apps/spreadsheeteditor/embed/index.html.deploy @@ -205,10 +205,18 @@ } -
-
-
    +
    +
    +
    +
    + + +
    +
      +
        diff --git a/apps/spreadsheeteditor/embed/index_loader.html b/apps/spreadsheeteditor/embed/index_loader.html index b566166412..bea3fba963 100644 --- a/apps/spreadsheeteditor/embed/index_loader.html +++ b/apps/spreadsheeteditor/embed/index_loader.html @@ -286,7 +286,15 @@
        -
          +
          +
          + + +
          +
            +
            diff --git a/apps/spreadsheeteditor/embed/index_loader.html.deploy b/apps/spreadsheeteditor/embed/index_loader.html.deploy index 50e66e1569..65dd8ba7e4 100644 --- a/apps/spreadsheeteditor/embed/index_loader.html.deploy +++ b/apps/spreadsheeteditor/embed/index_loader.html.deploy @@ -270,10 +270,18 @@ '
            '); -
            -
            -
              +
              +
              +
              +
              + + +
              +
                +
                  diff --git a/apps/spreadsheeteditor/embed/js/ApplicationController.js b/apps/spreadsheeteditor/embed/js/ApplicationController.js index a4fba466f0..9c35c4e82c 100644 --- a/apps/spreadsheeteditor/embed/js/ApplicationController.js +++ b/apps/spreadsheeteditor/embed/js/ApplicationController.js @@ -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; } diff --git a/apps/spreadsheeteditor/embed/resources/less/application.less b/apps/spreadsheeteditor/embed/resources/less/application.less index 535722c7b8..edc715e624 100644 --- a/apps/spreadsheeteditor/embed/resources/less/application.less +++ b/apps/spreadsheeteditor/embed/resources/less/application.less @@ -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;