← Back to branch summary

~keith-hughitt/helioviewer.org/2.0

« back to all changes in this revision

Viewing changes to src/EventMarker.js

  • Committer: Keith Hughitt
  • Date: 2010-03-24 11:14:04 UTC
  • Revision ID: hughitt1@io-20100324111404-tjat3xqy09nqvwik
Helioviewer.org 2.0.0

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/EventMarker.js
 
1
/**
 
2
 * @author <a href="mailto:keith.hughitt@nasa.gov">Keith Hughitt</a>
 
3
 * @fileoverview Contains the class definition for an EventMarker class.
 
4
 * @see EventLayer
 
5
 */
 
6
/*jslint browser: true, white: true, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: true, 
 
7
bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxlen: 120, sub: true */
 
8
/*global Class, $, getUTCTimestamp */
 
9
"use strict";
 
10
var EventMarker = Class.extend(
 
11
    /** @lends EventMarker.prototype */
 
12
    {
 
13
    /**
 
14
     * @constructs
 
15
     * @description Creates a new EventMarker
 
16
     * @param {Object} eventLayer EventLayer associated with the EventMarker
 
17
     * @param {JSON} event Event details
 
18
     * @param {Date} date The date when the given event occured
 
19
     * @param {Int} rsun The radius of the sun in pixels
 
20
     * @param {Object} options Extra EventMarker settings to use
 
21
     */    
 
22
    init: function (eventLayer, event, date, rsun, options) {
 
23
        $.extend(this, event);
 
24
        $.extend(this, options);
 
25
        
 
26
        this.eventLayer = eventLayer;
 
27
        this.appDate    = date;
 
28
        this.rsun       = rsun;
 
29
        
 
30
        //Determine event type and catalog
 
31
        var catalogs = eventLayer.eventAccordion.eventCatalogs;
 
32
        this.catalogName = catalogs[this.catalogId].name;
 
33
        this.type = catalogs[this.catalogId].eventType;
 
34
        
 
35
        //Create dom-nodes for event marker, details label, and details popup
 
36
        this.createMarker();
 
37
        this.createLabel();
 
38
        this.createPopup();
 
39
    },
 
40
    
 
41
    /**
 
42
     * @description Creates the marker and adds it to the viewport
 
43
     */
 
44
    createMarker: function () {
 
45
        //Create container
 
46
        this.pos = {
 
47
            x: this.sunX * this.rsun,
 
48
            y: this.sunY * this.rsun
 
49
        };
 
50
        
 
51
        this.container = $('<div class="event" style="left: ' + this.pos.x + 'px; top: ' + this.pos.y + 'px;"></div>');
 
52
        
 
53
        this.eventLayer.domNode.append(this.container);
 
54
 
 
55
        //make event-type CSS-friendly
 
56
        var cssType = this.type.replace(/ /g, "_");
 
57
 
 
58
        this.marker = $('<div class="event-marker"></div>');
 
59
        this.marker.css('background', 'url(resources/images/events/' + this.eventLayer.icon + "-" + cssType + '.png)');
 
60
        
 
61
        this.container.append(this.marker);
 
62
    },
 
63
    
 
64
    /**
 
65
     * @description Creates a small block of text which is displayed when the user pressed the "d" key ("details").
 
66
     */
 
67
    createLabel: function () {
 
68
        var labelText, eventDate, timeDiff, display;
 
69
 
 
70
        display = this.eventLayer.viewport.controller.eventLayers.getLabelVisibility();
 
71
 
 
72
        labelText = this.getLabelText(this.type);
 
73
 
 
74
        //Determine time difference between desired time and event time
 
75
        eventDate = getUTCTimestamp(this.time.startTime);
 
76
        timeDiff  = eventDate - this.appDate.getTime();
 
77
        
 
78
        //Create a hidden node with the events ID to be displayed upon user request
 
79
        this.label = $('<div class="event-label" style="display: ' + display + ';">' + labelText + '</div>');
 
80
        
 
81
        //Adjust style to reflect time difference
 
82
        if (timeDiff < 0) {
 
83
            this.label.addClass("timeBehind");
 
84
        }
 
85
        else if (timeDiff > 0) {
 
86
            this.label.addClass("timeAhead");
 
87
        }
 
88
        
 
89
        this.container.append(this.label);
 
90
    },
 
91
    
 
92
    /**
 
93
     * @description Choses the text to display in the details label based on the type of event
 
94
     * @param {String} eventType The type of event for which a label is being created
 
95
     */
 
96
    getLabelText: function (eventType) {
 
97
        var labelText = null;
 
98
        
 
99
        switch (eventType) {
 
100
 
 
101
        case "Active Region":
 
102
            labelText = this.eventId;
 
103
            break;
 
104
        case "CME":
 
105
            labelText = this.time.startTime;
 
106
            break;
 
107
        case "Type II Radio Burst":
 
108
            labelText = this.time.startTime;
 
109
            break;
 
110
        default:
 
111
            labelText = this.time.startTime;
 
112
            break;
 
113
        }
 
114
        
 
115
        return labelText;
 
116
    },
 
117
    
 
118
    /**
 
119
     * @description Creates a popup which is displayed when the event marker is clicked
 
120
     */
 
121
    createPopup: function () {
 
122
        var content, tooltips = this.eventLayer.viewport.controller.tooltips;
 
123
 
 
124
        // Add required parameters
 
125
        content = "<div class='event-popup-container'><strong>" + this.eventId + "</strong><br>" +
 
126
                  "<p>" + this.catalogName + "</p><br><strong>start:</strong> " + this.time.startTime + "<br>" +
 
127
                  "<strong>end:</strong> " + this.time.endTime + "<br><br>";
 
128
        
 
129
        // Add custom parameters
 
130
        $.each(this.properties, function (key, value) {
 
131
            content += "<strong>" + key + ":</strong> " + value;
 
132
            if (key.search(/angle/i) !== -1) {
 
133
                content += "&deg;";
 
134
            }
 
135
            
 
136
            content += "<br>";
 
137
        });
 
138
        
 
139
        content += "<strong>Source:</strong> <a href='" + this.sourceUrl + "' class='event-url' target='_blank'>" +
 
140
                   this.sourceUrl + "</a><br></div>";
 
141
 
 
142
        // Create popup dialog        
 
143
        tooltips.createDialog(this.container, this.type, content);
 
144
    },
 
145
    
 
146
    /**
 
147
     * @description attempts to select an optimal orientation for the event marker popup
 
148
     * (Not yet fully implemented...)
 
149
     */
 
150
    chooseOrientation: function () {
 
151
        var dir, vpCoords, vpWidth, vpHeight, markerCoords, rel, EST_HEIGHT, EST_WIDTH;
 
152
        
 
153
        vpCoords     = $("#helioviewer-viewport").offset();
 
154
        markerCoords = this.container.offset();
 
155
        
 
156
        rel = {
 
157
            top : vpCoords.top  - markerCoords.top,
 
158
            left: vpCoords.left - markerCoords.left
 
159
        };
 
160
        
 
161
        // Estimated marker size
 
162
        EST_WIDTH  = 250;
 
163
        EST_HEIGHT = 250;
 
164
        
 
165
        vpWidth  = $("#helioviewer-viewport").width();
 
166
        vpHeight = $("#helioviewer-viewport").height();
 
167
        
 
168
        if ((vpHeight - rel.top) < EST_HEIGHT) {
 
169
            if ((vpWidth - rel.left) < EST_WIDTH) {
 
170
                dir = "bottomRight";
 
171
            }
 
172
            else { 
 
173
                dir = "bottomLeft";
 
174
            }
 
175
        }
 
176
        else {
 
177
            if ((vpWidth - rel.left) < EST_WIDTH) {
 
178
                dir = "topRight";
 
179
            }
 
180
            else {
 
181
                dir = "topLeft";
 
182
            }
 
183
        }
 
184
        
 
185
        return dir;
 
186
    },
 
187
    
 
188
    /**
 
189
     * @description Removes the EventMarker
 
190
     */
 
191
    remove: function () {
 
192
        this.container.qtip("destroy");
 
193
        this.container.unbind();
 
194
        this.container.remove();
 
195
    },
 
196
 
 
197
     /**
 
198
      * @description Redraws event
 
199
      * @param {Int} rsun The updated solar radius, in pixels.
 
200
      */
 
201
    refresh: function (rsun) {
 
202
        this.rsun = rsun;
 
203
        this.pos = {
 
204
            x: this.sunX * rsun,
 
205
            y: this.sunY * rsun
 
206
        };
 
207
        this.container.css({
 
208
            'left': (this.pos.x - 2) + 'px',
 
209
            'top' : (this.pos.y - 2) + 'px'
 
210
        });
 
211
    }
 
212
});