[IMP] encode behavior of menu items directly in their markup as data attributes

bzr revid: xmo@openerp.com-20120607154645-3ghi8fnuqqrhr40z

2 files changed, 50 insertions, 53 deletions

diff --git a/addons/web_graph/static/src/js/graph.js b/addons/web_graph/static/src/js/graph.js
index ea18bb8500d..448016541c9 100644
--- a/addons/web_graph/static/src/js/graph.js
+++ b/addons/web_graph/static/src/js/graph.js
@@ -6,6 +6,16 @@ openerp.web_graph = function (instance) {
 
 var _lt = instance.web._lt;
 
+// removed ``undefined`` values
+var filter_values = function (o) {
+    var out = {};
+    for (var k in o) {
+        if (!o.hasOwnProperty(k) || o[k] === undefined) { continue; }
+        out[k] = o[k];
+    }
+    return out;
+};
+
 instance.web.views.add('graph', 'instance.web_graph.GraphView');
 instance.web_graph.GraphView = instance.web.View.extend({
     template: "GraphView",
@@ -55,35 +65,16 @@ instance.web_graph.GraphView = instance.web.View.extend({
         })[0];
 
         var graph_render = this.proxy('graph_render');
-        this.$element.find("#graph_bar,#graph_bar_stacked").click(
-            {mode: 'bar', stacked: true, legend: 'top'}, graph_render);
-
-        this.$element.find("#graph_bar_not_stacked").click(
-            {mode: 'bar', stacked: false, legend: 'top'}, graph_render);
-
-        this.$element.find("#graph_area,#graph_area_stacked").click(
-            {mode: "area", stacked: true, legend: "top"}, graph_render);
-
-        this.$element.find("#graph_area_not_stacked").click(
-            {mode: "area", stacked: false, legend: "top"}, graph_render);
-
-        this.$element.find("#graph_radar").click(
-            {orientation: 0, mode: "radar", legend: "inside"}, graph_render);
-
-        this.$element.find("#graph_pie").click(
-            {mode: "pie", legend: "inside"}, graph_render);
-
-        this.$element.find("#graph_legend_top").click(
-            {legend: "top"}, graph_render);
-
-        this.$element.find("#graph_legend_inside").click(
-            {legend: "inside"}, graph_render);
-
-        this.$element.find("#graph_legend_no").click(
-            {legend: "no"}, graph_render);
-
-        this.$element.find("#graph_line").click(
-            {mode: "line"}, graph_render);
+        this.$element.on('click', '.oe_graph_options a', function (evt) {
+            var $el = $(evt.target);
+
+            self.graph_render({data: filter_values({
+                mode: $el.data('mode'),
+                legend: $el.data('legend'),
+                orientation: $el.data('orientation'),
+                stacked: $el.data('stacked')
+            })});
+        });
 
         this.$element.find("#graph_show_data").click(function () {
             self.spreadsheet = ! self.spreadsheet;
@@ -262,20 +253,19 @@ instance.web_graph.GraphView = instance.web.View.extend({
 
         // Update styles of menus
 
-        this.$element.find("a[id^='graph_']").removeClass("active");
-        this.$element.find("a[id='graph_"+this.mode+"']").addClass("active");
-        this.$element.find("a[id='graph_"+this.mode+(this.stacked?"_stacked":"_not_stacked")+"']").addClass("active");
+        this.$element.find("a").removeClass("active");
 
-        if (this.legend == 'inside') {
-            this.$element.find("a[id='graph_legend_inside']").addClass("active");
-        } else if (this.legend == 'top') {
-            this.$element.find("a[id='graph_legend_top']").addClass("active");
-        } else {
-            this.$element.find("a[id='graph_legend_no']").addClass("active");
+        var $active = this.$element.find('a[data-mode=' + this.mode + ']');
+        if ($active.length > 1) {
+            $active = $active.filter('[data-stacked=' + this.stacked + ']');
         }
+        $active = $active.add(
+            this.$element.find('a:not([data-mode])[data-legend=' + this.legend + ']'));
+
+        $active.addClass('active');
 
         if (this.spreadsheet) {
-            this.$element.find("a[id='graph_show_data']").addClass("active");
+            this.$element.find("#graph_show_data").addClass("active");
         }
         return this.graph;
     },
diff --git a/addons/web_graph/static/src/xml/web_graph.xml b/addons/web_graph/static/src/xml/web_graph.xml
index 1830f2447d9..5cdd0d46ee1 100644
--- a/addons/web_graph/static/src/xml/web_graph.xml
+++ b/addons/web_graph/static/src/xml/web_graph.xml
@@ -7,31 +7,38 @@
             <div class="menu-section">
                 Graph Mode:
             </div>
-            <ul class="graph-menu">
-                <li><a href="#" id="graph_pie">Pie</a></li>
+            <ul class="graph-menu oe_graph_options">
+                <li><a href="#" data-mode="pie">Pie</a></li>
                 <li>
-                    <a href="#" id="graph_bar">Bars</a>
+                    <a href="#" data-mode="bar" data-legend="top"
+                       data-stacked="true">Bars</a>
                     <div class="oe_i graph-menu-options">
-                        <a href="#" id="graph_bar_stacked" title="Stacked Bars">w</a>
-                        <a href="#" id="graph_bar_not_stacked" title="Multiple Bars">O</a>
+                        <a href="#" data-mode="bar" data-legend="top"
+                           data-stacked="true" title="Stacked Bars">w</a>
+                        <a href="#" data-mode="bar" data-legend="top"
+                           data-stacked="false" title="Multiple Bars">O</a>
                     </div>
                 </li>
-                <li><a href="#" id="graph_line">Lines</a></li>
-                <li><a href="#" id="graph_area">Areas</a>
+                <li><a href="#" data-mode="line">Lines</a></li>
+                <li><a href="#" data-mode="area" data-legend="top"
+                        data-stacked="true">Areas</a>
                     <div class="oe_i graph-menu-options">
-                        <a href="#" id="graph_area_stacked" title="Stacked Areas">w</a>
-                        <a href="#" id="graph_area_not_stacked" title="Multiple Areas">O</a>
+                        <a href="#" data-mode="area" data-legend="top"
+                            data-stacked="true" title="Stacked Areas">w</a>
+                        <a href="#" data-mode="area" data-legend="top"
+                            data-stacked="false" title="Multiple Areas">O</a>
                     </div>
                 </li>
-                <li><a href="#" id="graph_radar">Radar</a></li>
+                <li><a href="#" data-mode="radar" data-legend="inside"
+                        data-orientation="0">Radar</a></li>
             </ul>
             <div class="menu-section">
                 Legend:
             </div>
-            <ul class="graph-menu">
-                <li><a href="#" id="graph_legend_no">Hide</a></li>
-                <li><a href="#" id="graph_legend_inside">Inside</a></li>
-                <li><a href="#" id="graph_legend_top">Top</a></li>
+            <ul class="graph-menu oe_graph_options">
+                <li><a href="#" data-legend="no">Hide</a></li>
+                <li><a href="#" data-legend="inside">Inside</a></li>
+                <li><a href="#" data-legend="top">Top</a></li>
             </ul>
             <div class="menu-section">
                 Actions: