Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
private layoutIndicator_() {
const isIndicatorFirstRender = !this.isIndicatorShown_;
// Ensure that indicator appears in the right position immediately for correct first render.
if (isIndicatorFirstRender) {
this.adapter_.setStyleForIndicator('transition', 'none');
}
const translateAmtForActiveTabLeft = this.adapter_.getComputedLeftForTabAtIndex(this.activeTabIndex_);
const scaleAmtForActiveTabWidth =
this.adapter_.getComputedWidthForTabAtIndex(this.activeTabIndex_) / this.adapter_.getOffsetWidth();
const transformValue = `translateX(${translateAmtForActiveTabLeft}px) scale(${scaleAmtForActiveTabWidth}, 1)`;
this.adapter_.setStyleForIndicator(getCorrectPropertyName(window, 'transform'), transformValue);
if (isIndicatorFirstRender) {
// Force layout so that transform styles to take effect.
this.adapter_.getOffsetWidthForIndicator();
this.adapter_.setStyleForIndicator('transition', '');
this.adapter_.setStyleForIndicator('visibility', 'visible');
this.isIndicatorShown_ = true;
}
}
private updateUIForCurrentValue_() {
const {max_: max, min_: min, value_: value} = this;
const pctComplete = (value - min) / (max - min);
let translatePx = pctComplete * this.rect_.width;
if (this.adapter_.isRTL()) {
translatePx = this.rect_.width - translatePx;
}
const transformProp = getCorrectPropertyName(window, 'transform');
const transitionendEvtName = getCorrectEventName(window, 'transitionend') as EventType;
if (this.inTransit_) {
const onTransitionEnd = () => {
this.setInTransit_(false);
this.adapter_.deregisterThumbContainerInteractionHandler(transitionendEvtName, onTransitionEnd);
};
this.adapter_.registerThumbContainerInteractionHandler(transitionendEvtName, onTransitionEnd);
}
requestAnimationFrame(() => {
// NOTE(traviskaufman): It would be nice to use calc() here,
// but IE cannot handle calcs in transforms correctly.
// See: https://goo.gl/NC2itk
// Also note that the -50% offset is used to center the slider thumb.
this.adapter_.setThumbContainerStyleProperty(transformProp, `translateX(${translatePx}px) translateX(-50%)`);
MDCSliderFoundation.prototype.updateUIForCurrentValue_ = function () {
var _this = this;
var _a = this, max = _a.max_, min = _a.min_, value = _a.value_;
var pctComplete = (value - min) / (max - min);
var translatePx = pctComplete * this.rect_.width;
if (this.adapter_.isRTL()) {
translatePx = this.rect_.width - translatePx;
}
var transformProp = getCorrectPropertyName(window, 'transform');
var transitionendEvtName = getCorrectEventName(window, 'transitionend');
if (this.inTransit_) {
var onTransitionEnd_1 = function () {
_this.setInTransit_(false);
_this.adapter_.deregisterThumbContainerInteractionHandler(transitionendEvtName, onTransitionEnd_1);
};
this.adapter_.registerThumbContainerInteractionHandler(transitionendEvtName, onTransitionEnd_1);
}
requestAnimationFrame(function () {
// NOTE(traviskaufman): It would be nice to use calc() here,
// but IE cannot handle calcs in transforms correctly.
// See: https://goo.gl/NC2itk
// Also note that the -50% offset is used to center the slider thumb.
_this.adapter_.setThumbContainerStyleProperty(transformProp, "translateX(" + translatePx + "px) translateX(-50%)");
_this.adapter_.setTrackStyleProperty(transformProp, "scaleX(" + pctComplete + ")");
});
private setScale_(el: HTMLElement | null, scaleValue: number) {
if (!el) {
return;
}
const value = `scaleX(${scaleValue})`;
this.adapter_.setStyle(el, getCorrectPropertyName(window, 'transform'), value);
}
}
setTransformStyleForTabBar: (value) => {
this.tabBarEl_.style.setProperty(getCorrectPropertyName(window, 'transform'), value);
},
getOffsetLeftForEventTarget: (target) => target.offsetLeft,