analytics/webcontent/bi/js/admin/common/slideout/BasePane.js

"use strict";

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: admin
 * Copyright IBM Corp. 2015, 2018
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['underscore', 'q', 'doT', 'bi/commons/utils/BidiUtil', 'bi/commons/utils/Utils', 'bi/commons/ui/AccessibleView', 'bi/admin/common/ui/ToggleMenuBar', 'text!bi/admin/common/templates/BasePane.html', 'bi/admin/nls/StringResource'], function (_, Q, dot, BidiUtil, Utils, AccessibleView, ToggleMenuBar, htmlPane, StringResource) {
  //NOSONAR: needed for amd

  /**
   * Sample content view that extends the glass View class
   *
   */
  var BasePane = AccessibleView.extend({
    title: '',
    showHeader: true,
    showGobackButton: false,
    showSwitchViewButton: false,
    autoValidate: false,
    flexBody: true,
    isWideView: false,
    init: function init(options) {
      BasePane.inherited('init', this, arguments);
      $.extend(this, options);
      var basePaneInfo = {};
      basePaneInfo.strings = {
        'goback': StringResource.get('goback'),
        'switchViews': StringResource.get('switchViews')
      };
      var sHtml = dot.template(htmlPane)(basePaneInfo);
      this.$el.append(sHtml);
      this.$el.addClass('bi-admin-vflex bi-admin-fullheight');
    },
    _setTextDirection: function _setTextDirection(elems) {
      for (var i = 0; i < elems.length; i++) {
        BidiUtil.initElementForBidi(elems[i]);
      }
    },
    _autoValidate: function _autoValidate() {
      var self = this;

      if (!this.autoValidate) {
        return;
      }

      this.$el.find("[required]").on({
        blur: this._onBlur.bind(self),
        invalid: this._onInvalid,
        focus: this._onFocus
      });
    },
    _onBlur: function _onBlur(e) {
      if (this._checkSpace(e.target)) {
        this._checkScript(e.target);
      }
    },
    _onInvalid: function _onInvalid(e) {
      if (e.target.validity.valueMissing) {
        $(e.target.parentNode).append($("<p class='invalid'> </p>").append($("<label class='invalid'/>").text(StringResource.get("required"))));
      } else if (e.target.validity.typeMismatch || e.target.validity.patternMismatch) {
        $(e.target.parentNode).append($("<p class='invalid'> </p>").append($("<label class='invalid'/>").text(StringResource.get("invalid"))));
      }
    },
    _onFocus: function _onFocus(e) {
      $(e.target.parentNode).find(".invalid").remove();
    },
    setFocus: function setFocus() {
      var elem = this.$el.find('.bi-admin-base-pane');
      elem.focus();
    },
    onHide: function onHide() {},
    onToggleMenuChanged: function onToggleMenuChanged() {},
    renderToggleMenu: function renderToggleMenu(el, name, items, defaultValue, rightIcon) {
      var menuItems = _.map(items, function (item, key) {
        return {
          name: name + key,
          icon: 'wft_checkmark',
          label: StringResource.get(item),
          checked: item === defaultValue,
          action: function () {
            this.onToggleMenuChanged(name, item);
          }.bind(this)
        };
      }.bind(this));

      var filterSpec = {
        'baseClass': "appbar",
        'label': StringResource.get('type'),
        'name': name,
        'labelOnly': true,
        'hcLabel': false,
        'supportCustomCollapse': true,
        'showTitle': false,
        'updateLabel': true,
        'icon': 'common-titan-arrow-down',
        'iconRightAlign': !!rightIcon,
        'bSVG': true,
        'el': el,
        'items': menuItems
      };
      var toggleFilter = new ToggleMenuBar(filterSpec);
      toggleFilter.render();
    },
    render: function render() {
      var deferred = Q.defer();
      this.$header = this.$el.find('div.bi-admin-pane-header');
      this.$body = this.$el.find('div.bi-admin-pane-body');

      if (this.isWideView) {
        this.$body.addClass('bi-admin-widepane');
      }

      if (this.flexBody) {
        this.$body.addClass('bi-admin-pane-flex');
      }

      if (this.showHeader) {
        this.renderHeader(this.$header);
      } else {
        this.$header.hide();
        this.$body.addClass('noheader');
      } // roll back temporarily, in future we need change renderBody() to a async method


      this.renderBody(this.$body).done(function () {
        this._localize();

        this._autoValidate();

        var $paneBody = this.$el.find(".bi-admin-pane-body");
        $paneBody.attr("aria-label", this.title);
        $paneBody.attr("role", "group");
        deferred.resolve(this);
      }.bind(this));
      return deferred.promise;
    },
    onHeaderButtonClicked: function onHeaderButtonClicked(id) {
      if (id === 'switchButton') {
        this._switchView();
      }
    },
    onHeaderChecked: function onHeaderChecked() {},
    _createCheckbox: function _createCheckbox(id, text, checked) {
      var self = this;
      var $item = $('<div class="bi-admin-checkbox"></div>');
      $item.attr('id', id);
      var $checkBox = $('<input type="checkbox"></input>');
      $checkBox.prop('checked', checked);
      $checkBox.attr('aria-label', text);
      $checkBox.on('change', function () {
        var $chk = $(this);
        self.onHeaderChecked(id, $chk.is(':checked'));
      });
      var $label = $('<span/>');
      $label.text(text);
      $item.append($checkBox);
      $item.append($label);
      return $item;
    },
    _createButton: function _createButton(id, icon, title, cls) {
      var $btn = $('<button />');
      $btn.attr('id', id);
      $btn.attr('title', title || "");
      $btn.addClass('bi-admin-button');

      if (cls) {
        $btn.addClass(cls);
      }

      Utils.setIcon($btn, icon);
      $btn.on('primaryaction', function () {
        this.onHeaderButtonClicked(id);
      }.bind(this));
      return $btn;
    },
    renderHeader: function renderHeader($header) {
      $header[this.showGobackButton ? 'addClass' : 'removeClass']('show-goback');

      if (this.showGobackButton === true) {
        var $backButton = $header.find('.goback');
        $backButton.find(".goback-icon").attr("aria-label", StringResource.get('goBack'));
        $backButton.on('primaryaction', function () {
          this.slideout.hide();
        }.bind(this));
      }

      var $buttonBar = this.$header.find('div.bi-admin-trailing .bi-admin-buttonbar');

      if (this.showSwitchViewButton) {
        var switchButton = this._createButton('switchButton', this.isWideView ? 'common-left_collapse' : 'common-right_expand', StringResource.get('switchViews'));

        $buttonBar.append(switchButton);
      }

      $header.find('div.bi-admin-leading .title').text(this.title);
    },
    _switchView: function _switchView() {
      var so = this._getSwitchOptions() || {};

      var content = _.extend({
        'showSwitchViewButton': true,
        'module': this._getSwitchedModuleName()
      }, so);

      this.glassContext.appController.hideSlideOut();
      this.glassContext.appController.showSlideOut({
        'position': 'left',
        'width': this._getViewWidth(),
        'closeSlideouts': true,
        'content': content
      });
    },
    //should be override by the pane if it support view switch
    _getSwitchedModuleName: function _getSwitchedModuleName() {},
    _getSwitchOptions: function _getSwitchOptions() {},
    _getViewWidth: function _getViewWidth() {
      var retVal = 450;

      if (!this.isWideView) {
        retVal = $(window).width() < 1370 ? 576 : 800;
      }

      return retVal;
    },
    renderBody: function renderBody() {},
    _localize: function _localize($el) {
      if (!this._stringResource) {
        return;
      }

      var self = this;
      $el = $el || this.$el;
      $el.find('[local_id]').each(function () {
        var $this = $(this);
        var localId = $this.attr('local_id');
        $this.text(self._stringResource.get(localId));
      });
      $el.find('[local_title]').each(function () {
        var $this = $(this);
        var localTitle = $this.attr('local_title');
        $this.attr('title', self._stringResource.get(localTitle));
      });
    },

    /**
     * Check space input
     */
    _checkSpace: function _checkSpace(el) {
      var retVal = true;
      var reg = /^\s*$/;
      $(el.parentNode).find(".invalid").remove();

      if ($(el).val() && reg.test($(el).val())) {
        $(el.parentNode).append($("<p class='invalid'> </p>").append($("<label class='invalid'/>").text(StringResource.get("invalid"))));
        retVal = false;
      }

      return retVal;
    },
    _checkScript: function _checkScript(el) {
      var retVal = true;
      $(el.parentNode).find(".invalid").remove();

      if ($(el).val().indexOf('<script') !== -1) {
        $(el.parentNode).append($("<p class='invalid'> </p>").append($("<label class='invalid'/>").text(StringResource.get("invalid"))));
        retVal = false;
      }

      return retVal;
    },
    validate: function validate() {
      var self = this;
      var valid = true;
      this.$el.find(".invalid").remove();
      this.$el.find("[required]").each(function () {
        if ((self._checkSpace(this) && self._checkScript(this)) === false) {
          valid = false;
          return false;
        }
      });
      return valid;
    },
    close: function close() {
      this.slideout.hide();
    },
    isSysAdmin: function isSysAdmin() {
      return this.glassContext.getCoreSvc('.UserProfile').isSysAdmin();
    },
    isTenantAdmin: function isTenantAdmin() {
      return this.glassContext.getCoreSvc('.UserProfile').isTenantAdmin();
    }
  });
  return BasePane;
});