demo-snippet.html
3.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!--
@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">
<link rel="import" href="../prism-element/prism-highlighter.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/shadow.html">
<!--
`demo-snippet` is a helper element that displays the source of a code snippet and
its rendered demo. It can be used for both native elements and
Polymer elements.
Example of a native element demo
<demo-snippet>
<template>
<input type="date">
</template>
</demo-snippet>
Example of a Polymer <paper-checkbox> demo
<demo-snippet>
<template>
<paper-checkbox>Checkbox</paper-checkbox>
<paper-checkbox checked>Checkbox</paper-checkbox>
</template>
</demo-snippet>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--demo-snippet` | Mixin applied to the entire element | `{}`
`--demo-snippet-demo` | Mixin applied to just the demo section | `{}`
`--demo-snippet-code` | Mixin applied to just the code section | `{}`
@element demo-snippet
@demo demo/index.html
-->
<dom-module id="demo-snippet">
<template>
<style>
:host {
display: block;
@apply(--shadow-elevation-2dp);
@apply(--demo-snippet);
}
.demo {
border-bottom: 1px solid #e5e5e5;
background-color: white;
margin: 0;
padding: 20px;
@apply(--demo-snippet-demo);
}
.code {
padding: 0 20px;
margin: 0;
background-color: #fafafa;
font-size: 13px;
overflow: auto;
@apply(--demo-snippet-code);
}
.code > pre {
margin: 0;
padding: 0 0 10px 0;
}
</style>
<prism-highlighter></prism-highlighter>
<div class="demo">
<content id="content"></content>
</div>
<marked-element markdown=[[_markdown]] id="marked">
<div class="markdown-html code"></div>
</marked-element>
</template>
<script>
Polymer({
is: 'demo-snippet',
properties: {
_markdown: {
type: String,
value: ''
}
},
attached: function() {
var template = Polymer.dom(this).queryDistributedElements('template')[0];
// If there's no template, render empty code.
if (!template) {
this._markdown = '```\n```';
return;
}
// TODO(noms): When marked-element/issues/23 lands, this will become
// a public method and will need to be updated.
var snippet = this.$.marked._unindent(template.innerHTML);
// Boolean properties are displayed as checked="", so remove the ="" bit.
snippet = snippet.replace(/=""/g, '');
this._markdown = '```\n' + snippet + '\n' + '```';
// Stamp the template.
Polymer.dom(this).appendChild(document.importNode(template.content, true));
}
});
</script>
</dom-module>