golden/frontend/res/imp/gold-app-sk.html

<!--
  The <gold-app-sk> custom element declaration.

  This is the container element for the Skia Gold frontend.

  Attributes: None

  Events: None

  Methods: None

-->

<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/polymer/polymer.html">

<link rel="import" href="../common/imp/app-sk.html" />

<link rel="import" href="cluster-page-sk.html" />
<link rel="import" href="gold-menu-sk.html" />
<link rel="import" href="gold-status-sk.html" />
<link rel="import" href="search-page-sk.html" />

<style>
  error-toast-sk toast-sk {
    z-index: 11;
  }
</style>

<dom-module id="gold-app-sk">
  <template>
    <style>
    app-sk {
      --app-sk-main: {
        background-color: #FFFFFF;
        font-family: Roboto, Arial, sans-serif;
      };
      --app-sk-toolbar: {
        background-color: #D95F02;
        font-family: Roboto, Arial, sans-serif;
      };
      login-sk{
        --login-sk-color: white;
      };
    }
    </style>

    <app-sk id="mainApp" mode="standard" responsive_width="600px" drawer_width="12em" class="fit" flex>
      <h2 header>[[_title]]</h2>
      <gold-status-sk rtoolbar></gold-status-sk>
      <gold-menu-sk navigation></gold-menu-sk>
      <div id="mainContentWrapper">
         <iron-pages id="pagesContainer" attr-for-selected="data-route" selected="{{route}}" selected-attribute="activepage">
          <section data-route="search">
            <search-page-sk></search-page-sk>
          </section>
       </iron-pages>
     </div>
    </app-sk>
    <error-toast-sk></error-toast-sk>

  </template>
  <script>
    Polymer({
      is: "gold-app-sk",

      properties: {
        route: {
          type: String,
          value: "byblame"
        },
        _title: {
          type: String,
          value: sk.app_config.title
        }
      },

      ready: function() {
        // Set up in-app routing using the history api.
        this._setRoute('/search', 'search');
        this._setRoute('/oldsearch', 'search');

        // Force hitting the server if logout was selected.
        page("/logout", function(ctx) {
          this.async(function() {
            var p = "/logout/?redirect=" + encodeURIComponent(window.location);
            window.history.replaceState(ctx.state,
                                        ctx.title,
                                        p);
            window.location.reload(true);
          });
        }.bind(this));

        const litHtmlPages = [
          '/',  // by blame page
          '/changelists',
          '/cluster',
          '/detail',
          '/details',
          '/diff',
          '/help',
          '/ignores',
          '/list',
          '/triagelog',
        ];
        // lit-html pages should not be handled by iron-pages.
        litHtmlPages.forEach((href) => {
          page(href, (context) => {
            window.location.href = context.canonicalPath;
          })
        });

        // Make "byblame" the default view.
        this.route = "byblame";

        // Don't use hashbangs in the URL.
        page({ hashbang: false });

        // Notify the page elements that the page has been selected.
        this.listen(this.$.pagesContainer, "iron-deselect", "_pagesDeselect");
      },

      _pagesSelect: function(el, ctx) {
        // Make sure the new views called after the URL is updated by page.js.
        this.async(function() {
          el.pageSelected(ctx);
        }.bind(this));
      },

      _pagesDeselect: function(ev, obj) {
        if (obj.item.dataset.route) {
          obj.item.children[0].pageDeselected();
        }
      },

      _setRoute: function(path, routeID) {
        var pageElement = this.$$("section[data-route="+routeID+"]").children[0];
        page(path, (function(ctx) {
          this.route = routeID;
          ctx.routeID = routeID;
          this._pagesSelect(pageElement, ctx);
        }).bind(this));
      }
    });
  </script>
</dom-module>