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を閉じない。 `軽く退ける$ふるまいを伴わず,`閉-要請$に応答しない。
`hint@v `~hint@st 開かれたときは、 他の~hint~popoverを閉じるが,他の自動~popoverを閉じない。 `軽く退ける$ふるまいを伴い,`閉-要請$に応答する。
`~popoverなし@st 【~popoverとして挙動しない。】

`popover$a 属性の ⇒# `欠落~値~用の既定の状態$は `~popoverなし$st とする。 `妥当でない値~用の既定の状態$は `手動$st とする。 `空~文字列~用の既定の状態$は `自動$st とする。

◎ Keyword|State|Brief description auto|Auto|Closes other popovers when opened; has light dismiss and responds to close requests. manual|Manual|Does not close other popovers; does not light dismiss or respond to close requests. hint|Hint|Closes other hint popovers when opened, but not other auto popovers; has light dismiss and responds to close requests. ◎ The attribute's missing value default is the No Popover state, its invalid value default is the Manual state, and its empty value default is the Auto state.

【 [ `~hint$st / `自動$st ]は、 いくつかの~algoの引数にも利用される — それらは、 実際には`~popover~mode$el用の値[ `hint^l / `auto^l ]により近く対応しているようにも思われるが。 】

`~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 とする。 ◎ Every Document has a popover pointerdown target, which is an HTML element or null, initially null.

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

`~popover誘発元@el ◎ Every HTML element has a popover trigger,\
~NULL /ある`~HTML要素$ ◎ which is an HTML element or null,\
初期~時は ~NULL とする。 ◎ initially set to null.
`~popoverを隠す途中か@el ◎ Every HTML element has a popover hiding,\
ある真偽値 ◎ which is a boolean,\
初期~時は ~F とする。 ◎ initially set to false.
`~popover用の~toggle~task追跡子@el ◎ Every HTML element popover toggle task tracker,\
~NULL /ある`~toggle~task追跡子$ ◎ which is a toggle task tracker or null,\
初期~時は ~NULL とする。 ◎ initially null.
`~popover閉-注視器@el ◎ Every HTML element has a popover close watcher,\
~NULL /ある`閉-注視器$ ◎ which is a close watcher or null,\
初期~時は~NULL とする。 ◎ initially null.
`~popover~mode@el ◎ Every HTML element has an opened in popover mode,\
~NULL / `auto^l / `hint^l ◎ which is "auto", "hint", or null,\
初期~時は~NULL とする。 ◎ initially null.
【 ~NULL の場合、 当の要素は~popoverとして開かれていない — 他の場合、 どの~modeで開かれたかを指示する。 (この用語は,素直に和訳すると “~popover~modeで開かれた” の様になるが、 真偽-~flagと紛らわしくなるので,このように改めることにする。) 】

各`文書$は、 次に挙げるものを有する: ◎ ↓

`隠している~popoverの入子ng数@doc ◎ Every Document has a hiding popover nesting count,\
ある数【負でない整数】 ◎ which is a number,\
初期~時は 0 とする。 ◎ initially 0.
`~popoverを示す途中か@doc ◎ Every Document has a showing popover,\
ある真偽値 ◎ which is a boolean,\
初期~時は ~F とする。 ◎ initially false.
`~hint~stack親@doc ◎ Every Document has a hint stack parent,\
~NULL /ある`~HTML要素$ ◎ which is an HTML element or null,\
初期~時は~NULL とする。 ◎ initially null.

注記: `~hint~stack親$docは、 当の文書が`示している自動~popover~list$docを成す どの~itemが, 当の文書が`示している~hint~popover~list$docを成す最初の~item %~item の “親” になるかを追跡する — あるいは、 %~item が前者の~listを成す どの~itemの “子” でもない場合には, ~NULLになる。 【 “親”, “子” の意味は、`最上層な~popover先祖を見出す$ に付記された注記を見よ。】 ◎ The hint stack parent tracks which item in the showing auto popover list is the 'parent' of the first item in the showing hint popover list, or null if the first item in showing hint popover list is not 'child' to an item in the showing auto popover list.

したがって,`~hint~stack親$doc ~NEQ ~NULL のときは、 その`~popover~mode$elは `auto^l になる。 ◎ Therefore, when the hint stack parent is not null, it will have an opened in popover mode of "auto".

