From cbcb5d085581505ef5cafd04e5e9ce80f1d45393 Mon Sep 17 00:00:00 2001 From: Thomas Burleson Date: Tue, 7 Feb 2017 16:21:39 -0600 Subject: [PATCH] feat(flexbox): use protected access to allow API directives to be easily extended * change internal methods to `protected` to enable subclass access. --- src/lib/flexbox/api/base.ts | 4 ++-- src/lib/flexbox/api/flex-align.ts | 4 ++-- src/lib/flexbox/api/flex-offset.ts | 4 ++-- src/lib/flexbox/api/flex-order.ts | 4 ++-- src/lib/flexbox/api/flex.ts | 21 +++++++++---------- src/lib/flexbox/api/hide.ts | 10 ++++----- src/lib/flexbox/api/layout-align.ts | 12 +++++------ src/lib/flexbox/api/layout-gap.ts | 17 +++++++-------- src/lib/flexbox/api/layout-wrap.ts | 12 +++++------ src/lib/flexbox/api/layout.ts | 13 ++++++------ src/lib/flexbox/api/show.ts | 10 ++++----- .../responsive/responsive-activation.ts | 2 +- 12 files changed, 55 insertions(+), 58 deletions(-) diff --git a/src/lib/flexbox/api/base.ts b/src/lib/flexbox/api/base.ts index fb6afffca..18444242f 100644 --- a/src/lib/flexbox/api/base.ts +++ b/src/lib/flexbox/api/base.ts @@ -42,9 +42,9 @@ export abstract class BaseFxDirective implements OnDestroy { /** * */ - constructor(private _mediaMonitor: MediaMonitor, + constructor(protected _mediaMonitor: MediaMonitor, protected _elementRef: ElementRef, - private _renderer: Renderer) { + protected _renderer: Renderer) { this._display = this._getDisplayStyle(); } diff --git a/src/lib/flexbox/api/flex-align.ts b/src/lib/flexbox/api/flex-align.ts index 549e96eda..9ea07b56b 100644 --- a/src/lib/flexbox/api/flex-align.ts +++ b/src/lib/flexbox/api/flex-align.ts @@ -114,7 +114,7 @@ export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnCha // Protected methods // ********************************************* - private _updateWithValue(value?: string|number) { + protected _updateWithValue(value?: string|number) { value = value || this._queryInput("align") || 'stretch'; if (this._mqActivation) { value = this._mqActivation.activatedInput; @@ -123,7 +123,7 @@ export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnCha this._applyStyleToElement(this._buildCSS(value)); } - private _buildCSS(align) { + protected _buildCSS(align) { let css = {}; // Cross-axis diff --git a/src/lib/flexbox/api/flex-offset.ts b/src/lib/flexbox/api/flex-offset.ts index bac95212d..c8274acaa 100644 --- a/src/lib/flexbox/api/flex-offset.ts +++ b/src/lib/flexbox/api/flex-offset.ts @@ -83,7 +83,7 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh // ********************************************* - private _updateWithValue(value?: string|number) { + protected _updateWithValue(value?: string|number) { value = value || this._queryInput("offset") || 0; if (this._mqActivation) { value = this._mqActivation.activatedInput; @@ -92,7 +92,7 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh this._applyStyleToElement(this._buildCSS(value)); } - private _buildCSS(offset) { + protected _buildCSS(offset) { let isPercent = String(offset).indexOf('%') > -1; let isPx = String(offset).indexOf('px') > -1; if (!isPx && !isPercent && !isNaN(offset)) { diff --git a/src/lib/flexbox/api/flex-order.ts b/src/lib/flexbox/api/flex-order.ts index 26065bfd1..e583ebc45 100644 --- a/src/lib/flexbox/api/flex-order.ts +++ b/src/lib/flexbox/api/flex-order.ts @@ -82,7 +82,7 @@ export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnCha // Protected methods // ********************************************* - private _updateWithValue(value?: string) { + protected _updateWithValue(value?: string) { value = value || this._queryInput("order") || '0'; if (this._mqActivation) { value = this._mqActivation.activatedInput; @@ -92,7 +92,7 @@ export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnCha } - private _buildCSS(value) { + protected _buildCSS(value) { value = parseInt(value, 10); return {order: isNaN(value) ? 0 : value}; } diff --git a/src/lib/flexbox/api/flex.ts b/src/lib/flexbox/api/flex.ts index 78c19e5ec..20d6547b6 100644 --- a/src/lib/flexbox/api/flex.ts +++ b/src/lib/flexbox/api/flex.ts @@ -38,8 +38,7 @@ export type FlexBasisAlias = 'grow' | 'initial' | 'auto' | 'none' | 'nogrow' | ' * * @see https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */ -@Directive({ - selector: ` +@Directive({selector: ` [fxFlex], [fxFlex.xs], [fxFlex.gt-xs], @@ -55,13 +54,13 @@ export type FlexBasisAlias = 'grow' | 'initial' | 'auto' | 'none' | 'nogrow' | ' export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy { /** The flex-direction of this element's flex container. Defaults to 'row'. */ - private _layout = 'row'; + protected _layout = 'row'; /** * Subscription to the parent flex container's layout changes. * Stored so we can unsubscribe when this directive is destroyed. */ - private _layoutWatcher: Subscription; + protected _layoutWatcher: Subscription; @Input('fxFlex') set flex(val) { this._cacheInput("flex", val); @@ -117,8 +116,8 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer, - @Optional() @SkipSelf() private _container: LayoutDirective, - @Optional() @SkipSelf() private _wrap: LayoutWrapDirective) { + @Optional() @SkipSelf() protected _container: LayoutDirective, + @Optional() @SkipSelf() protected _wrap: LayoutWrapDirective) { super(monitor, elRef, renderer); @@ -168,12 +167,12 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, * Caches the parent container's 'flex-direction' and updates the element's style. * Used as a handler for layout change events from the parent flex container. */ - private _onLayoutChange(direction?: string) { + protected _onLayoutChange(direction?: string) { this._layout = direction || this._layout || "row"; this._updateStyle(); } - private _updateStyle(value?: string|number) { + protected _updateStyle(value?: string|number) { let flexBasis = value || this._queryInput("flex") || ''; if (this._mqActivation) { flexBasis = this._mqActivation.activatedInput; @@ -186,7 +185,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, /** * If the used the short-form `fxFlex="1 0 37%"`, then parse the parts */ - private _parseFlexParts(basis: string) { + protected _parseFlexParts(basis: string) { basis = basis.replace(";", ""); let hasCalc = basis && basis.indexOf("calc") > -1; @@ -200,7 +199,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, * e.g. * fxFlex="3 3 calc(15em + 20px)" */ - private _getPartsWithCalc(value: string) { + protected _getPartsWithCalc(value: string) { let parts = [this._queryInput("grow"), this._queryInput("shrink"), value]; let j = value.indexOf('calc'); @@ -219,7 +218,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, * Validate the value to be one of the acceptable value options * Use default fallback of "row" */ - private _validateValue(grow: number|string, + protected _validateValue(grow: number|string, shrink: number|string, basis: string|number|FlexBasisAlias) { let css, isValue; diff --git a/src/lib/flexbox/api/hide.ts b/src/lib/flexbox/api/hide.ts index 81717930e..b1a601412 100644 --- a/src/lib/flexbox/api/hide.ts +++ b/src/lib/flexbox/api/hide.ts @@ -50,7 +50,7 @@ export class HideDirective extends BaseFxDirective implements OnInit, OnChanges, * Subscription to the parent flex container's layout changes. * Stored so we can unsubscribe when this directive is destroyed. */ - private _layoutWatcher: Subscription; + protected _layoutWatcher: Subscription; @Input('fxHide') set hide(val) { this._cacheInput("hide", val); @@ -96,7 +96,7 @@ export class HideDirective extends BaseFxDirective implements OnInit, OnChanges, * */ constructor(monitor: MediaMonitor, - @Optional() @Self() private _layout: LayoutDirective, + @Optional() @Self() protected _layout: LayoutDirective, protected elRef: ElementRef, protected renderer: Renderer) { super(monitor, elRef, renderer); @@ -169,7 +169,7 @@ export class HideDirective extends BaseFxDirective implements OnInit, OnChanges, /** * Validate the visibility value and then update the host's inline display style */ - private _updateWithValue(value?: string|number|boolean) { + protected _updateWithValue(value?: string|number|boolean) { value = value || this._getDefaultVal("hide", false); if (this._mqActivation) { value = this._mqActivation.activatedInput; @@ -183,14 +183,14 @@ export class HideDirective extends BaseFxDirective implements OnInit, OnChanges, /** * Build the CSS that should be assigned to the element instance */ - private _buildCSS(value) { + protected _buildCSS(value) { return {'display': value ? 'none' : this._display}; } /** * Validate the value to NOT be FALSY */ - private _validateTruthy(value) { + protected _validateTruthy(value) { return FALSY.indexOf(value) === -1; } } diff --git a/src/lib/flexbox/api/layout-align.ts b/src/lib/flexbox/api/layout-align.ts index 2c06d49f4..7c394497d 100644 --- a/src/lib/flexbox/api/layout-align.ts +++ b/src/lib/flexbox/api/layout-align.ts @@ -49,8 +49,8 @@ import {LAYOUT_VALUES, LayoutDirective} from './layout'; `}) export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy { - private _layout = 'row'; // default flex-direction - private _layoutWatcher: Subscription; + protected _layout = 'row'; // default flex-direction + protected _layoutWatcher: Subscription; @Input('fxLayoutAlign') set align(val) { this._cacheInput('align', val); } @Input('fxLayoutAlign.xs') set alignXs(val) { this._cacheInput('alignXs', val); } @@ -110,7 +110,7 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC /** * */ - private _updateWithValue(value?: string) { + protected _updateWithValue(value?: string) { value = value || this._queryInput("align") || 'start stretch'; if (this._mqActivation) { value = this._mqActivation.activatedInput; @@ -123,7 +123,7 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC /** * Cache the parent container 'flex-direction' and update the 'flex' styles */ - private _onLayoutChange(direction) { + protected _onLayoutChange(direction) { this._layout = (direction || '').toLowerCase(); if (!LAYOUT_VALUES.find(x => x === this._layout)) { this._layout = 'row'; @@ -136,7 +136,7 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC this._allowStretching(value, this._layout || "row"); } - private _buildCSS(align) { + protected _buildCSS(align) { let css = {}, [main_axis, cross_axis] = align.split(' '); // tslint:disable-line:variable-name css['justify-content'] = 'flex-start'; // default main axis @@ -188,7 +188,7 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC * Update container element to 'stretch' as needed... * NOTE: this is only done if the crossAxis is explicitly set to 'stretch' */ - private _allowStretching(align, layout) { + protected _allowStretching(align, layout) { let [, cross_axis] = align.split(' '); // tslint:disable-line:variable-name if (cross_axis == 'stretch') { diff --git a/src/lib/flexbox/api/layout-gap.ts b/src/lib/flexbox/api/layout-gap.ts index db8cf0440..492267d4a 100644 --- a/src/lib/flexbox/api/layout-gap.ts +++ b/src/lib/flexbox/api/layout-gap.ts @@ -28,8 +28,7 @@ import {LayoutDirective, LAYOUT_VALUES} from './layout'; * 'layout-padding' styling directive * Defines padding of child elements in a layout container */ -@Directive({ - selector: ` +@Directive({selector: ` [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.gt-xs], @@ -44,9 +43,9 @@ import {LayoutDirective, LAYOUT_VALUES} from './layout'; }) export class LayoutGapDirective extends BaseFxDirective implements AfterContentInit, OnChanges, OnDestroy { - private _layout = 'row'; // default flex-direction - private _layoutWatcher: Subscription; - private _observer: MutationObserver; + protected _layout = 'row'; // default flex-direction + protected _layoutWatcher: Subscription; + protected _observer: MutationObserver; @Input('fxLayoutGap') set gap(val) { this._cacheInput('gap', val); @@ -139,7 +138,7 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI * Watch for child nodes to be added... and apply the layout gap styles to each. * NOTE: this does NOT! differentiate between viewChildren and contentChildren */ - private _watchContentChanges() { + protected _watchContentChanges() { let onMutationCallback = (mutations) => { // update gap styles only for 'addedNodes' events mutations @@ -154,7 +153,7 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI /** * Cache the parent container 'flex-direction' and update the 'margin' styles */ - private _onLayoutChange(direction) { + protected _onLayoutChange(direction) { this._layout = (direction || '').toLowerCase(); if (!LAYOUT_VALUES.find(x => x === this._layout)) { this._layout = 'row'; @@ -165,7 +164,7 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI /** * */ - private _updateWithValue(value?: string) { + protected _updateWithValue(value?: string) { value = value || this._queryInput("gap") || '0'; if (this._mqActivation) { value = this._mqActivation.activatedInput; @@ -189,7 +188,7 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI * Prepare margin CSS, remove any previous explicitly * assigned margin assignments */ - private _buildCSS(value) { + protected _buildCSS(value) { let key, margins = { 'margin-left': null, 'margin-right': null, diff --git a/src/lib/flexbox/api/layout-wrap.ts b/src/lib/flexbox/api/layout-wrap.ts index cf1eb7571..d22e7d962 100644 --- a/src/lib/flexbox/api/layout-wrap.ts +++ b/src/lib/flexbox/api/layout-wrap.ts @@ -42,8 +42,8 @@ import {LayoutDirective, LAYOUT_VALUES} from './layout'; [fxLayoutWrap.xl] `}) export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy { - private _layout = 'row'; // default flex-direction - private _layoutWatcher: Subscription; + protected _layout = 'row'; // default flex-direction + protected _layoutWatcher: Subscription; @Input('fxLayoutWrap') set wrap(val) { this._cacheInput("wrap", val); } @Input('fxLayoutWrap.xs') set wrapXs(val) { this._cacheInput('wrapXs', val); } @@ -98,7 +98,7 @@ export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnCh /** * Cache the parent container 'flex-direction' and update the 'flex' styles */ - private _onLayoutChange(direction) { + protected _onLayoutChange(direction) { this._layout = (direction || '').toLowerCase().replace('-reverse', ''); if (!LAYOUT_VALUES.find(x => x === this._layout)) { this._layout = 'row'; @@ -107,7 +107,7 @@ export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnCh this._updateWithValue(); } - private _updateWithValue(value?: string) { + protected _updateWithValue(value?: string) { value = value || this._queryInput("wrap") || 'wrap'; if (this._mqActivation) { value = this._mqActivation.activatedInput; @@ -121,7 +121,7 @@ export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnCh /** * Build the CSS that should be assigned to the element instance */ - private _buildCSS(value) { + protected _buildCSS(value) { return extendObject({ 'flex-wrap': value }, { 'display' : 'flex', 'flex-direction' : this._layout || 'row' @@ -131,7 +131,7 @@ export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnCh /** * Convert layout-wrap="" to expected flex-wrap style */ - private _validateValue(value) { + protected _validateValue(value) { switch (value.toLowerCase()) { case 'reverse': case 'wrap-reverse': diff --git a/src/lib/flexbox/api/layout.ts b/src/lib/flexbox/api/layout.ts index 80f218497..3a0fb9a76 100644 --- a/src/lib/flexbox/api/layout.ts +++ b/src/lib/flexbox/api/layout.ts @@ -49,7 +49,7 @@ export class LayoutDirective extends BaseFxDirective implements OnInit, OnChange * Create Observable for nested/child 'flex' directives. This allows * child flex directives to subscribe/listen for flexbox direction changes. */ - private _announcer: BehaviorSubject; + protected _announcer: BehaviorSubject; /** * Publish observer to enabled nested, dependent directives to listen @@ -57,9 +57,8 @@ export class LayoutDirective extends BaseFxDirective implements OnInit, OnChange */ public layout$: Observable; - - @Input('fxLayout') set layout(val) { this._cacheInput("layout", val); } - @Input('fxLayout.xs') set layoutXs(val) { this._cacheInput('layoutXs', val); } + @Input('fxLayout') set layout(val) { this._cacheInput("layout", val); }; + @Input('fxLayout.xs') set layoutXs(val) { this._cacheInput('layoutXs', val); }; @Input('fxLayout.gt-xs') set layoutGtXs(val) { this._cacheInput('layoutGtXs', val); }; @Input('fxLayout.sm') set layoutSm(val) { this._cacheInput('layoutSm', val); }; @Input('fxLayout.gt-sm') set layoutGtSm(val) { this._cacheInput('layoutGtSm', val); }; @@ -111,7 +110,7 @@ export class LayoutDirective extends BaseFxDirective implements OnInit, OnChange /** * Validate the direction value and then update the host's inline flexbox styles */ - private _updateWithDirection(direction?: string) { + protected _updateWithDirection(direction?: string) { direction = direction || this._queryInput("layout") || 'row'; if (this._mqActivation) { direction = this._mqActivation.activatedInput; @@ -136,7 +135,7 @@ export class LayoutDirective extends BaseFxDirective implements OnInit, OnChange * laid out and drawn inside that element's specified width and height. * */ - private _buildCSS(value) { + protected _buildCSS(value) { return {'display': 'flex', 'box-sizing': 'border-box', 'flex-direction': value}; } @@ -144,7 +143,7 @@ export class LayoutDirective extends BaseFxDirective implements OnInit, OnChange * Validate the value to be one of the acceptable value options * Use default fallback of "row" */ - private _validateValue(value) { + protected _validateValue(value) { value = value ? value.toLowerCase() : ''; return LAYOUT_VALUES.find(x => x === value) ? value : LAYOUT_VALUES[0]; // "row" } diff --git a/src/lib/flexbox/api/show.ts b/src/lib/flexbox/api/show.ts index 7cf86c8d5..2dffe76c6 100644 --- a/src/lib/flexbox/api/show.ts +++ b/src/lib/flexbox/api/show.ts @@ -54,7 +54,7 @@ export class ShowDirective extends BaseFxDirective implements OnInit, OnChanges, * Subscription to the parent flex container's layout changes. * Stored so we can unsubscribe when this directive is destroyed. */ - private _layoutWatcher: Subscription; + protected _layoutWatcher: Subscription; @Input('fxShow') set show(val) { this._cacheInput("show", val); @@ -100,8 +100,8 @@ export class ShowDirective extends BaseFxDirective implements OnInit, OnChanges, * */ constructor(monitor: MediaMonitor, - @Optional() @Self() private _layout: LayoutDirective, - @Optional() @Self() private _hide: HideDirective, + @Optional() @Self() protected _layout: LayoutDirective, + @Optional() @Self() protected _hide: HideDirective, protected elRef: ElementRef, protected renderer: Renderer) { @@ -189,7 +189,7 @@ export class ShowDirective extends BaseFxDirective implements OnInit, OnChanges, } /** Validate the visibility value and then update the host's inline display style */ - private _updateWithValue(value?: string|number|boolean) { + protected _updateWithValue(value?: string|number|boolean) { value = value || this._getDefaultVal("show", true); if (this._mqActivation) { value = this._mqActivation.activatedInput; @@ -201,7 +201,7 @@ export class ShowDirective extends BaseFxDirective implements OnInit, OnChanges, /** Build the CSS that should be assigned to the element instance */ - private _buildCSS(show) { + protected _buildCSS(show) { return {'display': show ? this._display : 'none'}; } diff --git a/src/lib/flexbox/responsive/responsive-activation.ts b/src/lib/flexbox/responsive/responsive-activation.ts index bf5ffc6e7..5d6439ece 100644 --- a/src/lib/flexbox/responsive/responsive-activation.ts +++ b/src/lib/flexbox/responsive/responsive-activation.ts @@ -148,7 +148,7 @@ export class ResponsiveActivation { * Synchronizes change notifications with the current mq-activated @Input and calculates the * mq-activated input value or the default value */ - _onMonitorEvents(change: MediaChange) { + protected _onMonitorEvents(change: MediaChange) { if (change.property == this._options.baseKey) { change.value = this._calculateActivatedValue(change);