import dependencyObservable = require("ui/core/dependency-observable"); import view = require("ui/core/view"); import proxy = require("ui/core/proxy"); import imageSource = require("image-source"); import definition = require("ui/image"); import enums = require("ui/enums"); import platform = require("platform"); import utils = require("utils/utils"); import * as types from "utils/types"; var SRC = "src"; var IMAGE_SOURCE = "imageSource"; var IMAGE = "Image"; var ISLOADING = "isLoading"; var STRETCH = "stretch"; // on Android we explicitly set propertySettings to None because android will invalidate its layout (skip unnecessary native call). var AffectsLayout = platform.device.os === platform.platformNames.android ? dependencyObservable.PropertyMetadataSettings.None : dependencyObservable.PropertyMetadataSettings.AffectsLayout; function onSrcPropertyChanged(data: dependencyObservable.PropertyChangeData) { var image = data.object; var value = data.newValue; if (types.isString(value)) { value = value.trim(); image.imageSource = null; image["_url"] = value; image._setValue(Image.isLoadingProperty, true); if (utils.isDataURI(value)) { var base64Data = value.split(",")[1]; if (types.isDefined(base64Data)) { image.imageSource = imageSource.fromBase64(base64Data); image._setValue(Image.isLoadingProperty, false); } } else if (imageSource.isFileOrResourcePath(value)) { image.imageSource = imageSource.fromFileOrResource(value); image._setValue(Image.isLoadingProperty, false); } else { imageSource.fromUrl(value).then((r) => { if (image["_url"] === value) { image.imageSource = r; image._setValue(Image.isLoadingProperty, false); } }); } } else if (value instanceof imageSource.ImageSource) { // Support binding the imageSource trough the src property image.imageSource = value; } else { image.imageSource = imageSource.fromNativeSource(value); } } export class Image extends view.View implements definition.Image { public static srcProperty = new dependencyObservable.Property(SRC, IMAGE, new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, onSrcPropertyChanged)); // None on purpose. for iOS we trigger it manually if needed. Android layout handles it. public static imageSourceProperty = new dependencyObservable.Property(IMAGE_SOURCE, IMAGE, new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None)); public static isLoadingProperty = new dependencyObservable.Property(ISLOADING, IMAGE, new proxy.PropertyMetadata(false, dependencyObservable.PropertyMetadataSettings.None)); public static stretchProperty = new dependencyObservable.Property(STRETCH, IMAGE, new proxy.PropertyMetadata(enums.Stretch.aspectFit, AffectsLayout)); constructor(options?: definition.Options) { super(options); } get imageSource(): imageSource.ImageSource { return this._getValue(Image.imageSourceProperty); } set imageSource(value: imageSource.ImageSource) { this._setValue(Image.imageSourceProperty, value); } get src(): any { return this._getValue(Image.srcProperty); } set src(value: any) { this._setValue(Image.srcProperty, value); } get isLoading(): boolean { return this._getValue(Image.isLoadingProperty); } get stretch(): string { return this._getValue(Image.stretchProperty); } set stretch(value: string) { this._setValue(Image.stretchProperty, value); } public _setNativeImage(nativeImage: any) { // } }