https://docs-frameright-io.netlify.app/assets/js/cd80e194.0b3251c2.js

1"use strict";(self.webpackChunkframeright_docs=self.webpackChunkframeright_docs||[]).push([[9574],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>g});var i=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,i,a=function(e,t){if(null==e)return{};var n,i,a={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=i.createContext({}),d=function(e){var t=i.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},m=function(e){var t=d(e.components);return i.createElement(p.Provider,{value:t},e.children)},s="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},c=i.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,p=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),s=d(n),c=a,g=s["".concat(p,".").concat(c)]||s[c]||u[c]||r;return n?i.createElement(g,o(o({ref:t},m),{},{components:n})):i.createElement(g,o({ref:t},m))}));function g(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,o=new Array(r);o[0]=c;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[s]="string"==typeof e?e:a,o[1]=l;for(var d=2;d<r;d++)o[d]=n[d];return i.createElement.apply(null,o)}return i.createElement.apply(null,n)}c.displayName="MDXCreateElement"},2235:(e,t,n)=>{n.d(t,{P:()=>r});var i=n(7294),a=n(9960);function r(e){let{href:t}=e;return i.createElement(a.Z,{className:"github-corner-icon",href:t},i.createElement("img",{src:"/img/thirdparty/github-mark.svg",alt:"GitHub repository"}))}},4301:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>c,frontMatter:()=>o,metadata:()=>p,toc:()=>m});var i=n(7462),a=(n(7294),n(3905)),r=n(2235);const o={sidebar_position:80,tags:["reference"]},l="Attribute reference",p={unversionedId:"web-component/attribute-ref",id:"web-component/attribute-ref",title:"Attribute reference",description:"For a more high-level overview of the attributes, see the",source:"@site/docs/web-component/attribute-ref.md",sourceDirName:"web-component",slug:"/web-component/attribute-ref",permalink:"/web-component/attribute-ref",draft:!1,editUrl:"https://github.com/frameright/docs.frameright.io/tree/main/docs/web-component/attribute-ref.md",tags:[{label:"reference",permalink:"/tags/reference"}],version:"current",sidebarPosition:80,frontMatter:{sidebar_position:80,tags:["reference"]},sidebar:"documentationSidebar",previous:{title:"CSS containment",permalink:"/web-component/css-containment"},next:{title:"Contributing",permalink:"/web-component/contributing"}},d={},m=[{value:"<code>data-image-regions=</code>",id:"data-image-regions",level:2},{value:"<code>data-image-region-id=</code>",id:"data-image-region-id",level:2},{value:"<code>data-avoid-no-region=</code>",id:"data-avoid-no-region",level:2},{value:"<code>data-css-contain-fallback=</code>",id:"data-css-contain-fallback",level:2},{value:"<code>data-disabled=</code>",id:"data-disabled",level:2},{value:"<code>data-loglevel=</code>",id:"data-loglevel",level:2},{value:"<code>data-debug-draw-regions=</code>",id:"data-debug-draw-regions",level:2}],s={toc:m},u="wrapper";function c(e){let{components:t,...n}=e;return(0,a.kt)(u,(0,i.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"attribute-reference"},"Attribute reference"),(0,a.kt)(r.P,{href:"https://github.com/Frameright/image-display-control-web-component",mdxType:"GitHubCornerIcon"}),(0,a.kt)("p",null,"For a more high-level overview of the attributes, see the\n",(0,a.kt)("a",{parentName:"p",href:"/web-component/html-attrs"},"HTML attributes")," page."),(0,a.kt)("h2",{id:"data-image-regions"},(0,a.kt)("inlineCode",{parentName:"h2"},"data-image-regions=")),(0,a.kt)("p",null,"Type: string."),(0,a.kt)("p",null,"JSON-formatted array of regions, a regi

1on being an object with the\nfollowing properties:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"id"),": string. Identifier for the region. Unique within the array of regions."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"names"),": array of strings. Names for the region, possibly in different\nlanguages."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"shape"),": string. Only supported value for now: ",(0,a.kt)("inlineCode",{parentName:"li"},"rectangle"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"unit"),": string. Unit of the ",(0,a.kt)("inlineCode",{parentName:"li"},"x"),", ",(0,a.kt)("inlineCode",{parentName:"li"},"y"),", ",(0,a.kt)("inlineCode",{parentName:"li"},"width")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"height")," properties.\nSupported values:",(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"relative"),": Unit is a floating-point number (or numeric string) between 0\nand 1, representing a coordinate or length relative to the image size."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"pixel"),": Unit is a positive integer number (or numeric string), representing\na coordinate or length in pixels, relative to the size specified by the\n",(0,a.kt)("inlineCode",{parentName:"li"},"imageWidth")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"imageHeight")," properties."))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"imageWidth"),": positive integer number (or numeric string). Reference width to\nbe used as a base for ",(0,a.kt)("inlineCode",{parentName:"li"},"x")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"width")," when ",(0,a.kt)("inlineCode",{parentName:"li"},"unit")," is ",(0,a.kt)("inlineCode",{parentName:"li"},"pixel"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"imageHeight"),": positive integer number (or numeric string). Reference height\nto be used as a base for ",(0,a.kt)("inlineCode",{parentName:"li"},"y")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"height")," when ",(0,a.kt)("inlineCode",{parentName:"li"},"unit")," is ",(0,a.kt)("inlineCode",{parentName:"li"},"pixel"),"."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"x"),": X coordinate of the region."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"y"),": Y coordinate of the region."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"width"),": Width of the region."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"height"),": Height of the region.")),(0,a.kt)("admonition",{type:"info"},(0,a.kt)("p",{parentName:"admonition"},"When the\n",(0,a.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset"},(0,a.kt)("inlineCode",{parentName:"a"},"srcset=")),"\nand ",(0,a.kt)("inlineCode",{parentName:"p"},"sizes=")," attributes are used, we have several source images with different\nresolutions. When stating e.g. ",(0,a.kt)("inlineCode",{parentName:"p"},"unit=pixel")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"x=50")," it would be impossible\nfor the web component to know from which of all the supported resolutions the\n",(0,a.kt)("inlineCode",{parentName:"p"},"x")," value relates to. Thus the attributes ",(0,a.kt)("inlineCode",{parentName:"p"},"imageWidth")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"imageHeight"),".")),(0,a.kt)("h2",{id:"data-image-region-id"},(0,a.kt)("inlineCode",{parentName:"h2"},"data-image-region-id=")),(0,a.kt)("p",null,"Type: string."),(0,a.kt)("p",null,"Uniquely identifies a region within ",(0,a.kt)("inlineCode",{parentName:"p"},"data-image-regions="),". If set, the web\ncomponent will zoom in on the region with the matching ",(0,a.kt)("inlineCode",{parentName:"p"},"id")," property, no matter\nwhat. If not set, the web component will zoom in on the region that best fits\nthe current element size."),(0,a.kt)("p",null,"To force the web component not to zoom in on any region, essentially behaving\nlike a standard ",(0,a.kt)("inlineCode",{parentName:"p"},"<img>")," tag with ",(0,a.kt)("inlineCode",{parentName:"p"},"object-fit: cover"),", you can set this attribute\nto ",(0,a.kt)("inlineCode",{parentName:"p"},'data-image-region-id="<no region>"'),". This is roughly the same as setting\n",(0,a.kt)("inlineCode",{parentName:"p"},'data-disabled="all"'),", although the CSS containment will still be applied."),(0,a.kt)("p",null,"See ",(0,a.kt)("a",{parentName:"p",href:"/web-component/css-containment"},"CSS containment")," for more information."),(0,a.kt)("h2",{id:"data-avoid-no-region"},(0,a.kt)("inlineCode",{parentName:"h2"},"data-avoid-no-region=")),(0,a.kt)("p",null,"Type: string."),(0,a.kt)("p",null,"Supported values:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"off"),": The web component considers the full original image as a region valid\nregion to select. If the component's ratio and the image's ratio are very\nclose, the component will decide it's best not to zoom in on any region."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"on")," (default): The web component will always prefer to zoom in on a region\nif possible, rather than selecting the full original image.")),(0,a.kt)("admonition",{type:"info"},(0,a.kt)("p",{parentName:"admonition"},(0,a.kt)("inlineCode",{parentName:"p"},'data-avoid-no-region="on"')," is not a guarantee that the web\ncomponent will always zoom in on a region. For example if there are no\nregions, or if ",(0,a.kt)("inlineCode",{parentName:"p"},'data-image-region-id="<no region>"')," is set at the same time,\nthe web component will still select the full original image.")),(0,a.kt)("h2",{id:"data-css-contain-fallback"},(0,a.kt)("inlineCode",{parentName:"h2"},"data-css-contain-fallback=")),(0,a.kt)("p",null,"Type: string."),(0,a.kt)("p",null,"Supported values:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"disable-component")," (default): When the browser doesn't support\n",(0,a.kt)("inlineCode",{parentName:"li"},"contain: paint;"),", fall back to disabling the web component."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"overflow-hidden"),": Fall back to setting ",(0,a.kt)("inlineCode",{parentName:"li"},"overflow: hidden;")," on the parent\nelement instead. This works well if the component is the only child its parent\nelement, otherwise it may remove scrollbars too aggressively."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"disable-containment"),": Fall back to not touching the parent element. This may\ncause rogue scrollbars."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"}

1,"force"),": Even if the browser is known not to support ",(0,a.kt)("inlineCode",{parentName:"li"},"contain: paint;"),", set\nit anyway.")),(0,a.kt)("p",null,"See ",(0,a.kt)("a",{parentName:"p",href:"/web-component/browsers"},"browser support")," and\n",(0,a.kt)("a",{parentName:"p",href:"/web-component/css-containment"},"CSS containment")," for more information."),(0,a.kt)("h2",{id:"data-disabled"},(0,a.kt)("inlineCode",{parentName:"h2"},"data-disabled=")),(0,a.kt)("p",null,"Type: string."),(0,a.kt)("p",null,"Supported values:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"none")," (default): No functionality disabled. The web component will behave as\nexpected."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"all"),": All functionality disabled. The web component will behave like a\nstandard ",(0,a.kt)("inlineCode",{parentName:"li"},"<img>")," tag."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"css-contain"),": Use of CSS ",(0,a.kt)("inlineCode",{parentName:"li"},"contain:")," disabled. The web component will behave\nas if this feature wasn't supported by the browser and follow the fallback\nbehavior set by the ",(0,a.kt)("inlineCode",{parentName:"li"},"data-css-contain-fallback=")," attribute.")),(0,a.kt)("p",null,"See ",(0,a.kt)("a",{parentName:"p",href:"/web-component/browsers"},"browser support")," and\n",(0,a.kt)("a",{parentName:"p",href:"/web-component/css-containment"},"CSS containment")," for more information."),(0,a.kt)("h2",{id:"data-loglevel"},(0,a.kt)("inlineCode",{parentName:"h2"},"data-loglevel=")),(0,a.kt)("p",null,"Type: string."),(0,a.kt)("p",null,"Logging level for console output. Supported values:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"off")," (default): No console output."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"fatal"),": Only fatal messages."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"error"),": Only error and fatal messages."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"warn"),": Only warning, error and fatal messages."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"info"),": Only info, warning, error and fatal messages."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"debug"),": All messages.")),(0,a.kt)("h2",{id:"data-debug-draw-regions"},(0,a.kt)("inlineCode",{parentName:"h2"},"data-debug-draw-regions=")),(0,a.kt)("p",null,"Type: string."),(0,a.kt)("p",null,"Whether or not to draw the image regions as an overlay on top of the image, for\ndebugging purposes. Supported values:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"off")," (default): No drawing."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"on"),": Drawing is performed by creating sibling ",(0,a.kt)("inlineCode",{parentName:"li"},"<div>")," elements, giving them\na border and letting them overlay the image.")),(0,a.kt)("admonition",{type:"caution"},(0,a.kt)("p",{parentName:"admonition"},"This will only work if:"),(0,a.kt)("ul",{parentName:"admonition"},(0,a.kt)("li",{parentName:"ul"},"the web component is not in ",(0,a.kt)("inlineCode",{parentName:"li"},'data-disabled="all"')," mode, and"),(0,a.kt)("li",{parentName:"ul"},"the web component is at the top-left corner of its parent element."))))}c.isMDXComponent=!0}}]);