Add a swap/scroll button

This commit is contained in:
Deon George 2024-10-06 17:11:55 +11:00
parent 925138baa5
commit 47d0846f99
4 changed files with 76 additions and 52 deletions

View File

@ -43,10 +43,8 @@
@section('page-scripts') @section('page-scripts')
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { function swap(item) {
$('span.swap').on('click',function() { var tr = item.closest('tr');
var that = $(this);
var tr = that.closest('tr');
try { try {
['duplicate','remove'].forEach(function(item) { ['duplicate','remove'].forEach(function(item) {
@ -60,20 +58,32 @@
var rotate = items[0].checked; var rotate = items[0].checked;
$(items[0]).prop('checked',items[1].checked); $(items[0]).prop('checked',items[1].checked);
$(items[1]).prop('checked',rotate); $(items[1]).prop('checked',rotate);
that.removeData();
}); });
} catch (e) { } catch (e) {
// NOOP // NOOP
} }
}); }
$('span.scroll').on('click',function() { function scroll(item) {
var next = $(this).closest('div.card').closest('tr').next(); var next = item.closest('div.card').closest('tr').next();
if (next.length) if (next.length)
$('html,body').animate({scrollTop: next.offset().top},'fast'); $('html,body').animate({scrollTop: next.offset().top},'fast');
}
$(document).ready(function() {
$('span.swap').on('click',function() {
swap($(this));
});
$('span.scroll').on('click',function() {
scroll($(this));
});
$('span.swapscroll').on('click',function() {
swap($(this));
scroll($(this));
}); });
}); });
</script> </script>

View File

@ -43,10 +43,8 @@
@section('page-scripts') @section('page-scripts')
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { function swap(item) {
$('span.swap').on('click',function() { var tr = item.closest('tr');
var that = $(this);
var tr = that.closest('tr');
try { try {
['duplicate','remove'].forEach(function(item) { ['duplicate','remove'].forEach(function(item) {
@ -60,20 +58,32 @@
var rotate = items[0].checked; var rotate = items[0].checked;
$(items[0]).prop('checked',items[1].checked); $(items[0]).prop('checked',items[1].checked);
$(items[1]).prop('checked',rotate); $(items[1]).prop('checked',rotate);
that.removeData();
}); });
} catch (e) { } catch (e) {
// NOOP // NOOP
} }
}); }
$('span.scroll').on('click',function() { function scroll(item) {
var next = $(this).closest('div.card').closest('tr').next(); var next = item.closest('div.card').closest('tr').next();
if (next.length) if (next.length)
$('html,body').animate({scrollTop: next.offset().top},'fast'); $('html,body').animate({scrollTop: next.offset().top},'fast');
}
$(document).ready(function() {
$('span.swap').on('click',function() {
swap($(this));
});
$('span.scroll').on('click',function() {
scroll($(this));
});
$('span.swapscroll').on('click',function() {
swap($(this));
scroll($(this));
}); });
}); });
</script> </script>

View File

@ -22,8 +22,9 @@
<div class="card-body"> <div class="card-body">
<x-photo.thumbnail :id="$o->id" :css="$css ?? NULL"/> <x-photo.thumbnail :id="$o->id" :css="$css ?? NULL"/>
<span class="btn btn-sm float-right scroll"> <i class="fas fa-fw fa-level-down-alt"></i></span> <span class="btn btn-sm btn-outline-dark float-right scroll m-1"> <i class="fas fa-fw fa-level-down-alt"></i></span>
<span class="btn btn-sm btn-outline-dark float-right swap">SWAP</span> <span class="btn btn-sm btn-outline-dark float-right swap m-1"> <i class="fas fa-fw fa-exchange-alt"></i></span>
<span class="btn btn-sm btn-outline-dark float-right swapscroll m-1"> <i class="fas fa-fw fa-exchange-alt"></i><i class="fas fa-fw fa-level-down-alt"></i></span>
</div> </div>
<div class="card-footer card-comments"> <div class="card-footer card-comments">

View File

@ -22,6 +22,9 @@
<div class="card-body"> <div class="card-body">
<x-video.thumbnail :id="$o->id" :css="$css ?? NULL"/> <x-video.thumbnail :id="$o->id" :css="$css ?? NULL"/>
<span class="btn btn-sm btn-outline-dark float-right scroll m-1"> <i class="fas fa-fw fa-level-down-alt"></i></span>
<span class="btn btn-sm btn-outline-dark float-right swap m-1"> <i class="fas fa-fw fa-exchange-alt"></i></span>
<span class="btn btn-sm btn-outline-dark float-right swapscroll m-1"> <i class="fas fa-fw fa-exchange-alt"></i><i class="fas fa-fw fa-level-down-alt"></i></span>
</div> </div>
<div class="card-footer card-comments"> <div class="card-footer card-comments">