0.0.8.beta.1 -- Merge pull request #85 from a-barbieri/master

Uploader and sortable repeaters!

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    binda (0.0.8.pre.alpha.4)
+    binda (0.0.8.beta.1)
       aasm (>= 4.11, < 4.13)
       ancestry (>= 2.1, < 3.1)
       carrierwave (>= 0.10, < 1.12)
@@ -116,7 +116,7 @@ GEM
     faraday_middleware (0.12.2)
       faraday (>= 0.7.4, < 1.0)
     ffi (1.9.18)
-    friendly_id (5.2.1)
+    friendly_id (5.2.2)
       activerecord (>= 4.0.0)
     gh (0.15.1)
       addressable (~> 2.4.0)

app/assets/javascripts/binda/application.js

@@ -14,5 +14,15 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery-ui/widgets/sortable
+//= require jquery-ui/widget
 //= require tinymce-jquery
+//= require jquery-file-upload/load-image.all.min
+//= require jquery-file-upload/canvas-to-blob.min
+//= require jquery-file-upload/jquery.iframe-transport
+//= require jquery-file-upload/jquery.fileupload
+//= require jquery-file-upload/jquery.fileupload-process
+//= require jquery-file-upload/jquery.fileupload-image
+//= require jquery-file-upload/jquery.fileupload-audio
+//= require jquery-file-upload/jquery.fileupload-video
+//= require jquery-file-upload/jquery.fileupload-validate
 //= require binda/dist/binda.bundle.js

app/assets/javascripts/binda/components/form_item_asset.js

@@ -6,7 +6,7 @@ class FormItemAsset
 {
 	constructor()
 	{
-		this.target = '.form-item--asset'
+		this.target = '.form-item--asset--uploader'
 	}
 
 	isSet()
@@ -17,8 +17,114 @@ class FormItemAsset
 
 	setEvents()
 	{
-		// here code to setup assets via ajax
-		// 
+		this.setupFileUpload()
+	}
+
+	setupFileUpload() 
+	{
+		var uploadButton = $('<button/>')
+				.addClass('btn btn-primary')
+				.prop('disabled', true)
+				.text('Processing...')
+				.on('click', function () {
+					var $this = $(this),
+					    data = $this.data();
+					$this
+						.off('click')
+						.text('Abort')
+						.on('click', function () {
+							$this.remove();
+							data.abort();
+						});
+						data.submit().always(function () {
+							$this.remove();
+						});
+				});
+		$('.fileupload').each(function () {
+
+			let $this = $(this)
+			$(this).fileupload({
+
+				url: $this.data('url'), // This should return json, not a proper page
+				dropZone: $this,
+				dataType: 'json',
+				autoUpload: true,
+				acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
+				maxFileSize: 999000,
+				// Enable image resizing, except for Android and Opera,
+				// which actually support image resizing, but fail to
+				// send Blob objects via XHR requests:
+				disableImageResize: /Android(?!.*Chrome)|Opera/
+						.test(window.navigator.userAgent),
+				previewMaxWidth: 100,
+				previewMaxHeight: 100,
+				previewCrop: true
+			}).on('fileuploadadd', function (e, data) {
+
+				data.context = $this.find('.details');
+				$.each(data.files, function (index, file) {
+					$this.find('.fileupload--filename').text(file.name)
+				});
+				$this.find('.fileupload--details').removeClass('fileupload--details--hidden') 
+			}).on('fileuploadprocessalways', function (e, data) {
+
+				var index = data.index,
+					file = data.files[index],
+					node = $(data.context.children()[index]);
+				if (file.error) {
+					node
+						.append('<br>')
+						.append($('<span class="text-danger"/>').text(file.error));
+				}
+				if (index + 1 === data.files.length) {
+					data.context.find('button')
+						.text('Upload')
+						.prop('disabled', !!data.files.error);
+				}
+			}).on('fileuploadprogressall', function (e, data) {
+
+				var progress = parseInt(data.loaded / data.total * 100, 10);
+				console.log(progress)
+				$this.find('.progress .progress-bar').css(
+					'width',
+					progress + '%'
+				)
+			}).on('fileuploaddone', function (e, data) {
+
+				console.log(data)
+
+				$.each(data.result.files, function (index, file) {
+					if (file.url) {
+						setTimeout( function() { 
+							// remove context
+							data.context.remove() 
+							// reset progress bar
+							$this.find('.progress .progress-bar').css('width', '0%')
+							// append/replace image
+							$this.find('.form-item--asset--image').attr('src', file.url).attr('alt', file.name)
+							$this.find('.fileupload--remove-image-btn').removeClass('invisible')
+						}, 500 )	// this 500ms of timeout is based on a .2s CSS transition. See fileupload stylesheets
+						setTimeout( function() { 
+							$this.find('.fileupload--details').addClass('fileupload--details--hidden')
+						}, 300 )
+					} else if (file.error) {
+						var error = $('<span class="text-danger"/>').text(file.error);
+						$(data.context.children()[index])
+							.append('<br>')
+							.append(error);
+					}
+				});
+			}).on('fileuploadfail', function (e, data) {
+
+				$.each(data.files, function (index) {
+					var error = $('<span class="text-danger"/>').text('File upload failed.');
+					$(data.context.children()[index])
+						.append('<br>')
+						.append(error);
+				});
+			}).prop('disabled', !$.support.fileInput)
+					.parent().addClass($.support.fileInput ? undefined : 'disabled');
+		});
 	}
 }
 

