polymer-iron-rails 1.0.0.pre.rc.1

data/app/assets/components/iron-doc-viewer/iron-doc-property.css

@@ -0,0 +1,158 @@
+/*
+@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
+*/
+:host {
+  @apply(--paper-font-body1);
+  box-sizing: border-box;
+  display: block;
+  padding: 16px 24px;
+}
+
+.type:before {
+  content: '\007b'; /* https://github.com/Polymer/polymer/issues/1291 */
+}
+.type:after {
+  content: '\007d'; /* https://github.com/Polymer/polymer/issues/1291 */
+}
+
+#transitionMask {
+  position: relative;
+  overflow: hidden;
+  padding-left: 160px;
+}
+
+[hidden] {
+  display: none;
+}
+
+#signature {
+  @apply(--paper-font-code1);
+  width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+#signature .name {
+  @apply(--paper-font-code2);
+}
+
+:host([function]) #signature {
+  position: static;
+  margin-left: -160px;
+  width: 100%;
+}
+
+:host:not([function]) #signature .params {
+  display: none;
+}
+
+:host([function]) #type {
+  display: none;
+}
+
+#details {
+  flex: 1;
+}
+
+/* Metadata */
+
+#meta {
+  display: flex;
+}
+
+#type {
+  @apply(--paper-font-code1);
+}
+
+#default {
+  flex: 1;
+  text-align: right;
+}
+#default .value {
+  @apply(--paper-font-code1);
+}
+
+/* Function Parameters */
+
+#params {
+  background: rgba(0,0,0,0.05);
+  list-style: none;
+  margin: 8px -8px 0 -8px;
+  padding: 0 8px;
+}
+
+#params .type {
+  @apply(--paper-font-code1);
+}
+
+#params li {
+  padding: 4px 0;
+}
+#params li:first-child {
+  padding-top: 8px;
+}
+#params li:last-child {
+  padding-bottom: 8px;
+}
+
+#params marked-element {
+  display: inline-block;
+}
+#params marked-element::shadow #content p {
+  margin: 0;
+}
+
+/* Description */
+
+#desc {
+  display: block;
+}
+
+#desc::shadow #content > :first-child {
+  margin-top: 0;
+}
+
+#desc::shadow #content > :last-child {
+  margin-bottom: 0;
+}
+
+#desc::shadow #content #content code {
+  @apply(--paper-font-code1);
+}
+
+/* State Transitions */
+
+#transitionMask {
+  transition: height ease-in-out 150ms;
+}
+#meta {
+  transition: opacity ease-in-out 150ms;
+}
+#desc {
+  transition: transform ease-in-out 150ms, opacity  ease-in-out 150ms;
+}
+
+/* Collapsed State */
+
+:host([_collapsed]) #transitionMask {
+  height: 20px; /* 1 line of text */
+  overflow: hidden;
+}
+:host([_collapsed]) #meta {
+  opacity: 0;
+}
+:host([_collapsed]) #desc {
+  transform: translateY(-34px);
+}
+:host([_collapsed][function]) #desc {
+  opacity: 0;
+}

data/app/assets/components/iron-doc-viewer/iron-doc-property.html

