How to use the @mathigon/core.delay function in @mathigon/core

To help you get started, we’ve selected a few @mathigon/core 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 / boost.js / src / animate.ts View on Github external
to[k1] = Array.isArray(p) ? p[1] : p;
    // Set initial style, for the duration of the delay.
    if (_delay) $el.css(k, from[k1]!);
  });

  // Special rules for animations to height: auto
  const oldHeight = to.height;
  if (to.height === 'auto') {
    to.height =
        total($el.children.map($c => ($c as HTMLView).outerHeight)) + 'px';
  }

  let player: Animation;
  let cancelled = false;

  delay(() => {
    if (cancelled) return;

    player = $el._el.animate([from, to], {duration, easing, fill: 'forwards'});
    player.onfinish = () => {
      if ($el._el) Object.keys(properties)
          .forEach(k => $el.css(k, k === 'height' ? oldHeight! : to[k]!));
      if (Browser.isSafari) $el.css('transition', oldTransition);
      deferred.resolve();
      player.cancel();  // bit ugly, but needed for Safari...
    };
  }, _delay);

  const animation = {
    cancel() {
      cancelled = true;
      if ($el._el) Object.keys(properties).forEach(k => $el.css(k, $el.css(k)));
github mathigon / boost.js / src / events.ts View on Github external
$el.on('mouseout', () => {
    if (!wasTriggeredByMouse) return;
    clearTimeout(timeout);
    timeout = delay(() => {
      if (!active) return;
      if (options.exit) options.exit();
      active = false;
    }, options.exitDelay || options.delay);
  });
github mathigon / boost.js / src / events.js View on Github external
$el.on('mouseout', () => {
    if (!wasTriggeredByMouse) return;
    clearTimeout(timeout);
    timeout = delay(() => {
      if (!active) return;
      if (options.exit) options.exit();
      active = false;
    }, options.exitDelay || options.delay);
  });
github mathigon / textbooks / content / divisibility / functions.ts View on Github external
function numberGrid($grid: ElementView, time: number, className: string,
                    filter: (i: number) => boolean) {
  for (const $i of $grid.children) {
    if (!filter(+$i.text)) continue;
    delay(() => $i.addClass(className), time);
    time += 80;
  }
}
github mathigon / textbooks / content / sequences / functions.ts View on Github external
$step.onScore('blank-0 blank-1', () => {
    $reveals.forEach(($r, i) => $r.enter('fade', 400, 100 + i * 100));
    delay(() => $step.score('reveals'), 900);
  });
}
github mathigon / textbooks / triangles-and-trigonometry / functions.js View on Github external
  $step.onScore('blank-0', () => { updateLabels(); delay(() => $slider.play(), 1000); });
  $step.onScore('blank-1', updateLabels);
github mathigon / textbooks / content / divisibility / functions.ts View on Github external
$section.on('score-blank-0', function () {
    numberGrid($grid, 200, 'green', i => (i % 6 === 0));
    delay(() => {
      $grid.children.forEach($el => $el.removeClass('yellow blue'));
    }, 1200);
  });
github mathigon / textbooks / content / sequences / functions.ts View on Github external
function colourPascal($rows: ElementView[][], $cells: ElementView[], fn: ColorFunction, index: number) {
  for (let $c of $cells) $c.setAttr('class', 'c');
  let t = 0;

  for (let i = 0; i < $rows.length; ++i) {
    for (let j = 0; j < $rows[i].length; ++j) {
      let className = fn(i, j, +$rows[i][j].text);
      if (className) delay(() => {
        if (index === colourIndex) $rows[i][j].addClass(className);
      }, t += 6000 / (i * i + 100));
    }
  }
}