UNIBASE

ub_layout – javascript framework

ub_layout – Javascript (ECMA6) framework for dynamic page layout and table manipulation

DOM ELEMENTS

ub_layout defines functionality for several dom elements by adding attributes to the element.

  • ckeditor This element specifies a text area to be wrapped in the ckeditor framework for html style editing
    Attributes
    • edit – value is id of textarea to edit with ckeditor
    EXAMPLE In a prompt definition: P … notes, 60 M10 … > … … >

RESERVED SPACE

The layout engine can reserve space. This is important when creating scrollable tables, divs, etc.

Reserve space by adding a data element to the html.

<data name=”reserve” {height=”y”} {width=”x”}></data>

x and y are numbers but interpreted as pixels.

The reserved space is at the bottom of the screen (height) or right hand side (width).

To put an element in the reserved area simply set its position to absolute and the set bottom or right. eg

<div style=”position: absolute; bottom: 0;”>…</div>

ATTRIBUTES

Much of ub_layout is driven by simply adding attributes to html elements.

  • collapseLevel
    • Sets up multi level collapsible rows. Higher collapseLevels being contained within lower ones. An extra cell with a ‘+’ or ‘-‘ is added to the start of the row to indicate it can be collpased or expanded.
    • Related attributes:
      • collapseState
        • open/hide. Indicates if the collapsed rows should be displayed or hidden at startup.
      • collapseDirection
        • before/after. Collapse rows before or after the collapseLevel row.
  • fixedHeight
    • The height of the table is fixed to the value in ubScrollHeight. Normally ubScrollHeight is the maximum height for a table. Using this will make it always the same height.
    • eg If a table has totals, sometimes you want the totals under the data and no empty space. Other times you want the table to always be the same height with the totals in the same place.
  • followed
    • Highlight (with cyan) the element if it is clicked.
  • scrollable
    • Tells ub_layout that this element contains scrollable content and should be sized to a percentage of the viewport. The default is 100% height and 100% width from the top left corner of the element.
    • If the element is a table then the default is to manage the height, but not the width of the table.
    • Tables are a particular focus of ub_layout. A scrollable table will have fixed thead and tfoot sections and the tbody will be constrained to the nominated % height.
  • ubResult
    • Number of items matching the current search
  • ubScrollHeight=”%”
    • ubScrollHeight is used to define a different percentage of the remaining viewport to be used. eg ubScrollHeigh=”50″ will size the element to be 50% of the height from its top left corner to the bottom of the viewport.
  • ubScrollWidth=”%”
    • ubScrollWidth works the same as ubScrollHeight but refers to a percentage of the remaining viewport width.
  • ubSearch
    • Add this to an input element to use the content of the input to search for matching rows.
    • The value for ubSearch is element of the ubValue object to match against. eg ubSearch=”thing”
    • Rows that don’t match will be hidden
    • Rows to be matched have the attribute ubValue
  • ubSearchFrom
    • Like ubSearch except it is the minimum value for the search
    • Use with ubSearchTo to search a range
  • ubSearchTo
    • Like ubSearch except it is the maximum value for the search
    • Use with ubSearchFrom to search a range
  • ubSort
    • Sort elements with specified attribute as part of the page initiation (after loading).
    • eg <table ubSort=”sales”>…<tr sales=”123″>….</table>
    • Add :reverse to the attribute name to do a reverse (descending) sort. eg <table ubSort=”sales:reverse”>
  • ubSortBy
    • Sort elements or columns based on an attribute
    • Adds up and down arrows (only one visible at at time) to the master element. eg the master element might be a th in the table thead.
    • eg. <table><thead><tr><th ubSortBy=”price”>… and then on rows to be sorted <tbody><tr price=”100.00″>…
    • Add the specified attribute to each tr or other element
  • ubSum
    • JSON attribute

It can be used to put sums in an html document wherever you want them. It isn’t needed to replace the Unibase reporting but is designed to do live updates when editing a document. Typically this is used with ub_keyinput.js but can be used with any other editor.

Usage:

Elements to be summed have an extra attribute added identifying the element. These elements are not unique. In its basic form ubSum will add together all the elements with the identifying attribute.

An element can have more than 1 sum attribute and elements that hold totals can also have sum attributes so that they can in turn be included in other sums.

eg <td column1 row1>some value</td>

The ubSum object consists of the sum attribute as an identifier and an options object, which can be empty.

eg <td ubSum='{“column1”: {}}’>sum of column1</td>

Changing an element with an attribute that is a ubSum identifier will trigger a recalculation.

Options:

“value”: “function name”

This option will pass the attribute name and the value of the current cell to be summed as arguments to “function name”. The function can return any value it likes and this will be used instead of the raw value.

eg. To subtract rather than add a value

let subtract (attribute, value) => -value;

or function subtract (attribute, value) {return -value}

and

<td column1 less1 ubSum='{“less1”: {“value”: “subtract”}}’>some value</td>

Note this function is applied to the element that is being summed, not the sum element. Also the identifying attribute of the sum function must be present.

A complete example is available in the twc application: otb.rep

Please note:

This is not the first time I have tried to do this. However it is still a work in progress and you should report any problems, limitations, or request further clarification as required.

Also, it is not an attempt to create a spreadsheet on line. It is meant to be used with data in tables. But it could get close.

It is not yet calculation optimised. That will come. But it seems fast enough.

ubSum is not run as part of page load. This means the page should be fully populated at start. This may change.

  • ubValue
    • Value to use in search. This is a json object of values to match against. Each element in the json object is a ubSearch identifier and value pair. Add this to a tr and the search function will test it when deciding to display or hide the row (tr) it belongs to.
    • eg ubValue='{“thing”: “some value”}’

METHODS

ub_layout methods can be used to manipulate tables and elements.

  • elementSort Sorts and redisplays elements within a surrounding container. eg table rows, list elements, divs.Elements can be sorted in ascending or descending sequence based on the value of an attribute stored in the element.ub_layout.elementSort(‘attribute’, ‘reverse’);attribute is the name of an attribute that has the value to sort on. eg <tr sortAttribute=”1″>Any value for the second argument will sort in reverse order. Leave out for ascending sort.The normal use is to call elementSort as part of the page initialisation (but see ubSort attribute) or to attach it to a click event on a direction image.