¨4.0.1¨

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

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>

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 {

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;
}
}

View File

@@ -14,6 +14,6 @@ return [
],
'file_manager' => [
'title' => 'File Manager',
'select_this_file' => 'Select this file',
'insert' => 'Insert',
],
];

View File

@@ -1,5 +1,5 @@
<?php
return [
'image_has_been_added' => 'Image has been added.',
'image_has_been_added' => 'Image has been added',
];

View File

@@ -9,21 +9,26 @@
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600|Roboto" rel="stylesheet">
@foreach ($assets->allCss() as $css)
<link media="all" type="text/css" rel="stylesheet" href="{{ v($css) }}">
@endforeach
@vite([
'Modules/Admin/Resources/assets/sass/main.scss',
'Modules/Admin/Resources/assets/js/main.js',
'Modules/Admin/Resources/assets/js/app.js',
'Modules/Media/Resources/assets/admin/sass/main.scss',
'Modules/Media/Resources/assets/admin/js/main.js'
])
@include('admin::partials.globals')
</head>
<body class="file-manager">
<body class="file-manager {{ is_rtl() ? 'rtl' : 'ltr' }}">
<div class="container">
@include('media::admin.media.partials.uploader')
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
@include('media::admin.media.partials.table')
<div class="box">
<div class="box-body">
@include('media::admin.media.partials.uploader')
@include('media::admin.media.partials.table')
</div>
</div>
</div>
</div>
@@ -33,14 +38,10 @@
@include('admin::partials.confirmation_modal')
@foreach ($assets->allJs() as $js)
<script src="{{ v($js) }}"></script>
@endforeach
<script>
<script type="module">
DataTable.setRoutes('.file-manager .table', {
index: {
name: 'admin.media.index',
table: {
name: 'admin.media.table',
params: { type: '{{ $type }}' }
},
destroy: 'admin.media.destroy',

View File

@@ -7,12 +7,11 @@
@endcomponent
@section('content')
@include('media::admin.media.partials.uploader')
<div class="box box-primary">
<div class="box-header"></div>
@include('media::admin.media.partials.table')
<div class="box m-b-0">
<div class="box-body">
@include('media::admin.media.partials.uploader')
@include('media::admin.media.partials.table')
</div>
</div>
@endsection
@@ -23,8 +22,15 @@
</dl>
@endpush
@push('globals')
@vite([
'Modules/Media/Resources/assets/admin/sass/main.scss',
'Modules/Media/Resources/assets/admin/js/main.js'
])
@endpush
@push('scripts')
<script>
<script type="module">
Mousetrap.bind('u', function() {
$('.dropzone').trigger('click');
});
@@ -34,7 +40,7 @@
});
DataTable.setRoutes('#media-table .table', {
index: 'admin.media.index',
table: 'admin.media.table',
destroy: 'admin.media.destroy',
});

View File

@@ -1,4 +1,4 @@
<div class="box-body index-table" id="media-table">
<div class="index-table" id="media-table">
@component('admin::components.table')
@slot('thead')
<tr>

View File

@@ -1,11 +1,11 @@
<button type="button" class="btn btn-default select-media"
<button
type="button"
class="btn btn-default select-media"
data-id="{{ $file->id }}"
data-path="{{ $file->path }}"
data-filename="{{ $file->filename }}"
data-type="{{ strtok($file->mime, '/') }}"
data-icon="{{ $file->icon() }}"
data-toggle="tooltip"
title="{{ trans('media::media.file_manager.select_this_file') }}"
>
<i class="fa fa-check-square-o"></i>
{{ trans('media::media.file_manager.insert') }}
</button>

View File

@@ -4,14 +4,10 @@
</script>
@endpush
<div class="row">
<div class="col-md-12">
<form method="POST" class="dropzone">
{{ csrf_field() }}
<form method="POST" class="dropzone">
{{ csrf_field() }}
<div class="dz-message needsclick">
{{ trans('media::media.drop_files_here') }}
</div>
</form>
<div class="dz-message needsclick">
{{ trans('media::media.drop_files_here') }}
</div>
</div>
</form>