static/js/interface.js
/**
 * Initialize scale select table.
 * @function initScaleSel
 * @param {Object} mo - main object
 * @description The scale select table is a dropdown menu containing multiple
 * scales (such as linear, square, square root, logarithm, exponential). It is
 * launched by a source DOM. The user clicks a scale, and the function will
 * transfer the selection back to the source DOM and trigger a display item
 * change event.
 */
Initialize scale select table.
@function initScaleSel
@param {Object} mo - main object
@description The scale select table is a dropdown menu containing multiple
scales (such as linear, square, square root, logarithm, exponential). It is
launched by a source DOM. The user clicks a scale, and the function will
transfer the selection back to the source DOM and trigger a display item
change event.
Initialize scale select table . @function initScaleSel @param { Object } mo - main object @description The scale select table is a dropdown menu containing multiple scales ( such as linear square square root logarithm exponential ) . It is launched by a source DOM . The user clicks a scale and the function will transfer the selection back to the source DOM and trigger a display item change event .
function initScaleSel(mo) {
  let lst = byId('scale-select');
  for (let btn of document.querySelectorAll('button.scale-btn')) {
    btn.addEventListener('click', function () {
      byId('current-scale').innerHTML = this.getAttribute('data-scale');
      lst.setAttribute('data-target-id', this.id);
      const rect = this.getBoundingClientRect();
      lst.style.top = rect.bottom + 'px';
      lst.style.left = rect.left + 'px';
      lst.classList.toggle('hidden');
    });
  }
  let table = byId('scale-options');
  for (let row of table.rows) {
    for (let cell of row.cells) {
      cell.addEventListener('mouseover', function () {
        byId('current-scale').innerHTML = this.getAttribute('data-scale');
      });
      cell.addEventListener('click', function () {
        const src = byId(byId('scale-select').getAttribute('data-target-id'));
        if (src.innerHTML !== this.innerHTML) {
          src.innerHTML = this.innerHTML;
          const scale = this.getAttribute('data-scale');
          src.setAttribute('data-scale', scale);
          src.title = `Scale: ${scale}`;
          const item = src.id.split('-')[0];
          displayItemChange(item, byId(`${item}-field-sel`).value, scale, mo);
        }
      });
    }
  }
}
function initScaleSel ( mo ) { let lst = byId ( 'scale-select' ) ; for ( let btn of document . querySelectorAll ( 'button.scale-btn' ) ) { btn . addEventListener ( 'click' , function ( ) { byId ( 'current-scale' ) . innerHTML = this . getAttribute ( 'data-scale' ) ; lst . setAttribute ( 'data-target-id' , this . id ) ; const rect = this . getBoundingClientRect ( ) ; lst . style . top = rect . bottom + 'px' ; lst . style . left = rect . left + 'px' ; lst . classList . toggle ( 'hidden' ) ; } ) ; } let table = byId ( 'scale-options' ) ; for ( let row of table . rows ) { for ( let cell of row . cells ) { cell . addEventListener ( 'mouseover' , function ( ) { byId ( 'current-scale' ) . innerHTML = this . getAttribute ( 'data-scale' ) ; } ) ; cell . addEventListener ( 'click' , function ( ) { const src = byId ( byId ( 'scale-select' ) . getAttribute ( 'data-target-id' ) ) ; if ( src . innerHTML !== this . innerHTML ) { src . innerHTML = this . innerHTML ; const scale = this . getAttribute ( 'data-scale' ) ; src . setAttribute ( 'data-scale' , scale ) ; src . title = ` ${ scale } ` ; const item = src . id . split ( '-' ) [ 0 ] ; displayItemChange ( item , byId ( ` ${ item } ` ) . value , scale , mo ) ; } } ) ; } } }
Initialize scale select table.
Initialize scale select table .
// scale select buttons // It is a dropdown menu of various scaling methods. // scale select options // mouse over to show scale name // click to select a scale