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')
<script type="text/javascript">
$(document).ready(function() {
$('span.swap').on('click',function() {
var that = $(this);
var tr = that.closest('tr');
function swap(item) {
var tr = item.closest('tr');
try {
['duplicate','remove'].forEach(function(item) {
@ -60,20 +58,32 @@
var rotate = items[0].checked;
$(items[0]).prop('checked',items[1].checked);
$(items[1]).prop('checked',rotate);
that.removeData();
});
} catch (e) {
// NOOP
}
});
}
$('span.scroll').on('click',function() {
var next = $(this).closest('div.card').closest('tr').next();
function scroll(item) {
var next = item.closest('div.card').closest('tr').next();
if (next.length)
$('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>

View File

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

View File

@ -22,8 +22,9 @@
<div class="card-body">
<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 swap">SWAP</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 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 class="card-footer card-comments">

View File

@ -22,6 +22,9 @@
<div class="card-body">
<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 class="card-footer card-comments">