| <!-- |
| 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="../common/imp/login.html" /> |
| |
| <link rel="import" href="byblame-page-sk.html" /> |
| <link rel="import" href="cluster-page-sk.html" /> |
| <link rel="import" href="commits-dialog-sk.html"> |
| <link rel="import" href="comp-page-sk.html" /> |
| <link rel="import" href="detail-page-sk.html" /> |
| <link rel="import" href="diff-page-sk.html" /> |
| <link rel="import" href="failures-page-sk.html" /> |
| <link rel="import" href="gold-menu-sk.html" /> |
| <link rel="import" href="gold-status-sk.html" /> |
| <link rel="import" href="help-page-sk.html" /> |
| <link rel="import" href="ignores-page-sk.html" /> |
| <link rel="import" href="list-page-sk.html" /> |
| <link rel="import" href="search-page-sk.html" /> |
| <link rel="import" href="search-page2-sk.html" /> |
| <link rel="import" href="triagelog-page-sk.html" /> |
| <link rel="import" href="trybot-page-sk.html" /> |
| |
| <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; |
| }; |
| } |
| |
| #mainContentWrapper { |
| padding-left: 0.5em |
| padding-right: 0.5em |
| }; |
| |
| </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="byblame"> |
| <byblame-page-sk></byblame-page-sk> |
| </section> |
| <section data-route="ignores"> |
| <ignores-page-sk></ignores-page-sk> |
| </section> |
| <section data-route="list"> |
| <list-page-sk></list-page-sk> |
| </section> |
| <section data-route="trybot"> |
| <trybot-page-sk></trybot-page-sk> |
| </section> |
| <section data-route="failures"> |
| <failures-page-sk></failures-page-sk> |
| </section> |
| <section data-route="search2"> |
| <search-page2-sk></search-page2-sk> |
| </section> |
| <section data-route="search"> |
| <search-page-sk></search-page-sk> |
| </section> |
| <section data-route="triagelog"> |
| <triagelog-page-sk></triagelog-page-sk> |
| </section> |
| <section data-route="help"> |
| <help-page-sk></help-page-sk> |
| </section> |
| <section data-route="detail"> |
| <detail-page-sk></detail-page-sk> |
| </section> |
| <section data-route="diff"> |
| <diff-page-sk></diff-page-sk> |
| </section> |
| <section data-route="cluster"> |
| <cluster-page-sk></cluster-page-sk> |
| </section> |
| <section data-route="compare"> |
| <comp-page-sk></comp-page-sk> |
| </section> |
| <section data-route="notfound"> |
| <help-page-sk notfound></help-page-sk> |
| </section> |
| </iron-pages> |
| <commits-dialog-sk></commits-dialog-sk> |
| </div> |
| </app-sk> |
| |
| </template> |
| <script> |
| Polymer({ |
| is: "gold-app-sk", |
| |
| properties: { |
| route: { |
| type: String, |
| value: "byblame" |
| }, |
| _title: { |
| type: String, |
| value: sk.app_config.title |
| } |
| }, |
| |
| ready: function() { |
| // For all pages make sure we always have the right login URL. |
| var loginEle = this.$.mainApp.loginEle; |
| var readyCall = true; |
| page("*", function(ctx, next) { |
| // Avoid calling it during setup and when logging out. |
| if (!ctx.path.startsWith("/logout") && !readyCall) { |
| this.async(loginEle.checkLogin.bind(loginEle)); |
| } |
| readyCall = false; |
| next(); |
| }.bind(this)); |
| |
| // Set up in-app routing using the history api. |
| this._setRoute('/', 'byblame'); |
| this._setRoute('/list', 'list'); |
| this._setRoute('/trybot', 'trybot'); |
| this._setRoute('/failures', 'failures'); |
| this._setRoute('/search', 'search'); |
| this._setRoute('/search2', 'search2'); |
| this._setRoute('/triagelog', 'triagelog'); |
| this._setRoute('/help', 'help'); |
| this._setRoute('/detail', 'detail'); |
| this._setRoute('/diff', 'diff'); |
| this._setRoute('/cluster', 'cluster'); |
| this._setRoute('/cmp', 'compare'); |
| |
| // Don't wire up the private routes. This is just cosmetics, the real |
| // enforcement happens on the backend where the endpoint is disabled. |
| if (!sk.app_config.isPublic) { |
| this._setRoute('/ignores', 'ignores'); |
| } |
| |
| // TODO(stephana): Remove the alias once the link to legacysearch has |
| // been removed from Gerrit. |
| page("/legacysearch", function() { |
| page.redirect("/search" + window.location.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)); |
| |
| // All other route go to 'notfound' and byblame is the default view. |
| this._setRoute('*', 'notfound'); |
| 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> |