HTML — popover 属性

【この訳に特有な表記規約】

◎表記記号

6.12. `popover^a 属性

`popover@a 内容~属性は、 どの`~HTML要素$に設定してもヨイ。 指定された場合、 当の要素は,[ 示されるようになる ]まで具現化されなくなり、 そうなった時点で,他の~page内容の上層に具現化される。 ◎ All HTML elements may have the popover content attribute set. When specified, the element won't be rendered until it becomes shown, at which point it will be rendered on top of other page content.

【 `popover^en の意味: 他のもの越しに( `over^en )飛び出る( `pop^en )。 】【 既定の具現化-法(~UA~stylesheet)は、 `§ 具現化 内の § ~flow内容@~HTMLrendering#flow-content-3$にて見出せる。 具現化(~layout)を もっと詳細に制御する方法は、 従来からある `CSS Positioned Layout@~CSSPOS$cite に加えて, `CSS Anchor Positioning@~CSSANCHOR$cite が受持つことになろう。 】

`popover$a 属性は、 大域~属性であり,[ ~popoverの機能性を最も関連な意味論を伴う要素に適用できるようにする ]ことを確保する柔軟性を作者に許容する。 ◎ The popover attribute is a global attribute that allows authors flexibility to ensure popover functionality can be applied to elements with the most relevant semantics.

[ ~web~site用の大域的な~navi ]の中に~popover下位-~navi用の[ ~linkたちが成す~list ]をどう作成するかを次にデモる: ◎ The following demonstrates how one might create a popover sub-navigation list of links, within the global navigation for a website.

`popover-attribute-1^xCode

作者は、 ~accessibilityの意味論を伴わない要素 — 一例として `div$e 要素 — に対し `popover$a を利用するときには、 適切な~ARIA属性を利用して, 当の~popoverが~access可能になることを確保するベキである。 ◎ When using popover on elements without accessibility semantics, for instance the div element, authors should use the appropriate ARIA attributes to ensure the popover is accessible.

~custom~menu( `menu^v )用の~popoverを作成する基底的~markupを次に示す — そこでは、 ~popoverが呼出されたとき, 1 個目の~menu~item( `menuitem^v )が[ `autofocus$a 属性の利用に因り,~keyboard~focusを受取る ]ことになる。 それでも、[ 矢印~UIkeyで各~menu~itemへ~navigateすること ]および[ 各~menu~item用の作動化の挙動 ]には,作者による~scriptingが必要になる。 ~custom~menuを伴う~widgetを築くための追加的な要件は、 `WAI-ARIA 仕様@~ARIA1#menu$にて定義される。 ◎ The following shows the baseline markup to create a custom menu popover, where the first menuitem will receive keyboard focus when the popover is invoked due to the use of the autofocus attribute. Navigating the menuitems with arrow keys and activation behaviors would still need author scripting. Additional requirements for building custom menus widgets are defined in the WAI-ARIA specification.

`popover-attribute-2^xCode

~popoverは[ 状態s~messageを具現化する/ 利用者が遂行した動作を確認する ]ためにも有用になり得る。 `output$e 要素~内に~popoverを露呈する方法を次にデモる。 ◎ A popover can be useful for rendering a status message, confirming the action performed by the user. The following demonstrates how one could reveal a popover in an output element.

<button id=submit>Submit</button>
<p><output><span popover=manual></span></output></p>

<script>
 const %sBtn = document.getElementById("submit");
 const %outSpan = document.querySelector("output [popover=manual]");
 let %successMessage;
 let %errorMessage;

 /* 
動作の成否を決定するための~logicを定義して,利用する適切な[
成功/~error
]~messageを決定する。
◎
define logic for determining success of action and determining the appropriate success or error messages to use
 */

 %sBtn.addEventListener("click", ()=> {
  if ( %success ) {
   %outSpan.textContent = %successMessage;
  }
  else {
   %outSpan.textContent = %errorMessage;
  }
  %outSpan.showPopover();

  setTimeout(function () {
   %outSpan.hidePopover();
  }, 10000);
 });
</script>

注記: `output$e 要素の中へ~popover要素を挿入すると、 一般に,[ それが可視になるとき,~screen~readerに内容を発声させる ]ことになる。 これは、 これらの支援技術の利用者にとって — 内容の複階性や可視になる頻度に依存して — 有用にも煩わしくもなり得る。 `output$e 要素~その他の~ARIA~live領域を利用しているときは、 このことを念頭に置いて,最良な利用者~体験を確保すること。 ◎ Inserting a popover element into an output element will generally cause screen readers to announce the content when it becomes visible. Depending on the complexity or frequency of the content, this could be either useful or annoying to users of these assistive technologies. Keep this in mind when using the output element or other ARIA live regions to ensure the best user experience.

`popover$a 属性は,`列挙d属性$であり、 次に挙げる~keyword, とり得る状態, それらの対応付けが定義される: ◎ The popover attribute is an enumerated attribute with the following keywords and states:

~keyword 状態 概略的な記述
`auto@v `自動@st 開かれたときは、 他の~popoverを閉じることに加え, `軽く退ける$ふるまいを伴う。
空~文字列
`manual@v `手動@st 他の~popoverを閉じないことに加え,[ `軽く退ける$ふるまい/`閉-要請$ ]に応答しない。
`~popoverなし@st 【~popoverとして挙動しない。】
◎ Keyword|State|Brief description auto|auto|Closes other popovers when opened; has light dismiss. (the empty string)|↑|↑ manual|manual|Does not close other popovers; does not light dismiss or respond to close requests.

この属性の[ `欠落~値~用の既定の状態$は `~popoverなし$st / `妥当でない値~用の既定の状態$は `手動$st ]とする。 ◎ The attribute's missing value default is the no popover state, and its invalid value default is the manual state.

`~popover要素@ とは、 `~HTML要素$のうち[ その `popover$a 属性の状態 ~NEQ `~popoverなし$st ]を満たすもの (言い換えれば, `popover$a 属性を有するもの)をいう。 【この用語は、他所を簡便に述べるための,この訳による追加。】

`popover@m ~IDL属性は、 `既知な値のみに制限され$る下で, `popover$a 属性を`反映する$モノトスル。 ◎ The popover IDL attribute must reflect the popover attribute, limited to only known values.

各`~HTML要素$には、 `~popover可視性~状態@ がある — その値は,[ `隠している@i / `示している@i ]いずれかであり、 初期~時は, `隠している$i とする。 ◎ Every HTML element has a popover visibility state, initially hidden, with these potential values: • hidden • showing

各`文書$は、 `~popover~pointerdown~target@doc を有する — それは、[ ある`~HTML要素$ / ~NULL ]であり,初期~時は ~NULL とする。 ◎ The Document has a popover pointerdown target, which is an HTML element or null, initially null.

