crystal.events.js

/*

    Events Widget

    Author:     Ross Dallaire, Andrew Anderson
    Website:    crystalcommerce.com

    Google Calendar API v3 Refrence
    https://developers.google.com/google-apps/calendar/v3/reference/
    https://developers.google.com/google-apps/calendar/v3/reference/calendars#methods

    Tabs widget uses Tably 2.x.x

*/

;(function($, window, document, undefined) {

    'use strict';

    Crystal.libs.events = {

        name: 'events',

        version: '2.0.1',

        options: {

            calendarID:     'crystalcommerce.com_3jt346poedrt6dfnf9prbhf018@group.calendar.google.com',

            apiKey:         'AIzaSyDOv5lG5PPQHaWhOFqzSL3EcAx2cAScKk0',

            eventNum:       20,             // number of events,

            linkEvent:      false,          // links the event heading to the event page

            singleEvents:   false,          // show recurring events as individual

            style:          'scroller',     // style of the events

            tabs:           false,          // set to boolean or array of tabs

            // ------ future features ---------------------------------------------

            tabsAll:        false,          // NOT WORKING YET - show all events in a tab

            loader:         false,          // NOT WORKING YET

            newEvents:      true,           // NOT WORKING YET
            // show a 'new' tag next to events created in the past few weeks

        },

        init: function(scope, method, settings) {

            // Bind events, merge settings with options
            this.bindings(method, settings);

            // start it up
            this.getEvents();

        },

        getEvents : function() {

            var self = this;

            // used to determine which function to use on the ajax call
            var builder;

            // Reference to the plugin
            var plugin  = Crystal.libs.events;

            // if tabs are enabled go to the tab builder on success
            if(plugin.settings.tabs !== false) {

                builder = plugin.buildTabWidget;

            } else {

                builder = plugin.buildWidget;

            }

            // Get todays date
            var date    = new Date();

            // base url for google calendar api
            var base = 'https://www.googleapis.com/calendar/v3/calendars/';

            // build the url for the json request
            var url =  base + plugin.settings.calendarID +
            '/events?singleEvents=' +  plugin.settings.singleEvents +
            '&orderBy=startTime&maxResults=' + plugin.settings.eventNum +
            '&timeMin=' + date.toISOString() +
            '&key=' + plugin.settings.apiKey;

            // bet the json object from the request url
            $.ajax({
                url:        url,
                dataType:   'json',
                success:    builder,
                fail:       plugin.eventError,
                error:      plugin.eventError
            });

        },

        buildWidget : function(data) {

            var plugin = Crystal.libs.events;

            // get the style of the plugin
            var style = plugin.settings.style;

            // add style class to the container
            $(plugin.scope).addClass(style);

            var container = '<ul class="events"></div>';

            // add events container to the scope
            $(plugin.scope).append(container);

            var i = 0;

            // this gets set later
            var eventTitle, startDate, endTime;

            //Loop through top level items (aka events)
            for(i in data['items']) {

                //Define a single item
                var event = data['items'][i];

                // format the dates
                startDate = moment(event.start.dateTime).format('MMM Do h:mm a');
                endTime = moment(event.end.dateTime).format('h:mm a');

                // if link title is set change the title markup
                if(plugin.settings.linkEvent === true) {

                    eventTitle = '<a href="' + event.htmlLink + '" target="_blank">' + event.summary + '</a>';

                } else {

                    eventTitle = event.summary;

                }

                // output for each event
                var eventOutput = '<li class="event">' +
                '<h5 class="title">' + eventTitle + '</h5>' +
                '<p class="time-date">' + startDate + ' - ' + endTime + '</p>' +
                '<p class="description">' + event.description + '</p>' +
                '</li>';

                // append the event to the container
                $(plugin.scope).find('ul.events').append(eventOutput);

            }

        },

        buildTabWidget : function(data) {

            // quicker way to get to the root plugin
            var plugin = Crystal.libs.events;

            // each of the events in the calendar
            var events = data.items;

            // set tabs to the settings object
            var tabs = plugin.settings.tabs;

            // empty object for events in each tab
            var tabEvents = {};

            // create some variables that get assigned later
            var eventTitle, startDate, endTime;

            // add classes to the container
            $(plugin.scope).addClass(plugin.settings.style);
            $(plugin.scope).addClass('tabs-enabled');

            // create containers for the tabs and tab content
            $(plugin.scope).append('<nav class="event-tabs"></nav>');
            $(plugin.scope).append('<div class="event-tabs-content"></div>');

            // create tabs and containers for each tab
            $.each(tabs, function(i, tab) {

                // output each tab
                $('.event-tabs', plugin.scope).append('<a href="javascript:void(0);" class="' +
                    tab.tabClass + ' tab-trigger">' + tab.title + '</a>');

                // output each tab section
                $('.event-tabs-content', plugin.scope).append('<ul class="' + tab.tabClass + ' tab-panel"></ul>');

            });

            // init tably for the tabbed events
            $(plugin.scope).crystal('tably', {

                // Tab settings
                trigger     : '.tab-trigger',
                panel       : '.tab-panel',
                active      : 'active',
                effect      : 'fade',
                start       : 1,

                // Tably's Loader Settings
                loader      : 'stretch',
                speed       : 'medium',

                // Cookie settings
                save        : false,

                ajaxify     : {
                    cached  : false,
                    key     : 'tabKey'
                }

            });

            // start loop through all events
            $.each(events, function(i, event) {

                var end = false;

                // format dates
                startDate = moment(event.start.dateTime).format('MMM Do h:mm a');
                endTime = moment(event.end.dateTime).format('h:mm a');

                var eventDate = startDate + ' - ' + endTime;

                // loop through each of the tabs
                $.each(tabs, function(i, tab) {

                    // loop through each of the tabs terms
                    $.each(tab.terms, function(j, term){

                        // check to see if term is matched in the event title
                        if((new RegExp(term, 'i')).test(event.summary)) {

                            // if link title is set change the title markup
                            if(plugin.settings.linkEvent === true) {

                                eventTitle = '<a href="' + event.htmlLink + '" target="_blank">' + event.summary + '</a>';

                            } else {

                                eventTitle = event.summary;

                            }

                            // build output
                            var eventOutput = '<li class="event">' +
                                '<h5 class="title">' + eventTitle + '</h5>' +
                                '<p class="time-date">' + startDate + ' - ' + endTime + '</p>' +
                                '<p class="description">' + event.description + '</p>' +
                                '</li>';

                            // append the output to the tab content
                            $('ul.' + tab.tabClass, plugin.scope).append(eventOutput);

                            // end the loop when added and matched
                            end = true;
                            return false;

                        }

                    });

                    // stop the loops if matched
                    if(end) return false;

                });

            });

        },

        // if theres an error or something wrong
        eventError : function () {

            var plugin  = Crystal.libs.events;

            var message = 'Could not find events';

            $(plugin.scope).append(message);

        },

        events: {

            attach: function() {}

        },

    reflow: function() {}

    };

})(jQuery, this, this.document);