すべての`~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, ~NULL ) ◎ 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, false, and null.
%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. %~source ~LET %options[ "`source$mb" ] ~DF ~NULL ◎ Let source be options["source"] if it exists; otherwise, null.
  2. `~popoverを示す$( コレ, ~T, %~source ) ◎ Run show popover given this, true, and source.

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

  1. %文書 ~LET %要素 の`~node文書$ ◎ Let document be element's node document.
  2. ~IF[ %文書 の`~popoverを示す途中か$doc ~EQ ~T ]~OR[ %文書 の`隠している~popoverの入子ng数$doc ~NEQ 0 ]: ◎ If document's showing popover is true, or document's hiding popover nesting count is not 0:

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

    注記: この段は、 別の~popoverを示すか隠す間に ある~popoverを示すことを防止する。 ◎ This prevents showing a popover during the show or hide of another popover.

  3. %妥当性~結果 ~LET `~popoverの妥当性を検査する$( %要素, `隠している$i, ~NULL ) ◎ Let validityResult be the result of running check popover validity given element, false, and null.\ If this throws an exception, catch it, and set validityResult to that exception.
  4. ~IF[ %妥当性~結果 ~NEQ ~T ]: ◎ If validityResult is not true:

    1. ~IF[ %例外を投出するか ~EQ ~T ]~AND[ %妥当性~結果 は `DOMException$I である ] ⇒ ~THROW %妥当性~結果 ◎ If throwExceptions is true and validityResult is a DOMException, then throw validityResult.
    2. ~RET ◎ Return.
  5. ~Assert: %要素 の`~popover誘発元$el ~NEQ ~NULL ◎ Assert: element's popover trigger is null.
  6. ~Assert: %要素 ~NIN %文書 の`上端~層$ ◎ Assert: element is not in document's top layer.
  7. %文書 の`~popoverを示す途中か$doc ~SET ~T ◎ Set document's showing popover to true.
  8. %片付け手続き ~LET 次の手続き ⇒ %文書 の`~popoverを示す途中か$doc ~SET ~F ◎ Let cleanupShowingSteps be the following steps: • Set document's showing popover to false.
  9. %取消されなかったか ~LET `~eventを発火する$( %要素, `beforetoggle$et, `ToggleEvent$I ) — 次のように初期化して ⇒# `cancelable$m 属性 ~SET ~T `oldState$m 属性 ~SET `closed^l, `newState$m 属性 ~SET `open^l, `source$m 属性 ~SET %~source ◎ If the result of firing an event named beforetoggle, using ToggleEvent, with\ the cancelable attribute initialized to true,\ the oldState attribute initialized to "closed",\ the newState attribute initialized to "open",\ and the source attribute initialized to source\ at element\
  10. ~IF[ %取消されなかったか ~EQ ~F ] ⇒# %片付け手続き(); ~RET ◎ is false, then run cleanupShowingSteps and return.
  11. %妥当性~結果 ~SET `~popoverの妥当性を検査する$( %要素, `隠している$i, %文書 ) ◎ Set validityResult to the result of running check popover validity given element, false, and document.\ If this throws an exception, catch it, and set validityResult to that exception.

    注記: ここで再び`~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.

  12. ~IF[ %妥当性~結果 ~NEQ ~T ]: ◎ If validityResult is not true:

    1. %片付け手続き() ◎ Run cleanupShowingSteps.
    2. ~IF[ %例外を投出するか ~EQ ~T ]~AND[ %妥当性~結果 は `DOMException$I である ] ⇒ ~THROW %妥当性~結果 ◎ If throwExceptions is true and validityResult is a DOMException, then throw validityResult.
    3. ~RET ◎ Return.
  13. %~focusを復旧するべきか ~LET ~F ◎ Let shouldRestoreFocus be false.
  14. %元の種別 ~LET %要素 の`popover$a 属性の状態 ◎ Let originalType be the current state of element's popover attribute.
  15. %先祖 ~LET `最上層な~popover先祖を見出す$( ↓ ) ⇒# %要素, %~source, ~T ◎ Let ancestor be the result of running the topmost popover ancestor algorithm given element, source, and true.
  16. %実効~種別 ~LET %元の種別 ◎ Let effectiveType be originalType.
  17. ~IF[ ~AND↓ ]… ◎ If all of the following are true:

    • %先祖 ~NEQ ~NULL ◎ ancestor is not null;
    • %先祖 の`~popover~mode$el ~EQ `hint^l ◎ ancestor's opened in popover mode is "hint"; and
    • %実効~種別 ~EQ `自動$st ◎ effectiveType is the Auto state,

    …ならば ⇒ %実効~種別 ~SET `~hint$st ◎ then set effectiveType to the Hint state.

    注記: `~hint$st ~popoverは,`自動$st ~popoverよりも優先度が低いので、 `自動$st ~popoverは,`~hint$st ~popoverを “親” として有し得ない。 この事例を解決するため、 %実効~種別 は `~hint$st へ “降格される” 。 ◎ Hint popovers are lower priority than Auto popovers, so an Auto popover cannot have a Hint popover as a 'parent'. To resolve this case, the effectiveType is 'downgraded' to Hint.

  18. ~IF[ %実効~種別 ~IN { `自動$st, `~hint$st } ] ⇒ `~popover~stackをある所まで隠す$( ↓ ) ⇒# %文書, %先祖, `~hint$st, %~focusを復旧するべきか, ~T ◎ If effectiveType is the Auto or Hint state, then run hide popover stack until given document, ancestor, Hint, shouldRestoreFocus, and true.
  19. ~IF[ %実効~種別 ~EQ `自動$st ] ⇒ `~popover~stackをある所まで隠す$( ↓ ) ⇒# %文書, %先祖, `自動$st, %~focusを復旧するべきか, ~T ◎ If effectiveType is the Auto state, then run hide popover stack until given document, ancestor, Auto, shouldRestoreFocus, and true.
  20. ~IF[ %実効~種別 ~IN { `自動$st, `~hint$st } ]: ◎ If effectiveType is Auto or Hint:

    1. ~IF[ %元の種別 ~NEQ %要素 の `popover$a 属性の状態【!値】 ]: ◎ If originalType is not equal to the value of element's popover attribute:

      1. %片付け手続き() ◎ Run cleanupShowingSteps.
      2. ~IF[ %例外を投出するか ~EQ ~T ] ⇒ ~THROW `NotSupportedError$E ◎ If throwExceptions is true, then throw an "InvalidStateError" DOMException.
      3. ~RET ◎ Return.
    2. %妥当性~結果 ~SET `~popoverの妥当性を検査する$( %要素, `隠している$i, %文書 ) ◎ Set validityResult to the result of running check popover validity given element, false, and document.\ If this throws an exception, catch it, and set validityResult to that exception.

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

    3. ~IF[ %妥当性~結果 ~NEQ ~T ]: ◎ If validityResult is not true:

      1. %片付け手続き() ◎ Run cleanupShowingSteps.
      2. ~IF[ %例外を投出するか ~EQ ~T ]~AND[ %妥当性~結果 は `DOMException$I である ] ⇒ ~THROW %妥当性~結果 ◎ If throwExceptions is true and validityResult is a DOMException, then throw validityResult.
      3. ~RET ◎ Return.
    4. ~IF[ `最上層な自動または~hint~popoverを見出す$( %文書 ) ~EQ ~NULL ] ⇒ %~focusを復旧するべきか ~SET ~T ◎ If the result of running topmost auto or hint 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.

    5. ~IF[ %実効~種別 ~EQ `自動$st ]: ◎ If effectiveType is Auto:

      1. ~Assert: %要素 ~NIN %文書 が`示している自動~popover~list$doc ◎ Assert: document's showing auto popover list does not contain element.
      2. %要素 の`~popover~mode$el ~SET `auto^l ◎ Set element's opened in popover mode to "auto".

      ~ELSE: ◎ Otherwise:

      1. ~Assert: %実効~種別 ~EQ `~hint$st ◎ Assert: effectiveType is Hint.
      2. ~Assert: %要素 ~NIN %文書 が`示している~hint~popover~list$doc ◎ Assert: document's showing hint popover list does not contain element.
      3. %要素 の`~popover~mode$el ~SET `hint^l ◎ Set element's opened in popover mode to "hint".
    6. %要素 の`~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, ~NULL ) ◎ closeAction being to hide a popover given element, true, true, false, and null.
      • `可能化~状態を取得する^i は ⇒ ~RET ~T ◎ getEnabledState being to return true.
  21. %要素 の`前回に~focusされた要素$ ~SET ~NULL ◎ Set element's previously focused element to null.
  22. %元々~focusされた要素 ~LET %文書 が`指名する被focus区画$docの`~DOM~anchor$ ◎ Let originallyFocusedElement be document's focused area of the document's DOM anchor.
  23. `上端~層に要素を追加する$( %要素 ) ◎ Add an element to the top layer given element.
  24. ~IF[ %実効~種別 ~EQ `~hint$st ]~AND[ %先祖 の`~popover~mode$el ~EQ `auto^l ] ⇒ %文書 の`~hint~stack親$doc ~SET %先祖 ◎ If effectiveType is Hint and ancestor's opened in popover mode is "auto", then set document's hint stack parent to ancestor.
  25. %要素 の`~popover可視性~状態$ ~SET `示している$i ◎ Set element's popover visibility state to showing.
  26. %要素 の`~popover誘発元$el ~SET %~source ◎ Set element's popover trigger to source.
  27. %要素 の`暗黙的な~anchor要素$ ~SET %~source ◎ Set element's implicit anchor element to source.
  28. `~popoverを~focusする$( %要素 ) ◎ Run the popover focusing steps given element.
  29. ~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.
  30. %片付け手続き() ◎ Run cleanupShowingSteps.
  31. `~popover用の~toggle~event~taskを~queueする$( %要素, `closed^l, `open^l, %~source ) ◎ Queue a popover toggle event task given element, "closed", "open", and source.

`~popover用の~toggle~event~taskを~queueする@ ~algoは、 所与の ( 要素 %要素, 文字列 %旧-状態, 文字列 %新-状態, [ ~NULL /`要素$ ] %~source ) に対し: ◎ To queue a popover toggle event task given an element element, a string oldState, a string newState, and an Element or null source:

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

    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 %新-状態, `source$m 属性 ~SET %~source ◎ Fire an event named toggle at element, using ToggleEvent, with the oldState attribute initialized to oldState, the newState attribute initialized to newState, and the source attribute initialized to source.
    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手続きは ⇒ `~popoverを隠す$( コレ, ~T, ~T, ~T, ~NULL ) ◎ The hidePopover() method steps are: • Run the hide popover algorithm given this, true, true, true, and null.

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

  1. %妥当性~結果 ~LET `~popoverの妥当性を検査する$( %要素, `示している$i, ~NULL ) ◎ Let validityResult be the result of running check popover validity given element, true, and null.\ If this throws an exception, catch it, and let validityResult be that exception.
  2. ~IF[ %妥当性~結果 ~NEQ ~T ]: ◎ If validityResult is not true:

    1. ~IF[ %例外を投出するか ~EQ ~T ]~AND[ %妥当性~結果 は `DOMException$I である ] ⇒ ~THROW %妥当性~結果 ◎ If throwExceptions is true and validityResult is a DOMException, then throw validityResult.
    2. ~RET ◎ Return.
  3. %文書 ~LET %要素 の`~node文書$ ◎ Let document be element's node document.
  4. %入子な隠すか ~LET %要素 の`~popoverを隠す途中か$el ◎ Let nestedHide be element's popover hiding.
  5. %要素 の`~popoverを隠す途中か$el ~SET ~T ◎ Set element's popover hiding to true.
  6. ~IF[ %入子な隠すか ~EQ ~T ] ⇒ %~eventを発火するか ~SET ~F ◎ If nestedHide is true, then set fireEvents to false.
  7. %文書 の`隠している~popoverの入子ng数$doc ~INCBY 1 ◎ Increment document's hiding popover nesting count.
  8. %片付け手続き ~LET 次の手続き: ◎ Let cleanupSteps be the following steps:

    1. ~IF[ %入子な隠すか ~EQ ~F ] ⇒ %要素 の`~popoverを隠す途中か$el ~SET ~F ◎ If nestedHide is false, then set element's popover hiding to false.
    2. ~IF[ %要素 の`~popover閉-注視器$el ~NEQ ~NULL ]: ◎ If element's popover close watcher is not null:

      1. `閉-注視器を破壊する$( %要素 の`~popover閉-注視器$el ) ◎ Destroy element's popover close watcher.
      2. %要素 の`~popover閉-注視器$el ~SET ~NULL ◎ Set element's popover close watcher to null.
    3. %文書 の`隠している~popoverの入子ng数$doc ~DECBY 1 ◎ Decrement document's hiding popover nesting count.
  9. %自動~popover~listは要素を包含するか ~LET ~IS[ %要素 ~IN %文書 が`示している自動~popover~list$doc ] ◎ Let autoPopoverListContainsElement be true if document's showing auto popover list contains element; otherwise false.
  10. %~hint~popover~listは要素を包含するか ~LET ~IS[ %要素 ~IN %文書 が`示している~hint~popover~list$doc ] ◎ Let hintPopoverListContainsElement be true if document's showing hint popover list contains element; otherwise false.
  11. ~IF[ %要素 の`~popover~mode$el ~IN { `auto^l, `hint^l } ]: ◎ If element's opened in popover mode is "auto" or "hint":

    1. ~IF[ %~hint~popover~listは要素を包含するか ~EQ ~T ] ⇒ `~popover~stackをある所まで隠す$( ↓ ) ⇒# %文書, %要素, `~hint$st, %前回に~focusした要素を~focusするか, %~eventを発火するか ◎ If hintPopoverListContainsElement is true, then run hide popover stack until given document, element, Hint, focusPreviousElement, and fireEvents.
    2. ~IF[ %要素 ~EQ %文書 の`~hint~stack親$doc ] ⇒ `~popover~stackをある所まで隠す$( ↓ ) ⇒# %文書, ~NULL, `~hint$st, %前回に~focusした要素を~focusするか, %~eventを発火するか ◎ If element is document's hint stack parent, then run hide popover stack until given document, null, Hint, focusPreviousElement, and fireEvents.

      注記: %文書 の`~hint~stack親$docが隠されている場合、 `すべての^em ~hint~popoverも隠される。 ◎ If the document's hint stack parent is being hidden, then all hint popovers are hidden.

    3. ~IF[ %自動~popover~listは要素を包含するか ~EQ ~T ] ⇒ `~popover~stackをある所まで隠す$( ↓ ) ⇒# %文書, %要素, `自動$st, %前回に~focusした要素を~focusするか, %~eventを発火するか ◎ If autoPopoverListContainsElement is true, then run hide popover stack until given document, element, Auto, focusPreviousElement, and fireEvents.
    4. %妥当性~結果 ~SET `~popoverの妥当性を検査する$( %要素, `示している$i, ~NULL ) ◎ Set validityResult to the result of running check popover validity given element, true, and null.\ If this throws an exception, catch it, and set validityResult to that exception.

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

    5. ~IF[ %妥当性~結果 ~NEQ ~T ]: ◎ If validityResult is not true:

      1. %片付け手続き() ◎ Run cleanupSteps.
      2. ~IF[ %例外を投出するか ~EQ ~T ]~AND[ %妥当性~結果 は `DOMException$I である ] ⇒ ~THROW %妥当性~結果 ◎ If throwExceptions is true and validityResult is a DOMException, then throw validityResult.
      3. ~RET ◎ Return.
  12. ~IF[ %~eventを発火するか ~EQ ~T ]: ◎ If fireEvents is true:

    1. `~eventを発火する$( %要素, `beforetoggle$et, `ToggleEvent$I ) — 次のように初期化して ⇒# `oldState$m 属性 ~SET `open^l, `newState$m 属性 ~SET `closed^l, `source$m 属性 ~SET %要素 ◎ Fire an event named beforetoggle, using ToggleEvent, with the oldState attribute initialized to "open", the newState attribute initialized to "closed", and the source attribute set to source at element.
    2. %妥当性~結果 ~SET `~popoverの妥当性を検査する$( %要素, `示している$i, ~NULL ) ◎ Set validityResult to the result of running check popover validity given element, true, and null.\ If this throws an exception, catch it, and set validityResult to that exception.

      注記: ここで再び`~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.

    3. ~IF[ %妥当性~結果 ~NEQ ~T ]: ◎ If validityResult is not true:

      1. %片付け手続き() ◎ Run cleanupSteps.
      2. ~IF[ %例外を投出するか ~EQ ~T ]~AND[ %妥当性~結果 は `DOMException$I である ] ⇒ ~THROW %妥当性~結果 ◎ If throwExceptions is true and validityResult is a DOMException, then throw validityResult.
      3. ~RET ◎ Return.
    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.
  13. ~ELSE ⇒ `上端~層から要素を即時に除去する$( %要素 ) ◎ Otherwise, remove an element from the top layer immediately given element.
  14. %要素 の`~popover誘発元$el ~SET ~NULL ◎ Set element's popover trigger to null.
  15. %要素 の`~popover~mode$el ~SET ~NULL ◎ Set element's opened in popover mode to null.
  16. %要素 の`~popover可視性~状態$ ~SET `隠している$i ◎ Set element's popover visibility state to hidden.
  17. ~IF[ %要素 ~EQ %文書 の`~hint~stack親$doc ]~OR[ %文書 が`示している~hint~popover~list$docは`空$である【!`空にする$】 ] ⇒ %文書 の`~hint~stack親$doc ~SET ~NULL ◎ If element is document's hint stack parent, or document's showing hint popover list is empty, then set document's hint stack parent to null.
  18. ~IF[ %~eventを発火するか ~EQ ~T ] ⇒ `~popover用の~toggle~event~taskを~queueする$( %要素, `open^l, `closed^l, %~source ) ◎ If fireEvents is true, then queue a popover toggle event task given element, "open", "closed", and source.
  19. %前回に~focusされた要素 ~LET %要素 の`前回に~focusされた要素$ ◎ Let previouslyFocusedElement be element's previously focused element.
  20. ~IF[ %前回に~focusされた要素 ~NEQ ~NULL ]: ◎ If previouslyFocusedElement is not null:

    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.

  21. %片付け手続き() ◎ 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. %~source ~LET %options[ "`source$mb" ] ~DF ~NULL ◎ Let source be options["source"] if it exists; otherwise, null.
  3. ~IF[ コレの`~popover可視性~状態$ ~EQ `示している$i ]~AND[ %force ~IN { ε【!null】, ~F } ] ⇒ `~popoverを隠す$( コレ, ~T, ~T, ~T, ~NULL ) ◎ If this's popover visibility state is showing, and force is null or false, then run the hide popover algorithm given this, true, true, true, and null.
  4. ~ELIF[ %force ~IN { ε【!null】, ~T } ] ⇒ `~popoverを示す$( コレ, ~T, %~source ) ◎ Otherwise, if force is null or true, then run show popover given this, true, and source.
  5. ~ELSE:

    1. %妥当性 ~LET `~popoverの妥当性を検査する$( コレ, コレの`~popover可視性~状態$, ~T, ~NULL )
    2. ~IF[ %妥当性 は `DOMException$I である ] ⇒ ~THROW %妥当性
    ◎ Otherwise: • Let expectedToBeShowing be true if this's popover visibility state is showing; otherwise false. • Run check popover validity given this, expectedToBeShowing, and null.
  6. ~RET ~IS[ コレの`~popover可視性~状態$ ~EQ `示している$i ] ◎ Return true if this's popover visibility state is showing; otherwise false.

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

  1. %終端点は~hintか ~LET ~IS[ %終端点 ~IN %文書 が`示している~hint~popover~list$doc ] ◎ Let endpointIsHint be true if document's showing hint popover list contains endpoint; otherwise false.
  2. `~popover~stackをある所まで隠す$( ↓ ) ⇒# %文書, %終端点, `~hint$st, %前回に~focusした要素を~focusするか, %~eventを発火するか ◎ Run hide popover stack until given document, endpoint, Hint, focusPreviousElement, and fireEvents.
  3. ~IF[ %終端点は~hintか ~EQ ~T ] ⇒ ~RET ◎ If endpointIsHint is true, then return.
  4. `~popover~stackをある所まで隠す$( ↓ ) ⇒# %文書, %終端点, `自動$st, %前回に~focusした要素を~focusするか, %~eventを発火するか ◎ Run hide popover stack until given document, endpoint, Auto, focusPreviousElement, and fireEvents.

