How to use the @mathigon/boost.Browser.onResize function in @mathigon/boost

To help you get started, we’ve selected a few @mathigon/boost examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mathigon / textbooks / content / circles / components / pi-scroll.ts View on Github external
ready() {
    this.$wrap = $N('div', {class: 'pi-wrap'}, this);
    this.$rows = tabulate(() => $N('div', {class: 'pi-row'}, this.$wrap), NUM_ELS);
    this.$highlight1 = $N('div', {class: 'pi-highlight'}, this.$wrap);
    this.$highlight2 = $N('div', {class: 'pi-highlight'}, this.$wrap);
    this.$rows[0].text = INITIAL;

    this.letterWidth = this.$rows[0].width / INITIAL.length;

    Browser.onResize(() => {
      this.numColumns = Math.floor(this.innerWidth / this.letterWidth);
      this.setUp(this.string);
    });

    // const onScrollThrottled = throttle(onScroll, 500);
    this.on('scroll', (e) => this.onScroll(e.top));
  }
github mathigon / textbooks / content / polyhedra / functions.ts View on Github external
export function escher($step: Step) {
  const $img = $step.$('.metamorph img')!;
  let translate = 0;
  let max = 3000;

  slide($img, {
    move(p, start, last) {
      translate += last.x - p.x;
      translate = clamp(translate, 0, max);
      $img.translate(-translate, 0);
    }
  });

  Browser.onResize(({width}) => {
    max = 3000 - Math.min(760, width - 60);
  });
}