| 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 |