Listfield gadget

bd84d954 · Romain Courteaud · Jérome Perrin · a00b5547 · bd84d954 · bd84d954
Commit bd84d954 authored Jun 12, 2014 by Romain Courteaud Committed by Jérome Perrin Aug 11, 2014
Showing with 76 additions and 0 deletions

dream/platform/src2/list_field/index.html dream/platform/src2/list_field/index.html +27 -0

dream/platform/src2/list_field/listfield.js dream/platform/src2/list_field/listfield.js +49 -0

No files found.
--- a/dream/platform/src2/list_field/index.html
+++ b/dream/platform/src2/list_field/index.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>Listfield</title>
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.handlebars.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="listfield.js" type="text/javascript"></script>
+
+    <script id="option-template" type="text/x-handlebars-template">
+      <option value="{{value}}">{{text}}</option>
+    </script>
+
+    <script id="selected-option-template" type="text/x-handlebars-template">
+      <option selected="selected" value="{{value}}">{{text}}</option>
+    </script>
+
+  </head>
+  <body>
+    <select />
+  </body>
+</html>
--- a/dream/platform/src2/list_field/listfield.js
+++ b/dream/platform/src2/list_field/listfield.js
+/*global window, rJS, console, RSVP, Handlebars */
+/*jslint nomen: true */
+(function (window, rJS, console, RSVP, Handlebars) {
+  "use strict";
+
+  /////////////////////////////////////////////////////////////////
+  // Handlebars
+  /////////////////////////////////////////////////////////////////
+  // Precompile the templates while loading the first gadget instance
+  var gadget_klass = rJS(window),
+    option_source = gadget_klass.__template_element
+                      .getElementById("option-template")
+                      .innerHTML,
+    option_template = Handlebars.compile(option_source),
+    selected_option_source = gadget_klass.__template_element
+                               .getElementById("option-template")
+                               .innerHTML,
+    selected_option_template = Handlebars.compile(selected_option_source);
+
+  gadget_klass
+    .ready(function (g) {
+      return g.getElement()
+        .push(function (element) {
+          g.element = element;
+        });
+    })
+    .declareMethod('render', function (options) {
+      var select = this.element.getElementsByTagName('select')[0],
+        i,
+        template,
+        field_json = options.field_json,
+        tmp = '';
+      select.setAttribute('name', field_json.key);
+      for (i = 0; i < field_json.items.length; i += 1) {
+
+        if (field_json.items[i][1] === field_json.default[0]) {
+          template = selected_option_template;
+        } else {
+          template = option_template;
+        }
+        tmp += template({
+          value: field_json.items[i][1],
+          text: field_json.items[i][0]
+        });
+      }
+      select.innerHTML += tmp;
+    });
+
+}(window, rJS, console, RSVP, Handlebars));