Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(media-query): fix #187, fixed for platform-server/universal #346

Closed
wants to merge 2 commits into from
Closed

fix(media-query): fix #187, fixed for platform-server/universal #346

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
804d1e5
fix(media-query): fix #187, fixed for platform-server/universal
ardatan Jul 23, 2017
2776ea6
Modified for lint
ardatan Jul 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 28 additions & 20 deletions src/lib/flexbox/api/base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
SimpleChange, Renderer
} from '@angular/core';

import { ɵgetDOM as getDom } from '@angular/platform-browser';

import {applyCssPrefixes} from '../../utils/auto-prefixer';
import {buildLayoutCSS} from '../../utils/layout-validator';

Expand Down Expand Up @@ -56,16 +58,16 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
}
let change = new SimpleChange(previousVal, value, false);

this.ngOnChanges({[key]: change} as SimpleChanges);
this.ngOnChanges({ [key]: change } as SimpleChanges);
}


/**
* Constructor
*/
constructor(protected _mediaMonitor: MediaMonitor,
protected _elementRef: ElementRef,
protected _renderer: Renderer) {
protected _elementRef: ElementRef,
protected _renderer: Renderer) {
this._display = this._getDisplayStyle();
}

Expand Down Expand Up @@ -117,20 +119,26 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
*/
protected _getDisplayStyle(source?: HTMLElement): string {
let element: HTMLElement = source || this._elementRef.nativeElement;
let value = (element.style as any)['display'] || getComputedStyle(element)['display'];
let immediateValue = getDom().getStyle(element, 'display');
let value = '';
try {
value = immediateValue || getDom().getComputedStyle(element)['display'];
} catch (e) {
// TODO: platform-server throws an exception for getComputedStyle
}
return value ? value.trim() : 'block';
}

