← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to lib/helioviewer/TreeSelect.js

  • Committer: V. Keith Hughitt
  • Date: 2009-03-26 19:20:57 UTC
  • Revision ID: hughitt1@kore-20090326192057-u0x8rf8sf5lmmnwh
nightly build 03-26-2009: Using alpha-channel JPEG 2000 dataset

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/helioviewer/TreeSelect.js
1
 
/**
2
 
 * @author <a href="mailto:keith.hughitt@nasa.gov">Keith Hughitt</a> 
3
 
 * @fileOverview Contains the definition for a Hierarchical or "Tree Select" class which links
4
 
 * several select form elements together based off a given tree structure such changes at any level automatically
5
 
 * determine valid options for select items at lower levels.
6
 
 */
7
 
/*jslint browser: true, evil: true, white: true, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: true, 
8
 
bitwise: true, regexp: true, strict: true, forin: true, newcap: true, immed: true, maxlen: 120, sub: true */
9
 
/*global Class, $, window */
10
 
"use strict";
11
 
var TreeSelect = Class.extend(
12
 
    /** @lends TreeSelect.prototype */
13
 
    {
14
 
    /**
15
 
     * @description
16
 
     * @param {Object} 
17
 
     * @constructs 
18
 
     */ 
19
 
    init: function (selectIds, tree, initialChoices, callback) {
20
 
        this.selectIds  = selectIds;
21
 
        this.tree       = tree;
22
 
        this.height     = selectIds.length;
23
 
        this.callback   = callback;
24
 
        this.selected   = initialChoices;
25
 
        
26
 
        this._initSelectMenus();
27
 
        
28
 
        this._setupEventHandlers();
29
 
    },
30
 
    
31
 
    /**
32
 
     * @description Populates SELECT menus and selects initial choices
33
 
     */
34
 
    _initSelectMenus: function () {
35
 
        var self = this;
36
 
        
37
 
        this._updateSelectMenus();
38
 
        
39
 
        // Set initial choices in select menus
40
 
        $.each(this.selectIds, function (depth, id) {
41
 
            $(id + " > option").each(function (index, option) {
42
 
                if (option.value === self.selected[depth]) {
43
 
                    $(id).attr("selectedIndex", index);     
44
 
                }
45
 
            });
46
 
        });
47
 
    },
48
 
    
49
 
    /**
50
 
     * @description Update the list of selected options
51
 
     * @param {Object} depth
52
 
     * @param {Object} newChoice
53
 
     */
54
 
    _updateSelected: function (depth, newChoice) {
55
 
        var nav, getFirstItem, i, self = this;
56
 
        
57
 
        this.selected[depth] = newChoice;
58
 
        
59
 
        // Function to get the first item in an array
60
 
        getFirstItem = function (arr) {
61
 
            for (var item in arr) {
62
 
                return item;
63
 
            }
64
 
        };
65
 
        
66
 
        // For each item below the selected parameter, use first available value
67
 
        nav = "this.tree";
68
 
        for (i = 0; i < this.height; i += 1) {
69
 
            if (i > depth) {
70
 
                this.selected[i] = getFirstItem(eval(nav));
71
 
            }
72
 
            nav += '["' + this.selected[i] + '"]';
73
 
        }
74
 
        
75
 
        this._updateSelectMenus(depth + 1);
76
 
    },
77
 
 
78
 
    /**
79
 
     * @description Updates the SELECT menus to show valid choices at
80
 
     *              each level based on chosen values from above levels.
81
 
     * @param {Object} startDepth
82
 
     */
83
 
    _updateSelectMenus: function (startDepth) {
84
 
        var select, i, nav, opt, self = this;
85
 
        
86
 
        if (typeof(startDepth) === "undefined") {
87
 
            startDepth = 0;
88
 
        }
89
 
        
90
 
        $.each(this.selectIds, function (depth, id) {
91
 
            if (depth >= startDepth) {
92
 
                //console.log(id);
93
 
                select = $(id);
94
 
                
95
 
                // remove old choices
96
 
                select.empty();
97
 
                
98
 
                // navigate to current depth
99
 
                nav = "self.tree";
100
 
                for (i = 0; i < depth; i += 1) {
101
 
                    nav += '["' + self.selected[i] + '"]';
102
 
                }
103
 
                
104
 
                // get choices
105
 
                for (var choice in eval(nav)) {
106
 
                    opt = $("<option value='" + choice + "'>" + choice + "</option>");
107
 
                    select.append(opt);
108
 
                }
109
 
            }
110
 
        });
111
 
    },
112
 
    
113
 
    /**
114
 
     * @description Returns the value associated with the currently selected leaf-node
115
 
     */
116
 
    _value: function () {
117
 
        var nav, self = this;
118
 
        
119
 
        nav = "this.tree";
120
 
        $.each(this.selected, function (i, choice) {
121
 
            nav += '["' + choice + '"]';
122
 
        });
123
 
        
124
 
        return eval(nav);
125
 
    },
126
 
    
127
 
    /**
128
 
     * @description Sets up event-handlers for each form field
129
 
     */
130
 
    _setupEventHandlers: function () {
131
 
        var self = this;
132
 
        
133
 
        $.each(this.selectIds, function (i, id) {
134
 
            $(id).change(function (e) {
135
 
                self._updateSelected(i, this.value);
136
 
                self.callback(self._value());
137
 
            });
138
 
        });
139
 
    }
140
 
 
141
 
});