各`~HTML要素$は、 次に挙げるものを有する ◎ ↓

すべての`~HTML要素$ %要素 は、 `属性~変更-時の手続き$として次を利用する — それは、 所与の ( %局所~名, %旧-値, %値, %名前空間 ) に対し: ◎ The following attribute change steps, given element, localName, oldValue, value, and namespace, are used for all HTML elements:

  1. ~IF[ %名前空間 ~NEQ ~NULL ] ⇒ ~RET ◎ If namespace is not null, then return.
  2. ~IF[ %局所~名 ~NEQ "`popover$a" ] ⇒ ~RET ◎ If localName is not popover, then return.
  3. ~IF[ %要素 の`~popover可視性~状態$ ~EQ `示している$i ]~AND[ `popover$a 属性が[ %旧-値 をとるときの状態, %値 をとるときの状態 ]は異なる ] ⇒ `~popoverを隠す$( %要素, ~T, ~T, ~F ) ◎ If element's popover visibility state is in the showing state and oldValue and value are in different states, then run the hide popover algorithm given element, true, true, and false.
%element.`showPopover()$m
`~popover要素$ %element を`上端~層$に追加することにより, %element を示す。 %element の `popover$a 属性の状態 ~EQ `自動$stならば、 これは,同じ状態にある他の要素のうち[ `最上層な~popover先祖を見出す$~algoに則って, %element の先祖であるもの ]を除くすべてを閉じることになる。 ◎ Shows the popover element by adding it to the top layer. If element's popover attribute is in the auto state, then this will also close all other auto popovers unless they are an ancestor of element according to the topmost popover ancestor algorithm.
%element.`hidePopover()$m
`~popover要素$ %element を`上端~層$から除去した上で、[ %element に `display$p: `none^v を適用する ]ことにより, %element を隠す。 ◎ Hides the popover element by removing it from the top layer and applying display: none to it.
%element.`togglePopover()$m
`~popover要素$ %element を[ 隠しているならば示す/ 示しているならば隠す ]。 この~methodは、 ~callした後において当の~popoverを[ 示しているならば ~T / 隠しているならば ~F ]を返す。 ◎ If the popover element is not showing, then this method shows it. Otherwise, this method hides it. This method returns true if the popover is open after calling it, otherwise false.

`showPopover(options)@m ~method手続きは: ◎ The showPopover(options) method steps are:

  1. %呼出元 ~LET %options[ "`source$mb" ] ◎ Let invoker be options["source"] if it exists;\
  2. ~IF[ %呼出元 ~EQ ε ] ⇒ %呼出元 ~SET ~NULL ◎ otherwise, null.
  3. `~popoverを示す$( コレ, ~T, %呼出元 ) ◎ Run show popover given this, true, and invoker.

`~popoverを示す@ ときは、 所与の ( `~HTML要素$ %要素, 真偽値 %例外を投出するか, [ `~HTML要素$ / ~NULL ] %呼出元 ) に対し: ◎ To show popover, given an HTML element element, a boolean throwExceptions, and an HTML element or null invoker:

  1. ~IF[ `~popoverの妥当性を検査する$( %要素, `隠している$i, %例外を投出するか, ~NULL ) ~EQ ~F ] ⇒ ~RET ◎ If the result of running check popover validity given element, false, throwExceptions, and null is false, then return.
  2. %文書 ~LET %要素 の`~node文書$ ◎ Let document be element's node document.
  3. ~Assert: %要素 の`~popover呼出元$el ~NEQ ~NULL ◎ Assert: element's popover invoker is null.
  4. ~Assert: %要素 ~NIN %文書 の`上端~層$ ◎ Assert: element is not in document's top layer.
  5. %入子な示すか ~LET %要素 の`~popoverを示すまたは隠す途中か$el ◎ Let nestedShow be element's popover showing or hiding.
  6. %要素 の`~popoverを示すまたは隠す途中か$el ~SET ~T ◎ Set element's popover showing or hiding to true.
  7. %取消されなかったか ~LET `~eventを発火する$( %要素, `beforetoggle$et, `ToggleEvent$I ) — 次のように初期化して ⇒# `cancelable$m 属性 ~SET ~T `oldState$m 属性 ~SET `closed^l, `newState$m 属性 ~SET `open^l ◎ ↓ Let cleanupShowingFlag be the following steps: • If nestedShow is false, then set element's popover showing or hiding to false. ◎ If the result of firing an event named beforetoggle, using ToggleEvent, with the cancelable attribute initialized to true, the oldState attribute initialized to "closed", and the newState attribute initialized to "open" at element\
  8. ~IF[ %取消されなかったか ~EQ ~F ] ⇒ ~GOTO `最後の段^i

    【 この訳では、 この段~以降において ~GOTO を利用して, 原文による入子な手続き( %cleanupShowingFlag )を伴う制御~flowを少し単純~化する。 】

    ◎ is false,\ ↓↓ then run cleanupShowingFlag and return.
  9. ~IF[ `~popoverの妥当性を検査する$( %要素, `隠している$i, %例外を投出するか, %文書 ) ~EQ ~F ] ⇒ ~GOTO `最後の段^i ◎ If the result of running check popover validity given element, false, throwExceptions, and document is false,\ ↓↓ then run cleanupShowingFlag and return.

    注記: ここで再び`~popoverの妥当性を検査する$わけは、[ 上で発火した `beforetoggle$et ~event ]用の`~event~handler$が[ %要素 を`切断-$し得る/ %要素 の `popover$a 属性を変更し得る ]からである。 ◎ Check popover validity is called again because firing the beforetoggle event could have disconnected this element or changed its popover attribute.

  10. %~focusを復旧するべきか ~LET ~F ◎ Let shouldRestoreFocus be false.
  11. ~IF[ %要素 の `popover$a 属性の状態 ~EQ `自動$st ]: ◎ If element's popover attribute is in the auto state, then:

    1. %元の種別 ~LET %要素 の `popover$a 属性の値 ◎ Let originalType be the value of element's popover attribute.
    2. %先祖 ~LET `最上層な~popover先祖を見出す$( %要素, %呼出元, ~T ) ◎ Let ancestor be the result of running the topmost popover ancestor algorithm given element, invoker, and true.
    3. ~IF[ %先祖 ~EQ ~NULL ] ⇒ %先祖 ~SET %文書 ◎ If ancestor is null, then set ancestor to document.
    4. %~eventを発火するか ~LET ~IS[ %入子な示すか ~EQ ~F ] ◎ ↓
    5. `ある所までの~popoverをすべて隠す$( %先祖, ~F, %~eventを発火するか ) ◎ Run hide all popovers until given ancestor, false, and not nestedShow.
    6. ~IF[ %元の種別 ~NEQ %要素 の `popover$a 属性の値 ]: ◎ If originalType is not equal to the value of element's popover attribute, then:

      1. ~IF[ %例外を投出するか ~EQ ~T ] ⇒ ~THROW `InvalidStateError$E ◎ If throwExceptions is true, then throw a "InvalidStateError" DOMException.
      2. ~RET ◎ Return.
    7. ~IF[ `~popoverの妥当性を検査する$( %要素, `隠している$i, %例外を投出するか, %文書 ) ~EQ ~F ] ⇒ ~GOTO `最後の段^i ◎ If the result of running check popover validity given element, false, throwExceptions, and document is false,\ ↓↓ then run cleanupShowingFlag and return.

      注記: ここで再び`~popoverの妥当性を検査する$わけは、[ 上で`ある所までの~popoverをすべて隠す$ときに発火され得る `beforetoggle$et ~event ]用の`~event~handler$が[ %要素 を`切断-$し得る/ %要素 の `popover$a 属性を変更し得る ]からである。 ◎ Check popover validity is called again because running hide all popovers until above could have fired the beforetoggle event, and an event handler could have disconnected this element or changed its popover attribute.

    8. ~IF[ `最上層な自動~popoverを見出す$( %文書 ) ~EQ ~NULL ] ⇒ %~focusを復旧するべきか ~SET ~T ◎ If the result of running topmost auto popover on document is null, then set shouldRestoreFocus to true.

      注記: これは、[ 当の~stackを成す最初の~popover用に限り, 前回に~focusした要素に~focusを返す ]ことを確保する。 ◎ This ensures that focus is returned to the previously-focused element only for the first popover in a stack.

    9. %要素 の`~popover閉-注視器$el ~SET `閉-注視器を確立する$( %要素 に`関連な大域~obj$ ) — 次も与える下で: ◎ Set element's popover close watcher to the result of establishing a close watcher given element's relevant global object, with:

      • `取消-動作^i は ⇒ ~RET ~T ◎ cancelAction being to return true.
      • `閉-動作^i は ⇒ `~popoverを隠す$( %要素, ~T, ~T, ~F ) ◎ closeAction being to hide a popover given element, true, true, and false.
  12. %要素 の`前回に~focusされた要素$ ~SET ~NULL ◎ Set element's previously focused element to null.
  13. %元々~focusされた要素 ~LET %文書 が`指名する被focus区画$docの`~DOM~anchor$ ◎ Let originallyFocusedElement be document's focused area of the document's DOM anchor.
  14. `上端~層に要素を追加する$( %要素 ) ◎ Add an element to the top layer given element.
  15. %要素 の`~popover可視性~状態$ ~SET `示している$i ◎ Set element's popover visibility state to showing.
  16. %要素 の`~popover呼出元$el ~SET %呼出元 ◎ Set element's popover invoker to invoker.
  17. %要素 の`暗黙的な~anchor要素$ ~SET %呼出元 ◎ Set element's implicit anchor element to invoker.
  18. `~popoverを~focusする$( %要素 ) ◎ Run the popover focusing steps given element.
  19. ~IF[ %~focusを復旧するべきか ~EQ ~T ]~AND[ %要素 は`~popover要素$である ] ⇒ %要素 の`前回に~focusされた要素$ ~SET %元々~focusされた要素 ◎ If shouldRestoreFocus is true and element's popover attribute is not in the no popover state, then set element's previously focused element to originallyFocusedElement.
  20. `~popover用の~toggle~event~taskを~queueする$( %要素, `closed^l, `open^l ) ◎ Queue a popover toggle event task given element, "closed", and "open".
  21. `最後の段^i ⇒ ~IF[ %入子な示すか ~EQ ~F ] ⇒ %要素 の`~popoverを示すまたは隠す途中か$el ~SET ~F ◎ ↑↑ Run cleanupShowingFlag.

