caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout optimizations

Browse Source
This commit is contained in:
benweet 2014-04-16 19:13:17 +01:00
parent 6b5014b6f7
commit bbae356537
1 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
public/res/layout.js
View File

@ -27,7 +27,16 @@ define([
var wrapperL1, wrapperL2, wrapperL3; var wrapperL1, wrapperL2, wrapperL3;
var navbar, menuPanel, documentPanel, editor, previewPanel, previewContainer, navbarToggler, previewToggler, previewResizer; var navbar, menuPanel, documentPanel, editor, previewPanel, previewContainer, navbarToggler, previewToggler, previewResizer;
var animate = false; var animate = false;
function startAnimation() {
animate = true;
wrapperL1.$elt.addClass('layout-animate');
}
function endAnimation() {
animate = false;
wrapperL1.$elt.removeClass('layout-animate');
}
function DomObject(selector) { function DomObject(selector) {
this.selector = selector; this.selector = selector;
@ -37,16 +46,6 @@ define([
var laterCssTimeoutId; var laterCssTimeoutId;
var laterCssQueue = []; var laterCssQueue = [];
function applyCssLater() {
if(laterCssQueue.length === 0) {
wrapperL1.$elt.removeClass('layout-animate');
animate = false;
return onResize();
}
laterCssQueue.shift()();
applyCssLater();
}
DomObject.prototype.applyCss = function() { DomObject.prototype.applyCss = function() {
// Top/left // Top/left
@ -62,7 +61,7 @@ define([
this.elt.style.transform = 'translate(' + this.x + 'px, ' + this.y + 'px)'; this.elt.style.transform = 'translate(' + this.x + 'px, ' + this.y + 'px)';
} }
// Width (defer if new width is smaller) // Width (deferred when animate if new width is smaller)
if(animate && this.width < this.oldWidth) { if(animate && this.width < this.oldWidth) {
laterCssQueue.push(_.bind(function() { laterCssQueue.push(_.bind(function() {
this.elt.style.width = this.width + 'px'; this.elt.style.width = this.width + 'px';
@ -73,7 +72,7 @@ define([
} }
this.oldWidth = this.width; this.oldWidth = this.width;
// Height (defer if new height is smaller) // Height (deferred when animate if new height is smaller)
if(animate && this.height < this.oldHeight) { if(animate && this.height < this.oldHeight) {
laterCssQueue.push(_.bind(function() { laterCssQueue.push(_.bind(function() {
this.elt.style.height = this.height + 'px'; this.elt.style.height = this.height + 'px';
@ -85,7 +84,14 @@ define([
this.oldHeight = this.height; this.oldHeight = this.height;
clearTimeout(laterCssTimeoutId); clearTimeout(laterCssTimeoutId);
laterCssTimeoutId = setTimeout(applyCssLater, 350); laterCssTimeoutId = setTimeout(function() {
laterCssQueue.forEach(function(callback) {
callback();
});
endAnimation();
laterCssQueue.length !== 0 && onResize();
laterCssQueue = [];
}, 350);
}; };
DomObject.prototype.createToggler = function(backdrop, onToggle) { DomObject.prototype.createToggler = function(backdrop, onToggle) {
@ -114,8 +120,7 @@ define([
onToggle && onToggle(this.isOpen); onToggle && onToggle(this.isOpen);
}, this)); }, this));
} }
animate = true; startAnimation();
wrapperL1.$elt.addClass('layout-animate');
resizeAll(); resizeAll();
}; };
}; };