最終更新日絞り込みコンポーネント¶

前提

機能説明¶

最終更新日絞り込み用チェックボックスを表示します。
このコンポーネントは企業サイト向けの用途でのみ使用可能です。
識別子にグループ名が含まれます。
表示にはグループ名に対応した最終更新日リソースファイルが必要です。
存在しないグループ名を指定した場合、警告が表示されます

表示バリエーションをリソースファイルに記述し、見た目を変更することができます。
存在しないバリエーションやバリエーションが未指定の場合はtype1となります。

表示バリエーション
type1: ラジオボタン型
type1s: プルダウン型

See the Pen this by BST developer (@bsearchtech)on CodePen.

設定方法¶

必須設定¶

Htmlの修正

<div data-[モード]="lastmodifiedselector-group1"></div>

リソースファイルの作成

最終更新日リソースファイル¶

最終更新日リソースファイルは、最終更新日絞り込みコンポーネントにおいて、標準の機能ではなく、見た目や日付範囲のリストをカスタマイズしたグループを新たに定義し、利用する為のファイルです。

最終更新日絞り込み機能を使用しない場合、標準の見た目や日付範囲で使用する場合は、このファイルを作成、読み込みする必要はありません。

Warning

リソースファイルを読み込ませた場合、グループ名を省略した最終更新日絞り込みコンポーネントの利用には先頭のグループが使用されます

sitesearchLastModified という変数に、各値がハッシュになる配列を代入しているファイルを作成します。

以下にファイル例を示します

  var sitesearchLastModified = [
    {
      group: {"label": "最終更新日の絞り込み（年）", "name":"g1"},
      dateranges: [
        {label: "2021年", from: "2021/01/01", to: "2021/12/31"},
        {label: "2020年", from: "2020/01/01", to: "2020/12/31"},
        {label: "2019年", from: "2019/01/01", to: "2019/12/31"},
      ]
    },
    {
      group: {"label": "最終更新日の絞り込み（最近）", "name":"g2"},
      type: 'type1s',
      dateranges: [
        {label: "3日以内",  from: "NOW-3"},
        {label: "15日以内", from: "NOW-15"},
        {label: "30日以内", from: "NOW-30"}
      ]
    },
  ];

各値となるハッシュは次のエントリを含みます

親要素	子要素	型	デフォルト値	説明
group		ハッシュ		最終更新日絞り込みコンポーネントを表示するグループの単位以下のメンバーを持つ
	label	文字列		最終更新日絞り込みコンポーネントで表示される見出し
	name	文字列		最終更新日絞り込みコンポーネントを呼び出す際のコンポーネント識別子の値の一部
type		文字列	'type1'	見た目のバリエーション。種類とその名称については「コンポーネントリファレンス」を参照
dateranges		ハッシュ	[{ from: 'NOW-1' }, { from: 'NOW-7' }, { from: 'NOW-30' }]	絞り込みに利用する日付範囲のリスト以下のメンバーを持つ
	label	文字列		日付範囲として表示される見出し
	from	日時 (後述)		日付指定の起点(日本標準時: JST)
	to	日時 (後述)		日付指定の終点(日本標準時: JST)

日時で指定可能な値¶

from,to で指定可能な日時のフォーマットは

YYYY/MM/DD (年月日)
YYYY/MM/DD HH:MM:SS (年月日時分秒)

または、予約キーワードとして

NOW (現在時刻)
NOW+N (現在時刻にN日を加算したもの)
NOW-N (現在時刻にN日を減算したもの)

が利用できる

dom構造¶

Dom

最終更新日絞り込みコンポーネント¶

type1¶

<!-- ここでは グループの名称を"最終更新日の絞り込み"、値を"GRP1" とする -->
<div data-[モード]="lastmodifiedselector-GRP1">
  <div class="_lastmodifiedselector _lastmodifiedselector_type1">
    <div class="_label">最終更新日による絞り込み</div>
    <div class="_last_modifieds">
      <form name="GRP1">
        <!--  リソースの内容にかかわらず、全てを選択する選択肢を表示する -->
        <div class="_last_modified _last_modified_select_all">
          <label for="...">
            <input
              id="..."
              type="radio"
              value="0"
              data-pflm-pos="0"
              name="GRP1"
              onchange="..."
            />
            <span class="_label">すべての期間</span>
          </label>
        </div>
        <!--  リソースの内容やデフォルトの候補が繰り返し表示される -->
        <div class="_last_modified _last_modified_VALUE1">
          <label for="...">
            <input
              id="..."
              type="radio"
              value="1"
              data-pflm-pos="1"
              name="GRP1"
              onchange="..."
            />
            <span class="_label">VALUE1の期間</span>
          </label>
        </div>
        ...
      </form>
    </div>
  </div>
</div>

type1s¶

<!-- ここでは グループの名称を"最終更新日の絞り込み"、値を"GRP1" とする -->
<div data-[モード]="lastmodifiedselector-GRP1">
  <div class="_lastmodifiedselector _lastmodifiedselector_type1s">
    <div class="_label">最終更新日による絞り込み</div>
    <div class="_last_modifieds">
      <form name="GRP1">
        <select onchange="...">
        <!--  リソースの内容にかかわらず、全てを選択する選択肢を表示する -->
        <option id="..." class="_last_modified _last_modified_select_all" value="0" data-pflm-pos="0">すべての期間</option>
        <!--  リソースの内容やデフォルトの候補が繰り返し表示される -->
        <option id="..." class="_last_modified _last_modified_VALUE1" value="1" data-pflm-pos="1">VALUE1の期間</option>
        ...
      </form>
    </div>
  </div>
</div>