<!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" />
<title>[24609] trunk/wp-admin/js/revisions.js: Revisions: Move data management into the frame state.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { 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 #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#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>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/24609">24609</a></dd>
<dt>Author</dt> <dd>koopersmith</dd>
<dt>Date</dt> <dd>2013-07-09 08:50:32 +0000 (Tue, 09 Jul 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>Revisions: Move data management into the frame state. See <a href="http://core.trac.wordpress.org/ticket/24425">#24425</a>.
This helps to solidify the separation between data and UI. We track the diffId internally now, as the property itself was never referenced, and was always derived from the 'from' and 'to' models. This also sets us up for better request debouncing and diff management.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadminjsrevisionsjs">trunk/wp-admin/js/revisions.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadminjsrevisionsjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/revisions.js (24608 => 24609)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/revisions.js 2013-07-09 08:20:12 UTC (rev 24608)
+++ trunk/wp-admin/js/revisions.js 2013-07-09 08:50:32 UTC (rev 24609)
</span><span class="lines">@@ -209,8 +209,26 @@
</span><span class="cx"> // will only be updated once. This is because Backbone updates all of
</span><span class="cx"> // the changed attributes in `set`, and then fires the `change` events.
</span><span class="cx"> updateDiff: function() {
</span><del>- var from = this.get('from');
- this.set( 'diffId', (from ? from.id : '0' ) + ':' + this.get('to').id );
</del><ins>+ var from, to, diffId;
+
+ from = this.get('from');
+ to = this.get('to');
+ diffId = ( from ? from.id : 0 ) + ':' + to.id;
+
+ // Check if we're actually changing the diff id.
+ if ( this._diffId === diffId )
+ return;
+
+ this._diffId = diffId;
+ this.trigger( 'update:revisions', from, to );
+
+ this.diffs.ensure( diffId, this ).done( function( diff ) {
+ // Check if the current diff changed while the request was in flight.
+ if ( this._diffId !== diff.id )
+ return;
+
+ this.trigger( 'update:diff', diff );
+ });
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -231,7 +249,7 @@
</span><span class="cx"> revisions: this.collection
</span><span class="cx"> });
</span><span class="cx">
</span><del>- this.listenTo( this.model, 'change:diffId', this.updateDiff );
</del><ins>+ this.listenTo( this.model, 'update:diff', this.renderDiff );
</ins><span class="cx"> this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
</span><span class="cx">
</span><span class="cx"> this.views.set( '.revisions-control-frame', new revisions.view.Controls({
</span><span class="lines">@@ -264,17 +282,10 @@
</span><span class="cx"> return this;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- updateDiff: function() {
- this.model.diffs.ensure( this.model.get('diffId'), this ).done( function( diff ) {
- if ( this.model.get('diffId') !== diff.id )
- return;
-
- this.views.set( '.revisions-diff-frame', new revisions.view.Diff({
- model: diff
- }) );
-
- this.model.trigger('renderDiff');
- });
</del><ins>+ renderDiff: function( diff ) {
+ this.views.set( '.revisions-diff-frame', new revisions.view.Diff({
+ model: diff
+ }) );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> updateCompareTwoMode: function() {
</span><span class="lines">@@ -364,7 +375,7 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> initialize: function() {
</span><del>- this.listenTo( this.model, 'change:diffId', this.updateMeta );
</del><ins>+ this.listenTo( this.model, 'update:revisions', this.updateMeta );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> restoreRevision: function() {
</span><span class="lines">@@ -372,10 +383,10 @@
</span><span class="cx"> document.location = restoreUrl;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- updateMeta: function() {
</del><ins>+ updateMeta: function( from, to ) {
</ins><span class="cx"> this.$el.html( this.template( this.model.toJSON() ) );
</span><span class="cx">
</span><del>- $('#restore-revision').prop( 'disabled', this.model.get('to').attributes.current );
</del><ins>+ $('#restore-revision').prop( 'disabled', to.attributes.current );
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -481,7 +492,7 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> ready: function() {
</span><del>- this.listenTo( this.model, 'change:diffId', this.disabledButtonCheck );
</del><ins>+ this.listenTo( this.model, 'update:revisions', this.disabledButtonCheck );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> // Go to a specific modelindex, taking into account RTL mode.
</span><span class="lines">@@ -582,8 +593,8 @@
</span><span class="cx"> this.updateSliderSettings();
</span><span class="cx"> }, this );
</span><span class="cx">
</span><del>- // Listen for changes in the diffId
- this.listenTo( this.model, 'change:diffId', this.diffIdChanged );
</del><ins>+ // Listen for changes to the revisions
+ this.listenTo( this.model, 'update:revisions', this.updateRevisions );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> mousemove: function( e ) {
</span><span class="lines">@@ -672,15 +683,15 @@
</span><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><del>- diffIdChanged: function() {
- // Reset the view settings when diffId is changed
</del><ins>+ updateRevisions: function( from, to ) {
+ // Update the view settings when the revisions have changed.
</ins><span class="cx"> if ( this.model.get('compareTwoMode') ) {
</span><span class="cx"> this.settings.set({ 'values': [
</span><del>- this.model.revisions.indexOf( this.model.get('from') ),
- this.model.revisions.indexOf( this.model.get('to') )
</del><ins>+ this.model.revisions.indexOf( from ),
+ this.model.revisions.indexOf( to )
</ins><span class="cx"> ] });
</span><span class="cx"> } else {
</span><del>- this.settings.set({ 'value': this.model.revisions.indexOf( this.model.get('to') ) });
</del><ins>+ this.settings.set({ 'value': this.model.revisions.indexOf( to ) });
</ins><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>