`~popover用の~toggle~event~taskを~queueする@ ときは、 所与の ( 要素 %要素, 文字列 %旧-状態, 文字列 %新-状態 ) に対し: ◎ To queue a popover toggle event task given an element element, a string oldState, and a string newState:

  1. %~toggle~task ~LET %要素 の`~popover用の~toggle~task追跡子$el ◎ ↓
  2. ~IF[ %~toggle~task ~NEQ ~NULL ]: ◎ If element's popover toggle task tracker is not null, then:

    1. %旧-状態 ~SET %~toggle~task の`旧-状態$tTk ◎ Set oldState to element's popover toggle task tracker's old state.
    2. %~toggle~task の`~task$tTkを それが属する`~task~queue$から除去する ◎ Remove element's popover toggle task tracker's task from its task queue.
    3. %要素 の`~popover用の~toggle~task追跡子$el ~SET ~NULL ◎ Set element's popover toggle task tracker to null.
  3. %~task ~LET `要素~taskを~queueする$( `~DOM操作~task~source$, %要素, 次の手続き ) ◎ Queue an element task given the DOM manipulation task source and element\

    手続きは: ◎ to run the following steps:

    1. `~eventを発火する$( %要素, `toggle$et, `ToggleEvent$I ) — 次のように初期化して ⇒# `oldState$m 属性 ~SET %旧-状態, `newState$m 属性 ~SET %新-状態 ◎ Fire an event named toggle at element, using ToggleEvent, with the oldState attribute initialized to oldState and the newState attribute initialized to newState.
    2. %要素 の`~popover用の~toggle~task追跡子$el ~SET ~NULL ◎ Set element's popover toggle task tracker to null.
  4. %要素 の`~popover用の~toggle~task追跡子$el ~SET 次に挙げる~itemからなる`構造体$ ⇒# `~task$tTk ~SET %~task, `旧-状態$tTk ~SET %旧-状態 ◎ Set element's popover toggle task tracker to a struct with task set to the just-queued task and old state set to oldState.

`hidePopover()@m ~method手続きは: ◎ The hidePopover() method steps are:

  1. `~popoverを隠す$( コレ, ~T, ~T, ~T ) ◎ Run the hide popover algorithm given this, true, true, and true.

