1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | import '@polymer/polymer/polymer-legacy.js';
|
13 | import '@polymer/marked-element/marked-element.js';
|
14 | import '@polymer/prism-element/prism-highlighter.js';
|
15 | import '@polymer/prism-element/prism-theme-default.js';
|
16 |
|
17 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
|
18 | import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
|
19 | import {html} from '@polymer/polymer/lib/utils/html-tag.js';
|
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 | Polymer({
|
57 | _template: html`
|
58 | <style include="prism-theme-default">
|
59 | :host {
|
60 | display: block;
|
61 |
|
62 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
63 | 0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
64 | 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
65 | margin-bottom: 40px;
|
66 | @apply --demo-snippet;
|
67 | }
|
68 |
|
69 | .demo {
|
70 | display: block;
|
71 | border-bottom: 1px solid #e0e0e0;
|
72 | background-color: white;
|
73 | margin: 0;
|
74 | padding: 20px;
|
75 | @apply --demo-snippet-demo;
|
76 | }
|
77 |
|
78 | .code-container {
|
79 | margin: 0;
|
80 | background-color: #f5f5f5;
|
81 | font-size: 13px;
|
82 | overflow: auto;
|
83 | position: relative;
|
84 | padding: 0 20px;
|
85 | @apply --demo-snippet-code;
|
86 | }
|
87 |
|
88 | .code {
|
89 | padding: 20px;
|
90 | margin: 0;
|
91 | background-color: var(--google-grey-100);
|
92 | font-size: 13px;
|
93 | overflow: auto;
|
94 | @apply --demo-snippet-code;
|
95 | }
|
96 | .code > pre {
|
97 | margin: 0;
|
98 | padding: 0 0 10px 0;
|
99 | }
|
100 |
|
101 | button {
|
102 | position: absolute;
|
103 | top: 0;
|
104 | right: 0px;
|
105 | text-transform: uppercase;
|
106 | border: none;
|
107 | cursor: pointer;
|
108 | background: #e0e0e0;
|
109 | }
|
110 | </style>
|
111 |
|
112 | <prism-highlighter></prism-highlighter>
|
113 |
|
114 | <div class="demo">
|
115 | <slot id="content"></slot>
|
116 | </div>
|
117 |
|
118 | <div class="code-container">
|
119 | <marked-element markdown="[[_markdown]]" id="marked">
|
120 | <div class="code" slot="markdown-html" id="code"></div>
|
121 | </marked-element>
|
122 | <button id="copyButton" title="copy to clipboard" on-tap="_copyToClipboard">Copy</button>
|
123 | </div>
|
124 | `,
|
125 |
|
126 | is: 'demo-snippet',
|
127 |
|
128 | properties: {
|
129 |
|
130 | |
131 |
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 | _markdown: {
|
139 | type: String,
|
140 | },
|
141 | },
|
142 |
|
143 | attached: function() {
|
144 | this._observer = dom(this.$.content).observeNodes(function(info) {
|
145 | this._updateMarkdown();
|
146 | }.bind(this));
|
147 | },
|
148 |
|
149 | detached: function() {
|
150 | if (this._observer) {
|
151 | dom(this.$.content).unobserveNodes(this._observer);
|
152 | this._observer = null;
|
153 | }
|
154 | },
|
155 |
|
156 | _updateMarkdown: function() {
|
157 | var template = dom(this).queryDistributedElements('template')[0];
|
158 |
|
159 |
|
160 | if (!template) {
|
161 | this._markdown = '';
|
162 | return;
|
163 | }
|
164 |
|
165 | var snippet = this.$.marked.unindent(template.innerHTML);
|
166 |
|
167 |
|
168 |
|
169 | snippet = snippet.replace(/ class=""/g, '');
|
170 |
|
171 |
|
172 | snippet = snippet.replace(/=""/g, '');
|
173 |
|
174 | this._markdown = '```\n' + snippet + '\n' +
|
175 | '```';
|
176 |
|
177 | if (!template.hasAttribute('is')) {
|
178 |
|
179 |
|
180 | dom(this.$.content).unobserveNodes(this._observer);
|
181 | this._observer = null;
|
182 | dom(this).appendChild(document.importNode(template.content, true));
|
183 | }
|
184 | this.dispatchEvent(new CustomEvent('dom-ready'));
|
185 | },
|
186 |
|
187 | _copyToClipboard: function() {
|
188 |
|
189 |
|
190 | var snipRange = document.createRange();
|
191 | snipRange.selectNodeContents(this.$.code);
|
192 | var selection = window.getSelection();
|
193 | selection.removeAllRanges();
|
194 | selection.addRange(snipRange);
|
195 | var result = false;
|
196 | try {
|
197 | result = document.execCommand('copy');
|
198 | this.$.copyButton.textContent = 'done';
|
199 | } catch (err) {
|
200 |
|
201 | console.error(err);
|
202 | this.$.copyButton.textContent = 'error';
|
203 | }
|
204 |
|
205 |
|
206 | setTimeout(this._resetCopyButtonState.bind(this), 1000);
|
207 |
|
208 | selection.removeAllRanges();
|
209 | return result;
|
210 | },
|
211 |
|
212 | _resetCopyButtonState: function() {
|
213 | this.$.copyButton.textContent = 'copy';
|
214 | }
|
215 | });
|