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

bzr revid: xmo@openerp.com-20120607154645-3ghi8fnuqqrhr40z
This commit is contained in:
Xavier Morel 2012-06-07 17:46:45 +02:00
parent bdfcd758d0
commit 656ce51ae4
2 changed files with 49 additions and 52 deletions

View File

@ -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.on('click', '.oe_graph_options a', function (evt) {
var $el = $(evt.target);
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);
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;
},

View File

@ -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: