jahudka/template.latte

## template.latte
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Dropzone example</title>

        <script type="application/json" id="nittro-params">
            {
                "basePath": "/"
            }
        </script>

        <script type="text/javascript">window._stack = [];</script>

        <link rel="stylesheet" type="text/css" href="path/to/nittro-full.css" />

        <style type="text/css">
            body, html {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }

            #dropzone {
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                display: -webkit-flex;
                display: flex;
                background: rgba(0, 0, 0, 0.6);
                opacity: 0;
                -webkit-transform-origin: center top;
                -moz-transform-origin: center top;
                -ms-transform-origin: center top;
                -o-transform-origin: center top;
                transform-origin: center top;
                -webkit-transform: scaleY(0);
                -moz-transform: scaleY(0);
                -ms-transform: scaleY(0);
                -o-transform: scaleY(0);
                transform: scaleY(0);
                -webkit-transition: opacity 0.2s, -webkit-transform 0.2s step-end;
                -moz-transition: opacity 0.2s, -moz-transform 0.2s step-end;
                -ms-transition: opacity 0.2s, -ms-transform 0.2s step-end;
                -o-transition: opacity 0.2s, -o-transform 0.2s step-end;
                transition: opacity 0.2s, transform 0.2s step-end;
            }

            #dropzone::before {
                display: block;
                margin: auto;
                font-size: 3em;
                color: #333;
                content: 'Drop your files here'
            }

            #dropzone.active {
                opacity: 1;
                -webkit-transform: scaleY(1);
                -moz-transform: scaleY(1);
                -ms-transform: scaleY(1);
                -o-transform: scaleY(1);
                transform: scaleY(1);
                -webkit-transition: opacity 0.2s, -webkit-transform 0.2s step-start;
                -moz-transition: opacity 0.2s, -moz-transform 0.2s step-start;
                -ms-transition: opacity 0.2s, -ms-transform 0.2s step-start;
                -o-transition: opacity 0.2s, -o-transform 0.2s step-start;
                transition: opacity 0.2s, transform 0.2s step-start;
            }

            #exampleForm {
                margin: 3em auto;
            }
        </style>
    </head>
    <body>
        <form action="" method="post" id="exampleForm">
            <div id="dropzone"></div>
            <div>
                <!-- define the HTML input field the DropZone will "hijack";
                     normally this would be rendered using a simple {input uploads}
                     latte macro if you render the form manually -->
                Select files: <input type="file" name="uploads[]" id="exampleForm-uploads" multiple required accept="image/*" />
            </div>
            <table>
                <tbody id="log"></tbody>
            </table>
            <input type="submit" value="Send" />
        </form>

        <script type="text/javascript">
            _stack.push(function(di) {
                var field = document.getElementById('exampleForm-uploads'),
                    zone = document.getElementById('dropzone'),
                    log = document.getElementById('log'),
                    widget = di.create('dropZone', { from: field });

                // The widget is created from the target HTML input field,
                // so all the basics like validation rules and POST parameter
                // name are already set up. Now we need to tell the widget
                // which HTML element should serve as the target the users
                // will drag and drop their files onto, which is done like this:
                widget.attach(zone);

                // The widget will emit the "body-enter" and "body-leave" events when
                // the mouse enters and leaves the viewport during a drag operation;
                // you can use these to indicate where in the page the user should
                // drop the files
                widget.on('body-enter body-leave', function(evt) {
                    zone.classList.toggle('active', evt.type === 'body-enter');
                });

                // The "drop" event is emitted when the user drops some files
                // onto the target element; the event is only emitted once for
                // the whole drop operation and after all files have been processed,
                // regardless of how many files have actually been dropped. Indeed,
                // the event will be emitted even if none of the files dropped
                // match the validation rules. It is just one more "exit point"
                // for the whole drag & drop operation and it's intended use is to
                // update the GUI to let the user know that the operation has been
                // completed.
                widget.on('drop', function() {
                    zone.classList.toggle('active', false);

                });

                // The "file" event is triggered once per each dropped file
                // which passes the validation rules. In the handler you can
                // for example add the user to a visual queue to give the user
                // an overview of the files they are uploading and possibly
                // controls to enable the user to remove a given file from
                // the queue.
                widget.on('file', function(evt) {
                    var file = evt.data.file,
                        row = [];

                    row.push(file.name, file.type, widget.formatSize(file.size), '');

                    // The widget has utility methods to work with images,
                    // for example to make it easier to show image previews.
                    if (widget.isImage(file)) {
                        widget.loadImage(file).then(function(image) {
                            image.style.maxWidth = '60px';
                            image.style.maxHeight = '60px';
                            log.childNodes.item(evt.data.index).lastChild.appendChild(image);

                        });
                    }

                    log.innerHTML += '<tr><td>' + row.join('</td><td>') + '</td></tr>';

                });

                // And that's it! When the form is submitted, the widget will automatically
                // take care of adding the dropped files to the submitted form data.
                // When an error occurs (e.g. an invalid file is dropped), the dropzone
                // emits the 'error' event, which you can bind to and use to react any
                // way you like, but the default behaviour is that the error is forwarded
                // to the original input field; the default behaviour for the field, in turn,
                // is to show a flash message with the error description.
            });
        </script>

        <script type="text/javascript" src="path/to/nittro-full.js"></script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Dropzone example</title>

	<script type="application/json" id="nittro-params">
	{
	"basePath": "/"
	}
	</script>

	<script type="text/javascript">window._stack = [];</script>

	<link rel="stylesheet" type="text/css" href="path/to/nittro-full.css" />

	<style type="text/css">
	body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	}

	#dropzone {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: flex;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	-webkit-transform-origin: center top;
	-moz-transform-origin: center top;
	-ms-transform-origin: center top;
	-o-transform-origin: center top;
	transform-origin: center top;
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s step-end;
	-moz-transition: opacity 0.2s, -moz-transform 0.2s step-end;
	-ms-transition: opacity 0.2s, -ms-transform 0.2s step-end;
	-o-transition: opacity 0.2s, -o-transform 0.2s step-end;
	transition: opacity 0.2s, transform 0.2s step-end;
	}

	#dropzone::before {
	display: block;
	margin: auto;
	font-size: 3em;
	color: #333;
	content: 'Drop your files here'
	}

	#dropzone.active {
	opacity: 1;
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	transform: scaleY(1);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s step-start;
	-moz-transition: opacity 0.2s, -moz-transform 0.2s step-start;
	-ms-transition: opacity 0.2s, -ms-transform 0.2s step-start;
	-o-transition: opacity 0.2s, -o-transform 0.2s step-start;
	transition: opacity 0.2s, transform 0.2s step-start;
	}

	#exampleForm {
	margin: 3em auto;
	}
	</style>
	</head>
	<body>
	<form action="" method="post" id="exampleForm">
	<div id="dropzone"></div>
	<div>
	<!-- define the HTML input field the DropZone will "hijack";
	normally this would be rendered using a simple {input uploads}
	latte macro if you render the form manually -->
	Select files: <input type="file" name="uploads[]" id="exampleForm-uploads" multiple required accept="image/*" />
	</div>
	<table>
	<tbody id="log"></tbody>
	</table>
	<input type="submit" value="Send" />
	</form>

	<script type="text/javascript">
	_stack.push(function(di) {
	var field = document.getElementById('exampleForm-uploads'),
	zone = document.getElementById('dropzone'),
	log = document.getElementById('log'),
	widget = di.create('dropZone', { from: field });

	// The widget is created from the target HTML input field,
	// so all the basics like validation rules and POST parameter
	// name are already set up. Now we need to tell the widget
	// which HTML element should serve as the target the users
	// will drag and drop their files onto, which is done like this:
	widget.attach(zone);

	// The widget will emit the "body-enter" and "body-leave" events when
	// the mouse enters and leaves the viewport during a drag operation;
	// you can use these to indicate where in the page the user should
	// drop the files
	widget.on('body-enter body-leave', function(evt) {
	zone.classList.toggle('active', evt.type === 'body-enter');
	});

	// The "drop" event is emitted when the user drops some files
	// onto the target element; the event is only emitted once for
	// the whole drop operation and after all files have been processed,
	// regardless of how many files have actually been dropped. Indeed,
	// the event will be emitted even if none of the files dropped
	// match the validation rules. It is just one more "exit point"
	// for the whole drag & drop operation and it's intended use is to
	// update the GUI to let the user know that the operation has been
	// completed.
	widget.on('drop', function() {
	zone.classList.toggle('active', false);

	});

	// The "file" event is triggered once per each dropped file
	// which passes the validation rules. In the handler you can
	// for example add the user to a visual queue to give the user
	// an overview of the files they are uploading and possibly
	// controls to enable the user to remove a given file from
	// the queue.
	widget.on('file', function(evt) {
	var file = evt.data.file,
	row = [];

	row.push(file.name, file.type, widget.formatSize(file.size), '');

	// The widget has utility methods to work with images,
	// for example to make it easier to show image previews.
	if (widget.isImage(file)) {
	widget.loadImage(file).then(function(image) {
	image.style.maxWidth = '60px';
	image.style.maxHeight = '60px';
	log.childNodes.item(evt.data.index).lastChild.appendChild(image);

	});
	}

	log.innerHTML += '<tr><td>' + row.join('</td><td>') + '</td></tr>';

	});

	// And that's it! When the form is submitted, the widget will automatically
	// take care of adding the dropped files to the submitted form data.
	// When an error occurs (e.g. an invalid file is dropped), the dropzone
	// emits the 'error' event, which you can bind to and use to react any
	// way you like, but the default behaviour is that the error is forwarded
	// to the original input field; the default behaviour for the field, in turn,
	// is to show a flash message with the error description.
	});
	</script>

	<script type="text/javascript" src="path/to/nittro-full.js"></script>
	</body>
	</html>