@@ -0,0 +1,193 @@
+<!--
+@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="../marked-element/marked-element.html">
+<link rel="import" href="../paper-styles/typography.html">
+<link rel="import" href="../polymer/polymer.html">
+
+<!--
+Renders documentation describing a specific property of an element.
+
+Give it a hydrolysis `PropertyDescriptor` (via `descriptor`), and watch it go!
+-->
+<dom-module id="iron-doc-property">
+
+  <link rel="import" type="css" href="iron-doc-property.css">
+
+  <template>
+    <div id="transitionMask">
+      <div id="signature">
+        <span class="name">{{descriptor.name}}</span><span class="params">(<span>{{_paramText}}</span>)</span>
+        <span class="return" hidden$="{{!descriptor.return}}">➙ <span class="type">{{descriptor.return.type}}</span></span>
+      </div>
+      <div id="details">
+        <div id="meta" hidden$="{{_computeHideMeta(descriptor)}}">
+          <span id="type" class="type">{{descriptor.type}}</span>
+          <span id="default" hidden$="{{_computeHideDefault(descriptor.default)}}">default: <span class="value">{{_computeDefaultDisplay(descriptor.default)}}</span></span>
+          <template is="dom-if" if="{{descriptor.readOnly}}"><span>&nbsp;readOnly</span></template>
+          <template is="dom-if" if="{{descriptor.notify}}"><span>&nbsp;notify</span></template>
+        </div>
+        <ol id="params" hidden$="{{_computeHideParams(descriptor,return)}}">
+          <template is="dom-repeat" items="{{descriptor.params}}">
+            <li hidden$="{{!item.type}}">
+              <span class="name">{{item.name}}</span>
+              <span class="type">{{item.type}}</span>
+              <marked-element markdown="{{item.desc}}"></marked-element>
+            </li>
+          </template>
+          <li class="return" hidden$="{{!descriptor.return}}">Returns
+            <span class="type">{{descriptor.return.type}}</span>
+            <marked-element markdown="{{descriptor.return.desc}}"></marked-element>
+          </li>
+        </ol>
+        <marked-element id="desc" markdown="{{descriptor.desc}}" hidden$="{{!descriptor.desc}}"></marked-element>
+      </div>
+    </div>
+  </template>
+
+</dom-module>
+
+<script>
+(function() {
+
+  Polymer({
+
+    is: 'iron-doc-property',
+
+    properties: {
+
+      /**
+       * The [Hydrolysis](https://github.com/PolymerLabs/hydrolysis)-generated
+       * element descriptor to display details for.
+       *
+       * Alternatively, the element descriptor can be provided as JSON via the text content
+       * of this element.
+       *
+       * @type {hydrolysis.PropertyDescriptor}
+       */
+      descriptor: {
+        type:     Object,
+        observer: '_descriptorChanged',
+      },
+
+      /**
+       * Whether the property should show a one-liner, or full summary.
+       *
+       * Note that this property _is_ reflected as an attribute, but we perform
+       * the reflection manually. In order to support the CSS transitions, we
+       * must calculate the element height before setting the attribute.
+       */
+      collapsed: {
+        type:     Boolean,
+        value:    false,
+        observer: '_collapsedChanged',
+      },
+
+    },
+
+    listeners: {
+      'transitionEnd':       '_onTransitionEnd',
+      'webkitTransitionEnd': '_onTransitionEnd',
+    },
+
+    ready: function() {
+      this._isReady = true;
+    },
+
+    /**
+     * Resets any state that was set up for transitions.
+     *
+     * We are careful to reset our explicit heights after a transition
+     * completes, so that the property doesn't clip values if the user resizes
+     * their viewport.
+     */
+    _onTransitionEnd: function(event) {
+      if (event.path[0] !== this.$.transitionMask) return;
+      this.$.transitionMask.style.height = '';
+    },
+
+    _descriptorChanged: function() {
+      this.toggleAttribute('private',       this.descriptor.private);
+      this.toggleAttribute('configuration', this.descriptor.configuration);
+      this.toggleAttribute('function',      this.descriptor.function);
+      this._paramText = (this.descriptor.params || []).map(function(param) {
+        return param.name;
+      }).join(', ');
+    },
+
+    /**
+     * Reflects `collapsed` as the `_collapsed` attribute.
+     *
+     * "Why not use `reflectToAttribute: true`?", you ask? A fine question!
+     *
+     * We avoid simple reflection purely because there is no purely declarative
+     * way of transitioning to/from `height: auto`. This callback manages
+     * setting explicit heights for the property so that CSS can interpolate it.
+     *
+     * @see #_onTransitionEnd
+     */
+    _collapsedChanged: function() {
+      if (!this._isReady) {
+        this.toggleAttribute('_collapsed', this.collapsed);
+        return;
+      }
+
+      var container = this.$.transitionMask;
+      var collapsed = this.collapsed;
+
+      // Measure `height: auto`, which we will need regardless of transition
+      // direction. We assume that the collapsed state has an explicit height
+      // set via CSS rules; so we do not bother measuring that.
+      container.style.height = 'auto';
+      var fullHeight = container.offsetHeight;
+
+      // Then, we reset to the start state. Changing directions mid-transition
+      // is _not_ supported!
+      if (this.collapsed) {
+        container.style.height = fullHeight + 'px'; // Height 'auto'.
+      } else {
+        container.style.height = ''; // Height specified by CSS rule.
+      }
+
+      // We must wait a frame so that the transition engine has a chance to know
+      // that something actually changed.
+      requestAnimationFrame(function() {
+        this.toggleAttribute('_collapsed', collapsed);
+        if (this.collapsed) {
+          container.style.height = ''; // Height specified by CSS rule.
+        } else {
+          container.style.height = fullHeight + 'px'; // Height 'auto'.
+        }
+      }.bind(this));
+    },
+
+    // hidden if no type and no defaults
+    _computeHideMeta: function(descriptor) {
+      return descriptor.type === undefined &&  descriptor.default === undefined;
+    },
+
+    // hidden if no params, and no return value
+    _computeHideParams: function(descriptor,ret) {
+      return (!descriptor.params || descriptor.params.length === 0) && !ret;
+    },
+
+    _computeHideDefault: function(def) {
+      return def === undefined;
+    },
+
+    _computeDefaultDisplay: function(def) {
+      if (def === '')
+        return "''";
+      return def;
+    }
+
+  });
+
+})();
+</script>

