Table of Contents

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, "" );
}

function dirToSpage( dir ) {
   return <SP.sptab>
     <SP.sptabhead>${ base( dir ) }</SP.sptabhead>
     ${service () {
        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>;
              }
           } );
     } }
   </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 css=${SP.css} jscript=${SP.jscript}/>
     <body>
       <div>depth: ${d}</div>
       <br/>
       <SP.spage id="sp" onchange=~{${d}.innerHTML = HopSpage.depth( "sp" )}>
         <SP.sphead>${ dir }</SP.sphead>
         ${dirToSpage( dir )}
       </SP.spage>
     </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:

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:

Example:

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

<spage.SPTABHEAD [attributes]>

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

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.

HopSpage.pop( spage-or-id )

Pop the current tag of an spage. The argument spage-or-id is either a spage object or the identifier of a spage object.

HopSpage.popUpdate( spage-or-id )

Pop the current tag of an spage and update. The argument spage-or-id is either a spage object or the identifier of a spage object.

HopSpage.depth( spage-or-id )

Provide the depth of the spage. The argument spage-or-id is either a spage object or the identifier of a spage object.