Page last modified 15:33, 2 Jul 2008 by neilw

Permalink: http://tinyurl.com/5bj4g3

MindTouch Developer Center > MindTouch Deki > Extensions > DHtml

DHtml

Installation

Follow these steps to install this script on your wiki.

Go to Service managmenent inside the Control Panel.
Under Add Service, click Local and select type Extension.
Enter a descriptive name and the SID: sid://mindtouch.com/2007/12/dekiscript
Add "manifest" to the config section with value set to http://scripts.mindtouch.com/dhtml.xml
Add extra configuration values as listed below under Configuration (If Configuration is not listed below, ignore this step.)
Click on add service.

Overview

This extension contains functions for creating DHTML elements. This script requires MindTouch Deki 1.8.3 or later.

Functions:

dhtml.button
dhtml.div
dhtml.dropdown
dhtml.form
dhtml.inputbox
dhtml.link
dhtml.span
dhtml.table

dhtml.button(text, message, publish) : xml

Show a button that publishes a message on a channel when clicked.

Parameters:

Name	Type	Description
text	str	Text shown in button.
message	map	Message to publish on channel.
publish	str	(optional) Publish on channel. (default: "default")

dhtml.div(subscribe, field, html) : xml

Show contents in a div.

Parameters:

Name	Type	Description
subscribe	str	(optional) Subscribe to channel. (default: "default")
field	str	(optional) Message field name. (default: "text")
html	bool	(optional) Allow HTML in field. (default: true)

dhtml.dropdown(values, messages, publish) : xml

Show a dropdown list that publishes a message when the user changes the selection.

Parameters:

Name	Type	Description
values	list	Text strings to show in the dropdown list.
messages	list	Messages corresponding to the text shown in the dropdown list.
publish	str	(optional) Publish on channel. (default: "default")

dhtml.form(inputs, button, length, publish) : xml

Show a form with multiple text boxes and a submit button.

Parameters:

Name	Type	Description
inputs	list	(optional) Input field. (default: [{ label: nil, value: nil, field: nil, hidden: false }])
button	str	(optional) Input button. (default: "Ok")
length	num	(optional) Input length. (default: 16)
publish	str	(optional) Publish on channel or a URI. (default: "default")

dhtml.inputbox(label, value, button, length, field, publish) : xml

Show a simple text box with a submit button.

Parameters:

Name	Type	Description
label	str	(optional) Input label. (default: nil)
value	str	(optional) Input value. (default: nil)
button	str	(optional) Input button. (default: "Ok")
length	num	(optional) Input length. (default: 16)
field	str	(optional) Message field name. (default: "text")
publish	str	(optional) Publish on channel. (default: "default")

dhtml.link(text, message, publish) : xml

Show a link that publishes a message on a channel when clicked.

Parameters:

Name	Type	Description
text	str	Text shown in link.
message	map	Message to publish on channel.
publish	str	(optional) Publish on channel. (default: "default")

dhtml.span(subscribe, field, html) : xml

Show contents in a span.

Parameters:

Name	Type	Description
subscribe	str	(optional) Subscribe to channel. (default: "default")
field	str	(optional) Message field name. (default: "text")
html	bool	(optional) Allow HTML in field. (default: true)

dhtml.table(columns, subscribe) : xml

Show messages in a table.

Parameters:

Name	Type	Description
columns	list	Columns description. (e.g. [{ label : 'column name', field: 'message field name' }, ...])
subscribe	str	(optional) Subscribe to channel. (default: "default")

Source Code

