Artifact
f0bef24d87880e93ddd2fbdf38ee0d970b016ba68223b86bcae93f0ae5212495:
0000: 0a 3c 6c 6f 6f 70 2d 63 68 69 6c 64 3e 0a 0a 20 .<loop-child>..
0010: 20 3c 6c 6f 6f 70 65 64 2d 63 68 69 6c 64 20 65 <looped-child e
0020: 61 63 68 3d 7b 20 69 74 65 6d 20 69 6e 20 69 74 ach={ item in it
0030: 65 6d 73 20 7d 20 65 6c 3d 7b 69 74 65 6d 7d 3e ems } el={item}>
0040: 3c 2f 6c 6f 6f 70 65 64 2d 63 68 69 6c 64 3e 0a </looped-child>.
0050: 0a 20 20 74 68 69 73 2e 69 74 65 6d 73 20 3d 20 . this.items =
0060: 5b 20 7b 6e 61 6d 65 3a 20 27 6f 6e 65 27 7d 2c [ {name: 'one'},
0070: 20 7b 6e 61 6d 65 3a 20 27 74 77 6f 27 7d 20 5d {name: 'two'} ]
0080: 0a 20 20 74 68 69 73 2e 63 68 69 6c 64 72 65 6e . this.children
0090: 4d 6f 75 6e 74 57 69 64 74 68 73 20 3d 20 5b 5d MountWidths = []
00a0: 0a 0a 20 20 67 65 74 57 69 64 74 68 28 65 6c 29 .. getWidth(el)
00b0: 20 7b 0a 20 20 20 20 69 66 20 28 65 6c 2e 72 6f {. if (el.ro
00c0: 6f 74 2e 67 65 74 42 6f 75 6e 64 69 6e 67 43 6c ot.getBoundingCl
00d0: 69 65 6e 74 52 65 63 74 29 20 7b 0a 20 20 20 20 ientRect) {.
00e0: 20 20 72 65 74 75 72 6e 20 65 6c 2e 72 6f 6f 74 return el.root
00f0: 2e 67 65 74 42 6f 75 6e 64 69 6e 67 43 6c 69 65 .getBoundingClie
0100: 6e 74 52 65 63 74 28 29 2e 77 69 64 74 68 0a 20 ntRect().width.
0110: 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 20 20 } else {.
0120: 20 20 72 65 74 75 72 6e 20 66 61 6c 73 65 0a 20 return false.
0130: 20 20 20 7d 0a 20 20 7d 0a 0a 20 20 74 68 69 73 }. }.. this
0140: 2e 6f 6e 28 27 6d 6f 75 6e 74 27 2c 20 66 75 6e .on('mount', fun
0150: 63 74 69 6f 6e 28 29 20 7b 0a 20 20 20 20 74 68 ction() {. th
0160: 69 73 2e 74 61 67 73 5b 27 6c 6f 6f 70 65 64 2d is.tags['looped-
0170: 63 68 69 6c 64 27 5d 2e 66 6f 72 45 61 63 68 28 child'].forEach(
0180: 66 75 6e 63 74 69 6f 6e 28 63 68 69 6c 64 29 20 function(child)
0190: 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 63 68 69 {. this.chi
01a0: 6c 64 72 65 6e 4d 6f 75 6e 74 57 69 64 74 68 73 ldrenMountWidths
01b0: 2e 70 75 73 68 28 74 68 69 73 2e 67 65 74 57 69 .push(this.getWi
01c0: 64 74 68 28 63 68 69 6c 64 29 29 0a 20 20 20 20 dth(child)).
01d0: 7d 2e 62 69 6e 64 28 74 68 69 73 29 29 0a 20 20 }.bind(this)).
01e0: 7d 29 0a 0a 3c 2f 6c 6f 6f 70 2d 63 68 69 6c 64 })..</loop-child
01f0: 3e 0a 0a 0a 3c 6c 6f 6f 70 65 64 2d 63 68 69 6c >...<looped-chil
0200: 64 20 73 74 79 6c 65 3d 22 63 6f 6c 6f 72 3a 20 d style="color:
0210: 7b 20 63 6f 6c 6f 72 20 7d 3b 22 3e 0a 0a 20 20 { color };">..
0220: 3c 68 33 3e 7b 20 6f 70 74 73 2e 65 6c 2e 6e 61 <h3>{ opts.el.na
0230: 6d 65 20 7d 3c 2f 68 33 3e 0a 20 20 3c 62 75 74 me }</h3>. <but
0240: 74 6f 6e 20 6f 6e 63 6c 69 63 6b 3d 7b 20 68 69 ton onclick={ hi
0250: 74 20 7d 3e 7b 20 6f 70 74 73 2e 65 6c 2e 6e 61 t }>{ opts.el.na
0260: 6d 65 20 7d 3c 2f 62 75 74 74 6f 6e 3e 0a 0a 20 me }</button>..
0270: 20 74 68 69 73 2e 63 6f 6c 6f 72 20 3d 20 27 72 this.color = 'r
0280: 65 64 27 0a 0a 20 20 74 68 69 73 2e 6f 6e 28 27 ed'.. this.on('
0290: 6d 6f 75 6e 74 27 2c 20 66 75 6e 63 74 69 6f 6e mount', function
02a0: 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 6d 6f () {. this.mo
02b0: 75 6e 74 57 69 64 74 68 20 3d 20 74 68 69 73 2e untWidth = this.
02c0: 70 61 72 65 6e 74 2e 67 65 74 57 69 64 74 68 28 parent.getWidth(
02d0: 74 68 69 73 29 0a 20 20 7d 29 0a 0a 20 20 68 69 this). }).. hi
02e0: 74 28 65 29 20 7b 0a 20 20 20 20 74 68 69 73 2e t(e) {. this.
02f0: 63 6f 6c 6f 72 20 3d 20 27 62 6c 75 65 27 0a 20 color = 'blue'.
0300: 20 7d 0a 0a 3c 2f 6c 6f 6f 70 65 64 2d 63 68 69 }..</looped-chi
0310: 6c 64 3e 0a ld>.