@catull/igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
53 lines • 11.5 kB
JavaScript
import { BaseFitPositionStrategy } from './base-fit-position-strategy';
import { HorizontalAlignment, VerticalAlignment } from '../utilities';
/**
* Positions the element as in **Connected** positioning strategy and resize the element
* to fit in the view port in case the element is partially getting out of view
*/
export class ElasticPositionStrategy extends BaseFitPositionStrategy {
/** @inheritdoc */
fitInViewport(element, connectedFit) {
element.classList.add('igx-overlay__content--elastic');
const transformString = [];
if (connectedFit.fitHorizontal.back < 0 || connectedFit.fitHorizontal.forward < 0) {
const maxReduction = Math.max(0, connectedFit.contentElementRect.width - this.settings.minSize.width);
const leftExtend = Math.max(0, -connectedFit.fitHorizontal.back);
const rightExtend = Math.max(0, -connectedFit.fitHorizontal.forward);
const reduction = Math.min(maxReduction, leftExtend + rightExtend);
element.style.width = `${connectedFit.contentElementRect.width - reduction}px`;
// if direction is center and element goes off the screen in left direction we should push the
// element to the right. Prevents left still going out of view when normally positioned
if (this.settings.horizontalDirection === HorizontalAlignment.Center) {
// the amount of translation depends on whether element goes off the screen to the left,
// to the right or in both directions, as well as how much it goes of the screen and finally
// on the minSize. The translation should be proportional between left and right extend
// taken from the reduction
const translation = leftExtend * reduction / (leftExtend + rightExtend);
if (translation > 0) {
transformString.push(`translateX(${translation}px)`);
}
}
}
if (connectedFit.fitVertical.back < 0 || connectedFit.fitVertical.forward < 0) {
const maxReduction = Math.max(0, connectedFit.contentElementRect.height - this.settings.minSize.height);
const topExtend = Math.max(0, -connectedFit.fitVertical.back);
const bottomExtend = Math.max(0, -connectedFit.fitVertical.forward);
const reduction = Math.min(maxReduction, topExtend + bottomExtend);
element.style.height = `${connectedFit.contentElementRect.height - reduction}px`;
// if direction is middle and element goes off the screen in top direction we should push the
// element to the bottom. Prevents top still going out of view when normally positioned
if (this.settings.verticalDirection === VerticalAlignment.Middle) {
// the amount of translation depends on whether element goes off the screen to the top,
// to the bottom or in both directions, as well as how much it goes of the screen and finally
// on the minSize. The translation should be proportional between top and bottom extend
// taken from the reduction
const translation = topExtend * reduction / (topExtend + bottomExtend);
if (translation > 0) {
transformString.push(`translateY(${translation}px)`);
}
}
}
element.style.transform = transformString.join(' ').trim();
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxhc3RpYy1wb3NpdGlvbi1zdHJhdGVneS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2lnbml0ZXVpLWFuZ3VsYXIvIiwic291cmNlcyI6WyJsaWIvc2VydmljZXMvb3ZlcmxheS9wb3NpdGlvbi9lbGFzdGljLXBvc2l0aW9uLXN0cmF0ZWd5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxpQkFBaUIsRUFBZ0IsTUFBTSxjQUFjLENBQUM7QUFFcEY7OztHQUdHO0FBQ0gsTUFBTSxPQUFPLHVCQUF3QixTQUFRLHVCQUF1QjtJQUNoRSxrQkFBa0I7SUFDUixhQUFhLENBQUMsT0FBb0IsRUFBRSxZQUEwQjtRQUNwRSxPQUFPLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQywrQkFBK0IsQ0FBQyxDQUFDO1FBQ3ZELE1BQU0sZUFBZSxHQUFhLEVBQUUsQ0FBQztRQUNyQyxJQUFJLFlBQVksQ0FBQyxhQUFhLENBQUMsSUFBSSxHQUFHLENBQUMsSUFBSSxZQUFZLENBQUMsYUFBYSxDQUFDLE9BQU8sR0FBRyxDQUFDLEVBQUU7WUFDL0UsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsWUFBWSxDQUFDLGtCQUFrQixDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUN0RyxNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxDQUFDLFlBQVksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDakUsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQ3JFLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLFVBQVUsR0FBRyxXQUFXLENBQUMsQ0FBQztZQUNuRSxPQUFPLENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxHQUFHLFlBQVksQ0FBQyxrQkFBa0IsQ0FBQyxLQUFLLEdBQUcsU0FBUyxJQUFJLENBQUM7WUFFL0UsK0ZBQStGO1lBQy9GLHdGQUF3RjtZQUN4RixJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsbUJBQW1CLEtBQUssbUJBQW1CLENBQUMsTUFBTSxFQUFFO2dCQUNsRSx5RkFBeUY7Z0JBQ3pGLDZGQUE2RjtnQkFDN0Ysd0ZBQXdGO2dCQUN4Riw0QkFBNEI7Z0JBQzVCLE1BQU0sV0FBVyxHQUFHLFVBQVUsR0FBRyxTQUFTLEdBQUcsQ0FBQyxVQUFVLEdBQUcsV0FBVyxDQUFDLENBQUM7Z0JBQ3hFLElBQUksV0FBVyxHQUFHLENBQUMsRUFBRTtvQkFDakIsZUFBZSxDQUFDLElBQUksQ0FBQyxjQUFjLFdBQVcsS0FBSyxDQUFDLENBQUM7aUJBQ3hEO2FBQ0o7U0FDSjtRQUVELElBQUksWUFBWSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEdBQUcsQ0FBQyxJQUFJLFlBQVksQ0FBQyxXQUFXLENBQUMsT0FBTyxHQUFHLENBQUMsRUFBRTtZQUMzRSxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxZQUFZLENBQUMsa0JBQWtCLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBQ3hHLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLENBQUMsWUFBWSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUM5RCxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxDQUFDLFlBQVksQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDcEUsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsU0FBUyxHQUFHLFlBQVksQ0FBQyxDQUFDO1lBQ25FLE9BQU8sQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLEdBQUcsWUFBWSxDQUFDLGtCQUFrQixDQUFDLE1BQU0sR0FBRyxTQUFTLElBQUksQ0FBQztZQUVqRiw4RkFBOEY7WUFDOUYsd0ZBQXdGO1lBQ3hGLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsS0FBSyxpQkFBaUIsQ0FBQyxNQUFNLEVBQUU7Z0JBQzlELHdGQUF3RjtnQkFDeEYsOEZBQThGO2dCQUM5Rix3RkFBd0Y7Z0JBQ3hGLDRCQUE0QjtnQkFDNUIsTUFBTSxXQUFXLEdBQUcsU0FBUyxHQUFHLFNBQVMsR0FBRyxDQUFDLFNBQVMsR0FBRyxZQUFZLENBQUMsQ0FBQztnQkFDdkUsSUFBSSxXQUFXLEdBQUcsQ0FBQyxFQUFFO29CQUNqQixlQUFlLENBQUMsSUFBSSxDQUFDLGNBQWMsV0FBVyxLQUFLLENBQUMsQ0FBQztpQkFDeEQ7YUFDSjtTQUNKO1FBQ0QsT0FBTyxDQUFDLEtBQUssQ0FBQyxTQUFTLEdBQUcsZUFBZSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUMvRCxDQUFDO0NBQ0oiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCYXNlRml0UG9zaXRpb25TdHJhdGVneSB9IGZyb20gJy4vYmFzZS1maXQtcG9zaXRpb24tc3RyYXRlZ3knO1xuaW1wb3J0IHsgSG9yaXpvbnRhbEFsaWdubWVudCwgVmVydGljYWxBbGlnbm1lbnQsIENvbm5lY3RlZEZpdCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5cbi8qKlxuICogUG9zaXRpb25zIHRoZSBlbGVtZW50IGFzIGluICoqQ29ubmVjdGVkKiogcG9zaXRpb25pbmcgc3RyYXRlZ3kgYW5kIHJlc2l6ZSB0aGUgZWxlbWVudFxuICogdG8gZml0IGluIHRoZSB2aWV3IHBvcnQgaW4gY2FzZSB0aGUgZWxlbWVudCBpcyBwYXJ0aWFsbHkgZ2V0dGluZyBvdXQgb2Ygdmlld1xuICovXG5leHBvcnQgY2xhc3MgRWxhc3RpY1Bvc2l0aW9uU3RyYXRlZ3kgZXh0ZW5kcyBCYXNlRml0UG9zaXRpb25TdHJhdGVneSB7XG4gICAgLyoqIEBpbmhlcml0ZG9jICovXG4gICAgcHJvdGVjdGVkIGZpdEluVmlld3BvcnQoZWxlbWVudDogSFRNTEVsZW1lbnQsIGNvbm5lY3RlZEZpdDogQ29ubmVjdGVkRml0KSB7XG4gICAgICAgIGVsZW1lbnQuY2xhc3NMaXN0LmFkZCgnaWd4LW92ZXJsYXlfX2NvbnRlbnQtLWVsYXN0aWMnKTtcbiAgICAgICAgY29uc3QgdHJhbnNmb3JtU3RyaW5nOiBzdHJpbmdbXSA9IFtdO1xuICAgICAgICBpZiAoY29ubmVjdGVkRml0LmZpdEhvcml6b250YWwuYmFjayA8IDAgfHwgY29ubmVjdGVkRml0LmZpdEhvcml6b250YWwuZm9yd2FyZCA8IDApIHtcbiAgICAgICAgICAgIGNvbnN0IG1heFJlZHVjdGlvbiA9IE1hdGgubWF4KDAsIGNvbm5lY3RlZEZpdC5jb250ZW50RWxlbWVudFJlY3Qud2lkdGggLSB0aGlzLnNldHRpbmdzLm1pblNpemUud2lkdGgpO1xuICAgICAgICAgICAgY29uc3QgbGVmdEV4dGVuZCA9IE1hdGgubWF4KDAsIC1jb25uZWN0ZWRGaXQuZml0SG9yaXpvbnRhbC5iYWNrKTtcbiAgICAgICAgICAgIGNvbnN0IHJpZ2h0RXh0ZW5kID0gTWF0aC5tYXgoMCwgLWNvbm5lY3RlZEZpdC5maXRIb3Jpem9udGFsLmZvcndhcmQpO1xuICAgICAgICAgICAgY29uc3QgcmVkdWN0aW9uID0gTWF0aC5taW4obWF4UmVkdWN0aW9uLCBsZWZ0RXh0ZW5kICsgcmlnaHRFeHRlbmQpO1xuICAgICAgICAgICAgZWxlbWVudC5zdHlsZS53aWR0aCA9IGAke2Nvbm5lY3RlZEZpdC5jb250ZW50RWxlbWVudFJlY3Qud2lkdGggLSByZWR1Y3Rpb259cHhgO1xuXG4gICAgICAgICAgICAvLyAgaWYgZGlyZWN0aW9uIGlzIGNlbnRlciBhbmQgZWxlbWVudCBnb2VzIG9mZiB0aGUgc2NyZWVuIGluIGxlZnQgZGlyZWN0aW9uIHdlIHNob3VsZCBwdXNoIHRoZVxuICAgICAgICAgICAgLy8gIGVsZW1lbnQgdG8gdGhlIHJpZ2h0LiBQcmV2ZW50cyBsZWZ0IHN0aWxsIGdvaW5nIG91dCBvZiB2aWV3IHdoZW4gbm9ybWFsbHkgcG9zaXRpb25lZFxuICAgICAgICAgICAgaWYgKHRoaXMuc2V0dGluZ3MuaG9yaXpvbnRhbERpcmVjdGlvbiA9PT0gSG9yaXpvbnRhbEFsaWdubWVudC5DZW50ZXIpIHtcbiAgICAgICAgICAgICAgICAvLyAgdGhlIGFtb3VudCBvZiB0cmFuc2xhdGlvbiBkZXBlbmRzIG9uIHdoZXRoZXIgZWxlbWVudCBnb2VzIG9mZiB0aGUgc2NyZWVuIHRvIHRoZSBsZWZ0LFxuICAgICAgICAgICAgICAgIC8vICB0byB0aGUgcmlnaHQgb3IgaW4gYm90aCBkaXJlY3Rpb25zLCBhcyB3ZWxsIGFzIGhvdyBtdWNoIGl0IGdvZXMgb2YgdGhlIHNjcmVlbiBhbmQgZmluYWxseVxuICAgICAgICAgICAgICAgIC8vICBvbiB0aGUgbWluU2l6ZS4gVGhlIHRyYW5zbGF0aW9uIHNob3VsZCBiZSBwcm9wb3J0aW9uYWwgYmV0d2VlbiBsZWZ0IGFuZCByaWdodCBleHRlbmRcbiAgICAgICAgICAgICAgICAvLyAgdGFrZW4gZnJvbSB0aGUgcmVkdWN0aW9uXG4gICAgICAgICAgICAgICAgY29uc3QgdHJhbnNsYXRpb24gPSBsZWZ0RXh0ZW5kICogcmVkdWN0aW9uIC8gKGxlZnRFeHRlbmQgKyByaWdodEV4dGVuZCk7XG4gICAgICAgICAgICAgICAgaWYgKHRyYW5zbGF0aW9uID4gMCkge1xuICAgICAgICAgICAgICAgICAgICB0cmFuc2Zvcm1TdHJpbmcucHVzaChgdHJhbnNsYXRlWCgke3RyYW5zbGF0aW9ufXB4KWApO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuXG4gICAgICAgIGlmIChjb25uZWN0ZWRGaXQuZml0VmVydGljYWwuYmFjayA8IDAgfHwgY29ubmVjdGVkRml0LmZpdFZlcnRpY2FsLmZvcndhcmQgPCAwKSB7XG4gICAgICAgICAgICBjb25zdCBtYXhSZWR1Y3Rpb24gPSBNYXRoLm1heCgwLCBjb25uZWN0ZWRGaXQuY29udGVudEVsZW1lbnRSZWN0LmhlaWdodCAtIHRoaXMuc2V0dGluZ3MubWluU2l6ZS5oZWlnaHQpO1xuICAgICAgICAgICAgY29uc3QgdG9wRXh0ZW5kID0gTWF0aC5tYXgoMCwgLWNvbm5lY3RlZEZpdC5maXRWZXJ0aWNhbC5iYWNrKTtcbiAgICAgICAgICAgIGNvbnN0IGJvdHRvbUV4dGVuZCA9IE1hdGgubWF4KDAsIC1jb25uZWN0ZWRGaXQuZml0VmVydGljYWwuZm9yd2FyZCk7XG4gICAgICAgICAgICBjb25zdCByZWR1Y3Rpb24gPSBNYXRoLm1pbihtYXhSZWR1Y3Rpb24sIHRvcEV4dGVuZCArIGJvdHRvbUV4dGVuZCk7XG4gICAgICAgICAgICBlbGVtZW50LnN0eWxlLmhlaWdodCA9IGAke2Nvbm5lY3RlZEZpdC5jb250ZW50RWxlbWVudFJlY3QuaGVpZ2h0IC0gcmVkdWN0aW9ufXB4YDtcblxuICAgICAgICAgICAgLy8gIGlmIGRpcmVjdGlvbiBpcyBtaWRkbGUgYW5kIGVsZW1lbnQgZ29lcyBvZmYgdGhlIHNjcmVlbiBpbiB0b3AgZGlyZWN0aW9uIHdlIHNob3VsZCBwdXNoIHRoZVxuICAgICAgICAgICAgLy8gIGVsZW1lbnQgdG8gdGhlIGJvdHRvbS4gUHJldmVudHMgdG9wIHN0aWxsIGdvaW5nIG91dCBvZiB2aWV3IHdoZW4gbm9ybWFsbHkgcG9zaXRpb25lZFxuICAgICAgICAgICAgaWYgKHRoaXMuc2V0dGluZ3MudmVydGljYWxEaXJlY3Rpb24gPT09IFZlcnRpY2FsQWxpZ25tZW50Lk1pZGRsZSkge1xuICAgICAgICAgICAgICAgIC8vICB0aGUgYW1vdW50IG9mIHRyYW5zbGF0aW9uIGRlcGVuZHMgb24gd2hldGhlciBlbGVtZW50IGdvZXMgb2ZmIHRoZSBzY3JlZW4gdG8gdGhlIHRvcCxcbiAgICAgICAgICAgICAgICAvLyAgdG8gdGhlIGJvdHRvbSBvciBpbiBib3RoIGRpcmVjdGlvbnMsIGFzIHdlbGwgYXMgaG93IG11Y2ggaXQgZ29lcyBvZiB0aGUgc2NyZWVuIGFuZCBmaW5hbGx5XG4gICAgICAgICAgICAgICAgLy8gIG9uIHRoZSBtaW5TaXplLiBUaGUgdHJhbnNsYXRpb24gc2hvdWxkIGJlIHByb3BvcnRpb25hbCBiZXR3ZWVuIHRvcCBhbmQgYm90dG9tIGV4dGVuZFxuICAgICAgICAgICAgICAgIC8vICB0YWtlbiBmcm9tIHRoZSByZWR1Y3Rpb25cbiAgICAgICAgICAgICAgICBjb25zdCB0cmFuc2xhdGlvbiA9IHRvcEV4dGVuZCAqIHJlZHVjdGlvbiAvICh0b3BFeHRlbmQgKyBib3R0b21FeHRlbmQpO1xuICAgICAgICAgICAgICAgIGlmICh0cmFuc2xhdGlvbiA+IDApIHtcbiAgICAgICAgICAgICAgICAgICAgdHJhbnNmb3JtU3RyaW5nLnB1c2goYHRyYW5zbGF0ZVkoJHt0cmFuc2xhdGlvbn1weClgKTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgICAgZWxlbWVudC5zdHlsZS50cmFuc2Zvcm0gPSB0cmFuc2Zvcm1TdHJpbmcuam9pbignICcpLnRyaW0oKTtcbiAgICB9XG59XG4iXX0=