From 05316c90baac1a1d0d9719d976eb4f19511dc023 Mon Sep 17 00:00:00 2001
From: Dan Brown
Date: Sat, 24 Dec 2016 15:21:19 +0000
Subject: [PATCH] converted image picker to blade-based component
Also updated some other JS translations
---
app/Http/Controllers/AttachmentController.php | 2 +-
app/Http/Controllers/Controller.php | 11 +++
config/setting-defaults.php | 1 +
resources/assets/js/controllers.js | 4 +-
resources/assets/js/directives.js | 92 +------------------
resources/assets/js/global.js | 45 +++++++++
resources/assets/sass/_components.scss | 4 +
resources/lang/en/common.php | 2 +
resources/lang/en/components.php | 2 +
resources/lang/en/entities.php | 2 +
.../views/components/image-picker.blade.php | 17 ++++
resources/views/pages/form-toolbox.blade.php | 6 +-
.../views/partials/image-manager.blade.php | 2 +-
resources/views/settings/index.blade.php | 14 ++-
resources/views/users/edit.blade.php | 13 ++-
15 files changed, 120 insertions(+), 97 deletions(-)
create mode 100644 resources/views/components/image-picker.blade.php
diff --git a/app/Http/Controllers/AttachmentController.php b/app/Http/Controllers/AttachmentController.php
index e61a488ce..a81cb8a68 100644
--- a/app/Http/Controllers/AttachmentController.php
+++ b/app/Http/Controllers/AttachmentController.php
@@ -117,7 +117,7 @@ class AttachmentController extends Controller
}
$attachment = $this->attachmentService->updateFile($attachment, $request->all());
- return $attachment;
+ return $this->jsonSuccess($attachment, trans('entities.attachments_updated_success'));
}
/**
diff --git a/app/Http/Controllers/Controller.php b/app/Http/Controllers/Controller.php
index 2b6c88fe0..c5255c0ba 100644
--- a/app/Http/Controllers/Controller.php
+++ b/app/Http/Controllers/Controller.php
@@ -117,6 +117,17 @@ abstract class Controller extends BaseController
return true;
}
+ /**
+ * Send a json respons with a message attached as a header.
+ * @param $data
+ * @param string $successMessage
+ * @return $this
+ */
+ protected function jsonSuccess($data, $successMessage = "")
+ {
+ return response()->json($data)->header('message-success', $successMessage);
+ }
+
/**
* Send back a json error message.
* @param string $messageText
diff --git a/config/setting-defaults.php b/config/setting-defaults.php
index c681bb7f5..db35023d5 100644
--- a/config/setting-defaults.php
+++ b/config/setting-defaults.php
@@ -6,6 +6,7 @@
return [
'app-name' => 'BookStack',
+ 'app-logo' => '',
'app-name-header' => true,
'app-editor' => 'wysiwyg',
'app-color' => '#0288D1',
diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js
index 3a465da97..af740f508 100644
--- a/resources/assets/js/controllers.js
+++ b/resources/assets/js/controllers.js
@@ -576,7 +576,7 @@ export default function (ngApp, events) {
* Get files for the current page from the server.
*/
function getFiles() {
- let url = window.baseUrl(`/attachments/get/page/${pageId}`)
+ let url = window.baseUrl(`/attachments/get/page/${pageId}`);
$http.get(url).then(resp => {
$scope.files = resp.data;
currentOrder = resp.data.map(file => {return file.id}).join(':');
@@ -672,7 +672,7 @@ export default function (ngApp, events) {
$scope.editFile.link = '';
}
$scope.editFile = false;
- events.emit('success', 'Attachment details updated');
+ events.emit('success', resp.headers('message-success'));
}, checkError('edit'));
};
diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index 0ff7c0fcc..68c3150e0 100644
--- a/resources/assets/js/directives.js
+++ b/resources/assets/js/directives.js
@@ -35,7 +35,7 @@ export default function (ngApp, events) {
});
/**
- * Sub form component to allow inner-form sections to act like thier own forms.
+ * Sub form component to allow inner-form sections to act like their own forms.
*/
ngApp.directive('subForm', function() {
return {
@@ -50,96 +50,13 @@ export default function (ngApp, events) {
element.find('button[type="submit"]').click(submitEvent);
function submitEvent(e) {
- e.preventDefault()
+ e.preventDefault();
if (attrs.subForm) scope.$eval(attrs.subForm);
}
}
};
});
-
- /**
- * Image Picker
- * Is a simple front-end interface that connects to an ImageManager if present.
- */
- ngApp.directive('imagePicker', ['$http', 'imageManagerService', function ($http, imageManagerService) {
- return {
- restrict: 'E',
- template: `
-
-
-
-
-
-
Select Image
-
-
-
Reset
-
|
-
Remove
-
-
-
- `,
- scope: {
- name: '@',
- resizeHeight: '@',
- resizeWidth: '@',
- resizeCrop: '@',
- showRemove: '=',
- currentImage: '@',
- currentId: '@',
- defaultImage: '@',
- imageClass: '@'
- },
- link: function (scope, element, attrs) {
- let usingIds = typeof scope.currentId !== 'undefined' || scope.currentId === 'false';
- scope.image = scope.currentImage;
- scope.value = scope.currentImage || '';
- if (usingIds) scope.value = scope.currentId;
-
- function setImage(imageModel, imageUrl) {
- scope.image = imageUrl;
- scope.value = usingIds ? imageModel.id : imageUrl;
- }
-
- scope.reset = function () {
- setImage({id: 0}, scope.defaultImage);
- };
-
- scope.remove = function () {
- scope.image = 'none';
- scope.value = 'none';
- };
-
- scope.showImageManager = function () {
- imageManagerService.show((image) => {
- scope.updateImageFromModel(image);
- });
- };
-
- scope.updateImageFromModel = function (model) {
- let isResized = scope.resizeWidth && scope.resizeHeight;
-
- if (!isResized) {
- scope.$apply(() => {
- setImage(model, model.url);
- });
- return;
- }
-
- let cropped = scope.resizeCrop ? 'true' : 'false';
- let requestString = '/images/thumb/' + model.id + '/' + scope.resizeWidth + '/' + scope.resizeHeight + '/' + cropped;
- requestString = window.baseUrl(requestString);
- $http.get(requestString).then((response) => {
- setImage(model, response.data.url);
- });
- };
-
- }
- };
- }]);
-
/**
* DropZone
* Used for uploading images
@@ -149,16 +66,17 @@ export default function (ngApp, events) {
restrict: 'E',
template: `
-
Drop files or click here to upload
+
{{message}}
`,
scope: {
uploadUrl: '@',
eventSuccess: '=',
eventError: '=',
- uploadedTo: '@'
+ uploadedTo: '@',
},
link: function (scope, element, attrs) {
+ scope.message = attrs.message;
if (attrs.placeholder) element[0].querySelector('.dz-message').textContent = attrs.placeholder;
let dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
url: scope.uploadUrl,
diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
index 537a43a4e..7a7cc592e 100644
--- a/resources/assets/js/global.js
+++ b/resources/assets/js/global.js
@@ -161,6 +161,51 @@ $(function () {
});
}
+ // Image pickers
+ $('.image-picker').on('click', 'button', event => {
+ let button = event.target;
+ let picker = $(button).closest('.image-picker')[0];
+ let action = button.getAttribute('data-action');
+ let resize = picker.getAttribute('data-resize-height') && picker.getAttribute('data-resize-width');
+ let usingIds = picker.getAttribute('data-current-id') !== '';
+ let resizeCrop = picker.getAttribute('data-resize-crop') !== '';
+ let imageElem = picker.querySelector('img');
+ let input = picker.querySelector('input');
+
+ function setImage(image) {
+
+ if (image === 'none') {
+ imageElem.src = picker.getAttribute('data-default-image');
+ imageElem.classList.add('none');
+ input.value = 'none';
+ return;
+ }
+
+ imageElem.src = image.url;
+ input.value = usingIds ? image.id : image.url;
+ imageElem.classList.remove('none');
+ }
+
+ if (action === 'show-image-manager') {
+ window.ImageManager.showExternal((image) => {
+ if (!resize) {
+ setImage(image);
+ return;
+ }
+ let requestString = '/images/thumb/' + image.id + '/' + picker.getAttribute('data-resize-width') + '/' + picker.getAttribute('data-resize-height') + '/' + (resizeCrop ? 'true' : 'false');
+ $.get(window.baseUrl(requestString), resp => {
+ image.url = resp.url;
+ setImage(image);
+ });
+ });
+ } else if (action === 'reset-image') {
+ setImage({id: 0, url: picker.getAttribute('data-default-image')});
+ } else if (action === 'remove-image') {
+ setImage('none');
+ }
+
+ });
+
// Detect IE for css
if(navigator.userAgent.indexOf('MSIE')!==-1
|| navigator.appVersion.indexOf('Trident/') > 0
diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss
index 2f9051a52..c8fd8bcfa 100644
--- a/resources/assets/sass/_components.scss
+++ b/resources/assets/sass/_components.scss
@@ -465,4 +465,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
border-bottom-width: 3px;
}
}
+}
+
+.image-picker .none {
+ display: none;
}
\ No newline at end of file
diff --git a/resources/lang/en/common.php b/resources/lang/en/common.php
index 674ed32dc..31ef42e97 100644
--- a/resources/lang/en/common.php
+++ b/resources/lang/en/common.php
@@ -31,6 +31,8 @@ return [
'delete' => 'Delete',
'search' => 'Search',
'search_clear' => 'Clear Search',
+ 'reset' => 'Reset',
+ 'remove' => 'Remove',
/**
diff --git a/resources/lang/en/components.php b/resources/lang/en/components.php
index 9fe277059..cc023799a 100644
--- a/resources/lang/en/components.php
+++ b/resources/lang/en/components.php
@@ -15,5 +15,7 @@ return [
'imagem_image_name' => 'Image Name',
'imagem_delete_confirm' => 'This image is used in the pages below, Click delete again to confirm you want to delete this image.',
'imagem_select_image' => 'Select Image',
+ 'imagem_dropzone' => 'Drop images or click here to upload',
'images_deleted' => 'Images Deleted',
+ 'image_preview' => 'Image Preview',
];
\ No newline at end of file
diff --git a/resources/lang/en/entities.php b/resources/lang/en/entities.php
index 855cea20c..87ffb4985 100644
--- a/resources/lang/en/entities.php
+++ b/resources/lang/en/entities.php
@@ -193,6 +193,7 @@ return [
'attachments_link' => 'Attach Link',
'attachments_set_link' => 'Set Link',
'attachments_delete_confirm' => 'Click delete again to confirm you want to delete this attachment.',
+ 'attachments_dropzone' => 'Drop files or click here to attach a file',
'attachments_no_files' => 'No files have been uploaded',
'attachments_explain_link' => 'You can attach a link if you\'d prefer not to upload a file. This can be a link to another page or a link to a file in the cloud.',
'attachments_link_name' => 'Link Name',
@@ -204,6 +205,7 @@ return [
'attachments_edit_file_name' => 'File Name',
'attachments_edit_drop_upload' => 'Drop files or click here to upload and overwrite',
'attachments_order_updated' => 'Attachment order updated',
+ 'attachments_updated_success' => 'Attachment details updated',
'attachments_deleted' => 'Attachment deleted',
/**
diff --git a/resources/views/components/image-picker.blade.php b/resources/views/components/image-picker.blade.php
new file mode 100644
index 000000000..c2c56ee9f
--- /dev/null
+++ b/resources/views/components/image-picker.blade.php
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
{{ trans('components.imagem_select_image') }}
+
+
{{ trans('common.reset') }}
+
+ @if ($showRemove)
+
|
+
{{ trans('common.remove') }}
+ @endif
+
+
+
\ No newline at end of file
diff --git a/resources/views/pages/form-toolbox.blade.php b/resources/views/pages/form-toolbox.blade.php
index cd9b7ed80..ecf7619b7 100644
--- a/resources/views/pages/form-toolbox.blade.php
+++ b/resources/views/pages/form-toolbox.blade.php
@@ -75,7 +75,7 @@
-
+
{{ trans('entities.attachments_explain_link') }}
@@ -123,8 +123,8 @@
- {{ trans('entities.back') }}
- {{ trans('entities.save') }}
+ {{ trans('common.back') }}
+ {{ trans('common.save') }}
diff --git a/resources/views/partials/image-manager.blade.php b/resources/views/partials/image-manager.blade.php
index bed269fbe..0d3626f5e 100644
--- a/resources/views/partials/image-manager.blade.php
+++ b/resources/views/partials/image-manager.blade.php
@@ -78,7 +78,7 @@
-
+
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index 2e9d5ce8c..1645fdfd0 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -8,7 +8,7 @@
{{ trans('settings.settings') }}
-