From 191b91839e42c3d8ab709033c73570e1b5acbcdd Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Wed, 20 May 2015 16:12:19 +0300 Subject: [PATCH 1/3] isDataURI method added --- utils/utils-common.ts | 10 ++++++++++ utils/utils.d.ts | 6 ++++++ 2 files changed, 16 insertions(+) diff --git a/utils/utils-common.ts b/utils/utils-common.ts index 92d38d4df..0a22f8594 100644 --- a/utils/utils-common.ts +++ b/utils/utils-common.ts @@ -62,4 +62,14 @@ export function isFileOrResourcePath(path: string): boolean { return path.indexOf("~/") === 0 || // relative to AppRoot path.indexOf("/") === 0 || // absolute path path.indexOf(RESOURCE_PREFIX) === 0; // resource +} + +export function isDataURI(uri: string): boolean { + if (!types.isString(uri)) { + return false; + } + + var firstSegment = uri.trim().split(',')[0]; + + return firstSegment && firstSegment.indexOf("data:") === 0 && firstSegment.indexOf('base64') >= 0; } \ No newline at end of file diff --git a/utils/utils.d.ts b/utils/utils.d.ts index 25a22009d..bf572e0bf 100644 --- a/utils/utils.d.ts +++ b/utils/utils.d.ts @@ -140,4 +140,10 @@ * @param path The path. */ export function isFileOrResourcePath(path: string): boolean + + /** + * Returns true if the specified URI is data URI (http://en.wikipedia.org/wiki/Data_URI_scheme). + * @param uri The URI. + */ + export function isDataURI(uri: string): boolean } From f38b1f8950a6b54be55dd5b8ca6018475d871ca1 Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Wed, 20 May 2015 16:13:25 +0300 Subject: [PATCH 2/3] data URI support for CSS background-image added --- ui/styling/style.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/ui/styling/style.ts b/ui/styling/style.ts index 54cf12904..6aa8dbd76 100644 --- a/ui/styling/style.ts +++ b/ui/styling/style.ts @@ -10,6 +10,7 @@ import styleProperty = require("ui/styling/style-property"); import converters = require("ui/styling/converters"); import enums = require("ui/enums"); import imageSource = require("image-source"); +import utils = require("utils/utils"); // key is the property id and value is Dictionary; var _registeredHandlers = {}; @@ -348,8 +349,13 @@ function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) { var pattern: RegExp = /url\(('|")(.*?)\1\)/; var url = (data.newValue).match(pattern)[2]; - if (imageSource.isFileOrResourcePath(url)) { + if (utils.isFileOrResourcePath(url)) { style._setValue(backgroundImageSourceProperty, imageSource.fromFileOrResource(url), observable.ValueSource.Local); + } else if (utils.isDataURI(url)) { + var base64Data = url.split(",")[1]; + if (types.isDefined(base64Data)) { + style._setValue(backgroundImageSourceProperty, imageSource.fromBase64(base64Data), observable.ValueSource.Local); + } } else if (types.isString(url)) { imageSource.fromUrl(url).then(r=> { style._setValue(backgroundImageSourceProperty, r, observable.ValueSource.Local); From 37aa72a7d2a0dba0fb74195f2465e9f4b50751ac Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Thu, 21 May 2015 11:25:40 +0300 Subject: [PATCH 3/3] test added --- apps/tests/ui/style/style-tests.ts | 16 +++++++++++++++- ui/styling/style.ts | 30 ++++++++++++++++++------------ 2 files changed, 33 insertions(+), 13 deletions(-) diff --git a/apps/tests/ui/style/style-tests.ts b/apps/tests/ui/style/style-tests.ts index b0788f940..6879dbfe0 100644 --- a/apps/tests/ui/style/style-tests.ts +++ b/apps/tests/ui/style/style-tests.ts @@ -8,12 +8,26 @@ import helper = require("../../ui/helper"); import styling = require("ui/styling"); import types = require("utils/types"); import viewModule = require("ui/core/view"); +import styleModule = require("ui/styling/style"); import dependencyObservableModule = require("ui/core/dependency-observable"); // // # Styling // +export function test_css_dataURI_is_applied_to_backgroundImageSource() { + var stack = new stackModule.StackLayout(); + + helper.buildUIAndRunTest(stack, function (views: Array) { + var page = views[1]; + page.css = "StackLayout { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC;') }"; + + var value = stack.style._getValue(styleModule.backgroundImageSourceProperty); + + TKUnit.assert(value !== undefined, "Style background-image not loaded correctly from data URI."); + }); +} + // Test for inheritance in different containers export function test_css_is_applied_inside_StackLayout() { var testButton = new buttonModule.Button(); @@ -746,4 +760,4 @@ export var test_CSS_isAppliedOnPage = function () { // // For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic. -// \ No newline at end of file +// diff --git a/ui/styling/style.ts b/ui/styling/style.ts index 6aa8dbd76..13d6b4b9a 100644 --- a/ui/styling/style.ts +++ b/ui/styling/style.ts @@ -346,20 +346,26 @@ export var backgroundImageProperty = new styleProperty.Property("backgroundImage function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) { var style =