protected _getFlowDirection(target: any, addIfMissing = false): string {
let value = '';
if (target) {
let directionKeys = Object.keys(applyCssPrefixes({'flex-direction': ''}));
let findDirection = (styles) => directionKeys.reduce((direction, key) => {
return direction || styles[key];
}, null);

let immediateValue = findDirection(target.style);
value = immediateValue || findDirection(getComputedStyle(target as Element));
let immediateValue = getDom().getStyle(target, 'flex-direction');
try {
value = immediateValue || getDom().getComputedStyle(target)['flex-direction'];
} catch (e) {
// TODO: platform-server throws an exception for getComputedStyle
}
if (!immediateValue && addIfMissing) {
value = value || 'row';
this._applyStyleToElements(buildLayoutCSS(value), [target]);
Expand All @@ -157,8 +165,8 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
* Applies styles given via string pair or object map to the directive element.
*/
protected _applyStyleToElement(style: StyleDefinition,
value?: string | number,
nativeElement?: any) {
value?: string | number,
nativeElement?: any) {
let styles = {};
let element = nativeElement || this._elementRef.nativeElement;

Expand All @@ -175,7 +183,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
/**
* Applies styles given via string pair or object map to the directive element.
*/
protected _applyStyleToElements(style: StyleDefinition, elements: HTMLElement[ ]) {
protected _applyStyleToElements(style: StyleDefinition, elements: HTMLElement[]) {
let styles = applyCssPrefixes(style);

elements.forEach(el => {
Expand Down Expand Up @@ -203,14 +211,14 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
* (or closest match).
*/
protected _listenForMediaQueryChanges(key: string,
defaultValue: any,
onMediaQueryChange: MediaQuerySubscriber): ResponsiveActivation { // tslint:disable-line:max-line-length
defaultValue: any,
onMediaQueryChange: MediaQuerySubscriber): ResponsiveActivation { // tslint:disable-line:max-line-length
if (!this._mqActivation) {
let keyOptions = new KeyOptions(key, defaultValue, this._inputMap);
this._mqActivation = new ResponsiveActivation(
keyOptions,
this._mediaMonitor,
(change) => onMediaQueryChange(change)
keyOptions,
this._mediaMonitor,
(change) => onMediaQueryChange(change)
);
}
return this._mqActivation;
Expand All @@ -220,11 +228,11 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
* Special accessor to query for all child 'element' nodes regardless of type, class, etc.
*/
protected get childrenNodes() {
var obj = this._elementRef.nativeElement.childNodes;
var obj = this._elementRef.nativeElement.children;
var buffer = [];

// iterate backwards ensuring that length is an UInt32
for ( var i = obj.length; i--; ) {
for (var i = obj.length; i--;) {
buffer[i] = obj[i];
}
return buffer;
Expand Down
38 changes: 20 additions & 18 deletions src/lib/flexbox/api/layout-gap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,26 +28,27 @@ import {LAYOUT_VALUES} from '../../utils/layout-validator';
* 'layout-padding' styling directive
* Defines padding of child elements in a layout container
*/
@Directive({selector: `
@Directive({
selector: `
[fxLayoutGap],
[fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl],
[fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl],
[fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]
`
})
export class LayoutGapDirective extends BaseFxDirective implements AfterContentInit, OnChanges,
OnDestroy {
OnDestroy {
protected _layout = 'row'; // default flex-direction
protected _layoutWatcher: Subscription;
protected _observer: MutationObserver;

/* tslint:disable */
@Input('fxLayoutGap') set gap(val) { this._cacheInput('gap', val); }
@Input('fxLayoutGap.xs') set gapXs(val) { this._cacheInput('gapXs', val); }
@Input('fxLayoutGap.sm') set gapSm(val) { this._cacheInput('gapSm', val); };
@Input('fxLayoutGap.md') set gapMd(val) { this._cacheInput('gapMd', val); };
@Input('fxLayoutGap.lg') set gapLg(val) { this._cacheInput('gapLg', val); };
@Input('fxLayoutGap.xl') set gapXl(val) { this._cacheInput('gapXl', val); };
@Input('fxLayoutGap') set gap(val) { this._cacheInput('gap', val); }
@Input('fxLayoutGap.xs') set gapXs(val) { this._cacheInput('gapXs', val); }
@Input('fxLayoutGap.sm') set gapSm(val) { this._cacheInput('gapSm', val); };
@Input('fxLayoutGap.md') set gapMd(val) { this._cacheInput('gapMd', val); };
@Input('fxLayoutGap.lg') set gapLg(val) { this._cacheInput('gapLg', val); };
@Input('fxLayoutGap.xl') set gapXl(val) { this._cacheInput('gapXl', val); };

@Input('fxLayoutGap.gt-xs') set gapGtXs(val) { this._cacheInput('gapGtXs', val); };
@Input('fxLayoutGap.gt-sm') set gapGtSm(val) { this._cacheInput('gapGtSm', val); };
Expand All @@ -61,9 +62,9 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI

/* tslint:enable */
constructor(monitor: MediaMonitor,
elRef: ElementRef,
renderer: Renderer,
@Optional() @Self() container: LayoutDirective) {
elRef: ElementRef,
renderer: Renderer,
@Optional() @Self() container: LayoutDirective) {
super(monitor, elRef, renderer);

if (container) { // Subscribe to layout direction changes
Expand Down Expand Up @@ -115,17 +116,18 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
let onMutationCallback = (mutations) => {
let validatedChanges = (it: MutationRecord) => {
return (it.addedNodes && it.addedNodes.length) ||
(it.removedNodes && it.removedNodes.length);
(it.removedNodes && it.removedNodes.length);
};

// update gap styles only for child 'added' or 'removed' events
if (mutations.filter(validatedChanges).length) {
this._updateWithValue();
}
};

this._observer = new MutationObserver(onMutationCallback);
this._observer.observe(this._elementRef.nativeElement, {childList: true});
if (typeof MutationObserver !== 'undefined') {
this._observer = new MutationObserver(onMutationCallback);
this._observer.observe(this._elementRef.nativeElement, { childList: true });
}
}

/**
Expand All @@ -150,7 +152,7 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI

// Gather all non-hidden Element nodes
let items = this.childrenNodes
.filter(el => el.nodeType === 1 && this._getDisplayStyle(el) != "none");
.filter(el => el.nodeType === 1 && this._getDisplayStyle(el) != "none");
let numItems = items.length;

if (numItems > 1) {
Expand Down Expand Up @@ -183,9 +185,9 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
case 'column-reverse':
key = 'margin-bottom';
break;
case "row" :
case "row":
case 'row-reverse':
default :
default:
key = 'margin-right';
break;
}
Expand Down
Loading