saiku-embed.html

<!--
  Copyright 2011 - 2017 OSBI Ltd

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="saiku-embed">
  <template>
    <!-- Scoped CSS for this element -->
    <style>
      :host {
        display: block;
        width: 100%;
      }
    </style>
    <div>
      <!-- Any children are rendered here -->
      <slot></slot>
      <iframe allowtransparency="true" frameborder="0" scrolling="auto"></iframe>
    </div>
  </template>

  <script>
    /**
     * `saiku-embed`
     * A web component to embed Saiku Analytics.
     *
     * Basic example:
     *
     * <saiku-embed url="http://localhost:8080/" username="admin" password="admin"></saiku-embed>
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class SaikuEmbed extends Polymer.Element {

      static get is() { return 'saiku-embed'; }

      constructor() {
        super();

        this.attachShadow({
          mode: 'open'
        }).innerHTML = SaikuEmbed.template.innerHTML;

        if (!this.url) {
          this.textContent = `The url attribute is not included.
            Go to https://github.com/OSBI/saiku-embed-element#saiku-embed-element
            and see the documentation.`;
        }
      }

      static get properties() {
        return {
          url: String,
          username: String,
          password: String,
          width: { type: String, value: '800' },
          height: { type: String, value: '600' },
          schema: String,
          cube: String,
          default_mdx_filter: String,
          default_mdx_filter_rows: String,
          default_mdx_filter_columns: String,
          lang: String,
          mode: String,
          path_file_saiku: String,
          splash: { type: Boolean, value: true },
          plugin: { type: Boolean, value: false },
          hide_workspace_icons: { type: Boolean, value: false },
          show_help: { type: Boolean, value: false }
        };
      }

      static get observedAttributes() {
        return [
          'url',
          'username',
          'password',
          'width',
          'height',
          'schema',
          'cube',
          'default_mdx_filter',
          'default_mdx_filter_rows',
          'default_mdx_filter_columns',
          'lang',
          'mode',
          'path_file_saiku',
          'splash',
          'plugin',
          'hide_workspace_icons',
          'show_help'
        ];
      }

      connectedCallback() {
        const iframe = this.shadowRoot.querySelector('iframe');
        iframe.width = this.width;
        iframe.height = this.height;
        iframe.src = this.getInlineFrameSource();
      }

      attributeChangedCallback(attributeName, oldValue, newValue) {
        const iframe = this.shadowRoot.querySelector('iframe');

        switch (attributeName) {
          case 'width':
          case 'height':
            this[attributeName] = newValue;
            break;
          case 'splash':
          case 'plugin':
          case 'hide_workspace_icons':
          case 'show_help':
            this[attributeName] = this._isAttributeTrueFromMarkup(newValue);
            break;
          default:
            iframe.src = this.getInlineFrameSource();
            break;
        }
      }

      get url() {
        return this.getAttribute('url');
      }

      set url(newValue) {
        if (this.url !== newValue) {
          this.setAttribute('url', newValue);
        }
      }

      get username() {
        return this.getAttribute('username');
      }

      set username(newValue) {
        if (this.username !== newValue) {
          this.setAttribute('username', newValue);
        }
      }

      get password() {
        return this.getAttribute('password');
      }

      set password(newValue) {
        if (this.password !== newValue) {
          this.setAttribute('password', newValue);
        }
      }

      get width() {
        return this.getAttribute('width');
      }

      set width(newValue) {
        if (this.width !== newValue) {
          this.setAttribute('width', newValue);
        }
      }

      get height() {
        return this.getAttribute('height');
      }

      set height(newValue) {
        if (this.height !== newValue) {
          this.setAttribute('height', newValue);
        }
      }

      get schema() {
        return this.getAttribute('schema') || '';
      }

      set schema(newValue) {
        if (this.schema !== newValue) {
          this.setAttribute('schema', newValue);
        }
      }

      get cube() {
        return this.getAttribute('cube') || '';
      }

      set cube(newValue) {
        if (this.cube !== newValue) {
          this.setAttribute('cube', newValue);
        }
      }

      get default_mdx_filter() {
        return this.getAttribute('default_mdx_filter') || '';
      }

      set default_mdx_filter(newValue) {
        if (this.default_mdx_filter !== newValue) {
          this.setAttribute('default_mdx_filter', newValue);
        }
      }

      get default_mdx_filter_rows() {
        return this.getAttribute('default_mdx_filter_rows') || '';
      }

      set default_mdx_filter_rows(newValue) {
        if (this.default_mdx_filter_rows !== newValue) {
          this.setAttribute('default_mdx_filter_rows', newValue);
        }
      }

      get default_mdx_filter_columns() {
        return this.getAttribute('default_mdx_filter_columns') || '';
      }

      set default_mdx_filter_columns(newValue) {
        if (this.default_mdx_filter_columns !== newValue) {
          this.setAttribute('default_mdx_filter_columns', newValue);
        }
      }

      get lang() {
        return this.getAttribute('lang') || '';
      }

      set lang(newValue) {
        if (this.lang !== newValue) {
          this.setAttribute('lang', newValue);
        }
      }

      get mode() {
        return this.getAttribute('mode') || '';
      }

      set mode(newValue) {
        if (this.mode !== newValue) {
          this.setAttribute('mode', newValue);
        }
      }

      get path_file_saiku() {
        return this.getAttribute('path_file_saiku') || '';
      }

      set path_file_saiku(newValue) {
        if (this.path_file_saiku !== newValue) {
          this.setAttribute('path_file_saiku', newValue);
        }
      }

      get splash() {
        return this.getAttribute('splash');
      }

      set splash(newValue) {
        if (this.splash !== newValue.toString()) {
          this.setAttribute('splash', newValue);
        }
      }

      get plugin() {
        return this.getAttribute('plugin');
      }

      set plugin(newValue) {
        if (this.plugin !== newValue.toString()) {
          this.setAttribute('plugin', newValue);
        }
      }

      get hide_workspace_icons() {
        return this.getAttribute('hide_workspace_icons');
      }

      set hide_workspace_icons(newValue) {
        if (this.hide_workspace_icons !== newValue.toString()) {
          this.setAttribute('hide_workspace_icons', newValue);
        }
      }

      get show_help() {
        return this.getAttribute('show_help');
      }

      set show_help(newValue) {
        if (this.show_help !== newValue.toString()) {
          this.setAttribute('show_help', newValue);
        }
      }

      getInlineFrameSource() {
        const params = this._getAttributesParams();
        const src = this._requestUrl(this.url, params);

        if (this.path_file_saiku) {
          let pathFileSaiku = `#query/open/${this.path_file_saiku}`;

          return window.decodeURIComponent(src + pathFileSaiku);
        }

        return window.decodeURIComponent(src);
      }

      _isAttributeTrueFromMarkup(obj) {
        return obj === true ||
               obj === 'true' ||
               obj === '' ||
               obj.length === 0 ||
               toString.call(obj) === '[object Boolean]';
      }

      _getAttributesParams() {
        let params = {};
        let attrName;

        for (let i = 0; i < this.attributes.length; i++) {
          if (SaikuEmbed.properties.hasOwnProperty(this.attributes[i].name) &&
              (this.attributes[i].name !== 'url' &&
               this.attributes[i].name !== 'path_file_saiku' &&
               this.attributes[i].name !== 'width' &&
               this.attributes[i].name !== 'height')) {

            attrName = this.attributes[i].name;
            params[attrName] = this.attributes[i].value;
          }
        }

        return params;
      }

      _queryString(params) {
        const queryParts = [];
        let param;
        let value;

        for (param in params) {
          value = params[param];
          param = window.encodeURIComponent(param);

          if (Array.isArray(value)) {
            for (let i = 0; i < value.length; i++) {
              queryParts.push(`${param}=${window.encodeURIComponent(value[i])}`);
            }
          }
          else if (value !== null) {
            queryParts.push(`${param}=${window.encodeURIComponent(value)}`);
          }
          else {
            queryParts.push(param);
          }
        }

        return queryParts.join('&');
      }

      _requestUrl(url, params) {
        const queryString = this._queryString(params);
        const newUrl = url || '';

        if (queryString) {
          const bindingChar = newUrl.indexOf('?') >= 0 ? '&' : '?';

          return newUrl + bindingChar + queryString;
        }

        return newUrl;
      }
    }

    window.customElements.define(SaikuEmbed.is, SaikuEmbed);
  </script>
</dom-module>