OLD | NEW |
1 /** | 1 /** |
2 * Copyright 2017 Google Inc. All rights reserved. | 2 * Copyright 2017 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Licensed under the Apache License, Version 2.0 (the "License"); | 4 * Licensed under the Apache License, Version 2.0 (the "License"); |
5 * you may not use this file except in compliance with the License. | 5 * you may not use this file except in compliance with the License. |
6 * You may obtain a copy of the License at | 6 * You may obtain a copy of the License at |
7 * | 7 * |
8 * http://www.apache.org/licenses/LICENSE-2.0 | 8 * http://www.apache.org/licenses/LICENSE-2.0 |
9 * | 9 * |
10 * Unless required by applicable law or agreed to in writing, software | 10 * Unless required by applicable law or agreed to in writing, software |
11 * distributed under the License is distributed on an "AS IS" BASIS, | 11 * distributed under the License is distributed on an "AS IS" BASIS, |
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
13 * See the License for the specific language governing permissions and | 13 * See the License for the specific language governing permissions and |
14 * limitations under the License. | 14 * limitations under the License. |
15 */ | 15 */ |
16 'use strict'; | 16 'use strict'; |
17 | 17 |
| 18 /* globals self */ |
| 19 |
18 class DetailsRenderer { | 20 class DetailsRenderer { |
19 /** | 21 /** |
20 * @param {!DOM} dom | 22 * @param {!DOM} dom |
21 */ | 23 */ |
22 constructor(dom) { | 24 constructor(dom) { |
| 25 /** @private {!DOM} */ |
23 this._dom = dom; | 26 this._dom = dom; |
24 } | 27 } |
25 | 28 |
26 /** | 29 /** |
27 * @param {(!DetailsRenderer.DetailsJSON|!DetailsRenderer.CardsDetailsJSON)} d
etails | 30 * @param {!DetailsRenderer.DetailsJSON} details |
28 * @return {!Element} | 31 * @return {!Element} |
29 */ | 32 */ |
30 render(details) { | 33 render(details) { |
31 switch (details.type) { | 34 switch (details.type) { |
32 case 'text': | 35 case 'text': |
33 return this._renderText(details); | 36 return this._renderText(details); |
34 case 'block': | |
35 return this._renderBlock(details); | |
36 case 'cards': | 37 case 'cards': |
37 return this._renderCards(/** @type {!DetailsRenderer.CardsDetailsJSON} *
/ (details)); | 38 return this._renderCards(/** @type {!DetailsRenderer.CardsDetailsJSON} *
/ (details)); |
38 case 'list': | 39 case 'list': |
39 return this._renderList(details); | 40 return this._renderList(/** @type {!DetailsRenderer.ListDetailsJSON} */
(details)); |
40 default: | 41 default: |
41 throw new Error(`Unknown type: ${details.type}`); | 42 throw new Error(`Unknown type: ${details.type}`); |
42 } | 43 } |
43 } | 44 } |
44 | 45 |
45 /** | 46 /** |
46 * @param {!DetailsRenderer.DetailsJSON} text | 47 * @param {!DetailsRenderer.DetailsJSON} text |
47 * @return {!Element} | 48 * @return {!Element} |
48 */ | 49 */ |
49 _renderText(text) { | 50 _renderText(text) { |
50 const element = this._dom.createElement('div', 'lh-text'); | 51 const element = this._dom.createElement('div', 'lh-text'); |
51 element.textContent = text.text; | 52 element.textContent = text.text; |
52 return element; | 53 return element; |
53 } | 54 } |
54 | 55 |
55 /** | 56 /** |
56 * @param {!DetailsRenderer.DetailsJSON} block | 57 * @param {!DetailsRenderer.ListDetailsJSON} list |
57 * @return {!Element} | |
58 */ | |
59 _renderBlock(block) { | |
60 const element = this._dom.createElement('div', 'lh-block'); | |
61 const items = block.items || []; | |
62 for (const item of items) { | |
63 element.appendChild(this.render(item)); | |
64 } | |
65 return element; | |
66 } | |
67 | |
68 /** | |
69 * @param {!DetailsRenderer.DetailsJSON} list | |
70 * @return {!Element} | 58 * @return {!Element} |
71 */ | 59 */ |
72 _renderList(list) { | 60 _renderList(list) { |
73 const element = this._dom.createElement('details', 'lh-details'); | 61 const element = this._dom.createElement('details', 'lh-details'); |
74 if (list.header) { | 62 if (list.header) { |
75 const summary = this._dom.createElement('summary', 'lh-list__header'); | 63 const summary = this._dom.createElement('summary', 'lh-list__header'); |
76 summary.textContent = list.header.text; | 64 summary.textContent = list.header.text; |
77 element.appendChild(summary); | 65 element.appendChild(summary); |
78 } | 66 } |
79 | 67 |
80 const itemsElem = this._dom.createElement('div', 'lh-list__items'); | 68 const itemsElem = this._dom.createElement('div', 'lh-list__items'); |
81 const items = list.items || []; | 69 for (const item of list.items) { |
82 for (const item of items) { | |
83 itemsElem.appendChild(this.render(item)); | 70 itemsElem.appendChild(this.render(item)); |
84 } | 71 } |
85 element.appendChild(itemsElem); | 72 element.appendChild(itemsElem); |
86 return element; | 73 return element; |
87 } | 74 } |
88 | 75 |
89 /** | 76 /** |
90 * @param {!DetailsRenderer.CardsDetailsJSON} details | 77 * @param {!DetailsRenderer.CardsDetailsJSON} details |
91 * @return {!Element} | 78 * @return {!Element} |
92 */ | 79 */ |
(...skipping 19 matching lines...) Expand all Loading... |
112 } | 99 } |
113 } | 100 } |
114 | 101 |
115 element.appendChild(cardsParent); | 102 element.appendChild(cardsParent); |
116 return element; | 103 return element; |
117 } | 104 } |
118 } | 105 } |
119 | 106 |
120 if (typeof module !== 'undefined' && module.exports) { | 107 if (typeof module !== 'undefined' && module.exports) { |
121 module.exports = DetailsRenderer; | 108 module.exports = DetailsRenderer; |
| 109 } else { |
| 110 self.DetailsRenderer = DetailsRenderer; |
122 } | 111 } |
123 | 112 |
124 /** | 113 /** |
125 * @typedef {{ | 114 * @typedef {{ |
126 * type: string, | 115 * type: string, |
127 * text: (string|undefined), | 116 * text: (string|undefined) |
128 * header: (!DetailsRenderer.DetailsJSON|undefined), | |
129 * items: (!Array<!DetailsRenderer.DetailsJSON>|undefined) | |
130 * }} | 117 * }} |
131 */ | 118 */ |
132 DetailsRenderer.DetailsJSON; // eslint-disable-line no-unused-expressions | 119 DetailsRenderer.DetailsJSON; // eslint-disable-line no-unused-expressions |
133 | 120 |
| 121 /** |
| 122 * @typedef {{ |
| 123 * type: string, |
| 124 * header: ({text: string}|undefined), |
| 125 * items: !Array<{type: string, text: (string|undefined)}> |
| 126 * }} |
| 127 */ |
| 128 DetailsRenderer.ListDetailsJSON; // eslint-disable-line no-unused-expressions |
| 129 |
134 /** @typedef {{ | 130 /** @typedef {{ |
135 * type: string, | 131 * type: string, |
136 * text: string, | 132 * header: ({text: string}|undefined), |
137 * header: !DetailsRenderer.DetailsJSON, | |
138 * items: !Array<{title: string, value: string, snippet: (string|undefined),
target: string}> | 133 * items: !Array<{title: string, value: string, snippet: (string|undefined),
target: string}> |
139 * }} | 134 * }} |
140 */ | 135 */ |
141 DetailsRenderer.CardsDetailsJSON; // eslint-disable-line no-unused-expressions | 136 DetailsRenderer.CardsDetailsJSON; // eslint-disable-line no-unused-expressions |
OLD | NEW |