Skip to content

Commit

Permalink
Merge pull request #599 from vaadin/chore/perf-cleanup
Browse files Browse the repository at this point in the history 
Cleanup unused code and unnecessary DOM measurements
  • Loading branch information
@tomivirkki
tomivirkki committed Sep 3, 2018
2 parents e0d1949 + da35067 commit dcb0bc2
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 46 deletions.
34 changes: 19 additions & 15 deletions src/vaadin-date-picker-mixin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
* @polymerMixin
*/
Vaadin.DatePickerMixin = subclass => class VaadinDatePickerMixin extends Polymer.mixinBehaviors(
[Polymer.IronA11yKeysBehavior, Polymer.IronResizableBehavior], subclass
[Polymer.IronResizableBehavior], subclass
) {

static get properties() {
Expand Down Expand Up @@ -277,14 +277,19 @@

_noInput: {
type: Boolean,
computed: '_isNoInput(_fullscreen, i18n, i18n.*, _ios)'
computed: '_isNoInput(_fullscreen, _ios, i18n, i18n.*)'
},

_ios: {
type: Boolean,
value: navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/)
},

_webkitOverflowScroll: {
type: Boolean,
value: document.createElement('div').style.webkitOverflowScrolling === ''
},

_ignoreAnnounce: {
value: true
},
Expand All @@ -307,6 +312,7 @@
super.ready();
this._boundOnScroll = this._onScroll.bind(this);
this._boundFocus = this._focus.bind(this);
this._boundUpdateAlignmentAndPosition = this._updateAlignmentAndPosition.bind(this);
Polymer.Gestures.addListener(this, 'tap', this.open);
this.addEventListener('touchend', this._preventDefault.bind(this));
this.addEventListener('keydown', this._onKeydown.bind(this));
Expand Down Expand Up @@ -388,8 +394,8 @@
return date;
}

