@progress/telerik-jquery-report-viewer 21.24.305 → 22.24.709

package/dist/es/pagesArea.js

@@ -0,0 +1,618 @@
+import { stringFormat, tryParseInt, escapeHtml } from './utils.js';
+import { getMargins, getBorderWidth, getPadding, scale } from './domUtils.js';
+import { stringResources } from './stringResources.js';
+import { TouchBehavior } from './touch.js';
+import { Scroll } from './scroll.js';
+import { UIFreezeCoordinator } from './uiFreezeCoordinator.js';
+import { PageModes, ViewModes, ScaleModes } from './enums.js';
+
+var defaultOptions = {};
+function PagesArea(placeholder, options, otherOptions) {
+  options = $.extend({}, defaultOptions, options, otherOptions);
+  var controller = options.controller;
+  if (!controller)
+    throw "No controller (telerikReportViewer.reportViewerController) has been specified.";
+  var $placeholder = $(placeholder);
+  var $pageContainer = $placeholder.find(".trv-page-container");
+  var pageContainer = $pageContainer[0];
+  var $pageWrapper = $placeholder.find(".trv-page-wrapper");
+  var pageWrapper = $pageWrapper[0];
+  var $errorMessage = $placeholder.find(".trv-error-message");
+  var actions;
+  var pendingElement;
+  var pageScaleMode = controller.getScaleMode();
+  var pageScale = controller.getScale();
+  var minPageScale = 0.1;
+  var maxPageScale = 8;
+  var documentReady = true;
+  var navigateToPageOnDocReady;
+  var navigateToElementOnDocReady;
+  var isNewReportSource;
+  var showErrorTimeoutId;
+  var showPageAreaImage = false;
+  var reportPageIsLoaded = false;
+  var pageAreaImageStyle = '.trv-page-container {background: #ffffff url("{0}") no-repeat center 50px}';
+  var pageAreaImageID = "trv-initial-image-styles";
+  var scroll = $.extend({}, Scroll);
+  var uiFreezeCoordinator = null;
+  init();
+  if (scroll) {
+    scroll.init(placeholder, options);
+  }
+  function init() {
+    replaceStringResources($placeholder);
+  }
+  function replaceStringResources($pagesArea) {
+    $pagesArea.attr("aria-label", stringResources[$pagesArea.attr("aria-label")]);
+  }
+  $(window).on("resize", function(event, args) {
+    if (shouldAutosizePage()) {
+      updatePageDimensions();
+    }
+  });
+  enableTouch($placeholder);
+  function clearPendingTimeoutIds() {
+    if (showErrorTimeoutId) {
+      window.clearTimeout(showErrorTimeoutId);
+    }
+  }
+  function invalidateCurrentlyLoadedPage() {
+    var page = findPage(navigateToPageOnDocReady);
+    if (page) {
+      pageNo(page, -1);
+    }
+  }
+  function navigateWhenPageAvailable(pageNumber, pageCount) {
+    if (pageNumber && pageNumber <= pageCount) {
+      navigateToPage(pageNumber, navigateToElementOnDocReady);
+    }
+  }
+  function navigateOnLoadComplete(pageNumber, pageCount) {
+    if (pageNumber) {
+      pageNumber = Math.min(pageNumber, pageCount);
+      navigateToPage(pageNumber, navigateToElementOnDocReady);
+    }
+  }
+  function clearPage() {
+    clear(isNewReportSource);
+    isNewReportSource = false;
+  }
+  controller.pageModeChanged(function() {
+    if (controller.getPageMode() === PageModes.CONTINUOUS_SCROLL) {
+      scroll.enable();
+    } else {
+      scroll.disable();
+    }
+    controller.refreshReport(true);
+  }).reportSourceChanged(function() {
+    isNewReportSource = true;
+    navigateToPageOnDocReady = null;
+    navigateToElementOnDocReady = null;
+    documentReady = false;
+  }).beforeLoadParameters(function(event, initial) {
+    if (initial) {
+      showError(stringResources.loadingReport);
+    }
+  }).beforeLoadReport(function() {
+    documentReady = false;
+    if (!navigateToPageOnDocReady) {
+      navigateToPageOnDocReady = 1;
+    }
+    clearPendingTimeoutIds();
+    clear();
+    disablePagesArea(true);
+    showError(stringResources.loadingReport);
+  }).beginLoadReport(function(event, args) {
+    documentReady = true;
+    invalidateCurrentlyLoadedPage();
+  }).reportLoadProgress(function(event, args) {
+    navigateWhenPageAvailable(navigateToPageOnDocReady, args.pageCount);
+    showError(stringFormat(stringResources.loadingReportPagesInProgress, [args.pageCount]));
+  }).reportLoadComplete(function(event, args) {
+    if (0 === args.pageCount) {
+      clearPage();
+      showError(stringResources.noPageToDisplay);
+    } else {
+      navigateOnLoadComplete(navigateToPageOnDocReady, args.pageCount);
+      showError(stringFormat(stringResources.loadedReportPagesComplete, [args.pageCount]));
+      showErrorTimeoutId = window.setTimeout(showError, 2e3);
+      enableInteractivity();
+    }
+    if (args.containsFrozenContent && !uiFreezeCoordinator) {
+      uiFreezeCoordinator = $.extend({}, UIFreezeCoordinator);
+      if (controller.getViewMode() === ViewModes.INTERACTIVE) {
+        uiFreezeCoordinator.init($placeholder);
+      }
+    }
+  }).navigateToPage(function(event, pageNumber, targetElement) {
+    navigateToPage(pageNumber, targetElement);
+  }).pageReady(function(event, page) {
+    if (controller.getPageMode() === PageModes.SINGLE_PAGE) {
+      if (scroll.isEnabled()) {
+        scroll.disable();
+      }
+      setPageContent(page);
+    } else {
+      scroll.renderPage(page);
+    }
+    if (!reportPageIsLoaded) {
+      reportPageIsLoaded = true;
+    }
+    if (showPageAreaImage) {
+      clearPageAreaImage();
+    }
+    if (controller.getViewMode() === ViewModes.INTERACTIVE && uiFreezeCoordinator) {
+      uiFreezeCoordinator.init($placeholder);
+    }
+    disablePagesArea(false);
+  }).error(function(event, error) {
+    disablePagesArea(false);
+    clearPage();
+    showError(error);
+  }).showNotification(function(event, args) {
+    showError(stringResources[args.stringResources]);
+  }).hideNotification(function(event, args) {
+    showError();
+  }).scaleChanged(function(event, scale) {
+    setPageScale({
+      scale,
+      scaleMode: controller.getScaleMode()
+    });
+  }).scaleModeChanged(function(event, scaleMode) {
+    setPageScale({
+      scale: controller.getScale(),
+      scaleMode
+    });
+  }).serverActionStarted(function() {
+    disablePagesArea(true);
+    showError(stringResources.loadingReport);
+  }).scrollPageReady(function(event, args) {
+    setScrollablePage(args);
+  }).missingOrInvalidParameters(function(event, args) {
+    if (options.initialPageAreaImageUrl && !reportPageIsLoaded) {
+      clearPage();
+      setPageAreaImage();
+    }
+  }).renderingStopped(function() {
+    clear(true);
+    showError(stringResources.renderingCanceled);
+  });
+  controller.setDocumentMapVisible(function() {
+    if (shouldAutosizePage()) {
+      setTimeout(function() {
+        updatePageDimensions();
+      });
+    }
+  }).setParametersAreaVisible(function() {
+    if (shouldAutosizePage()) {
+      setTimeout(function() {
+        updatePageDimensions();
+      });
+    }
+  });
+  function enableTouch(dom) {
+    var allowSwipeLeft;
+    var allowSwipeRight;
+    TouchBehavior(
+      dom,
+      {
+        swipe: function(e) {
+          var pageNumber = controller.getCurrentPageNumber();
+          if (allowSwipeLeft && e.direction === "left") {
+            if (pageNumber < controller.getPageCount()) {
+              controller.navigateToPage(pageNumber + 1);
+            }
+          } else if (allowSwipeRight && e.direction === "right") {
+            if (pageNumber > 1) {
+              controller.navigateToPage(pageNumber - 1);
+            }
+          }
+        },
+        pinch: function(e) {
+          var page = getCurrentPage();
+          var scale = $(page).data("pageScale") || pageScale;
+          var f = e.distance / e.lastDistance;
+          setPageScale({
+            scale: scale * f,
+            scaleMode: ScaleModes.SPECIFIC
+          });
+        },
+        doubletap: function(e) {
+          options.commands.toggleZoomMode.exec();
+        },
+        touchstart: function(e) {
+          var el = pageWrapper;
+          allowSwipeRight = 0 === el.scrollLeft;
+          allowSwipeLeft = el.scrollWidth - el.offsetWidth === el.scrollLeft;
+        }
+      }
+    );
+  }
+  function shouldAutosizePage() {
+    return -1 !== [ScaleModes.FIT_PAGE, ScaleModes.FIT_PAGE_WIDTH].indexOf(pageScaleMode);
+  }
+  function updatePageDimensions() {
+    for (var i = 0, children = $pageContainer.find(".trv-report-page"), len = children.length; i < len; i++) {
+      var pageNumber = parseInt($(children[i]).attr("data-page"));
+      setPageDimensions(children[i], pageScaleMode, pageScale, pageNumber);
+    }
+    controller.updatePageDimensionsReady();
+  }
+  function setPageScale({ scale, scaleMode }) {
+    pageScale = scale || pageScale;
+    pageScaleMode = scaleMode || pageScaleMode;
+    pageScale = Math.max(minPageScale, Math.min(maxPageScale, pageScale));
+    updatePageDimensions();
+  }
+  function clear(clearPageWrapper) {
+    disableInteractivity();
+    pendingElement = void 0;
+    if (clearPageWrapper) {
+      $pageWrapper.empty();
+    }
+    showError();
+  }
+  function getCurrentPage() {
+    return findPage(controller.getCurrentPageNumber());
+  }
+  function findPage(pageNumber) {
+    var result;
+    var allPages = $pageContainer.find(".trv-report-page");
+    if (controller.getPageMode() === PageModes.SINGLE_PAGE) {
+      result = Array.from(allPages).find((page) => {
+        return pageNo(page) === pageNumber;
+      });
+    } else {
+      result = Array.from(allPages).find((page) => {
+        var dataPageNumber = parseInt($(page).attr("data-page"));
+        return dataPageNumber === pageNumber;
+      });
+    }
+    return result;
+  }
+  function navigateToPage(pageNumber, targetElement) {
+    if (documentReady) {
+      navigateToPageCore(pageNumber, targetElement);
+    } else {
+      navigateToPageOnDocumentReady(pageNumber, targetElement);
+    }
+  }
+  function navigateToPageOnDocumentReady(pageNumber, targetElement) {
+    navigateToPageOnDocReady = pageNumber;
+    navigateToElementOnDocReady = targetElement;
+  }
+  function navigateToPageCore(pageNumber, targetElement) {
+    var page = findPage(pageNumber);
+    if (page) {
+      if (targetElement) {
+        navigateToElement(targetElement, pageNumber);
+      }
+      if (scroll.isEnabled() && !targetElement) {
+        scroll.navigateToElement(page.offsetTop, pageNumber);
+      }
+    } else {
+      pendingElement = targetElement;
+      beginLoadPage(pageNumber);
+    }
+  }
+  function navigateToElement(targetElement, pageNumber) {
+    if (targetElement) {
+      var el = $pageContainer.find("[data-" + targetElement.type + "-id=" + targetElement.id + "]")[0];
+      if (el) {
+        if (options.enableAccessibility) {
+          var $nextFocusable = findNextFocusableElement($(el));
+          if ($nextFocusable) {
+            $nextFocusable.focus();
+          }
+        }
+        var container = $pageContainer[0];
+        var offsetTop = 0;
+        var offsetLeft = 0;
+        while (el && el !== container) {
+          if ($(el).is(".trv-page-wrapper")) {
+            var scale = $(el).data("pageScale");
+            if (typeof scale === "number") {
+              offsetTop *= scale;
+              offsetLeft *= scale;
+            }
+          }
+          offsetTop += el.offsetTop;
+          offsetLeft += el.offsetLeft;
+          el = el.offsetParent;
+        }
+        if (scroll.isEnabled() && pageNumber) {
+          scroll.navigateToElement(offsetTop, pageNumber);
+        } else {
+          container.scrollTop = offsetTop;
+          container.scrollLeft = offsetLeft;
+        }
+      } else {
+        if (scroll.isEnabled() && pageNumber) {
+          scroll.navigateToElement($placeholder.find('[data-page="' + pageNumber + '"]')[0].offsetTop, pageNumber);
+        }
+      }
+    }
+  }
+  function findNextFocusableElement(element) {
+    if (!element || element.length === 0) {
+      return null;
+    }
+    var num = tryParseInt(element.attr("tabindex"));
+    if (!isNaN(num) && num > -1) {
+      return element;
+    }
+    return findNextFocusableElement(element.next());
+  }
+  function disablePagesArea(disable) {
+    (disable ? $.fn.addClass : $.fn.removeClass).call($placeholder, "trv-loading");
+  }
+  function showError(error) {
+    $errorMessage.text(error);
+    (error ? $.fn.addClass : $.fn.removeClass).call($placeholder, "trv-error");
+  }
+  function pageNo(page, no) {
+    var $page = page.$ ? page : $(page);
+    var dataKey = "pageNumber";
+    if (no === void 0) {
+      return $page.data(dataKey);
+    }
+    $page.data(dataKey, no);
+    return page;
+  }
+  function beginLoadPage(pageNumber) {
+    disablePagesArea(true);
+    window.setTimeout(controller.getReportPage.bind(controller, pageNumber), 1);
+    navigateToPageOnDocReady = null;
+  }
+  function setPageDimensions(page, scaleMode, scale$1, pageNumber) {
+    var $target = $(page);
+    var $page = pageNumber ? $target : $target.find("div.trv-report-page");
+    var $pageContent = $page.find("div.sheet");
+    var $pageSkeletonContent = $page.find("div.trv-skeleton-wrapper");
+    var pageContent = $pageContent[0] || $pageSkeletonContent[0];
+    var pageSkeletonContent = $pageSkeletonContent[0];
+    if (!pageContent) {
+      return;
+    }
+    var pageWidth;
+    var pageHeight;
+    var box = $target.data("box");
+    if (!box) {
+      var margins = getMargins($target);
+      var borders = getBorderWidth($page);
+      var padding = getPadding($page);
+      box = {
+        padLeft: margins.left + borders.left + padding.left,
+        padRight: margins.right + borders.right + padding.right,
+        padTop: margins.top + borders.top + padding.top,
+        padBottom: margins.bottom + borders.bottom + padding.bottom
+      };
+      $target.data("box", box);
+    }
+    if ($target.data("pageWidth") === void 0) {
+      pageWidth = pageContent.offsetWidth;
+      pageHeight = pageContent.offsetHeight;
+      $target.data("pageWidth", pageWidth);
+      $target.data("pageHeight", pageHeight);
+    } else {
+      pageWidth = $target.data("pageWidth");
+      pageHeight = $target.data("pageHeight");
+    }
+    var scrollBarV = pageHeight > pageWidth && scaleMode === ScaleModes.FIT_PAGE_WIDTH ? 20 : 0;
+    var scaleW = (pageContainer.clientWidth - scrollBarV - box.padLeft - box.padRight) / pageWidth;
+    var scaleH = (pageContainer.clientHeight - 1 - box.padTop - box.padBottom) / pageHeight;
+    if (scaleMode === ScaleModes.FIT_PAGE_WIDTH) {
+      scale$1 = scaleW;
+    } else if (!scale$1 || scaleMode === ScaleModes.FIT_PAGE) {
+      scale$1 = Math.min(scaleW, scaleH);
+    }
+    if (uiFreezeCoordinator) {
+      uiFreezeCoordinator.setScaleFactor(scale$1);
+    }
+    $target.data("pageScale", scale$1);
+    $page.data("pageScale", scale$1);
+    if (!pageSkeletonContent) {
+      scale($pageContent, scale$1, scale$1);
+    }
+    $page.css({
+      "height": scale$1 * pageHeight,
+      "width": scale$1 * pageWidth
+    });
+  }
+  function enableInteractivity() {
+    $pageContainer.on("click", "[data-reporting-action]", onInteractiveItemClick);
+    $pageContainer.on("mouseenter", "[data-reporting-action]", onInteractiveItemEnter);
+    $pageContainer.on("mouseleave", "[data-reporting-action]", onInteractiveItemLeave);
+    $pageContainer.on("mouseenter", "[data-tooltip-title],[data-tooltip-text]", onToolTipItemEnter);
+    $pageContainer.on("mouseleave", "[data-tooltip-title],[data-tooltip-text]", onToolTipItemLeave);
+  }
+  function disableInteractivity() {
+    $pageContainer.off("click", "[data-reporting-action]", onInteractiveItemClick);
+    $pageContainer.off("mouseenter", "[data-reporting-action]", onInteractiveItemEnter);
+    $pageContainer.off("mouseleave", "[data-reporting-action]", onInteractiveItemLeave);
+    $pageContainer.off("mouseenter", "[data-tooltip-title],[data-tooltip-text]", onToolTipItemEnter);
+    $pageContainer.off("mouseleave", "[data-tooltip-title],[data-tooltip-text]", onToolTipItemLeave);
+  }
+  function onInteractiveItemClick(event) {
+    var $eventTarget = $(this);
+    var actionId = $eventTarget.attr("data-reporting-action");
+    var action = getAction(actionId);
+    if (action) {
+      navigateToPageOnDocReady = getNavigateToPageOnDocReady(event, action.Type);
+      controller.executeReportAction({
+        element: event.currentTarget,
+        action,
+        cancel: false
+      });
+    }
+    event.stopPropagation();
+  }
+  function getNavigateToPageOnDocReady(event, actionType) {
+    if (scroll.isEnabled() && (actionType === "sorting" || actionType === "toggleVisibility")) {
+      return $(event.target).closest(".trv-report-page").attr("data-page") || controller.getCurrentPageNumber();
+    }
+    return controller.getCurrentPageNumber();
+  }
+  function onInteractiveItemEnter(args) {
+    var $t = $(this);
+    var actionId = $t.attr("data-reporting-action");
+    var a = getAction(actionId);
+    if (a !== null && args.currentTarget === this) {
+      controller.reportActionEnter({
+        element: args.currentTarget,
+        action: a
+      });
+    }
+  }
+  function onInteractiveItemLeave(args) {
+    var $t = $(this);
+    var actionId = $t.attr("data-reporting-action");
+    var a = getAction(actionId);
+    if (a !== null && args.currentTarget === this) {
+      controller.reportActionLeave({
+        element: args.currentTarget,
+        action: a
+      });
+    }
+  }
+  function getAction(actionId) {
+    if (actions) {
+      return Array.from(actions).find(function(action) {
+        return action.Id === actionId;
+      });
+    }
+    return null;
+  }
+  function onToolTipItemEnter(args) {
+    var $t = $(this);
+    var title = $t.attr("data-tooltip-title");
+    var text = $t.attr("data-tooltip-text");
+    if (!title && !text) {
+      return;
+    }
+    var toolTipArgs = {
+      element: args.currentTarget,
+      toolTip: {
+        title: title || "",
+        text: text || ""
+      },
+      cancel: false
+    };
+    controller.reportToolTipOpening(toolTipArgs);
+    if (toolTipArgs.cancel) {
+      return;
+    }
+    var content = applyToolTipTemplate(toolTipArgs);
+    var viewportElement = args.currentTarget.viewportElement;
+    var ktt = getToolTip($t, content);
+    ktt.show($t);
+    if (viewportElement && viewportElement.nodeName === "svg") {
+      positionToolTip(ktt, args);
+    }
+  }
+  function applyToolTipTemplate(toolTipArgs) {
+    var toolTipTemplate = options.templates["trv-pages-area-kendo-tooltip"];
+    var $container = $(toolTipTemplate);
+    var $titleSpan = $container.find(".trv-pages-area-kendo-tooltip-title");
+    var $textSpan = $container.find(".trv-pages-area-kendo-tooltip-text");
+    $titleSpan.html(replaceNewLineSymbols(toolTipArgs.toolTip.title));
+    $textSpan.html(replaceNewLineSymbols(toolTipArgs.toolTip.text));
+    return $container.clone().wrap("<p>").parent().html();
+  }
+  function replaceNewLineSymbols(tooltipText) {
+    tooltipText = escapeHtml(tooltipText);
+    tooltipText = tooltipText.replaceAll("\r\n", "<br>");
+    tooltipText = tooltipText.replaceAll("\n", "<br>");
+    return tooltipText;
+  }
+  function positionToolTip(toolTip, e) {
+    var x = e.pageX;
+    var y = e.pageY;
+    var container = toolTip.popup.element.closest("[role=region]");
+    container.css({
+      left: x + 10,
+      top: y + 5
+    });
+  }
+  function getToolTip(target, toolTipContent) {
+    var ktt = target.data("kendoTooltip");
+    if (!ktt) {
+      try {
+        ktt = target.kendoTooltip({
+          content: toolTipContent,
+          autohide: true,
+          callout: false
+        }).data("kendoTooltip");
+      } catch (e) {
+        console.error("Instantiation of Kendo Tooltip threw an exception", e);
+        throw e;
+      }
+    }
+    return ktt;
+  }
+  function onToolTipItemLeave(args) {
+    var $t = $(this);
+    var toolTip = $t.data("kendoTooltip");
+    if (toolTip) {
+      toolTip.hide();
+    }
+  }
+  function updatePageStyle(page) {
+    var styleId = "trv-" + controller.clientId() + "-styles";
+    $("#" + styleId).remove();
+    var pageStyles = $("<style id=" + styleId + "></style>");
+    pageStyles.append(page.pageStyles);
+    pageStyles.appendTo("head");
+  }
+  function setPageContent(page) {
+    actions = JSON.parse(page.pageActions);
+    updatePageStyle(page);
+    var pageNumber = page.pageNumber;
+    var wrapper = $($.parseHTML(page.pageContent));
+    var $pageContent = wrapper.find("div.sheet");
+    var $page = $('<div class="trv-report-page" data-page="' + pageNumber + '"></div>');
+    $pageContent.css("margin", 0);
+    $page.append($pageContent).append($('<div class="trv-page-overlay"></div>'));
+    var $target = $pageWrapper.empty().removeData().data("pageNumber", pageNumber).append($page);
+    controller.setCurrentPageNumber(pageNumber);
+    if (controller.getViewMode() === ViewModes.INTERACTIVE) {
+      $placeholder.removeClass("printpreview");
+      $placeholder.addClass("interactive");
+    } else {
+      $placeholder.removeClass("interactive");
+      $placeholder.addClass("printpreview");
+    }
+    setPageDimensions($target, pageScaleMode, pageScale);
+    $pageContainer.scrollTop(0);
+    $pageContainer.scrollLeft(0);
+    navigateToElement(pendingElement);
+  }
+  function setScrollablePage(args) {
+    var pageActions = JSON.parse(args.page.pageActions);
+    if (!actions) {
+      actions = pageActions;
+    } else {
+      actions = actions.concat(pageActions);
+    }
+    if (controller.getViewMode() === ViewModes.INTERACTIVE) {
+      $placeholder.removeClass("printpreview");
+      $placeholder.addClass("interactive");
+    } else {
+      $placeholder.removeClass("interactive");
+      $placeholder.addClass("printpreview");
+    }
+    setPageDimensions(args.target, pageScaleMode, pageScale, args.page.pageNumber);
+  }
+  function setPageAreaImage() {
+    var pageStyles = $("<style id=" + pageAreaImageID + "></style>");
+    clearPageAreaImage();
+    pageStyles.append(stringFormat(pageAreaImageStyle, [options.initialPageAreaImageUrl]));
+    pageStyles.appendTo("head");
+    showPageAreaImage = true;
+  }
+  function clearPageAreaImage() {
+    $("#" + pageAreaImageID).remove();
+  }
+}
+
+export { PagesArea };