このようなテキストエリアとテキストがあって
そのボタンをクリックしたら選択したテキストをコンソールに出してみる
マウスの位置を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の要素に追加する |