`~popoverを隠す@ ときは、 所与の ⇒# `~HTML要素$ %要素, 真偽値 %前回に~focusした要素を~focusするか, 真偽値 %~eventを発火するか, 真偽値 %例外を投出するか ◎終 に対し: ◎ To hide a popover given an HTML element element, a boolean focusPreviousElement, a boolean fireEvents, and a boolean throwExceptions:

  1. ~IF[ `~popoverの妥当性を検査する$( %要素, `示している$i, %例外を投出するか, ~NULL ) ~EQ ~F ] ⇒ ~RET ◎ If the result of running check popover validity given element, true, throwExceptions, and null is false, then return.
  2. %文書 ~LET %要素 の`~node文書$ ◎ Let document be element's node document.
  3. %入子な隠すか ~LET %要素 の`~popoverを示すまたは隠す途中か$el ◎ Let nestedHide be element's popover showing or hiding.
  4. %要素 の`~popoverを示すまたは隠す途中か$el ~SET ~T ◎ Set element's popover showing or hiding to true.
  5. ~IF[ %入子な隠すか ~EQ ~T ] ⇒ %~eventを発火するか ~SET ~F

    【 この訳では、 以降において ~GOTO を利用して, 原文による入子な手続き( %cleanupSteps )を伴う制御~flowを少し単純~化する。 】

    ◎ If nestedHide is true, then set fireEvents to false. ◎ ↓↓ Let cleanupSteps be the following steps: • If nestedHide is false, then set element's popover showing or hiding to false. •• If element's popover close watcher is not null, then: ••• Destroy element's popover close watcher. ••• Set element's popover close watcher to null.
  6. ~IF[ %要素 の `popover$a 属性の状態 ~EQ `自動$st ]: ◎ If element's popover attribute is in the auto state, then:

    1. `ある所までの~popoverをすべて隠す$( ↓ ) ⇒# %要素, %前回に~focusした要素を~focusするか, %~eventを発火するか ◎ Run hide all popovers until given element, focusPreviousElement, and fireEvents.
    2. ~IF[ `~popoverの妥当性を検査する$( %要素, `示している$i, %例外を投出するか ) ~EQ ~F ] ⇒ ~GOTO `最後の段^i ◎ If the result of running check popover validity given element, true, and throwExceptions is false,\ ↓↓ then run cleanupSteps and return.

      注記: ここで再び`~popoverの妥当性を検査する$わけは、 上で`ある所までの~popoverをすべて隠す$ときに[ %要素 を`切断-$し得る/ %要素 の `popover$a 属性を変更し得る ]からである。 ◎ Check popover validity is called again because running hide all popovers until could have disconnected element or changed its popover attribute.

  7. %自動~popover~listは要素を包含するか ~LET ~IS[ %文書 の`示している自動~popover~list$docを成す最後の~item ~EQ %要素 ] ◎ Let autoPopoverListContainsElement be true if document's showing auto popover list's last item is element, otherwise false.
  8. %要素 の`~popover呼出元$el ~SET ~NULL ◎ Set element's popover invoker to null.
  9. ~IF[ %~eventを発火するか ~EQ ~T ]: ◎ If fireEvents is true:

    1. `~eventを発火する$( %要素, `beforetoggle$et, `ToggleEvent$I ) — 次のように初期化して ⇒# `oldState$m 属性 ~SET `open^l, `newState$m 属性 ~SET `closed^l ◎ Fire an event named beforetoggle, using ToggleEvent, with the oldState attribute initialized to "open" and the newState attribute initialized to "closed" at element.
    2. ~IF[ %自動~popover~listは要素を包含するか ~EQ ~T ]~AND[ %文書 の`示している自動~popover~list$docを成す最後の~item ~NEQ %要素 ] ⇒ `ある所までの~popoverをすべて隠す$( %要素, %前回に~focusした要素を~focusするか, ~F ) ◎ If autoPopoverListContainsElement is true and document's showing auto popover list's last item is not element, then run hide all popovers until given element, focusPreviousElement, and false.
    3. ~IF[ `~popoverの妥当性を検査する$( %要素, `示している$i, %例外を投出するか, ~NULL ) ~EQ ~F ] ⇒ ~GOTO `最後の段^i ◎ If the result of running check popover validity given element, true, throwExceptions, and null is false,\ ↓↓ then run cleanupSteps and return.

      注記: ここで再び`~popoverの妥当性を検査する$わけは、[ 上で発火した `beforetoggle$et ~event ]用の`~event~handler$が[ %要素 を`切断-$し得る/ %要素 の `popover$a 属性を変更し得る ]からである。 ◎ Check popover validity is called again because firing the beforetoggle event could have disconnected element or changed its popover attribute.

    4. `上端~層から要素を除去するよう要請する$( %要素 ) ◎ Request an element to be removed from the top layer given element.
    5. %要素 の`暗黙的な~anchor要素$ ~SET ~NULL ◎ Set element's implicit anchor element to null.
  10. ~ELSE ⇒ `上端~層から要素を即時に除去する$( %要素 ) ◎ Otherwise, remove an element from the top layer immediately given element.
  11. %要素 の`~popover可視性~状態$ ~SET `隠している$i ◎ Set element's popover visibility state to hidden.
  12. ~IF[ %~eventを発火するか ~EQ ~T ] ⇒ `~popover用の~toggle~event~taskを~queueする$( %要素, `open^l, `closed^l ) ◎ If fireEvents is true, then queue a popover toggle event task given element, "open", and "closed".
  13. %前回に~focusされた要素 ~LET %要素 の`前回に~focusされた要素$ ◎ Let previouslyFocusedElement be element's previously focused element.
  14. ~IF[ %前回に~focusされた要素 ~NEQ ~NULL ]: ◎ If previouslyFocusedElement is not null, then:

    1. %要素 の`前回に~focusされた要素$ ~SET ~NULL ◎ Set element's previously focused element to null.
    2. ~IF[ %前回に~focusした要素を~focusするか ~EQ ~T ]~AND[ %文書 が`指名する被focus区画$docの`~DOM~anchor$は, %要素 の`~shadowも含めた広義-子孫$である ] ⇒ `~objを~focusする$( %前回に~focusされた要素 ) ◎ If focusPreviousElement is true and document's focused area of the document's DOM anchor is a shadow-including inclusive descendant of element, then run the focusing steps for previouslyFocusedElement;\

      この段を行うときは、 `表示域$は~scrollされるベキでない。 ◎ the viewport should not be scrolled by doing this step.

  15. `最後の段^i:

    1. ~IF[ %入子な隠すか ~EQ ~F ] ⇒ %要素 の`~popoverを示すまたは隠す途中か$el ~SET ~F
    2. ~IF[ %要素 の`~popover閉-注視器$el ~NEQ ~NULL ]:

      1. `閉-注視器を破壊する$( %要素 の`~popover閉-注視器$el )
      2. %要素 の`~popover閉-注視器$el ~SET ~NULL
    ◎ ↑↑ Run cleanupSteps.

`togglePopover(options)@m ~method手続きは: ◎ The togglePopover(options) method steps are:

  1. %force ~LET %options に応じて ⇒# 真偽値であるならば %options / ~ELSE_ %options[ "`force$mb" ] ◎ Let force be null. ◎ If options is a boolean, set force to options. ◎ Otherwise, if options["force"] exists, set force to options["force"].
  2. %呼出元 ~LET %options[ "`source$mb" ] ◎ Let invoker be options["source"] if it exists;\
  3. ~IF[ %呼出元 ~EQ ε ] ⇒ %呼出元 ~SET ~NULL ◎ otherwise, null.
  4. ~IF[ コレの`~popover可視性~状態$ ~EQ `示している$i ]~AND[ %force ~IN { ε【!null】, ~F } ] ⇒ `~popoverを隠す$( コレ, ~T, ~T, ~T ) ◎ If this's popover visibility state is showing, and force is null or false, then run the hide popover algorithm given this, true, true, and true.
  5. ~ELIF[ %force ~IN { ε【!null】, ~T } ] ⇒ `~popoverを示す$( コレ, ~T, %呼出元 ) ◎ Otherwise, if force is null or true, then run show popover given this, true, and invoker.
  6. ~ELSE ⇒ `~popoverの妥当性を検査する$( コレ, コレの`~popover可視性~状態$, ~T, ~NULL ) ◎ Otherwise: • Let expectedToBeShowing be true if this's popover visibility state is showing; otherwise false. • Run check popover validity given expectedToBeShowing, true, and null.

  7. ~RET ~IS[ コレの`~popover可視性~状態$ ~EQ `示している$i ] ◎ Return true if this's popover visibility state is showing; otherwise false.

