- Added image manager button for uploads.
- Added image manager placeholder sidebar text for guidance.
- Improved dropzone layer styling.
- Removed old dropzone styles.
- Got success events and auto-hide working.
- Updated upload items to animate out.
// Image Manager
'image_select' => 'Image Select',
+ 'image_upload' => 'Upload Image',
'image_all' => 'All',
'image_all_title' => 'View all images',
'image_book_title' => 'View images uploaded to this book',
--- /dev/null
+<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>
\ No newline at end of file
import {Component} from './component';
import {Clipboard} from '../services/clipboard';
import {
- elem, getLoading, removeLoading,
+ 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.url = this.$opts.url;
this.successMessage = this.$opts.successMessage;
this.timeoutMessage = this.$opts.timeoutMessage; // TODO - Use
this.zoneText = this.$opts.zoneText;
// window.uploadTimeout // TODO - Use
- // TODO - Click-to-upload buttons/areas
- // TODO - Drop zone highlighting of existing element
- // (Add overlay via additional temp element).
this.setupListeners();
}
setupListeners() {
+ onSelect(this.selectButtons, this.manualSelectHandler.bind(this));
+
let depth = 0;
- this.container.addEventListener('dragenter', event => {
+ this.dropTarget.addEventListener('dragenter', event => {
event.preventDefault();
depth += 1;
}
});
- this.container.addEventListener('dragover', event => {
+ this.dropTarget.addEventListener('dragover', event => {
event.preventDefault();
});
depth = 0;
};
- this.container.addEventListener('dragend', event => {
+ this.dropTarget.addEventListener('dragend', event => {
reset();
});
- this.container.addEventListener('dragleave', event => {
+ this.dropTarget.addEventListener('dragleave', event => {
depth -= 1;
if (depth === 0) {
reset();
}
});
- this.container.addEventListener('drop', event => {
+ this.dropTarget.addEventListener('drop', event => {
event.preventDefault();
reset();
const clipboard = new Clipboard(event.dataTransfer);
});
}
+ manualSelectHandler() {
+ const input = elem('input', {type: 'file', style: 'left: -400px; visibility: hidden; position: fixed;'});
+ this.container.append(input);
+ input.click();
+ input.addEventListener('change', event => {
+ for (const file of input.files) {
+ this.createUploadFromFile(file);
+ }
+ input.remove();
+ });
+ }
+
showOverlay() {
- const overlay = this.container.querySelector('.dropzone-overlay');
+ const overlay = this.dropTarget.querySelector('.dropzone-overlay');
if (!overlay) {
const zoneElem = elem('div', {class: 'dropzone-overlay'}, [this.zoneText]);
- this.container.append(zoneElem);
+ this.dropTarget.append(zoneElem);
}
}
hideOverlay() {
- const overlay = this.container.querySelector('.dropzone-overlay');
+ const overlay = this.dropTarget.querySelector('.dropzone-overlay');
if (overlay) {
overlay.remove();
}
* @return {Upload}
*/
createUploadFromFile(file) {
- const {dom, status, progress} = this.createDomForFile(file);
- this.container.append(dom);
+ const {dom, status, progress, dismiss} = this.createDomForFile(file);
+ this.statusArea.append(dom);
+ const component = this;
const upload = {
file,
dom,
updateProgress(percentComplete) {
- console.log(`progress: ${percentComplete}%`);
progress.textContent = `${percentComplete}%`;
progress.style.width = `${percentComplete}%`;
},
status.setAttribute('data-status', 'success');
status.textContent = message;
removeLoading(dom);
+ setTimeout(dismiss, 2400);
+ component.$emit('upload-success', {
+ name: file.name,
+ });
},
};
/**
* @param {File} file
- * @return {{image: Element, dom: Element, progress: Element, label: Element, status: Element}}
+ * @return {{image: Element, dom: Element, progress: Element, status: Element, dismiss: function}}
*/
createDomForFile(file) {
const image = elem('img', {src: ''});
image.src = URL.createObjectURL(file);
}
+ const dismiss = () => {
+ dom.classList.add('dismiss');
+ dom.addEventListener('animationend', event => {
+ dom.remove();
+ });
+ };
+
+ dom.addEventListener('click', dismiss);
+
return {
- dom, progress, status,
+ dom, progress, status, dismiss,
};
}
this.filterTabs = this.$manyRefs.filterTabs;
this.selectButton = this.$refs.selectButton;
this.formContainer = this.$refs.formContainer;
+ this.formContainerPlaceholder = this.$refs.formContainerPlaceholder;
this.dropzoneContainer = this.$refs.dropzoneContainer;
// Instance data
}
});
- 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') {
resetEditForm() {
this.formContainer.innerHTML = '';
+ this.formContainerPlaceholder.removeAttribute('hidden');
}
resetListView() {
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);
}
display: flex;
justify-content: center;
align-items: center;
- font-size: 2rem;
+ font-size: 1.333rem;
width: 98%;
height: 98%;
left: 1%;
top: 1%;
- background-color: var(--color-primary);
- border: 4px dashed rgba(0, 0, 0, 0.5);
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;
- box-sizing: border-box;
pointer-events: none;
animation: dzAnimIn 240ms ease-in-out;
}
transform: translateY(0);
}
}
+@keyframes dzFileItemOut {
+ 0% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ 100% {
+ opacity: .5;
+ transform: translateY(28px);
+ }
+}
.dropzone-file-item {
width: 260px;
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;
display: none;
}
-.dropzone-container {
- position: relative;
- @include lightDark(background-color, #eee, #222);
- 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");
-}
-
.image-manager-list .image {
display: block;
position: relative;
display: inline-block;
}
}
- .dropzone-container {
- border-bottom: 1px solid #DDD;
- @include lightDark(border-color, #ddd, #000);
- }
}
.image-manager-list {
}
}
-// Dropzone
-/*
- * The MIT License
- */
-.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);
- }
-}
-
-@keyframes slide-in {
- 0% {
- opacity: 0;
- transform: translateY(40px);
- }
- 30% {
- opacity: 1;
- transform: translateY(0px);
- }
-}
-
-@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;
@placeholder - Placeholder text
@successMessage
--}}
-<div class="dropzone-container text-center">
+<div refs="" class="dropzone-container text-center">
<button type="button" class="dz-message">{{ $placeholder }}</button>
</div>
\ No newline at end of file
-<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: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') }}"
+ option:dropzone:zone-text="{{ trans('components.image_dropzone_drop') }}"
option:image-manager:uploaded-to="{{ $uploaded_to ?? 0 }}"
class="image-manager">
<div class="popup-header primary-background">
<div class="popup-title">{{ trans('components.image_select') }}</div>
+ <button refs="dropzone@selectButton" 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 component="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: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') }}"
- option:dropzone:zone-text="{{ trans('components.image_dropzone_drop') }}"
- 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 class="image-manager-sidebar flex-container-column">
- <div refs="image-manager@dropzoneContainer dropzone@statusArea">
- @include('form.dropzone', [
- 'placeholder' => trans('components.image_dropzone'),
- ])
+ <div refs="image-manager@dropzoneContainer">
+ <div refs="dropzone@status-area"></div>
+ </div>
+
+ <div refs="image-manager@form-container-placeholder" class="p-m text-small text-muted">
+ <p>Here you can manage or select images that have been previously uploaded to the system.</p>
+ <p>Upload a new image by dragging an image file into this window,
+ or by using the "Upload Image" button above.</p>
</div>
- <div refs="image-manager@formContainer" class="inner flex"></div>
+ <div refs="image-manager@formContainer" class="inner flex">
+ </div>
</div>
</div>
projects / bookstack / commitdiff
