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

Fix: background-position with negative values

Browse Source
This commit is contained in:
vakrilov
2015-11-16 16:29:27 +02:00
parent 2b474059ea
commit 831a44f218
5 changed files with 91 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
CrossPlatformModules.csproj
View File

@ -1116,8 +1116,10 @@
<Content Include="apps\ui-tests-app\web-view\web-view.xml">
<SubType>Designer</SubType>
</Content>
<Content Include="css-value\index.js" />
<Content Include="css\index.js" />
<Content Include="css\lib\parse\index.js" />
<Content Include="fetch\fetch.js" />
<Content Include="css-value\reworkcss-value.js" />
<Content Include="ui\layouts\stack-layout\package.json">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
@ -1355,9 +1357,6 @@
<Content Include="js-libs\polymer-expressions\polymer-expressions.js">
<DependentUpon>polymer-expressions.d.ts</DependentUpon>
</Content>
<Content Include="css\reworkcss.js">
<DependentUpon>reworkcss.d.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="apps\tests\xml-declaration\app.ts" />
<TypeScriptCompile Include="apps\tests\xml-declaration\mainPage.ts">
<DependentUpon>mainPage.xml</DependentUpon>
@ -2099,7 +2098,7 @@
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
</WebProjectProperties>
</FlavorProperties>
<UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
<UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
</VisualStudio>
</ProjectExtensions>
</Project>

6
apps/ui-tests-app/css/background.xml
View File

@ -22,6 +22,12 @@
<Button width="50" height="50" text="4.4" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: left bottom;"/>
<Button width="50" height="50" text="4.5" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20% 80%;"/>
<Button width="50" height="50" text="4.6" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20 80;"/>
<Button width="50" height="50" text="4.7" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: -10 20;"/>
<Button width="50" height="50" text="4.8" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 10 -20;"/>
<Button width="50" height="50" text="4.9" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: -10 -20;"/>
<Button width="50" height="50" text="4.10" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center;"/>
<Button width="50" height="50" text="4.11" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: left;"/>
<Button width="50" height="50" text="4.12" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: bottom;"/>
<!-- Size -->
<Button width="50" height="50" text="5.1" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100px 100px;"/>

4
css-value/index.js
View File

@ -31,7 +31,7 @@ Parser.prototype.ident = function(){
};
Parser.prototype.int = function(){
var m = /^((\d+)(\S+)?) */.exec(this.str);
var m = /^(([-\+]?\d+)(\S+)?) */.exec(this.str);
if (!m) return;
this.skip(m);
var n = ~~m[2];
@ -46,7 +46,7 @@ Parser.prototype.int = function(){
};
Parser.prototype.float = function(){
var m = /^(((?:\d+)?\.\d+)(\S+)?) */.exec(this.str);
var m = /^(((?:[-\+]?\d+)?\.\d+)(\S+)?) */.exec(this.str);
if (!m) return;
this.skip(m);
var n = parseFloat(m[2]);

10
css-value/reworkcss-value.d.ts vendored
View File

@ -2,12 +2,10 @@ declare module "css-value" {
interface CSSValue {
type: string;
string: string;
unit: string;
value: number;
unit?: string;
value?: number;
}
interface ParserFunction {
(cssValue: string): Array<CSSValue>;
}
export = ParserFunction;
function parse(cssValue: string): Array<CSSValue>;
export = parse;
}

86
ui/styling/background-common.ts
View File

@ -3,7 +3,14 @@ import colorModule = require("color");
import types = require("utils/types");
import enums = require("ui/enums");
import dts = require("ui/styling/background");
var cssValue = require("css-value");
import cssValue = require("css-value");
interface CSSValue {
type: string;
string: string;
unit?: string;
value?: number;
}
export class Background implements dts.Background {
public static default = new Background(undefined, undefined, undefined, undefined, undefined);
@ -114,7 +121,7 @@ export class Background implements dts.Background {
scale = Math.min(width / imageWidth, height / imageHeight);
}
if(scale > 0){
if (scale > 0) {
imageWidth *= scale;
imageHeight *= scale;
@ -126,35 +133,32 @@ export class Background implements dts.Background {
// position
if (this.position) {
let values = cssValue(this.position);
let v = Background.parsePosition(this.position);
if (v) {
let spaceX = width - imageWidth;
let spaceY = height - imageHeight;
if (values.length === 2) {
let vx = values[0];
let vy = values[1];
if (vx.unit === "%" && vy.unit === "%") {
res.posX = spaceX * vx.value / 100;
res.posY = spaceY * vy.value / 100;
if (v.x.unit === "%" && v.y.unit === "%") {
res.posX = spaceX * v.x.value / 100;
res.posY = spaceY * v.y.value / 100;
}
else if (vx.type === "number" && vy.type === "number" &&
((vx.unit === "px" && vy.unit === "px") || (vx.unit === "" && vy.unit === ""))) {
res.posX = vx.value;
res.posY = vy.value;
else if (v.x.type === "number" && v.y.type === "number" &&
((v.x.unit === "px" && v.y.unit === "px") || (v.x.unit === "" && v.y.unit === ""))) {
res.posX = v.x.value;
res.posY = v.y.value;
}
else if (vx.type === "ident" && vy.type === "ident") {
if (vx.string.toLowerCase() === "center") {
else if (v.x.type === "ident" && v.y.type === "ident") {
if (v.x.string.toLowerCase() === "center") {
res.posX = spaceX / 2;
}
else if (vx.string.toLowerCase() === "right") {
else if (v.x.string.toLowerCase() === "right") {
res.posX = spaceX;
}
if (vy.string.toLowerCase() === "center") {
if (v.y.string.toLowerCase() === "center") {
res.posY = spaceY / 2;
}
else if (vy.string.toLowerCase() === "bottom") {
else if (v.y.string.toLowerCase() === "bottom") {
res.posY = spaceY;
}
}
@ -164,6 +168,50 @@ export class Background implements dts.Background {
return res;
}
private static parsePosition(pos: string): { x: CSSValue, y: CSSValue } {
var res = undefined
let values = cssValue(pos);
if (values.length === 2) {
return {
x: values[0],
y: values[1]
};
}
if (values.length === 1 && values[0].type === "ident") {
let val = values[0].string.toLocaleLowerCase();
let center = {
type: "ident",
string: "center"
};
// If you only one keyword is specified, the other value is "center"
if (val === "left" || val === "right") {
return {
x: values[0],
y: center
};
}
else if (val === "top" || val === "bottom") {
return {
x: center,
y: values[0]
};
}
else if (val === "center") {
return {
x: center,
y: center
};
}
}
return null;
};
public isEmpty(): boolean {
return types.isNullOrUndefined(this.image) && types.isNullOrUndefined(this.color);
}