javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support for hierarchical and attribute css selectors.

Browse Source
This commit is contained in:
Nedyalko Nikolov
2016-02-12 11:26:50 +02:00
parent c0682fce80
commit 6e4d6ccfbc
6 changed files with 924 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/core/bindable.ts
View File

@@ -9,6 +9,7 @@ import viewModule = require("ui/core/view");
import * as applicationModule from "application";
import * as polymerExpressionsModule from "js-libs/polymer-expressions";
import * as specialPropertiesModule from "ui/builder/special-properties";
import * as utils from "utils/utils";
//late import
var application: typeof applicationModule;
@@ -332,8 +333,7 @@ export class Binding {
// text="{{ sourceProperty = $parents['ListView'].test, expression = $parents['ListView'].test + 2}}"
// update expression will be '$newPropertyValue + 2'
// then on expression execution the new value will be taken and target property will be updated with the value of the expression.
var escapeRegex = /[-\/\\^$*+?.()|[\]{}]/g;
var escapedSourceProperty = this.options.sourceProperty.replace(escapeRegex, '\\$&');
var escapedSourceProperty = utils.escapeRegexSymbols(this.options.sourceProperty);
var expRegex = new RegExp(escapedSourceProperty, 'g');
var resultExp = this.options.expression.replace(expRegex, bc.newPropertyValueKey);
return resultExp;

1
ui/styling/css-selector.d.ts vendored
View File

@@ -7,6 +7,7 @@
constructor(expression: string, declarations: cssParser.Declaration[]);
expression: string;
attrExpression: string;
declarations(): Array<{ property: string; value: any }>;

248
ui/styling/css-selector.ts
View File

@@ -3,23 +3,45 @@ import observable = require("ui/core/dependency-observable");
import cssParser = require("css");
import * as trace from "trace";
import * as styleProperty from "ui/styling/style-property";
import * as types from "utils/types";
import * as utils from "utils/utils";
var ID_SPECIFICITY = 10000;
var ID_SPECIFICITY = 1000000;
var ATTR_SPECIFITY = 10000;
var CLASS_SPECIFICITY = 100;
var TYPE_SPECIFICITY = 1;
export class CssSelector {
private _expression: string;
private _declarations: cssParser.Declaration[];
private _attrExpression: string;
constructor(expression: string, declarations: cssParser.Declaration[]) {
this._expression = expression;
if (expression) {
let leftSquareBracketIndex = expression.indexOf(LSBRACKET);
if (leftSquareBracketIndex > 0) {
// extracts what is inside square brackets ([target = 'test'] will extract "target = 'test'")
var paramsRegex = /\[\s*(.*)\s*\]/;
let attrParams = paramsRegex.exec(expression);
if (attrParams && attrParams.length > 1) {
this._attrExpression = attrParams[1].trim();
}
this._expression = expression.substr(0, leftSquareBracketIndex);
}
else {
this._expression = expression;
}
}
this._declarations = declarations;
}
get expression(): string {
return this._expression;
}
get attrExpression(): string {
return this._attrExpression;
}
get declarations(): Array<{ property: string; value: any }> {
return this._declarations;
@@ -74,13 +96,33 @@ class CssTypeSelector extends CssSelector {
return TYPE_SPECIFICITY;
}
public matches(view: view.View): boolean {
return matchesType(this.expression, view);
let result = matchesType(this.expression, view);
if (result && this.attrExpression) {
return matchesAttr(this.attrExpression, view);
}
return result;
}
}
function matchesType(expression: string, view: view.View): boolean {
return expression.toLowerCase() === view.typeName.toLowerCase() ||
expression.toLowerCase() === view.typeName.split(/(?=[A-Z])/).join("-").toLowerCase();
let exprArr = expression.split(".");
let exprTypeName = exprArr[0];
let exprClassName = exprArr[1];
let typeCheck = exprTypeName.toLowerCase() === view.typeName.toLowerCase() ||
exprTypeName.toLowerCase() === view.typeName.split(/(?=[A-Z])/).join("-").toLowerCase();
if (typeCheck) {
if (exprClassName) {
return view._cssClasses.some((cssClass, i, arr) => { return cssClass === exprClassName });
}
else {
return typeCheck;
}
}
else {
return false;
}
}
class CssIdSelector extends CssSelector {
@@ -88,7 +130,11 @@ class CssIdSelector extends CssSelector {
return ID_SPECIFICITY;
}
public matches(view: view.View): boolean {
return this.expression === view.id;
let result = this.expression === view.id;
if (result && this.attrExpression) {
return matchesAttr(this.attrExpression, view);
}
return result;
}
}
@@ -98,10 +144,151 @@ class CssClassSelector extends CssSelector {
}
public matches(view: view.View): boolean {
var expectedClass = this.expression;
return view._cssClasses.some((cssClass, i, arr) => { return cssClass === expectedClass });
let result = view._cssClasses.some((cssClass, i, arr) => { return cssClass === expectedClass });
if (result && this.attrExpression) {
return matchesAttr(this.attrExpression, view);
}
return result;
}
}
class CssCompositeSelector extends CssSelector {
get specificity(): number {
let result = 0;
for(let i = 0; i < this.parentCssSelectors.length; i++) {
result += this.parentCssSelectors[i].selector.specificity;
}
return result;
}
private parentCssSelectors: [{ selector: CssSelector, onlyDirectParent: boolean}];
private splitExpression(expression) {
let result = [];
let tempArr = [];
let validSpace = true;
for (let i = 0; i < expression.length; i++) {
if (expression[i] === LSBRACKET) {
validSpace = false;
}
if (expression[i] === RSBRACKET) {
validSpace = true;
}
if ((expression[i] === SPACE && validSpace) || (expression[i] === GTHAN)) {
if (tempArr.length > 0) {
result.push(tempArr.join(""));
tempArr = [];
}
if (expression[i] === GTHAN) {
result.push(GTHAN);
}
continue;
}
tempArr.push(expression[i]);
}
if (tempArr.length > 0) {
result.push(tempArr.join(""));
}
return result;
}
constructor(expr: string, declarations: cssParser.Declaration[]) {
super(expr, declarations);
let expressions = this.splitExpression(expr);
let onlyParent = false;
this.parentCssSelectors = <any>[];
for(let i = expressions.length - 1; i >= 0; i--) {
if (expressions[i].trim() === GTHAN) {
onlyParent = true;
continue;
}
this.parentCssSelectors.push({selector: createSelector(expressions[i].trim(), null), onlyDirectParent: onlyParent});
onlyParent = false;
}
}
public matches(view: view.View): boolean {
let result = this.parentCssSelectors[0].selector.matches(view);
if (!result) {
return result;
}
let tempView = view.parent;
for(let i = 1; i < this.parentCssSelectors.length; i++) {
let parentCounter = 0;
while (tempView && parentCounter === 0) {
result = this.parentCssSelectors[i].selector.matches(tempView);
if (result) {
tempView = tempView.parent;
break;
}
if (this.parentCssSelectors[i].onlyDirectParent) {
parentCounter++;
}
tempView = tempView.parent;
}
if (!result) {
break;
return result;
}
}
return result;
}
}
class CssAttrSelector extends CssSelector {
get specificity(): number {
return ATTR_SPECIFITY;
}
public matches(view: view.View): boolean {
return matchesAttr(this.attrExpression, view);
}
}
function matchesAttr(attrExpression: string, view: view.View): boolean {
let equalSignIndex = attrExpression.indexOf(EQUAL);
if (equalSignIndex > 0) {
let nameValueRegex = /(.*[^~|\^\$\*])[~|\^\$\*]?=(.*)/;
let nameValueRegexRes = nameValueRegex.exec(attrExpression);
let attrName;
let attrValue;
if (nameValueRegexRes && nameValueRegexRes.length > 2) {
attrName = nameValueRegexRes[1].trim();
attrValue = nameValueRegexRes[2].trim().replace(/^(["'])*(.*)\1$/, '$2');
}
// extract entire sign (=, ~=, |=, ^=, $=, *=)
let escapedAttrValue = utils.escapeRegexSymbols(attrValue);
let attrCheckRegex;
switch (attrExpression.charAt(equalSignIndex - 1)) {
case "~":
attrCheckRegex = new RegExp("(^|[^a-zA-Z-])" + escapedAttrValue + "([^a-zA-Z-]|$)");
break;
case "|":
attrCheckRegex = new RegExp("^" + escapedAttrValue + "\\b");
break;
case "^":
attrCheckRegex = new RegExp("^" + escapedAttrValue);
break;
case "$":
attrCheckRegex = new RegExp(escapedAttrValue + "$");
break;
case "*":
attrCheckRegex = new RegExp(escapedAttrValue);
break;
// only = (EQUAL)
default:
attrCheckRegex = new RegExp("^"+escapedAttrValue+"$");
break;
}
return !types.isNullOrUndefined(view[attrName]) && attrCheckRegex.test(view[attrName]+"");
}
else {
return !types.isNullOrUndefined(view[attrExpression]);
}
return false;
}
export class CssVisualStateSelector extends CssSelector {
private _key: string;
private _match: string;
@@ -109,9 +296,11 @@ export class CssVisualStateSelector extends CssSelector {
private _isById: boolean;
private _isByClass: boolean;
private _isByType: boolean;
private _isByAttr: boolean;
get specificity(): number {
return (this._isById ? ID_SPECIFICITY : 0) +
(this._isByAttr ? ATTR_SPECIFITY : 0) +
(this._isByClass ? CLASS_SPECIFICITY : 0) +
(this._isByType ? TYPE_SPECIFICITY : 0);
}
@@ -131,12 +320,15 @@ export class CssVisualStateSelector extends CssSelector {
this._key = args[0];
this._state = args[1];
if (this._key.charAt(0) === AMP) {
if (this._key.charAt(0) === HASH) {
this._match = this._key.substring(1);
this._isById = true;
} else if (this._key.charAt(0) === DOT) {
this._match = this._key.substring(1);
this._isByClass = true;
} else if (this._key.charAt(0) === LSBRACKET) {
this._match = this._key;
this._isByAttr = true;
}
else if (this._key.length > 0) { // handle the case when there is no key. E.x. ":pressed" selector
this._match = this._key;
@@ -158,31 +350,51 @@ export class CssVisualStateSelector extends CssSelector {
if (this._isByType) {
matches = matchesType(this._match, view);
}
if (this._isByAttr) {
matches = matchesAttr(this._key, view);
}
return matches;
}
}
var AMP = "#",
DOT = ".",
COLON = ":";
var HASH = "#";
var DOT = ".";
var COLON = ":";
var SPACE = " ";
var GTHAN = ">";
var LSBRACKET = "[";
var RSBRACKET = "]";
var EQUAL = "=";
export function createSelector(expression: string, declarations: cssParser.Declaration[]): CssSelector {
var colonIndex = expression.indexOf(COLON);
let goodExpr = expression.replace(/>/g, " > ").replace(/\s\s+/g, " ");
var spaceIndex = goodExpr.indexOf(SPACE);
if (spaceIndex >= 0) {
return new CssCompositeSelector(goodExpr, declarations);
}
let leftSquareBracketIndex = goodExpr.indexOf(LSBRACKET);
if (leftSquareBracketIndex === 0) {
return new CssAttrSelector(goodExpr, declarations);
}
var colonIndex = goodExpr.indexOf(COLON);
if (colonIndex >= 0) {
return new CssVisualStateSelector(expression, declarations);
return new CssVisualStateSelector(goodExpr, declarations);
}
if (expression.charAt(0) === AMP) {
return new CssIdSelector(expression.substring(1), declarations);
if (goodExpr.charAt(0) === HASH) {
return new CssIdSelector(goodExpr.substring(1), declarations);
}
if (expression.charAt(0) === DOT) {
if (goodExpr.charAt(0) === DOT) {
// TODO: Combinations like label.center
return new CssClassSelector(expression.substring(1), declarations);
return new CssClassSelector(goodExpr.substring(1), declarations);
}
return new CssTypeSelector(expression, declarations);
return new CssTypeSelector(goodExpr, declarations);
}
class InlineStyleSelector extends CssSelector {