stopsopa/skill-popover-api

もしそれが私たちのローカルコピーと比較して更新された場合、ローカルコピーも更新する必要があります。

初めて popover api を使うように求められたら、まず assets/popover.css ファイルをプロジェクト内のどこかにコピーしてください。

そのファイルをプロジェクトのどこにコピーし、どのように読み込むべきか、明確でない場合はユーザーに相談するのが妥当です。

しかし基本的には単純なフラットな css ファイルなので、フレームワークに読み込む場所があれば、合理的な標準に従ってください。 エルゴノミクスの理由から、二重に読み込まないようにするだけで十分です。

アンカークリック時にポップオーバーを表示する場合

core-css を使用してポップオーバーを配置する場合の基本構造は次のとおりです:

<button popovertarget="mypopover2">ポップオーバーを切り替え</button>
<div id="mypopover2" popover data-popover>
  ポップオーバーの内容
  <button popovertarget="mypopover2" popovertargetaction="hide">閉じる</button>
</div>

上記の例では、アンカーとして機能するボタンがあります。ボタンがクリックされるとポップオーバー（[popover] 属性を持つ要素）が表示され、再度クリックされると非表示になります。

また、ポップオーバー内をクリックしても非表示にはなりません。ただし「閉じる」ボタンをクリックすると閉じます。

また、ポップオーバーの外側をクリックするとポップオーバーは非表示になります。

この例の構造に従う場合、標準の popover api の機能以上のことは何も行いません。 ユーザーのユースケースに適した任意の変更を自由に適用してください。

注意: ここで「閉じる」ボタンを定義する必要はありません。「閉じる」ボタンがなくても100%機能します。

つまり、この html 構成はデフォルトレイアウトです。

ここでの主な有効化要素は 'data-popover' 属性です。この属性により assets/popover.css のスタイルが有効になり、主にアンカー要素に対するポップオーバーの配置を担当します。

[data-popover] 属性を追加しないことも可能ですが、その場合、カスタムスタイルは失われ、ポップオーバーは通常のネイティブ要素のように動作します。
[data-popover] 属性がある場合は、このスキルで提供されるスタイルを使用して popover api を処理していることになります。属性がない場合は、おそらくこのスキルが提供するものはなく、標準の popover api 実装で必要なことを行ってください。

しかし、重要なのは [data-popover] 属性が、このスキルで提供されるスタイルを使用して popover api を処理するケースと、手動で処理するケースを明示的に区別する役割を果たすことです。つまり、[data-popover] が指定されていない場合、私たちの css は手動の popover api 実装に干渉しません。

そのため、一般的には [data-popover] を使用して私たちのスタイルに従うか、生のネイティブ popover api を使用したい場合はそれを避けるかを自由に選択できます。

このドキュメントで示されている例は、通常のネイティブ popover api で通常使用できる他の javascript や html api によって制御できます。

<button popovertarget="mypopover3">ポップオーバーを切り替え</button>
<div id="mypopover3" popover="manual" data-popover>
  ポップオーバーの内容
  <button popovertarget="mypopover3" popovertargetaction="hide">閉じる</button>
</div>

ここでは「閉じる」ボタンでのみ閉じます。

主な変更点は popover="manual" です。ポップオーバーがマニュアルモードの場合、js または popovertargetaction="hide" を持つ要素をクリックすることでのみ閉じることができます。

すべての例で、単一のポップオーバーを実装するための div の形成において、id は常に一意に保ってください。 また、popovertarget が常にその特定の id を指すようにして、これらの dom 要素が連携して動作するようにしてください。

注意: ただし、標準の popover api では、同じポップオーバーに複数のアンカーを設定することも可能です。必要であれば、それは当然許可されます。

<button popovertarget="mypopover4">ポップオーバーを切り替え</button>
<div id="mypopover4" popover data-popover>
  ポップオーバーの内容
  <button popovertarget="mypopover4" popovertargetaction="hide">閉じる</button>
</div>

<div class="container one">
  <button class="toolbar-button" interestfor="popover-b"><b>B</b></button>
  <button class="toolbar-button" interestfor="popover-i"><i>I</i></button>
  <button class="toolbar-button" interestfor="popover-u"><u>U</u></button>
</div>

<div class="container two">
  <button class="toolbar-button" interestfor="popover-b"><b>B</b></button>
  <button class="toolbar-button" interestfor="popover-i"><i>I</i></button>
  <button class="toolbar-button" interestfor="popover-u"><u>U</u></button>
</div>

