[erp5_web_renderjs_ui] SortEditor: reduce number of event listeners

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_sorteditor_html.html

@@ -13,67 +13,57 @@
     <!-- custom script -->
     <script src="gadget_erp5_sort_editor.js"></script>
 
-  
-  
     <script id="sort-item-template" type="text/x-handlebars-template">
-        <button type="submit" class="ui-icon ui-btn ui-btn-inline ui-icon-minus ui-icon-shadow"></button>
-        <div class="sort_item ui-controlgroup-controls" >
-          <select data-iconpos="left">
-            {{#each option}}
-              {{#equal value selected_option}}
-                <option selected="selected" data-i18n="{{text}}" value="{{value}}">{{text}}</option>
-              {{else}}
-                <option value="{{value}}" data-i18n="{{text}}">{{text}}</option> 
-              {{/equal}}
-            {{/each}}
-          </select>
-         
-          <select data-wrapper-class="ui-input-has-clear" data-iconpos="left">
-            {{#equal operator "ascending"}}
-              <option selected="selected" data-i18n="ascending" value="ascending">ascending</option>
-              <option data-i18n="descending" value="descending">descending</option>
+      <button type="submit" class="ui-icon ui-btn ui-btn-inline ui-icon-minus ui-icon-shadow"></button>
+      <div class="sort_item ui-controlgroup-controls" >
+        <select data-iconpos="left">
+          {{#each option}}
+            {{#equal value selected_option}}
+              <option selected="selected" data-i18n="{{text}}" value="{{value}}">{{text}}</option>
             {{else}}
-              <option data-i18n="ascending" value="ascending">ascending</option>
-              <option selected="selected" data-i18n="descending" value="descending">descending</option>
+              <option value="{{value}}" data-i18n="{{text}}">{{text}}</option>
             {{/equal}}
-          </select>
-          
-        </div>
+          {{/each}}
+        </select>
+
+        <select data-wrapper-class="ui-input-has-clear" data-iconpos="left">
+          {{#equal operator "ascending"}}
+            <option selected="selected" data-i18n="ascending" value="ascending">ascending</option>
+            <option data-i18n="descending" value="descending">descending</option>
+          {{else}}
+            <option data-i18n="ascending" value="ascending">ascending</option>
+            <option selected="selected" data-i18n="descending" value="descending">descending</option>
+          {{/equal}}
+        </select>
+
+      </div>
     </script>
-  
-  
+
     <script id="sort-template" type="text/x-handlebars-template">
       <div class="ui-panel-inner">
         <div data-role="header" role="banner" class="ui-header ui-bar-inherit">
+          <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
+            <div class="ui-controlgroup-controls">
+              <button data-rel="save" data-i18n="Submit" type="submit" class="submit responsive ui-last-child ui-btn ui-btn-icon-left ui-icon-check">Submit</button>
+            </div>
+          </div>
+
+          <h1 class="ui-title" role="heading" data-i18n="Sort Editor" aria-level="1">Sort Editor</h1>
+
           <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-left">
-           <div class="ui-controlgroup-controls">
-            <form class="delete">
+            <div class="ui-controlgroup-controls">
               <button data-i18n="Close" data-rel="close" type="submit" class="close responsive ui-first-child ui-btn ui-btn-icon-left ui-icon-times">Close</button>
-            </form>
+            </div>
           </div>
-         </div>
-         
-         <h1 class="ui-title" role="heading" data-i18n="Sort Editor" aria-level="1">Sort Editor</h1>
-         <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
-           <div class="ui-controlgroup-controls">
-            <form class="submit">
-              <button data-rel="save" data-i18n="Submit" type="submit" class="submit responsive ui-last-child ui-btn ui-btn-icon-left ui-icon-check">Submit</button>
-            </form>
-           </div>
-         </div>
-        
         </div>
 
-         <section class="ui-body-c ui-content-section">
-           <div class="sort_item_container ui-controlgroup ui-corner_all">
-           </div>
-           <form class="plus">
-             <button type="submit" class="plus ui-btn-c ui-override-theme ui-btn ui-icon-plus ui-btn-icon-left ui-corner-all">Add Criteria</button>
-           </form>
-         </section>
-        </div>
+        <section class="ui-body-c ui-content-section">
+          <div class="sort_item_container ui-controlgroup ui-corner_all"></div>
+          <button type="submit" class="plus ui-btn-c ui-override-theme ui-btn ui-icon-plus ui-btn-icon-left ui-corner-all">Add Criteria</button>
+        </section>
+      </div>
     </script>
-    
+
   </head>
   <body>
     <form class="sort_editor">

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_sorteditor_html.xml

@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.34318.26924.28552</string> </value>
+                <value> <string>955.38127.32735.11195</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1468413387.26</float>
+                        <float>1480342874.92</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_sorteditor_js.js

 /*jslint indent: 2, maxerr: 3, nomen: true */
-/*global window, document, rJS, RSVP, Handlebars, loopEventListener*/
-(function (window, document, rJS, RSVP, Handlebars, loopEventListener) {
+/*global window, document, rJS, RSVP, Handlebars*/
+(function (window, document, rJS, RSVP, Handlebars) {
   "use strict";
+
   var gadget_klass = rJS(window),
-    sort_item_source = gadget_klass.__template_element
+    template_element = gadget_klass.__template_element,
+    sort_item_template = Handlebars.compile(template_element
                          .getElementById("sort-item-template")
-                         .innerHTML,
-    sort_item_template = Handlebars.compile(sort_item_source),
-    sort_source = gadget_klass.__template_element
+                         .innerHTML),
+    sort_template = Handlebars.compile(template_element
                          .getElementById("sort-template")
-                         .innerHTML,
-    sort_template = Handlebars.compile(sort_source);
+                         .innerHTML);
 
   Handlebars.registerHelper('equal', function (left_value, right_value, options) {
     if (arguments.length < 3) {
@@ -24,17 +24,16 @@
 
 
   function createSortItemTemplate(gadget, sort_value) {
-    var sort_column_list = gadget.props.sort_column_list,
+    var sort_column_list = gadget.state.sort_column_list,
       sort_value_list = sort_value || [],
       option_list = [],
       i;
 
-
     for (i = 0; i < sort_column_list.length; i += 1) {
       option_list.push({
-        "text": sort_column_list[i][1],
-        "value": sort_column_list[i][0],
-        "selected_option": sort_value_list[0]
+        text: sort_column_list[i][1],
+        value: sort_column_list[i][0],
+        selected_option: sort_value_list[0]
       });
     }
 
@@ -44,151 +43,109 @@
     }));
   }
 
-
-
-
-  rJS(window)
-    /////////////////////////////////////////////////////////////////
-    // ready
-    /////////////////////////////////////////////////////////////////
-    // Init local properties
-    .ready(function (g) {
-      g.props = {};
-    })
-    .ready(function (g) {
-      return g.getElement()
-        .push(function (element) {
-          g.props.element = element;
-        });
-    })
-
-
-
+  gadget_klass
     //////////////////////////////////////////////
     // acquired method
     //////////////////////////////////////////////
     .declareAcquiredMethod("translateHtml", "translateHtml")
     .declareAcquiredMethod("redirect", "redirect")
     .declareAcquiredMethod("trigger", "trigger")
-    //////////////////////////////////////////////
-    // initialize the gadget content
-    //////////////////////////////////////////////
-    .declareMethod('render', function (options) {
-      var gadget = this;
-      gadget.props.sort_column_list = options.sort_column_list || [];
-      gadget.props.key = options.key;
-      gadget.props.sort_list = options.sort_list;
-
-      return new RSVP.Queue()
-        .push(function () {
-          var tmp = sort_template();
-          return gadget.translateHtml(tmp);
-        })
-        .push(function (translated_html) {
-          var tmp = document.createElement("div");
-          tmp.innerHTML = translated_html;
-          gadget.props.element.querySelector(".container").appendChild(tmp);
-        });
-    })
-    //////////////////////////////////////////////
-    .declareService(function () {
+
+    .onStateChange(function () {
       var gadget = this,
-        i,
-        list = [];
-      return new RSVP.Queue()
-        .push(function () {
-          for (i = 0; i < gadget.props.sort_list.length; i += 1) {
-            if (gadget.props.sort_list[i]) {
-              list.push(createSortItemTemplate(gadget, gadget.props.sort_list[i]));
+        div = document.createElement("div"),
+        container = gadget.element.querySelector(".container");
+
+      return gadget.translateHtml(sort_template())
+        .push(function (translated_html) {
+          var i,
+            promise_list = [];
+
+          div.innerHTML = translated_html;
+
+          for (i = 0; i < gadget.state.sort_list.length; i += 1) {
+            if (gadget.state.sort_list[i]) {
+              promise_list.push(createSortItemTemplate(gadget, gadget.state.sort_list[i]));
             }
           }
-          return RSVP.all(list);
+          return RSVP.all(promise_list);
         })
-        .push(function (all_result) {
-          var div,
-            container = gadget.props.element.querySelector(".sort_item_container");
-          for (i = 0; i < all_result.length; i += 1) {
-            div = document.createElement("div");
-            div.innerHTML = all_result[i];
-            container.appendChild(div);
+        .push(function (result_list) {
+          var i,
+            subdiv,
+            filter_item_container = div.querySelector('.sort_item_container');
+
+          for (i = 0; i < result_list.length; i += 1) {
+            subdiv = document.createElement("div");
+            subdiv.innerHTML = result_list[i];
+            filter_item_container.appendChild(subdiv);
           }
+
+          while (container.firstChild) {
+            container.removeChild(container.firstChild);
+          }
+          container.appendChild(div);
         });
     })
-    .declareService(function () {
-      var gadget = this,
-        container = gadget.props.element.querySelector(".sort_item_container");
-      return loopEventListener(
-        gadget.props.element.querySelector(".sort_editor"),
-        "submit",
-        false,
-        function () {
-          var focused = document.activeElement;
-          container.removeChild(focused.parentElement);
-        }
-      );
+
+    .declareMethod('render', function (options) {
+      return this.changeState({
+        sort_column_list: options.sort_column_list || [],
+        key: options.key,
+        sort_list: options.sort_list
+      });
     })
-    .declareService(function () {
+
+    .onEvent('click', function (evt) {
       var gadget = this;
-      return loopEventListener(
-        gadget.props.element.querySelector(".submit"),
-        "submit",
-        false,
-        function () {
-          var sort_list = gadget.props.element.querySelectorAll(".sort_item"),
-            sort_query = [],
-            select_list,
-            sort_item,
-            options = {},
-            i;
-
-          for (i = 0; i < sort_list.length; i += 1) {
-            sort_item = sort_list[i];
-            select_list = sort_item.querySelectorAll("select");
-            sort_query[i] = [select_list[0][select_list[0].selectedIndex].value,
-              select_list[1][select_list[1].selectedIndex].value];
-          }
-          if (i === 0) {
-            options[gadget.props.key] = undefined;
-          } else {
-            options[gadget.props.key] = sort_query;
-          }
-          return gadget.redirect({
-            command: 'store_and_change',
-            options: options
+
+      if (evt.target.classList.contains('close')) {
+        evt.preventDefault();
+        return this.trigger();
+      }
+
+      if (evt.target.classList.contains('plus')) {
+        evt.preventDefault();
+        return createSortItemTemplate(gadget)
+          .push(function (template) {
+            var tmp = document.createElement("div"),
+              container = gadget.element.querySelector(".sort_item_container");
+            tmp.innerHTML = template;
+            container.appendChild(tmp);
           });
-        }
-      );
-    })
-    .declareService(function () {
-      var gadget = this;
-      return loopEventListener(
-        gadget.props.element.querySelector(".plus"),
-        "submit",
-        false,
-        function () {
-          return new RSVP.Queue()
-            .push(function () {
-              return createSortItemTemplate(gadget);
-            })
-            .push(function (template) {
-              var tmp = document.createElement("div"),
-                container = gadget.props.element.querySelector(".sort_item_container");
-              tmp.innerHTML = template;
-              container.appendChild(tmp);
-            });
-        }
-      );
-    })
-    .declareService(function () {
-      var gadget = this;
-      return loopEventListener(
-        gadget.props.element.querySelector(".delete"),
-        "submit",
-        false,
-        function () {
-          return gadget.trigger();
-        }
-      );
+      }
+
+      if (evt.target.classList.contains('ui-icon-minus')) {
+        evt.preventDefault();
+        evt.target.parentElement.parentElement.removeChild(evt.target.parentElement);
+      }
+
+    }, false, false)
+
+    .onEvent('submit', function () {
+      var gadget = this,
+        sort_list = gadget.element.querySelectorAll(".sort_item"),
+        sort_query = [],
+        select_list,
+        sort_item,
+        options = {},
+        i;
+
+      for (i = 0; i < sort_list.length; i += 1) {
+        sort_item = sort_list[i];
+        select_list = sort_item.querySelectorAll("select");
+        sort_query[i] = [select_list[0][select_list[0].selectedIndex].value,
+          select_list[1][select_list[1].selectedIndex].value];
+      }
+      if (i === 0) {
+        options[gadget.state.key] = undefined;
+      } else {
+        options[gadget.state.key] = sort_query;
+      }
+      return gadget.redirect({
+        command: 'store_and_change',
+        options: options
+      });
     });
 
-}(window, document, rJS, RSVP, Handlebars, loopEventListener));
\ No newline at end of file
+}(window, document, rJS, RSVP, Handlebars));
\ No newline at end of file

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_sorteditor_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.21277.40593.7202</string> </value>
+                <value> <string>955.38160.33114.47854</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1468403615.53</float>
+                        <float>1480344058.06</float>
                         <string>UTC</string>
                       </tuple>
                     </state>