小 中 大
■ ■ ■ ■ ■ ■ ■

Home > 2024年 > 11月 > 3日

Yahoo！みたいな検索ボタンを付けてみた．挙動が若干不審気味かもしれない．

2024年11月03日

Logging

おはようございます．Yahoo！みたいな検索ボタンを付けてみた．挙動が若干不審ですが先日の早朝にリリースしました．先日の記事にも書いたのですがいろいろと機能を追加しているのでなんだか、サイトがごちゃごちゃしてきている気がします．当初はシンプルベストにしたいなと思っていたのですが、まるで注文の多い料理店の様．

ソースコードは汎用性のあるコードにしたつもりなので、環境がワードプレスなら動作すると思います．ソースコードはこちら．因みに変数の命名は自分サイトの命名規則に従っていますので、ご自身のサイトにあった命名規則に変更してください．

const zbody = document.body;
let zsearchButton = null;


zbody.addEventListener('mouseup', handleSelectionPc);

function handleSelectionPc() {
  const selection = window.getSelection();
  const selectedText = selection.toString();

  // 選択されたテキストが存在する場合
  if (selectedText) {

    // 選択範囲の矩形を取得
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();

    // 検索ボタンを作成
    if (!zsearchButton) {
      zsearchButton = document.createElement('button');
      zsearchButton.textContent = '検索';
      zsearchButton.classList.add('search-button', 'btn', 'btn-dark');
      // ボタンをbodyにappendChildし、位置を調整
      document.body.appendChild(zsearchButton);
      zsearchButton.style.position = 'absolute';
      zsearchButton.style.top = `${rect.top + window.scrollY + 30}px`;
      zsearchButton.style.left = `${rect.left + window.scrollX}px`;
    }
    // クリックイベントリスナーを追加
    zsearchButton.addEventListener('click', () => {
      search(selectedText);
      removeButton();
    });
  } else {
    // 検索ボタンを削除
    removeButton();
  }
}

zbody.addEventListener('touchend', handleSelectionSp);

function handleSelectionSp() {

  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();
  const selectedText = selection.toString();
  if (selectedText) {
    if (!zsearchButton) {
      zsearchButton = document.createElement('button');
      zsearchButton.textContent = '検索';
      zsearchButton.classList.add('search-button', 'btn', 'btn-dark');
      document.body.appendChild(zsearchButton);
      zsearchButton.style.position = 'absolute';
      zsearchButton.style.top = `${window.scrollY + rect.top + 30}px`;
      zsearchButton.style.left = `${rect.left}px`;
    }
    zsearchButton.addEventListener('click', () => {
      search(selectedText);
      removeButton();
    });
  } else {
    removeButton();
  }
}

function removeButton() {
  if (zsearchButton) {
    zsearchButton.remove();
    zsearchButton = null;
    return removeButton();
  }
}

function search(keyword) {
  window.location.href = '://' + window.location.host + '/?s=' + encodeURI(keyword);
}

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

投稿日時 2024年11月03 06:00日

タグ

body, createElement, else, encodeURI, getRangeAt, getSelection, handleSelectionPc, handleSelectionSp, keyword, null, px, removeButton, search, selectedText, window.scrollX, window.scrollY, zsearchButton, zsearchButton.classList.add, クリックイベントリスナー, 矩形,