Skip to content

Commit 1bd8078

Browse files
givanzgivanz
committed
Add default media variables only if not added from editor.html to allow easier override
1 parent 3e46bb1 commit 1bd8078

File tree

2 files changed

+88
-82
lines changed

2 files changed

+88
-82
lines changed

‎libs/media/media.css

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -95,30 +95,6 @@
9595
display:block !important;
9696
font-size:1rem;
9797
}
98-
99-
.filemanager .upload input[type=file]::-webkit-file-upload-button
100-
/*,.filemanager .upload input[type=file]::file-selector-button */
101-
{
102-
visibility: hidden;
103-
}
104-
105-
.filemanager .upload input[type=file]::before {
106-
content: 'Choose files';
107-
color: white;
108-
display: inline-block;
109-
background: -webkit-linear-gradient(top, #0d6efd, #0a58ca);
110-
border: 1px solid #0d6efd;
111-
border-radius: 3px;
112-
padding: 0.7rem 1.4rem;
113-
outline: none;
114-
white-space: nowrap;
115-
-webkit-user-select: none;
116-
cursor: pointer;
117-
//text-shadow: 1px 1px var(--bs-body-bg);
118-
font-size: 1rem;
119-
font-weight:500;
120-
box-shadow:1px 1px 2px 1px rgba(0, 0, 0, 0.07), -1px 1px 2px 0px rgba(255, 255, 255, 0.15) inset;
121-
}
12298
.filemanager .upload input[type=file]:hover::before {
12399
border-color: black;
124100
}
@@ -224,7 +200,7 @@
224200
padding:0;
225201
}
226202