data/app/assets/components/iron-doc-viewer/iron-doc-viewer.css

@@ -0,0 +1,151 @@
+/*
+@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
+*/
+:host {
+  @apply(--paper-font-body1);
+  display: block;
+  color: #212121;
+}
+
+:host > header {
+  @apply(--paper-font-headline);
+  margin-bottom: 18px;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+#api {
+  display: flex;
+  align-items: center;
+}
+#api header {
+  flex: 1;
+  padding-left: 16px;
+  @apply(--paper-font-subhead);
+}
+#api a {
+  @apply(--paper-font-button);
+  cursor: pointer;
+  display: block;
+  padding: 4px 16px;
+  color: var(--paper-grey-800);
+}
+
+/* Common Formatting */
+
+#summary {
+  padding: 4px 0;
+}
+
+#summary marked-element::shadow #content pre {
+  background-color: var(--paper-grey-50);
+  border: solid #e5e5e5;
+  border-width: 1px 0;
+  overflow-x: auto;
+  padding: 12px 24px;
+  font-size: 15px;
+}
+
+#summary marked-element::shadow #content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 12px 0;
+  border-top: 1px solid #e5e5e5;
+}
+
+#summary marked-element::shadow #content tr {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 0 18px;
+}
+
+#summary marked-element::shadow #content td,
+#summary marked-element::shadow #content th {
+  padding: 6px 12px;
+}
+
+#summary marked-element::shadow #content td:first-child,
+#summary marked-element::shadow #content th:first-child {
+  padding-left: 24px;
+}
+
+#summary marked-element::shadow #content td:last-child,
+#summary marked-element::shadow #content th:last-child {
+  padding-right: 24px;
+}
+
+#summary marked-element::shadow #content code {
+  @apply(--paper-font-code1);
+}
+
+#summary marked-element::shadow #content p {
+  padding: 0 24px;
+}
+
+#summary marked-element::shadow #content a {
+  color: var(--paper-indigo-a200);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+#summary marked-element::shadow #content h1,
+#summary marked-element::shadow #content h2,
+#summary marked-element::shadow #content h3,
+#summary marked-element::shadow #content h4,
+#summary marked-element::shadow #content h5 {
+  padding: 0 18px;
+}
+
+/* Property Sections */
+
+.card {
+  background: white;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  @apply(--shadow-elevation-2dp);
+}
+
+.card > header {
+  padding: 14px 24px;
+  border-bottom: 1px solid #e5e5e5;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 400;
+}
+
+iron-doc-property {
+  border-bottom: 1px solid #e5e5e5;
+}
+iron-doc-property:last-of-type {
+  border-bottom-width: 0;
+}
+
+/* Private Properties */
+
+iron-doc-property[private] {
+  display: none;
+}
+
+:host(.show-private) iron-doc-property[private] {
+  display: block;
+}
+
+iron-doc-property[configuration] {
+  display: none !important; /* Never. */
+}
+
+#behaviors > p {
+  border-bottom: 1px solid #e5e5e5;
+  box-sizing: border-box;
+  display: block;
+  padding: 16px 24px;
+  cursor: pointer;
+}
+