WeatherWidget/weatherWidget.js at master · ujavid/WeatherWidget · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
(function($) {
    'use strict';
    jQuery.support.cors = true;

    $.fn.weatherWidget = function(config) {
        config = $.extend({
            zipCode: ''
        }, config);

        var constants = {
            apiURL: 'http://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20location%3D%22{{zipCode}}%22&format=json',
            loadingTemplate: '<div class="weather-widget-loading">Loading...</div>',
            errorTemplate: '<div class="weather-widget-error"><strong>Error:</strong><br/>{{errorMessage}}</div>',
            htmlTemplate: '<div class="weather-widget-title">{{title}}</div>\
                           <div class="weather-widget-current-conditions">\
                               <div class="weather-widget-current-temp">{{currentTemp}}&deg;</div>\
                               <div class="weather-widget-current-image-container">\
                                   <div class="weather-widget-current-image"><img src="{{imageURL}}" /></div>\
                                   <div class="weather-widget-current-image-text">{{imageText}}</div>\
                               </div>\
                           </div>\
                           <div class="weather-widget-forecast">\
                               {{forecastItems}}\
                           </div>',
            forecastItemTemplate: '<div class="weather-widget-forecast-item">\
                                       <div class="weather-widget-forecast-day">{{forecastDay}}</div>\
                                       <div class="weather-widget-forecast-temp">{{forecastHigh}}&deg; / {{forecastLow}}&deg;</div>\
                                   </div>'
        };

        var init = function(i, element) {
            var $element = $(element);
            $element.addClass('weather-widget');
            $element.html(constants.loadingTemplate);
            process($element);
        }

        var process = function($element) {
            $.ajax({
                type: 'GET',
                url: constants.apiURL.replace('{{zipCode}}', config.zipCode),
                dataType: 'json',
                success: function(data) {
                    if (data.query && data.query.count > 0 && data.query.results && data.query.results.channel) {
                        var item = data.query.results.channel.item;
                        if (item && item.forecast && item.forecast.length == 5) {
                            render($element, item);
                        } else if (item && item.title) {
                            render($element, false, item.title);
                        } else {
                            render($element, false, "Weather information was not found.");
                        }
                    } else {
                        render($element, false, "Weather information was not found.");
                    }

                },
                error: function(data) {
                    render($element, false);
                }
            });
        }

        var getTitle = function(data) {
            if (data == null || typeof data != 'string') {
                return '';
            }

            var start = data.indexOf('Conditions for');
            if (start == -1) {
                return '';
            }
            start += 15;

            var end = data.indexOf(' at ');
            if (end == -1 || end <= start) {
                return '';
            }

            return data.substring(start, end);
        }

        var getImageURL = function(data) {
            var match = data.match(/src\s*=\s*"(.+?)"/i);
            return match && match.length > 1 ? match[1] : '';
        }

        var render = function($element, item, errorMessage) {
            var html = '';
            if (item === false) {
                errorMessage = errorMessage ? errorMessage : 'Weather data could not be loaded.';
                html = constants.errorTemplate.replace("{{errorMessage}}", errorMessage);
            } else {
                var title = getTitle(item.title);
                var imageURL = getImageURL(item.description);

                var forecastItems = '';
                for (var i = 0; i < item.forecast.length; i++) {
                    var forecast = item.forecast[i];
                    forecastItems += constants.forecastItemTemplate
                                         .replace("{{forecastDay}}", forecast.day)
                                         .replace("{{forecastHigh}}", forecast.high)
                                         .replace("{{forecastLow}}", forecast.low);
                }

                html = constants.htmlTemplate
                           .replace("{{title}}", title)
                           .replace("{{currentTemp}}", item.condition.temp)
                           .replace("{{imageURL}}", imageURL)
                           .replace("{{imageText}}", item.condition.text)
                           .replace("{{forecastItems}}", forecastItems);
            }

            $element.html(html);
        }

        return this.each(init);
    }
})(jQuery);