JS optimization: move creation of inline reply placeholders to server-side so we don't have to create them client-side (which causes reflows and takes about 25-30ms on my test system)

Using live instead of bind for the event handling, we don't have to play any games on the ones that we do add at runtime. Yay!
This commit is contained in:
Brion Vibber 2011-03-11 15:20:20 -08:00
parent 10e5cb482e
commit 2bccd18d9a
2 changed files with 56 additions and 30 deletions

View File

@ -627,26 +627,23 @@ var SN = { // StatusNet
'<input class="placeholder">' +
'</li>');
placeholder.find('input')
.val(SN.msg('reply_placeholder'))
.focus(function() {
SN.U.NoticeInlineReplyTrigger(notice);
return false;
});
.val(SN.msg('reply_placeholder'));
list.append(placeholder);
},
/**
* Setup function -- DOES NOT apply immediately.
*
* Sets up event handlers for favor/disfavor forms to submit via XHR.
* Sets up event handlers for inline reply mini-form placeholders.
* Uses 'live' rather than 'bind', so applies to future as well as present items.
*/
NoticeInlineReplySetup: function() {
$('.threaded-replies').each(function() {
var list = $(this);
var notice = list.closest('.notice');
SN.U.NoticeInlineReplyPlaceholder(notice);
});
$('li.notice-reply-placeholder input')
.live('focus', function() {
var notice = $(this).closest('li.notice');
SN.U.NoticeInlineReplyTrigger(notice);
return false;
});
},
/**

View File

@ -191,6 +191,12 @@ class ThreadedNoticeListItem extends NoticeListItem
$item = new ThreadedNoticeListSubItem($notice, $this->out);
$item->show();
}
// @fixme do a proper can-post check that's consistent
// with the JS side
if (common_current_user()) {
$item = new ThreadedNoticeListReplyItem($notice, $this->out);
$item->show();
}
$this->out->elementEnd('ul');
}
}
@ -253,10 +259,7 @@ class ThreadedNoticeListMoreItem extends NoticeListItem
function showStart()
{
if (Event::handle('StartOpenNoticeListItemElement', array($this))) {
$id = (empty($this->repeat)) ? $this->notice->id : $this->repeat->id;
$this->out->elementStart('li', array('class' => 'notice-reply-comments'));
}
$this->out->elementStart('li', array('class' => 'notice-reply-comments'));
}
function showMiniForm()
@ -270,21 +273,47 @@ class ThreadedNoticeListMoreItem extends NoticeListItem
$msg = sprintf(_m('Show %d reply', 'Show all %d replies', $n), $n);
$this->out->element('a', array('href' => $url), $msg);
}
}
// @fixme replace this with an ajax-friendly form pair?
/*
$this->out->elementStart('form',
array('id' => $id,
'class' => 'replyform',
'method' => 'post',
'action' => $url));
$this->out->hidden('token', common_session_token());
$this->out->hidden("$id-inreplyto", $replyToId, "inreplyto");
$this->out->element('textarea', array('name' => 'status_textarea'));
$this->out->elementStart('div', array('class' => 'controls'));
$this->out->submit("$id-submit", _m('Send reply'));
$this->out->elementEnd('div');
$this->out->elementEnd('form');
*/
/**
* Placeholder for reply form...
* Same as get added at runtime via SN.U.NoticeInlineReplyPlaceholder
*/
class ThreadedNoticeListReplyItem extends NoticeListItem
{
/**
* recipe function for displaying a single notice.
*
* This uses all the other methods to correctly display a notice. Override
* it or one of the others to fine-tune the output.
*
* @return void
*/
function show()
{
$this->showStart();
$this->showMiniForm();
$this->showEnd();
}
/**
* start a single notice.
*
* @return void
*/
function showStart()
{
$this->out->elementStart('li', array('class' => 'notice-reply-placeholder'));
}
function showMiniForm()
{
$this->out->element('input', array('class' => 'placeholder',
'value' => _('Write a reply...')));
}
}