<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><style type="text/css"><!--
#msg dl { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fc0 solid; padding: 6px; }
#msg ul, pre { overflow: auto; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<title>[15507] trunk: refactor admin-table.js code</title>
</head>
<body>
<div id="msg">
<dl>
<dt>Revision</dt> <dd><a href="http://trac.wordpress.org/changeset/15507">15507</a></dd>
<dt>Author</dt> <dd>scribu</dd>
<dt>Date</dt> <dd>2010-08-18 21:02:24 +0000 (Wed, 18 Aug 2010)</dd>
</dl>
<h3>Log Message</h3>
<pre>refactor admin-table.js code</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadminjsadmintabledevjs">trunk/wp-admin/js/admin-table.dev.js</a></li>
<li><a href="#trunkwpadminjsadmintablejs">trunk/wp-admin/js/admin-table.js</a></li>
<li><a href="#trunkwpincludesscriptloaderphp">trunk/wp-includes/script-loader.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadminjsadmintabledevjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/admin-table.dev.js (15506 => 15507)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/admin-table.dev.js 2010-08-18 16:58:55 UTC (rev 15506)
+++ trunk/wp-admin/js/admin-table.dev.js 2010-08-18 21:02:24 UTC (rev 15507)
</span><span class="lines">@@ -1,52 +1,58 @@
</span><span class="cx"> jQuery(document).ready(function($) {
</span><del>- $('form').each(function() {
- this.reset();
- });
</del><span class="cx">
</span><del>- if ( '' == $.query.GET('paged') )
- $.query.SET('paged', 1);
</del><ins>+var adminTable = {
</ins><span class="cx">
</span><del>- var total_pages;
- var set_total_pages = function() {
- total_pages = parseInt($('.total-pages').eq(0).text());
- }
</del><ins>+ init: function() {
+ this.loading = false;
</ins><span class="cx">
</span><del>- set_total_pages();
</del><ins>+ $('form').each(function() {
+ this.reset();
+ });
</ins><span class="cx">
</span><del>- var loading = false,
- $tbody = $('#the-list, #the-comment-list'),
- $overlay = $('<div id="loading-items>')
</del><ins>+ if ( '' == $.query.GET('paged') )
+ $.query.SET('paged', 1);
+ this.set_total_pages();
+
+ this.$tbody = $('#the-list, #the-comment-list');
+
+ this.$overlay = $('<div id="loading-items>')
</ins><span class="cx"> .html(adminTableL10n.loading)
</span><span class="cx"> .hide()
</span><span class="cx"> .prependTo($('body'));
</span><ins>+ },
</ins><span class="cx">
</span><del>- var show_overlay = function() {
- loading = true;
</del><ins>+ // paging
+ set_total_pages: function() {
+ this.total_pages = parseInt($('.total-pages').eq(0).text());
+ },
</ins><span class="cx">
</span><del>- $('.error.ajax').remove();
</del><ins>+ get_total_pages: function() {
+ return this.total_pages;
+ },
</ins><span class="cx">
</span><del>- $overlay
- .css({
- width: $tbody.width() + 'px',
- height: $tbody.height() - 20 + 'px'
- })
- .css($tbody.offset())
- .show();
- }
</del><ins>+ change_page: function(paged) {
+ if ( paged < 1 || paged >this.total_pages )
+ return false;
</ins><span class="cx">
</span><del>- var hide_overlay = function() {
- loading = false;
- $overlay.hide();
- }
</del><ins>+ this.update_rows({'paged': paged});
+ },
</ins><span class="cx">
</span><del>- var handle_error = function() {
- hide_overlay();
</del><ins>+ // searching
+ change_search: function(s) {
+ this.update_rows({'s': s}, true, function() {
+ $('h2 .subtitle').remove();
</ins><span class="cx">
</span><del>- $('h2').after('<div class="error ajax below-h2"><p>' + adminTableL10n.error + '</p></div>');
- }
</del><ins>+ if ( s )
+ $('h2').eq(0).append($('<span class="subtitle">').html(adminTableL10n.search.replace('%s', this.htmlencode(s))));
+ });
+ },
</ins><span class="cx">
</span><del>- var update_rows = function(args, reset_paging, callback) {
- if ( loading )
</del><ins>+ htmlencode: function(value) {
+ return $('<div/>').text(value).html();
+ },
+
+ update_rows: function(args, reset_paging, callback) {
+ if ( this.loading )
</ins><span class="cx"> return false;
</span><span class="cx">
</span><span class="cx"> var different = false;
</span><span class="lines">@@ -57,11 +63,11 @@
</span><span class="cx"> different = true;
</span><span class="cx"> }
</span><span class="cx"> });
</span><del>-
</del><ins>+
</ins><span class="cx"> if ( !different )
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- show_overlay();
</del><ins>+ this.show_overlay();
</ins><span class="cx">
</span><span class="cx"> if ( reset_paging )
</span><span class="cx"> $.query.SET('paged', 1);
</span><span class="lines">@@ -71,44 +77,71 @@
</span><span class="cx"> data['action'] = 'fetch-list';
</span><span class="cx"> data['list_args'] = list_args;
</span><span class="cx">
</span><ins>+ this._callback = callback;
+
</ins><span class="cx"> $.ajax({
</span><span class="cx"> url: ajaxurl,
</span><span class="cx"> global: false,
</span><span class="cx"> dataType: 'json',
</span><span class="cx"> data: data,
</span><del>- success: function(response) {
- if ( 'object' != typeof response ) {
- handle_error();
- } else {
- hide_overlay();
</del><ins>+ success: $.proxy(this, 'handle_success'),
+ error: $.proxy(this, 'handle_error')
+ });
</ins><span class="cx">
</span><del>- $tbody.html(response.rows);
</del><ins>+ return true;
+ },
</ins><span class="cx">
</span><del>- $('.displaying-num').html(response.total_items);
</del><ins>+ handle_success: function(response) {
+ if ( 'object' != typeof response ) {
+ this.handle_error();
+ } else {
+ this.hide_overlay();
</ins><span class="cx">
</span><del>- $('.total-pages').html(response.total_pages);
- set_total_pages();
</del><ins>+ this.$tbody.html(response.rows);
</ins><span class="cx">
</span><del>- $('.current-page').val($.query.GET('paged'));
</del><ins>+ $('.displaying-num').html(response.total_items);
</ins><span class="cx">
</span><del>- if ( callback )
- callback();
- }
- },
- error: handle_error
- });
</del><ins>+ $('.total-pages').html(response.total_pages);
+ this.set_total_pages();
</ins><span class="cx">
</span><del>- return true;
- }
</del><ins>+ $('.current-page').val($.query.GET('paged'));
</ins><span class="cx">
</span><del>- // paging
- var change_page = function(paged) {
- if ( paged < 1 || paged > total_pages )
- return false;
</del><ins>+ if ( this._callback )
+ this._callback();
+ }
+ },
</ins><span class="cx">
</span><del>- update_rows({'paged': paged});
</del><ins>+ handle_error: function() {
+ this.hide_overlay();
+
+ $('h2').after('<div class="error ajax below-h2"><p>' + adminTableL10n.error + '</p></div>');
+ },
+
+ show_overlay: function() {
+ this.loading = true;
+
+ $('.error.ajax').remove();
+
+ this.$overlay
+ .css({
+ width: this.$tbody.width() + 'px',
+ height: this.$tbody.height() - 20 + 'px'
+ })
+ .css(this.$tbody.offset())
+ .show();
+ },
+
+ hide_overlay: function() {
+ this.loading = false;
+ this.$overlay.hide();
</ins><span class="cx"> }
</span><ins>+}
</ins><span class="cx">
</span><ins>+adminTable.init();
+
+// Ajaxify various UI elements
+
+ // pagination
</ins><span class="cx"> $('.tablenav-pages a').click(function() {
</span><span class="cx"> var paged = $.query.GET('paged');
</span><span class="cx">
</span><span class="lines">@@ -123,11 +156,11 @@
</span><span class="cx"> paged += 1;
</span><span class="cx"> break;
</span><span class="cx"> case 'last-page':
</span><del>- paged = total_pages;
</del><ins>+ paged = adminTable.get_total_pages();
</ins><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- change_page(paged);
</del><ins>+ adminTable.change_page(paged);
</ins><span class="cx">
</span><span class="cx"> return false;
</span><span class="cx"> });
</span><span class="lines">@@ -136,12 +169,12 @@
</span><span class="cx"> if ( 13 != e.keyCode )
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- change_page(parseInt($(this).val()));
</del><ins>+ adminTable.change_page(parseInt($(this).val()));
</ins><span class="cx">
</span><span class="cx"> return false;
</span><span class="cx"> });
</span><span class="cx">
</span><del>- // sorting
</del><ins>+ // sortable columns
</ins><span class="cx"> $('th a').click(function() {
</span><span class="cx"> var orderby = $.query.GET('orderby'),
</span><span class="cx"> order = $.query.GET('order'),
</span><span class="lines">@@ -167,27 +200,14 @@
</span><span class="cx"> $th.removeClass('sorted-desc').addClass('sorted-asc');
</span><span class="cx"> }
</span><span class="cx">
</span><del>- update_rows({'orderby': orderby, 'order': order}, true);
</del><ins>+ adminTable.update_rows({'orderby': orderby, 'order': order}, true);
</ins><span class="cx">
</span><span class="cx"> return false;
</span><span class="cx"> });
</span><span class="cx">
</span><del>- // searching
- var htmlencode = function(value) {
- return $('<div/>').text(value).html();
- }
-
- var change_search = function(s) {
- update_rows({'s': s}, true, function() {
- $('h2 .subtitle').remove();
-
- if ( s )
- $('h2').eq(0).append($('<span class="subtitle">').html(adminTableL10n.search.replace('%s', htmlencode(s))));
- });
- }
-
</del><ins>+ // searchbox
</ins><span class="cx"> $('.search-box :submit').click(function() {
</span><del>- change_search($(this).parent('.search-box').find(':text').val());
</del><ins>+ adminTable.change_search($(this).parent('.search-box').find(':text').val());
</ins><span class="cx">
</span><span class="cx"> return false;
</span><span class="cx"> });
</span><span class="lines">@@ -196,20 +216,22 @@
</span><span class="cx"> if ( 13 != e.keyCode )
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- change_search($(this).val());
</del><ins>+ adminTable.change_search($(this).val());
</ins><span class="cx">
</span><span class="cx"> return false;
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> // tablenav dropdowns
</span><span class="cx"> $('#post-query-submit').click(function() {
</span><del>- var $this = $(this), key, val, args = {};
</del><ins>+ var key, val, args = {};
</ins><span class="cx">
</span><del>- $this.parents('.actions').find('select[name!="action"]').each(function() {
- args[$this.attr('name')] = $this.val();
</del><ins>+ $(this).parents('.actions').find('select[name!="action"]').each(function() {
+ var $el = $(this);
+
+ args[$el.attr('name')] = $el.val();
</ins><span class="cx"> });
</span><span class="cx">
</span><del>- update_rows(args, true);
</del><ins>+ adminTable.update_rows(args, true);
</ins><span class="cx">
</span><span class="cx"> return false;
</span><span class="cx"> });
</span><span class="lines">@@ -218,26 +240,12 @@
</span><span class="cx"> $('.view-switch a').click(function() {
</span><span class="cx"> var $this = $(this);
</span><span class="cx">
</span><del>- update_rows({'mode': $.query.load($this.attr('href')).get('mode')}, false, function() {
</del><ins>+ adminTable.update_rows({'mode': $.query.load($this.attr('href')).get('mode')}, false, function() {
</ins><span class="cx"> $('.view-switch .current').removeClass('current');
</span><span class="cx"> $this.addClass('current');
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> return false;
</span><span class="cx"> });
</span><del>-
-/*
- // problem: when switching from one to the other, columns are not always the same
- $('.subsubsub a').click(function() {
- var $this = $(this);
-
- update_rows($.query.load($this.attr('href')).get(), true, function() {
- $('.subsubsub .current').removeClass('current');
- $this.addClass('current');
- });
-
- return false;
- });
-/**/
</del><span class="cx"> });
</span><span class="cx">
</span></span></pre></div>
<a id="trunkwpadminjsadmintablejs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/admin-table.js (15506 => 15507)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/admin-table.js 2010-08-18 16:58:55 UTC (rev 15506)
+++ trunk/wp-admin/js/admin-table.js 2010-08-18 21:02:24 UTC (rev 15507)
</span><span class="lines">@@ -1 +1 @@
</span><del>-jQuery(document).ready(function(g){g("form").each(function(){this.reset()});if(""==g.query.GET("paged")){g.query.SET("paged",1)}var l;var b=function(){l=parseInt(g(".total-pages").eq(0).text())};b();var c=false,f=g("#the-list, #the-comment-list"),m=g('<div id="loading-items>').html(adminTableL10n.loading).hide().prependTo(g("body"));var a=function(){c=true;g(".error.ajax").remove();m.css({width:f.width()+"px",height:f.height()-20+"px"}).css(f.offset()).show()};var i=function(){c=false;m.hide()};var e=function(){i();g("h2").after('<div class="error ajax below-h2"><p>'+adminTableL10n.error+"</p></div>")};var k=function(o,n,r){if(c){return false}var q=false;g.each(o,function(s,t){if(t!=g.query.GET(s)){g.query.SET(s,t);q=true}});if(!q){return false}a();if(n){g.query.SET("paged",1)}var p=g.query.get();p.action="fetch-list";p.list_args=list_args;g.ajax({url:ajaxurl,global:false,dataType:"json",data:p,success:function(s){if("object"!=typeof s){e()}else{i();f.html(s.rows);g(".displaying-num").html(s.total_items);g(".total-pages").html(s.total_pages);b();g(".current-page").val(g.query.GET("paged"));if(r){r()}}},error:e});return true};var d=function(n){if(n<1||n>l){return false}k({paged:n})};g(".tablenav-pages a").click(function(){var n=g.query.GET("paged");switch(g(this).attr("class")){case"first-page":n=1;break;case"prev-page":n-=1;break;case"next-page":n+=1;break;case"last-page":n=l;break}d(n);return false});g(".current-page").keypress(function(n){if(13!=n.keyCode){return}d(parseInt(g(this).val()));return false});g("th a").click(function(){var p=g.query.GET("orderby"),n=g.query.GET("order"),o=g(this).parent("th");if(o.hasClass("sortable")){p=g.query.load(g(this).attr("href")).get("orderby");n="asc";g("th.sorted-desc, th.sorted-asc").removeClass("sorted-asc").removeClass("sorted-desc").addClass("sortable");o.removeClass("sortable").addClass("sorted-asc")}else{if(o.hasClass("sorted-asc")){n="desc";o.removeClass("sorted-asc").addClass("sorted-desc")}else{if(o.hasClass("sorted-desc")){n="asc";o.removeClass("sorted-desc").addClass("sorted-asc")}}}k({orderby:p,order:n},true);return false});var h=function(n){return g("<div/>").text(n).html()};var j=function(n){k({s:n},true,function(){g("h2 .subtitle").remove();if(n){g("h2").eq(0).append(g('<span class="subtitle">').html(adminTableL10n.search.replace("%s",h(n))))}})};g(".search-box :submit").click(function(){j(g(this).parent(".search-box").find(":text").val());return false});g(".search-box :text").keypress(function(n){if(13!=n.keyCode){return}j(g(this).val());return false});g("#post-query-submit").click(function(){var p=g(this),o,q,n={};p.parents(".actions").find('select[name!="action"]').each(function(){n[p.attr("name")]=p.val()});k(n,true);return false});g(".view-switch a").click(function(){var n=g(this);k({mode:g.query.load(n.attr("href")).get("mode")},false,function(){g(".view-switch .current").removeClass("current");n.addClass("current")});return false})});
</del><span class="cx">\ No newline at end of file
</span><ins>+jQuery(document).ready(function(b){var a={init:function(){this.loading=false;b("form").each(function(){this.reset()});if(""==b.query.GET("paged")){b.query.SET("paged",1)}this.set_total_pages();this.$tbody=b("#the-list, #the-comment-list");this.$overlay=b('<div id="loading-items>').html(adminTableL10n.loading).hide().prependTo(b("body"))},set_total_pages:function(){this.total_pages=parseInt(b(".total-pages").eq(0).text())},get_total_pages:function(){return this.total_pages},change_page:function(c){if(c<1||c>this.total_pages){return false}this.update_rows({paged:c})},change_search:function(c){this.update_rows({s:c},true,function(){b("h2 .subtitle").remove();if(c){b("h2").eq(0).append(b('<span class="subtitle">').html(adminTableL10n.search.replace("%s",this.htmlencode(c))))}})},htmlencode:function(c){return b("<div/>").text(c).html()},update_rows:function(d,c,g){if(this.loading){return false}var f=false;b.each(d,function(h,i){if(i!=b.query.GET(h)){b.query.SET(h,i);f=true}});if(!f){return false}this.show_overlay();if(c){b.query.SET("paged",1)}var e=b.query.get();e.action="fetch-list";e.list_args=list_args;this._callback=g;b.ajax({url:ajaxurl,global:false,dataType:"json",data:e,success:b.proxy(this,"handle_success"),error:b.proxy(this,"handle_error")});return true},handle_success:function(c){if("object"!=typeof c){this.handle_error()}else{this.hide_overlay();this.$tbody.html(c.rows);b(".displaying-num").html(c.total_items);b(".total-pages").html(c.total_pages);this.set_total_pages();b(".current-page").val(b.query.GET("paged"));if(this._callback){this._callback()}}},handle_error:function(){this.hide_overlay();b("h2").after('<div class="error ajax below-h2"><p>'+adminTableL10n.error+"</p></div>")},show_overlay:function(){this.loading=true;b(".error.ajax").remove();this.$overlay.css({width:this.$tbody.width()+"px",height:this.$tbody.height()-20+"px"}).css(this.$tbody.offset()).show()},hide_overlay:function(){this.loading=false;this.$overlay.hide()}};a.init();b(".tablenav-pages a").click(function(){var c=b.query.GET("paged");switch(b(this).attr("class")){case"first-page":c=1;break;case"prev-page":c-=1;break;case"next-page":c+=1;break;case"last-page":c=a.get_total_pages();break}a.change_page(c);return false});b(".current-page").keypress(function(c){if(13!=c.keyCode){return}a.change_page(parseInt(b(this).val()));return false});b("th a").click(function(){var e=b.query.GET("orderby"),c=b.query.GET("order"),d=b(this).parent("th");if(d.hasClass("sortable")){e=b.query.load(b(this).attr("href")).get("orderby");c="asc";b("th.sorted-desc, th.sorted-asc").removeClass("sorted-asc").removeClass("sorted-desc").addClass("sortable");d.removeClass("sortable").addClass("sorted-asc")}else{if(d.hasClass("sorted-asc")){c="desc";d.removeClass("sorted-asc").addClass("sorted-desc")}else{if(d.hasClass("sorted-desc")){c="asc";d.removeClass("sorted-desc").addClass("sorted-asc")}}}a.update_rows({orderby:e,order:c},true);return false});b(".search-box :submit").click(function(){a.change_search(b(this).parent(".search-box").find(":text").val());return false});b(".search-box :text").keypress(function(c){if(13!=c.keyCode){return}a.change_search(b(this).val());return false});b("#post-query-submit").click(function(){var d,e,c={};b(this).parents(".actions").find('select[name!="action"]').each(function(){var f=b(this);c[f.attr("name")]=f.val()});a.update_rows(c,true);return false});b(".view-switch a").click(function(){var c=b(this);a.update_rows({mode:b.query.load(c.attr("href")).get("mode")},false,function(){b(".view-switch .current").removeClass("current");c.addClass("current")});return false})});
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpincludesscriptloaderphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/script-loader.php (15506 => 15507)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/script-loader.php 2010-08-18 16:58:55 UTC (rev 15506)
+++ trunk/wp-includes/script-loader.php 2010-08-18 21:02:24 UTC (rev 15507)
</span><span class="lines">@@ -338,7 +338,7 @@
</span><span class="cx"> $scripts->add( 'theme-preview', "/wp-admin/js/theme-preview$suffix.js", array( 'thickbox', 'jquery' ), '20100407' );
</span><span class="cx"> $scripts->add_data( 'theme-preview', 'group', 1 );
</span><span class="cx">
</span><del>- $scripts->add( 'admin-table', "/wp-admin/js/admin-table$suffix.js", array( 'jquery', 'jquery-query' ), '20100812' );
</del><ins>+ $scripts->add( 'admin-table', "/wp-admin/js/admin-table$suffix.js", array( 'jquery', 'jquery-query' ), '20100818' );
</ins><span class="cx"> $scripts->add_data( 'admin-table', 'group', 1 );
</span><span class="cx"> $scripts->localize( 'admin-table', 'adminTableL10n', array(
</span><span class="cx"> 'loading' => __('Loading...'),
</span></span></pre>
</div>
</div>
</body>
</html>