added much of the ruler application

[yourule] / templates / _form_elements.tmpl

diff --git a/templates/_form_elements.tmpl b/templates/_form_elements.tmpl
new file mode 100644 (file)
index 0000000..18c57c8
--- /dev/null
+++ b/templates/_form_elements.tmpl
@@ -0,0 +1,26 @@
+<p>Units:
+<select id="unitselector" name="units">
+<option values="centimeters"#if $getVar('units', '') == 'centimeters'# selected="selected"'#end if#>centimeters</option>
+<option value="inches"#if $getVar('units', '') == 'inches'# selected="selected"'#end if#>inches</option>
+</select>
+</p>
+
+<p><label for="pixel_width">Your screen width (in pixels):</label>
+<input type="text" name="pixel_width" value="$getVar('pixel_width', None)" /></p>
+
+<p><label for="unit_width">Your screen width (in <span class="unittext">units</span>):</label>
+<input type="text" name="unit_width" value="$getVar('unit_width', None)" /></p>
+
+<script>
+// simple chunk of javascript to handle changes
+var unit_selector = $("unitselector");
+function change_unit_text() {
+  var text_spans = document.getElementsByClassName('unittext');
+  for (i = 0; i < text_spans.length; i++) {
+    var text_span = text_spans[i];
+    Element.update(text_span, unit_selector.value);
+  }
+}
+change_unit_text();
+Event.observe(unit_selector, 'change', change_unit_text);
+</script>