`ある所までの~popoverをすべて隠す@ ときは、 所与の ⇒# [`~HTML要素$/`文書$] %終端点, 真偽値 %前回に~focusした要素を~focusするか, 真偽値 %~eventを発火するか ◎終 に対し: ◎ To hide all popovers until, given an HTML element or Document endpoint, a boolean focusPreviousElement, and a boolean fireEvents:

  1. ~IF[ %終端点 は`~HTML要素$である ]~AND[ %終端点 の`~popover可視性~状態$ ~NEQ `示している$i ] ⇒ ~RET ◎ If endpoint is an HTML element and endpoint is not in the popover showing state, then return.
  2. %文書 ~LET %終端点 の`~node文書$ ◎ Let document be endpoint's node document.
  3. %開な~popoverをすべて閉じる ~LET 次の手続きを遂行する~algo: ◎ Let closeAllOpenPopovers be an algorithm which performs the following steps:

    1. ~WHILE 無条件:

      1. %~popover ~LET `最上層な自動~popoverを見出す$( %文書 )
      2. ~IF[ %~popover ~EQ ~NULL ] ⇒ ~BREAK
      3. `~popoverを隠す$( ↓ ) ⇒# %~popover, %前回に~focusした要素を~focusするか, %~eventを発火するか, ~F
      ◎ Let popover be document's topmost auto popover. ◎ While popover is not null: • Run the hide popover algorithm given popover, focusPreviousElement, fireEvents, and false. • Set popover to document's topmost auto popover.
  4. ~IF[ %終端点 は`文書$である ] ⇒# %開な~popoverをすべて閉じる(); ~RET ◎ If endpoint is a Document, then run closeAllOpenPopovers and return.
  5. ~Assert: %終端点 の `popover$a 属性の状態 ~EQ `自動$st ◎ Assert: endpoint's popover attribute is in the auto state.
  6. ~WHILE 無条件: ◎ ↓↓ Let repeatingHide be false. ◎ Perform the following steps at least once:

    1. %隠し残した~popover ~LET ~NULL ◎ Let lastToHide be null.
    2. %終端点を見出したか ~LET ~F ◎ Let foundEndpoint be false.
    3. %文書 の`示している自動~popover~list$docを成す ~EACH( %~popover ) に対し: ◎ For each popover of document's showing auto popover list:

      1. ~IF[ %~popover ~EQ %終端点 ] ⇒ %終端点を見出したか ~SET ~T ◎ If popover is endpoint, then set foundEndpoint to true.
      2. ~ELIF[ %終端点を見出したか ~EQ ~T ] ⇒# %隠し残した~popover ~SET %~popover; ~BREAK ◎ Otherwise, if foundEndpoint is true, then set lastToHide to popover and break.
    4. ~IF[ %終端点を見出したか ~EQ ~F ] ⇒# %開な~popoverをすべて閉じる(); ~RET ◎ If foundEndpoint is false, then run closeAllOpenPopovers and return.
    5. ~WHILE[ %隠し残した~popover ~NEQ ~NULL ]~AND[ %隠し残した~popover の`~popover可視性~状態$ ~EQ `示している$i ]~AND[ %文書 の`示している自動~popover~list$docは`空$でない ] ⇒ `~popoverを隠す$( ↓ ) ⇒# %文書 の`示している自動~popover~list$docを成す最後の~item【!要素】, %前回に~focusした要素を~focusするか, %~eventを発火するか, ~F ◎ While lastToHide is not null and lastToHide's popover visibility state is showing and document's showing auto popover list is not empty: • Run the hide popover algorithm given document's showing auto popover list's last element, focusPreviousElement, fireEvents, and false.

    6. ~IF[ %終端点 ~IN %文書 の`示している自動~popover~list$doc ]~AND[ %終端点 ~NEQ %文書 の`示している自動~popover~list$docを成す最後の~item【!要素】 ] ⇒ %~eventを発火するか ~SET ~F ◎ Set repeatingHide to true if document's showing auto popover list contains endpoint and document's showing auto popover list's last element is not endpoint, otherwise false. ◎ If repeatingHide is true, then set fireEvents to false.
    7. ~ELSE ⇒ ~BREAK ◎ ↑↑ and keep performing them while repeatingHide is true.

注記: `ある所までの~popoverをすべて隠す$~algoは、 いくつかの事例で,~popoverのうち[ 何かが起きたときでも,開いたまま残されるもの ]以外のものをすべて隠すために利用される。 例えば,この~algoは、 ~popoverを`軽く退ける$間は,~popoverのうち[ 利用者により~clickされた~nodeに関係しないもの ]に限り閉じることを確保する。 ◎ The hide all popovers until algorithm is used in several cases to hide all popovers that don't stay open when something happens. For example, during light-dismiss of a popover, this algorithm ensures that we close only the popovers that aren't related to the node clicked by the user.

`最上層な~popover先祖を見出す@ ときは、 所与の ( `~node$ %~node, [ `~HTML要素$/ ~NULL ] %呼出元, 真偽値 %~popoverであるか ) に対し,次の手続きを遂行する — これは、[ `~HTML要素$ / ~NULL ]を返す: ◎ To find the topmost popover ancestor, given a Node newPopoverOrTopLayerElement, an HTML element or null invoker, and a boolean isPopover, perform the following steps. They return an HTML element or null.

注記: `最上層な~popover先祖を見出す$~algoは、 供された %~node — 新たな~popover, または`上端~層$を成す要素 — 用に,最上層な (`示している自動~popover~list$doc内で最も後に来る) 先祖~popoverを返すことになる。 ◎ The topmost popover ancestor algorithm will return the topmost (latest in the showing auto popover list) ancestor popover for the provided popover or top layer element.\

~popoverたちは、 いくつかの仕方で互いに関係し得ることにより,それらが成す~treeを作成する。 ある~popover(以下では “子” ~popoverと称する)は、 次に挙げる経路を通して, ある最上層な先祖~popover(以下では “親” ~popover と称する)を有し得る: ◎ Popovers can be related to each other in several ways, creating a tree of popovers. There are two paths through which one popover (call it the "child" popover) can have a topmost ancestor popover (call it the "parent" popover):

  • ~node~treeの中で,ある~popoverを別の~popoverが入子にしているとき。 この事例では、 子孫である~popoverが “子”, その最上層な先祖である~popoverが “親” になる。 ◎ The popovers are nested within each other in the node tree. In this case, the descendant popover is the "child" and its topmost ancestor popover is the "parent".
  • 何かを呼出している要素 %要素 (例: `button$e )が, `popovertarget$a 属性を有していて、 それは,ある~popoverを指しているとき。 この事例では、 当の~popoverが “子” になり, %要素 を包含している~popover下位treeが “親” になる — %要素 【!invoker】は[ ある~popover内に在って,ある開な~popoverを参照する ]必要がある。 ◎ An invoking element (e.g., a button) has a popovertarget attribute pointing to a popover. In this case, the popover is the "child", and the popover subtree the invoking element is in is the "parent". The invoker has to be in a popover and reference an open popover.

上により形成される各~関係性において、 親~popoverは, `示している自動~popover~list$doc内で,子~popoverより厳密に先に来る必要がある — さもなければ、 妥当な先祖-関係性を形成しない。 これは、[ 示していない~popover, 自己-~pointer (例:上に挙げた 2 つ目の関係性において、 %要素 が指している~popoverと %要素 を包含している~popoverが同じである) ]を排することに加え,[ (場合によっては循環な)接続たちが成す~graphから,きちんと形成された~treeを構築する ]ことを許容する。 ここで考慮されるのは、[ `popover$a 属性の状態 ~EQ `自動$st ]を満たす~popoverに限られる。 ◎ In each of the relationships formed above, the parent popover has to be strictly earlier in the showing auto popover list than the child popover, or it does not form a valid ancestral relationship. This eliminates non-showing popovers and self-pointers (e.g., a popover containing an invoking element that points back to the containing popover), and it allows for the construction of a well-formed tree from the (possibly cyclic) graph of connections. Only auto popovers are considered.

