static/js/interface.js
/**
 * Determine the most appropriate position of a popup.
 * @function popupPos
 * @param {Object} source - source DOM
 * @param {Object} target - target DOM
 * @param {string} direc - direction of popup
 * @param {boolean} same - keep same dimension
 * @description By default it pops up toward bottom and right. But if the
 * current position is too close to the right or bottom edge of the browser,
 * it will pop up toward top and/or left.
 */
Determine the most appropriate position of a popup.
Determine the most appropriate position of a popup .
function popupPos(source, target, direc, same) {
  const th = 0.8, 
        vw = window.innerWidth,
        vh = window.innerHeight,
        ts = target.style;
  const rect = source.getBoundingClientRect();
  if (['left', 'right'].includes(direc)) {
    if (same) {
      ts.top = rect.top + 'px';
      ts.height = (rect.top - rect.bottom) + 'px';
    } else if (rect.top <= vh * th) {
      ts.top = rect.top + 'px';
      ts.bottom = '';
    } else {
      ts.top = '';
      ts.bottom = (vh - rect.bottom) + 'px';
    }
    if (direc === 'right') {
      ts.left = rect.right + 'px';
      ts.right = '';
    } else if (direc === 'left') {
      ts.right = (vw - rect.left) + 'px';
      ts.left = '';
    }
  }
  else if (direc === 'down') {
    ts.top = rect.bottom + 'px';
    ts.bottom = '';
    if (same) {
      ts.left = rect.left + 'px';
      ts.width = (rect.right - rect.left) + 'px';
    } else if (rect.left <= vw * th) {
      ts.left = rect.left + 'px';
      ts.right = '';
    } else {
      ts.left = '';
      ts.right = (vw - rect.right) + 'px';
    }
  }
}
function popupPos ( source , target , direc , same ) { const th = 0.8 , vw = window . innerWidth , vh = window . innerHeight , ts = target . style ; const rect = source . getBoundingClientRect ( ) ; if ( [ 'left' , 'right' ] . includes ( direc ) ) { if ( same ) { ts . top = rect . top + 'px' ; ts . height = ( rect . top - rect . bottom ) + 'px' ; } else if ( rect . top <= vh * th ) { ts . top = rect . top + 'px' ; ts . bottom = '' ; } else { ts . top = '' ; ts . bottom = ( vh - rect . bottom ) + 'px' ; } if ( direc === 'right' ) { ts . left = rect . right + 'px' ; ts . right = '' ; } else if ( direc === 'left' ) { ts . right = ( vw - rect . left ) + 'px' ; ts . left = '' ; } } else if ( direc === 'down' ) { ts . top = rect . bottom + 'px' ; ts . bottom = '' ; if ( same ) { ts . left = rect . left + 'px' ; ts . width = ( rect . right - rect . left ) + 'px' ; } else if ( rect . left <= vw * th ) { ts . left = rect . left + 'px' ; ts . right = '' ; } else { ts . left = '' ; ts . right = ( vw - rect . right ) + 'px' ; } } }
Determine the most appropriate position of a popup.
Determine the most appropriate position of a popup .
// threshold: 80% // pop up toward right or left // pop up toward bottom