diff options
Diffstat (limited to 'node_modules/montage/ui/flow.reel/flow.html')
| -rw-r--r-- | node_modules/montage/ui/flow.reel/flow.html | 48 |
1 files changed, 38 insertions, 10 deletions
diff --git a/node_modules/montage/ui/flow.reel/flow.html b/node_modules/montage/ui/flow.reel/flow.html index 646c87f8..8a9603bf 100644 --- a/node_modules/montage/ui/flow.reel/flow.html +++ b/node_modules/montage/ui/flow.reel/flow.html | |||
| @@ -9,24 +9,43 @@ | |||
| 9 | <title></title> | 9 | <title></title> |
| 10 | <script type="text/montage-serialization"> | 10 | <script type="text/montage-serialization"> |
| 11 | { | 11 | { |
| 12 | "repetition1": { | 12 | "repetition": { |
| 13 | "module": "montage/ui/repetition.reel", | 13 | "prototype": "montage/ui/repetition.reel", |
| 14 | "name": "Repetition", | ||
| 15 | "properties": { | 14 | "properties": { |
| 16 | "element": { | 15 | "element": { |
| 17 | "#": "montage-flow-repetition" | 16 | "#": "montage-flow-repetition" |
| 18 | } | 17 | } |
| 19 | } | 18 | } |
| 20 | }, | 19 | }, |
| 20 | "translateComposer": { | ||
| 21 | "prototype": "montage/ui/composer/translate-composer", | ||
| 22 | "properties": { | ||
| 23 | "component": {"@": "owner"}, | ||
| 24 | "maxTranslateX": 250000, | ||
| 25 | "invertAxis": true | ||
| 26 | }, | ||
| 27 | "bindings": { | ||
| 28 | "element": {"<-": "@owner._element"} | ||
| 29 | } | ||
| 30 | }, | ||
| 21 | "owner": { | 31 | "owner": { |
| 22 | "module": "montage/ui/flow.reel", | 32 | "prototype": "montage/ui/flow.reel", |
| 23 | "name": "Flow", | ||
| 24 | "properties": { | 33 | "properties": { |
| 25 | "element": { | 34 | "element": { |
| 26 | "#": "montage-flow" | 35 | "#": "montage-flow" |
| 27 | }, | 36 | }, |
| 28 | "_repetition": { | 37 | "_repetition": { |
| 29 | "@": "repetition1" | 38 | "@": "repetition" |
| 39 | }, | ||
| 40 | "_translateComposer": { | ||
| 41 | "@": "translateComposer" | ||
| 42 | } | ||
| 43 | }, | ||
| 44 | "bindings": { | ||
| 45 | "translateX": {"<-": "@translateComposer.translateX"}, | ||
| 46 | "isSelectionEnabled": { | ||
| 47 | "boundObject": {"@": "repetition"}, | ||
| 48 | "boundObjectPropertyPath": "isSelectionEnabled" | ||
| 30 | } | 49 | } |
| 31 | } | 50 | } |
| 32 | } | 51 | } |
| @@ -47,14 +66,23 @@ | |||
| 47 | -webkit-transform-style: preserve-3d; | 66 | -webkit-transform-style: preserve-3d; |
| 48 | -webkit-transform: translateZ(0); | 67 | -webkit-transform: translateZ(0); |
| 49 | } | 68 | } |
| 50 | .montage-flow-repetition > * { | 69 | .montage-flow-repetition > div { |
| 51 | position: absolute !important; | 70 | position: absolute; |
| 71 | top: 50%; | ||
| 72 | left: 50%; | ||
| 73 | width: 0; | ||
| 74 | height: 0; | ||
| 75 | -webkit-transform: translateZ(0); | ||
| 76 | -webkit-transform-style: preserve-3d; | ||
| 77 | } | ||
| 78 | .montage-flow-pointer-events-none { | ||
| 79 | pointer-events: none; | ||
| 52 | } | 80 | } |
| 53 | </style> | 81 | </style> |
| 54 | </head> | 82 | </head> |
| 55 | <body> | 83 | <body> |
| 56 | <div id="montage-flow" class="montage-flow"> | 84 | <div data-montage-id="montage-flow" class="montage-flow"> |
| 57 | <div id="montage-flow-repetition" class="montage-flow-repetition"></div> | 85 | <div data-montage-id="montage-flow-repetition" class="montage-flow-repetition"></div> |
| 58 | </div> | 86 | </div> |
| 59 | </body> | 87 | </body> |
| 60 | </html> | 88 | </html> |