Skip to content
This repository has been archived by the owner on Jul 19, 2021. It is now read-only.

Commit

Permalink
Merge pull request #86 from a-barbieri/master
Browse files Browse the repository at this point in the history
  • Loading branch information
@a-barbieri
a-barbieri authored Sep 16, 2017
2 parents c7b9d2e + 3554824 commit a8fbe9d
Show file tree
Hide file tree
Showing 12 changed files with 266 additions and 266 deletions.
2 changes: 1 addition & 1 deletion Gemfile.lock
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
PATH
remote: .
specs:
binda (0.0.8.beta.1)
binda (0.0.8.beta.3)
aasm (>= 4.11, < 4.13)
ancestry (>= 2.1, < 3.1)
carrierwave (>= 0.10, < 1.12)
Expand Down
90 changes: 90 additions & 0 deletions app/assets/javascripts/binda/components/fileupload_custom_script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@

export function custom_fileupload ( target ) {

let $this = $( target )
$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) {

$.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');
}
111 changes: 3 additions & 108 deletions app/assets/javascripts/binda/components/form_item_asset.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// FORM ITEM ASSET
///- - - - - - - - - - - - - - - - - - - -

import { custom_fileupload } from './fileupload_custom_script'

class FormItemAsset
{
constructor()
Expand All @@ -17,114 +19,7 @@ class FormItemAsset

setEvents()
{
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');
});
$('.fileupload').each( function () { custom_fileupload( this ) });
}
}

Expand Down
4 changes: 4 additions & 0 deletions app/assets/javascripts/binda/components/form_item_repeater.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
/// FORM ITEM
///- - - - - - - - - - - - - - - - - - - -

import { custom_fileupload } from './fileupload_custom_script'
import { _FormItemEditor } from './form_item_editor'

class FormItemRepeater {
Expand Down Expand Up @@ -34,6 +35,8 @@ class FormItemRepeater {
// Stop default behaviour
event.preventDefault()

if ( !confirm("Are you sure you want do delete it?") ) return

$.ajax({
url: $( this ).attr('href'),
data: { id: $( this ).data('id'), isAjax: true },
Expand Down Expand Up @@ -69,5 +72,6 @@ function addNewItem( event )
var editor_id = $list.find('textarea').last('textarea').attr('id')
tinyMCE.EditorManager.execCommand('mceAddEditor',true, editor_id);
_FormItemEditor.resize()
custom_fileupload( $list.find('.fileupload').last('.fileupload').get(0) );
})
}
Loading

0 comments on commit a8fbe9d

Please sign in to comment.