mathjax 0.0.0

Collection of useful functions for Directory objects.

example/main.dart

import 'dart:html';
import 'dart:async';
import 'package:mathjax/mathjax.dart';
import 'package:mathjax/config.dart';
import 'package:js/js.dart';

void main() {
  MathJax.Hub.Config(new ConfigOptions(
      showProcessingMessages: false,
      tex2jax: new TeX2Jax(inlineMath: [
        [r'$', r'$'],
        [r'\(', r'\)']
      ])));

  new MathJaxPreview(
      mathPreview: querySelector('#MathPreview'),
      mathInput: querySelector('#MathInput'),
      delay: 1);
}

class MathJaxPreview {
  /// The div element where the mathjax will be shown.
  DivElement mathPreview;

  /// The textarea element where the user can input latex.
  TextAreaElement mathInput;

  /// delay after keystroke before updating
  final int delay;

  /// The buffer mirror.
  DivElement _bufferDiv;

  /// true when MathJax is processing
  bool _mjRunning = false;

  /// used to check if an update is needed
  String _oldText = '';

  /// keep track of the timer
  Timer _timer;

  MathJaxPreview({this.mathPreview, this.mathInput, this.delay}) {
    // create buffer mirror
    final Element clone = mathPreview.clone(false);
    _bufferDiv = clone
      ..style.visibility = 'hidden'
      ..style.position = 'absolute';

    mathPreview.parentNode.insertBefore(_bufferDiv, mathPreview);

    // listen for changes
    mathInput.onKeyUp.listen((_) => update());
  }

  /// This gets called when a key is pressed in the textarea.
  /// We check if there is already a pending update and clear it if so.
  /// Then set up an update to occur after a small delay (so if more keys
  /// are pressed, the update won't occur until after there has been
  /// a pause in the typing).
  /// The callback function is set up below, after the Preview object is set up.
  void update() {
    _timer?.cancel();
    _timer = new Timer(new Duration(milliseconds: delay), createPreview);
  }

  /// Creates the preview and runs MathJax on it.
  /// If MathJax is already trying to render the code, return
  /// If the text hasn't changed, return
  /// Otherwise, indicate that MathJax is running, and start the
  /// typesetting.  After it is done, call PreviewDone.
  void createPreview() {
    var newText = mathInput.value;
    if (newText == _oldText || _mjRunning) return;
    _mjRunning = true;
    _bufferDiv.innerHtml = _oldText = newText;
    MathJax.Hub.Queue(allowInterop(() => MathJax.Hub.Typeset(_bufferDiv)),
        allowInterop(_previewDone));
  }

  /// Indicate that MathJax is no longer running,
  /// and swap the buffers to show the results.
  void _previewDone() {
    _mjRunning = false;
    _swapBuffers();
  }

  /// Switch the buffer and preview, and display the right one.
  /// (We use visibility:hidden rather than display:none since
  /// the results of running MathJax are more accurate that way.
  void _swapBuffers() {
    var oldBuffer = _bufferDiv;
    _bufferDiv = mathPreview;
    mathPreview = oldBuffer;

    _bufferDiv.style
      ..visibility = 'hidden'
      ..position = 'absolute';
    mathPreview.style
      ..visibility = ''
      ..position = '';
  }
}