供された %~node は上端~層を成す要素である場合 (~popoverとして示していない `dialog$e など)、 `最上層な~popover先祖を見出す$~algoは,[ 当の~node~tree内に限り調べて,最初の~popoverを見出す ]ことになる。 ◎ If the provided element is a top layer element such as a dialog which is not showing as a popover, then topmost popover ancestor will only look in the node tree to find the first popover.

  1. ~IF[ %~popoverであるか ~EQ ~T ]: ◎ If isPopover is true:

    1. ~Assert: %~node は`~HTML要素$である。 ◎ Assert: newPopoverOrTopLayerElement is an HTML element.
    2. ~Assert: %~node の `popover$a 属性の状態 ~NIN { `~popoverなし$st, `手動$st } ◎ Assert: newPopoverOrTopLayerElement's popover attribute is not in the no popover state or the manual state.
    3. ~Assert: %~node の`~popover可視性~状態$ ~NEQ `示している$i ◎ Assert: newPopoverOrTopLayerElement's popover visibility state is not in the popover showing state.
  2. ~ELSE ⇒ ~Assert: %呼出元 ~EQ ~NULL ◎ Otherwise: • Assert: invoker is null.
  3. %~popover位置~群 ~LET 新たな`有順序~map$ ◎ Let popoverPositions be an empty ordered map.
  4. %~index ~LET 0 ◎ Let index be 0.
  5. %文書 ~LET %~node の`~node文書$ ◎ Let document be newPopoverOrTopLayerElement's node document.
  6. %文書 の`示している自動~popover~list$docを成す ~EACH( %~popover ) に対し: ◎ For each popover of document's showing auto popover list:

    1. %~popover位置~群[ %~popover ] ~SET %~index ◎ Set popoverPositions[popover] to index.
    2. %~index ~INCBY 1 ◎ Increment index by 1.
  7. ~IF[ %~popoverであるか ~EQ ~T ] ⇒ %~popover位置~群[ %~node ] ~SET %~index ◎ If isPopover is true, then set popoverPositions[newPopoverOrTopLayerElement] to index.
  8. %~index ~INCBY 1 ◎ Increment index by 1.
  9. %最上層な~popover先祖 ~LET ~NULL ◎ Let topmostPopoverAncestor be null.
  10. %先祖を検査する ~LET 所与の ( %候補 ) に対し,次の手続きを遂行する~algo: ◎ Let checkAncestor be an algorithm which performs the following steps given candidate:

    1. ~IF[ %候補 ~EQ ~NULL ] ⇒ ~RET ◎ If candidate is null, then return.
    2. %候補~先祖 ~LET `広義-先祖のうち最も近い開な~popoverを見出す$( %候補 ) ◎ Let candidateAncestor be the result of running nearest inclusive open popover given candidate.
    3. ~IF[ %候補~先祖 ~EQ ~NULL ] ⇒ ~RET ◎ If candidateAncestor is null, then return.
    4. %候補~位置 ~LET %~popover位置~群[ %候補~先祖 ] ◎ Let candidatePosition be popoverPositions[candidateAncestor].
    5. ~IF[ %最上層な~popover先祖 ~EQ ~NULL ]~OR[ %~popover位置~群[ %最上層な~popover先祖 ] ~LT %候補~位置 ] ⇒ %最上層な~popover先祖 ~SET %候補~先祖 ◎ If topmostPopoverAncestor is null or popoverPositions[topmostPopoverAncestor] is less than candidatePosition, then set topmostPopoverAncestor to candidateAncestor.
  11. %先祖を検査する( `平坦~tree$における %~node の親~node ) ◎ Run checkAncestor given newPopoverOrTopLayerElement's parent node within the flat tree.
  12. %先祖を検査する( %呼出元 ) ◎ Run checkAncestor given invoker.
  13. ~RET %最上層な~popover先祖 ◎ Return topmostPopoverAncestor.

`広義-先祖のうち最も近い開な~popoverを見出す@ ときは、 所与の ( `~node$ %~node ) に対し,次の手続きを遂行する — これは、[ `~HTML要素$ / ~NULL ]を返す: ◎ To find the nearest inclusive open popover given a Node node, perform the following steps. They return an HTML element or null. •↓ Let currentNode be node.

  1. ~WHILE[ %~node ~NEQ ~NULL ]: ◎ While currentNode is not null:

    1. ~IF[ %~node の `popover$a 属性の状態 ~EQ `自動$st ]~AND[ %~node の`~popover可視性~状態$ ~EQ `示している$i ] ⇒ ~RET %~node ◎ If currentNode's popover attribute is in the auto state and currentNode's popover visibility state is showing, then return currentNode.
    2. %~node ~SET `平坦~tree$における %~node の親 ◎ Set currentNode to currentNode's parent in the flat tree.
  2. ~RET ~NULL ◎ Return null.

`最上層な自動~popoverを見出す@ ときは、 所与の ( `文書$ %文書 ) に対し,次の手続きを遂行する — これは、[ `~HTML要素$ / ~NULL ]を返す: ◎ To find the topmost auto popover given a Document document, perform the following steps. They return an HTML element or null.

  1. ~IF[ %文書 の`示している自動~popover~list$docは`空$でない ] ⇒ ~RET %文書 の`示している自動~popover~list$docを成す最後の~item【!要素】 ◎ If document's showing auto popover list is not empty, then return document's showing auto popover list's last element.
  2. ~RET ~NULL ◎ Return null.

`~popoverを~focusする@ ときは、 所与の ( `~HTML要素$ %~subject ) に対し: ◎ To perform the popover focusing steps for an HTML element subject:

  1. ~IF[ %~subject は `dialog$e 要素である ] ⇒# `~dialogを~focusする$( %~subject ); ~RET ◎ If subject is a dialog element, then run the dialog focusing steps given subject and return.
  2. %~control ~LET %~subject は `autofocus$a 属性を ⇒# 有するならば %~subject / 有さないならば `自動focus委任-先$( %~subject, `other^l ) ◎ If subject has the autofocus attribute, then let control be subject. ◎ Otherwise, let control be the autofocus delegate for subject given "other".
  3. ~IF[ %~control ~EQ ~NULL ] ⇒ ~RET ◎ If control is null, then return.
  4. `~objを~focusする$( %~control ) ◎ Run the focusing steps given control.
  5. %~top-level文書 ~LET %~control の`~node文書$が`属する閲覧~文脈$の`~top-level閲覧~文脈$にて`作動中な文書$bc ◎ Let topDocument be the active document of control's node document's browsing context's top-level browsing context.
  6. ~IF[ ( %~control の`~node文書$の`生成元$doc, %~top-level文書 の`生成元$doc ) は`同一-生成元$でない ] ⇒ ~RET ◎ If control's node document's origin is not the same as the origin of topDocument, then return.
  7. %~top-level文書 の`自動focus候補~群$を`空にする$ ◎ Empty topDocument's autofocus candidates.
  8. %~top-level文書 の`自動focusは処理-済みか$ ~SET ~T ◎ Set topDocument's autofocus processed flag to true.

`~popoverの妥当性を検査する@ ときは、 所与の ⇒# `~HTML要素$ %要素, %期待される可視性~状態 ~IN { `示している$i, `隠している$i }, 真偽値 %例外を投出するか, [ `文書$/ ~NULL ] %期待される文書 ◎終 に対し, 例外を投出するか真偽値を返す: ◎ To check popover validity for an HTML element element given a boolean expectedToBeShowing, a boolean throwExceptions, and a Document or null expectedDocument perform the following steps. They throw an exception or return a boolean.

  1. ~IF[ %要素 は`~popover要素$でない ]: ◎ If element's popover attribute is in the no popover state, then:

    1. ~IF[ %例外を投出するか ~EQ ~T ] ⇒ ~THROW `NotSupportedError$E ◎ If throwExceptions is true, then throw a "NotSupportedError" DOMException.
    2. ~RET ~F ◎ Return false.
  2. ~IF[ %期待される可視性~状態 ~NEQ %要素 の`~popover可視性~状態$ ] ⇒ ~RET ~F ◎ If any of the following are true: • expectedToBeShowing is true and element's popover visibility state is not showing; or • expectedToBeShowing is false and element's popover visibility state is not hidden, then return false.
  3. ~IF[ ~OR↓ ]… ◎ If any of the following are true:

    • %要素 は`接続されて$いない ◎ element is not connected;
    • %要素 の`~node文書$は`全部的に作動中$でない ◎ element's node document is not fully active;
    • %期待される文書 ~NIN { ~NULL, %要素 の`~node文書$ } ◎ expectedDocument is not null and element's node document is not expectedDocument;
    • [ %要素 は `dialog$e 要素である ]~AND[ %要素 の`~modalか$ ~EQ ~T ] ◎ element is a dialog element and its is modal flag is set to true; or
    • %要素 の`~fullscreenか$ ~EQ ~T ◎ element's fullscreen flag is set,

    …ならば: ◎ then:

    1. ~IF[ %例外を投出するか ~EQ ~T ] ⇒ ~THROW `InvalidStateError$E ◎ If throwExceptions is true, then throw a "InvalidStateError" DOMException.
    2. ~RET ~F ◎ Return false.
  4. ~RET ~T ◎ Return true.

【 %期待される可視性~状態 は,原文では真偽値をとるが、 明快にするため,`~popover可視性~状態$がとり得る値をとるよう改める。 】

`文書$ %文書 の `示している自動~popover~list@doc を取得するときは: ◎ To get the showing auto popover list for a Document document:

  1. %~popover群 ~LET « » ◎ Let popovers be « ».
  2. %文書 の`上端~層$を成す ~EACH( `要素$ %要素 ) に対し ⇒ ~IF[ %要素 の `popover$a 属性の状態 ~EQ `自動$st ]~AND[ %要素 の`~popover可視性~状態$ ~EQ `示している$i ] ⇒ %~popover群 に %要素 を`付加する$ ◎ For each Element element in document's top layer: if element's popover attribute is in the auto state and element's popover visibility state is showing, then append element to popovers.
  3. ~RET %~popover群 ◎ Return popovers.

6.12.1. ~popover~target属性

各`~button$は、 次に挙げる各~内容~属性を有してもヨイ — これらは、 `~popover~target属性@ と総称される ⇒# `popovertarget@a, `popovertargetaction@a ◎ Buttons may have the following content attributes: • popovertarget • popovertargetaction

`popovertarget$a 属性に指定する値は、 次を満たす要素の`~ID$でなければナラナイ ⇒ [ `popover$a 属性を有する ]~AND[ 当の`~button$と同じ`~tree$内にある ] ◎ If specified, the popovertarget attribute value must be the ID of an element with a popover attribute in the same tree as the button with the popovertarget attribute.

`popovertargetaction$a 属性は,`列挙d属性$であり、 次に挙げる~keyword, とり得る状態, それらの対応付けが定義される: ◎ The popovertargetaction attribute is an enumerated attribute with the following keywords and states:

~keyword 状態 概略的な記述
`toggle@v `~toggleする@st ~targetにされた~popover要素を[ 示す/隠す ]。
`show@v `示す@st ~targetにされた~popover要素を示す。
`hide@v `隠す@st ~targetにされた~popover要素を隠す。
◎ Keyword|State|Brief description toggle|toggle|Shows or hides the targeted popover element. show|show|Shows the targeted popover element. hide|hide|Hides the targeted popover element.

`popovertargetaction$a 属性の[ `欠落~値~用の既定の状態$/`妥当でない値~用の既定の状態$ ]は、 `~toggleする$st とする。 ◎ The attribute's missing value default and invalid value default are both the toggle state.

注記: アリなときは、 ~DOM内で[ ~popover要素が,それを誘発している要素の直後に配置される ]ことを確保すること。 そうすれば、[ ~screen~readerなどの支援~技術の利用者 ]に対し[ 当の~popoverが,論理的~program的な読取り順序で公開される ]ことを確保する助けになる。 ◎ Whenever possible ensure the popover element is placed immediately after its triggering element in the DOM. Doing so will help ensure that the popover is exposed in a logical programmatic reading order for users of assistive technology, such as screen readers.

`popovertarget$a 属性を `popovertargetaction$a 属性と組合せて, ~popoverを[ 示す, 閉じる ]ために どう利用できるかを次に示す: ◎ The following shows how the popovertarget attribute in combination with the popovertargetaction attribute can be used to show and close a popover:

`popover-target-attribute-1^xCode

`popovertargetaction$a 属性が指定されなかった場合、 結付けられた~popoverを~toggleすることが既定の動作になる。 それを呼出している~buttonに `popovertarget$a 属性を指定するだけで, `手動$stな~popoverの[ 開な状態, 閉な状態 ]を~toggleできる様子を次に示す。 手動な~popoverは、[ `軽く退ける$ふるまい/`閉-要請$ ]に応答しない: ◎ If a popovertargetaction attribute is not specified, the default action will be to toggle the associated popover. The following shows how only specifying the popovertarget attribute on its invoking button can toggle a manual popover between its opened and closed states. A manual popover will not respond to light dismiss or close requests:

`popover-target-attribute-2^xCode

【!`~DOM~interface$】 ◎ DOM interface:

interface mixin `PopoverInvokerElement@I {
  [`CEReactions$] attribute Element? `popoverTargetElement$m;
  [`CEReactions$] attribute DOMString `popoverTargetAction$m;
};

`popoverTargetElement@m ~IDL属性は、 `popovertarget$a 属性を`反映する$モノトスル。 ◎ The popoverTargetElement IDL attribute must reflect the popovertarget attribute.

`popoverTargetAction@m ~IDL属性は、 `既知な値のみに制限され$る下で, `popovertargetaction$a 属性を`反映する$モノトスル。 ◎ The popoverTargetAction IDL attribute must reflect the popovertargetaction attribute, limited to only known values.

`~popover~target属性~作動化の挙動@ は、 所与の ( `~node$ %~node, `~node$ %~event~target ) に対し,次を走らす: ◎ To run the popover target attribute activation behavior given a Node node and a Node eventTarget:

  1. %~popover ~LET %~node の`~popover~target要素$ ◎ Let popover be node's popover target element.
  2. ~IF[ %~popover ~EQ ~NULL ] ⇒ ~RET ◎ If popover is null, then return.
  3. ~IF[ %~event~target は %~popover の`~shadowも含めた広義-子孫$である ]~AND[ %~popover は %~node の`~shadowも含めた子孫$である ] ⇒ ~RET ◎ If eventTarget is a shadow-including inclusive descendant of popover and popover is a shadow-including descendant of node, then return.
  4. %属性~状態 ~LET %~node の `popovertargetaction$a 属性の状態 ◎ ↓
  5. %可視性~状態 ~LET %~popover の`~popover可視性~状態$ ◎ ↓
  6. ~IF[ %属性~状態 ~EQ `示す$st【!`show$v】 ]~AND[ %可視性~状態 ~EQ `示している$i ] ⇒ ~RET ◎ If node's popovertargetaction attribute is in the show state and popover's popover visibility state is showing, then return.
  7. ~IF[ %属性~状態 ~EQ `隠す$st【!`hide$v】 ]~AND[ %可視性~状態 ~EQ `隠している$i ] ⇒ ~RET ◎ If node's popovertargetaction attribute is in the hide state and popover's popover visibility state is hidden, then return.
  8. ~IF[ %可視性~状態 ~EQ `示している$i ] ⇒ `~popoverを隠す$( %~popover, ~T, ~T, ~F ) ◎ If popover's popover visibility state is showing, then run the hide popover algorithm given popover, true, true, and false.
  9. ~ELIF[ %可視性~状態 ~EQ `隠している$i ]~AND[ `~popoverの妥当性を検査する$( %~popover, `隠している$i, ~F, ~NULL ) ~EQ ~T ] ⇒ `~popoverを示す$( %~popover, ~F, %~node ) ◎ Otherwise, if popover's popover visibility state is hidden and the result of running check popover validity given popover, false, false, and null is true, then run show popover given popover, false, and node.

`~popover~target要素@ を取得するときは、 所与の ( `~node$ %~node ) に対し,次の手続きを遂行する — これは、[ `~HTML要素$ / ~NULL ]を返す: ◎ To get the popover target element given a Node node, perform the following steps. They return an HTML element or null.

  1. ~IF[ ~OR↓ ]…

    • %~node は`~button$でない
    • %~node は`不能化されて$feいる
    • [ %~node の`~form所有者$ ~NEQ ~NULL ]~AND[ %~node は`提出-~button$である ]

    …ならば ⇒ ~RET ~NULL

    ◎ If node is not a button, then return null. ◎ If node is disabled, then return null. ◎ If node has a form owner and node is a submit button, then return null.
  2. %~popover要素 ~LET %~node の "`popovertarget$a" に`結付けられた要素を取得する~algo$() ◎ Let popoverElement be the result of running node's get the popovertarget-associated element.
  3. ~IF[ %~popover要素 ~EQ ~NULL ] ⇒ ~RET ~NULL ◎ If popoverElement is null, then return null.
  4. ~IF[ %~popover要素 は`~popover要素$でない ] ⇒ ~RET ~NULL ◎ If popoverElement's popover attribute is in the no popover state, then return null.
  5. ~RET %~popover要素 ◎ Return popoverElement.

6.12.2. ~popoverを軽く退ける

“軽く退ける( `light dismiss^en )” とは、 次を意味する ⇒ `~popover要素$のうち[ その `popover$a 属性の状態 ~EQ `自動$st ]を満たすものに対し,当の~popoverの外側を~clickすると、 当の~popoverを閉じることになる。 このふるまいは、[ そのような~popoverが`閉-要請$に対しどう応答するか ]に対する追加である。 ◎ "Light dismiss" means that clicking outside of a popover whose popover attribute is in the auto state will close the popover. This is in addition to how such popovers respond to close requests.

`開な~popoverたちを軽く退ける@ ときは、 所与の ( `Event$I %~event ) に対し: ◎ To light dismiss open popovers, given an Event event:

  1. ~Assert: %~event の `isTrusted$m 属性 ~EQ ~T ◎ Assert: event's isTrusted attribute is true.
  2. %~target ~LET %~event の`~target$ ◎ Let target be event's target.
  3. ~Assert: %~target ~NEQ ~NULL 【この段は、この訳による補完。】
  4. %文書 ~LET %~target の`~node文書$ ◎ Let document be target's node document.
  5. %最上層な~popover ~LET `最上層な自動~popoverを見出す$( %文書 ) ◎ Let topmostPopover be the result of running topmost auto popover given document.
  6. ~IF[ %最上層な~popover ~EQ ~NULL ] ⇒ ~RET ◎ If topmostPopover is null, then return.
  7. ~IF[ %~event は `PointerEvent$I ~objでない ] ⇒ ~RET ◎ ↓
  8. %~event の `type$m に応じて:

    • "`pointerdown$et" ⇒ %文書 の`~popover~pointerdown~target$doc ~SET `最上層な~clickされた~popoverを見出す$( %~target ) ◎ If event is a PointerEvent and event's type is pointerdown, then: set document's popover pointerdown target to the result of running topmost clicked popover given target.
    • "`pointerup$et" : ◎ If event is a PointerEvent and event's type is "pointerup", then:

      1. %先祖 ~LET `最上層な~clickされた~popoverを見出す$( %~target ) ◎ Let ancestor be the result of running topmost clicked popover given target.
      2. %同じ~targetか ~LET ~IS[ %先祖 ~EQ %文書 の`~popover~pointerdown~target$doc ] ◎ Let sameTarget be true if ancestor is document's popover pointerdown target.
      3. %文書 の`~popover~pointerdown~target$doc ~SET ~NULL ◎ Set document's popover pointerdown target to null.
      4. ~IF[ %先祖 ~EQ ~NULL ] ⇒ %先祖 ~SET %文書 ◎ If ancestor is null, then set ancestor to document.
      5. ~IF[ %同じ~targetか ~EQ ~T ] ⇒ `ある所までの~popoverをすべて隠す$( %先祖, ~F, ~T ) ◎ If sameTarget is true, then run hide all popovers until given ancestor, false, and true.

`開な~popoverたちを軽く退ける$は、 `Pointer Events 仕様@https://github.com/w3c/pointerevents/pull/460$ により,利用者が~page上のどこかを[ ~clickした/~touchした ]とき~callされることになる。 ◎ Light dismiss open popovers will be called by the Pointer Events spec when the user clicks or touches anywhere on the page.

`最上層な~clickされた~popoverを見出す@ ときは、 所与の ( `~node$ %~node ) に対し: ◎ To find the topmost clicked popover, given a Node node:

  1. %~clickされた~popover ~LET `広義-先祖のうち最も近い開な~popoverを見出す$( %~node ) ◎ Let clickedPopover be the result of running nearest inclusive open popover given node.
  2. %呼出元~popover ~LET `呼出元~用の最も近い広義-~target~popoverを見出す$( %~node ) ◎ Let invokerPopover be the result of running nearest inclusive target popover for invoker given node.
  3. %~popover~list ~LET %~node【!%~popover】 の`~node文書$の`示している自動~popover~list$doc ◎ ↓
  4. %~stack位置を取得する ~LET 所与の ( `~HTML要素$ %~popover ) に対し,次の手続きを遂行する~algo ⇒ ~RET [ %~popover ~NIN %~popover~list ならば 0 / ~ELSE_ ( %~popover~list 内での %~popover の~index ) ~PLUS 1 ] ◎ Let getStackPosition be an algorithm which performs the following steps given an HTML element popover: • ↑Let popoverList be popover's node document's showing auto popover list. • If popover is in popoverList, then return the index of popover in popoverList + 1. • Return 0.
  5. ~RET [ 次が満たされるならば %~clickされた~popover / ~ELSE_ %呼出元~popover ] ⇒ [ %~stack位置を取得する( %~clickされた~popover ) ~GT %~stack位置を取得する( %呼出元~popover ) ] ◎ If the result of running getStackPosition given clickedPopover is greater than the result of running getStackPosition given invokerPopover, then return clickedPopover. ◎ Return invokerPopover.

`呼出元~用の最も近い広義-~target~popoverを見出す@ ときは、 所与の ( `~node$ %~node ) に対し: ◎ To find the nearest inclusive target popover for invoker given a Node node: •↓ Let currentNode be node.

  1. ~WHILE[ %~node ~NEQ ~NULL ]: ◎ While currentNode is not null:

    1. %~target~popover ~LET %~node の`~popover~target要素$ ◎ Let targetPopover be currentNode's popover target element.
    2. ~IF[ %~target~popover ~NEQ ~NULL ]~AND[ %~target~popover の `popover$a 属性の状態 ~EQ `自動$st ]~AND[ %~target~popover の`~popover可視性~状態$ ~EQ `示している$i ] ⇒ ~RET %~target~popover ◎ If targetPopover is not null and targetPopover's popover attribute is in the auto state and targetPopover's popover visibility state is showing, then return targetPopover.
    3. %~node ~SET `平坦~tree$における %~node の先祖 【どの先祖? “親” の誤記?】 ◎ Set currentNode to currentNode's ancestor in the flat tree.
●●*
暗黙的な~anchor要素:~CSSANCHOR#implicit-anchor-element
mb.source:~HTMLdom#dom-showpopoveroptions-source
mb.force:~HTMLdom#dom-togglepopoveroptions-force
	~map内に存在する:~INFRA#map-exists
コレ:~WEBIDL#this
~LET:LET#3
~map:map#4
他の場合:otherwise#2
~NULL:null#4
~T:T#1
要素:element#2
~anchor:anchor#3
~SET:SET#4
~IF:IF#2
真偽値:boolean#1
~ELSE:ELSE#1


================


呼出元~invoker:#4
~popover:#2
~CSSANCHOR:#1
~HTMLdom:#2
~INFRA:#1
~HTMLpopover:#1
~WEBIDL:#1
%呼出元:~invoker