JUMLY API Document

Core

JUMLY.eval

Evaluates given element and put diagram into document

JUMLY.scan

Evaluates matched nodes and inserts a diagram after the node. This doesn't evaluate same node twice or more.

REST

This is still unstable API, which means the I/F may be changed. But it's already very useful.

Here is the spec, https://github.com/tmtk75/jumly/wiki/REST-API

Events

Categories: Core

JUMLY.eval()

JUMLYDiagram
JUMLY.eval()
JUMLY.eval(source, options)
  • source
    jQueryObject
    Source element to evaluate its text value.
  • options
    PlainObject
    To give way to put diagram.
    • into
      Selector or jQueryObject
      which $.html() is called
JUMLY.eval(source, placer)
  • source
    jQueryObject
    Source element to evaluate its text value.
  • placer
    Function
    JUMLYDiagram
    diagram
    jQueryObject
    source
    To put diagram into somewhere you like.

To evaluae single element and put it into somewhere you specifiy.

Next examples similarly work. #holder-1 and #holder-2 contain each generated diagram as its html.

JUMLY.eval $("#diagram-1"), into:"#holder-1"
JUMLY.eval $("#diagram-2"), (diagram, source)->
                              $("#holder-2").html diagram
                              
Categories: Core

JUMLY.scan()

JUMLY.scan()
JUMLY.scan(scope, [options])
  • scope
    document
    Element
    One element to scan JUMLY elements.
  • options
    built-in object
    PlainObject
    Enable to give a few funtions to be used by JUMLY.scan.
    • finder
      Function
      jQueryObject
      scope
      To return JUMLY elements you want
    • placer
      Function
      JUMLYDiagram
      diagram
      jQueryObject
      source
      To put diagram into where you want
JUMLY.scan(scope, [options])
  • scope
    jQueryObject
    An existing jQuery object to scan JUMLY elements.
  • options
    PlainObject
    Enable to give a few funtions to be used by JUMLY.scan. Refer here for the detail.

Look up JUMLY elements in given elements or jQuery object, evaluate text value of each JUMLY element to build its diagram element, and put each diagram element into somewhere of document.

Following elements are matched as default. The scope is document.

  • <script> node and its value of type attribute starts with text/jumly+ like "text/jumly+sequence".
    <script type="text/jumly+sequence">
  • Other element which value of data-jumly attribute starts with text/jumly+ like "text/jumly+sequence".
    <div data-jumly="text/jumly+sequence">
    

Each generated diagram is inserted after each own source JUMLY element as default.

<script type="text/jumly+sequence">...</script>
<div class="diagram sequence-diagram">...

JUMLY.scan is executed at DOMContentLoaded event without any arguments like following.

JUMLY.scan()

Except for added new JUMLY elements, already evaluated JUMLY elements are ignored even when you call JUMLY.scan() twice or more. If you add a new JUMLY element, it's evaluated.

options

2nd parameter is to give a few functions which used by JUMLY.scan.

It can have .finder and .placer as property. .finder is a function taking one argument which is a jQuery object given as 1st argument of JUMLY.scan. .placer is a function taking two arguments which are generated diagram element and its source element.

Here is an example that returns all children and append all diagrams in body.

JUMLY.scan document,
  finder: ($elements)-> $elements.find "> *"
  placer: (diagram, $jumlyElement)-> $("body").append diagram
  

Types

PlainObject

jQueryObject

JUMLYDiagram

TBD

Fork me on GitHub