LANG SELRCT

コードを書く場所

2019年5月1日水曜日

選択したテキストを取得するボタンを表示したい


このようなテキストエリアとテキストがあって


テキストを選択したらボタンを表示して(この例ではshowBt)


そのボタンをクリックしたら選択したテキストをコンソールに出してみる



マウスの位置をX, Y座標で取得して
mouseupしたときに
  • ボタンを表示する処理
  • コンソールに出力する処理

を書いています


ボタンをクリックしたときもmouseupになるので
  • テキストが選択されているか
  • ボタンが表示されているか

を判定して処理を分けています



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
<div id="main_div">
  <div id="position" style="display:none">
    <label>X</label><input type="text" id="posX">
    <br>
    <label>Y</label><input type="text" id="posY">
    <br>
  </div>
  <textarea></textarea>
</div>
<script>
function elem(id) {
  return document.getElementById(id);
}

var SHOW_BUTTON_TEXT = 'showBt';

/************************************
イベント
************************************/
window.onmousemove = mouseMoveFunction;
window.onmouseup = mouseUpFunction;

/************************************
マウスが動いたときに座標を取得する
************************************/
function mouseMoveFunction(e) {
  elem("posX").value = e.pageX;
  elem("posY").value = e.pageY;
}

/************************************
セレクトが発生したら
ボタンを作成する
************************************/
function mouseUpFunction(e) {
  var targetElement = e.target;
  var targetId = targetElement.id
  var text = window.getSelection().toString();
  if(text && targetId === SHOW_BUTTON_TEXT) {
    console.log(text);
    removeBt();
  } else if(text && targetId !== SHOW_BUTTON_TEXT) {
    createButton(text);
  } else {
    removeBt()
  }
}

/************************************
SHOW_BUTTON_TEXTの要素があったら消す
************************************/
function removeBt() {
  var targetBt = elem(SHOW_BUTTON_TEXT);
  if(targetBt){
    targetBt.remove();
  }
}

/************************************
SHOW_BUTTON_TEXTの要素を作る
************************************/
function createButton(text) {
  removeBt();
  var posX = elem("posX").value;
  var posY = elem("posY").value;
  
  var button = document.createElement('button');
  button.setAttribute('id', SHOW_BUTTON_TEXT);
  button.textContent = 'showBt';
  button.style.position = 'absolute'; 
  button.style.left = posX + 'px'; 
  button.style.top  = posY + 'px';
  elem('main_div').appendChild(button);
}

</script>
</body>
</html>

意訳
 



座標の要素(非表示エリア)
ラベルとX座標

ラベルとY座標


テキストエリア


この機能がやること
idの要素を返す


表示するボタンのテキスト




マウスが動いた時にmouseMoveFunctionを実行する
マウスのボタンが上がった時にmouseUpFunctionを実行する




この機能がやること
posXの要素にX座標の値を入れる
posYの要素にY座標の値を入れる






この機能がやること
イベントが発生した要素を取得して
そのidを取得して
選択されているテキストを取得して文字列にして
もしtextが存在していて、targetIdがshowBtなら
コンソールに選択されているテキストを出す
showBtの要素を削除する
もしtextが存在していてtargetIdがshowBtでなければ(showBt以外の要素でテキストが選択されたら)
ボタンを作る
それ以外なら
showBtの要素を削除する






この機能がやること
SHOW_BUTTON_TEXTの要素を取得して
存在していたら
削除する






この機能がやること
removeBt()を実行する
posXの値を取得して
posYの値を取得して

button要素を作って
idを設定して
textContentを設定して
positionをabsoluteにして
左からの位置を設定して
上からの位置を設定して
main_divの要素に追加する