Custom gesture examples

Tab

Input keyword and open google in a new tab

/**
 * @name google
 */
const q = prompt();
if (q) {
  SimpleGesture.open('https://www.google.com/search?q=' + encodeURIComponent(q));
}

Show URL and open target link in current tab.

/**
 * @name Confirm URL
 */ 
for (let target = SimpleGesture.target; !!target; target = target.parentNode) {
  if (target.href) {
    if (confirm('Are you sure you want to open this URL?\n' + target.href)) {
      location.href = target.href;
    }
    break;
  }
}

Common

Paste and Go

/**
 * @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));
  }
});

Focus to the first inputbox

/** @name Focus to the first inputbox */
for (let e of document.getElementsByTagName('INPUT')) {
  if (!e.getAttribute('type') || e.getAttribute('type').match(/text|search/)) {
    e.focus();
    e.select();
    break;
  }
}

Add a margin at the top of the HTML

This script adds a margin at the top of the HTML to make it easier to tap.
Tapping on the added margin will restore it.

/** @name Margin-top */
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);
}

Scroll down 1 paper

/** @name Scroll down 1 paper */
let t = SimpleGesture.target;
while (t) {
  try {
    if (
      1 <= Math.abs(t.scrollHeight - t.clientHeight - t.scrollTop) && (
      t.tagName === 'TEXTAREA' ||
      window.getComputedStyle(t).overflowY === 'auto' ||
      window.getComputedStyle(t).overflowY === 'scroll' ||
    )) {
      break;
    }
  } catch {}
  t = t.parentNode;
}
t = t || document.scrollingElement;
t.scrollBy({ top: t.clientWidth * 1.4142, behavior: 'smooth' });

Scroll up 1 paper

/** @name Scroll up 1 paper */
let t = SimpleGesture.target;
while (t) {
  try {
    if (t.scrollTop && window.getComputedStyle(t).overflowY !== 'hidden') {
      break;
    }
  } catch {}
  t = t.parentNode;
}
t = t || document.scrollingElement;
t.scrollBy({ top: - t.clientWidth * 1.4142, behavior: 'smooth' });

Media

Cancel Fullscreen (only media player)

/** @name Cancel fullscreen */
document.mozFullScreenElement && document.mozCancelFullScreen();

Sorry, I couldn't find the way to go fullscreen.

Rewind / Seek forward a video

Rewind 5sec.

/** @name Rewind a video */
let video = SimpleGesture.target;
if (!video || video.tagName != 'VIDEO') {
  video = document.getElementsByTagName('VIDEO')[0];
}
if (video) {
  video.currentTime = video.currentTime - 5;
}

Seek forward 5sec.

/** @name Seek forward a video */
let video = SimpleGesture.target;
if (!video || video.tagName != 'VIDEO') {
  video = document.getElementsByTagName('VIDEO')[0];
}
if (video) {
  video.currentTime = video.currentTime + 5;
}

You can insert this to first line for work on only Youtube.

if (!location.href.startsWith('https://m.youtube.com/')) { SimpleGesture.exit(); }

---

[jp]