Select Git revision
image_2.2.2.xml
image_2.2.2.xml 18.54 KiB
<widget xmlns="http://openajax.org/metadata" spec="1.0" id="http://microsoft.com/appmagic/image" name="image" jsClass="AppMagic.Controls.Image" version="2.2.2" styleable="true" runtimeCost="1" xmlns:appMagic="http://schemas.microsoft.com/appMagic">
<author name="Microsoft AppMagic" />
<license type="text/html"><![CDATA[<p>TODO: Need license text here.</p>]]></license>
<description><![CDATA[TEXT
Control description here.]]></description>
<requires>
<require type="css" src="css/image.css" excludeOnFeatureGate="controls.reactImage" />
<require type="javascript" src="js/image.js" excludeOnFeatureGate="controls.reactImage" />
<require type="javascript" src="js/imageReactProxy.js" includeOnFeatureGate="controls.reactImage" />
<require type="javascript" src="/openSource/unmodified/exif-js/exif.min.js" />
</requires>
<appMagic:capabilities contextualViewsEnabled="true" autoBorders="true" autoFocusedBorders="true" autoPointerViewState="true" autoDisabledViewState="true" autoBorderRadius="true" isVersionFlexible="true" supportsSetFocus="true" />
<content>
<!-- When the image is meant to be clickable, a <button> is overlaid on top of the actual image.
Unfortunately, the control does not know if OnSelect behavior is specified by the user,
so we use TabIndex >= 0 as a heuristic that the image should be a button.
When the image is intended to be non-interactive (TabIndex < 0), a <div> is overlaid instead.
Ideally, users should set TabIndex >= 0 whenever they have OnSelect behavior.
This div supports the case when OnSelect behavior is specified but users did not set
TabIndex >= 0. The div will catch clicks and trigger OnSelect.
<button> has to be used instead of <div role="button"> because of VoiceOver/iOS bug where
<div> elements scaled down with CSS transforms are not selectable (bug 2504010).
--><![CDATA[
<div
class="appmagic-image no-focus-outline"
data-bind="{
style: {
paddingTop: properties.PaddingTop,
paddingRight: properties.PaddingRight,
paddingBottom: properties.PaddingBottom,
paddingLeft: properties.PaddingLeft,
backgroundColor: autoProperties.Fill,
height: '100%',
width: '100%',
opacity: properties.Transparency() >= 1 ? '0' : 1 - properties.Transparency(),
visibility: properties.Transparency() >= 1 ? 'hidden' : ''
},
visible: properties.Visible
}">
<!-- ko if: !$data.imageSrc || !properties.ImagePosition().objectFit || Core.Environment.getBrowserId() === Core.Environment.BrowserId.InternetExplorer -->
<div
data-bind="{
css: {
'appmagic-image-inner': true,
rotateHorizontal: $data.hasHorizontalRotation && $data.hasHorizontalRotation()
},
style: {
height: innerHeight,
width: innerWidth,
visibility: innerVisibility,
backgroundSize: backgroundSize,
backgroundRepeat: properties.ImagePosition().repeat,
backgroundPosition: properties.ImagePosition().position,
backgroundImage: imageUrl,
'-webkit-transform': transform,
transform: transform,
forcedColorAdjust: 'none'
},
attr: {
role: properties.TabIndex() < 0 && !!properties.AccessibleLabel() && 'img',
'aria-label': properties.TabIndex() < 0 && properties.AccessibleLabel() ? properties.AccessibleLabel() : null
}
}">
</div>
<!-- /ko -->
<!-- ko if: $data.imageSrc && properties.ImagePosition().objectFit && Core.Environment.getBrowserId() !== Core.Environment.BrowserId.InternetExplorer -->
<img
data-bind="{