← Back to branch summary

~keith-hughitt/helioviewer.org/2.0

« back to all changes in this revision

Viewing changes to src/UI/TooltipHelper.js

  • Committer: Keith Hughitt
  • Date: 2010-04-17 16:54:20 UTC
  • Revision ID: keith.hughitt@nasa.gov-20100417165420-z3dpv7j9hul14785
Helioviewer.org 2.0.2

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/UI/TooltipHelper.js
 
1
/**
 
2
 * @author <a href="mailto:keith.hughitt@nasa.gov">Keith Hughitt</a> 
 
3
 * @fileOverview This class acts as a simple wrapper around the qTip library and helps
 
4
 * to normalize behavior across the 1.0 and 1.1 series.
 
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, $, window, loadCSS */
 
9
"use strict";
 
10
 
 
11
var TooltipHelper = Class.extend(
 
12
    /** @lends TooltipHelper.prototype */
 
13
    {
 
14
    /**
 
15
     * @description Creates a new TooltipHelper. 
 
16
     * @param {Boolean} Enable legacy support
 
17
     * @constructs 
 
18
     */ 
 
19
    init: function (legacyMode) {
 
20
        if (legacyMode === undefined) {
 
21
            this.legacyMode = false;
 
22
        }
 
23
        else {
 
24
            this.legacyMode = legacyMode;
 
25
        }
 
26
        
 
27
        if (this.legacyMode) {
 
28
            loadCSS("resources/css/tooltips-LEGACY.css");
 
29
            this._setupTooltipStyles();
 
30
        }           
 
31
        else {
 
32
            loadCSS("lib/jquery.qtip-nightly/jquery.qtip.css");
 
33
            loadCSS("resources/css/tooltips.css");
 
34
        } 
 
35
    },
 
36
    
 
37
    /**
 
38
     * @description Creates a simple informative tooltip
 
39
     */    
 
40
    createTooltip: function (selector, direction) {
 
41
        if (direction === undefined) {
 
42
            direction = 'topLeft';
 
43
        }
 
44
        
 
45
        if (this.legacyMode) {
 
46
            this._createLegacyTooltip(selector, direction);
 
47
        }
 
48
        else {
 
49
            this._createTooltip(selector, direction);
 
50
        }
 
51
    },
 
52
    
 
53
    /**
 
54
     * @description Creates a more complex dialog used for EvenMarker meta information
 
55
     */
 
56
    createDialog: function (container, title, text) {
 
57
        if (this.legacyMode) {
 
58
            this._createLegacyDialog(container, title, text);
 
59
        }
 
60
        else {
 
61
            this._createDialog(container, title, text);
 
62
        }
 
63
    },
 
64
    
 
65
    /**
 
66
     * @description qTip 1.1x simple tooltips
 
67
     * @param {Object} selector
 
68
     * @param {Object} text
 
69
     */
 
70
    _createTooltip: function (selector, direction) {
 
71
        // use e.attr('title') to manually retrieve and set title text
 
72
    },
 
73
    
 
74
    /**
 
75
     * @description qTip 1.1x dialogs
 
76
     * @param {Object} container
 
77
     * @param {Object} title
 
78
     * @param {Object} text
 
79
     */
 
80
    _createDialog: function (container, title, text) {
 
81
        container.qtip({
 
82
            position: {
 
83
                container: container,
 
84
                corner: {
 
85
                    target: 'bottomRight',
 
86
                    tooltip: 'topLeft',
 
87
                    top: 10,
 
88
                    left: 8
 
89
                }
 
90
            },
 
91
            show: 'click',
 
92
            hide: 'click',                        
 
93
            content: {
 
94
                "title": {
 
95
                    "text": title,
 
96
                    "button": false
 
97
                },
 
98
                "text" : text
 
99
            },
 
100
            style: "qtip-helioviewer"
 
101
        });
 
102
    },
 
103
    
 
104
    /**
 
105
     * @description Create a legacy (qTip 1.0) tooltip
 
106
     * @param {Object} selector
 
107
     * @param {Object} text
 
108
     */
 
109
    _createLegacyTooltip: function (selector, direction) {
 
110
        var corner, tip;
 
111
        
 
112
        // Decide on orientation
 
113
        if (direction === "topLeft") {
 
114
            corner = {
 
115
                target: "bottomRight",
 
116
                tooltip: "topLeft" 
 
117
            };
 
118
            tip = "topLeft";
 
119
        }
 
120
        else {
 
121
            corner = {
 
122
                target: "bottomLeft",
 
123
                tooltip: "topRight" 
 
124
            };
 
125
            tip = "topRight";
 
126
        }
 
127
 
 
128
        // Apply settings and create tooltip
 
129
        selector.qtip({
 
130
            position: {
 
131
                adjust: {
 
132
                    x: 4,
 
133
                    y: 6
 
134
                },
 
135
                "corner": corner
 
136
            },
 
137
            style: {
 
138
                name: 'simple',
 
139
                "tip" : tip
 
140
            },
 
141
            hide: {
 
142
                effect: { length: 350 }
 
143
            },
 
144
            api: {
 
145
                onRender: function () { 
 
146
                    var self = this;
 
147
                    self.elements.target.click(function () {
 
148
                        self.hide();
 
149
                    }); 
 
150
                }
 
151
            }
 
152
 
 
153
        });
 
154
    },
 
155
 
 
156
    /**
 
157
     * @description Create a legacy (qTip 1.0) dialog
 
158
     * @param {Object} selector
 
159
     * @param {Object} text
 
160
     */
 
161
    _createLegacyDialog: function (container, title, text) {
 
162
        container.qtip({
 
163
            
 
164
            position: {
 
165
                "container": container,
 
166
                type: 'relative'
 
167
            },
 
168
            show: 'mousedown',
 
169
            hide: 'mousedown',
 
170
            content: {
 
171
                "title": {
 
172
                    "text": title,
 
173
                    "button": "x"
 
174
                },
 
175
                "text" : text
 
176
            },
 
177
            style: {name: "dialog"}
 
178
        });
 
179
    },
 
180
    
 
181
    /**
 
182
     * @description Sets up old-style qTip style methods
 
183
     */
 
184
    _setupTooltipStyles: function () {
 
185
        // Simple tooltips
 
186
        $.fn.qtip.styles.simple = {
 
187
            background: '#FFF',
 
188
            color: '#000',
 
189
            padding: 10, 
 
190
            textAlign: 'center',
 
191
            border: {
 
192
                width: 1,
 
193
                radius: 6,
 
194
                color: '#FFF'
 
195
            }            
 
196
        };
 
197
        
 
198
        // More advanced dialogs
 
199
        $.fn.qtip.styles.dialog = {
 
200
            textAlign: 'left',
 
201
            width: 250,
 
202
            padding: 8,
 
203
            button: {
 
204
                "color": "#FFF"
 
205
            },
 
206
            title: {
 
207
                "background-color": "#909A99"
 
208
            },
 
209
            tip: 'topLeft',
 
210
            border: {
 
211
                width: 1,
 
212
                radius: 6,
 
213
                color: '#6e6e6e'
 
214
            }
 
215
        };
 
216
    }
 
217
});