← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to lib/helioviewer/IconPicker.js

  • Committer: V. Keith Hughitt
  • Date: 2009-04-01 21:08:05 UTC
  • Revision ID: hughitt1@kore-20090401210805-372f7dgih07vxk42
nightly build 04-01-2009

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/helioviewer/IconPicker.js
1
1
/**
2
2
 * @fileOverview Contains the IconPicker class definition.
3
 
 * @author <a href="mailto:vincent.k.hughitt@nasa.gov">Keith Hughitt</a>
 
3
 * Syntax: Prototype, jQuery 
 
4
 * @author <a href="mailto:keith.hughitt@gmail.com">Keith Hughitt</a>
4
5
 */
5
 
/*jslint browser: true, white: true, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: true, 
6
 
bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxlen: 120, sub: true */
7
 
/*global Class, $ */
8
 
"use strict";
9
 
var IconPicker = Class.extend(
10
 
    /** @lends IconPicker.prototype */
11
 
    {
12
 
    /**
13
 
     * @constructs
14
 
     * @description Creates a new IconPicker
15
 
     * @param {String} id The identifier to use for the icon-picker dom-node
16
 
     */
17
 
    init: function (id) {
18
 
        this.id = id;
19
 
        
20
 
        // Available Icon options
21
 
        this.AVAILABLE_ICON_SHAPES = ["circle", "square", "diamond"];
22
 
        this.AVAILABLE_ICON_COLORS = ["red", "orange", "green", "yellow", "blue", "lightblue"];
23
 
        
24
 
        // Keep track of which event-layer is being targeted.
25
 
        this.focus = null;
 
6
/*global IconPicker, Class, $, $A, jQuery*/
 
7
var IconPicker = Class.create(
 
8
        /** @lends IconPicker.prototype */
 
9
        {
 
10
        /**
 
11
         * @constructs
 
12
         * @description Creates a new IconPicker
 
13
         * @param {String} id The identifier to use for the icon-picker dom-node
 
14
         */
 
15
        initialize: function (id) {
 
16
                this.id = id;
 
17
                
 
18
                // Available Icon options
 
19
                this.AVAILABLE_ICON_SHAPES = $A(["circle", "square", "diamond"]);
 
20
                this.AVAILABLE_ICON_COLORS = $A(["red", "orange", "green", "yellow", "blue", "lightblue"]);
 
21
                
 
22
                // Keep track of which event-layer is being targeted.
 
23
                this.focus = null;
26
24
        
27
25
        // Don't build until requested
28
26
        this.loaded = false;
29
 
    },    
30
 
    
31
 
    /**
32
 
     * @description Sets up the list of available icons to chose from
33
 
     */
34
 
    _buildIconList: function () {
35
 
        var i, closeBtn, menu, self = this;
36
 
        menu = $("<div id='" + this.id + "' class='ui-widget ui-widget-content " + 
37
 
                 "ui-corner-all' style='display: none;'></div>");                
38
 
        menu.append('<div id=event-icon-menu-title><span style="vertical-align: middle">Chose an icon:</span>' + 
39
 
                    '</div><div id="event-icon-menu-body">');
 
27
                
 
28
                // Build icon-list
 
29
                //this._buildIconList();
 
30
        },
 
31
        
 
32
        
 
33
        /**
 
34
         * @description Sets up the list of available icons to chose from
 
35
         */
 
36
        _buildIconList: function () {
 
37
                var i, closeBtn, menu, self = this;
 
38
                menu = jQuery("<div id='" + this.id + "' class='ui-widget ui-widget-content ui-corner-all' style='display: none;'></div>");                             
 
39
                //menu.append(jQuery('<div id=event-icon-menu-title><span style="vertical-align: middle">Chose an icon:</span></div><div id="event-icon-menu-body">'));
 
40
        menu.append(jQuery('<div id=event-icon-menu-title><span style="vertical-align: middle">Chose an icon:</span></div><div id="event-icon-menu-body">'));
40
41
 
41
 
        i = 1;
42
 
        $.each(this.AVAILABLE_ICON_COLORS, function () {
43
 
            var color = this;
44
 
            $.each(self.AVAILABLE_ICON_SHAPES, function () {
45
 
                var icon, shape = this;
46
 
                
47
 
                icon = $('<img class="event-icon-menu-icon" src="resources/images/events/small-' + color + "-" + shape +
48
 
                         '.png" alt="' + color + '-' + shape + '">');
49
 
                icon.click(function () {
50
 
                    self.focus.updateIcon(this.alt);
51
 
                    $('#event-icon-menu').fadeOut();
52
 
                });
53
 
                menu.append(icon);
54
 
                if (i % 3 === 0) {
55
 
                    menu.append("<br>");
56
 
                }
57
 
                i += 1;
58
 
            });            
59
 
        });
60
 
        
61
 
        closeBtn = $('<br><div style="text-align: right">' + 
62
 
                     '<a class="light" href="#" style="margin-right: 2px;">[Close]</a></div>').click(function () {
63
 
            $('#event-icon-menu').fadeOut();
64
 
        });
65
 
        menu.append(closeBtn);
66
 
        menu.append("</div>");
67
 
        
68
 
        $('body').append(menu);
69
 
    },
70
 
    
71
 
    /**
72
 
     * @description Toggle IconPicker visibility
73
 
     * @param {Object} layer The EventLayer icon picker is associated with.
74
 
     * @param {Object} pos The mouse-click position
75
 
     */
76
 
    toggle: function (layer, pos) {
 
42
                i = 1;
 
43
                this.AVAILABLE_ICON_COLORS.each(function (color) {
 
44
                        self.AVAILABLE_ICON_SHAPES.each(function (shape) {
 
45
                                var icon = jQuery('<img class="event-icon-menu-icon" src="images/events/small-' + color + "-" + shape + '.png" alt="' + color + '-' + shape + '">');
 
46
                                icon.click(function () {
 
47
                                        self.focus.updateIcon(this.alt);
 
48
                                        jQuery('#event-icon-menu').fadeOut();
 
49
                                });
 
50
                                menu.append(icon);
 
51
                                if (i % 3 === 0) {
 
52
                                        menu.append(jQuery("<br>"));
 
53
                                }
 
54
                                i += 1;
 
55
                        });                     
 
56
                });
 
57
                
 
58
                closeBtn = jQuery('<br><div style="text-align: right"><a class="light" href="#" style="margin-right: 2px;">[Close]</a></div>').click(function () {
 
59
                        jQuery('#event-icon-menu').fadeOut();
 
60
                });
 
61
                menu.append(closeBtn);
 
62
                menu.append("</div>");
 
63
                
 
64
                jQuery('body').append(menu);
 
65
        },
 
66
        
 
67
        /**
 
68
         * @description Toggle IconPicker visibility
 
69
         * @param {Object} layer The EventLayer icon picker is associated with.
 
70
         * @param {Object} pos The mouse-click position
 
71
         */
 
72
        toggle: function (layer, pos) {
77
73
        if (!this.loaded) {
78
74
            this._buildIconList();            
79
75
            this.loaded = true;
80
76
        }
81
 
        this.focus = layer;
82
 
        $('#' + this.id).css({'left': pos.left + 16, 'top': pos.top + 16}).slideToggle();
83
 
    }
 
77
                this.focus = layer;
 
78
                jQuery('#' + this.id).css({'left': pos.left + 16, 'top': pos.top + 16}).slideToggle();
 
79
 
 
80
        }
84
81
});