MainView.ux

<App Background="#000">
	<ClientPanel>
		<JavaScript>
			var Observable = require("FuseJS/Observable");
			var birds = Observable();

			// repeat several to show scrolling + transition
			for (var i = 0; i < 50; ++i) {
				birds.add({image: "Assets/image" + (i % 9) + ".jpg"});
			}

			module.exports = {
				birds: birds
			};
		</JavaScript>

		<Image ux:Class="ZoomImage" />
		
		<Panel ux:Name="theViewer" Visibility="Hidden" HitTestMode="LocalBoundsAndChildren">
			<SolidColor ux:Name="blockColor" Color="#0000" />

			<Panel Alignment="TopRight" Padding="5" ux:Name="CloseButton" Margin="5">	
				<Translation ux:Name="theTrans" Vector="1.5,-1.5,0" RelativeTo="Size" />
				<Rectangle Layer="Background" Color="#fffc" CornerRadius="5" />
				<Image File="Assets/cancel.png" Color="#023f" />
				<Clicked>
					<Set viewerVisible.Value="false"/>
				</Clicked>
			</Panel>
			
			<!-- reset transform -->
			<DoubleTapped>
				<Set theZoomer.Value="1" />
				<Set thePanner.Value="0,0" />
				<Set theRotater.Value="0" />
			</DoubleTapped>
			
			<!-- close when it gets small enough -->
			<WhileFloat Value="{ReadProperty theTransform.ZoomFactor}" LessThan="0.7">
				<!-- the gestures will be active at this time, so we must explicitly cancel them -->
				<CancelInteractions />
				<Set viewerVisible.Value="false" />
			</WhileFloat>
			
			<WhileTrue ux:Name="viewerVisible">
				<Change blockColor.Color="#023c" Duration="0.2" Easing="QuadraticInOut" />
				<Change theViewer.Visibility="Visible" />
				<Change theTrans.Vector="0" Duration="0.3" Easing="QuadraticInOut" />
				<PulseForward Target="zoomTo" When="Backward" />
				
				<!-- reset transform so animation gets close to target size -->
				<Set theZoomer.Value="1" When="Backward" />
				<Set thePanner.Value="0,0" When="Backward" />
				<Set theRotater.Value="0" When="Backward" />
			</WhileTrue>
			
			<ZoomGesture Target="theTransform" Minimum="1" Maximum="3" />
			<Attractor ux:Name="theZoomer" Target="theTransform.ZoomFactor" TimeMultiplier="2" Type="Elastic" Unit="Normalized" />
				
			<RotateGesture Target="theTransform" />
			<Attractor ux:Name="theRotater" Target="theTransform.Rotation" TimeMultiplier="0.5" Type="Elastic" Unit="Radians" />
			
			<PanGesture Target="theTransform" Constraint="theViewerImage" />
			<Attractor ux:Name="thePanner" Target="theTransform.Translation" Type="Elastic" Unit="Points" />
				
			<!-- the user might start interacting while the attractors are still running, stop that -->
			<WhileInteracting>
				<!-- Fix will be released soon -->
				<Change Target="theZoomer.IsEnabled" Value="false" />
				<Change Target="thePanner.IsEnabled" Value="false" />
				<Change Target="theRotater.IsEnabled" Value="false" />
			</WhileInteracting>
			
			<!-- A wrapping panel to ensure the InteractiveTransform and layout transforms don't
				interfere with each other (it is not supported to have them both on the same node) -->
			<Panel>
				<ZoomImage ux:Name="theViewerImage">
					<InteractiveTransform ux:Name="theTransform" />
				</ZoomImage>
				<Timeline ux:Name="zoomTo">
					<Move ux:Name="zoomToPos" RelativeTo="PositionOffset" Vector="1" Duration="0.3" Easing="QuadraticInOut" />
					<Resize ux:Name="zoomToSize" RelativeTo="Size" Vector="1" Duration="0.3" Easing="QuadraticInOut" />
				</Timeline>
			</Panel>
		</Panel>
		
		<ScrollView ux:Name="theScroll" AllowedScrollDirections="Horizontal">
			<Panel Margin="7">
				<ColumnLayout ux:Name="theColumns" ColumnSize="100" Orientation="Horizontal" Sizing="Fill" ColumnSpacing="7" ItemSpacing="7" />

				<Each Items="{birds}">
					<Panel>
						<Image ux:Name="selfImage" File="{image}" />
						<Tapped>
							<Set Target="theViewerImage.File" Value="{image}" />
							<Set viewerVisible.Value="true" />
							
							<Set theTransform.ZoomFactor="1" />
							<Set theTransform.Rotation="0" />
							<Set theTransform.Translation="0" />
							
							<Set zoomToPos.RelativeNode="selfImage" />
							<Set zoomToSize.RelativeNode="selfImage" />
							<PulseBackward Target="zoomTo" />
						</Tapped>
					</Panel>
				</Each>
				
			</Panel>
		</ScrollView>
		
		<WhileWindowPortrait>
			<Change theScroll.AllowedScrollDirections="Vertical" />
			<Change theColumns.Orientation="Vertical" />
		</WhileWindowPortrait>
	</ClientPanel>
	
</App>