@progress/telerik-jquery-report-viewer/dist/es/reportViewer.js

Progress® Telerik® Report Viewer for jQuery

import { rTrim, generateGuidString, isApplicationExceptionInstance, stringFormat, escapeHtml, logError, loadScript } from './utils.js';
import { stringResources } from './stringResources.js';
import { ServiceClient } from './serviceClient.js';
import { ReportViewerController } from './controller.js';
import { HistoryManager } from './history.js';
import { Binder } from './binder.js';
import { CommandSet } from './commandSet.js';
import { UIController } from './uiController.js';
import { Accessibility } from './accessibility.js';
import { DocumentMapArea } from './documentMapArea.js';
import { ParametersArea } from './parametersArea.js';
import { PagesArea } from './pagesArea.js';
import { MainMenu } from './mainMenu.js';
import { Search } from './search.js';
import { SendEmail } from './sendEmail.js';
import { SideMenu } from './sideMenu.js';
import { Events } from './events.js';
import { PerspectiveManager } from './perspectives.js';
import { ScaleModes, ViewModes, PageModes, ParametersAreaPositions, DocumentMapAreaPositions, ParameterEditorTypes } from './enums.js';
import { GlobalSettings } from './globalSettings.js';
import { MemStorage } from './mem-storage.js';
import { TemplateCache } from './template-cache.js';
import { ReportViewerSettings } from './report-viewer/report-viewer-settings.js';
import { LinkButton } from './toolbar/link-button.js';
import { PageNumberInput } from './toolbar/page-number-input.js';
import { PageCountLabel } from './toolbar/page-count-label.js';