app/assets/javascripts/binda/components/form_item_repeater.js

@@ -39,7 +39,7 @@ class FormItemRepeater {
 				data: { id: $( this ).data('id'), isAjax: true },
 				method: "DELETE"
 			}).done( ()=>{
-				$( this ).parent('li').remove()
+				$( this ).parents('.form-item--repeater').remove()
 				_FormItemEditor.resize()
 			})
 		})

app/assets/javascripts/binda/dist/binda.bundle.js

@@ -225,7 +225,7 @@ var FormItemAsset = function () {
 	function FormItemAsset() {
 		_classCallCheck(this, FormItemAsset);
 
-		this.target = '.form-item--asset';
+		this.target = '.form-item--asset--uploader';
 	}
 
 	_createClass(FormItemAsset, [{
@@ -240,8 +240,94 @@ var FormItemAsset = function () {
 	}, {
 		key: 'setEvents',
 		value: function setEvents() {
-			// here code to setup assets via ajax
-			// 
+			this.setupFileUpload();
+		}
+	}, {
+		key: 'setupFileUpload',
+		value: function setupFileUpload() {
+			var uploadButton = $('<button/>').addClass('btn btn-primary').prop('disabled', true).text('Processing...').on('click', function () {
+				var $this = $(this),
+				    data = $this.data();
+				$this.off('click').text('Abort').on('click', function () {
+					$this.remove();
+					data.abort();
+				});
+				data.submit().always(function () {
+					$this.remove();
+				});
+			});
+			$('.fileupload').each(function () {
+
+				var $this = $(this);
+				$(this).fileupload({
+
+					url: $this.data('url'), // This should return json, not a proper page
+					dropZone: $this,
+					dataType: 'json',
+					autoUpload: true,
+					acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
+					maxFileSize: 999000,
+					// Enable image resizing, except for Android and Opera,
+					// which actually support image resizing, but fail to
+					// send Blob objects via XHR requests:
+					disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
+					previewMaxWidth: 100,
+					previewMaxHeight: 100,
+					previewCrop: true
+				}).on('fileuploadadd', function (e, data) {
+
+					data.context = $this.find('.details');
+					$.each(data.files, function (index, file) {
+						$this.find('.fileupload--filename').text(file.name);
+					});
+					$this.find('.fileupload--details').removeClass('fileupload--details--hidden');
+				}).on('fileuploadprocessalways', function (e, data) {
+
+					var index = data.index,
+					    file = data.files[index],
+					    node = $(data.context.children()[index]);
+					if (file.error) {
+						node.append('<br>').append($('<span class="text-danger"/>').text(file.error));
+					}
+					if (index + 1 === data.files.length) {
+						data.context.find('button').text('Upload').prop('disabled', !!data.files.error);
+					}
+				}).on('fileuploadprogressall', function (e, data) {
+
+					var progress = parseInt(data.loaded / data.total * 100, 10);
+					console.log(progress);
+					$this.find('.progress .progress-bar').css('width', progress + '%');
+				}).on('fileuploaddone', function (e, data) {
+
+					console.log(data);
+
+					$.each(data.result.files, function (index, file) {
+						if (file.url) {
+							setTimeout(function () {
+								// remove context
+								data.context.remove();
+								// reset progress bar
+								$this.find('.progress .progress-bar').css('width', '0%');
+								// append/replace image
+								$this.find('.form-item--asset--image').attr('src', file.url).attr('alt', file.name);
+								$this.find('.fileupload--remove-image-btn').removeClass('invisible');
+							}, 500); // this 500ms of timeout is based on a .2s CSS transition. See fileupload stylesheets
+							setTimeout(function () {
+								$this.find('.fileupload--details').addClass('fileupload--details--hidden');
+							}, 300);
+						} else if (file.error) {
+							var error = $('<span class="text-danger"/>').text(file.error);
+							$(data.context.children()[index]).append('<br>').append(error);
+						}
+					});
+				}).on('fileuploadfail', function (e, data) {
+
+					$.each(data.files, function (index) {
+						var error = $('<span class="text-danger"/>').text('File upload failed.');
+						$(data.context.children()[index]).append('<br>').append(error);
+					});
+				}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
+			});
 		}
 	}]);
 
@@ -381,7 +467,7 @@ var FormItemRepeater = function () {
 					data: { id: $(this).data('id'), isAjax: true },
 					method: "DELETE"
 				}).done(function () {
-					$(_this).parent('li').remove();
+					$(_this).parents('.form-item--repeater').remove();
 					__WEBPACK_IMPORTED_MODULE_0__form_item_editor__["a" /* _FormItemEditor */].resize();
 				});
 			});

