Update the admin interface and demo site generator

Update the admin interface to feature a fully responsive, fully retina, cleaned up look and feel based on Bootstrap 3. Simultaniously updated the generated demo site to be more in line with what we use as a starting point for our websites.

While this commit is squashed under my name, this is the result of the hard work by too many people to mention by name.

.bowerrc

@@ -0,0 +1,3 @@
+{
+    "directory": "Resources/ui/vendor_bower/"
+}

Controller/MediaController.php

@@ -265,8 +265,11 @@ public function dropAction(Request $request, $folderId)
         $folder = $em->getRepository('KunstmaanMediaBundle:Folder')->getFolder($folderId);
 
         $drop = null;
+
         if (array_key_exists('files', $_FILES) && $_FILES['files']['error'] == 0) {
             $drop = $request->files->get('files');
+	} else if (!$request->files->get('file')) {
+	    $drop = $request->files->get('file');
         } else {
             $drop = $request->get('text');
         }
@@ -278,7 +281,7 @@ public function dropAction(Request $request, $folderId)
             return new Response(json_encode(array('status' => 'File was uploaded successfuly!')));
         }
 
-        $request->getSession()->getFlashBag()->add('notice', 'Could not recognize what you dropped!');
+	$request->getSession()->getFlashBag()->add('danger', 'Could not recognize what you dropped!');
 
         return new Response(json_encode(array('status' => 'Could not recognize anything!')));
     }

Resources/translations/messages.en.yml

@@ -6,6 +6,12 @@ media:
 
   media:
     no: No files in this folder yet.
+    dnd:
+      tip: "Tip:"
+      tiptext: did you know you can just drop multiple files here?
+    alert:
+      title: Incoming!
+      text: Drop your files to instantly upload them to this folder.
     bulkupload:
       addto: Upload files to "%folder%"
     contenttab:

Resources/ui/js/_bulk-upload.js

@@ -0,0 +1,107 @@
+var kunstmaanMediaBundle = kunstmaanMediaBundle || {};
+
+kunstmaanMediaBundle.bulkUpload = (function(window, undefined) {
+
+    var init, initUploader;
+
+    init = function() {
+	initUploader();
+    };
+
+
+    initUploader = function() {
+	// Get values and elements
+	var $uploader = $('#bulk-upload'),
+	    url = $uploader.data('url');
+
+
+	var $fileList = $('#bulk-upload__file-list'),
+	    $uploadWrapper = $('#bulk-button-wrapper--upload'),
+	    $completedWrapper = $('#bulk-button-wrapper--completed'),
+	    $pickFilesBtn = $('#bulk-button--pick-files'),
+	    $uploadFilesBtn = $('#bulk-button--upload-files');
+
+
+	// Setup
+	var bulkUploader = new plupload.Uploader({
+		runtimes : 'html5',
+		browse_button: 'bulk-button--pick-files',
+		container: 'bulk-upload__container',
+		url: url,
+		processing_id: null,
+
+		filters : {
+		    max_file_size : '100mb'
+		},
+
+		init: {
+		    PostInit: function() {
+			$fileList.html('<p class="list-group-item">No files selected</p>');
+
+			$uploadFilesBtn.on('click', function() {
+			    bulkUploader.start();
+			});
+		    },
+
+		    FilesAdded: function(up, files) {
+			$fileList.html('');
+
+			plupload.each(files, function(file) {
+			    $fileList.append('<li class="list-group-item" id="' + file.id + '">' + file.name + ' (<small>' + plupload.formatSize(file.size) + '</small>) <strong class="js-status"></strong></li>')
+			});
+
+			$uploadFilesBtn.removeClass('disabled');
+			$uploadFilesBtn.prop('disabled', false);
+			$uploadFilesBtn.addClass('btn-primary');
+			$pickFilesBtn.removeClass('btn-primary').addClass('btn-default');
+		    },
+
+		    UploadProgress: function(up, file) {
+			var $fileLine = $('#' + file.id);
+
+			$fileLine.find('.js-status').html(file.percent + '%');
+		    },
+
+		    Error: function(up, err) {
+			var $fileLine = $('#' + up.processing_id);
+
+			$fileLine.find('.js-status').html('ERROR: ' + err.message);
+		    },
+
+		    FileUploaded: function(up, file, res) {
+			var $fileLine = $('#' + file.id);
+
+			$fileLine.addClass('list-group-item-success');
+
+			var obj = null;
+			obj = JSON.parse(jsonString);
+
+			if (obj.error) {
+			    $fileLine.addClass('list-group-item-danger');
+			    $fileLine.find('.js-status').html('ERROR: ' + obj.error.message);
+			} else {
+			    $fileLine.addClass('list-group-item-success');
+			}
+		    },
+
+		    UploadComplete: function(up, files) {
+			$completedWrapper.removeClass('hidden');
+		    },
+
+		    BeforeUpload: function(up, file) {
+			up.processing_id = file.id;
+			$uploadWrapper.addClass('hidden');
+		    }
+		}
+	    });
+
+	// Initialize uploader
+	bulkUploader.init();
+    };
+
+
+    return {
+	init: init
+    };
+
+}(window));

Resources/ui/js/_dnd-upload.js

