pos-view

Description

Pos-view is an HTML custom element that displays a set of values related to an element's positioning. There are two floating windows in which the information is output:

• position (pos)
• offset hierachy (offset)

Window position (pos)

The following values of an element are displayed:

• the "client" values of the element:
  • clientLeft
  • clientTop
  • clientWidth
  • clientHeight
• the "offset" values of the element:
  • offsetLeft
  • offsetTop
  • offsetWidth
  • offsetHeight
• the "scroll" values of the element:
  • scrollLeft
  • scrollTop
  • scrollWidth
  • scrollHeight
• the result of element.getBoundingClientRect:
  • x
  • y
  • top
  • right
  • bottom
  • left
  • width
  • height

Window offset hierachy (off)

This window shows the hierarchy of the offset values. Starting from the observed element (see parameter "sourceID"), the hierarchy is determined recursively via "offsetParent". The following values are returned for each level:

• offsetLeft
• offsetTop
• offsetWidth
• offsetHeight

Window to start the other windows

There is also (optionally) another floating window (win-start) from which the other two windows can be toggled on and off.

Parameter

sourceID (string)

Id of the element whose position information is to be output.

Which window is display

noWinStart - no parameter value

By default, a small window is displayed with which you can hide and show the other two windows. If the "noWinStart" parameter is passed, then this window is not displayed. In this case at least one of the following parameters must be set "posWin" or "offsetWin" see below.

winPos

If the "winPos" parameter is passed, the position window is displayed. If the "noWinStart" parameter was not passed, the window with the position information, can be called from the start window. Then the "winPos" parameter does not necessarily have to be passed. However, if it is passed, the window is also displayed immediately.

winOffset

If the "winOffset" parameter is passed, the window with the offset hierarchy is displayed. If the "noStartWin" parameter was not passed, then the window with the offset hierarchy can be called from the start window. then the "winOffset" parameter does not necessarily have to be passed. However, if it is passed, the window is also displayed immediately.

Parameter related to position window

Parameters to position the windows for the first time. If no positioning parameter is passed, the windows are automatically placed:

• winStart: above the observed element

• winPos:

  • if winStart exists: To the right of winStart and so that the bottom line is level with winStart
  • if winStart does not exist: above the observed element

• winOffset:

  • if winPos exists: To the right of winPos and so that the bottom line is level with winPos
  • if winPos does not exist:
    • if winStart exists: To the right of winStart and so that the bottom line is level with winStart
    • if winStart does not exist: above the observed element

• winStartLeft

• winStartTop

• winPosLeft

• winPosTop

• winOffsetLeft

• winOffsetTop The value of the attribute must be a unitless number. The number is interpreted as pixels. If you put a plus or minus sign in front of the number (without spaces) , then the value is used to add or subtract it from the automatically calculated value.

You can also specify only one of the values (left or top), the other will then be assigned automatically (see above). You can also set the position for just one window. The other windows then also use the automatic positioning. For example, if you specify winStartLeft and winStartPos, then the positioning of winPos and winOffset orients itself to the position of winStart.

Attributes that determine which rows are displayed in the position window

If you don't use any of the following attributes, then all rows are displayed.

posAllOn - no parameter value

If this attribute is passed, the meaning of the following attributes "posClient", "posOffset", "posScroll", "posBoudrect" is reversed.

posClient - no parameter value

The effect of this parameter depends on whether the "posAllOn" parameter was passed. If only "posClient" is passed, then the line with the client values is displayed. If "posAllOn" was also passed, then the row with these values will be hidden.

posOffset - no parameter value

The effect of this parameter depends on whether the "posAllOn" parameter was passed. If only "posOffset" is passed, then the line with the offset values is displayed. If "posAllOn" was also passed, then the row with these values will be hidden.

posScroll - no parameter value

The effect of this parameter depends on whether the "posAllOn" parameter was passed. If only "posScroll" is passed, then the line with the scroll values is displayed. If "posAllOn" was also passed, then the row with these values will be hidden.

posBoudrect - no parameter value

The effect of this parameter depends on whether the "posAllOn" parameter was passed. If only "posBoudrect" is passed, then the line with the client values is displayed. If "posAllOn" was also passed, then the row with these values will be hidden. This values are generated by "getBoundingClientRect" call by the "sourceID" element.

Styling

posWin

In order to be able to highlight individual values, a "part" attribute was assigned to all elements. The following is a list of all values relating to the position window:

Line offset

• offsetLabel
• offsetLeft
• offsetTop
• offsetWidth
• offsetHeight

Line client

• clientLabel
• clientLeft
• clientTop
• clientWidth
• clientHeight

Line scroll

• scrollLabel
• scrollLeft
• scrollTop
• scrollWidth
• scrollHeight

Line boundRect

• rectLabel
• rectLeft
• rectTop
• rectWidth
• rectHeight
• rectX
• rectY
• rectRight

header

• posLabelHead
• posLeftHead
• posTopHead
• posWidthHead
• posHeightHead
• posXHead
• posYHead
• posRightHead
• posBottomHead

Offset

In order to be able to highlight individual values, a "part" attribute was assigned to all elements. The following is a list of all values relating to the offset window: The last entry in the offset hierarchy is the offset value of the observed element (sourceId). This line has the number 0 in the part name.Then comes the parent, this has the number 1 in the part name. And if there is another parent, then this has the number 2 and so on.

header

• offsetHLabelHead
• offsetHLeftHead
• offsetHTopHead
• offsetHWidthHead
• offsetHHeightHead

Last row with offset of the observed element

• offsetH-0Label
• offsetH-0Left
• offsetH-0Top
• offsetH-0Width
• offsetH-0Height

first (offset) parent of the observed element

• offsetH-1Label
• offsetH-1Left
• offsetH-1Top
• offsetH-1Width
• offsetH-1Height

The window in general

More information about the display of the window itself can be found in the "floating-window" package, which is used as a frame for the content. Here is the list of part attribut values:

• floating-win
• floating-win-main-frame
• floating-win-head
• floating-win-head-title
• floating-win-head-closer
• floating-win-body

Example

The following CSS directive highlights the value for "clientLeft".

::part(clientLeft) {
    background-color: darkred;
    color: white;    
}

If is installed several times on the page and you want to style the custom elements differently, you could, for example, combine the part selector with an id selector.

<pos-view id="view-1" sourceId="test-1" posAllOn></pos-view>

pos-view[id="view-1"]::part(clientLeft) {   
    background-color: darkred;
    color: white;
}