(Brian) Emil Hartz hartzis

React and Immutable, Top Down

React and immutable example of a simple top down, one way data flow, single state app.

	<!doctype html>
	<html lang="en">
	<head>
	<title>JavaScript Patterns</title>
	<meta charset="utf-8">
	</head>
	<body>
	<script>
	/* Title: window scroll event
	* Description: avoid attaching handlers to the window scroll event

	.directive('fileDownload', function ($compile) {
	var fd = {
	restrict: 'A',
	link: function (scope, iElement, iAttrs) {
	scope.$on("downloadFile", function (e, url) {
	// console.log('dl url-', url);
	var iFrame = iElement.find("iframe");
	if (!(iFrame && iFrame.length > 0)) {
	iFrame = angular.element("<iframe style='position:fixed;display:none;top:-1px;left:-1px;'/>");
	iElement.append(iFrame);


	angular.module('loginApp', [])
	.directive("loginForm", [
	function () {
	return {
	restrict: 'E',
	scope: {},
	template: '<div class="row"> <div class="col-xs-12"> <form name="loginForm"> <div class="form-group"> <label for="username">Username</label> <input type="text" name="username" ng-model="username" required="required" class="form-control"/> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" name="password" ng-model="password" required="required" class="form-control"/> </div> <button type="submit" ng-disabled="!loginForm.$valid" ng-class="{\'btn-default\':!loginForm.$valid,\'btn-success\':loginForm.$valid}" ng-click="login()" class="btn login">Login</button> <span ng-show="loginError && !loginForm.$valid" class="label label-danger"> <b>Error With Login</b> Please try again. </span></form> </div> </div>',
	replace: 'true',
	controller: ['$scope', '$http', '$window',

	// From - http://stackoverflow.com/questions/24335821/can-i-fastclick-reactjs-running-in-cordova/24345469#24345469

	// or use

	// https://github.com/zilverline/react-tap-event-plugin

	React.initializeTouchEvents(true)

	var TouchClick = React.createClass({

	// https://codepen.io/hartzis/pen/VvNGZP
	class ImageUpload extends Component {
	constructor(props) {
	super(props);
	this.state = {
	file: '',
	imagePreviewUrl: ''
	};
	this._handleImageChange = this._handleImageChange.bind(this);
	this._handleSubmit = this._handleSubmit.bind(this);

	uploadImage(imageFile) {
	return new Promise((resolve, reject) => {
	let imageFormData = new FormData();

	imageFormData.append('imageFile', imageFile);

	var xhr = new XMLHttpRequest();

	xhr.open('post', '/upload', true);

	let multiparty = require('multiparty');
	let fs = require('fs');

	function saveImage(req, res) {
	let form = new multiparty.Form();

	form.parse(req, (err, fields, files) => {

	let {path: tempPath, originalFilename} = files.imageFile[0];
	let copyToPath = "./images/" + originalFilename;



	###APIs

	* http://www.programmableweb.com/