const Instances = GlobalSettings.viewerInstances;
function getDefaultOptions(serviceUrl, version) {
  return {
    id: null,
    serviceUrl: null,
    templateUrl: rTrim(serviceUrl, "\\/") + "/resources/templates/telerikReportViewerTemplate-" + version + ".html/",
    reportSource: null,
    reportServer: null,
    authenticationToken: null,
    sendEmail: null,
    scale: 1,
    scaleMode: ScaleModes.FIT_PAGE,
    viewMode: ViewModes.INTERACTIVE,
    pageMode: PageModes.CONTINUOUS_SCROLL,
    parametersAreaPosition: ParametersAreaPositions.RIGHT,
    documentMapAreaPosition: DocumentMapAreaPositions.LEFT,
    parameters: {
      editors: {
        multiSelect: ParameterEditorTypes.LIST_VIEW,
        singleSelect: ParameterEditorTypes.LIST_VIEW
      }
    },
    persistSession: false,
    parameterEditors: [],
    disabledButtonClass: null,
    checkedButtonClass: null,
    parametersAreaVisible: true,
    documentMapVisible: true,
    enableAccessibility: false,
    searchMetadataOnDemand: false,
    initialPageAreaImageUrl: null,
    keepClientAlive: true
  };
}
function ReportViewer(dom, options) {
  var svcApiUrl = options.serviceUrl;
  var reportServerUrlSVCApiUrl = "";
  if (options.reportServer) {
    reportServerUrlSVCApiUrl = rTrim(options.reportServer.url, "\\/");
    svcApiUrl = reportServerUrlSVCApiUrl + "/api/reports";
  }
  var $placeholder = $(dom);
  var templates = {};
  var persistanceKey = options.id || `trv_${dom.id}`;
  var accessibility;
  var settings = {};
  var client = {};
  var controller = {};
  var perspectiveManager = {};
  var history = {};
  var commands = {};
  var viewer = {};
  var serviceClientOptions = {};
  var reportServerUrl = "";
  options.viewerSelector = "reportViewer-" + generateGuidString();
  $placeholder.attr("data-selector", options.viewerSelector);
  if (!validateOptions(options)) {
    return;
  }
  var version = "19.0.25.313";
  options = $.extend({}, getDefaultOptions(svcApiUrl, version), options);
  settings = new ReportViewerSettings(
    persistanceKey,
    options.persistSession ? window.sessionStorage : new MemStorage(),
    {
      scale: options.scale,
      scaleMode: options.scaleMode,
      printMode: options.printMode ? options.printMode : options.directPrint,
      enableAccessibility: options.enableAccessibility,
      searchMetadataOnDemand: options.searchMetadataOnDemand,
      sendEmail: options.sendEmail,
      parametersAreaPosition: options.parametersAreaPosition,
      documentMapAreaPosition: options.documentMapAreaPosition,
      keepClientAlive: options.keepClientAlive
    }
  );
  if (options.reportServer) {
    reportServerUrl = rTrim(options.reportServer.url, "\\/");
    serviceClientOptions.serviceUrl = reportServerUrl + "/api/reports";
    serviceClientOptions.loginInfo = {
      url: reportServerUrl + "/Token",
      username: options.reportServer.username,
      password: options.reportServer.password
    };
  } else {
    serviceClientOptions.serviceUrl = options.serviceUrl;
  }
  client = new ServiceClient(serviceClientOptions);
  controller = options.controller;
  if (!controller) {
    controller = new ReportViewerController({
      serviceClient: client,
      settings
    });
  } else {
    controller.updateSettings(settings);
  }
  history = new HistoryManager({
    controller,
    settings
  });
  commands = new CommandSet({
    controller,
    history
  });
  new UIController({
    controller,
    history,
    commands
  });
  viewer = {
    stringResources,
    refreshReport: function(ignoreCache) {
      if (arguments.length === 0) {
        ignoreCache = true;
      }
      controller.refreshReport(ignoreCache, true);
      return viewer;
    },
    reportSource: function(rs) {
      if (rs || rs === null) {
        controller.setReportSource(rs);
        controller.refreshReport(false, true);
        return viewer;
      }
      return controller.getReportSource();
    },
    clearReportSource: function() {
      controller.clearReportSource();
      return viewer;
    },
    viewMode: function(vm) {
      if (vm) {
        controller.setViewMode(vm);
        return viewer;
      }
      return controller.getViewMode();
    },
    pageMode: function(psm) {
      if (psm) {
        controller.setPageMode(psm);
        return viewer;
      }
      return controller.getPageMode();
    },
    printMode: function(pm) {
      if (pm) {
        controller.setPrintMode(pm);
        return viewer;
      }
      return controller.getPrintMode();
    },
    scale: function({ scale, scaleMode } = {}) {
      if (scale || scaleMode) {
        controller.setScale(scale || controller.getScale());
        controller.setScaleMode(scaleMode || controller.getScaleMode());
        return viewer;
      }
      return {
        scale: controller.getScale(),
        scaleMode: controller.getScaleMode()
      };
    },
    currentPage: function() {
      return controller.getCurrentPageNumber();
    },
    pageCount: function() {
      return controller.getPageCount();
    },
    parametersAreaVisible: function(visible) {
      controller.setParametersAreaVisible({ visible });
    },
    getReportParameters: function() {
      return controller.getReportParameters();
    },
    isReportAutoRun: function() {
      return controller.isReportAutoRun();
    },
    authenticationToken: function(token) {
      if (token) {
        controller.setAuthenticationToken(token);
      }
      return viewer;
    },
    bind: function(eventName, eventHandler) {
      eventBinder(eventName, eventHandler, true);
    },
    unbind: function(eventName, eventHandler) {
      eventBinder(eventName, eventHandler, false);
    },
    accessibilityKeyMap: function(keyMap) {
      if (accessibility) {
        if (keyMap) {
          accessibility.setKeyMap(keyMap);
          return viewer;
        }
        return accessibility.getKeyMap();
      }
      return void 0;
    },
    commands,
    dispose: function() {
      controller.dispose();
      if (perspectiveManager) {
        perspectiveManager.dispose();
      }
    }
  };
  function validateOptions(options2) {
    if (!options2) {
      $placeholder.text("The report viewer configuration options are not initialized.");
      return false;
    }
    if (options2.reportServer) {
      if (!options2.reportServer.url) {
        $placeholder.text("The report server URL is not specified.");
        return false;
      }
    } else {
      if (!options2.serviceUrl) {
        $placeholder.text("The serviceUrl is not specified.");
        return false;
      }
    }
    return true;
  }
  function eventBinder(eventName, eventHandler, bind) {
    if (typeof eventHandler === "function") {
      if (bind) {
        $(viewer).on(eventName, { sender: viewer }, eventHandler);
      } else {
        $(viewer).off(eventName, eventHandler);
      }
    } else if (!eventHandler && !bind) {
      $(viewer).off(eventName);
    }
  }
  function attachEvents() {
    var eventMap = {
      EXPORT_BEGIN: controller.Events.EXPORT_STARTED,
      EXPORT_END: controller.Events.EXPORT_DOCUMENT_READY,
      PRINT_BEGIN: controller.Events.PRINT_STARTED,
      PRINT_END: controller.Events.PRINT_DOCUMENT_READY,
      RENDERING_BEGIN: controller.Events.BEFORE_LOAD_REPORT,
      RENDERING_END: controller.Events.REPORT_LOAD_COMPLETE,
      PAGE_READY: controller.Events.PAGE_READY,
      ERROR: controller.Events.ERROR,
      UPDATE_UI: controller.Events.UPDATE_UI,
      INTERACTIVE_ACTION_EXECUTING: controller.Events.INTERACTIVE_ACTION_EXECUTING,
      INTERACTIVE_ACTION_ENTER: controller.Events.INTERACTIVE_ACTION_ENTER,
      INTERACTIVE_ACTION_LEAVE: controller.Events.INTERACTIVE_ACTION_LEAVE,
      VIEWER_TOOLTIP_OPENING: controller.Events.TOOLTIP_OPENING,
      SEND_EMAIL_BEGIN: controller.Events.SEND_EMAIL_STARTED,
      SEND_EMAIL_END: controller.Events.SEND_EMAIL_READY,
      PARAMETERS_LOADED: controller.Events.PARAMETERS_LOADED
    };
    var $viewer = $(viewer);
    for (const [viewerEvent, controllerEvent] of Object.entries(eventMap)) {
      controller.on(controllerEvent, function(e, args) {
        $viewer.trigger(viewerEvent, args);
      });
    }
  }
  function attachEventHandlers() {
    eventBinder(Events.EXPORT_BEGIN, options.exportBegin, true);
    eventBinder(Events.EXPORT_END, options.exportEnd, true);
    eventBinder(Events.PRINT_BEGIN, options.printBegin, true);
    eventBinder(Events.PRINT_END, options.printEnd, true);
    eventBinder(Events.RENDERING_BEGIN, options.renderingBegin, true);
    eventBinder(Events.RENDERING_END, options.renderingEnd, true);
    eventBinder(Events.PAGE_READY, options.pageReady, true);
    eventBinder(Events.ERROR, options.error, true);
    eventBinder(Events.UPDATE_UI, options.updateUi, true);
    eventBinder(Events.INTERACTIVE_ACTION_EXECUTING, options.interactiveActionExecuting, true);
    eventBinder(Events.INTERACTIVE_ACTION_ENTER, options.interactiveActionEnter, true);
    eventBinder(Events.INTERACTIVE_ACTION_LEAVE, options.interactiveActionLeave, true);
    eventBinder(Events.VIEWER_TOOLTIP_OPENING, options.viewerToolTipOpening, true);
    eventBinder(Events.SEND_EMAIL_BEGIN, options.sendEmailBegin, true);
    eventBinder(Events.SEND_EMAIL_END, options.sendEmailEnd, true);
    eventBinder(Events.PARAMETERS_LOADED, options.parametersLoaded, true);
  }
  function init() {
    $placeholder.html(templates["trv-report-viewer"]);
    Binder.bind(
      $placeholder,
      {
        controller,
        commands,
        templates
      },
      options
    );
    perspectiveManager = new PerspectiveManager(dom, controller);
    perspectiveManager.attach();
    initSplitter();
    attachEvents();
    attachEventHandlers();
    initFromStorage();
    initAccessibility(options);
  }
  function initSplitter() {
    var parameterAreaPaneOptions = {
      max: "500px",
      min: "50px",
      size: "210px",
      collapsible: true
    };
    var parameterAreaTemplate = $placeholder.find(".trv-parameters-area");
    var parameterAreaPanes = [{}];
    var documentMapPaneOptions = {
      max: "500px",
      min: "50px",
      size: "210px",
      collapsible: true,
      collapsed: true
    };
    var documentMapTemplate = $placeholder.find(".trv-document-map");
    var documentMapPanes = [{}];
    var orientation = "horizontal";
    if (options.documentMapAreaPosition === DocumentMapAreaPositions.RIGHT) {
      documentMapTemplate.insertAfter($placeholder.find(".trv-pages-area"));
      documentMapPanes.push(documentMapPaneOptions);
    } else {
      documentMapPanes.unshift(documentMapPaneOptions);
    }
    if (options.parametersAreaPosition === ParametersAreaPositions.TOP || options.parametersAreaPosition === ParametersAreaPositions.BOTTOM) {
      orientation = "vertical";
      parameterAreaTemplate.addClass("-vertical");
      parameterAreaPaneOptions.size = "130px";
    }
    if (options.parametersAreaPosition === ParametersAreaPositions.LEFT || options.parametersAreaPosition === ParametersAreaPositions.TOP) {
      parameterAreaTemplate.insertBefore($placeholder.find(".trv-document-map-splitter"));
      parameterAreaPanes.unshift(parameterAreaPaneOptions);
    } else {
      parameterAreaPanes.push(parameterAreaPaneOptions);
    }
    try {
      var documentMapSplitter = $placeholder.find(".trv-document-map-splitter").kendoSplitter({
        panes: documentMapPanes,
        expand: function(e) {
          setSplitterPaneVisibility(e.pane, true);
        },
        collapse: function(e) {
          setSplitterPaneVisibility(e.pane, false);
        },
        resize: function(e) {
        }
      }).data("kendoSplitter");
    } catch (e) {
      console.error("Instantiation of Kendo Splitter as Document Map splitter threw an exception", e);
      throw e;
    }
    try {
      var parametersSplitter = $placeholder.find(".trv-parameters-splitter").kendoSplitter({
        panes: parameterAreaPanes,
        orientation,
        expand: function(e) {
          setSplitterPaneVisibility(e.pane, true);
        },
        collapse: function(e) {
          setSplitterPaneVisibility(e.pane, false);
        },
        resize: function(e) {
        }
      }).data("kendoSplitter");
    } catch (e) {
      console.error("Instantiation of Kendo Splitter as Parameters area splitter threw an exception", e);
      throw e;
    }
    var parametersSplitterInstance = {
      id: options.viewerSelector + "-parameters-splitter",
      instance: parametersSplitter
    };
    var documentMapSplitterInstance = {
      id: options.viewerSelector + "-document-map-splitter",
      instance: documentMapSplitter
    };
    Instances.push(parametersSplitterInstance);
    Instances.push(documentMapSplitterInstance);
  }
  function setSplitterPaneVisibility(pane, visible) {
    var paneID = $(pane).attr("data-id");
    switch (paneID) {
      case "trv-document-map":
        controller.setDocumentMapVisible({
          visible
        });
        break;
      case "trv-parameters-area":
        controller.setParametersAreaVisible({
          visible
        });
        break;
    }
  }
  function initFromStorage() {
    var vm = settings.getViewMode();
    var psm = settings.getPageMode();
    var pm = settings.getPrintMode();
    var s = settings.getScale();
    var sm = settings.getScaleMode();
    var dm = settings.getDocumentMapVisible();
    var pa = settings.getParametersAreaVisible();
    settings.getAccessibilityKeyMap();
    controller.setViewMode(vm ? vm : options.viewMode);
    controller.setPageMode(psm ? psm : options.pageMode);
    controller.setPrintMode(pm ? pm : options.printMode);
    controller.setScale(s ? s : options.scale);
    controller.setScaleMode(sm ? sm : options.scaleMode);
    controller.setDocumentMapVisible({
      visible: dm ? dm : options.documentMapVisible
    });
    controller.setParametersAreaVisible({
      visible: pa ? pa : options.parametersAreaVisible
    });
    controller.printModeChanged(function() {
      settings.setPrintMode(controller.getPrintMode());
    });
    controller.viewModeChanged(function() {
      settings.setViewMode(controller.getViewMode());
    });
    controller.pageModeChanged(function() {
      settings.setPageMode(controller.getPageMode());
    });
    controller.scaleChanged(function(event, scale) {
      settings.setScale(scale);
    });
    controller.scaleModeChanged(function(event, scaleMode) {
      settings.setScaleMode(scaleMode);
    });
    controller.setSideMenuVisible(function(event, args) {
      window.setTimeout(function() {
        (args.visible ? $.fn.addClass : $.fn.removeClass).call($placeholder, "trv-side-menu-visible");
      }, 1);
    });
    controller.setDocumentMapVisible(function() {
      var args = {};
      controller.getDocumentMapState(args);
      settings.setDocumentMapVisible(args.visible);
    });
    controller.setParametersAreaVisible(function() {
      var args = {};
      controller.getParametersAreaState(args);
      settings.setParametersAreaVisible(args.visible);
    });
  }
  function initAccessibility(options2) {
    if (options2.enableAccessibility) {
      accessibility = new Accessibility({
        controller,
        templates
      });
      var am = options2.accessibilityKeyMap;
      if (am) {
        accessibility.setKeyMap(am);
      }
      settings.contentTabIndex = getTemplateContentTabIndex();
    }
  }
  function getTemplateContentTabIndex() {
    var pageAreaSelector = "div.trv-pages-area";
    try {
      var $pagesArea = $placeholder.find(pageAreaSelector);
      if ($pagesArea.length === 0) {
        throw "Selector " + pageAreaSelector + " did not return a result.";
      }
      return parseInt($pagesArea.attr("tabindex"));
    } catch (e) {
      if (console)
        console.log(e);
      return 0;
    }
  }
  function start() {
    var pendingRefresh = false;
    init();
    controller.reportLoadComplete(function() {
      if (options.documentMapVisible === false) {
        controller.setDocumentMapVisible({ visible: false });
      }
    });
    var rs = settings.getReportSource();
    if (rs !== void 0) {
      controller.setReportSource(rs);
      var pageNumber = settings.getPageNumber();
      if (pageNumber !== void 0) {
        controller.navigateToPage(pageNumber);
      }
      pendingRefresh = true;
    } else {
      if (options.viewMode) {
        controller.setViewMode(options.viewMode);
      }
      if (options.pageMode) {
        controller.setPageMode(options.pageMode);
      }
      if (options.reportSource) {
        controller.setReportSource(options.reportSource);
        pendingRefresh = true;
      }
    }
    if (typeof options.ready === "function") {
      options.ready.call(viewer);
    }
    if (pendingRefresh) {
      controller.refreshReport(false, true);
    }
  }
  function loadStyleSheets(styleSheets) {
    if (!styleSheets)
      return Promise.resolve();
    var $head = $("head");
    var currentStyleLinks = $head.find("link").map(function(i, e) {
      return e.outerHTML;
    }).toArray();
    var promises = [];
    Array.from(styleSheets).forEach((element) => {
      if (currentStyleLinks.indexOf(element) === -1) {
        promises.push(
          new Promise(function(resolve, reject) {
            var $link = $(element);
            $link.on("load", resolve);
            $link.on("onerror", function() {
              logError("error loading stylesheet " + element);
              resolve();
            });
            $head.append($link);
          })
        );
      }
    });
    return Promise.all(promises).then(controller.cssLoaded);
  }
  function browserSupportsAllFeatures() {
    return window.Promise;
  }
  function ensureKendo(version2) {
    if (window.kendo) {
      return Promise.resolve();
    }
    var kendoUrl = rTrim(svcApiUrl, "\\/") + "/resources/js/telerikReportViewer.kendo-" + version2 + ".min.js/";
    return loadScript(kendoUrl).catch(function(errorData) {
      logError("Kendo could not be loaded automatically. Make sure 'options.serviceUrl' / 'options.reportServer.url' is correct and accessible. The error is: " + errorData.error);
    });
  }
  function main(version2) {
    ensureKendo(version2).then(function() {
    }).then(function() {
      viewer.authenticationToken(options.authenticationToken);
      controller.getServiceVersion().catch(function(ex) {
        var errorOutput = isApplicationExceptionInstance(ex) ? ex.exceptionMessage : stringFormat(stringResources.errorServiceUrl, [escapeHtml(svcApiUrl)]);
        $placeholder.text(errorOutput);
        return Promise.reject();
      }).then(function(data) {
        if (data !== version2) {
          $placeholder.text(stringFormat(stringResources.errorServiceVersion, [data, version2]));
          return Promise.reject();
        }
        TemplateCache.load(options.templateUrl, svcApiUrl, client).catch(function() {
          $placeholder.text(stringFormat(stringResources.errorLoadingTemplates, [escapeHtml(options.templateUrl)]));
          return Promise.reject();
        }).then(function(result) {
          templates = result.templates;
          return loadStyleSheets(result.styleSheets);
        }).then(start);
      });
    });
  }
  if (browserSupportsAllFeatures()) {
    main(version);
  } else {
    throw "The current browser does not support the Promise feature which is required for using the Report Viewer.";
  }
  return viewer;
}
var pluginName = "telerik_ReportViewer";
$.fn[pluginName] = function(options) {
  if (this.selector && !options.selector) {
    options.selector = this.selector;
  }
  return this.each(function() {
    if (!$.data(this, pluginName)) {
      $.data(this, pluginName, new ReportViewer(this, options));
    }
  });
};
const plugins = [
  {
    name: "telerik_ReportViewer_DocumentMapArea",
    constructor: DocumentMapArea
  },
  {
    name: "telerik_ReportViewer_MainMenu",
    constructor: MainMenu
  },
  {
    name: "telerik_ReportViewer_PagesArea",
    constructor: PagesArea
  },
  {
    name: "telerik_ReportViewer_ParametersArea",
    constructor: ParametersArea
  },
  {
    name: "telerik_ReportViewer_SearchDialog",
    constructor: Search
  },
  {
    name: "telerik_ReportViewer_SendEmail",
    constructor: SendEmail
  },
  {
    name: "telerik_ReportViewer_SideMenu",
    constructor: SideMenu
  },
  {
    name: "telerik_ReportViewer_LinkButton",
    constructor: LinkButton
  },
  {
    name: "telerik_ReportViewer_PageNumberInput",
    constructor: PageNumberInput
  },
  {
    name: "telerik_ReportViewer_PageCountLabel",
    constructor: PageCountLabel
  }
];
plugins.forEach((plugin) => {
  $.fn[plugin.name] = function(options, otherOptions) {
    return this.each(function() {
      if (!$.data(this, plugin.name)) {
        $.data(this, plugin.name, new plugin.constructor(this, options, otherOptions));
      }
    });
  };
});

export { ReportViewer };