webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00
Code Activity

Improved error messages for image uploads and formatted much js

Browse Source
This commit is contained in:
Dan Brown
2015-12-30 19:57:17 +00:00
parent 46c2e8b14e
commit cca3533d35
5 changed files with 324 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
resources/assets/js/directives.js
View File

@ -5,25 +5,25 @@ var toggleSwitchTemplate = require('./components/toggle-switch.html');
var imagePickerTemplate = require('./components/image-picker.html');
var dropZoneTemplate = require('./components/drop-zone.html');
module.exports = function(ngApp) {
module.exports = function (ngApp) {
/**
* Toggle Switches
* Has basic on/off functionality.
* Use string values of 'true' & 'false' to dictate the current state.
*/
ngApp.directive('toggleSwitch', function() {
ngApp.directive('toggleSwitch', function () {
return {
restrict: 'E',
template: toggleSwitchTemplate,
scope: true,
link: function(scope, element, attrs) {
link: function (scope, element, attrs) {
scope.name = attrs.name;
scope.value = attrs.value;
scope.isActive = scope.value == true && scope.value != 'false';
scope.value = (scope.value == true && scope.value != 'false') ? 'true' : 'false';
scope.switch = function() {
scope.switch = function () {
scope.isActive = !scope.isActive;
scope.value = scope.isActive ? 'true' : 'false';
}
@ -37,7 +37,7 @@ module.exports = function(ngApp) {
* Image Picker
* Is a simple front-end interface that connects to an ImageManager if present.
*/
ngApp.directive('imagePicker', ['$http', 'imageManagerService', function($http, imageManagerService) {
ngApp.directive('imagePicker', ['$http', 'imageManagerService', function ($http, imageManagerService) {
return {
restrict: 'E',
template: imagePickerTemplate,
@ -52,7 +52,7 @@ module.exports = function(ngApp) {
defaultImage: '@',
imageClass: '@'
},
link: function(scope, element, attrs) {
link: function (scope, element, attrs) {
var usingIds = typeof scope.currentId !== 'undefined' || scope.currentId === 'false';
scope.image = scope.currentImage;
scope.value = scope.currentImage || '';
@ -62,22 +62,22 @@ module.exports = function(ngApp) {
scope.value = usingIds ? imageModel.id : imageUrl;
}
scope.reset = function() {
scope.reset = function () {
setImage({id: 0}, scope.defaultImage);
};
scope.remove = function() {
scope.remove = function () {
scope.image = 'none';
scope.value = 'none';
};
scope.showImageManager = function() {
scope.showImageManager = function () {
imageManagerService.show((image) => {
scope.updateImageFromModel(image);
});
};
scope.updateImageFromModel = function(model) {
scope.updateImageFromModel = function (model) {
var isResized = scope.resizeWidth && scope.resizeHeight;
if (!isResized) {
@ -102,7 +102,7 @@ module.exports = function(ngApp) {
* DropZone
* Used for uploading images
*/
ngApp.directive('dropZone', [function() {
ngApp.directive('dropZone', [function () {
return {
restrict: 'E',
template: dropZoneTemplate,
@ -111,26 +111,32 @@ module.exports = function(ngApp) {
eventSuccess: '=',
eventError: '='
},
link: function(scope, element, attrs) {
link: function (scope, element, attrs) {
var dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
url: scope.uploadUrl,
init: function() {
init: function () {
var dz = this;
dz.on('sending', function(file, xhr, data) {
dz.on('sending', function (file, xhr, data) {
var token = window.document.querySelector('meta[name=token]').getAttribute('content');
data.append('_token', token);
});
if (typeof scope.eventSuccess !== 'undefined') dz.on('success', scope.eventSuccess);
dz.on('success', function(file, data) {
dz.on('success', function (file, data) {
$(file.previewElement).fadeOut(400, function () {
dz.removeFile(file);
});
});
if (typeof scope.eventError !== 'undefined') dz.on('error', scope.eventError);
dz.on('error', function (file, errorMessage, xhr) {
if (errorMessage.file) {
$(file.previewElement).find('[data-dz-errormessage]').text(errorMessage.file[0]);
console.log(errorMessage);
console.log(xhr);
function setMessage(message) {
$(file.previewElement).find('[data-dz-errormessage]').text(message);
}
if (xhr.status === 413) setMessage('The server does not allow uploads of this size. Please try a smaller file.');
if (errorMessage.file) setMessage(errorMessage.file[0]);
});
}
});
@ -139,14 +145,14 @@ module.exports = function(ngApp) {
}]);
ngApp.directive('dropdown', [function() {
ngApp.directive('dropdown', [function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
link: function (scope, element, attrs) {
var menu = element.find('ul');
element.find('[dropdown-toggle]').on('click', function() {
element.find('[dropdown-toggle]').on('click', function () {
menu.show().addClass('anim menuIn');
element.mouseleave(function() {
element.mouseleave(function () {
menu.hide();
menu.removeClass('anim menuIn');
});