five-bells-visualization
Version:
Tool to visualize Five Bells payments
229 lines (171 loc) • 6.17 kB
HTML
<!--
@license
Copyright (c) 2014 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="elements/core-doc-page.html">
<link rel="import" href="elements/core-doc-toc.html">
<link rel="import" href="../core-icon/core-icon.html">
<!--
Displays formatted source documentation scraped from input urls.
Documentation can be encoded into html comments (<!-- ... -->) or using JsDoc notation (/** ... */).
When using JsDoc notation, remember that the left-margin includes an asterisk and a single space.
This is important for markdown constructs that count spaces. Code blocks for example, must be
five spaces from the first asterisk.
## Markdown
Markdown format is supported.
### Links
Arbitrary links can be encoded using [standard markdown format](http://daringfireball.net/projects/markdown/syntax).
[GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown) is also supported.
Links to other topics can be made with hash-links [core-doc-viewer](#core-doc-viewer).
### Code
Example
Four space indents indicate code blocks.
<code>blocks are syntax highlighted</code>
<script>
while(true) {
javascript('is highlighted also');
}
</script>
### Blockquote
> Blockquote is supported for long text that needs to wrap with a common left side indent.
> Blockquote is supported for long text that needs to wrap with a common left side indent.
### Lists
1. enumerated
1. lists
Use - or + for bullet points:
- bullet
- lists
### Tables
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
### HTML
Arbitrary HTML is also supported
<input><button>Button</button><hr/>
@class core-doc-viewer
@homepage github.io
-->
<polymer-element name="core-doc-viewer" attributes="sources route url" horizontal layout>
<template>
<style>
core-doc-toc {
display: none;
width: 332px;
overflow-x: hidden;
}
</style>
<context-free-parser url="{{url}}" on-data-ready="{{parserDataReady}}"></context-free-parser>
<template repeat="{{sources}}">
<context-free-parser url="{{}}" on-data-ready="{{parserDataReady}}"></context-free-parser>
</template>
<core-doc-toc id="toc" data="{{classes}}" selected="{{selected}}"></core-doc-toc>
<core-doc-page flex data="{{data}}"></core-doc-page>
</template>
<script>
Polymer({
/**
* A single file to parse for docs
*
* @attribute url
* @type String
* @default ''
*/
/**
* Class documentation extracted from the parser
*
* @property classes
* @type Array
* @default []
*/
classes: [],
/**
* Files to parse for docs
*
* @attribute sources
* @type Array
* @default []
*/
sources: [],
ready: function() {
window.addEventListener('hashchange', this.parseLocationHash.bind(this));
this.parseLocationHash();
},
parseLocationHash: function() {
this.route = window.location.hash.slice(1);
},
routeChanged: function() {
this.validateRoute();
},
validateRoute: function() {
if (this.route) {
this.classes.some(function(c) {
// The URL fragment might be just a class name,
// or it might be a class name followed by a '.' and then
// a section of the page.
// We want to match on class names here, so split on '.'.
// E.g.: 'core-ajax.properties.xhrArgs' -> 'core-ajax'
// 'core-xhr' -> 'core-xhr'
if (c.name === this.route.split('.')[0]) {
this.data = c;
this.route = '';
return true;
}
}, this);
}
},
selectedChanged: function() {
this.data = this.classes[this.selected];
},
parserDataReady: function(event, detail, sender) {
var path = '';
if (this.sources.length) {
var path = event.target.templateInstance.model;
var idx = path.lastIndexOf('/');
path = idx != -1 ? path.substr(0, idx) : '.';
} else {
var parts = location.pathname.split('/');
parts.pop();
path = parts.join('/');
}
var data = event.target.data;
var xhr = new XMLHttpRequest();
xhr.open('GET', path + '/bower.json');
xhr.onerror = function(e) {
this.assimilateData(data);
}.bind(this);
xhr.onloadend = function(e) {
// Add package version to data.
if (e.target.status == 200) {
var version = JSON.parse(e.target.response).version;
// Assumes all classes (elements) in the list are the same version.
for (var i = 0, c; c = data.classes[i]; ++i) {
c.version = version;
}
}
this.assimilateData(data);
}.bind(this);
xhr.send();
},
assimilateData: function(data) {
this.classes = this.classes.concat(data.classes);
this.classes.sort(function(a, b) {
var na = a && a.name.toLowerCase(), nb = b && b.name.toLowerCase();
return (na < nb) ? -1 : (na == nb) ? 0 : 1;
});
if (!this.data && !this.route && this.classes.length) {
this.data = this.classes[0];
}
if (this.classes.length > 1) {
this.$.toc.style.display = 'block';
}
this.validateRoute();
}
});
</script>
</polymer-element>