NW/FleetCart
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases Wiki Activity

¨4.0.1¨

Browse Source
This commit is contained in:
¨NW¨
2023-12-03 14:07:47 +00:00
parent c08b36d1b6
commit f35052522d
1112 changed files with 43019 additions and 24987 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
Modules/Media/Resources/assets/admin/js/MediaPicker.js
View File

@@ -1,14 +1,16 @@
import '../sass/media-picker.scss';
import "../sass/media-picker.scss";
export default class {
constructor(options) {
this.options = _.merge({
type: null,
multiple: false,
route: 'admin.file_manager.index',
title: trans('media::media.file_manager.title'),
message: trans('media::messages.image_has_been_added'),
}, options);
this.options = _.merge(
{
type: null,
multiple: false,
route: "admin.file_manager.index",
title: trans("media::media.file_manager.title"),
},
options
);
this.events = {};
this.frame = this.getFrame();
@@ -27,78 +29,113 @@ export default class {
multiple: this.options.multiple,
});
return $(`<iframe class="file-manager-iframe" frameborder="0" src="${src}"></iframe>`);
return $(
`<iframe class="file-manager-iframe" frameborder="0" src="${src}"></iframe>`
);
}
appendModalToBody() {
if ($('.media-picker-modal').length === 1) {
if ($(".media-picker-modal").length === 1) {
return;
}
$('body').append(this.getModal());
$("body").append(this.getModal());
this.closeModalOnClickDismiss();
this.closeModalOnClickOutside();
}
openFrame() {
this.showModal();
this.frame.on('load', () => {
this.frame.on("load", () => {
this.selectMedia();
});
}
showModal() {
let modal = $('.media-picker-modal').modal('show');
let modal = $(".media-picker-modal").modal("show");
this.setFrameHeight();
this.setFrameHeightOnWindowResize();
this.setModalTitle(modal);
this.setModalBody(modal);
this.closeModalOnEsc(modal);
}
setFrameHeight() {
this.frame.css('height', window.innerHeight * 0.8);
this.frame.css("height", window.innerHeight * 0.8);
}
setFrameHeightOnWindowResize() {
window.addEventListener("resize", () => {
this.setFrameHeight();
});
}
setModalTitle(modal) {
modal.find('.modal-title').text(this.options.title);
modal.find(".modal-title").text(this.options.title);
}
setModalBody(modal) {
modal.find('.modal-body').html(this.frame);
modal.find(".modal-body").html(this.frame);
}
closeModalOnEsc(modal) {
$(document).on('keydown', (e) => {
if (e.keyCode === 27) {
modal.modal('hide');
$(document).on("keydown", (e) => {
if (e.key === "Escape") {
modal.modal("hide");
}
});
this.frame.on('load keydown', () => {
this.frame.contents().on('keydown', (e) => {
if (e.keyCode === 27) {
modal.modal('hide');
this.frame.on("load keydown", () => {
this.frame.contents().on("keydown", (e) => {
if (e.key === "Escape") {
modal.modal("hide");
}
});
});
}
selectMedia() {
this.frame.contents().find('.table').on('click', '.select-media', (e) => {
e.preventDefault();
closeModalOnClickDismiss() {
const modal = $(".media-picker-modal");
this.events['select'](e.currentTarget.dataset);
if (this.options.multiple) {
if (this.options.message) {
notify('success', this.options.message, { context: this.frame.contents() });
}
} else {
$('.media-picker-modal').modal('hide');
}
modal.find('[data-dismiss="modal"]').on("click", () => {
modal.modal("hide");
});
}
closeModalOnClickOutside() {
const modal = $(".media-picker-modal");
modal.find(".modal-content").on("click", (e) => {
e.stopPropagation();
});
modal.on("click", () => {
modal.modal("hide");
});
}
selectMedia() {
this.frame
.contents()
.find(".table")
.on("click", ".select-media", (e) => {
e.preventDefault();
this.events["select"](e.currentTarget.dataset);
if (this.options.multiple) {
$(e.currentTarget)
.attr("disabled", true)
.html(`<i class="fa fa-check" aria-hidden="true"></i>`);
} else {
$(".media-picker-modal").modal("hide");
}
});
}
getModal() {
return `
<div class="media-picker-modal modal fade" role="dialog">
@@ -107,7 +144,8 @@ export default class {
<div class="row">
<div class="modal-header">
<a type="button" class="close" data-dismiss="modal">&times;</a>
<h4 class="modal-title"></h4>
<h5 class="modal-title"></h5>
</div>
<div class="modal-body"></div>

81
Modules/Media/Resources/assets/admin/sass/main.scss
View File

@@ -1,16 +1,16 @@
@import '~dropzone/dist/dropzone';
@import "dropzone/dist/dropzone";
.dropzone {
border: 1px dashed #d2d6de;
border: 2px dashed #d2d6de;
min-height: 232px;
margin-bottom: 20px;
margin-bottom: 25px;
&.dz-clickable {
border-radius: 3px;
}
.dz-message {
color: #646C7F;
color: #646c7f;
font-size: 20px;
margin-top: 82px;
}
@@ -21,7 +21,7 @@
}
.file-icon {
font-size: 20px;
font-size: 20px;
}
.main-file {
@@ -52,49 +52,30 @@
}
.single-image {
padding: 10px;
background: #f1f1f1;
margin-top: 15px;
padding: 10px;
background: #f1f1f1;
margin-top: 15px;
display: inline-block;
border-radius: 3px;
vertical-align: bottom;
> .image-holder {
cursor: default;
margin: 0;
border-radius: 3px;
}
}
.multiple-images-wrapper {
margin-top: 15px;
h4 {
font-weight: 500;
margin-bottom: 10px;
}
}
.multiple-images {
overflow: hidden;
padding: 10px 10px 0 10px;
background: #f1f1f1;
margin-top: 15px;
border-radius: 3px;
}
.image-holder {
position: relative;
float: left;
height: 125px;
width: 125px;
overflow: hidden;
background: #fff;
margin: 0 10px 10px 0;
border: 1px solid #d2d6de;
position: relative;
float: left;
height: 125px;
width: 125px;
overflow: hidden;
background: #fff;
margin: 0;
border: 1px solid #d2d6de;
border-radius: 3px;
cursor: move;
z-index: 0;
cursor: pointer;
.placeholder-image {
max-width: 80%;
}
> i {
position: absolute;
@@ -102,7 +83,7 @@
color: #d9d9d9;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
z-index: -1;
}
@@ -118,31 +99,31 @@
> .remove-image {
position: absolute;
top: -2px;
right: 4px;
top: 2px;
right: 6px;
color: #ffffff;
padding: 0;
background: transparent;
transition: 200ms;
transition: 150ms;
visibility: hidden;
opacity: 0;
font-size: 18px;
font-family: 'FontAwesome';
font-family: "FontAwesome";
-webkit-text-stroke: 1px #737881;
-moz-text-stroke: 1px #737881;
-ms-text-stroke: 1px #737881;
-o-text-stroke: 1px #737881;
-moz-text-stroke: 1px #737881;
-ms-text-stroke: 1px #737881;
-o-text-stroke: 1px #737881;
z-index: 2;
&:focus {
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
box-shadow: none;
}
&:active {
-webkit-box-shadow: none;
box-shadow: none;
box-shadow: none;
}
&::after {

28
Modules/Media/Resources/assets/admin/sass/media-picker.scss
View File

@@ -1,10 +1,10 @@
.file-manager-iframe {
width: 100%;
vertical-align: bottom;
width: 100%;
vertical-align: bottom;
}
.file-manager {
background: #f9f9f9;
background: #f9f9f9;
margin-top: 20px;
overflow-x: auto;
@@ -14,10 +14,12 @@
.dataTable {
.btn {
padding: 10px 16px 8px;
padding: 9px 16px;
}
.select-media {
> i {
margin-top: 5px;
-webkit-text-stroke: 1px #f1f1f1;
}
}
}
@@ -25,7 +27,7 @@
.media-picker-modal {
padding-right: 0 !important;
z-index: 1050;
z-index: 1150;
> i {
margin-right: 5px;
@@ -44,13 +46,13 @@
}
.modal-header {
padding: 6px 15px;
padding: 10px 15px;
background: #f1f1f1;
> .close {
margin-top: 5px;
margin-top: 3px;
-webkit-text-stroke: 0;
transition: 200ms;
transition: 150ms;
}
}
@@ -62,7 +64,7 @@
.modal.fade .modal-dialog {
transform: scale(0.8);
opacity: 0;
transition: 200ms ease-in-out;
transition: 150ms ease-in-out;
&.in .modal-dialog {
transform: scale(1);
@@ -72,7 +74,7 @@
}
@media screen and (max-width: 767px) {
.media-picker-modal .modal-dialog {
margin: 10px;
}
.media-picker-modal .modal-dialog {
margin: 10px;
}
}