_isNoInput() {
return !this._inputElement || this._fullscreen || !this.i18n.parseDate || this._ios;
_isNoInput(fullscreen, ios, i18n) {
return !this._inputElement || fullscreen || ios || !i18n.parseDate;
}

_formatISO(date) {
Expand Down Expand Up @@ -491,16 +497,14 @@
}

_updateAlignmentAndPosition() {
const bottomAlign = this._inputElement.getBoundingClientRect().top > window.innerHeight / 2;
const rightAlign = this._inputElement.getBoundingClientRect().left + this.clientWidth / 2 > window.innerWidth / 2;

const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
if (!this._fullscreen) {
const inputRect = this._inputElement.getBoundingClientRect();

const inputRect = this._inputElement.getBoundingClientRect();
const bottomAlign = inputRect.top > window.innerHeight / 2;
const rightAlign = inputRect.left + this.clientWidth / 2 > window.innerWidth / 2;

if (!this._fullscreen) {
if (rightAlign) {
const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
this.$.overlay.setAttribute('right-aligned', '');
this.$.overlay.style.removeProperty('left');
this.$.overlay.style.right = (viewportWidth - inputRect.right) + 'px';
Expand All @@ -511,6 +515,7 @@
}

if (bottomAlign) {
const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
this.$.overlay.setAttribute('bottom-aligned', '');
this.$.overlay.style.removeProperty('top');
this.$.overlay.style.bottom = (viewportHeight - inputRect.top) + 'px';
Expand Down Expand Up @@ -553,10 +558,9 @@
this._ignoreFocusedDateChange = false;

window.addEventListener('scroll', this._boundOnScroll, true);
this.listen(this, 'iron-resize', '_updateAlignmentAndPosition');
this.addEventListener('iron-resize', this._boundUpdateAlignmentAndPosition);

// Checking if the browser supports webkitOverflowScrolling
if (document.createElement('div').style.webkitOverflowScrolling === '') {
if (this._webkitOverflowScroll) {
this._touchPrevented = this._preventWebkitOverflowScrollingTouch(this.parentElement);
}

Expand Down Expand Up @@ -598,7 +602,7 @@
this._ignoreAnnounce = true;

window.removeEventListener('scroll', this._boundOnScroll, true);
this.unlisten(this, 'iron-resize', '_updateAlignmentAndPosition');
this.removeEventListener('iron-resize', this._boundUpdateAlignmentAndPosition);

if (this._touchPrevented) {
this._touchPrevented.forEach(prevented =>
Expand Down
39 changes: 19 additions & 20 deletions src/vaadin-date-picker-overlay-content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -802,6 +802,15 @@
return this.focusedDate || this.selectedDate || this.initialPosition || new Date();
}

_focusDate(dateToFocus) {
this.focusedDate = dateToFocus;
this._focusedMonthDate = dateToFocus.getDate();
}

_focusClosestDate(focus) {
this._focusDate(Vaadin.DatePickerHelper._getClosestDate(focus, [this.minDate, this.maxDate]));
}

_moveFocusByDays(days) {
var focus = this._currentlyFocusedDate();
var dateToFocus = new Date(0, 0);
Expand All @@ -810,22 +819,18 @@
dateToFocus.setDate(focus.getDate() + days);

if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
this.focusedDate = dateToFocus;
this._focusedMonthDate = this.focusedDate.getDate();
this._focusDate(dateToFocus);
} else {
if (this._dateAllowed(focus, this.minDate, this.maxDate)) {
// Move to min or max date
if (days > 0) { // down or right
this.focusedDate = this.maxDate;
this._focusedMonthDate = this.maxDate.getDate();
this._focusDate(this.maxDate);
} else { // up or left
this.focusedDate = this.minDate;
this._focusedMonthDate = this.minDate.getDate();
this._focusDate(this.minDate);
}
} else {
// Move to closest allowed date
this.focusedDate = Vaadin.DatePickerHelper._getClosestDate(focus, [this.minDate, this.maxDate]);
this._focusedMonthDate = this.focusedDate.getDate();
this._focusClosestDate(focus);
}
}
}
Expand All @@ -849,16 +854,13 @@
if (this._dateAllowed(focus, this.minDate, this.maxDate)) {
// Move to min or max date
if (months > 0) { // pagedown
this.focusedDate = this.maxDate;
this._focusedMonthDate = this.maxDate.getDate();
this._focusDate(this.maxDate);
} else { // pageup
this.focusedDate = this.minDate;
this._focusedMonthDate = this.minDate.getDate();
this._focusDate(this.minDate);
}
} else {
// Move to closest allowed date
this.focusedDate = Vaadin.DatePickerHelper._getClosestDate(focus, [this.minDate, this.maxDate]);
this._focusedMonthDate = this.focusedDate.getDate();
this._focusClosestDate(focus);
}
}
}
Expand All @@ -876,17 +878,14 @@
}

if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
this.focusedDate = dateToFocus;
this._focusedMonthDate = this.focusedDate.getDate();
this._focusDate(dateToFocus);
} else {
if (this._dateAllowed(focusedDate, this.minDate, this.maxDate)) {
// Move to minDate or maxDate
this.focusedDate = this[property];
this._focusedMonthDate = this[property].getDate();
this._focusDate(this[property]);
} else {
// Move to closest allowed date
this.focusedDate = Vaadin.DatePickerHelper._getClosestDate(focusedDate, [this.minDate, this.maxDate]);
this._focusedMonthDate = this.focusedDate.getDate();
this._focusClosestDate(focusedDate);
}
}
}
Expand Down
1 change: 0 additions & 1 deletion src/vaadin-date-picker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
<link rel="import" href="vaadin-date-picker-overlay.html">
<link rel="import" href="vaadin-date-picker-overlay-content.html">
<link rel="import" href="vaadin-date-picker-mixin.html">
<link rel="import" href="vaadin-date-picker-helper.html">
<link rel="import" href="../../vaadin-text-field/src/vaadin-text-field.html">
<link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">

Expand Down
8 changes: 5 additions & 3 deletions src/vaadin-infinite-scroller.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@
-->

<link rel="import" href="../../polymer/polymer-element.html">
<link rel="import" href="../../polymer/lib/legacy/class.html">
<link rel="import" href="../../polymer/lib/legacy/templatizer-behavior.html">
<link rel="import" href="../../polymer/lib/utils/async.html">
<link rel="import" href="../../polymer/lib/utils/debounce.html">
<link rel="import" href="../../polymer/lib/utils/flush.html">
<link rel="import" href="../../polymer/lib/utils/templatize.html">

<dom-module id="vaadin-infinite-scroller">
<template>
Expand Down Expand Up @@ -309,7 +311,7 @@
this.appendChild(itemWrapper);

// This is needed by IE
Polymer.dom.flush();
Polymer.flush();

setTimeout(() => {
// Only stamp the visible instances first
Expand Down
14 changes: 7 additions & 7 deletions test/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,14 +305,14 @@
});

it('should realign on iron-resize', done => {
sinon.stub(datepicker, '_boundUpdateAlignmentAndPosition', () => {
if (!done._called) {
done._called = true;
done();
}
});
open(datepicker, () => {
sinon.stub(datepicker, '_updateAlignmentAndPosition', () => {
if (!done._called) {
done._called = true;
done();
}
});
datepicker.fire('iron-resize', undefined, {bubbles: false});
datepicker.dispatchEvent(new CustomEvent('iron-resize', {bubbles: false}));
});
});

Expand Down

0 comments on commit dcb0bc2

Please sign in to comment.