← 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-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/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;
26
 
        
27
 
        // Don't build until requested
28
 
        this.loaded = false;
29
 
    },
30
 
    
31
 
    
32
 
    /**
33
 
     * @description Sets up the list of available icons to chose from
34
 
     */
35
 
    _buildIconList: function () {
36
 
        var i, closeBtn, menu, self = this;
37
 
        menu = $("<div id='" + this.id + "' class='ui-widget ui-widget-content" + 
38
 
                 "ui-corner-all' style='display: none;'></div>");                
39
 
        menu.append('<div id=event-icon-menu-title><span style="vertical-align: middle">Chose an icon:</span>' + 
40
 
                    '</div><div id="event-icon-menu-body">');
 
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;
 
24
                
 
25
                // Build icon-list
 
26
                this._buildIconList();
 
27
        },
 
28
        
 
29
        
 
30
        /**
 
31
         * @description Sets up the list of available icons to chose from
 
32
         */
 
33
        _buildIconList: function () {
 
34
                var i, closeBtn, menu, self = this;
 
35
                menu = jQuery("<div id='" + this.id + "' style='display: none;'></div>");                               
 
36
                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">'));
41
37
 
42
 
        i = 1;
43
 
        $.each(this.AVAILABLE_ICON_COLORS, function () {
44
 
            var color = this;
45
 
            $.each(self.AVAILABLE_ICON_SHAPES, function () {
46
 
                var icon, shape = this;
47
 
                
48
 
                icon = $('<img class="event-icon-menu-icon" src="images/events/small-' + color + "-" + shape +
49
 
                         '.png" alt="' + color + '-' + shape + '">');
50
 
                icon.click(function () {
51
 
                    self.focus.updateIcon(this.alt);
52
 
                    $('#event-icon-menu').fadeOut();
53
 
                });
54
 
                menu.append(icon);
55
 
                if (i % 3 === 0) {
56
 
                    menu.append("<br>");
57
 
                }
58
 
                i += 1;
59
 
            });            
60
 
        });
61
 
        
62
 
        closeBtn = $('<br><div style="text-align: right">' + 
63
 
                     '<a class="light" href="#" style="margin-right: 2px;">[Close]</a></div>').click(function () {
64
 
            $('#event-icon-menu').fadeOut();
65
 
        });
66
 
        menu.append(closeBtn);
67
 
        menu.append("</div>");
68
 
        
69
 
        $('body').append(menu);
70
 
    },
71
 
    
72
 
    /**
73
 
     * @description Toggle IconPicker visibility
74
 
     * @param {Object} layer The EventLayer icon picker is associated with.
75
 
     * @param {Object} pos The mouse-click position
76
 
     */
77
 
    toggle: function (layer, pos) {
78
 
        if (!this.loaded) {
79
 
            this._buildIconList();            
80
 
            this.loaded = true;
81
 
        }
82
 
        this.focus = layer;
83
 
        $('#' + this.id).css({'left': pos.left + 16, 'top': pos.top + 16}).slideToggle();
84
 
    }
 
38
                i = 1;
 
39
                this.AVAILABLE_ICON_COLORS.each(function (color) {
 
40
                        self.AVAILABLE_ICON_SHAPES.each(function (shape) {
 
41
                                var icon = jQuery('<img class="event-icon-menu-icon" src="images/events/small-' + color + "-" + shape + '.png" alt="' + color + '-' + shape + '">');
 
42
                                icon.click(function () {
 
43
                                        self.focus.updateIcon(this.alt);
 
44
                                        jQuery('#event-icon-menu').fadeOut();
 
45
                                });
 
46
                                menu.append(icon);
 
47
                                if (i % 3 === 0) {
 
48
                                        menu.append(jQuery("<br>"));
 
49
                                }
 
50
                                i += 1;
 
51
                        });                     
 
52
                });
 
53
                
 
54
                closeBtn = jQuery('<br><div style="text-align: right"><a class="event-url" href="#" style="margin-right: 2px;">[Close]</a></div>').click(function () {
 
55
                        jQuery('#event-icon-menu').fadeOut();
 
56
                });
 
57
                menu.append(closeBtn);
 
58
                menu.append("</div>");
 
59
                
 
60
                jQuery('body').append(menu);
 
61
        },
 
62
        
 
63
        /**
 
64
         * @description Toggle IconPicker visibility
 
65
         * @param {Object} layer The EventLayer icon picker is associated with.
 
66
         * @param {Object} pos The mouse-click position
 
67
         */
 
68
        toggle: function (layer, pos) {
 
69
                this.focus = layer;
 
70
                jQuery('#' + this.id).css({'left': pos.left + 16, 'top': pos.top + 16}).slideToggle();
 
71
        }
85
72
});