Skip to content
Snippets Groups Projects
Select Git revision
  • c3b3b3f031da7c77ebd9ef8d5b9c6e885603e7e8
  • main default protected
2 results

image_2.2.2.xml

Blame
  • 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="{