Custom gesture examples [jp] - utubo/firefox-simple_gesture GitHub Wiki
カスタムジェスチャ Javascriptの例
タブ関係
入力した文字列をgoogleで検索する
/**
* @name ググる
*/
const q = prompt();
if (q) {
SimpleGesture.open('https://www.google.com/search?q=' + encodeURIComponent(q));
}
URLを確認してから現在のタブで開く
/**
* @name リンクのURLを確認
*/
let target = SimpleGesture.target;
for (target) {
if (target.href) {
if (confirm('このURLを開きますか?\n' + target.href)) {
location.href = target.href;
}
break;
}
target = target.parentNode;
}
一般
貼り付けて移動
/**
* @name Paste and Go
*/
navigator.clipboard.readText().then(text => {
if (text.startsWith("http://") || text.startsWith("https://")) {
SimpleGesture.open(text);
} else {
SimpleGesture.open('https://www.google.com/search?q=' + encodeURIComponent(text));
}
});
最初の入力欄にフォーカスする
/** @name 最初の入力欄にフォーカスする */
for (let e of document.getElementsByTagName('INPUT')) {
if (!e.getAttribute('type') || e.getAttribute('type').match(/text|search/)) {
e.focus();
e.select();
break;
}
}
画面全体を下げる
HTML最上部にマージンを追加しタップしやすくします。 追加されたマージンをタップすると元に戻ります。
/** @name 画面を下げる */
if (window._SGMT_) {
_SGMT_.apply();
} else {
window._SGMT_ = {
HEIGHT: '60vh',
COLOR: '#d7d7db',
apply: () => {
document.documentElement.classList.add('SGMT');
scrollTo({top:0, behavior:'smooth'});
},
reset: e => {
if (e.target.tagName!='HTML') return;
document.documentElement.classList.remove('SGMT');
},
};
const s = document.createElement('style');
s.textContent = `
html::before {
background:${_SGMT_.COLOR};
height:0vh;
display:block;
transition:height .5s;
content:"";
}
html.SGMT::before {
height:${_SGMT_.HEIGHT};
}
.SGMT .SGMT-FIXED {
top:${_SGMT_.HEIGHT};
}
`;
s.type = 'text/css';
document.head.appendChild(s);
let f = document.elementFromPoint(0, 0);
while (f) {
if (f.tagName === 'BODY' || f.tagName === 'HTML') break;
if (getComputedStyle(f).getPropertyValue('position') === 'fixed') {
f.classList.add('SGMT-FIXED');
break;
}
f = f.parentNode;
}
addEventListener('click', _SGMT_.reset);
setTimeout(_SGMT_.apply, 10);
}
メディア関係
ビデオ再生時の全画面表示を解除する
/** @name 全画面表示を解除 */
document.mozFullScreenElement && document.mozCancelFullScreen();
ページ全体を全画面表示にする方法はないのかもしれない…
あと将来的にmozFullScreenElement
とかはmoz
が取れて
fullscreenElement
とexitFullscreen
になります。(s
は小文字になるらしい)
ビデオを戻す/進める
5秒戻す
/** @name ビデオを5秒戻す */
let video = SimpleGesture.target;
if (!video || video.tagName != 'VIDEO') {
video = document.getElementsByTagName('VIDEO')[0];
}
if (video) {
video.currentTime = video.currentTime - 5;
}
5秒進める
/** @name ビデオを5秒進める */
let video = SimpleGesture.target;
if (!video || video.tagName != 'VIDEO') {
video = document.getElementsByTagName('VIDEO')[0];
}
if (video) {
video.currentTime = video.currentTime + 5;
}
Youtubeだけで動かしたいときは↓を最初の行に入れてください。
if (!location.href.startsWith('https://m.youtube.com/')) { SimpleGesture.exit(); }