<span popover="" id="popover-b" data-popover class="bottom">Bold</span>
<span popover="" id="popover-i" data-popover>Italic</span>
<span popover="" id="popover-u" data-popover>Underline</span>

上記には2組のコンテナがあります -> class="container"。（それぞれ 'one' と 'two' という別々のクラスが付いています）

各コンテナには3つのボタンがあります。

各ボタンには 'interestfor' 属性があり、3つのポップオーバーのいずれかの id を指しています。

注目すべき点は、3つのボタンを持つコンテナが2つあるのに対し、ポップオーバーは3つだけであることです。これは、複数の要素にホバーすることで同じポップオーバーをトリガーできるという関係を示しており、これは問題なく許可されています。

そして最も重要なのは、属性 'interestfor' が 'popovertarget' の代わりに使用されている点です。これにより、ポップオーバーの表示方法が変わります。

'interestfor' を使用すると、マウスホバーだけでポップオーバーが表示されます。 一方、'popovertarget' を使用すると、クリックでポップオーバーが表示されます。

ポップオーバーがアンカー要素に対してどこに表示されるかを決定するには、core-css ファイルを使用します。

前述の通り、core-css ファイルを使用するには、[popover] 要素に [data-popover] 属性を追加する必要があります。

その時点から、アンカー要素に対するポップオーバーの位置を制御するには、[data-popover] 属性を持つ要素に css クラスを追加します。

利用可能なクラスは次のとおりです:

• クラス top: アンカーの上に配置され、水平方向に中央揃えされます。（'data-popover' 要素にクラスが追加されていない場合でも使用されるデフォルトスタイルです）

• クラス bottom: アンカーの下に配置され、水平方向に中央揃えされます。（'data-popover' 要素にクラスが追加されていない場合でも使用されるデフォルトスタイルです）

• クラス left: アンカーの左に配置され、垂直方向に中央揃えされます。（'data-popover' 要素にクラスが追加されていない場合でも使用されるデフォルトスタイルです）

• クラス right: アンカーの右に配置され、垂直方向に中央揃えされます。（'data-popover' 要素にクラスが追加されていない場合でも使用されるデフォルトスタイルです）

• クラス top-left: アンカーの上に配置され、左端がアンカーの左端に揃えられます。

• クラス top-right: アンカーの上に配置され、右端がアンカーの右端に揃えられます。

• クラス bottom-left: アンカーの下に配置され、左端がアンカーの左端に揃えられます。

• クラス bottom-right: アンカーの下に配置され、右端がアンカーの右端に揃えられます。

• クラス center: アンカーの真上に配置され、水平方向と垂直方向の両方で中央揃えされます。

• クラス topleft: ポップオーバーの右下隅がアンカーの左上隅に接します。

• クラス topright: ポップオーバーの左下隅がアンカーの右上隅に接します。

• クラス bottomleft: ポップオーバーの右上隅がアンカーの左下隅に接します。

• クラス bottomright: ポップオーバーの左上隅がアンカーの右下隅に接します。

• クラス left-top: アンカーの左に配置され、上端がアンカーの上端に揃えられます。

• クラス left-bottom: アンカーの左に配置され、下端がアンカーの下端に揃えられます。

• クラス right-top: アンカーの右に配置され、上端がアンカーの上端に揃えられます。

• クラス right-bottom: アンカーの右に配置され、下端がアンカーの下端に揃えられます。

どの配置クラスを使用するかはユーザーから情報を得ることが望ましいですが、ユーザーが特定の配置を言葉で説明した場合は、その説明に基づいて最適なクラスを自動的に見つけるようにしてください。

ユーザーまたは AI がどのクラスを使用すべきか混乱している場合は、クラスの動作がインタラクティブに表示されているメインの github ページのデモページへのリンクをユーザーに提案してください:

https://stopsopa.github.io/skill-popover-api/demo/index.html

ユーザーは、問題のポップオーバーに最適な配置動作を提供するクラスを観察できます。

そのデモページから、ユーザーはリボンウィジェットをワンクリックするだけで、詳細情報があるメインの github ページに移動することもできます。

'data-popover' 属性を使用して core-css スタイルを有効にする html の構成は普遍的です。

これは、vanilla html、react、angular、svelte などで使用できます。

基本的な基盤となる html が上記の例に示されているものと一致し、assets/popover.css がブラウザコンテキストで読み込まれている限り機能します。

ただし、特定のフレームワークに固有の標準的な react ラッパーコンポーネントやその他の構成/構造でラップする必要がある場合があります。

上記の例に基づいて、特定のフレームワークのコンテキストに適切な処理を行ってください。