@progress/telerik-jquery-report-viewer
Version:
Progress® Telerik® Report Viewer for jQuery
623 lines (618 loc) • 21.9 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var utils = require('./utils.js');
var domUtils = require('./domUtils.js');
var stringResources = require('./stringResources.js');
var touch = require('./touch.js');
var scroll = require('./scroll.js');
var uiFreezeCoordinator = require('./uiFreezeCoordinator.js');
var enums = require('./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$1 = $.extend({}, scroll.Scroll);
var uiFreezeCoordinator$1 = null;
init();
if (scroll$1) {
scroll$1.init(placeholder, options);
}
function init() {
replaceStringResources($placeholder);
}
function replaceStringResources($pagesArea) {
$pagesArea.attr("aria-label", stringResources.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() === enums.PageModes.CONTINUOUS_SCROLL) {
scroll$1.enable();
} else {
scroll$1.disable();
}
controller.refreshReport(true);
}).reportSourceChanged(function() {
isNewReportSource = true;
navigateToPageOnDocReady = null;
navigateToElementOnDocReady = null;
documentReady = false;
}).beforeLoadParameters(function(event, initial) {
if (initial) {
showError(stringResources.stringResources.loadingReport);
}
}).beforeLoadReport(function() {
documentReady = false;
if (!navigateToPageOnDocReady) {
navigateToPageOnDocReady = 1;
}
clearPendingTimeoutIds();
clear();
disablePagesArea(true);
showError(stringResources.stringResources.loadingReport);
}).beginLoadReport(function(event, args) {
documentReady = true;
invalidateCurrentlyLoadedPage();
}).reportLoadProgress(function(event, args) {
navigateWhenPageAvailable(navigateToPageOnDocReady, args.pageCount);
showError(utils.stringFormat(stringResources.stringResources.loadingReportPagesInProgress, [args.pageCount]));
}).reportLoadComplete(function(event, args) {
if (0 === args.pageCount) {
clearPage();
showError(stringResources.stringResources.noPageToDisplay);
} else {
navigateOnLoadComplete(navigateToPageOnDocReady, args.pageCount);
showError(utils.stringFormat(stringResources.stringResources.loadedReportPagesComplete, [args.pageCount]));
showErrorTimeoutId = window.setTimeout(showError, 2e3);
enableInteractivity();
}
if (args.containsFrozenContent && !uiFreezeCoordinator$1) {
uiFreezeCoordinator$1 = $.extend({}, uiFreezeCoordinator.UIFreezeCoordinator);
if (controller.getViewMode() === enums.ViewModes.INTERACTIVE) {
uiFreezeCoordinator$1.init($placeholder);
}
}
}).navigateToPage(function(event, pageNumber, targetElement) {
navigateToPage(pageNumber, targetElement);
}).pageReady(function(event, page) {
if (controller.getPageMode() === enums.PageModes.SINGLE_PAGE) {
if (scroll$1.isEnabled()) {
scroll$1.disable();
}
setPageContent(page);
} else {
scroll$1.renderPage(page);
}
if (!reportPageIsLoaded) {
reportPageIsLoaded = true;
}
if (showPageAreaImage) {
clearPageAreaImage();
}
if (controller.getViewMode() === enums.ViewModes.INTERACTIVE && uiFreezeCoordinator$1) {
uiFreezeCoordinator$1.init($placeholder);
}
disablePagesArea(false);
}).error(function(event, error) {
disablePagesArea(false);
clearPage();
showError(error);
}).showNotification(function(event, args) {
showError(stringResources.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.stringResources.loadingReport);
}).scrollPageReady(function(event, args) {
setScrollablePage(args);
}).missingOrInvalidParameters(function(event, args) {
if (options.initialPageAreaImageUrl && !reportPageIsLoaded) {
clearPage();
setPageAreaImage();
}
}).renderingStopped(function() {
clear(true);
showError(stringResources.stringResources.renderingCanceled);
});
controller.setDocumentMapVisible(function() {
if (shouldAutosizePage()) {
setTimeout(function() {
updatePageDimensions();
});
}
}).setParametersAreaVisible(function() {
if (shouldAutosizePage()) {
setTimeout(function() {
updatePageDimensions();
});
}
});
function enableTouch(dom) {
var allowSwipeLeft;
var allowSwipeRight;
touch.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: enums.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 !== [enums.ScaleModes.FIT_PAGE, enums.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() === enums.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$1.isEnabled() && !targetElement) {
scroll$1.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$1.isEnabled() && pageNumber) {
scroll$1.navigateToElement(offsetTop, pageNumber);
} else {
container.scrollTop = offsetTop;
container.scrollLeft = offsetLeft;
}
} else {
if (scroll$1.isEnabled() && pageNumber) {
scroll$1.navigateToElement($placeholder.find('[data-page="' + pageNumber + '"]')[0].offsetTop, pageNumber);
}
}
}
}
function findNextFocusableElement(element) {
if (!element || element.length === 0) {
return null;
}
var num = utils.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, 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 = domUtils.getMargins($target);
var borders = domUtils.getBorderWidth($page);
var padding = domUtils.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 === enums.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 === enums.ScaleModes.FIT_PAGE_WIDTH) {
scale = scaleW;
} else if (!scale || scaleMode === enums.ScaleModes.FIT_PAGE) {
scale = Math.min(scaleW, scaleH);
}
if (uiFreezeCoordinator$1) {
uiFreezeCoordinator$1.setScaleFactor(scale);
}
$target.data("pageScale", scale);
$page.data("pageScale", scale);
if (!pageSkeletonContent) {
domUtils.scale($pageContent, scale, scale);
}
$page.css({
"height": scale * pageHeight,
"width": scale * 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$1.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 = utils.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() === enums.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() === enums.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(utils.stringFormat(pageAreaImageStyle, [options.initialPageAreaImageUrl]));
pageStyles.appendTo("head");
showPageAreaImage = true;
}
function clearPageAreaImage() {
$("#" + pageAreaImageID).remove();
}
}
exports.PagesArea = PagesArea;