Enqueue js channel table sort (#72)
* enqueue js sort table * channels table sort and style
This commit is contained in:
Lemuel Smyth
GitHub
parent
f09d446af1
commit
5ef5d1f68f
3 changed files with 120 additions and 19 deletions
|
|
@ -61,10 +61,10 @@
|
|||
margin-right: 1em;
|
||||
}
|
||||
.post-lbry-display-before {
|
||||
color: darkgreen;
|
||||
color: green;
|
||||
}
|
||||
.post-lbry-display {
|
||||
color: green;
|
||||
color: #135548;
|
||||
}
|
||||
|
||||
.lbry-pub-metabox {
|
||||
|
|
@ -86,38 +86,36 @@
|
|||
.lbry-meta-bx-content-last {
|
||||
padding: .2em .8em 1em .1em;
|
||||
}
|
||||
|
||||
/*---------------------
|
||||
Channels Table
|
||||
-------------------*/
|
||||
table.lbry-channel-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-family: Georgia;
|
||||
}
|
||||
|
||||
.lbry-channel-table th, .lbry-channel-table td {
|
||||
padding: .4em 1.6em;
|
||||
border: 2px solid #fff;
|
||||
background: #fbd7b4;
|
||||
background: #97eb9d;
|
||||
font-size: 1em;
|
||||
}
|
||||
.lbry-channel-table thead th {
|
||||
padding: .5em 2em;
|
||||
background: #f69546;
|
||||
background: #135548;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
color: #fff;
|
||||
}
|
||||
.lbry-channel-table tbody tr:nth-child(odd) *:nth-child(even), .lbry-channel-table tbody tr:nth-child(even) *:nth-child(odd) {
|
||||
background: #f3eddd;
|
||||
.lbry-channel-table tbody tr:nth-child(odd) td {
|
||||
background: #e1fafa;
|
||||
}
|
||||
.lbry-channel-table tfoot th {
|
||||
padding: .5em 2em;
|
||||
background: #f69546;
|
||||
padding: .5em 1.8em;
|
||||
background: #175248;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
font-size: .9em;
|
||||
color: #fff;
|
||||
}
|
||||
.lbry-channel-table tr *:nth-child(3), .lbry-channel-table tr *:nth-child(4) {
|
||||
/* text-align: right; */
|
||||
}
|
||||
83
admin/js/table-sort.js
Normal file
83
admin/js/table-sort.js
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
jQuery(document).ready(function($) {
|
||||
var compare = {
|
||||
channel: function(a, b) {
|
||||
a = a.replace(/^@/i, '') && a.replace(/[-]/gi, '');
|
||||
b = b.replace(/^@/i, '') && b.replace(/[-]/gi, '');
|
||||
|
||||
if (a < b) {
|
||||
return -1;
|
||||
} else {
|
||||
return a > b ? 1 : 0;
|
||||
}
|
||||
},
|
||||
lbryurl: function(a, b) {
|
||||
a = a.replace(/^lbry:\/\/@/i, '') && a.replace(/#[a-zA-Z0-9]+/, '') && a.replace(/-/g, '');
|
||||
b = b.replace(/^lbry:\/\/@/i, '') && b.replace(/#[a-zA-Z0-9]+/, '') && b.replace(/-/g, '');
|
||||
|
||||
if (a < b) {
|
||||
return -1;
|
||||
} else {
|
||||
return a > b ? 1 : 0;
|
||||
}
|
||||
},
|
||||
claim: function(a, b) {
|
||||
if (a < b) {
|
||||
return -1;
|
||||
} else {
|
||||
return a > b ? 1 : 0;
|
||||
}
|
||||
},
|
||||
posts: function(a, b) {
|
||||
a = Number(a);
|
||||
b = Number(b);
|
||||
|
||||
return a - b;
|
||||
},
|
||||
support: function(a, b) {
|
||||
a = a.replace(/,/g, '');
|
||||
b = b.replace(/,/g, '');
|
||||
|
||||
a = Number(a);
|
||||
b = Number(b);
|
||||
|
||||
return a - b;
|
||||
},
|
||||
date: function(a, b) {
|
||||
a = new Date(a);
|
||||
b = new Date(b);
|
||||
|
||||
return a - b;
|
||||
}
|
||||
};
|
||||
$('.lbry-channel-table').each(function() {
|
||||
var $table = $(this);
|
||||
var $tbody = $table.find('tbody');
|
||||
var $controls = $table.find('th');
|
||||
var rows = $tbody.find('tr').toArray();
|
||||
|
||||
$controls.on('click', function() {
|
||||
var $header = $(this);
|
||||
var order = $header.data('sort');
|
||||
var column;
|
||||
|
||||
if ($header.is('.ascending') || $header.is('.descending')) {
|
||||
$header.toggleClass('ascending descending');
|
||||
$tbody.append(rows.reverse());
|
||||
} else {
|
||||
$header.addClass('ascending');
|
||||
$header.siblings().removeClass('ascending descending');
|
||||
if (compare.hasOwnProperty(order)) {
|
||||
column = $controls.index(this);
|
||||
|
||||
rows.sort(function(a, b) {
|
||||
a = $(a).find('td').eq(column).text();
|
||||
b = $(b).find('td').eq(column).text();
|
||||
return compare[order](a, b);
|
||||
});
|
||||
|
||||
$tbody.append(rows);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -51,6 +51,20 @@ class LBRY_Admin
|
|||
}
|
||||
}
|
||||
add_action( 'admin_enqueue_scripts', 'load_admin_stylesheet' );
|
||||
|
||||
// Admin channel sort JS enqueue
|
||||
function load_admin_script() {
|
||||
if ( ( $_GET['page'] == 'lbrypress') && ( $_GET['tab'] == 'channels' ) ) {
|
||||
wp_enqueue_script(
|
||||
'lbry-table-sort',
|
||||
plugins_url( '/admin/js/table-sort.js', LBRY_PLUGIN_FILE ),
|
||||
array('jquery'),
|
||||
LBRY_VERSION,
|
||||
true
|
||||
);
|
||||
}
|
||||
}
|
||||
add_action( 'admin_enqueue_scripts', 'load_admin_script' );
|
||||
|
||||
// Admin Error Notices
|
||||
function lbry_plugin_not_configured_notice() {
|
||||
|
|
@ -258,10 +272,12 @@ class LBRY_Admin
|
|||
<table class="lbry-channel-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Channel</th>
|
||||
<th>LBRY URL</th>
|
||||
<th>Posts</th>
|
||||
<th colspan="2">Supports</th>
|
||||
<th data-sort="channel">Channel</th>
|
||||
<th data-sort="lbryurl">LBRY URL</th>
|
||||
<th data-sort="claim">Claim ID</th>
|
||||
<th data-sort="date">~ Date Created</th>
|
||||
<th data-sort="posts">Posts</th>
|
||||
<th data-sort="support" colspan="2">Supports</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -272,6 +288,8 @@ class LBRY_Admin
|
|||
if ( $lbry_url ) {
|
||||
$open_url = str_replace( 'lbry://', 'open.lbry.com/', $lbry_url );
|
||||
}
|
||||
$timestamp = $results->items[0]->meta->creation_timestamp;
|
||||
$created_date = date( 'm-d-y', $timestamp );
|
||||
$support_amount = $results->items[0]->meta->support_amount;
|
||||
$claims_published = $results->items[0]->meta->claims_in_channel;
|
||||
if ( ( $support_amount < 0.001 ) ) {
|
||||
|
|
@ -289,14 +307,16 @@ class LBRY_Admin
|
|||
<tr>
|
||||
<td><a href="<?php echo esc_url( $open_url, 'lbrypress' ); ?>"><?php esc_html_e( $channel->name, 'lbrypress' ); ?></a></td>
|
||||
<td><?php esc_html_e( $lbry_url, 'lbrypress' ); ?></td>
|
||||
<td><?php esc_html_e( $claim_id, 'lbrypress' ); ?></td>
|
||||
<td><?php esc_html_e( $created_date, 'lbrypress' ); ?></td>
|
||||
<td><?php esc_html_e( $claims_published, 'lbrypress' ); ?></td>
|
||||
<td><span title="Initial Bid Amount: <?php esc_html_e( $init_bid, 'lbrypress' ); ?>"><img src="<?php echo esc_url( plugin_dir_url( LBRY_PLUGIN_FILE ) . 'admin/images/lbc.png' ) ?>" class="icon icon-lbc bid-icon-lbc channel-bid-icon-lbc"><?php esc_html_e( $support_amount, 'lbrypress' ); ?></span></td>
|
||||
<td><a href="<?php echo admin_url( add_query_arg( array( 'page' => 'lbrypress', 'tab' => 'supports', 'claim_id' => $claim_id, 'current_support' => $support_amount, 'init_bid' => $init_bid ), 'admin.php' ) ); ?>">Add</a></td>
|
||||
<td><a href="<?php echo admin_url( add_query_arg( array( 'page' => 'lbrypress', 'tab' => 'supports', 'claim_id' => $claim_id, 'current_support' => $support_amount, 'init_bid' => $init_bid, 'lbry_url' => urlencode($lbry_url), 'return_page' => 'channels' ), 'admin.php' ) ); ?>">Add</a></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr><th colspan="5">LBRYPress</th></tr>
|
||||
<tr><th colspan="7">LBRYPress</th></tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<?php } else { ?>
|
||||
|
|
|
|||
Loading…
Reference in a new issue