~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to lib/helioviewer/MessageConsole.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:
1
1
/**
2
2
 * @fileOverview Contains the "MessageConsole" class definition.
3
 
 * @author <a href="mailto:keith.hughitt@nasa.gov">Keith Hughitt</a>
 
3
 * @author <a href="mailto:keith.hughitt@gmail.com">Keith Hughitt</a>
4
4
 */
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 document, $, Class, window */
8
 
"use strict";
9
 
var MessageConsole = Class.extend(
10
 
    /** @lends MessageConsole.prototype */
11
 
    {
 
5
 /*global document, UIElement, Effect, $, Class, Element, Event, window */
 
6
var MessageConsole = Class.create(UIElement ,
 
7
        /** @lends MessageConsole.prototype */
 
8
        {
12
9
    /**
13
10
     * @constructs
14
11
     * @description Creates a new MessageConsole.<br><br>
15
12
     * MessageConsole Provides a mechanism for displayed useful information to the user.
16
 
     * For ease of use, the class provides methods comparable to Firebug's for outputting
17
 
     * messages of different natures: "log" for generic unstyled messages, or for debbuging
18
 
     * use, "info" to inform the user of some interesting change or event, and "warning" and
19
 
     * "error" for getting the user's attention.
 
13
         * For ease of use, the class provides methods comparable to Firebug's for outputting
 
14
         * messages of different natures: "log" for generic unstyled messages, or for debbuging
 
15
         * use, "info" to inform the user of some interesting change or event, and "warning" and
 
16
         * "error" for getting the user's attention.
20
17
     * @param {Object} controller A reference to the Helioviewer (controller)
 
18
     * @param {String} container The id of the container for messages to be displayed in
 
19
     * @param {String} viewport  The id of the viewport container
21
20
     */
22
 
    init: function (controller) {
 
21
    initialize: function (controller, container, viewport) {
23
22
        this.controller = controller;
 
23
        this.console =  $(container);
 
24
        this.viewportId = viewport;
24
25
    },
25
26
    
26
 
    /**
27
 
     * @description Logs a message to the message-console
28
 
     * @param {String} msg Message to display
29
 
     */
 
27
        /**
 
28
         * @description Logs a message to the message-console
 
29
         * @param {String} msg Message to display
 
30
         */
30
31
    log: function (msg) {
31
 
        $.jGrowl(msg);
32
 
    },
33
 
    
34
 
    /**
35
 
     * @description Makes a jGrowl notification and allows options to modify the notification
36
 
     * @param {Object} msg
37
 
     * @param {Object} options
38
 
     */
39
 
    info: function (msg, options) {
40
 
        $.jGrowl(msg, options);
41
 
    },
42
 
 
43
 
 
44
 
    progress: function (msg) {
45
 
        $.jGrowl(msg);    
46
 
    },
47
 
    
48
 
    /**
49
 
     * @description Displays a warning message in the message console
50
 
     * @param {String} msg Message to display
51
 
     */
 
32
        this.console.update(new Element('p', {style: 'color: #6495ED; font-weight: bold;'}).insert(msg));
 
33
                var self = this,
 
34
                trash = new Effect.Appear(this.console, { duration: 3.0 });
 
35
    
 
36
        //Hide the message after several seconds have passed
 
37
        window.setTimeout(function () {
 
38
            var trash = new Effect.Fade(self.console, { duration: 3.0 });
 
39
        }, 6500);
 
40
    },
 
41
    
 
42
    //info: function (msg) {
 
43
    //},
 
44
    
 
45
        /**
 
46
         * @description Displays a warning message in the message console
 
47
         * @param {String} msg Message to display
 
48
         */
52
49
    warn: function (msg) {
53
 
        $.jGrowl(msg);
 
50
        this.console.update(new Element('p', {style: 'color: yellow; font-weight: bolder;'}).insert(msg));
 
51
                var self = this,
 
52
                trash = new Effect.Appear(this.console, { duration: 3.0 });
 
53
    
 
54
        //Hide the message after several seconds have passed
 
55
        window.setTimeout(function () {
 
56
            var trash = new Effect.Fade(self.console, { duration: 3.0 });
 
57
        }, 6500);        
54
58
    },
55
59
    
56
 
    /**
57
 
     * @description Displays an error message in the message console
58
 
     * @param {String} msg Message to display
59
 
     */
 
60
        /**
 
61
         * @description Displays an error message in the message console
 
62
         * @param {String} msg Message to display
 
63
         */
60
64
    error: function (msg) {
61
 
        $.jGrowl(msg);
62
 
        $("#helioviewer-viewport-container-outer").effect("shake", { times: 1 });
 
65
        this.console.update(new Element('p', {style: 'color: red'}).insert(msg));
 
66
        var self = this,
 
67
                trash = new Effect.Shake(this.viewportId, {distance: 15, duration: 0.1});
 
68
        trash = new Effect.Appear(this.console, { duration: 3.0 });
 
69
    
 
70
        //Hide the message after several seconds have passed
 
71
        window.setTimeout(function () {
 
72
                        var trash = new Effect.Fade(self.console, { duration: 3.0 });
 
73
        }, 6500);
63
74
    },
64
75
    
65
 
    /**
66
 
     * @description Displays message along with a hyperlink in the message console
67
 
     * @param {String} msg Message to display
68
 
     * @param {String} Hyperlink text
69
 
     * Note: Event-handler should be used to handle hyperlink clicks. The link address thus is set to "#".
70
 
     */
 
76
        /**
 
77
         * @description Displays message along with a hyperlink in the message console
 
78
         * @param {String} msg Message to display
 
79
         * @param {String} Hyperlink text (Note: Event-handler should be used to handle hyperlink clicks. The link address thus is set to "#")
 
80
         */
71
81
    link: function (msg, linkText) {
72
 
        var linkId, html;
73
 
            
74
 
        // Generate a temporary id
75
 
        linkId = 'link-' + this.controller.date.getTime() / 1000;
76
 
        
77
 
        // Html
78
 
        html = "<a href='#' id='" + linkId + "' class='message-console-link'>" + linkText + "</a>" + msg;
79
 
        
80
 
        $.jGrowl(html, {sticky: true});
 
82
                var self = this,
 
83
                        linkId, wrapper, link, trash;
 
84
                        
 
85
        // Generate a temporary id
 
86
        linkId = 'link-' + this.controller.date.getTime() / 1000;
 
87
        
 
88
        // Html
 
89
        wrapper = new Element('span');
 
90
        link = new Element('a', {href: '#', id: linkId, 'class': 'message-console-link'}).update(linkText);
 
91
        wrapper.insert(msg);
 
92
        wrapper.insert(link);
 
93
        
 
94
        this.console.update(new Element('p', {style: 'color: #6495ED;'}).insert(wrapper));
 
95
        trash = new Effect.Appear(this.console, { duration: 2.0 });
 
96
    
 
97
        //For downloads, leave the message up until the user clicks on the link provided.
 
98
        //Note: another possibility is to add a "close" option.
 
99
        Event.observe(linkId, 'click', function () {
 
100
                        self.console.hide();            
 
101
        });
81
102
        
82
103
        return linkId;
83
104
    }