Table of Contents


This module implements an HTML spage widget.

Use require( hop.spage ) to use it.


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.


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>

service spage( o ) {
   var dir = o && "dir" in o ?
       o.dir : path.dirname( path.dirname( module.filename ) );
   var d = <span>0</span>;
   return <html>
       <link href=${sp.css} rel="stylesheet" type="text/css"/>
       <script src=${sp.script} type="application/x-javascript"/>
         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>depth: ${d}</div>
       <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 )}

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


<spage.SPAGE [attributes]>

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


<spage.SPAGE onchange=~{alert( "spage changes" )}>


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.


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


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

Example of a static:


Example of a dynamic content:

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

<spage.SPTABHEAD [attributes]>

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



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' );

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

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.


The current depth of the spage.