packages feed

ruler-core-1.0: examples/JsMenu2.rul

data Menu
  con Menu
    name :: 
    cs : Menus

type Menus : [Menu]

itf Root
  visit perform
    inh ast ::

itf Menu
  visit gather
    inh ast     ::
    syn gathMax ::
  visit layout
    inh count   ::
    syn count   ::

itf Menus
  visit gather
    inh ast     ::
    syn gathMax ::
  visit layout
    inh finMax  ::
    inh count   ::
    syn count   ::

{
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Visitor example</title>

<script type="text/javascript">

var  root = new Root_Root(
  new Menu_Menu("a", [
    new Menu_Menu("b", [
          new Menu_Menu("c", [])
       ,  new Menu_Menu("d", []) ]) ]));

function align(root, anchor) {
  datasem Menu
    clause Menu
      cs:count     = lhs:count+1
      lhs:count    = cs:count
      lhs:gathMax  = cs:gathMax
      cs:finMax    = 1

  datasem Menus
    default gathMax  = function(maxs)    { return Math.max.apply(Math, maxs); }
    default finMax   = function(maxs)    { return maxs[maxs.length-1]; }
    default count    = function(counts)  { return counts[0]; }
    clause Cons
      hd:count = lhs:count
      -- tl:count = hd:count
      lhs:count = tl:count
    clause Nil

  var inhs  = new Inh_Root_perform();
  inhs.ast  = root
  eval_Root_perform(s_Root, inhs);
}

</script>

<style type="text/css">
  #a { background-color: red; position: absolute; display: block; width: auto; }
  #b { background-color: green; position: absolute; display: block; width: auto; }
  #c { background-color: blue; position: absolute; display: block; width: auto; }
  #d { background-color: yellow; position: absolute; display: block; width: auto; }
</style>

</head>
<body onLoad="align(root, document.getElementById('anchor'));">
  
<div id="a">
  item a
</div>

<div id="b">
  very big item b
</div>

<div id="c">
  not so big c
</div>

<div id="d">
  tiny
</div>

<div id="anchor" style="position: absolute; display: block; left: 200px; right: 50px;">
</div>

</body>
</html>
}