HelpWidget JavaScript

helpwidget.js

(function(wndw) {
/*
This library pops up a help window when the user clicks on the specified element.
For example, if you have a help tab like this:
<div class="course-help-widget-tab" 
  data-helpwidget data-helpwidget-link-docs="http://support.coursera.org" data-helpwidget-linkdiscuss="http://class.coursera.org/mooc/"
  tabindex="0" role="button" aria-haspopup="true" aria-expanded="false">Help
</div>

And you call this JS:
$("[data-helpwidget]").each(function() {
    window.HelpWidget(this);
});

When the user clicks that, it will look for links with the specified link filter and rel="help" or "discuss", and pop up a helpful window:
<a data-coursera-admin-helpwidget-link rel="help" href="http://support.coursera.org/customer/portal/articles/593953#export_statistics" title="Export Statistics">Learn more</a></strong> about the export.
<a data-coursera-admin-helpwidget-link rel="discuss" href='https://class.coursera.org/mooc/forum/tag?name=Stats&forum_id=7' style='display:none;'>Discuss</a>
*/
  function Module($, Popup, DataAttributes, popupTemplate) {

    var _private = {

      defaults: {
        // Default links in case none are found
        "link.help": "",
        "link.discuss": "",

        // Only match links with this data attribute
        "link.filter": "helpwidget-link", 

        // Defaults for popup
        "direction": "ne",  
        "offset.y": "10",
        "offset.x": "0"
      },

      makeHelpWidget: function(el, options) {
        var $el = $(el);
        var widget = _private.getHelpWidget($el, options);

        if (!widget) {
          widget = new HelpWidget($el, options);
          $el.data("helpwidget.me", widget);
        }
        return widget;
      },

      getHelpWidget: function(el, options) {
        var widget = $(el).data('helpwidget.me');

        if (widget && widget.constructor == HelpWidget.prototype.constructor) {
          if (options) return widget.customize(options);
          else return widget;
        } else {
          return null;
        }
      },

      findLink: function(rel) {
        var selector = 'a[rel=' + rel + '][data-' + this.options['link.filter'] + ']';
        return $('body').find(selector);
      },

      findLinks: function(rel) {
        var links = [];
        var $links = _private.findLink.call(this, rel);
        $links.each(function() {
          links.push({url: $(this).attr('href'), title: $(this).attr('title')})
        });
        if (links.length === 0 && this.options['link.' + rel]) {
          links.push({url: this.options['link.' + rel]});
        }
        return links;
      },

      createHelpContent: function() {
        var docLinks = _private.findLinks.call(this, 'help');
        var discussLinks = _private.findLinks.call(this, 'discuss');
        return popupTemplate({docsLinks: docLinks, discussLinks: discussLinks});
      }
    };


    var HelpWidget = function(el, options) {
      var that = this;
      this.$el = $(el);
      this.customize(options);
      this.tracker = options && options.tracker || [];

      var popup;
      this.$el.on("click.helpwidget", function() {
        // We fetch help content on demand in case theres more added later
        if (popup && popup.isOpen()) {
          popup.close();
        } else if (popup) {
          that.tracker.push(['helpwidget.click.after', that.options['link.filter']]);
          popup.open($(this));
        } else {
          that.tracker.push(['helpwidget.click.first', that.options['link.filter']]);
          popup = Popup(
          _private.createHelpContent.call(that),
          {direction: that.options['direction'],
          'offset.y': that.options['offset.y'],
          'offset.x': that.options['offset.x']});
          popup.$el.on('click', 'a', function() {
            that.tracker.push(['helpwidget.link.click', $(this).attr('href')]);
          });
          popup.open($(this));
        }
      });
    };

    HelpWidget.prototype.customize = function(options) {
      this.options = _.extend({}, DataAttributes.parse(this.$el, _private.defaults, 'data-helpwidget-'), options);
    };

    /**
     * Factory method.
     *
     * @param {DomNode} el The DOM node to turn into the bottom tab
     * @param {object} options {tracker:[], all the defaults}
     *
     * @return {module}
     */
    var external = function(el, options) {
      return _private.makeHelpWidget(el, options);
    };

    return external;
  }


  if (typeof define === "function" && define.amd) {
    define([
      "jquery",
      "js/lib/popups",
      "js/lib/data.attributes",
      "bundles/helpwidget/popup.html"
      ], function ($, Popup, DataAttributes, popupTemplate) {
      return Module($, Popup, DataAttributes, popupTemplate);
    });
  } else {
    window.HelpWidget = Module(wndw.$, window.Popup, window.DataAttributes, window.jade.templates['bundles.helpwidget.popup']);
  }

})(window);