`~popover~stackをある所まで隠す@ ~algoは、 所与の ⇒# ( `文書$ %文書, [~NULL / `~HTML要素$ ] %終端点, %~stack種別 ~IN { `自動$st, `~hint$st }, 真偽値 %前回に~focusした要素を~focusするか, 真偽値 %~eventを発火するか ◎終 に対し: ◎ To hide popover stack until, given a Document document, an HTML element or null endpoint, an Auto or Hint stackType, a boolean focusPreviousElement, and a boolean fireEvents:

  1. %~popover~list ~LET `文書が示している~popover~listを取得する$( %文書, %~stack種別 ) ◎ Let popoverList be document's showing auto popover list if stackType is Auto; otherwise document's showing hint popover list.
  2. %最後の~index ~LET [ %終端点 ~NIN %~popover~list ならば 0 / ~ELSE_ %~popover~list における %終端点 の~index ~PLUS 1 ] ◎ Let lastHideIndex be 0 if popoverList does not contain endpoint; otherwise the index of endpoint in popoverList plus 1.
  3. %隠すもの ~LET `~listから切出す$( %~popover~list, %最後の~index ) ◎ Let toHide be a slice of popoverList from lastHideIndex, in reverse order.
  4. %残るもの ~LET `~listから切出す$( %~popover~list, 0, %最後の~index ) ◎ Let toRemain be a slice of popoverList from 0 to lastHideIndex.
  5. %隠すもの を成す ~EACH( %~popover ) に対し,逆順に ⇒ `~popoverを隠す$( %~popover, %前回に~focusした要素を~focusするか, %~eventを発火するか, ~F, ~NULL ) ◎ For each popover of toHide: run the hide popover algorithm given popover, focusPreviousElement, fireEvents, false, and null.
  6. %検査するもの ~LET `文書が示している~popover~listを取得する$( %文書, %~stack種別 ) ◎ Let newPopoverList be document's showing auto popover list if stackType is Auto; otherwise document's showing hint popover list.
  7. %検査するもの を成す ~EACH( %~popover ) に対し,逆順に: ◎ Let toCheck be newPopoverList in reverse order. ◎ For each popover of toCheck:

    1. ~IF[ %~popover ~IN %残るもの ] ⇒ ~CONTINUE ◎ If toRemain contains popover, then continue.
    2. `~popoverを隠す$( %~popover, %前回に~focusした要素を~focusするか, ~F, ~F, ~NULL ) ◎ Run the hide popover algorithm given popover, focusPreviousElement, false, false, and null.

      注記: これは、 ~popoverたちを隠している間に~popoverたちが示される場合に起こる — 例えば, `beforetoggle$et ~eventにおいて。 これは,通例的には開発者の~errorなので、 ~UAには,警告を示すことが奨励される。 この~popoverを隠す追加的な段においては、 %~eventを発火するか は無視され,代わりに ~F が渡される【!利用される】。 ◎ This happens if popovers are shown whilst hiding popovers. For example, in beforetoggle events. This is usually a developer error, so user agents are encouraged to show a warning. In this additional hiding phase, fireEvents is ignored, and false is used instead.

注記: `~popover~stackをある所まで隠す$~algoは、 いくつかの事例で,~popoverのうち[ 何かが起きたときでも,開いたまま残されるもの ]以外のものをすべて隠すために利用される。 例えば,この~algoは、 ~popoverを`軽く退ける$間は,~popoverのうち[ 利用者により~clickされた~nodeに関係しないもの ]に限り閉じることを確保する。 ◎ The hide popover stack 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先祖を見出す@ ~algoは、 所与の ⇒# `~node$ %~node, [ `~HTML要素$/ ~NULL ] %~source, 真偽値 %~popoverであるか ◎終 に対し,[ `~HTML要素$ / ~NULL ]を返す: ◎ To find the topmost popover ancestor, given a Node newPopoverOrTopLayerElement, an HTML element or null source, and a boolean isPopover, perform the following steps. They return an HTML element or null.

注記: `最上層な~popover先祖を見出す$~algoは、 供された %~node — 新たな~popover, または`上端~層$を成す要素 — 用に,最上層な先祖~popoverを返すことになる。 ◎ The topmost popover ancestor algorithm will return the topmost 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".
  • ある要素が当の~popoverの “~source” であるとき (例: `command$a を伴う `button$e は `~popoverを示す$st 状態にある)。 この事例では、 当の~popoverが “子” になり, %要素 を包含している~popover下位treeが “親” になる — %要素 【!invoker】は[ ある~popover内に在って,ある開な~popoverを参照する ]必要がある。 ◎ An element is the 'source' of the popover (e.g., a button with command in the Show Popover state). In this case, the popover is the "child", and the popover subtree the trigger element is in is the "parent". The trigger element has to be in a popover and reference an open popover.

上により形成される各~関係性において、 親~popoverは,[ `示している自動~popover~list$doc/ `示している~hint~popover~list$doc ]内で,子~popoverより厳密に先に来る必要がある — さもなければ、 妥当な先祖-関係性を形成しない。 これは、[ 示していない~popover, 自己-~pointer (例:上に挙げた 2 つ目の関係性において、 %要素 が指している~popoverと %要素 を包含している~popoverが同じである) ]を排することに加え,[ (場合によっては循環な)接続たちが成す~graphから,きちんと形成された~treeを構築する ]ことを許容する。 ここで考慮されるのは、[ `popover$a 属性の状態 ~IN { `自動$st, `~hint$st } ]を満たす~popoverに限られる。 ◎ In each of the relationships formed above, the parent popover has to be strictly earlier in the showing auto popover list or showing hint 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 and Hint 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. ~Assert: %~popoverであるか に応じて: ◎ ↓

    • ~T ならば ~AND↓ が満たされる: ◎ If isPopover is true:

      • %~node は`~HTML要素$である。 ◎ Assert: newPopoverOrTopLayerElement is an HTML element.
      • %~node の `popover$a 属性の状態 ~NIN { `~popoverなし$st, `手動$st } ◎ Assert: newPopoverOrTopLayerElement's popover attribute is not in the No Popover State or the Manual state.
      • %~node の`~popover可視性~状態$ ~NEQ `示している$i ◎ Assert: newPopoverOrTopLayerElement's popover visibility state is not in the popover showing state.
    • ~F ならば次が満たされる ⇒ %~source ~EQ ~NULL ◎ Otherwise: • Assert: source is null.
  2. %文書 ~LET %~node の`~node文書$ ◎ Let document be newPopoverOrTopLayerElement's node document.
  3. %結合された~popover群 ~LET [ %文書 が`示している自動~popover~list$doc ]を[ %文書 が`示している~hint~popover~list$doc ]で`拡張する$ ◎ Let combinedPopovers be document's showing auto popover list extended with document's showing hint popover list.
  4. %結合された~popover群 を成す ~EACH( %~item ) に対し,逆順に:

    1. ~IF[ ~OR↓ ]…

      • %~node は`平坦~tree$における %~item の`子孫$である
      • [ %~source ~NEQ ~NULL ]~AND[ %~source は`平坦~tree$における %~item の`子孫$である ]

      …ならば ⇒ ~RET %~item

    ◎ Let popoverAncestorIndex be the index of the last item in combinedPopovers of which newPopoverOrTopLayerElement is a flat tree descendant, otherwise -1. ◎ Let sourceAncestorIndex be -1. ◎ If source is not null, then set sourceAncestorIndex to the index of the last item in combinedPopovers of which source is a flat tree descendant, otherwise -1. ◎ Let ancestorIndex be the maximum of popoverAncestorIndex and sourceAncestorIndex. ◎ If ancestorIndex is -1, then return null. ◎ Return combinedPopovers[ancestorIndex].
  5. ~RET ~NULL ◎ ↑

`広義-先祖のうち最も近い開な~popoverを見出す@ ~algoは、 所与の ( `~node$ %~node ) に対し,[ ~NULL /`~HTML要素$ ]を返す: ◎ 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~mode$el ~IN { `auto^l, `hint^l } ]~AND[ %~node の`~popover可視性~状態$ ~EQ `示している$i ] ⇒ ~RET %~node ◎ If currentNode's opened in popover mode is "auto" or "hint", 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.

`最上層な自動または~hint~popoverを見出す@ ~algoは、 所与の ( `文書$ %文書 ) に対し,[ `~HTML要素$ / ~NULL ]を返す: ◎ To find the topmost auto or hint popover given a Document document, perform the following steps. They return an HTML element or null.

  1. « `~hint$st, `自動$st » を成す ~EACH( %種別 ) に対し:

    1. %~popover~list ~LET `文書が示している~popover~listを取得する$( %文書, %種別 )
    2. ~IF[ %~popover~list は`空$でない ] ⇒ ~RET %~popover~list を成す最後の~item【!要素】
    ◎ If document's showing hint popover list is not empty, then return document's showing hint popover list's last element. ◎ 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する@ ~algoは、 所与の ( `~HTML要素$ %~subject ) に対し: ◎ To perform the popover focusing steps for an HTML element subject:

  1. ~IF[ `~focusを許容する手続き$( %~subject の`~node文書$ ) ~EQ ~F ] ⇒ ~RET ~F ◎ If the allow focus steps given subject's node document return false, then return.
  2. ~IF[ %~subject は `dialog$e 要素である ] ⇒# `~dialogを~focusする$( %~subject ); ~RET ◎ If subject is a dialog element, then run the dialog focusing steps given subject and return.
  3. %~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".
  4. ~IF[ %~control ~EQ ~NULL ] ⇒ ~RET ◎ If control is null, then return.
  5. `~objを~focusする$( %~control ) ◎ Run the focusing steps given control.
  6. %~top-level文書 ~LET %~control の`~node~navigable$の`~top-level辿可能$navにて`作動中な文書$nav ◎ Let topDocument be control's node navigable's top-level traversable's active document.
  7. ~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.
  8. %~top-level文書 の`自動focus候補~群$を`空にする$ ◎ Empty topDocument's autofocus candidates.
  9. %~top-level文書 の`自動focusは処理-済みか$ ~SET ~T ◎ Set topDocument's autofocus processed flag to true.

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

【 原文の~algoは,例外~objを返す代わりに投出しているが、 この~algoを利用している ほとんどの箇所では,それを~catchして処理を続行しているので、 この訳では,単純に例外を返すよう改める (それに伴い, ~catchしている箇所では その記述を省略して、 ~catchしない箇所では代わりに明示的に投出するよう改める)。 】

  1. ~IF[ %要素 は`~popover要素$でない ] ⇒ ~RET `新たな例外$( `NotSupportedError$E ) ◎ If element's popover attribute is in the No Popover state, then throw a "NotSupportedError" DOMException.
  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か$dG ~EQ ~T ] ◎ element is a dialog element and its is modal is set to true; or
    • %要素 の`~fullscreenか$ ~EQ ~T ◎ element's fullscreen flag is set,

    …ならば ⇒ ~RET `新たな例外$( `InvalidStateError$E ) ◎ then throw an "InvalidStateError" DOMException.

  4. ~RET ~T ◎ Return true.

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

`文書が示している~popover~listを取得する@ ~algoは、 所与の ( `文書$ %文書, %種別 ~IN { `自動$st, `~hint$st } ) に対し:

  1. %~mode ~LET %種別 に応じて ⇒# `自動$st ならば `auto^l / `~hint$st ならば `hint^l
  2. %~popover群 ~LET « »
  3. %文書 の`上端~層$を成す ~EACH( `要素$ %要素 ) に対し:

    1. ~IF[ ~AND↓ ]…

      • %要素 は`~HTML要素$である
      • %要素 の`~popover~mode$el ~EQ %~mode
      • %要素 の`~popover可視性~状態$ ~EQ `示している$i

      …ならば ⇒ %~popover群 に %要素 を`付加する$

  4. ~RET %~popover群
◎ ↓

所与の`文書$ %文書 に対し: ◎ ↓

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 `PopoverTargetAttributes@I {
  [`CEReactions$, `Reflect$] attribute Element? `popoverTargetElement@m;
  [`CEReactions$] attribute DOMString `popoverTargetAction$m;
};

【 `popoverTargetElement$m の Reflect がとる `popovertarget$a は、 この訳による補完。 】

`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, %~node ) ◎ If popover's popover visibility state is showing, then run the hide popover algorithm given popover, true, true, false, and node.
  9. ~ELSE: ◎ Otherwise:

    1. %妥当性 ~LET `~popoverの妥当性を検査する$( %~popover, `隠している$i, ~NULL ) ◎ Let validity be the result of running check popover validity given popover, false, and null.\
    2. ~IF[ %妥当性 は `DOMException$I である ] ⇒ %妥当性 ~SET ~F ◎ If this throws an exception, catch it, and let validity be false.
    3. ~IF[ %妥当性 ~EQ ~T ] ⇒ `~popoverを示す$( %~popover, ~F, %~node ) ◎ If validity 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 属性の状態 ~IN { `自動$st, `~hint$st } ]を満たすものに対し,当の~popoverの外側を~clickすると、 当の~popoverを閉じることになる。 このふるまいは、[ そのような~popoverが`閉-要請$に対しどう応答するか ]に対する追加である。 ◎ "Light dismiss" means that clicking outside of a popover whose popover attribute is in the Auto or Hint state will close the popover. This is in addition to how such popovers respond to close requests.

`開な~popoverたちを軽く退ける@ ~algoは、 所与の ( `PointerEvent$I %~event ) に対し: ◎ To light dismiss open popovers, given a PointerEvent 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. ~IF[ `最上層な自動または~hint~popoverを見出す$( %文書 ) ~EQ ~NULL ] ⇒ ~RET ◎ If the result of running topmost auto or hint popover given document is null, then return.
  6. ~IF[ %~event の `type$m ~EQ "`pointerdown$et" ] ⇒ %文書 の`~popover~pointerdown~target$doc ~SET `最上層な~clickされた~popoverを見出す$( %~target ) ◎ If event's type is "pointerdown": set document's popover pointerdown target to the result of running topmost clicked popover given target.
  7. ~ELIF[ %~event の `type$m ~EQ "`pointerup$et" ]: ◎ If event's type is "pointerup":

    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[ %同じ~targetか ~EQ ~F ] ⇒ ~RET ◎ If sameTarget is false, then return.
    5. %終端点は~hintか ~LET ~IS[ %先祖 ~IN %文書 が`示している~hint~popover~list$doc ] ◎ Let endpointIsHint be true if document's showing hint popover list contains ancestor; otherwise false.
    6. `~popover~stackをある所まで隠す$( ↓ ) ⇒# %文書, %先祖, `~hint$st, ~F, ~T ◎ Run hide popover stack until given document, ancestor, Hint, false, and true.
    7. %自動~終端点 ~LET %先祖 ◎ Let autoEndpoint be ancestor.
    8. ~IF[ %終端点は~hintか ~EQ ~T ] ⇒ %自動~終端点 ~SET %文書 の`~hint~stack親$doc ◎ If endpointIsHint is true, then set autoEndpoint to document's hint stack parent.

      注記: これは、 ある~hint~popoverが~clickされた場合、 自動~popoverたちのうち[ 当の~clickされた~hint~popoverの親であるもの以外 ]が閉じられることを意味する。 ◎ This means, if a hint popover is clicked, auto popovers are closed, except those that are parent to the clicked hint popover.

    9. `~popover~stackをある所まで隠す$( ↓ ) ⇒# %文書, %自動~終端点, `自動$st, ~F, ~T ◎ Run hide popover stack until given document, autoEndpoint, Auto, false, and true.

`最上層な~clickされた~popoverを見出す@ ~algoは、 所与の ( `~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. %~target~popover ~LET `最も近い広義-~target~popoverを見出す$( %~node ) ◎ Let targetPopover be the result of running nearest inclusive target popover given node.
  3. ~IF[ `~popover~stack位置を取得する$( %~clickされた~popover ) ~GT `~popover~stack位置を取得する$( %~target~popover ) ] ⇒ ~RET %~clickされた~popover ◎ If the result of getting the popover stack position given clickedPopover is greater than the result of getting the popover stack position given targetPopover, then return clickedPopover.
  4. ~RET %~target~popover ◎ Return targetPopover.

`~popover~stack位置を取得する@ ~algoは、 所与の ( `~HTML要素$ %~popover ) に対し: ◎ To get the popover stack position, given an HTML element popover:

  1. %~hint~list ~LET %~popover の`~node文書$が`示している~hint~popover~list$doc ◎ Let hintList be popover's node document's showing hint popover list.
  2. %自動~list ~LET %~popover の`~node文書$が`示している自動~popover~list$doc ◎ Let autoList be popover's node document's showing auto popover list.
  3. 範囲 { 0 〜 %~hint~list の`~size$ ~MINUS 1 } を成す ~EACH( %~index ) に対し ⇒ ~IF[ %~popover ~EQ %~hint~list[ %~index ] ] ⇒ ~RET %自動~list の`~size$ ~PLUS %~index ~PLUS 1 ◎ If popover is in hintList, then return the index of popover in hintList + the size of autoList + 1.
  4. 範囲 { 0 〜 %自動~list の`~size$ ~MINUS 1 } を成す ~EACH( %~index ) に対し ⇒ ~IF[ %~popover ~EQ %自動~list[ %~index ] ] ⇒ ~RET %~index ~PLUS 1 ◎ If popover is in autoList, then return the index of popover in autoList + 1.
  5. ~RET 0 ◎ Return 0.

`最も近い広義-~target~popoverを見出す@ ~algoは、 所与の ( `~node$ %~node ) に対し: ◎ To find the nearest inclusive target popover 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 属性の状態 ~IN { `自動$st, `~hint$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 or the Hint 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.