From 1d36fbdecd416f15bd112e6e5df4931c2befcff8 Mon Sep 17 00:00:00 2001 From: Alon Levy Date: Mon, 6 Jul 2015 19:15:56 +0300 Subject: client: split view/filter.js from view/graph_view --- src/client/view/filter.js | 75 +++++++++++++++++++++++++++++++++++++ src/client/view/graph_view.js | 86 +++++-------------------------------------- 2 files changed, 84 insertions(+), 77 deletions(-) create mode 100644 src/client/view/filter.js (limited to 'src/client/view') diff --git a/src/client/view/filter.js b/src/client/view/filter.js new file mode 100644 index 00000000..60ff7abd --- /dev/null +++ b/src/client/view/filter.js @@ -0,0 +1,75 @@ +define(['Bacon', 'jquery', 'underscore', 'model/types', 'util'], +function(Bacon, $, _, model_types, util) { + +var filter_states_bus = new Bacon.Bus(); + +function init() { + function create_checkboxes() { + var root = $('#menu__type-filter'); + + _.each(model_types.nodetypes, function (type) { + var input = $(''), + div = $('
'); + + input.attr("name", type); + div.append(input); + div.append(util.capitalize(model_types.node_titles[type])); + root.append(div); + }); + } + + function read_checkboxes() { + var name, + value, + // FIXME take filter names from index.html or both from graph db + filter_states = _.object(_.map(model_types.nodetypes, function (type) { return [type, null]; })); + // jquery map does flattens, and we don't want that + checkboxes = _.map($('#menu__type-filter input'), + function (checkbox) { + return [checkbox.name, checkbox.checked]; + } + ); + for (var i in checkboxes) { + name = checkboxes[i][0]; + value = checkboxes[i][1]; + if (undefined === filter_states[name]) { + continue; + } + filter_states[name] = value; + } + return filter_states; + } + + create_checkboxes(); + read_checkboxes(); + function filtered_states() { + var o = read_checkboxes(), + ret = {}; + + _.each(_.keys(o), function(type) { + if (!o[type]) { + ret[type] = 1; + } + }); + return ret; + } + //$('.menu__type-filter_item,.menu__type-filter_item input') + $('#menu__type-filter') + .asEventStream('click') + .onValue(function (e) { + var inp = $(e.target).find('input')[0]; + + if (inp && inp.checked !== undefined) { + inp.checked = !inp.checked; + e.preventDefault(); + } + e.stopPropagation(); + filter_states_bus.push(filtered_states()); + }); +} + +return { + init: init, + filter_states_bus: filter_states_bus, +}; +}); diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js index 5f451f73..3c4d46f4 100644 --- a/src/client/view/graph_view.js +++ b/src/client/view/graph_view.js @@ -43,8 +43,8 @@ * which resulted in overly complex (read: undefined/buggy) code. */ -define(['d3', 'Bacon', 'consts', 'util', 'view/selection', 'model/diff', 'view/item_info', 'view/bubble', 'model/types', 'view/layouts'], -function(d3 , Bacon, consts, util , selection , model_diff , item_info, view_bubble, model_types, view_layouts) { +define(['d3', 'Bacon', 'consts', 'util', 'view/selection', 'model/diff', 'view/item_info', 'view/bubble', 'model/types', 'view/layouts', 'view/filter'], +function(d3 , Bacon, consts, util , selection , model_diff , item_info, view_bubble, model_types, view_layouts, view_filter) { "use strict" @@ -80,75 +80,6 @@ function translate(x, y) { return "translate(" + x + "," + y + ")"; } -function init_checkboxes(graph, update_view) { - var // FIXME take filter names from index.html or both from graph db - filter_states = _.object(_.map(model_types.nodetypes, function (type) { return [type, null]; })); - - function create_checkboxes() { - var root = $('#menu__type-filter'); - - _.each(model_types.nodetypes, function (type) { - var input = $(''), - div = $('
'); - - input.attr("name", type); - div.append(input); - div.append(util.capitalize(model_types.node_titles[type])); - root.append(div); - }); - } - - function read_checkboxes() { - var name, - value, - // jquery map does flattens, and we don't want that - checkboxes = _.map($('#menu__type-filter input'), - function (checkbox) { - return [checkbox.name, checkbox.checked]; - } - ); - for (var i in checkboxes) { - name = checkboxes[i][0]; - value = checkboxes[i][1]; - if (undefined === filter_states[name]) { - continue; - } - filter_states[name] = value; - } - return filter_states; - } - - create_checkboxes(); - read_checkboxes(); - function filtered_states() { - var o = read_checkboxes(), - ret = {}; - - _.each(_.keys(o), function(type) { - if (!o[type]) { - ret[type] = 1; - } - }); - return ret; - } - //$('.menu__type-filter_item,.menu__type-filter_item input') - $('#menu__type-filter') - .asEventStream('click') - .onValue(function (e) { - var inp = $(e.target).find('input')[0]; - - if (inp && inp.checked !== undefined) { - inp.checked = !inp.checked; - e.preventDefault(); - } - e.stopPropagation(); - graph.node__set_filtered_types(filtered_states()); - update_view(true); - }) - - return filter_states; -} - // "CSS" for SVG elements. Reused for editing elements. var node_text_dx = 5, node_text_dy = '.30em'; @@ -225,6 +156,13 @@ function GraphView(spec) { $(window).asEventStream('resize').map(update_window_size).onValue(function () { update_view(false); }); update_window_size(); + // read updated filter states from filters view + view_filter.filter_states_bus.onValue(function (new_states) { + filter_states = new_states; + graph.node__set_filtered_types(filter_states); + update_view(true); + }); + function node__pass_filter(d) { var state = filter_states && filter_states[d.type]; @@ -235,12 +173,6 @@ function GraphView(spec) { return node__pass_filter(d.__src) && node__pass_filter(d.__dst); } - - // Filter. FIXME: move away from here. separate element, connected via bacon property - if (!temporary) { - filter_states = init_checkboxes(graph, update_view); - } - function range(start, end, number) { var ret = [], i, -- cgit v1.3.1