Skip to content

Commit

Permalink
users
Browse files Browse the repository at this point in the history
  • Loading branch information
@peter-tharwat
peter-tharwat committed Nov 6, 2021
1 parent 1415367 commit 5d0250b
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 19 deletions.
11 changes: 3 additions & 8 deletions app/Http/Livewire/FilesViewer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,11 @@
class FilesViewer extends Component
{
use WithPagination;
public $files = [];
public function render()
{
$files = $this->files;
$files = \App\Models\HubFile::where(function($q){

})->orderBy('id','DESC')->simplePaginate(24);
return view('livewire.files-viewer',compact('files'));
}
public function load_files()
{
$this->files = \App\Models\HubFile::where(function($q){

})->orderBy('id','DESC')->simplePaginate(6);
}
}
1 change: 1 addition & 0 deletions public/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
});
});
Fancybox.bind("[data-fancybox]", {});
Fancybox.bind("img.data-fancybox", {});
Fancybox.bind(".data-fancybox img", {});
$('.asideToggle').on('click', function() {
$('.aside').toggleClass('active');
Expand Down
29 changes: 22 additions & 7 deletions resources/views/layouts/admin.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,7 @@

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script>
<script src="https://cdn.ckeditor.com/ckeditor5/29.2.0/classic/ckeditor.js"></script>
<input type="hidden" id="current_selected_editor">
<script>
var allEditors = document.querySelectorAll('.editor');
var allEditorsAfterRender=[];
Expand Down Expand Up @@ -469,11 +470,7 @@
});
}
function set_latest_clicked_ckeditor(id){
allEditorsAfterRender[id].execute( 'insertImage', {
source: [
{ src: 'https://static.remove.bg/remove-bg-web/f50bd6ad4990ff621deccea155ab762c39d8c77a/assets/start_remove-c851bdf8d3127a24e2d137a55b1b427378cd17385b01aec6e59d5d4b5f39d2ec.png', alt: 'First alt text',customAttribute:'' },
]
});
$('#current_selected_editor').val(id);
}
$(document).on('click','.open-image-selector-opener',function(){
alert($(this).data('editor-id'));
Expand Down Expand Up @@ -558,14 +555,32 @@ function get_nots() {
@yield('scripts')
@livewireScripts
<script type="text/javascript">
var open_files_viewer = document.getElementById('open-image-selector-modal')
var open_files_viewer = document.getElementById('open-image-selector-modal');
open_files_viewer.addEventListener('show.bs.modal', function (event) {
Livewire.emit('load_files');
/* Livewire.emit('toggleOpen');*/
});
$(document).on('click','.image-file',function(){
$(this).toggleClass('active');
$('#checkbox_file_'+$(this).attr('data-id')).attr('checked', function(_, attr){ return !attr});
});
$('#selected-files-insert-btn').on('click',function(){
var ek = $('.selected-files:checked').map((_,el) => el.value).get()
var values=[];
$.each(ek,function(key,value){
values.push({
src:value,
class:'data-fancybox'
})
});
console.log(values);
allEditorsAfterRender[$('#current_selected_editor').val()].execute( 'insertImage', {
source: values
});
$('#checkbox_file_'+$(this).attr('data-id')).attr('checked', function(_, attr){ return false});
$('.image-file').removeClass('active');
});
</script>
</body>
@notifyJs
Expand Down
7 changes: 3 additions & 4 deletions resources/views/livewire/files-viewer.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,15 @@
@foreach($files as $file)
<div style="width:180px;" class="d-inline-block p-2">
<div class="col-12 p-0 position-relative">
<input type="checkbox" name="selected-files" class="position-absolute" style="right: 5px;top: 5px;width: 25px;height: 25px;opacity: .9;z-index: -1" value="{{env('STORAGE_URL')}}{{$file->path}}{{$file->name}}" id="checkbox_file_{{$file->id}}" data-id="{{$file->id}}">
<input type="checkbox" name="selected-files[]" class="position-absolute selected-files" style="right: 5px;top: 5px;width: 25px;height: 25px;opacity: .9;z-index: -1" value="{{env('STORAGE_URL')}}{{$file->path}}{{$file->name}}" id="checkbox_file_{{$file->id}}" data-id="{{$file->id}}">
<img src="{{env('STORAGE_URL')}}{{$file->path}}{{$file->name}}" style="height: 100px;object-fit: cover;vertical-align: middle;width: 100%;padding: 2px;border-radius: 5px" class="image-file cursor-pointer" data-id="{{$file->id}}">
</div>
</div>
@endforeach
@if(count($files)==0)
<div class="col-12 d-flex justify-content-center align-items-center" style="height: 300px;">
<div class="col-12 d-inline-block text-center">
<span class="fal fa-images font-12" style="color:#ff9800"></span><br><br> <span class="fas fa-info-circle"></span> يتم إخفاء الصور حتى لا تؤثر على سرعة تحميل الصفحة <br> لذا يمكنك عرض الصور عبر زر العرض <br><br>
<span class="d-inline-block btn btn-success" wire:click="$emit('load_files')">عرض الصور</span>
<span class="fal fa-images font-12" style="color:#ff9800"></span><br><br> <span class="fas fa-info-circle"></span> لا يوجد ملفات
</div>
</div>
@endif
Expand All @@ -25,7 +24,7 @@
@endif
<div class="col-12 py-2 px-3 d-flex justify-content-end mb-3">
<span class="d-inline-block btn btn-light btn-sm mx-2" data-bs-dismiss="modal">تراجع</span>
<span class="d-inline-block btn btn-primary btn-sm"><span class="far fa-check-circle"></span> إختر الملفات</span>
<span class="d-inline-block btn btn-primary btn-sm" id="selected-files-insert-btn" data-bs-dismiss="modal"><span class="far fa-check-circle"></span> إختر الملفات</span>
</div>
</div>
</div>
Expand Down

0 comments on commit 5d0250b

Please sign in to comment.