update elements and fix some bugs

lib/src/iron-component-page/iron-component-page.html

 <!--
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../polymer/polymer.html">
@@ skipping 40 matching lines @@
           <div id="docs">
             <div id="catalog-heading" catalog-only>
               <h2><span>[[active]]</span> <span class="version" hidden$="[[!version]]">[[version]]</span></h2>
             </div>
             <iron-doc-viewer descriptor="{{_activeDescriptor}}"
               on-iron-doc-viewer-component-selected="_handleComponentSelectedEvent"></iron-doc-viewer>
             <div id="nodocs" hidden$="[[_activeDescriptor]]" class="layout fit horizontal center-center">
               No documentation found.
             </div>
           </div>
-          <iframe id="demo" src="[[_frameSrc(view, base)]]"></iframe>
+          <div id="demo"></div>
         </iron-selector>
       </div>
     </paper-header-panel>
   </template>
 </dom-module>
 
 <script>
 (function() {
   // var hydrolysis = require('hydrolysis');
 
@@ skipping 56 matching lines @@
           return this.ownerDocument.baseURI;
         }
       },
 
       /**
        * The element or behavior that will be displayed on the page. Defaults
        * to the element matching the name of the source file.
        */
       active: {
         type: String,
-        observer: '_activeChanged',
-        notify: true
+        notify: true,
+        value: ''
       },
 
       /**
        * The current view. Can be `docs` or `demo`.
        */
       view: {
         type: String,
         value: 'docs',
         notify: true
       },
 
       /**
        * Whether _all_ dependencies should be loaded and documented.
        *
        * Turning this on will probably slow down the load process dramatically.
        */
       transitive: {
         type: Boolean,
         value: false
       },
 
       /** The Hydrolysis element descriptors that have been loaded. */
       docElements: {
         type:     Array,
-        observer: '_descriptorsChanged',
         notify: true,
-        readOnly: true
+        readOnly: true,
+        value: function() {
+          return [];
+        }
       },
 
       /** The Hydrolysis behavior descriptors that have been loaded. */
       docBehaviors: {
         type:     Array,
-        observer: '_descriptorsChanged',
         notify: true,
-        readOnly: true
+        readOnly: true,
+        value: function() {
+          return [];
+        }
       },
 
       /**
        * Demos for the currently selected element.
        */
       docDemos: {
         type: Array,
         notify: true,
         readOnly: true
       },
@@ skipping 54 matching lines @@
       /** The complete URL to this component's demo. */
       _demoUrl: {
         type: String,
         value: '',
       },
 
       /** The complete URL to this component's source. */
       _srcUrl: String,
     },
 
