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,37 +43,47 @@
@section('page-scripts') @section('page-scripts')
<script type="text/javascript"> <script type="text/javascript">
function swap(item) {
var tr = item.closest('tr');
try {
['duplicate','remove'].forEach(function(item) {
var items = tr.find('input[name^="'+item+'\["]');
if (items.length !== 2) {
alert('cannot swap');
throw new Error('CANNOT SWAP');
}
var rotate = items[0].checked;
$(items[0]).prop('checked',items[1].checked);
$(items[1]).prop('checked',rotate);
});
} catch (e) {
// NOOP
}
}
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() { $(document).ready(function() {
$('span.swap').on('click',function() { $('span.swap').on('click',function() {
var that = $(this); swap($(this));
var tr = that.closest('tr');
try {
['duplicate','remove'].forEach(function(item) {
var items = tr.find('input[name^="'+item+'\["]');
if (items.length !== 2) {
alert('cannot swap');
throw new Error('CANNOT SWAP');
}
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() { $('span.scroll').on('click',function() {
var next = $(this).closest('div.card').closest('tr').next(); scroll($(this));
});
if (next.length) $('span.swapscroll').on('click',function() {
$('html,body').animate({scrollTop: next.offset().top},'fast'); swap($(this));
scroll($(this));
}); });
}); });
</script> </script>

View File

@ -43,37 +43,47 @@
@section('page-scripts') @section('page-scripts')
<script type="text/javascript"> <script type="text/javascript">
function swap(item) {
var tr = item.closest('tr');
try {
['duplicate','remove'].forEach(function(item) {
var items = tr.find('input[name^="'+item+'\["]');
if (items.length !== 2) {
alert('cannot swap');
throw new Error('CANNOT SWAP');
}
var rotate = items[0].checked;
$(items[0]).prop('checked',items[1].checked);
$(items[1]).prop('checked',rotate);
});
} catch (e) {
// NOOP
}
}
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() { $(document).ready(function() {
$('span.swap').on('click',function() { $('span.swap').on('click',function() {
var that = $(this); swap($(this));
var tr = that.closest('tr');
try {
['duplicate','remove'].forEach(function(item) {
var items = tr.find('input[name^="'+item+'\["]');
if (items.length !== 2) {
alert('cannot swap');
throw new Error('CANNOT SWAP');
}
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() { $('span.scroll').on('click',function() {
var next = $(this).closest('div.card').closest('tr').next(); scroll($(this));
});
if (next.length) $('span.swapscroll').on('click',function() {
$('html,body').animate({scrollTop: next.offset().top},'fast'); 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">