<extension>
  <title>MindTouch DHTML Extension</title>
  <copyright>Copyright (c) 2007, 2008 MindTouch, Inc.</copyright>
  <uri.help>http://wiki.developer.mindtouch.com/MindTouch_Deki/Extensions/DHtml</uri.help>
  <label>DHtml</label>
  <namespace>dhtml</namespace>
  <description>This extension contains functions for creating DHTML elements.</description>

  <function>
    <name>div</name>
    <description>Show contents in a div.</description>
    <param name="subscribe" type="str" optional="true">Subscribe to channel. (default: "default")</param>
    <param name="field" type="str" optional="true">Message field name. (default: "text")</param>
    <param name="html" type="bool" optional="true">Allow HTML in field. (default: true)</param>
    <return>
      <html xmlns:eval="http://mindtouch.com/2007/dekiscript">
        <head>
          <script type="text/javascript">DekiWiki.subscribe(<eval:js>args.subscribe ?? 'default'</eval:js>, null, function(c, m, d) { 
            if(DekiWiki.hasValue(m[<eval:js>args.field ?? 'text'</eval:js>]))
              <eval:if test="args.html ?? true">DekiWiki.util.Dom.setInnerHTML(document.getElementById(<eval:js>@id</eval:js>), m[<eval:js>args.field ?? 'text'</eval:js>]);</eval:if>
              <eval:if test="!(args.html ?? true)">DekiWiki.util.Dom.setInnerText(document.getElementById(<eval:js>@id</eval:js>), m[<eval:js>args.field ?? 'text'</eval:js>]);</eval:if>
          }, null);</script>
        </head>
        <body>
          <div eval:id="@id" />
        </body>
      </html>
    </return>
  </function>

  <function>
    <name>span</name>
    <description>Show contents in a span.</description>
    <param name="subscribe" type="str" optional="true">Subscribe to channel. (default: "default")</param>
    <param name="field" type="str" optional="true">Message field name. (default: "text")</param>
    <param name="html" type="bool" optional="true">Allow HTML in field. (default: true)</param>
    <return>
      <html xmlns:eval="http://mindtouch.com/2007/dekiscript">
        <head>
          <script type="text/javascript">DekiWiki.subscribe(<eval:js>args.subscribe ?? 'default'</eval:js>, null, function(c, m, d) { 
            if(DekiWiki.hasValue(m[<eval:js>args.field ?? 'text'</eval:js>]))
              <eval:if test="args.html ?? true">DekiWiki.util.Dom.setInnerHTML(document.getElementById(<eval:js>@id</eval:js>), m[<eval:js>args.field ?? 'text'</eval:js>]);</eval:if>
              <eval:if test="!(args.html ?? true)">DekiWiki.util.Dom.setInnerText(document.getElementById(<eval:js>@id</eval:js>), m[<eval:js>args.field ?? 'text'</eval:js>]);</eval:if>
          }, null);</script>
        </head>
        <body>
          <span eval:id="@id" />
        </body>
      </html>
    </return>
  </function>

  <function>
    <name>form</name>
    <description>Show a form with multiple text boxes and a submit button.</description>
    <param name="inputs" type="list" optional="true">Input field. (default: [{ label: nil, value: nil, field: nil, hidden: false }])</param>
    <param name="button" type="str" optional="true">Input button. (default: "Ok")</param>
    <param name="length" type="num" optional="true">Input length. (default: 16)</param>
    <param name="publish" type="str" optional="true">Publish on channel or a URI. (default: "default")</param>
    <return>
      <html xmlns:eval="http://mindtouch.com/2007/dekiscript">
        <eval:define var="isuri" value="string.startswith(args.publish ?? '', 'http://', true) || string.startswith(args.publish ?? '', 'https://', true)">
          <eval:if test="!isuri">
            <head>
              <script type="text/javascript">
                function dhtml_submit_form(id, c) {
                  var m = { };
                  DekiWiki.$(document.getElementById(id)).find('input').each(function() { 
                    if(DekiWiki.hasValue(this.name)) m[this.name] = this.value; 
                  });
                  DekiWiki.publish(c, m);
                }
              </script>
            </head>
          </eval:if>
          <body>
            <form eval:action="isuri ? args.publish : nil">
              <table eval:id="@id">
                <eval:for var="input" in="args.inputs" test="!input.hidden">
                  <tr>
                    <td><eval:expr>input.label ?? '\u00A0'</eval:expr></td>
                    <td><input eval:name="input.field" eval:value="input.value" eval:size="input.size ?? 16" /></td>
                  </tr>
                </eval:for>
                <tr>
                  <td>
                    <eval:for var="input" in="args.inputs" test="input.hidden">
                      <input eval:name="input.field" eval:value="input.value" type="hidden" />
                    </eval:for>&#xA0;</td>
                  <td align="right">
                    <eval:if test="isuri">
                      <input type="submit" eval:value="args.button ?? 'Ok'"/>
                    </eval:if>
                    <eval:if test="!isuri">
                      <input type="button" eval:value="args.button ?? 'Ok'" eval:onclick="'dhtml_submit_form(' .. json.emit(@id) .. ', ' .. json.emit(args.publish ?? 'default') .. ')'" />
                    </eval:if>
                  </td>
                </tr>
              </table>
            </form>
          </body>
        </eval:define>
      </html>
    </return>
  </function>

  <function>
    <name>inputbox</name>
    <description>Show a simple text box with a submit button.</description>
    <param name="label" type="str" optional="true">Input label. (default: nil)</param>
    <param name="value" type="str" optional="true">Input value. (default: nil)</param>
    <param name="button" type="str" optional="true">Input button. (default: "Ok")</param>
    <param name="length" type="num" optional="true">Input length. (default: 16)</param>
    <param name="field" type="str" optional="true">Message field name. (default: "text")</param>
    <param name="publish" type="str" optional="true">Publish on channel. (default: "default")</param>
    <return>
      <html xmlns:eval="http://mindtouch.com/2007/dekiscript">
        <body>
          <eval:define var="isuri" value="string.startswith(args.publish ?? '', 'http://', true) || string.startswith(args.publish ?? '', 'https://', true)">
            <eval:if test="isuri">
              <form eval:action="args.publish">
                <nobr><eval:expr>args.label ? args.label .. ' ' : ''</eval:expr><input eval:name="args.field ?? 'text'" eval:value="args.value" eval:size="args.length ?? 16" /><input type="submit" eval:value="args.button ?? 'Ok'" ></input></nobr>
              </form>
            </eval:if>
            <eval:if test="!isuri">
              <nobr><eval:expr>args.label ? args.label .. ' ' : ''</eval:expr><input eval:name="@id" eval:id="@id" eval:value="args.value" eval:size="args.length ?? 16" /> <input type="button" eval:value="args.button ?? 'Ok'" eval:onclick="'DekiWiki.publish(' .. json.emit(args.publish ?? 'default') .. ', { ' .. json.emit(args.field ?? 'text') .. ' : document.getElementById(' .. json.emit(@id) .. ').value })'"></input></nobr>
            </eval:if>
          </eval:define>
        </body>
      </html>
    </return>
  </function>

  <function>
    <name>table</name>
    <description>Show messages in a table.</description>
    <param name="columns" type="list">Columns description. (e.g. [{ label : 'column name', field: 'message field name' }, ...])</param>
    <param name="subscribe" type="str" optional="true">Subscribe to channel. (default: "default")</param>
    <return>
      <html xmlns:eval="http://mindtouch.com/2007/dekiscript">
        <head>
          <!--script type="text/javascript" src="sorttable.js" /-->
          <script type="text/javascript">
            function dhtml_table_message_to_row(c, v, f) {
              var tbody = document.getElementById(f.id);
              var count = parseInt(tbody.getAttribute('count'));
              tbody.setAttribute('count', count + 1);
              var tr = document.createElement('tr');
              tr.setAttribute('class', (count &amp; 1) ? 'feedroweven' : 'feedrowodd');
              for(var i in f.columns) {
                var column = f.columns[i];
                if(typeof(column) == 'object') {
                  var td = document.createElement('td');
                  if(DekiWiki.hasValue(v[column.field])) td.appendChild(document.createTextNode(v[column.field]));
                  else td.innerHTML = '&amp;nbsp;';
                  tr.appendChild(td);
                }
              }
              tbody.appendChild(tr);
            }
          </script>
          <script type="text/javascript">DekiWiki.subscribe(<eval:js>args.subscribe ?? 'default'</eval:js>, null, dhtml_table_message_to_row, { id: <eval:js>@id</eval:js>, columns: <eval:js>args.columns</eval:js>});</script>
        </head>
        <body>
          <table border="0" cellpadding="0" cellspacing="0" class="feedtable sortable">
            <thead>
              <tr>
                <eval:for var="column" in="args.columns">
                  <th><eval:expr>column.label ?? column.field ?? '\u00A0'</eval:expr></th>
                </eval:for>
              </tr>
            </thead>
            <tbody eval:id="@id" count="0"></tbody>
          </table>
        </body>
      </html>
    </return>
  </function>

  <function>
    <name>link</name>
    <description>Show a link that publishes a message on a channel when clicked.</description>
    <param name="text" type="str">Text shown in link.</param>
    <param name="message" type="map">Message to publish on channel.</param>
    <param name="publish" type="str" optional="true">Publish on channel. (default: "default")</param>
    <return>
      <html xmlns:eval="http://mindtouch.com/2007/dekiscript">
        <body>
          <a rel="custom" eval:href="'javascript:DekiWiki.publish(' .. json.emit(args.publish ?? 'default') .. ', ' .. json.emit(args.message) .. ')'"><eval:expr>args.text</eval:expr></a>
        </body>
      </html>
    </return>
  </function>

  <function>
    <name>button</name>
    <description>Show a button that publishes a message on a channel when clicked.</description>
    <param name="text" type="str">Text shown in button.</param>
    <param name="message" type="map">Message to publish on channel.</param>
    <param name="publish" type="str" optional="true">Publish on channel. (default: "default")</param>
    <return>
      <html xmlns:eval="http://mindtouch.com/2007/dekiscript">
        <body>
          <input type="button" eval:value="args.text"  eval:onclick="'javascript:DekiWiki.publish(' .. json.emit(args.publish ?? 'default') .. ', ' .. json.emit(args.message) .. ')'"/>
        </body>
      </html>
    </return>
  </function>

  <function>
    <name>dropdown</name>
    <description>Show a dropdown list that publishes a message when the user changes the selection.</description>
    <param name="values" type="list">Text strings to show in the dropdown list.</param>
    <param name="messages" type="list">Messages corresponding to the text shown in the dropdown list.</param>
    <param name="publish" type="str" optional="true">Publish on channel. (default: "default")</param>
    <return>
      <html xmlns:eval="http://mindtouch.com/2007/dekiscript">
        <body>
          <select eval:onchange="'javascript:DekiWiki.publish(' .. json.emit(args.publish ?? 'default') .. ', ' .. json.emit(args.messages) .. '[this.selectedIndex])'">
            <eval:for var="value" in="args.values"><option><eval:expr>value</eval:expr></option></eval:for>
          </select>
        </body>
      </html>
    </return>
  </function>