+    observers: [
+      '_updateFrameSrc(view, base)',
+      '_activeChanged(active, _analyzer)'
+    ],
+
     ready: function() {
       var elements = this._loadJson();
       if (elements) {
         this.docElements = elements;
         this._loading  = false;
       } else {
         // Make sure our change handlers trigger in all cases.
         if (!this.src && !this._catalog) {
           this._srcChanged();
         }
@@ skipping 46 matching lines @@
       var match = srcUrl.match(/([^\/\.]+)\.github\.io\/([^\/]+)\/?([^\/]*)$/);
       if (match) {
         srcUrl = "https://cdn.rawgit.com/" + match[1] + "/" + match[2] + "/master/" + match[3];
       }
 
       this._baseUrl = _baseUrl(srcUrl);
       this._srcUrl  = srcUrl;
       if (!this._hydroLoading) this.$.analyzer.analyze();
     },
 
-    _frameSrc: function(view) {
+    _updateFrameSrc: function(view) {
       if (!view || view.indexOf("demo:") !== 0) return "about:blank";
+
       var src = view.split(':')[1];
-      return new URL(src, this.base).toString();
+      var demoSrc = new URL(src, this.base).toString();
+
+      // If you use history.pushState with iframe.src = url, you will create 2 history entries,
+      // but setting the `src` attribute imperatively will not.
+
+      if (this._iframe) {
+        Polymer.dom(this.$.demo).removeChild(this._iframe);
+      }
+
+      this._iframe = document.createElement('iframe');
+      this._iframe.src = demoSrc;
+      Polymer.dom(this.$.demo).appendChild(this._iframe);
     },
 
-    _descriptorsChanged: function() {
-      if (this._findDescriptor(this.active)) {
-        this._activeChanged();
-        return;
+    _getDefaultActive: function() {
+      var matchedPage;
+      var url = this._srcUrl || this.base;
+      var mainFile = url.replace(_baseUrl(this.base), '');
+
+      function findMatch(list) {
+        for (var item, i = 0; i < list.length; i++) {
+          item = list[i];
+          if (item && item.contentHref && item.contentHref.indexOf(mainFile) > 0) {
+            return item;
+          }
+        }
+        return null;
       }
+      
+      matchedPage = findMatch(this.docElements) || findMatch(this.docBehaviors);
 
-      if (this.docElements && this.docElements[0]) {
-        this.active = this.docElements[0].is;
-      } else if (this.docBehaviors && this.docBehaviors[0]) {
-        this.active = this.docBehaviors[0].is;
-      } else {
-        this.active = null;
+      if (matchedPage) {
+        return matchedPage.is;
+      } else if (this.docElements.length > 0) {
+        return this.docElements[0].is;
+      } else if (this.docBehaviors.length > 0) {
+        return this.docBehaviors[0].is;
       }
+      return null;
     },
 
     _findDescriptor: function(name) {
       if (!this._analyzer) return null;
 
       var descriptor = this._analyzer.elementsByTagName[name];
       if (descriptor) return descriptor;
 
       for (var i = 0; i < this._analyzer.behaviors.length; i++) {
         if (this._analyzer.behaviors[i].is === name) {
           return this._analyzer.behaviors[i];
         }
       }
       return null;
     },
 
-    _activeChanged: function() {
-      this.async(function() { this.$.active.value = this.active; });
-      if (this._analyzer && this._analyzer.elementsByTagName) {
+    _activeChanged: function(active, analyzer) {
+      if (active === '') {
+        this.active = this._getDefaultActive();
+        return;
+      }
+      this.async(function() { this.$.active.value = active; });
+      if (analyzer && analyzer.elementsByTagName) {
         this.$.headerPanel.scroller.scrollTop = 0;
-        this._activeDescriptor = this._findDescriptor(this.active);
+        this._activeDescriptor = this._findDescriptor(active);
         if (this._activeDescriptor) {
           var hasDemo;
           var demos = this._activeDescriptor.demos;
           if (this.view && demos && demos.length) {
             var parts = this.view.split(':');
             if (parts[0] == 'demo') {
               if (parts[1]) {
                 hasDemo = demos.some(function(d, i) {
                   if (d.path == parts[1]) {
                     return true;
@@ skipping 13 matching lines @@
             document.title = this._activeDescriptor.is + " documentation";
           }
         }
         this._setDocDemos(this._activeDescriptor ? this._activeDescriptor.demos : []);
       }
     },
 
     _loadingChanged: function() {
       this.toggleClass('loaded', !this._loading);
     },
+
     _detectLoading: function() {
       this._loading = this.docSrc ? this._ajaxLoading : this._hydroLoading;
     },
 
     _analyzerChanged: function() {
-      this._setDocElements(this._analyzer ? this._analyzer.elements : []);
-      this._setDocBehaviors(this._analyzer ? this._analyzer.behaviors : []);
+      var analyzer = this._analyzer;
+      this._setDocElements(analyzer && analyzer.elements ? analyzer.elements : []);
+      this._setDocBehaviors(analyzer && analyzer.behaviors ? analyzer.behaviors : []);
+
+      if (!this._findDescriptor(this.active)) {
+        this.active = this._getDefaultActive();
+      }
     },
     _detectAnalyzer: function() {
       this._analyzer = this.docSrc ? this._ajaxDesc : this._hydroDesc;
     },
 
     _handleAjaxResponse: function(e, req) {
       this._ajaxLoading = false;
       this._ajaxLastUrl = req.url;
       this._ajaxDesc = req.response;
     },
@@ skipping 26 matching lines @@
 
     _demoView: function(path) {
       return "demo:" + path;
     },
     _viewType: function(view) {
       return view ? view.split(":")[0] : null;
     }
   });
 })();
 </script>