@@ -0,0 +1,83 @@
+var kunstmaanMediaBundle = kunstmaanMediaBundle || {};
+
+kunstmaanMediaBundle.dndUpload = (function(window, undefined) {
+
+    var init, initUpload;
+
+
+    // Init
+    init = function() {
+	var $area = $('#dnd-area');
+
+	if($area.length) {
+	    var $container = $('#dnd-container'),
+		$status = $('#dnd-area__upload-status'),
+		dropUrl = $area.data('drop-url'),
+		currentUrl = $area.data('current-url');
+
+	    initUpload($area, $container, $status, dropUrl, currentUrl);
+	}
+    };
+
+
+    // Upload
+    initUpload = function($area, $container, $status, dropUrl, currentUrl) {
+	var dndUploader = new plupload.Uploader({
+		runtimes : 'html5',
+		dragdrop: true,
+		drop_element: 'dnd-area',
+		browse_button : 'dnd-area-link',
+		url: dropUrl,
+		processing_id: null,
+
+		filters : {
+		    max_file_size : '100mb'
+		},
+
+		init: {
+		    PostInit: function() {
+			$(window).on('dragenter', function() {
+			    $area.addClass('dnd-area--dragover');
+			});
+
+			$area.on('dragleave drop dragend', function() {
+			    $area.removeClass('dnd-area--dragover');
+			});
+		    },
+
+		    FilesAdded: function(up, files) {
+			plupload.each(files, function(file) {
+			    $status.append('<li class="list-group-item" id="' + file.id + '">' + file.name + ' (<small>' + plupload.formatSize(file.size) + '</small>) <strong class="js-status"></strong></li>')
+			});
+
+			dndUploader.start();
+		    },
+
+		    UploadProgress: function(up, file) {
+			var $fileLine = $('#' + file.id);
+
+			$fileLine.find('.js-status').html(file.percent + '%');
+		    },
+
+		    UploadComplete: function(up, files) {
+			// Set Loading
+			$('body').addClass('app--loading');
+
+			$area.addClass('dnd-area--upload-done');
+
+			window.location = currentUrl;
+		    }
+		}
+	    });
+
+
+	// Initialize uploader
+	dndUploader.init();
+    };
+
+
+    return {
+	init: init
+    };
+
+}(window));

Resources/ui/js/app.js

@@ -0,0 +1,21 @@
+var kunstmaanMediaBundle = kunstmaanMediaBundle || {};
+
+kunstmaanMediaBundle.app = (function($, window, undefined) {
+
+    var init;
+
+    init = function() {
+	kunstmaanMediaBundle.bulkUpload.init();
+	kunstmaanMediaBundle.dndUpload.init();
+    };
+
+
+    return {
+	init: init
+    };
+
+}(jQuery, window));
+
+$(function() {
+    kunstmaanMediaBundle.app.init();
+});

Resources/ui/vendor_bower/plupload/.bower.json

@@ -0,0 +1,14 @@
+{
+  "name": "plupload",
+  "homepage": "https://github.com/moxiecode/plupload",
+  "version": "2.1.2",
+  "_release": "2.1.2",
+  "_resolution": {
+    "type": "version",
+    "tag": "v2.1.2",
+    "commit": "764bb47f136a3e427a9f3e2ce2319516aded8e7f"
+  },
+  "_source": "git://github.com/moxiecode/plupload.git",
+  "_target": "~2.1",
+  "_originalSource": "plupload"
+}

Resources/ui/vendor_bower/plupload/examples/custom.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+
+<title>Plupload - Custom example</title>
+
+<!-- production -->
+<script type="text/javascript" src="../js/plupload.full.min.js"></script>
+
+
+<!-- debug
+<script type="text/javascript" src="../js/moxie.js"></script>
+<script type="text/javascript" src="../js/plupload.dev.js"></script>
+-->
+
+</head>
+<body style="font: 13px Verdana; background: #eee; color: #333">
+
+<h1>Custom example</h1>
+
+<p>Shows you how to use the core plupload API.</p>
+
+<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
+<br />
+
+<div id="container">
+    <a id="pickfiles" href="javascript:;">[Select files]</a>
+    <a id="uploadfiles" href="javascript:;">[Upload files]</a>
+</div>
+
+<br />
+<pre id="console"></pre>
+
+
+<script type="text/javascript">
+// Custom example logic
+
+var uploader = new plupload.Uploader({
+	runtimes : 'html5,flash,silverlight,html4',
+	browse_button : 'pickfiles', // you can pass in id...
+	container: document.getElementById('container'), // ... or DOM Element itself
+	url : 'upload.php',
+	flash_swf_url : '../js/Moxie.swf',
+	silverlight_xap_url : '../js/Moxie.xap',
+
+	filters : {
+		max_file_size : '10mb',
+		mime_types: [
+			{title : "Image files", extensions : "jpg,gif,png"},
+			{title : "Zip files", extensions : "zip"}
+		]
+	},
+
+	init: {
+		PostInit: function() {
+			document.getElementById('filelist').innerHTML = '';
+
+			document.getElementById('uploadfiles').onclick = function() {
+				uploader.start();
+				return false;
+			};
+		},
+
+		FilesAdded: function(up, files) {
+			plupload.each(files, function(file) {
+				document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
+			});
+		},
+
+		UploadProgress: function(up, file) {
+			document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
+		},
+
+		Error: function(up, err) {
+			document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
+		}
+	}
+});
+
+uploader.init();
+
+</script>
+</body>
+</html>

Resources/ui/vendor_bower/plupload/examples/dump.php

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+<title>Plupload - Form dump</title>
+</head>
+<body style="font: 13px Verdana; background: #eee; color: #333">
+
+<h1>Post dump</h1>
+
+<p>Shows the form items posted.</p>
+
+<table>
+	<tr>
+		<th>Name</th>
+		<th>Value</th>
+	</tr>
+	<?php $count = 0; foreach ($_POST as $name => $value) { ?>
+	<tr class="<?php echo $count % 2 == 0 ? 'alt' : ''; ?>">
+		<td><?php echo htmlentities(stripslashes($name)) ?></td>
+		<td><?php echo nl2br(htmlentities(stripslashes($value))) ?></td>
+	</tr>
+	<?php } ?>
+</table>
+
+</body>
+</html>