</extension>

Samples

Output

To embed two input boxes and an alert window that subscribes to all channels:

{{ dhtml.inputbox{ length: 50, label: "Input Box 1: ", publish: "inputbox1"} }} 
{{ dhtml.inputbox{ length: 50, label: "Input Box 2: ", publish: "inputbox2"} }} 
{{ pagebus.alert() }}

NOTE: this sample requires the PageBus extension.

To embed two input boxes and an alert window that subscribes only to the first channel:

{{ dhtml.inputbox{ length: 50, label: "Input Box 1: ", publish: "inputbox1"} }} 
{{ dhtml.inputbox{ length: 50, label: "Input Box 2: ", publish: "inputbox2"} }} 
{{ pagebus.alert("inputbox1") }}

NOTE: this sample requires the PageBus extension.

To prompt for input and display the result in a div:

{{ dhtml.inputbox{ length: 50, label: "Enter Text:  ", publish: "inputbox1", field: "text" } }} 
{{ dhtml.div{ subscribe:  "inputbox1" } }}

To embed a form that prompts for latitude/longitude and create a map from it:

{{ dhtml.form( [{label: "Latitude: ", field: "latitude", hidden: false}, {label: "Longitude: ", field: "longitude", hidden: false}], "Show Map", 50, "form1" ) }}
{{ google.map{ subscribe: "form1", zoom: 8 } }}

To embed a text box that prompts for an address and create a map from it:

{{ dhtml.inputbox("Address: ", "<enter an address>", "Show Map", 50, "address", "inputbox1") }} 
{{ google.map{ subscribe: "inputbox1", zoom: 8 } }}

To embed a table that displays recent latitude/longitude searches:

{{ dhtml.form( [{label: "Latitude: ", field: "latitude", hidden: false}, {label: "Longitude: ", field: "longitude", hidden: false}], "Show Map", 50, "form1" ) }} 
{{ google.map{ subscribe: "form1", zoom: 8 } }} 
Recent Searches: 
{{ dhtml.table([{ label: "Latitude", field: "latitude" }, { label: "Longitude", field: "longitude" }], "form1") }}