@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
661 lines (652 loc) • 21.6 kB
JavaScript
import { Directive, ElementRef, Input, HostListener, ContentChildren, Inject, forwardRef, HostBinding, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReplaySubject, Subject } from 'rxjs';
/**
* @fileoverview added by tsickle
* Generated from: anchor.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AnchorDirective = /** @class */ (function () {
function AnchorDirective(el) {
var _this = this;
this.el = el;
this.anchorActive = 'active';
this.activeChangeSubject = new ReplaySubject(1);
this.REACH_TOP_VISION_OFFSET = 50;
this.THROTTLE_DELAY = 100;
this.THROTTLE_TRIGGER = 600;
this.throttle = (/**
* @return {?}
*/
function () {
/** @type {?} */
var fn = _this.checkActiveStatus;
/** @type {?} */
var time = Date.now();
if (_this.scrollTimer) {
clearTimeout(_this.scrollTimer);
}
if (!_this.scrollPreStart) {
_this.scrollPreStart = time;
}
if (time - _this.scrollPreStart > _this.THROTTLE_TRIGGER) {
fn();
_this.scrollPreStart = null;
_this.scrollTimer = null;
}
else {
_this.scrollTimer = setTimeout((/**
* @return {?}
*/
function () {
fn();
_this.scrollPreStart = null;
_this.scrollTimer = null;
}), _this.THROTTLE_DELAY);
}
});
this.checkActiveStatus = (/**
* @param {?=} activeChangeBy
* @return {?}
*/
function (activeChangeBy) {
/** @type {?} */
var top = _this.element.getBoundingClientRect().top - (_this.boxElement.view && _this.boxElement.view.top || 0);
/** @type {?} */
var bottom = _this.element.getBoundingClientRect().bottom - (_this.boxElement.view && _this.boxElement.view.top || 0);
// 首个个特殊处理
if (_this.anchor === _this.boxElement.defaultAnchor) {
_this.activeChangeBy = activeChangeBy || 'scroll';
_this.isActive = bottom > _this.REACH_TOP_VISION_OFFSET ? true : false;
return;
}
// 默认处理
_this.activeChangeBy = activeChangeBy || 'scroll';
_this.isActive = bottom > _this.REACH_TOP_VISION_OFFSET && top < _this.REACH_TOP_VISION_OFFSET ? true : false;
});
this.element = this.el.nativeElement;
}
Object.defineProperty(AnchorDirective.prototype, "isActive", {
get: /**
* @return {?}
*/
function () {
return this._isActive;
},
set: /**
* @param {?} active
* @return {?}
*/
function (active) {
this._isActive = active;
this.activeChangeSubject.next(active);
},
enumerable: true,
configurable: true
});
Object.defineProperty(AnchorDirective.prototype, "boxElement", {
get: /**
* @return {?}
*/
function () { return this._boxElement; },
set: /**
* @param {?} box
* @return {?}
*/
function (box) {
this._boxElement = box;
this.updateScrollListenTarget();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
AnchorDirective.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this.activeChangeSubscription = this.activeChangeSubject.asObservable().subscribe((/**
* @param {?} active
* @return {?}
*/
function (active) {
if (_this.lastActiveBy) {
_this.element.classList.remove(_this.lastActiveBy);
}
if (active) {
_this.element.classList.add(_this.anchorActive);
_this.lastActiveBy = 'anchor-active-by-' + _this.activeChangeBy;
// setTimeout是为了this.lastActiveBy每次都能被再次触发
setTimeout((/**
* @return {?}
*/
function () { _this.element.classList.add(_this.lastActiveBy); }), 0);
}
else {
_this.element.classList.remove(_this.anchorActive);
}
}));
setTimeout((/**
* @return {?}
*/
function () { _this.checkActiveStatus('initial'); }));
};
/**
* @return {?}
*/
AnchorDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.scrollListenTarget.removeEventListener('scroll', this.throttle);
if (this.activeChangeSubscription) {
this.activeChangeSubscription.unsubscribe();
}
};
/**
* @return {?}
*/
AnchorDirective.prototype.beFocused = /**
* @return {?}
*/
function () {
this.boxElement.forceActiveAnchor(this.anchor, 'click-inside');
};
/**
* @return {?}
*/
AnchorDirective.prototype.updateScrollListenTarget = /**
* @return {?}
*/
function () {
if (this.scrollListenTarget) {
return;
}
if (this.boxElement) {
this.scrollListenTarget = this.boxElement.scrollTarget || window; // window有scroll事件，document.documentElement没有scroll事件
}
this.scrollListenTarget.addEventListener('scroll', this.throttle, { passive: true });
};
AnchorDirective.decorators = [
{ type: Directive, args: [{
selector: '[dAnchor]'
},] }
];
/** @nocollapse */
AnchorDirective.ctorParameters = function () { return [
{ type: ElementRef }
]; };
AnchorDirective.propDecorators = {
anchor: [{ type: Input, args: ['dAnchor',] }],
anchorActive: [{ type: Input }],
beFocused: [{ type: HostListener, args: ['click',] }]
};
return AnchorDirective;
}());
if (false) {
/** @type {?} */
AnchorDirective.prototype.anchor;
/** @type {?} */
AnchorDirective.prototype.anchorActive;
/** @type {?} */
AnchorDirective.prototype._isActive;
/** @type {?} */
AnchorDirective.prototype.activeChangeBy;
/** @type {?} */
AnchorDirective.prototype.activeChangeSubscription;
/** @type {?} */
AnchorDirective.prototype.activeChangeSubject;
/** @type {?} */
AnchorDirective.prototype.lastActiveBy;
/** @type {?} */
AnchorDirective.prototype.element;
/** @type {?} */
AnchorDirective.prototype._boxElement;
/** @type {?} */
AnchorDirective.prototype.scrollListenTarget;
/** @type {?} */
AnchorDirective.prototype.REACH_TOP_VISION_OFFSET;
/**
* @type {?}
* @private
*/
AnchorDirective.prototype.THROTTLE_DELAY;
/**
* @type {?}
* @private
*/
AnchorDirective.prototype.THROTTLE_TRIGGER;
/**
* @type {?}
* @private
*/
AnchorDirective.prototype.scrollPreStart;
/**
* @type {?}
* @private
*/
AnchorDirective.prototype.scrollTimer;
/** @type {?} */
AnchorDirective.prototype.throttle;
/** @type {?} */
AnchorDirective.prototype.checkActiveStatus;
/**
* @type {?}
* @private
*/
AnchorDirective.prototype.el;
}
/**
* @fileoverview added by tsickle
* Generated from: anchor-box.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AnchorBoxDirective = /** @class */ (function () {
function AnchorBoxDirective() {
this.refreshAnchorMap = new Subject();
}
Object.defineProperty(AnchorBoxDirective.prototype, "anchorList", {
get: /**
* @return {?}
*/
function () {
return this._anchorList;
},
set: /**
* @param {?} list
* @return {?}
*/
function (list) {
var _this = this;
this.anchorMap = {};
this._anchorList = list;
this._anchorList.toArray().forEach((/**
* @param {?} targetAnchor
* @return {?}
*/
function (targetAnchor) {
_this.anchorMap[targetAnchor.anchor] = targetAnchor;
targetAnchor.boxElement = _this;
}));
this.refreshAnchorMap.next();
},
enumerable: true,
configurable: true
});
/**
* @param {?} anchorName
* @param {?=} forceActiveSource
* @param {?=} deactivateOtherAnchor
* @return {?}
*/
AnchorBoxDirective.prototype.forceActiveAnchor = /**
* @param {?} anchorName
* @param {?=} forceActiveSource
* @param {?=} deactivateOtherAnchor
* @return {?}
*/
function (anchorName, forceActiveSource, deactivateOtherAnchor) {
var _this = this;
if (forceActiveSource === void 0) { forceActiveSource = 'scroll'; }
if (deactivateOtherAnchor === void 0) { deactivateOtherAnchor = true; }
this.anchorMap[anchorName].activeChangeBy = forceActiveSource;
this.anchorMap[anchorName].isActive = true;
if (deactivateOtherAnchor) {
Object.keys(this.anchorMap)
.filter((/**
* @param {?} name
* @return {?}
*/
function (name) { return name !== anchorName; }))
.map((/**
* @param {?} name
* @return {?}
*/
function (name) { return _this.anchorMap[name]; }))
.forEach((/**
* @param {?} anchor
* @return {?}
*/
function (anchor) {
anchor.activeChangeBy = forceActiveSource;
anchor.isActive = false;
}));
}
};
AnchorBoxDirective.decorators = [
{ type: Directive, args: [{
selector: '[dAnchorBox]'
},] }
];
/** @nocollapse */
AnchorBoxDirective.ctorParameters = function () { return []; };
AnchorBoxDirective.propDecorators = {
view: [{ type: Input }],
defaultAnchor: [{ type: Input }],
scrollTarget: [{ type: Input }],
anchorList: [{ type: ContentChildren, args: [AnchorDirective, { descendants: true },] }]
};
return AnchorBoxDirective;
}());
if (false) {
/** @type {?} */
AnchorBoxDirective.prototype.view;
/** @type {?} */
AnchorBoxDirective.prototype.defaultAnchor;
/** @type {?} */
AnchorBoxDirective.prototype.scrollTarget;
/** @type {?} */
AnchorBoxDirective.prototype.refreshAnchorMap;
/** @type {?} */
AnchorBoxDirective.prototype.anchorMap;
/** @type {?} */
AnchorBoxDirective.prototype._anchorList;
}
/**
* @fileoverview added by tsickle
* Generated from: anchor-link.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AnchorLinkDirective = /** @class */ (function () {
function AnchorLinkDirective(box) {
var _this = this;
this.bindAnchorAfterBoxReady = (/**
* @return {?}
*/
function () {
if (_this.boxElement.anchorMap) {
setTimeout((/**
* @return {?}
*/
function () { _this.anchorBlock = _this.boxElement.anchorMap[_this.anchorName]; }), 0);
}
else {
_this.bindingAnchorTimer = setTimeout(_this.bindAnchorAfterBoxReady, 500);
}
});
this.boxElement = box;
}
Object.defineProperty(AnchorLinkDirective.prototype, "anchorActiveClass", {
get: /**
* @return {?}
*/
function () {
return (this.anchorBlock && this.anchorBlock.isActive) ? (this.anchorActive || '') : '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(AnchorLinkDirective.prototype, "anchorName", {
get: /**
* @return {?}
*/
function () { return this._anchorName; },
set: /**
* @param {?} anchor
* @return {?}
*/
function (anchor) {
this._anchorName = anchor;
this.bindAnchorAfterBoxReady();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
AnchorLinkDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.subscribeAnchorMapChange();
};
/**
* @return {?}
*/
AnchorLinkDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.subscription) {
this.subscription.unsubscribe();
}
};
/**
* @return {?}
*/
AnchorLinkDirective.prototype.subscribeAnchorMapChange = /**
* @return {?}
*/
function () {
var _this = this;
if (this.boxElement) {
this.subscription = this.boxElement.refreshAnchorMap.subscribe((/**
* @return {?}
*/
function () {
if (_this.bindingAnchorTimer) {
clearTimeout(_this.bindingAnchorTimer);
_this.bindingAnchorTimer = undefined;
}
_this.bindAnchorAfterBoxReady();
}));
}
};
/**
* @return {?}
*/
AnchorLinkDirective.prototype.scrollToAnchor = /**
* @return {?}
*/
function () {
var _this = this;
if (!this.anchorBlock) {
return;
}
/** @type {?} */
var callback = (/**
* @return {?}
*/
function () {
setTimeout((/**
* @return {?}
*/
function () { _this.boxElement.forceActiveAnchor(_this.anchorName, 'anchor-link'); }), 120);
});
((/**
* @param {?} container
* @param {?} anchor
* @return {?}
*/
function (container, anchor) {
/** @type {?} */
var containerScrollTop = container.scrollTop;
if (container === document.documentElement) {
containerScrollTop += document.body.scrollTop;
}
_this.scrollAnimate(container, containerScrollTop, (containerScrollTop + anchor.getBoundingClientRect().top - (_this.boxElement.view && _this.boxElement.view.top || 0)), undefined, undefined, callback);
}))(this.boxElement.scrollTarget || document.documentElement, this.anchorBlock.element);
};
/**
* @param {?} target
* @param {?} currentTopValue
* @param {?} targetTopValue
* @param {?=} timeGap
* @param {?=} scrollTime
* @param {?=} callback
* @return {?}
*/
AnchorLinkDirective.prototype.scrollAnimate = /**
* @param {?} target
* @param {?} currentTopValue
* @param {?} targetTopValue
* @param {?=} timeGap
* @param {?=} scrollTime
* @param {?=} callback
* @return {?}
*/
function (target, currentTopValue, targetTopValue, timeGap, scrollTime, callback) {
var _this = this;
if (timeGap === void 0) { timeGap = 40; }
if (scrollTime === void 0) { scrollTime = 450; }
/** @type {?} */
var startTimeStamp = Date.now();
/** @type {?} */
var drawAnimateFrame = (/**
* @return {?}
*/
function () {
/** @type {?} */
var currentTime = Date.now() - startTimeStamp;
if (currentTime - timeGap > scrollTime) {
target.scrollTop = targetTopValue;
if (target === document.documentElement) {
// 兼容写法，老浏览器/老API模式需要document.body滚动，新的需要documentElement滚动
document.body.scrollTop = targetTopValue;
}
if (callback) {
callback();
}
}
else {
/** @type {?} */
var tempTopValue = _this.easeInOutCubic(currentTime, currentTopValue, targetTopValue, scrollTime);
target.scrollTop = tempTopValue;
if (target === document.documentElement) {
document.body.scrollTop = tempTopValue;
}
setTimeout((/**
* @return {?}
*/
function () { requestAnimationFrame(drawAnimateFrame); }), timeGap);
}
});
requestAnimationFrame(drawAnimateFrame);
};
/**
* @param {?} t
* @param {?} b
* @param {?} c
* @param {?} d
* @return {?}
*/
AnchorLinkDirective.prototype.easeInOutCubic = /**
* @param {?} t
* @param {?} b
* @param {?} c
* @param {?} d
* @return {?}
*/
function (t, b, c, d) {
/** @type {?} */
var cc = c - b;
/** @type {?} */
var tt = t / (d / 2);
if (tt < 1) {
return cc / 2 * tt * tt * tt + b;
}
else {
return cc / 2 * ((tt -= 2) * tt * tt + 2) + b;
}
};
AnchorLinkDirective.decorators = [
{ type: Directive, args: [{
selector: '[dAnchorLink]',
},] }
];
/** @nocollapse */
AnchorLinkDirective.ctorParameters = function () { return [
{ type: AnchorBoxDirective, decorators: [{ type: Inject, args: [forwardRef((/**
* @return {?}
*/
function () { return AnchorBoxDirective; })),] }] }
]; };
AnchorLinkDirective.propDecorators = {
anchorActiveClass: [{ type: HostBinding, args: ['class',] }],
anchorName: [{ type: Input, args: ['dAnchorLink',] }],
anchorActive: [{ type: Input }],
scrollToAnchor: [{ type: HostListener, args: ['click',] }]
};
return AnchorLinkDirective;
}());
if (false) {
/**
* @type {?}
* @private
*/
AnchorLinkDirective.prototype._anchorName;
/** @type {?} */
AnchorLinkDirective.prototype.anchorActive;
/** @type {?} */
AnchorLinkDirective.prototype.boxElement;
/** @type {?} */
AnchorLinkDirective.prototype.anchorBlock;
/** @type {?} */
AnchorLinkDirective.prototype.bindingAnchorTimer;
/** @type {?} */
AnchorLinkDirective.prototype.subscription;
/** @type {?} */
AnchorLinkDirective.prototype.bindAnchorAfterBoxReady;
}
/**
* @fileoverview added by tsickle
* Generated from: anchor.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AnchorModule = /** @class */ (function () {
function AnchorModule() {
}
AnchorModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [
AnchorLinkDirective,
AnchorBoxDirective,
AnchorDirective
],
exports: [
AnchorLinkDirective,
AnchorBoxDirective,
AnchorDirective
],
},] }
];
return AnchorModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: anchor.type.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function IAnchorBox() { }
if (false) {
/** @type {?} */
IAnchorBox.prototype.scrollTarget;
/** @type {?} */
IAnchorBox.prototype.defaultAnchor;
/** @type {?} */
IAnchorBox.prototype.forceActiveAnchor;
/** @type {?} */
IAnchorBox.prototype.view;
}
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-anchor.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { AnchorBoxDirective, AnchorDirective, AnchorLinkDirective, AnchorModule };
//# sourceMappingURL=ng-devui-anchor.js.map