227-
.filemanager .data li:hover {
203+
.filemanager .data li:hover, .filemanager .data li.active {
228204
padding:0px;
229205
border-color: #007bff;
230206
border-width: 1px;
@@ -615,6 +591,7 @@
615591
padding: 6rem 4rem 4rem;
616592
display: block !important;
617593
font-size: 1rem;
594+
color:var(--bs-primary);
618595
}
619596
.upload-collapse input[type=file]::-webkit-file-upload-button {
620597
visibility: hidden;
@@ -626,8 +603,8 @@
626603
background: gradient(top, rgba(var(--bs-link-color-rgb), 0.85), var(--bs-link-color));
627604
background: -webkit-linear-gradient(top, rgba(var(--bs-link-color-rgb), 0.85), var(--bs-link-color));
628605
border: 1px solid var(--bs-link-color-rgb);
629-
border-radius: 3px;
630-
padding: 0.7rem 1.4rem;
606+
border-radius: 4px;
607+
padding: 0.7rem 1.8rem;
631608
outline: none;
632609
white-space: nowrap;
633610
-webkit-user-select: none;

‎libs/media/media.js

Lines changed: 84 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ function ucFirst(str) {
44
return str[0].toUpperCase() + str.slice(1);
55
}
66

7-
let mediaScanUrl = 'scan.php';
7+
if (typeof mediaScanUrl === "undefined") {
8+
var mediaPath = "/media/";
9+
var mediaScanUrl = "scan.php";
10+
var uploadUrl = "upload.php";
11+
}
812

913
class MediaModal {
1014
constructor (modal = true)
@@ -117,29 +121,41 @@ class MediaModal {
117121
this.filemanager = null;
118122
this.breadcrumbs = null;
119123
this.fileList = null;
120-
this.mediaPath = "/public/media/";
124+
this.mediaPath = mediaPath;
121125
this.type = "single";
126+
this.container = document.getElementById("MediaModal");
127+
}
128+
129+
getResponse(response) {
130+
return this.response;
131+
}
132+
133+
setResponse(response) {
134+
this.response = response;
135+
this.currentPath = '',
136+
this.breadcrumbsUrls = [];
122137
}
123138

124139
addModalHtml() {
125140
if (this.isModal) document.body.append(generateElements(this.modalHtml)[0]);
126-
document.querySelector("#MediaModal .save-btn").addEventListener("click", () => this.save());
141+
this.container = document.getElementById("MediaModal");
142+
this.container.querySelector(".save-btn").addEventListener("click", () => this.save());
127143
}
128144

129145
showUploadLoading() {
130-
document.querySelector("#MediaModal .upload-collapse .status").innerHTML = `
146+
this.container.querySelector(".upload-collapse .status").innerHTML = `
131147
<div class="spinner-border" style="width: 5rem; height: 5rem;margin: 5rem auto; display:block" role="status">
132148
<span class="visually-hidden">Loading...</span>
133149
</div>`;
134150
}
135151

136152
hideUploadLoading() {
137-
document.querySelector("#MediaModal .upload-collapse .status").innerHTML = '';
153+
this.container.querySelector(".upload-collapse .status").innerHTML = '';
138154
}
139155

140156
save() {
141157

142-
let file = document.querySelector("#MediaModal .files input:checked").value ?? false;
158+
let file = this.container.querySelector(".files input:checked").value ?? false;
143159
let src = file;
144160

145161
if (!file) return;
@@ -164,7 +180,7 @@ class MediaModal {
164180
//$(this.targetInput).val(file).trigger("change");
165181
}
166182

167-
let modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('MediaModal'));
183+
let modal = bootstrap.Modal.getOrCreateInstance(this.container);
168184
if (this.isModal) modal.hide();
169185
}
170186

@@ -176,8 +192,8 @@ class MediaModal {
176192
this.initGallery();
177193
this.isInit = true;
178194

179-
document.querySelector(".filemanager input[type=file]").addEventListener("change", this.onUpload);
180-
document.querySelector(".filemanager").addEventListener("click", function (e) {
195+
this.container.querySelector(".filemanager input[type=file]").addEventListener("change", this.onUpload);
196+
this.container.querySelector(".filemanager").addEventListener("click", function (e) {
181197
let element = e.target.closest(".btn-delete");
182198
if (element) {
183199
self.deleteFile(element);
@@ -212,38 +228,41 @@ class MediaModal {
212228
this.callback = callback;
213229
this.init();
214230

215-
let modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('MediaModal'));
231+
let modal = bootstrap.Modal.getOrCreateInstance(this.container);
216232
if (this.isModal) modal.show();
217233
}
218234

219235

220236
initGallery() {
221-
this.filemanager = document.querySelector('.filemanager'),
222-
this.breadcrumbs = document.querySelector('.breadcrumbs'),
237+
this.filemanager = this.container.querySelector('.filemanager'),
238+
this.breadcrumbs = this.container.querySelector('.breadcrumbs'),
223239
this.fileList = this.filemanager.querySelector('.data');
224240
let _this = this;
225241

226242
// Start by fetching the file data from scan.php with an AJAX request
227-
fetch(mediaScanUrl)
228-
.then((response) => {
229-
if (!response.ok) { throw new Error(response) }
230-
return response.json();
231-
})
232-
.then((data) => {
233-
_this.response = [data],
234-
_this.currentPath = '',
235-
_this.breadcrumbsUrls = [];
236-
237-
let folders = [],
238-
files = [];
239-
240-
window.dispatchEvent(new HashChangeEvent("hashchange"));
241-
})
242-
.catch(error => {
243-
console.log(error.statusText);
244-
displayToast("bg-danger", "Error", "Error loading media!");
245-
});
246-
243+
if (!this.response.length) {//if response set by a plugin ignore fetch
244+
fetch(mediaScanUrl)
245+
.then((response) => {
246+
if (!response.ok) { throw new Error(response) }
247+
return response.json();
248+
})
249+
.then((data) => {
250+
_this.response = [data],
251+
_this.currentPath = '',
252+
_this.breadcrumbsUrls = [];
253+
254+
let folders = [],
255+
files = [];
256+
257+
window.dispatchEvent(new HashChangeEvent("hashchange"));
258+
})
259+
.catch(error => {
260+
console.log(error.statusText);
261+
displayToast("bg-danger", "Error", "Error loading media!");
262+
});
263+
} else {
264+
this.goto("");
265+
}
247266
// This event listener monitors changes on the URL. We use it to
248267
// capture back/forward navigation in the browser.
249268

@@ -430,9 +449,9 @@ class MediaModal {
430449
// if there is no hash
431450

432451
else {
433-
this.currentPath = this.response[0].path;
434-
this.breadcrumbsUrls.push(this.response[0].path);
435-
this.render(this.searchByPath(this.response[0].path));
452+
this.currentPath = this.response[0]?.path ?? "";
453+
this.breadcrumbsUrls.push(this.currentPath);
454+
this.render(this.searchByPath(this.currentPath));
436455
}
437456
}
438457
}
@@ -522,11 +541,14 @@ _
522541
formData.append("mediaPath", Vvveb.MediaModal.mediaPath + Vvveb.MediaModal.currentPath);
523542
formData.append("onlyFilename", true);
524543

525-
526-
fetch('upload.php', {method: "POST", body: formData})
544+
fetch(uploadUrl, {method: "POST", body: formData})
527545
.then((response) => {
528-
console.log(response);
529-
if (!response.ok) { throw new Error(response) }
546+
if (!response.ok) {
547+
return Promise.resolve(response.text()).then((responseInText) => {
548+
return Promise.reject([response, responseInText]);
549+
});
550+
}
551+
//if (!response.ok) { throw new Error(response) }
530552
return response.text()
531553
})
532554
.then((data) => {
@@ -541,10 +563,18 @@ _
541563

542564
Vvveb.MediaModal.hideUploadLoading();
543565
})
544-
.catch(error => {
545-
console.log(error);
566+
.catch((error) => {
567+
let [response, responseInText] = error;
568+
let message = responseInText ?? error.statusText ?? "Error uploading!";
546569
Vvveb.MediaModal.hideUploadLoading();
547-
displayToast("bg-danger", "Error", "Error uploading!");
570+
displayToast("bg-danger", "Error", message.substr(0, 200));
571+
if (response.text && !response.bodyUsed) {
572+
response.text().then( errorMessage => {
573+
let message = errorMessage.substr(0, 200);
574+
console.log(message);
575+
displayToast("bg-danger", "Error", message);
576+
});
577+
}
548578
});
549579
}
550580
}
@@ -554,28 +584,30 @@ _
554584
let file = parent.querySelector('input[type ="hidden"]').value;
555585
if (confirm(`Are you sure you want to delete "${file}"template?`)) {
556586

557-
fetch(deleteUrl, {method: "POST", body: {file}})
587+
fetch(deleteUrl, {method: "POST", body: new URLSearchParams({file})})
558588
.then((response) => {
559-
if (!response.ok) { throw new Error(response) }
560-
return response.text()
589+
if (!response.ok) { return Promise.reject(response); }
590+
return response.text();
561591
})
562592
.then((data) => {
563593
let bg = "bg-success";
564594
if (data.success) {
565595
} else {
566596
//bg = "bg-danger";
567597
}
568-
569-
document.querySelectorAll("#top-toast .toast-body").html(data)
570-
document.querySelectorAll("#top-toast .toast-header").classList.remove(["bg-danger", "bg-success"]).classList.add(bg);
571-
document.querySelectorAll("#top-toast .toast").classList.add("show");
572-
delay(() => document.querySelectorAll("#top-toast .toast").classList.remove("show"), 5000);
598+
599+
displayToast(bg, "Delete", data.message ?? data);
573600

574601
parent.remove();
575602
})
576603
.catch(error => {
577604
console.log(error);
578-
displayToast("bg-danger", "Error", "Error deleting file!");
605+
let message = error.statusText ?? "Error deleting file!";
606+
displayToast("bg-danger", "Error", message);
607+
error.text().then( errorMessage => {
608+
let message = errorMessage.substr(0, 200);
609+
displayToast("bg-danger", "Error", message);
610+
})
579611
});
580612
}
581613
}
@@ -599,10 +631,7 @@ _
599631
//bg = "bg-danger";
600632
}
601633

602-
document.querySelectorAll("#top-toast .toast-body").html(data)
603-
document.querySelectorAll("#top-toast .toast-header").classList.remove(["bg-danger", "bg-success"]).classList.add(bg);
604-
document.querySelectorAll("#top-toast .toast").classList.add("show");
605-
delay(() => document.querySelectorAll("#top-toast .toast").classList.remove("show"), 5000);
634+
displayToast(bg, "Save", data.message ?? data);
606635
})
607636
.catch(error => {
608637
console.log(error);

0 commit comments

Comments
 (0)