Spage

This module implements an HTML spage widget.

Use require( hop.spage ) to use it.

Example

This example shows how to use Hop spages. This example uses a dynamic spage, that is a spage whose content is computed when open. This is acheived by specifying a Hop service that is automatically invoked when the spage opens.

spage/spage.js

var fs = require( 'fs' );
var path = require( 'path' );
var sp = require( hop.spage );

function base( dir ) {
   return dir.replace( /.*\//g, "" );
}

service spageDir( dir ) {
   return fs.readdirSync( dir ).map(
      function( p ) {
         var fp = path.join( dir, p );
         if( fs.lstatSync( fp ).isDirectory() ) {
            return dirToSpage( fp );
         } else {
            return <div value=${fp}>${p}</div>;
         }
      } );
}
   
function dirToSpage( dir ) {
   return <sp.sptab svc=${spageDir} arg=${dir}>
     <sp.sptabhead>${ base( dir ) }</sp.sptabhead>
   </sp.sptab>
}

service spage( o ) {
   var dir = o && "dir" in o ?
       o.dir : path.dirname( path.dirname( module.filename ) );
   var d = <span>0</span>;
   
   return <html>
     
     <head>
       <link href=${sp.css} rel="stylesheet" type="text/css"/>
       <script src=${sp.script} type="application/x-javascript"/>
     </head>
     
     <body>
       <div>
         transition style
         <button onclick=~{node_style_set( document.getElementById( "sp" ).spstyle, "cursor", "help" )}>Fade</button>
         <button onclick=~{node_style_set( document.getElementById( "sp" ).spstyle, "cursor", "move" )}>Slide</button>
         <button onclick=~{node_style_set( document.getElementById( "sp" ).spstyle, "cursor", "wait" )}>Zoom</button>
       </div>
       
       <div>depth: ${d}</div>
       <br/>
       <div style="width: 400px; border: 1px solid #ccc">
         <sp.spage id="sp" onchange=~{${d}.innerHTML = document.getElementById( "sp" ).depth}>
           <sp.sphead>${ dir }</sp.sphead>
           ${dirToSpage( dir )}
         </sp.spage>
       </div>
     </body>
   </html>;
}

console.log( "Go to \"http://%s:%d/hop/spage\"", hop.hostname, hop.port );

XML

<spage.SPAGE [attributes]>

This is the main spage contructor. The attributes are as follows:

onchange: a listener invoked the spage state changes.

Example:

<spage.SPAGE onchange=~{alert( "spage changes" )}>
  <spage.SPHEAD>head</spage.SPHEAD>
  <spage.SPTAB>
    <spage.SPTABHEAD>foo</spage.SPTABHEAD>
    <div>foo</div>
  </spage.SPTAB>
</spage.SPAGE>

<spage.SPHEAD>

Constructs a spage head, i.e., the main label of the spage. The head is always visible, whichever tab is selected. The main head contains the back button that enables popping tabs.

Example:

<spage.SPHEAD>I'm a head</spage.SPHEAD>

<spage.SPTAB>

Constructs a sptab entry. This is a subpage of the SPTAB that can be pushed or popped when selected. The attributes are:

onselect: a listener invoked the spage state changes (i.e., push or popped).
direction: either push, pop, or both controls when the service of dynamic spage should be invoked.
svc: if the tab uses a dynamic content, the svc attribute is the Hop service that should deliver the content.
arg: an optional argument passed to svc for dynamic content

Example of a static:

<spage.SPTAB>
  <spage.SPTABHEAD>foo</spage.SPTABHEAD>
  <div>foo</div>
</spage.SPTAB>

Example of a dynamic content:

<spage.sptab svc=${spageDir} arg=${dir}>
   <spage.sptabhead>${ base( dir ) }</spage.sptabhead>
</spage.sptab>

<spage.SPTABHEAD [attributes]>

The head of the of sptab, i.e., the HTML element visible when the tab is not active.

onclick: the value of the leaf.

Example:

<spage.SPTABHEAD>foo</spage.SPTABHEAD>

spage.css & spage.js

Default CSS spage style and client-side runtime library, should be included in the head of the document.

var spage = require( 'spage' );

<html>
  <head css=${spage.css} jscript=${spage.js}/>
</html>

Client Side

Client side code (i.e., browser code) is provided with some functions that control spage widgets. They are accessible via the HopSpage object.

spage.pop( kont = undefined )

Pop the current tag of an spage. The argument kont is an optional function invoked once the tag is popped.

spage.depth

The current depth of the spage.

Hop.js / spage

Table of Contents

Spage

Example

XML

<spage.SPAGE [attributes]>

<spage.SPHEAD>

<spage.SPTAB>

<spage.SPTABHEAD [attributes]>

spage.css & spage.js

Client Side

spage.pop( kont = undefined )

spage.depth