javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

reduce header title DOM read/writes

Browse Source
This commit is contained in:
Adam Bradley
2013-11-27 11:49:19 -06:00
parent 636fc8d5d5
commit fc909e1612
4 changed files with 43 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/css/ionic.css vendored
View File

@@ -2766,7 +2766,7 @@ a.subdued {
left: 0;
z-index: 0;
overflow: hidden;
margin: 0;
margin: 0 10px;
min-width: 30px;
text-align: center;
text-overflow: ellipsis;
@@ -2775,6 +2775,8 @@ a.subdued {
line-height: 44px; }
.bar .title.title-left {
text-align: left; }
.bar .title.title-right {
text-align: right; }
.bar .title a {
color: inherit; }
.bar .button {

40
dist/js/ionic.js vendored
View File

@@ -2882,17 +2882,8 @@ window.ionic = {
var _this = this;
window.rAF(ionic.proxy(function() {
var i, c, childSize, childStyle;
var children = this.el.children;
var i, c, childSize;
var childNodes = this.el.childNodes;
var styles = window.getComputedStyle(this.el, null);
// Get the padding of the header for calculations
var paddingLeft = parseFloat(styles['paddingLeft']);
var paddingRight = parseFloat(styles['paddingRight']);
// Get the full width of the header
var headerWidth = this.el.offsetWidth;
// Find the title element
var title = this.el.querySelector('.title');
@@ -2902,7 +2893,7 @@ window.ionic = {
var leftWidth = 0;
var rightWidth = 0;
var titlePos = Array.prototype.indexOf.call(this.el.childNodes, title);
var titlePos = Array.prototype.indexOf.call(childNodes, title);
// Compute how wide the left children are
for(i = 0; i < titlePos; i++) {
@@ -2937,21 +2928,26 @@ window.ionic = {
// Size and align the header title based on the sizes of the left and
// right children, and the desired alignment mode
if(this.alignTitle == 'center') {
title.style.left = margin + 'px';
title.style.right = margin + 'px';
if(margin > 10) {
title.style.left = margin + 'px';
title.style.right = margin + 'px';
}
if(title.offsetWidth < title.scrollWidth) {
title.style.textAlign = 'left';
title.style.right = (rightWidth + 5) + 'px';
} else {
title.style.textAlign = 'center';
title.classList.add('title-left');
if(rightWidth > 0) {
title.style.right = (rightWidth + 5) + 'px';
}
}
} else if(this.alignTitle == 'left') {
title.style.textAlign = 'left';
title.style.left = (leftWidth + 15) + 'px';
title.classList.add('title-left');
if(leftWidth > 0) {
title.style.left = (leftWidth + 15) + 'px';
}
} else if(this.alignTitle == 'right') {
title.style.textAlign = 'right';
title.style.right = (rightWidth + 15) + 'px';
title.classList.add('title-right');
if(rightWidth > 0) {
title.style.right = (rightWidth + 15) + 'px';
}
}
}, this));
}

40
js/views/headerBarView.js
View File

@@ -21,17 +21,8 @@
var _this = this;
window.rAF(ionic.proxy(function() {
var i, c, childSize, childStyle;
var children = this.el.children;
var i, c, childSize;
var childNodes = this.el.childNodes;
var styles = window.getComputedStyle(this.el, null);
// Get the padding of the header for calculations
var paddingLeft = parseFloat(styles['paddingLeft']);
var paddingRight = parseFloat(styles['paddingRight']);
// Get the full width of the header
var headerWidth = this.el.offsetWidth;
// Find the title element
var title = this.el.querySelector('.title');
@@ -41,7 +32,7 @@
var leftWidth = 0;
var rightWidth = 0;
var titlePos = Array.prototype.indexOf.call(this.el.childNodes, title);
var titlePos = Array.prototype.indexOf.call(childNodes, title);
// Compute how wide the left children are
for(i = 0; i < titlePos; i++) {
@@ -76,21 +67,26 @@
// Size and align the header title based on the sizes of the left and
// right children, and the desired alignment mode
if(this.alignTitle == 'center') {
title.style.left = margin + 'px';
title.style.right = margin + 'px';
if(margin > 10) {
title.style.left = margin + 'px';
title.style.right = margin + 'px';
}
if(title.offsetWidth < title.scrollWidth) {
title.style.textAlign = 'left';
title.style.right = (rightWidth + 5) + 'px';
} else {
title.style.textAlign = 'center';
title.classList.add('title-left');
if(rightWidth > 0) {
title.style.right = (rightWidth + 5) + 'px';
}
}
} else if(this.alignTitle == 'left') {
title.style.textAlign = 'left';
title.style.left = (leftWidth + 15) + 'px';
title.classList.add('title-left');
if(leftWidth > 0) {
title.style.left = (leftWidth + 15) + 'px';
}
} else if(this.alignTitle == 'right') {
title.style.textAlign = 'right';
title.style.right = (rightWidth + 15) + 'px';
title.classList.add('title-right');
if(rightWidth > 0) {
title.style.right = (rightWidth + 15) + 'px';
}
}
}, this));
}

5
scss/_bar.scss
View File

@@ -90,7 +90,7 @@
z-index: 0;
overflow: hidden;
margin: 0;
margin: 0 10px;
min-width: 30px;
@@ -107,6 +107,9 @@
&.title-left {
text-align: left;
}
&.title-right {
text-align: right;
}
}
.title a {