← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/iron-doc-viewer/iron-doc-viewer.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/iron-doc-viewer/iron-doc-viewer.html
 
1
<!--
 
2
@license
 
3
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 
4
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 
5
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 
6
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 
7
Code distributed by Google as part of the polymer project is also
 
8
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 
9
-->
 
10
 
 
11
<link rel="import" href="../polymer/polymer.html">
 
12
<link rel="import" href="../marked-element/marked-element.html">
 
13
<link rel="import" href="../paper-button/paper-button.html">
 
14
<link rel="import" href="../paper-styles/color.html">
 
15
<link rel="import" href="../paper-styles/shadow.html">
 
16
<link rel="import" href="../paper-styles/typography.html">
 
17
<link rel="import" href="../prism-element/prism-highlighter.html">
 
18
<link rel="import" href="iron-doc-property.html">
 
19
<link rel="import" href="iron-doc-viewer-styles.html">
 
20
 
 
21
<!--
 
22
Renders documentation describing an element's API.
 
23
 
 
24
`iron-doc-viewer` renders element and behavior descriptions as extracted by
 
25
[Hydrolysis](https://github.com/PolymerLabs/hydrolysis). You can provide them
 
26
either via binding...
 
27
 
 
28
    <iron-doc-viewer descriptor="{{elementDescriptor}}"></iron-doc-viewer>
 
29
 
 
30
...or by placing the element descriptor in JSON as the text content of an
 
31
`iron-doc-viewer`:
 
32
 
 
33
    <iron-doc-viewer>
 
34
      {
 
35
        "is": "awesome-sauce",
 
36
        "properties": [
 
37
          {"name": "isAwesome", "type": "boolean", "desc": "Is it awesome?"},
 
38
        ]
 
39
      }
 
40
    </iron-doc-viewer>
 
41
 
 
42
However, be aware that due to current limitations in Polymer 0.8, _changes_ to
 
43
the text content will not be respected, only the initial value will be loaded.
 
44
If you wish to update the documented element, please set it via the `descriptor`
 
45
property.
 
46
 
 
47
@demo demo/index.html Basic Demo
 
48
-->
 
49
 
 
50
<dom-module id="iron-doc-viewer">
 
51
  <template>
 
52
    <style include="iron-doc-viewer-styles"></style>
 
53
 
 
54
    <prism-highlighter></prism-highlighter>
 
55
 
 
56
    <section id="summary" class="card" hidden$="[[!descriptor.desc]]">
 
57
      <marked-element markdown="{{descriptor.desc}}">
 
58
        <div class="markdown-html"></div>
 
59
      </marked-element>
 
60
    </section>
 
61
 
 
62
    <nav id="api">
 
63
      <header>API Reference</header>
 
64
      <paper-button id="togglePrivate"
 
65
        on-tap="_togglePrivate">{{_privateToggleLabel}}</paper-button>
 
66
    </nav>
 
67
 
 
68
    <section id$="[[_formatAnchor(prefix,'properties')]]" class="card" hidden$="{{_noneToShow(_showPrivate,_properties)}}">
 
69
      <header><a href$="#[[_formatAnchor(prefix,'properties')]]" class="deeplink">Properties</a></header>
 
70
      <template is="dom-repeat" items="{{_properties}}" hidden$="{{!_properties.length}}">
 
71
        <iron-doc-property anchor-id="[[_formatAnchor(prefix,'property',item.name)]]" descriptor="{{item}}"></iron-doc-property>
 
72
      </template>
 
73
    </section>
 
74
 
 
75
    <section id$="[[_formatAnchor(prefix,'methods')]]" class="card"  hidden$="{{_noneToShow(_showPrivate,_methods)}}">
 
76
      <header><a href$="#[[_formatAnchor(prefix,'methods')]]" class="deeplink">Methods</a></header>
 
77
      <template is="dom-repeat" items="{{_methods}}">
 
78
        <iron-doc-property anchor-id="[[_formatAnchor(prefix,'method',item.name)]]" descriptor="{{item}}"></iron-doc-property>
 
79
      </template>
 
80
    </section>
 
81
 
 
82
    <section id$="[[_formatAnchor(prefix,'events')]]" class="card" hidden$="{{_noneToShow(_showPrivate,_events)}}">
 
83
      <header><a href$="#[[_formatAnchor(prefix,'events')]]" class="deeplink">Events</a></header>
 
84
      <template is="dom-repeat" items="{{_events}}">
 
85
        <iron-doc-property anchor-id="[[_formatAnchor(prefix,'event',item.name)]]" descriptor="{{item}}"></iron-doc-property>
 
86
      </template>
 
87
    </section>
 
88
 
 
89
    <section id$="[[_formatAnchor(prefix,'behaviors')]]" class="card" hidden$="{{_hideBehaviors(_behaviors)}}">
 
90
      <header><a href$="#[[_formatAnchor(prefix,'behaviors')]]" class="deeplink">Behaviors</a></header>
 
91
      <template is="dom-repeat" items="{{_behaviors}}">
 
92
        <p on-click="_broadcastBehavior">{{item}}</p>
 
93
      </template>
 
94
    </section>
 
95
  </template>
 
96
 
 
97
  <script>
 
98
    (function() {
 
99
      Polymer({
 
100
        is: 'iron-doc-viewer',
 
101
 
 
102
        properties: {
 
103
          /**
 
104
           * The [Hydrolysis](https://github.com/PolymerLabs/hydrolysis)-generated
 
105
           * element descriptor to display details for.
 
106
           *
 
107
           * Alternatively, the element descriptor can be provided as JSON via the text content
 
108
           * of this element.
 
109
           *
 
110
           * @type {hydrolysis.ElementDescriptor}
 
111
           */
 
112
          descriptor: {
 
113
            type: Object,
 
114
            observer: '_descriptorChanged',
 
115
          },
 
116
 
 
117
          /**
 
118
           * Prefix for fragment identifiers used in anchors.
 
119
           * For static routing `iron-component-page` can
 
120
           * set this to a string identifying the current component.
 
121
           */
 
122
          prefix: {
 
123
            type: String,
 
124
            value: ''
 
125
          },
 
126
 
 
127
          /** Whether private properties should be hidden or shown. */
 
128
          _showPrivate: {
 
129
            type:     Boolean,
 
130
            value:    false,
 
131
            observer: '_showPrivateChanged',
 
132
          },
 
133
 
 
134
          /** The label to show for the Private API toggle. */
 
135
          _privateToggleLabel: String,
 
136
 
 
137
          /**
 
138
           * Broadcast when another component is clicked on
 
139
           * @param {String} detail name of the component
 
140
           * iron-doc-viewer container should load component if possible
 
141
           * @event iron-doc-viewer-component-selected
 
142
           */
 
143
        },
 
144
 
 
145
        ready: function() {
 
146
          var jsonDescriptor = this._loadJson();
 
147
          // Note that this is only an error during element creation. You are free
 
148
          // to stomp over the descriptor after it is ready.
 
149
          if (jsonDescriptor && this.descriptor) {
 
150
            console.error(
 
151
                this,
 
152
                'received both a bound descriptor:', this.descriptor,
 
153
                'and JSON descriptor:', this._jsonDescriptor,
 
154
                'Please provide only one');
 
155
            throw new Error(
 
156
                '<iron-doc-viewer> accepts either a bound or JSON descriptor; not both');
 
157
          }
 
158
 
 
159
          if (jsonDescriptor) {
 
160
            this.descriptor = jsonDescriptor;
 
161
          }
 
162
        },
 
163
 
 
164
        /**
 
165
         * Loads a hydrolysis element descriptor (as JSON) from the text content of
 
166
         * this element, if present.
 
167
         *
 
168
         * @return {hydrolysis.ElementDescriptor} The parsed descriptor, or `null`.
 
169
         */
 
170
        _loadJson: function() {
 
171
          var textContent = '';
 
172
          Array.prototype.forEach.call(Polymer.dom(this).childNodes, function(node) {
 
173
            textContent = textContent + node.textContent;
 
174
          });
 
175
          textContent = textContent.trim();
 
176
          if (textContent === '') return null;
 
177
 
 
178
          try {
 
179
            return JSON.parse(textContent);
 
180
          } catch(error) {
 
181
            console.error('Failure when parsing JSON:', textContent, error);
 
182
            throw error;
 
183
          }
 
184
        },
 
185
 
 
186
        /** Converts `descriptor` into our template-friendly `_model`. */
 
187
        _descriptorChanged: function() {
 
188
          if (!this.descriptor) return;
 
189
 
 
190
          // Split the documented properties between functions and other types.
 
191
          var properties = [];
 
192
          var methods    = [];
 
193
 
 
194
          for (var i = 0, property; property = this.descriptor.properties[i]; i++) {
 
195
            (property.type === 'Function' ? methods : properties).push(property);
 
196
          }
 
197
          this._properties = properties;
 
198
          this._methods    = methods;
 
199
          this._events     = this.descriptor.events || [];
 
200
          this._behaviors  = this.descriptor.behaviors || [];
 
201
 
 
202
          this.toggleAttribute('abstract', this.descriptor.abstract);
 
203
        },
 
204
 
 
205
        /**
 
206
         * Scrolls to the currently selected anchor, as identified
 
207
         * by the URL hash. Whichever element or script is in charge
 
208
         * of routing should call this method on initial page load and
 
209
         * on hashchange events.
 
210
         */
 
211
        scrollToAnchor: function(hash) {
 
212
          // ToDo: handle linking to private members
 
213
          if (hash && hash.length > 1) {
 
214
            // ensure all dom-repeats have rendered.
 
215
            Polymer.dom.flush();
 
216
            var anchorId = window.location.hash.slice(1);
 
217
            var elementToFocus = this.$$('[anchor-id="' + anchorId + '"]');
 
218
            if (elementToFocus) {
 
219
              elementToFocus.scrollIntoView();
 
220
            }
 
221
          }
 
222
        },
 
223
 
 
224
        _collapsedChanged: function() {
 
225
          this._collapseToggleLabel = this._collapsed ? 'expand' : 'collapse';
 
226
 
 
227
          // Bound values aren't exposed to dom-repeat's scope.
 
228
          var properties = this.querySelectorAll('iron-doc-property');
 
229
          for (var i = 0, property; property = properties[i]; i++) {
 
230
            property.collapsed = this._collapsed;
 
231
          }
 
232
        },
 
233
 
 
234
        _toggleCollapsed: function() {
 
235
          this._collapsed = !this._collapsed;
 
236
        },
 
237
 
 
238
        _showPrivateChanged: function() {
 
239
          this._privateToggleLabel = (this._showPrivate ? 'hide' : 'show') + ' private API';
 
240
          this.toggleClass('show-private', this._showPrivate);
 
241
        },
 
242
 
 
243
        _togglePrivate: function() {
 
244
          this._showPrivate = !this._showPrivate;
 
245
        },
 
246
 
 
247
        _noneToShow: function(showPrivate, items) {
 
248
          for (var i = 0; i < items.length; i++) {
 
249
            if (showPrivate || !items[i].private) return false;
 
250
          }
 
251
          return true;
 
252
        },
 
253
 
 
254
        _formatAnchor: function(prefix, type, membername) {
 
255
          var suffix = membername ? '-' + membername : '';
 
256
          return prefix + type + suffix;
 
257
        },
 
258
 
 
259
        _hideBehaviors: function(behaviors) {
 
260
          return behaviors === null || behaviors.length === 0;
 
261
        },
 
262
 
 
263
        _broadcastBehavior: function(ev) {
 
264
          this.fire('iron-doc-viewer-component-selected', ev.target._templateInstance.item);
 
265
        }
 
266
      });
 
267
    })();
 
268
  </script>
 
269
</dom-module>