← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to src/Events/EventTree.js

  • Committer: Keith Hughitt
  • Date: 2011-05-26 19:27:36 UTC
  • mto: This revision was merged to the branch mainline in revision 567.
  • Revision ID: keith.hughitt@nasa.gov-20110526192736-qyr0ltaiak33loik
Updated release notes and sample configuration file.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/Events/EventTree.js
1
1
/**
2
 
 * @author Jeff Stys <jeff.stys@nasa.gov>
3
2
 * @author Jonathan Harper
4
3
 * @fileOverview TO BE ADDED
5
4
 *
6
5
 */
7
 
/*jslint browser: true, white: true, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: true,
 
6
/*jslint browser: true, white: true, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: true, 
8
7
bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxlen: 120, sub: true */
9
8
/*global Class, $, window */
10
9
 
11
10
"use strict";
12
11
 
13
12
var EventTree = Class.extend({
14
 
 
15
 
    init: function (data, container) {
16
 
        this._container = container;
 
13
        
 
14
    init: function (data, controller) {
17
15
        this._build(data);
18
 
 
19
 
        $(document).bind("toggle-checkboxes", $.proxy(this.toggle_checkboxes, this));
20
 
        $(document).bind("toggle-checkboxes-to-state", $.proxy(this.toggle_checkboxes_state, this));
 
16
        this.controller = controller;
21
17
    },
22
 
 
 
18
    
23
19
    destroy: function (data) {
24
 
        this._container.empty();
25
 
    },
26
 
 
27
 
    reload: function (newData) {
28
 
        this.destroy();
29
 
        this._build(newData);
30
 
    },
31
 
 
32
 
    close_all: function () {
33
 
        this._container.jstree("close_all",null,true);
34
 
    },
35
 
 
36
 
    open_all: function () {
37
 
        this._container.jstree("open_all",null,true);
38
 
    },
39
 
 
40
 
    toggle_checkboxes: function () {
41
 
        var numChecked;
42
 
        numChecked = Helioviewer.userSettings.get("state.eventLayers").length;
43
 
        if ( numChecked > 0 ) {
44
 
            this._container.jstree("uncheck_all",null,true);
45
 
        }
46
 
        else {
47
 
            this._container.jstree("check_all",null,true);
48
 
            // Unbind event handler that normally triggers when checkboxes are checked/unchecked
49
 
            // because we're about to do that a lot
50
 
            this._container.unbind("change_state.jstree", $.proxy(this._treeChangedState, this));
51
 
 
52
 
            $(document).trigger("fetch-eventFRMs");
53
 
 
54
 
            // Bind event handler that triggers whenever checkboxes are checked/unchecked
55
 
            this._container.bind("change_state.jstree", $.proxy(this._treeChangedState, this));
56
 
        }
57
 
 
58
 
    },
59
 
 
60
 
    toggle_checkboxes_state: function (e, toState) {
61
 
        if (toState == 'off') {
62
 
            this._container.jstree("uncheck_all",null,true);
63
 
        }
64
 
        else if (toState == 'on') {
65
 
            this._container.jstree("check_all",null,true);
66
 
        }
67
 
        else {
68
 
            this.toggle_checkboxes();
69
 
            return;
70
 
        }
71
 
 
72
 
        // Unbind event handler that normally triggers when checkboxes are checked/unchecked
73
 
        // because we're about to do that a lot
74
 
        this._container.unbind("change_state.jstree", $.proxy(this._treeChangedState, this));
75
 
 
76
 
        $(document).trigger("fetch-eventFRMs");
77
 
 
78
 
        // Bind event handler that triggers whenever checkboxes are checked/unchecked
79
 
        this._container.bind("change_state.jstree", $.proxy(this._treeChangedState, this));
80
 
    },
81
 
 
82
 
    jstreeFunc: function (name, args) {
83
 
        this._container.jstree(name, args);
84
 
    },
85
 
 
86
 
    _build: function (jsTreeData) {
87
 
        var self = this, saved, node;
88
 
 
89
 
        this._container.jstree({
90
 
            "json_data" : { "data": jsTreeData },
91
 
            "themes"    : { "theme":"default", "dots":true, "icons":false },
92
 
            "plugins"   : [ "json_data", "themes", "ui", "checkbox" ],
93
 
        });
94
 
 
95
 
        // Bind an event handler to each row that will trigger on hover
96
 
        $.each(jsTreeData, function(index, event_type) {
97
 
 
98
 
            $('#'+event_type['attr'].id+' a').hover($.proxy(self.hoverOn,this), $.proxy(self.hoverOff,this));
99
 
 
100
 
            // Dim rows that don't have associated features/events
101
 
            if ( event_type.children.length == 0 ) {
102
 
                $('#'+event_type['attr'].id).css({'opacity':'0.5'});
103
 
            }
104
 
 
105
 
            $.each(event_type['children'], function(j, frm) {
106
 
                $('#'+self._escapeInvalidJQueryChars(frm['attr'].id)+' a').hover($.proxy(self.hoverOnFRM,this), $.proxy(self.hoverOffFRM,this));
107
 
            });
108
 
        });
109
 
 
110
 
 
111
 
        // Unbind event handler that normally triggers when checkboxes are checked/unchecked
112
 
        // because we're about to do that a lot
113
 
        this._container.unbind("change_state.jstree", $.proxy(this._treeChangedState, this));
114
 
 
115
 
        // Loop over saved eventLayer state, checking the appropriate checkboxes to match.
116
 
        saved = Helioviewer.userSettings.get("state.eventLayers");
117
 
        $.each(saved, function(i,eventLayer) {
118
 
            if (eventLayer.frms[0] == 'all') {
119
 
                node = "#"+eventLayer.event_type;
120
 
                if ( $(node).length != 0 ) {
121
 
                    self.jstreeFunc("check_node", node);
122
 
                }
123
 
            }
124
 
            else {
125
 
                $.each(eventLayer.frms, function(j,frm) {
126
 
                    node = "#"+eventLayer.event_type+"--"+frm;
127
 
                    if ( $(node).length != 0 ) {
128
 
                        self.jstreeFunc("check_node", node);
129
 
                    }
130
 
                });
131
 
            }
132
 
        });
133
 
 
134
 
        // Re-bind event handler that triggers whenever checkboxes are checked/unchecked
135
 
        this._container.bind("change_state.jstree", $.proxy(this._treeChangedState, this));
136
 
        $(document).trigger("change_state.jstree", this);
137
 
    },
138
 
 
139
 
    _escapeInvalidJQueryChars: function (selector) {
140
 
        // Plus Sign '+', Period/Dot '.', Parentheses '(', ')'
141
 
        selector = selector.replace(/(\+)/g, '\\\\$1');
142
 
        selector = selector.replace(/(\.)/g, '\\\\$1');
143
 
        selector = selector.replace(/(\()/g, '\\\\$1');
144
 
        selector = selector.replace(/(\))/g, '\\\\$1');
145
 
 
146
 
        return selector;
147
 
    },
148
 
 
149
 
 
 
20
        $("#eventAccordion").unbind();
 
21
    },
 
22
    
 
23
        reload: function (newData) {
 
24
            this.destroy();
 
25
            this._build(newData);
 
26
        },
 
27
    
 
28
    _build: function (treeData) {
 
29
        var self = this, tree;
 
30
        $("#eventAccordion").jstree({
 
31
            json_data : { data: treeData },
 
32
            themes : { theme: "default", dots : true },
 
33
            plugins : [ "crrm", "json_data", "themes", "ui", "checkbox" ]
 
34
        });
 
35
 
 
36
        $("#eventAccordion").bind("jstree.change_state", $.proxy(this._treeChangedState, this));
 
37
        },
 
38
        
150
39
    _treeChangedState: function (event, data) {
151
 
        var checked = [], event_types = [], index;
152
 
 
153
 
        this._container.jstree("get_checked",null,false).each(
154
 
            function () {
155
 
                var eventLayer, event_type, frm;
156
 
                event_type = this.id.split("--");
157
 
                if (event_type.length > 1) {
158
 
                    frm = event_type[1];
159
 
                }
160
 
                else {
161
 
                    frm = 'all';
162
 
                }
163
 
                event_type = event_type[0];
164
 
 
165
 
                // Determine if an entry for this event type already exists
166
 
                index = $.inArray(event_type, event_types)
167
 
 
168
 
                // New event type to add to array
169
 
                if ( index == -1 ) {
170
 
                    eventLayer = { 'event_type' : event_type,
171
 
                                         'frms' : [frm],
172
 
                                         'open' : 1};
173
 
                    checked.push(eventLayer);
174
 
                    event_types.push(event_type);
175
 
                }
176
 
                // Append FRM to existing event type in array
177
 
                else {
178
 
                    checked[index].frms.push(frm);
179
 
                }
180
 
            }
181
 
        );
182
 
 
183
 
        // Save eventLayers state to localStorage
184
 
        Helioviewer.userSettings.set("state.eventLayers", checked);
185
 
 
186
 
        // Show/Hide events to match new state of the checkboxes
187
 
        $(document).trigger("toggle-events");
188
 
    },
189
 
 
190
 
    hoverOn: function (event) {
191
 
        var emphasisNodes, eventLayerNodes, found;
192
 
        emphasisNodes  = $("[id^="+this['attr'].id+"__]");
193
 
        eventLayerNodes = $("#event-container > div.event-layer");
194
 
 
195
 
        $.each( eventLayerNodes, function(i, obj) {
196
 
            found = false;
197
 
            $.each( emphasisNodes, function(j, emphObj) {
198
 
                if ( $(obj)[0].id == $(emphObj)[0].id ) {
199
 
                    found = true;
200
 
                }
201
 
            });
202
 
 
203
 
            if ( found === false && emphasisNodes.length > 0 ) {
204
 
                $(obj).css({'opacity':'0.20'});
205
 
            }
206
 
            else {
207
 
                $(obj).css({'opacity':'1.00'});
208
 
            }
209
 
        });
210
 
    },
211
 
 
212
 
    hoverOff: function (event) {
213
 
        $("#event-container > div.event-layer").css({'opacity':'1.0'});
214
 
    },
215
 
 
216
 
    hoverOnFRM: function (event) {
217
 
        var emphasisNode, deEmphasisNodes, eventTypeAbbr, eventLayerNodes, found;
218
 
        eventTypeAbbr = this['attr'].id.split("--")[0];
219
 
 
220
 
        emphasisNode  = $("#"+this['attr'].id.replace("--", "__"));
221
 
        deEmphasisNodes = $("[id^="+eventTypeAbbr+"__]");
222
 
 
223
 
        eventLayerNodes = $("#event-container > div.event-layer");
224
 
 
225
 
        $.each( eventLayerNodes, function(i, obj) {
226
 
 
227
 
            if ( $(obj)[0].id == $(emphasisNode)[0].id ) {
228
 
                $(obj).css({'opacity':'1.00'});
229
 
            }
230
 
            else {
231
 
                found = false;
232
 
                $.each( deEmphasisNodes, function(j, deEmphObj) {
233
 
                    if ( $(obj)[0].id == $(deEmphObj)[0].id ) {
234
 
                        found = true;
235
 
                    }
236
 
                });
237
 
                if ( found === true ) {
238
 
                    //$(obj).css({'opacity':'0.50'});
239
 
                    $(obj).css({'opacity':'0.20'});
240
 
                }
241
 
                else {
242
 
                    $(obj).css({'opacity':'0.20'});
243
 
                }
244
 
            }
245
 
        });
246
 
 
247
 
    },
248
 
 
249
 
    hoverOffFRM: function (event) {
250
 
        var emphasisNode, deEmphasisNodes, eventTypeAbbr, eventLayerNodes, found;
251
 
        eventTypeAbbr = this['attr'].id.split("--")[0];
252
 
 
253
 
        emphasisNode  = $("#"+this['attr'].id.replace("--", "__"));
254
 
        deEmphasisNodes = $("[id^="+eventTypeAbbr+"__]");
255
 
 
256
 
        eventLayerNodes = $("#event-container > div.event-layer");
257
 
 
258
 
        $.each( eventLayerNodes, function(i, obj) {
259
 
 
260
 
            if ( $(obj)[0].id == $(emphasisNode)[0].id ) {
261
 
                $(obj).css({'opacity':'1.0'});
262
 
            }
263
 
            else {
264
 
                found = false;
265
 
                $.each( deEmphasisNodes, function(j, deEmphObj) {
266
 
                    if ( $(obj)[0].id == $(deEmphObj)[0].id ) {
267
 
                        found = true;
268
 
                    }
269
 
                });
270
 
                if ( found === true ) {
271
 
                    //$(obj).css({'opacity':'0.50'});
272
 
                    $(obj).css({'opacity':'1.0'});
273
 
                }
274
 
                else {
275
 
                    $(obj).css({'opacity':'1.0'});
276
 
                }
277
 
            }
278
 
        });
279
 
 
 
40
        var nodeChanged, self = this;
 
41
        nodeChanged = $(data.args[0]).parent().parent();
 
42
        this.controller.query(nodeChanged.attr("type"), nodeChanged.attr("name"));
280
43
    }
281
44
});