mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Merge pull request #4193 from BookStackApp/custom_dropzone
Custom dropzone implementation
This commit is contained in:
Dan Brown
GitHub
commit
607da73109
@ -42,9 +42,14 @@ class GalleryImageController extends Controller
|
||||
public function create(Request $request)
|
||||
{
|
||||
$this->checkPermission('image-create-all');
|
||||
$this->validate($request, [
|
||||
'file' => $this->getImageValidationRules(),
|
||||
]);
|
||||
|
||||
try {
|
||||
$this->validate($request, [
|
||||
'file' => $this->getImageValidationRules(),
|
||||
]);
|
||||
} catch (ValidationException $exception) {
|
||||
return $this->jsonError(implode("\n", $exception->errors()['file']));
|
||||
}
|
||||
|
||||
try {
|
||||
$imageUpload = $request->file('file');
|
||||
|
||||
@ -6,6 +6,9 @@ return [
|
||||
|
||||
// Image Manager
|
||||
'image_select' => 'Image Select',
|
||||
'image_upload' => 'Upload Image',
|
||||
'image_intro' => 'Here you can select and manage images that have been previously uploaded to the system.',
|
||||
'image_intro_upload' => 'Upload a new image by dragging an image file into this window, or by using the "Upload Image" button above.',
|
||||
'image_all' => 'All',
|
||||
'image_all_title' => 'View all images',
|
||||
'image_book_title' => 'View images uploaded to this book',
|
||||
@ -18,12 +21,12 @@ return [
|
||||
'image_delete_confirm_text' => 'Are you sure you want to delete this image?',
|
||||
'image_select_image' => 'Select Image',
|
||||
'image_dropzone' => 'Drop images or click here to upload',
|
||||
'image_dropzone_drop' => 'Drop images here to upload',
|
||||
'images_deleted' => 'Images Deleted',
|
||||
'image_preview' => 'Image Preview',
|
||||
'image_upload_success' => 'Image uploaded successfully',
|
||||
'image_update_success' => 'Image details successfully updated',
|
||||
'image_delete_success' => 'Image successfully deleted',
|
||||
'image_upload_remove' => 'Remove',
|
||||
|
||||
// Code Editor
|
||||
'code_editor' => 'Edit Code',
|
||||
|
||||
@ -311,12 +311,12 @@ return [
|
||||
'attachments' => 'Attachments',
|
||||
'attachments_explain' => 'Upload some files or attach some links to display on your page. These are visible in the page sidebar.',
|
||||
'attachments_explain_instant_save' => 'Changes here are saved instantly.',
|
||||
'attachments_items' => 'Attached Items',
|
||||
'attachments_upload' => 'Upload File',
|
||||
'attachments_link' => 'Attach Link',
|
||||
'attachments_upload_drop' => 'Alternatively you can drag and drop a file here to upload it as an attachment.',
|
||||
'attachments_set_link' => 'Set Link',
|
||||
'attachments_delete' => 'Are you sure you want to delete this attachment?',
|
||||
'attachments_dropzone' => 'Drop files or click here to attach a file',
|
||||
'attachments_dropzone' => 'Drop files here to upload',
|
||||
'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',
|
||||
|
||||
@ -45,7 +45,6 @@ return [
|
||||
'cannot_create_thumbs' => 'The server cannot create thumbnails. Please check you have the GD PHP extension installed.',
|
||||
'server_upload_limit' => 'The server does not allow uploads of this size. Please try a smaller file size.',
|
||||
'uploaded' => 'The server does not allow uploads of this size. Please try a smaller file size.',
|
||||
'file_upload_timeout' => 'The file upload has timed out.',
|
||||
|
||||
// Drawing & Images
|
||||
'image_upload_error' => 'An error occurred uploading the image',
|
||||
@ -54,6 +53,7 @@ return [
|
||||
|
||||
// Attachments
|
||||
'attachment_not_found' => 'Attachment not found',
|
||||
'attachment_upload_error' => 'An error occurred uploading the attachment file',
|
||||
|
||||
// Pages
|
||||
'page_draft_autosave_fail' => 'Failed to save draft. Ensure you have internet connection before saving this page',
|
||||
|
||||
6
package-lock.json
generated
6
package-lock.json
generated
@ -22,7 +22,6 @@
|
||||
"@ssddanbrown/codemirror-lang-smarty": "^1.0.0",
|
||||
"@ssddanbrown/codemirror-lang-twig": "^1.0.0",
|
||||
"codemirror": "^6.0.1",
|
||||
"dropzone": "^5.9.3",
|
||||
"markdown-it": "^13.0.1",
|
||||
"markdown-it-task-lists": "^2.1.1",
|
||||
"snabbdom": "^3.5.1",
|
||||
@ -1234,11 +1233,6 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dropzone": {
|
||||
"version": "5.9.3",
|
||||
"resolved": "https://registry.npmjs.org/dropzone/-/dropzone-5.9.3.tgz",
|
||||
"integrity": "sha512-Azk8kD/2/nJIuVPK+zQ9sjKMRIpRvNyqn9XwbBHNq+iNuSccbJS6hwm1Woy0pMST0erSo0u4j+KJaodndDk4vA=="
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
|
||||
|
||||
@ -46,7 +46,6 @@
|
||||
"@ssddanbrown/codemirror-lang-smarty": "^1.0.0",
|
||||
"@ssddanbrown/codemirror-lang-twig": "^1.0.0",
|
||||
"codemirror": "^6.0.1",
|
||||
"dropzone": "^5.9.3",
|
||||
"markdown-it": "^13.0.1",
|
||||
"markdown-it-task-lists": "^2.1.1",
|
||||
"snabbdom": "^3.5.1",
|
||||
|
||||
@ -133,7 +133,6 @@ Note: This is not an exhaustive list of all libraries and projects that would be
|
||||
* [CodeMirror](https://codemirror.net) - _[MIT](https://github.com/codemirror/CodeMirror/blob/master/LICENSE)_
|
||||
* [Sortable](https://github.com/SortableJS/Sortable) - _[MIT](https://github.com/SortableJS/Sortable/blob/master/LICENSE)_
|
||||
* [Google Material Icons](https://github.com/google/material-design-icons) - _[Apache-2.0](https://github.com/google/material-design-icons/blob/master/LICENSE)_
|
||||
* [Dropzone.js](http://www.dropzonejs.com/) - _[MIT](https://github.com/dropzone/dropzone/blob/main/LICENSE)_
|
||||
* [markdown-it](https://github.com/markdown-it/markdown-it) and [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) - _[MIT](https://github.com/markdown-it/markdown-it/blob/master/LICENSE) and [ISC](https://github.com/revin/markdown-it-task-lists/blob/master/LICENSE)_
|
||||
* [Dompdf](https://github.com/dompdf/dompdf) - _[LGPL v2.1](https://github.com/dompdf/dompdf/blob/master/LICENSE.LGPL)_
|
||||
* [BarryVD/Dompdf](https://github.com/barryvdh/laravel-dompdf) - _[MIT](https://github.com/barryvdh/laravel-dompdf/blob/master/LICENSE)_
|
||||
|
||||
@ -1,4 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/></svg>
|
||||
|
Before Width: | Height: | Size: 221 B After Width: | Height: | Size: 173 B |
1
resources/icons/upload.svg
Normal file
1
resources/icons/upload.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.59 14H15v5c0 .55-.45 1-1 1h-4c-.55 0-1-.45-1-1v-5H7.41c-.89 0-1.34-1.08-.71-1.71l4.59-4.59a.996.996 0 0 1 1.41 0l4.59 4.59c.63.63.19 1.71-.7 1.71ZM5 4c0-.55.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1H6c-.55 0-1-.45-1-1Z"/></svg>
|
||||
|
After Width: | Height: | Size: 297 B |
@ -8,15 +8,16 @@ export class Attachments extends Component {
|
||||
this.pageId = this.$opts.pageId;
|
||||
this.editContainer = this.$refs.editContainer;
|
||||
this.listContainer = this.$refs.listContainer;
|
||||
this.mainTabs = this.$refs.mainTabs;
|
||||
this.list = this.$refs.list;
|
||||
this.linksContainer = this.$refs.linksContainer;
|
||||
this.listPanel = this.$refs.listPanel;
|
||||
this.attachLinkButton = this.$refs.attachLinkButton;
|
||||
|
||||
this.setupListeners();
|
||||
}
|
||||
|
||||
setupListeners() {
|
||||
const reloadListBound = this.reloadList.bind(this);
|
||||
this.container.addEventListener('dropzone-success', reloadListBound);
|
||||
this.container.addEventListener('dropzone-upload-success', reloadListBound);
|
||||
this.container.addEventListener('ajax-form-success', reloadListBound);
|
||||
|
||||
this.container.addEventListener('sortable-list-sort', event => {
|
||||
@ -39,16 +40,29 @@ export class Attachments extends Component {
|
||||
markdown: contentTypes['text/plain'],
|
||||
});
|
||||
});
|
||||
|
||||
this.attachLinkButton.addEventListener('click', () => {
|
||||
this.showSection('links');
|
||||
});
|
||||
}
|
||||
|
||||
showSection(section) {
|
||||
const sectionMap = {
|
||||
links: this.linksContainer,
|
||||
edit: this.editContainer,
|
||||
list: this.listContainer,
|
||||
};
|
||||
|
||||
for (const [name, elem] of Object.entries(sectionMap)) {
|
||||
elem.toggleAttribute('hidden', name !== section);
|
||||
}
|
||||
}
|
||||
|
||||
reloadList() {
|
||||
this.stopEdit();
|
||||
/** @var {Tabs} */
|
||||
const tabs = window.$components.firstOnElement(this.mainTabs, 'tabs');
|
||||
tabs.show('attachment-panel-items');
|
||||
window.$http.get(`/attachments/get/page/${this.pageId}`).then(resp => {
|
||||
this.list.innerHTML = resp.data;
|
||||
window.$components.init(this.list);
|
||||
this.listPanel.innerHTML = resp.data;
|
||||
window.$components.init(this.listPanel);
|
||||
});
|
||||
}
|
||||
|
||||
@ -59,8 +73,7 @@ export class Attachments extends Component {
|
||||
}
|
||||
|
||||
async startEdit(id) {
|
||||
this.editContainer.classList.remove('hidden');
|
||||
this.listContainer.classList.add('hidden');
|
||||
this.showSection('edit');
|
||||
|
||||
showLoading(this.editContainer);
|
||||
const resp = await window.$http.get(`/attachments/edit/${id}`);
|
||||
@ -69,8 +82,7 @@ export class Attachments extends Component {
|
||||
}
|
||||
|
||||
stopEdit() {
|
||||
this.editContainer.classList.add('hidden');
|
||||
this.listContainer.classList.remove('hidden');
|
||||
this.showSection('list');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,74 +1,238 @@
|
||||
import DropZoneLib from 'dropzone';
|
||||
import {fadeOut} from '../services/animations';
|
||||
import {Component} from './component';
|
||||
import {Clipboard} from '../services/clipboard';
|
||||
import {
|
||||
elem, getLoading, onSelect, removeLoading,
|
||||
} from '../services/dom';
|
||||
|
||||
export class Dropzone extends Component {
|
||||
|
||||
setup() {
|
||||
this.container = this.$el;
|
||||
this.statusArea = this.$refs.statusArea;
|
||||
this.dropTarget = this.$refs.dropTarget;
|
||||
this.selectButtons = this.$manyRefs.selectButton || [];
|
||||
|
||||
this.isActive = true;
|
||||
|
||||
this.url = this.$opts.url;
|
||||
this.successMessage = this.$opts.successMessage;
|
||||
this.removeMessage = this.$opts.removeMessage;
|
||||
this.uploadLimit = Number(this.$opts.uploadLimit);
|
||||
this.errorMessage = this.$opts.errorMessage;
|
||||
this.uploadLimitMb = Number(this.$opts.uploadLimit);
|
||||
this.uploadLimitMessage = this.$opts.uploadLimitMessage;
|
||||
this.timeoutMessage = this.$opts.timeoutMessage;
|
||||
this.zoneText = this.$opts.zoneText;
|
||||
this.fileAcceptTypes = this.$opts.fileAccept;
|
||||
|
||||
this.setupListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Public method to allow external disabling/enabling of this drag+drop dropzone.
|
||||
* @param {Boolean} active
|
||||
*/
|
||||
toggleActive(active) {
|
||||
this.isActive = active;
|
||||
}
|
||||
|
||||
setupListeners() {
|
||||
onSelect(this.selectButtons, this.manualSelectHandler.bind(this));
|
||||
this.setupDropTargetHandlers();
|
||||
}
|
||||
|
||||
setupDropTargetHandlers() {
|
||||
let depth = 0;
|
||||
|
||||
const reset = () => {
|
||||
this.hideOverlay();
|
||||
depth = 0;
|
||||
};
|
||||
|
||||
this.dropTarget.addEventListener('dragenter', event => {
|
||||
event.preventDefault();
|
||||
depth += 1;
|
||||
|
||||
if (depth === 1 && this.isActive) {
|
||||
this.showOverlay();
|
||||
}
|
||||
});
|
||||
|
||||
this.dropTarget.addEventListener('dragover', event => {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
this.dropTarget.addEventListener('dragend', reset);
|
||||
this.dropTarget.addEventListener('dragleave', () => {
|
||||
depth -= 1;
|
||||
if (depth === 0) {
|
||||
reset();
|
||||
}
|
||||
});
|
||||
this.dropTarget.addEventListener('drop', event => {
|
||||
event.preventDefault();
|
||||
reset();
|
||||
|
||||
if (!this.isActive) {
|
||||
return;
|
||||
}
|
||||
|
||||
const clipboard = new Clipboard(event.dataTransfer);
|
||||
const files = clipboard.getFiles();
|
||||
for (const file of files) {
|
||||
this.createUploadFromFile(file);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
manualSelectHandler() {
|
||||
const input = elem('input', {type: 'file', style: 'left: -400px; visibility: hidden; position: fixed;', accept: this.fileAcceptTypes});
|
||||
this.container.append(input);
|
||||
input.click();
|
||||
input.addEventListener('change', () => {
|
||||
for (const file of input.files) {
|
||||
this.createUploadFromFile(file);
|
||||
}
|
||||
input.remove();
|
||||
});
|
||||
}
|
||||
|
||||
showOverlay() {
|
||||
const overlay = this.dropTarget.querySelector('.dropzone-overlay');
|
||||
if (!overlay) {
|
||||
const zoneElem = elem('div', {class: 'dropzone-overlay'}, [this.zoneText]);
|
||||
this.dropTarget.append(zoneElem);
|
||||
}
|
||||
}
|
||||
|
||||
hideOverlay() {
|
||||
const overlay = this.dropTarget.querySelector('.dropzone-overlay');
|
||||
if (overlay) {
|
||||
overlay.remove();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {File} file
|
||||
* @return {Upload}
|
||||
*/
|
||||
createUploadFromFile(file) {
|
||||
const {
|
||||
dom, status, progress, dismiss,
|
||||
} = this.createDomForFile(file);
|
||||
this.statusArea.append(dom);
|
||||
const component = this;
|
||||
this.dz = new DropZoneLib(this.container, {
|
||||
addRemoveLinks: true,
|
||||
dictRemoveFile: this.removeMessage,
|
||||
timeout: Number(window.uploadTimeout) || 60000,
|
||||
maxFilesize: this.uploadLimit,
|
||||
url: this.url,
|
||||
withCredentials: true,
|
||||
init() {
|
||||
this.dz = this;
|
||||
this.dz.on('sending', component.onSending.bind(component));
|
||||
this.dz.on('success', component.onSuccess.bind(component));
|
||||
this.dz.on('error', component.onError.bind(component));
|
||||
|
||||
const upload = {
|
||||
file,
|
||||
dom,
|
||||
updateProgress(percentComplete) {
|
||||
progress.textContent = `${percentComplete}%`;
|
||||
progress.style.width = `${percentComplete}%`;
|
||||
},
|
||||
markError(message) {
|
||||
status.setAttribute('data-status', 'error');
|
||||
status.textContent = message;
|
||||
removeLoading(dom);
|
||||
this.updateProgress(100);
|
||||
},
|
||||
markSuccess(message) {
|
||||
status.setAttribute('data-status', 'success');
|
||||
status.textContent = message;
|
||||
removeLoading(dom);
|
||||
setTimeout(dismiss, 2400);
|
||||
component.$emit('upload-success', {
|
||||
name: file.name,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
// Enforce early upload filesize limit
|
||||
if (file.size > (this.uploadLimitMb * 1000000)) {
|
||||
upload.markError(this.uploadLimitMessage);
|
||||
return upload;
|
||||
}
|
||||
|
||||
this.startXhrForUpload(upload);
|
||||
|
||||
return upload;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Upload} upload
|
||||
*/
|
||||
startXhrForUpload(upload) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', upload.file, upload.file.name);
|
||||
const component = this;
|
||||
|
||||
const req = window.$http.createXMLHttpRequest('POST', this.url, {
|
||||
error() {
|
||||
upload.markError(component.errorMessage);
|
||||
},
|
||||
readystatechange() {
|
||||
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
|
||||
upload.markSuccess(component.successMessage);
|
||||
} else if (this.readyState === XMLHttpRequest.DONE && this.status >= 400) {
|
||||
const content = this.responseText;
|
||||
const data = content.startsWith('{') ? JSON.parse(content) : {message: content};
|
||||
const message = data?.message || data?.error || content;
|
||||
upload.markError(message);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onSending(file, xhr, data) {
|
||||
const token = window.document.querySelector('meta[name=token]').getAttribute('content');
|
||||
data.append('_token', token);
|
||||
|
||||
xhr.ontimeout = () => {
|
||||
this.dz.emit('complete', file);
|
||||
this.dz.emit('error', file, this.timeoutMessage);
|
||||
};
|
||||
}
|
||||
|
||||
onSuccess(file, data) {
|
||||
this.$emit('success', {file, data});
|
||||
|
||||
if (this.successMessage) {
|
||||
window.$events.emit('success', this.successMessage);
|
||||
}
|
||||
|
||||
fadeOut(file.previewElement, 800, () => {
|
||||
this.dz.removeFile(file);
|
||||
req.upload.addEventListener('progress', evt => {
|
||||
const percent = Math.min(Math.ceil((evt.loaded / evt.total) * 100), 100);
|
||||
upload.updateProgress(percent);
|
||||
});
|
||||
|
||||
req.setRequestHeader('Accept', 'application/json');
|
||||
req.send(formData);
|
||||
}
|
||||
|
||||
onError(file, errorMessage, xhr) {
|
||||
this.$emit('error', {file, errorMessage, xhr});
|
||||
/**
|
||||
* @param {File} file
|
||||
* @return {{image: Element, dom: Element, progress: Element, status: Element, dismiss: function}}
|
||||
*/
|
||||
createDomForFile(file) {
|
||||
const image = elem('img', {src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.224 7.373a.924.924 0 0 0-.92.925l-.006 7.404c0 .509.412.925.921.925h5.557a.928.928 0 0 0 .926-.925v-5.553l-2.777-2.776Zm3.239 3.239V8.067l2.545 2.545z' style='fill:%23000;fill-opacity:.75'/%3E%3C/svg%3E"});
|
||||
const status = elem('div', {class: 'dropzone-file-item-status'}, []);
|
||||
const progress = elem('div', {class: 'dropzone-file-item-progress'});
|
||||
const imageWrap = elem('div', {class: 'dropzone-file-item-image-wrap'}, [image]);
|
||||
|
||||
const setMessage = message => {
|
||||
const messsageEl = file.previewElement.querySelector('[data-dz-errormessage]');
|
||||
messsageEl.textContent = message;
|
||||
const dom = elem('div', {class: 'dropzone-file-item'}, [
|
||||
imageWrap,
|
||||
elem('div', {class: 'dropzone-file-item-text-wrap'}, [
|
||||
elem('div', {class: 'dropzone-file-item-label'}, [file.name]),
|
||||
getLoading(),
|
||||
status,
|
||||
]),
|
||||
progress,
|
||||
]);
|
||||
|
||||
if (file.type.startsWith('image/')) {
|
||||
image.src = URL.createObjectURL(file);
|
||||
}
|
||||
|
||||
const dismiss = () => {
|
||||
dom.classList.add('dismiss');
|
||||
dom.addEventListener('animationend', () => {
|
||||
dom.remove();
|
||||
});
|
||||
};
|
||||
|
||||
if (xhr && xhr.status === 413) {
|
||||
setMessage(this.uploadLimitMessage);
|
||||
} else if (errorMessage.file) {
|
||||
setMessage(errorMessage.file);
|
||||
}
|
||||
}
|
||||
dom.addEventListener('click', dismiss);
|
||||
|
||||
removeAll() {
|
||||
this.dz.removeAllFiles(true);
|
||||
return {
|
||||
dom, progress, status, dismiss,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef Upload
|
||||
* @property {File} file
|
||||
* @property {Element} dom
|
||||
* @property {function(Number)} updateProgress
|
||||
* @property {function(String)} markError
|
||||
* @property {function(String)} markSuccess
|
||||
*/
|
||||
|
||||
@ -18,7 +18,10 @@ export class ImageManager extends Component {
|
||||
this.listContainer = this.$refs.listContainer;
|
||||
this.filterTabs = this.$manyRefs.filterTabs;
|
||||
this.selectButton = this.$refs.selectButton;
|
||||
this.uploadButton = this.$refs.uploadButton;
|
||||
this.uploadHint = this.$refs.uploadHint;
|
||||
this.formContainer = this.$refs.formContainer;
|
||||
this.formContainerPlaceholder = this.$refs.formContainerPlaceholder;
|
||||
this.dropzoneContainer = this.$refs.dropzoneContainer;
|
||||
|
||||
// Instance data
|
||||
@ -54,18 +57,14 @@ export class ImageManager extends Component {
|
||||
this.resetListView();
|
||||
this.resetSearchView();
|
||||
this.loadGallery();
|
||||
this.cancelSearch.classList.remove('active');
|
||||
});
|
||||
|
||||
this.searchInput.addEventListener('input', () => {
|
||||
this.cancelSearch.classList.toggle('active', this.searchInput.value.trim());
|
||||
});
|
||||
|
||||
onChildEvent(this.listContainer, '.load-more', 'click', async event => {
|
||||
showLoading(event.target);
|
||||
onChildEvent(this.listContainer, '.load-more button', 'click', async event => {
|
||||
const wrapper = event.target.closest('.load-more');
|
||||
showLoading(wrapper);
|
||||
this.page += 1;
|
||||
await this.loadGallery();
|
||||
event.target.remove();
|
||||
wrapper.remove();
|
||||
});
|
||||
|
||||
this.listContainer.addEventListener('event-emit-select-image', this.onImageSelectEvent.bind(this));
|
||||
@ -87,8 +86,11 @@ export class ImageManager extends Component {
|
||||
}
|
||||
});
|
||||
|
||||
this.formContainer.addEventListener('ajax-form-success', this.refreshGallery.bind(this));
|
||||
this.container.addEventListener('dropzone-success', this.refreshGallery.bind(this));
|
||||
this.formContainer.addEventListener('ajax-form-success', () => {
|
||||
this.refreshGallery();
|
||||
this.resetEditForm();
|
||||
});
|
||||
this.container.addEventListener('dropzone-upload-success', this.refreshGallery.bind(this));
|
||||
}
|
||||
|
||||
show(callback, type = 'gallery') {
|
||||
@ -97,7 +99,15 @@ export class ImageManager extends Component {
|
||||
this.callback = callback;
|
||||
this.type = type;
|
||||
this.getPopup().show();
|
||||
this.dropzoneContainer.classList.toggle('hidden', type !== 'gallery');
|
||||
|
||||
const hideUploads = type !== 'gallery';
|
||||
this.dropzoneContainer.classList.toggle('hidden', hideUploads);
|
||||
this.uploadButton.classList.toggle('hidden', hideUploads);
|
||||
this.uploadHint.classList.toggle('hidden', hideUploads);
|
||||
|
||||
/** @var {Dropzone} * */
|
||||
const dropzone = window.$components.firstOnElement(this.container, 'dropzone');
|
||||
dropzone.toggleActive(!hideUploads);
|
||||
|
||||
if (!this.hasData) {
|
||||
this.loadGallery();
|
||||
@ -163,6 +173,7 @@ export class ImageManager extends Component {
|
||||
|
||||
resetEditForm() {
|
||||
this.formContainer.innerHTML = '';
|
||||
this.formContainerPlaceholder.removeAttribute('hidden');
|
||||
}
|
||||
|
||||
resetListView() {
|
||||
@ -209,6 +220,7 @@ export class ImageManager extends Component {
|
||||
const params = requestDelete ? {delete: true} : {};
|
||||
const {data: formHtml} = await window.$http.get(`/images/edit/${imageId}`, params);
|
||||
this.formContainer.innerHTML = formHtml;
|
||||
this.formContainerPlaceholder.setAttribute('hidden', '');
|
||||
window.$components.init(this.formContainer);
|
||||
}
|
||||
|
||||
|
||||
@ -30,7 +30,6 @@ export class Clipboard {
|
||||
*/
|
||||
getImages() {
|
||||
const {types} = this.data;
|
||||
const {files} = this.data;
|
||||
const images = [];
|
||||
|
||||
for (const type of types) {
|
||||
@ -40,15 +39,21 @@ export class Clipboard {
|
||||
}
|
||||
}
|
||||
|
||||
for (const file of files) {
|
||||
if (file.type.includes('image')) {
|
||||
images.push(file);
|
||||
}
|
||||
}
|
||||
const imageFiles = this.getFiles().filter(f => f.type.includes('image'));
|
||||
images.push(...imageFiles);
|
||||
|
||||
return images;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the files included in the clipboard data.
|
||||
* @return {File[]}
|
||||
*/
|
||||
getFiles() {
|
||||
const {files} = this.data;
|
||||
return [...files];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export async function copyTextToClipboard(text) {
|
||||
|
||||
@ -1,3 +1,29 @@
|
||||
/**
|
||||
* Create a new element with the given attrs and children.
|
||||
* Children can be a string for text nodes or other elements.
|
||||
* @param {String} tagName
|
||||
* @param {Object<String, String>} attrs
|
||||
* @param {Element[]|String[]}children
|
||||
* @return {*}
|
||||
*/
|
||||
export function elem(tagName, attrs = {}, children = []) {
|
||||
const el = document.createElement(tagName);
|
||||
|
||||
for (const [key, val] of Object.entries(attrs)) {
|
||||
el.setAttribute(key, val);
|
||||
}
|
||||
|
||||
for (const child of children) {
|
||||
if (typeof child === 'string') {
|
||||
el.append(document.createTextNode(child));
|
||||
} else {
|
||||
el.append(child);
|
||||
}
|
||||
}
|
||||
|
||||
return el;
|
||||
}
|
||||
|
||||
/**
|
||||
* Run the given callback against each element that matches the given selector.
|
||||
* @param {String} selector
|
||||
@ -108,6 +134,17 @@ export function showLoading(element) {
|
||||
element.innerHTML = '<div class="loading-container"><div></div><div></div><div></div></div>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a loading element indicator element.
|
||||
* @returns {Element}
|
||||
*/
|
||||
export function getLoading() {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.classList.add('loading-container');
|
||||
wrap.innerHTML = '<div></div><div></div><div></div>';
|
||||
return wrap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove any loading indicators within the given element.
|
||||
* @param {Element} element
|
||||
|
||||
@ -45,6 +45,27 @@ export class HttpError extends Error {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} method
|
||||
* @param {String} url
|
||||
* @param {Object} events
|
||||
* @return {XMLHttpRequest}
|
||||
*/
|
||||
export function createXMLHttpRequest(method, url, events = {}) {
|
||||
const csrfToken = document.querySelector('meta[name=token]').getAttribute('content');
|
||||
const req = new XMLHttpRequest();
|
||||
|
||||
for (const [eventName, callback] of Object.entries(events)) {
|
||||
req.addEventListener(eventName, callback.bind(req));
|
||||
}
|
||||
|
||||
req.open(method, url);
|
||||
req.withCredentials = true;
|
||||
req.setRequestHeader('X-CSRF-TOKEN', csrfToken);
|
||||
|
||||
return req;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new HTTP request, setting the required CSRF information
|
||||
* to communicate with the back-end. Parses & formats the response.
|
||||
|
||||
@ -116,6 +116,7 @@
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
&.small {
|
||||
margin: 2% auto;
|
||||
width: 800px;
|
||||
@ -144,6 +145,7 @@
|
||||
box-shadow: none;
|
||||
color: #FFF;
|
||||
padding: $-xs $-m;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popup-header button:not(.popup-header-close) {
|
||||
@ -202,10 +204,147 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
min-height: 70vh;
|
||||
}
|
||||
|
||||
.dropzone-container {
|
||||
position: relative;
|
||||
@include lightDark(background-color, #eee, #222);
|
||||
.dropzone-overlay {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.333rem;
|
||||
width: 98%;
|
||||
height: 98%;
|
||||
left: 1%;
|
||||
top: 1%;
|
||||
border-radius: 4px;
|
||||
border: 1px dashed var(--color-primary);
|
||||
font-style: italic;
|
||||
box-sizing: content-box;
|
||||
background-clip: padding-box;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a9a9a9' fill-opacity='0.52' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
|
||||
background-color: var(--color-primary);
|
||||
color: #FFF;
|
||||
opacity: .8;
|
||||
z-index: 9;
|
||||
pointer-events: none;
|
||||
animation: dzAnimIn 240ms ease-in-out;
|
||||
}
|
||||
|
||||
.dropzone-landing-area {
|
||||
background-color: var(--color-primary-light);
|
||||
padding: $-m $-l;
|
||||
width: 100%;
|
||||
border: 1px dashed var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes dzAnimIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.7);
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dzFileItemIn {
|
||||
0% {
|
||||
opacity: .5;
|
||||
transform: translateY(28px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes dzFileItemOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: .5;
|
||||
transform: translateY(28px);
|
||||
}
|
||||
}
|
||||
|
||||
.dropzone-file-item {
|
||||
width: 260px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: 1rem;
|
||||
flex-direction: row;
|
||||
@include lightDark(background, #FFF, #444);
|
||||
box-shadow: $bs-large;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 3px;
|
||||
animation: dzFileItemIn ease-in-out 240ms;
|
||||
transition: transform ease-in-out 120ms, box-shadow ease-in-out 120ms;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 3px 8px 1px rgba(22, 22, 22, 0.2);
|
||||
}
|
||||
}
|
||||
.dropzone-file-item.dismiss {
|
||||
animation: dzFileItemOut ease-in-out 240ms;
|
||||
}
|
||||
.dropzone-file-item .loading-container {
|
||||
text-align: start !important;
|
||||
margin: 0;
|
||||
}
|
||||
.dropzone-file-item-image-wrap {
|
||||
width: 80px;
|
||||
position: relative;
|
||||
background-color: var(--color-primary-light);
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
.dropzone-file-item-text-wrap {
|
||||
flex: 1;
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
.dropzone-file-item-progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-size: 0;
|
||||
height: 3px;
|
||||
background-color: var(--color-primary);
|
||||
transition: width ease-in-out 240ms;
|
||||
}
|
||||
.dropzone-file-item-label,
|
||||
.dropzone-file-item-status {
|
||||
align-items: center;
|
||||
font-size: .8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.dropzone-file-item-status[data-status] {
|
||||
display: flex;
|
||||
font-size: .6rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.dropzone-file-item-status[data-status="success"] {
|
||||
color: $positive;
|
||||
}
|
||||
.dropzone-file-item-status[data-status="error"] {
|
||||
color: $negative;
|
||||
}
|
||||
.dropzone-file-item-status[data-status] + .dropzone-file-item-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-manager-list .image {
|
||||
@ -256,13 +395,11 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
.image-manager .load-more {
|
||||
display: block;
|
||||
text-align: center;
|
||||
@include lightDark(background-color, #EEE, #444);
|
||||
padding: $-s $-m;
|
||||
color: #AAA;
|
||||
clear: both;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
font-style: italic;
|
||||
.loading-container {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image-manager .loading-container {
|
||||
@ -279,7 +416,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
min-height: auto;
|
||||
padding: $-m;
|
||||
}
|
||||
img {
|
||||
.image-manager-viewer img {
|
||||
max-width: 100%;
|
||||
max-height: 180px;
|
||||
display: block;
|
||||
@ -295,10 +432,6 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.dropzone-container {
|
||||
border-bottom: 1px solid #DDD;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
}
|
||||
}
|
||||
|
||||
.image-manager-list {
|
||||
@ -318,295 +451,18 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
}
|
||||
}
|
||||
|
||||
// Dropzone
|
||||
/*
|
||||
* The MIT License
|
||||
* Copyright (c) 2012 Matias Meno <m@tias.me>
|
||||
*/
|
||||
.dz-message {
|
||||
font-size: 1em;
|
||||
line-height: 2.85;
|
||||
font-style: italic;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: $-l $-m;
|
||||
transition: all ease-in-out 120ms;
|
||||
}
|
||||
|
||||
.dz-drag-hover .dz-message {
|
||||
background-color: rgb(16, 126, 210);
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
@keyframes passing-through {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
30%, 70% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-40px);
|
||||
.image-manager [role="tablist"] button[role="tab"] {
|
||||
border-right: 1px solid #DDD;
|
||||
@include lightDark(border-color, #DDD, #000);
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
.image-manager-header {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
20% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.dropzone, .dropzone * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dz-preview {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 12px;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.dz-preview:hover {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.dz-preview:hover .dz-details {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dz-preview.dz-file-preview .dz-image {
|
||||
border-radius: 4px;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
|
||||
.dz-preview.dz-file-preview .dz-details {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dz-preview.dz-image-preview {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.dz-preview.dz-image-preview .dz-details {
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
||||
.dz-preview .dz-remove {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.dz-preview .dz-remove:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.dz-preview:hover .dz-details {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dz-preview .dz-details {
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
font-size: 10px;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 6px 3px;
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.dz-preview .dz-details .dz-size {
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dz-preview .dz-details .dz-filename {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dz-preview .dz-details .dz-filename:hover span {
|
||||
border: 1px solid rgba(200, 200, 200, 0.8);
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.dz-preview .dz-details .dz-filename:not(:hover) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dz-preview .dz-details .dz-filename:not(:hover) span {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.dz-preview .dz-details .dz-filename span {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
padding: 0 0.4em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.dz-preview:hover .dz-image img {
|
||||
filter: blur(8px);
|
||||
}
|
||||
|
||||
.dz-preview .dz-image {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dz-preview .dz-image img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dz-preview.dz-success .dz-success-mark {
|
||||
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
}
|
||||
|
||||
.dz-preview.dz-error .dz-error-mark {
|
||||
opacity: 1;
|
||||
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
}
|
||||
|
||||
.dz-preview .dz-success-mark, .dz-preview .dz-error-mark {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: 1001;
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-inline-start: -27px;
|
||||
margin-top: -35px;
|
||||
}
|
||||
|
||||
.dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {
|
||||
display: block;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
.dz-preview.dz-processing .dz-progress {
|
||||
opacity: 1;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
.dz-preview.dz-complete .dz-progress {
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-in;
|
||||
}
|
||||
|
||||
.dz-preview:not(.dz-processing) .dz-progress {
|
||||
animation: pulse 6s ease infinite;
|
||||
}
|
||||
|
||||
.dz-preview .dz-progress {
|
||||
opacity: 1;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
width: 80px;
|
||||
margin-inline-start: -40px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
transform: scale(1);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dz-preview .dz-progress .dz-upload {
|
||||
background: #333;
|
||||
background: linear-gradient(to bottom, #666, #444);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
transition: width 300ms ease-in-out;
|
||||
}
|
||||
|
||||
.dz-preview.dz-error .dz-error-message {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dz-preview.dz-error {
|
||||
.dz-image, .dz-details {
|
||||
&:hover ~ .dz-error-message {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dz-preview .dz-error-message {
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
display: block;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
top: 88px;
|
||||
left: -12px;
|
||||
width: 160px;
|
||||
background: $negative;
|
||||
padding: $-xs;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dz-preview .dz-error-message:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 44px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-inline-start: 6px solid transparent;
|
||||
border-inline-end: 6px solid transparent;
|
||||
border-bottom: 6px solid $negative;
|
||||
}
|
||||
|
||||
|
||||
.tab-container [role="tablist"] {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
|
||||
@ -253,6 +253,15 @@ body.flexbox {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
&.top-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@ -120,29 +120,36 @@ $loadingSize: 10px;
|
||||
.contained-search-box {
|
||||
display: flex;
|
||||
height: 38px;
|
||||
z-index: -1;
|
||||
input, button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
border: 1px solid #ddd;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
margin-inline-start: -1px;
|
||||
&:last-child {
|
||||
border-inline-end: 0;
|
||||
}
|
||||
}
|
||||
input {
|
||||
flex: 5;
|
||||
padding: $-xs $-s;
|
||||
&:focus, &:active {
|
||||
outline: 0;
|
||||
outline: 1px dotted var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
border: 1px solid #ddd;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
}
|
||||
}
|
||||
button {
|
||||
width: 60px;
|
||||
}
|
||||
button.primary-background {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
button i {
|
||||
padding: 0;
|
||||
}
|
||||
button.cancel.active {
|
||||
background-color: $negative;
|
||||
color: #EEE;
|
||||
}
|
||||
svg {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div component="ajax-form"
|
||||
option:ajax-form:url="/attachments/{{ $attachment->id }}"
|
||||
option:ajax-form:method="put"
|
||||
option:ajax-form:response-container=".attachment-edit-container"
|
||||
option:ajax-form:response-container="#edit-form-container"
|
||||
option:ajax-form:success-message="{{ trans('entities.attachments_updated_success') }}">
|
||||
<h5>{{ trans('entities.attachments_edit_file') }}</h5>
|
||||
|
||||
@ -17,18 +17,35 @@
|
||||
</div>
|
||||
|
||||
<div component="tabs" class="tab-container">
|
||||
<div class="nav-tabs">
|
||||
<button refs="tabs@toggleFile" type="button" class="tab-item {{ $attachment->external ? '' : 'selected' }}">{{ trans('entities.attachments_upload') }}</button>
|
||||
<button refs="tabs@toggleLink" type="button" class="tab-item {{ $attachment->external ? 'selected' : '' }}">{{ trans('entities.attachments_set_link') }}</button>
|
||||
<div class="nav-tabs" role="tablist">
|
||||
<button id="attachment-edit-file-tab"
|
||||
type="button"
|
||||
aria-controls="attachment-edit-file-panel"
|
||||
aria-selected="{{ $attachment->external ? 'false' : 'true' }}"
|
||||
role="tab">{{ trans('entities.attachments_upload') }}</button>
|
||||
<button id="attachment-edit-link-tab"
|
||||
type="button"
|
||||
aria-controls="attachment-edit-link-panel"
|
||||
aria-selected="{{ $attachment->external ? 'true' : 'false' }}"
|
||||
role="tab">{{ trans('entities.attachments_set_link') }}</button>
|
||||
</div>
|
||||
<div refs="tabs@contentFile" class="mb-m {{ $attachment->external ? 'hidden' : '' }}">
|
||||
@include('form.dropzone', [
|
||||
<div id="attachment-edit-file-panel"
|
||||
@if($attachment->external) hidden @endif
|
||||
tabindex="0"
|
||||
role="tabpanel"
|
||||
aria-labelledby="attachment-edit-file-tab"
|
||||
class="mb-m">
|
||||
@include('form.simple-dropzone', [
|
||||
'placeholder' => trans('entities.attachments_edit_drop_upload'),
|
||||
'url' => url('/attachments/upload/' . $attachment->id),
|
||||
'successMessage' => trans('entities.attachments_file_updated'),
|
||||
])
|
||||
</div>
|
||||
<div refs="tabs@contentLink" class="{{ $attachment->external ? '' : 'hidden' }}">
|
||||
<div id="attachment-edit-link-panel"
|
||||
@if(!$attachment->external) hidden @endif
|
||||
tabindex="0"
|
||||
role="tabpanel"
|
||||
aria-labelledby="attachment-edit-link-tab">
|
||||
<div class="form-group">
|
||||
<label for="attachment_edit_url">{{ trans('entities.attachments_link_url') }}</label>
|
||||
<input type="text" id="attachment_edit_url"
|
||||
@ -43,6 +60,8 @@
|
||||
</div>
|
||||
|
||||
<button component="event-emit-select"
|
||||
option:event-emit-select:name="edit-back" type="button" class="button outline">{{ trans('common.back') }}</button>
|
||||
option:event-emit-select:name="edit-back"
|
||||
type="button"
|
||||
class="button outline">{{ trans('common.back') }}</button>
|
||||
<button refs="ajax-form@submit" type="button" class="button">{{ trans('common.save') }}</button>
|
||||
</div>
|
||||
@ -4,7 +4,7 @@
|
||||
<div component="ajax-form"
|
||||
option:ajax-form:url="/attachments/link"
|
||||
option:ajax-form:method="post"
|
||||
option:ajax-form:response-container=".link-form-container"
|
||||
option:ajax-form:response-container="#link-form-container"
|
||||
option:ajax-form:success-message="{{ trans('entities.attachments_link_attached') }}">
|
||||
<input type="hidden" name="attachment_link_uploaded_to" value="{{ $pageId }}">
|
||||
<p class="text-muted small">{{ trans('entities.attachments_explain_link') }}</p>
|
||||
@ -22,6 +22,9 @@
|
||||
<div class="text-neg text-small">{{ $errors->first('attachment_link_url') }}</div>
|
||||
@endif
|
||||
</div>
|
||||
<button component="event-emit-select"
|
||||
option:event-emit-select:name="edit-back"
|
||||
type="button" class="button outline">{{ trans('common.cancel') }}</button>
|
||||
<button refs="ajax-form@submit"
|
||||
type="button"
|
||||
class="button">{{ trans('entities.attach') }}</button>
|
||||
|
||||
@ -6,66 +6,44 @@
|
||||
class="toolbox-tab-content">
|
||||
|
||||
<h4>{{ trans('entities.attachments') }}</h4>
|
||||
<div class="px-l files">
|
||||
<div component="dropzone"
|
||||
option:dropzone:url="{{ url('/attachments/upload?uploaded_to=' . $page->id) }}"
|
||||
option:dropzone:success-message="{{ trans('entities.attachments_file_uploaded') }}"
|
||||
option:dropzone:error-message="{{ trans('errors.attachment_upload_error') }}"
|
||||
option:dropzone:upload-limit="{{ config('app.upload_limit') }}"
|
||||
option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
|
||||
option:dropzone:zone-text="{{ trans('entities.attachments_dropzone') }}"
|
||||
option:dropzone:file-accept="*"
|
||||
class="px-l files">
|
||||
|
||||
<div refs="attachments@listContainer">
|
||||
<div refs="attachments@list-container dropzone@drop-target" class="relative">
|
||||
<p class="text-muted small">{{ trans('entities.attachments_explain') }} <span
|
||||
class="text-warn">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
|
||||
|
||||
<div component="tabs" refs="attachments@mainTabs" class="tab-container">
|
||||
<div role="tablist">
|
||||
<button id="attachment-tab-items"
|
||||
role="tab"
|
||||
aria-selected="true"
|
||||
aria-controls="attachment-panel-items"
|
||||
type="button"
|
||||
class="tab-item">{{ trans('entities.attachments_items') }}</button>
|
||||
<button id="attachment-tab-upload"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
aria-controls="attachment-panel-upload"
|
||||
type="button"
|
||||
class="tab-item">{{ trans('entities.attachments_upload') }}</button>
|
||||
<button id="attachment-tab-links"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
aria-controls="attachment-panel-links"
|
||||
type="button"
|
||||
class="tab-item">{{ trans('entities.attachments_link') }}</button>
|
||||
</div>
|
||||
<div id="attachment-panel-items"
|
||||
tabindex="0"
|
||||
role="tabpanel"
|
||||
aria-labelledby="attachment-tab-items"
|
||||
refs="attachments@list">
|
||||
@include('attachments.manager-list', ['attachments' => $page->attachments->all()])
|
||||
</div>
|
||||
<div id="attachment-panel-upload"
|
||||
tabindex="0"
|
||||
role="tabpanel"
|
||||
hidden
|
||||
aria-labelledby="attachment-tab-upload">
|
||||
@include('form.dropzone', [
|
||||
'placeholder' => trans('entities.attachments_dropzone'),
|
||||
'url' => url('/attachments/upload?uploaded_to=' . $page->id),
|
||||
'successMessage' => trans('entities.attachments_file_uploaded'),
|
||||
])
|
||||
</div>
|
||||
<div id="attachment-panel-links"
|
||||
tabindex="0"
|
||||
role="tabpanel"
|
||||
hidden
|
||||
aria-labelledby="attachment-tab-links"
|
||||
class="link-form-container">
|
||||
@include('attachments.manager-link-form', ['pageId' => $page->id])
|
||||
</div>
|
||||
<hr class="mb-s">
|
||||
|
||||
<div class="flex-container-row">
|
||||
<button refs="dropzone@select-button" type="button" class="button outline small">{{ trans('entities.attachments_upload') }}</button>
|
||||
<button refs="attachments@attach-link-button" type="button" class="button outline small">{{ trans('entities.attachments_link') }}</button>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-muted text-small">{{ trans('entities.attachments_upload_drop') }}</p>
|
||||
</div>
|
||||
<div refs="dropzone@status-area" class="fixed top-right px-m py-m"></div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div refs="attachments@list-panel">
|
||||
@include('attachments.manager-list', ['attachments' => $page->attachments->all()])
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div refs="attachments@editContainer" class="hidden attachment-edit-container">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="link-form-container" refs="attachments@links-container" hidden class="px-l">
|
||||
@include('attachments.manager-link-form', ['pageId' => $page->id])
|
||||
</div>
|
||||
|
||||
<div id="edit-form-container" refs="attachments@edit-container" hidden class="px-l"></div>
|
||||
|
||||
</div>
|
||||
@ -1,16 +0,0 @@
|
||||
{{--
|
||||
@url - URL to upload to.
|
||||
@placeholder - Placeholder text
|
||||
@successMessage
|
||||
--}}
|
||||
<div component="dropzone"
|
||||
option:dropzone:url="{{ $url }}"
|
||||
option:dropzone:success-message="{{ $successMessage ?? '' }}"
|
||||
option:dropzone:remove-message="{{ trans('components.image_upload_remove') }}"
|
||||
option:dropzone:upload-limit="{{ config('app.upload_limit') }}"
|
||||
option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
|
||||
option:dropzone:timeout-message="{{ trans('errors.file_upload_timeout') }}"
|
||||
|
||||
class="dropzone-container text-center">
|
||||
<button type="button" class="dz-message">{{ $placeholder }}</button>
|
||||
</div>
|
||||
21
resources/views/form/simple-dropzone.blade.php
Normal file
21
resources/views/form/simple-dropzone.blade.php
Normal file
@ -0,0 +1,21 @@
|
||||
{{--
|
||||
@url - URL to upload to.
|
||||
@placeholder - Placeholder text
|
||||
@successMessage
|
||||
--}}
|
||||
<div component="dropzone"
|
||||
option:dropzone:url="{{ $url }}"
|
||||
option:dropzone:success-message="{{ $successMessage }}"
|
||||
option:dropzone:error-message="{{ trans('errors.attachment_upload_error') }}"
|
||||
option:dropzone:upload-limit="{{ config('app.upload_limit') }}"
|
||||
option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
|
||||
option:dropzone:zone-text="{{ trans('entities.attachments_dropzone') }}"
|
||||
option:dropzone:file-accept="*"
|
||||
class="relative">
|
||||
<div refs="dropzone@status-area"></div>
|
||||
<button type="button"
|
||||
refs="dropzone@select-button dropzone@drop-target"
|
||||
class="dropzone-landing-area text-center">
|
||||
{{ $placeholder }}
|
||||
</button>
|
||||
</div>
|
||||
@ -19,5 +19,7 @@
|
||||
</div>
|
||||
@endforeach
|
||||
@if($hasMore)
|
||||
<div class="load-more">{{ trans('components.image_load_more') }}</div>
|
||||
<div class="load-more">
|
||||
<button type="button" class="button small outline">{{ trans('components.image_load_more') }}</button>
|
||||
</div>
|
||||
@endif
|
||||
@ -1,4 +1,11 @@
|
||||
<div component="image-manager"
|
||||
<div components="image-manager dropzone"
|
||||
option:dropzone:url="{{ url('/images/gallery?' . http_build_query(['uploaded_to' => $uploaded_to ?? 0])) }}"
|
||||
option:dropzone:success-message="{{ trans('components.image_upload_success') }}"
|
||||
option:dropzone:error-message="{{ trans('errors.image_upload_error') }}"
|
||||
option:dropzone:upload-limit="{{ config('app.upload_limit') }}"
|
||||
option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
|
||||
option:dropzone:zone-text="{{ trans('components.image_dropzone_drop') }}"
|
||||
option:dropzone:file-accept="image/*"
|
||||
option:image-manager:uploaded-to="{{ $uploaded_to ?? 0 }}"
|
||||
class="image-manager">
|
||||
|
||||
@ -9,13 +16,17 @@
|
||||
|
||||
<div class="popup-header primary-background">
|
||||
<div class="popup-title">{{ trans('components.image_select') }}</div>
|
||||
<button refs="dropzone@selectButton image-manager@uploadButton" type="button">
|
||||
<span>@icon('upload')</span>
|
||||
<span>{{ trans('components.image_upload') }}</span>
|
||||
</button>
|
||||
<button refs="popup@hide" type="button" class="popup-header-close">@icon('close')</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill image-manager-body">
|
||||
<div refs="dropzone@drop-target" class="flex-fill image-manager-body">
|
||||
|
||||
<div class="image-manager-content">
|
||||
<div role="tablist" class="image-manager-header primary-background-light grid third no-gap">
|
||||
<div role="tablist" class="image-manager-header grid third no-gap">
|
||||
<button refs="image-manager@filterTabs"
|
||||
data-filter="all"
|
||||
role="tab"
|
||||
@ -51,14 +62,16 @@
|
||||
<div class="image-manager-sidebar flex-container-column">
|
||||
|
||||
<div refs="image-manager@dropzoneContainer">
|
||||
@include('form.dropzone', [
|
||||
'placeholder' => trans('components.image_dropzone'),
|
||||
'successMessage' => trans('components.image_upload_success'),
|
||||
'url' => url('/images/gallery?' . http_build_query(['uploaded_to' => $uploaded_to ?? 0]))
|
||||
])
|
||||
<div refs="dropzone@status-area"></div>
|
||||
</div>
|
||||
|
||||
<div refs="image-manager@formContainer" class="inner flex"></div>
|
||||
<div refs="image-manager@form-container-placeholder" class="p-m text-small text-muted">
|
||||
<p>{{ trans('components.image_intro') }}</p>
|
||||
<p refs="image-manager@upload-hint">{{ trans('components.image_intro_upload') }}</p>
|
||||
</div>
|
||||
|
||||
<div refs="image-manager@formContainer" class="inner flex">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -163,7 +163,8 @@ class ImageTest extends TestCase
|
||||
|
||||
$file = $this->files->imageFromBase64File('bad-php.base64', $fileName);
|
||||
$upload = $this->withHeader('Content-Type', 'image/jpeg')->call('POST', '/images/gallery', ['uploaded_to' => $page->id], [], ['file' => $file], []);
|
||||
$upload->assertStatus(302);
|
||||
$upload->assertStatus(500);
|
||||
$this->assertStringContainsString('The file must have a valid & supported image extension', $upload->json('message'));
|
||||
|
||||
$this->assertFalse(file_exists(public_path($relPath)), 'Uploaded php file was uploaded but should have been stopped');
|
||||
|
||||
@ -185,7 +186,8 @@ class ImageTest extends TestCase
|
||||
|
||||
$file = $this->files->imageFromBase64File('bad-phtml.base64', $fileName);
|
||||
$upload = $this->withHeader('Content-Type', 'image/jpeg')->call('POST', '/images/gallery', ['uploaded_to' => $page->id], [], ['file' => $file], []);
|
||||
$upload->assertStatus(302);
|
||||
$upload->assertStatus(500);
|
||||
$this->assertStringContainsString('The file must have a valid & supported image extension', $upload->json('message'));
|
||||
|
||||
$this->assertFalse(file_exists(public_path($relPath)), 'Uploaded php file was uploaded but should have been stopped');
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user