app/assets/stylesheets/binda/components/fileupload.scss

@@ -0,0 +1,82 @@
+.fileupload
+{
+	position: relative;
+
+	.form-group 
+	{
+		margin: 0 !important;
+	}
+  .progress
+  {
+  	margin: 12px 0;
+  	height: 8px;
+  }
+  .fileupload--details
+  {
+  	position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		opacity: 1;
+		background-color: #fff;
+		padding: 24px;
+		width: 40%;
+		transition: opacity .2s linear;
+    pointer-events: none;
+    z-index: 9999;
+		@extend .box-shadowed-up;
+		&.fileupload--details--hidden
+		{
+			opacity: 0;
+		}
+  }
+	.fileupload--filename
+	{
+		text-align: center;
+	}
+  .fileinput-button
+  {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    margin-bottom: 12px;
+    float: left;
+    margin-right: 8px;
+  }
+  .fileinput-button input
+  {
+    font-size: 200px !important;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    cursor: pointer;
+    opacity: 0;
+
+    -ms-filter: 'alpha(opacity=0)';
+    direction: ltr;
+  }
+
+  /* Fixes for IE < 8 */
+  @media screen\9
+  {
+    .fileinput-button input
+    {
+      font-size: 100%;
+      height: 100%;
+
+      filter: alpha(opacity=0);
+    }
+  }
+}
+.form-item--repeater-fields 
+{
+  .fileinput-button 
+  {
+    margin-left: 5%;
+  }
+  .form-item--asset--image 
+  {
+    margin-left: 20%;
+  }
+}