Color editor example

MainView.ux

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		InCol = Observable('');
		ValidInput = Observable(true);
		OutCol = Observable();
		OutCol.add(Observable('#f00'));
		OutCol.add(Observable('#0f0'));
		OutCol.add(Observable('#00f'));
		var SelectedColor;
		function UpdateColor(arg){
			if(!SelectedColor) return;
			l = arg.value.length-1;
			if(l!=3 && l!=4 && l!=6 && l!=8 || arg.value[0]!='#') ValidInput.value = false;
			else{
				SelectedColor.value = arg.value;
				ValidInput.value = true;
			}
		}
		function SelectColor(arg){
			SelectedColor = arg.data;
			InCol.value = arg.data.value;
		}
		module.exports = {
			UpdateColor, SelectColor, InCol, OutCol, ValidInput,
			Col0: OutCol.getAt(0),
			Col1: OutCol.getAt(1),
			Col2: OutCol.getAt(2)
		}
	</JavaScript>
	<ClientPanel>
		<DockPanel Height="30%"  Alignment="Top" ClipToBounds="true" Color="#eee">
			<WhileTrue ux:Name="hideColorSelector" Value="true">
				<Move Y="-0.8" RelativeTo="Size" Duration="0.15" Easing="QuadraticIn"/>
			</WhileTrue>
			<Panel Dock="Top" Color="#ddd">
				<TextInput ux:Name="ti" Value="{InCol}" ValueChanged="{UpdateColor}"/>
				<WhileFalse Value="{ValidInput}">
					<Change ti.TextColor="#f00"/>
				</WhileFalse>
			</Panel>
			<ScrollView Dock="Top">
				<StackPanel >
					<Each Items="{OutCol}">
						<Grid Columns="1*,2*,1*" Clicked="{SelectColor}">
							<Text Value="{}"/>
							<Text>(Click to edit)</Text>
							<Rectangle Width="100%" Height="100%" Color="{}"/>
						</Grid>
					</Each>
				</StackPanel>
			</ScrollView>
			<Button Dock="Bottom" Color="#555" Text="Show / Hide">
				<Clicked>
					<Toggle Target="hideColorSelector"/>
				</Clicked>
			</Button>
		</DockPanel>

		<!-- Use the colors -->
		<StackPanel Alignment="VerticalCenter">
			<Rectangle Width="50" Height="50" Color="{Col0}" CornerRadius="14"/>
			<Text Color="{Col1}" FontSize="20">Foo</Text>
			<Button Color="{Col2}" Text="Bar"/>
		</StackPanel>
	</ClientPanel>
</App>