From 740d71a2385d895883c8485ff49ea0df183bec41 Mon Sep 17 00:00:00 2001 From: vakrilov Date: Mon, 3 Apr 2017 14:51:57 +0300 Subject: [PATCH] Apply page css when using nav-entry with create method --- .../ui/core/properties/properties.ts | 12 +++--- tns-core-modules/ui/frame/frame-common.ts | 6 ++- tns-core-modules/ui/page/page-common.ts | 41 ++++++++++--------- tns-core-modules/ui/styling/style-scope.d.ts | 2 +- tns-core-modules/ui/styling/style-scope.ts | 14 ++++--- 5 files changed, 41 insertions(+), 34 deletions(-) diff --git a/tns-core-modules/ui/core/properties/properties.ts b/tns-core-modules/ui/core/properties/properties.ts index 79e55bef2..868c3da7b 100644 --- a/tns-core-modules/ui/core/properties/properties.ts +++ b/tns-core-modules/ui/core/properties/properties.ts @@ -17,7 +17,7 @@ let inheritableProperties = new Array>(); let inheritableCssProperties = new Array>(); function print(map) { - let symbols = (Object).getOwnPropertySymbols(map); + let symbols = Object.getOwnPropertySymbols(map); for (let symbol of symbols) { const prop = map[symbol]; if (!prop.registered) { @@ -955,7 +955,7 @@ function inheritableCssPropertyValuesOn(style: Style): Array<{ property: Inherit } export function initNativeView(view: ViewBase): void { - let symbols = (Object).getOwnPropertySymbols(view); + let symbols = Object.getOwnPropertySymbols(view); for (let symbol of symbols) { const property: Property = symbolPropertyMap[symbol]; if (!property) { @@ -976,7 +976,7 @@ export function initNativeView(view: ViewBase): void { } const style = view.style; - symbols = (Object).getOwnPropertySymbols(style); + symbols = Object.getOwnPropertySymbols(style); for (let symbol of symbols) { const property: CssProperty = cssSymbolPropertyMap[symbol]; if (!property) { @@ -998,7 +998,7 @@ export function initNativeView(view: ViewBase): void { } export function resetNativeView(view: ViewBase): void { - let symbols = (Object).getOwnPropertySymbols(view); + let symbols = Object.getOwnPropertySymbols(view); for (let symbol of symbols) { const property: Property = symbolPropertyMap[symbol]; if (!property) { @@ -1017,7 +1017,7 @@ export function resetNativeView(view: ViewBase): void { const style = view.style; - symbols = (Object).getOwnPropertySymbols(style); + symbols = Object.getOwnPropertySymbols(style); for (let symbol of symbols) { const property: CssProperty = cssSymbolPropertyMap[symbol]; if (!property) { @@ -1053,7 +1053,7 @@ export function clearInheritedProperties(view: ViewBase): void { } export function resetCSSProperties(style: Style): void { - let symbols = (Object).getOwnPropertySymbols(style); + let symbols = Object.getOwnPropertySymbols(style); for (let symbol of symbols) { let cssProperty; if (cssProperty = cssSymbolPropertyMap[symbol]) { diff --git a/tns-core-modules/ui/frame/frame-common.ts b/tns-core-modules/ui/frame/frame-common.ts index 776e72a1b..4b5da5ed8 100644 --- a/tns-core-modules/ui/frame/frame-common.ts +++ b/tns-core-modules/ui/frame/frame-common.ts @@ -83,14 +83,16 @@ export function resolvePageFromEntry(entry: NavigationEntry): Page { if (!page) { throw new Error("Failed to create Page with entry.create() function."); } + + page._refreshCss(); } else if (entry.moduleName) { // Current app full path. let currentAppPath = knownFolders.currentApp().path; //Full path of the module = current app full path + module name. let moduleNamePath = path.join(currentAppPath, entry.moduleName); - console.log("frame module path: " + moduleNamePath); - console.log("frame module module: " + entry.moduleName); + traceWrite("frame module path: " + moduleNamePath, traceCategories.Navigation); + traceWrite("frame module module: " + entry.moduleName, traceCategories.Navigation); let moduleExports; // web-pack case where developers register their page JS file manually. diff --git a/tns-core-modules/ui/page/page-common.ts b/tns-core-modules/ui/page/page-common.ts index 33c4ccaeb..61fbc8cf2 100644 --- a/tns-core-modules/ui/page/page-common.ts +++ b/tns-core-modules/ui/page/page-common.ts @@ -26,10 +26,12 @@ export class PageBase extends ContentView implements PageDefinition { private _navigationContext: any; private _actionBar: ActionBar; + private _cssAppliedVersion: number; + public _styleScope: StyleScope; // same as in ViewBase, but strongly typed public _modal: PageBase; public _fragmentTag: string; - + public actionBarHidden: boolean; public enableSwipeBackNavigation: boolean; public backgroundSpanUnderStatusBar: boolean; @@ -79,16 +81,8 @@ export class PageBase extends ContentView implements PageDefinition { return this; } - public refreshCssIfAppCssChanged(): void { - // If app css changed ensureSelectors will return true. - // Need when app css change and page is in the backstack. - if (this._styleScope.ensureSelectors()) { - this._refreshCss(); - } - } - public onLoaded(): void { - this.refreshCssIfAppCssChanged(); + this._refreshCss(); super.onLoaded(); } @@ -124,16 +118,21 @@ export class PageBase extends ContentView implements PageDefinition { } } + // Used in component-builder.ts public _refreshCss(): void { - const styleScope = this._styleScope; - this._resetCssValues(); - const checkSelectors = (view: View): boolean => { - styleScope.applySelectors(view); - return true; - }; + const scopeVersion = this._styleScope.ensureSelectors(); + if (scopeVersion !== this._cssAppliedVersion) { + const styleScope = this._styleScope; + this._resetCssValues(); + const checkSelectors = (view: View): boolean => { + styleScope.applySelectors(view); + return true; + }; - checkSelectors(this); - eachDescendant(this, checkSelectors); + checkSelectors(this); + eachDescendant(this, checkSelectors); + this._cssAppliedVersion = scopeVersion; + } } public getKeyframeAnimationWithName(animationName: string): KeyframeAnimationInfo { @@ -310,6 +309,8 @@ statusBarStyleProperty.register(Style); /** * Property backing androidStatusBarBackground. */ -export const androidStatusBarBackgroundProperty = new CssProperty({ name: "androidStatusBarBackground", cssName:"android-status-bar-background", - equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); +export const androidStatusBarBackgroundProperty = new CssProperty({ + name: "androidStatusBarBackground", cssName: "android-status-bar-background", + equalityComparer: Color.equals, valueConverter: (v) => new Color(v) +}); androidStatusBarBackgroundProperty.register(Style); diff --git a/tns-core-modules/ui/styling/style-scope.d.ts b/tns-core-modules/ui/styling/style-scope.d.ts index c912be0f4..913673944 100644 --- a/tns-core-modules/ui/styling/style-scope.d.ts +++ b/tns-core-modules/ui/styling/style-scope.d.ts @@ -22,7 +22,7 @@ export class StyleScope { public static createSelectorsFromCss(css: string, cssFileName: string, keyframes: Object): RuleSet[]; public static createSelectorsFromImports(tree: SyntaxTree, keyframes: Object): RuleSet[]; - public ensureSelectors(): boolean; + public ensureSelectors(): number; public applySelectors(view: ViewBase): void public query(options: Node): SelectorCore[]; diff --git a/tns-core-modules/ui/styling/style-scope.ts b/tns-core-modules/ui/styling/style-scope.ts index bd8530dd6..58952e839 100644 --- a/tns-core-modules/ui/styling/style-scope.ts +++ b/tns-core-modules/ui/styling/style-scope.ts @@ -200,7 +200,7 @@ export class StyleScope { return undefined; } - public ensureSelectors(): boolean { + public ensureSelectors(): number { let toMerge: RuleSet[][]; if (this._applicationCssSelectorsAppliedVersion !== applicationCssSelectorVersion || this._localCssSelectorVersion !== this._localCssSelectorsAppliedVersion || @@ -218,12 +218,10 @@ export class StyleScope { if (toMerge && toMerge.length > 0) { this._mergedCssSelectors = toMerge.filter(m => !!m).reduce((merged, next) => merged.concat(next), []); this._applyKeyframesOnSelectors(); - } else { - return false; + this._selectors = new SelectorsMap(this._mergedCssSelectors); } - this._selectors = new SelectorsMap(this._mergedCssSelectors); - return true; + return this._getSelectorsVersion(); } public applySelectors(view: ViewBase): void { @@ -245,6 +243,12 @@ export class StyleScope { this._viewIdToKey = {}; } + private _getSelectorsVersion() { + // The counters can only go up. So we can return just appVersion + localVersion + // The 100000 * appVersion is just for easier debugging + return 100000 * this._applicationCssSelectorsAppliedVersion + this._localCssSelectorsAppliedVersion; + } + private _applyKeyframesOnSelectors() { for (let i = this._mergedCssSelectors.length - 1; i >= 0; i--) { let ruleset = this._mergedCssSelectors[i];