Define global gistAsync function

Author: razor-x

CHANGELOG.md

@@ -7,6 +7,7 @@ This change log follows the conventions of
 
 ## [Unreleased]
 
+- Define global function `gistAsync()`.
 - Update to jQuery 3.0.0.
 - Update project structure to [makenew/coffeescript-package] v2.2.0.
 - Release on npm.

README.md

@@ -22,8 +22,17 @@ Based on Mark Selby's [async-gists.js].
 
 **Requires jQuery.**
 
-Include `javascripts/main.coffee` however you like,
-or load the compiled file `js/gist-async.min.js`.
+Include `javascripts/main.coffee` however you like
+or load the compiled file `js/gist-async.min.js`,
+then call the global function, e.g.,
+
+```js
+(function (window, document) {
+  document.addEventListener('DOMContentLoaded', function () {
+    window.gistAsync();
+  })
+})(window, document);
+```
 
 Example markup:
 

javascripts/main.coffee

@@ -13,63 +13,64 @@
 #
 'use strict'
 
-$ = jQuery
-$ ->
-  GIST_HOST = 'https://gist.github.com'
-  elements = $('div[data-gist]')
-  gists = {}
-  code = []
-  stylesheets = []
+this.gistAsync = ->
+  $ = jQuery
+  $ ->
+    GIST_HOST = 'https://gist.github.com'
+    elements = $('div[data-gist]')
+    gists = {}
+    code = []
+    stylesheets = []
 
-  # The asynchronous asset loader function.
-  loader = (url) ->
-    link = document.createElement 'link'
-    link.type = 'text/css'
-    link.rel = 'stylesheet'
-    link.href = url
-    document.getElementsByTagName('head')[0].appendChild link
-    return
+    # The asynchronous asset loader function.
+    loader = (url) ->
+      link = document.createElement 'link'
+      link.type = 'text/css'
+      link.rel = 'stylesheet'
+      link.href = url
+      document.getElementsByTagName('head')[0].appendChild link
+      return
 
-  elements.addClass('loading')
+    elements.addClass('loading')
 
-  # Get elements referencing a gist
-  # and build a gists hash referencing
-  # the elements that use it.
-  elements.each (index, element) ->
-    element = $(element)
-    gist = element.data 'gist'
-    gists[gist] ?= targets: []
-    gists[gist].targets.push element
+    # Get elements referencing a gist
+    # and build a gists hash referencing
+    # the elements that use it.
+    elements.each (index, element) ->
+      element = $(element)
+      gist = element.data 'gist'
+      gists[gist] ?= targets: []
+      gists[gist].targets.push element
 
-  # Load the gists.
-  $.each gists, (id, data) ->
-    $.getJSON "#{GIST_HOST}/#{id}.json?callback=?", (data) ->
-      gist = gists[id]
-      gist.data = data
+    # Load the gists.
+    $.each gists, (id, data) ->
+      $.getJSON "#{GIST_HOST}/#{id}.json?callback=?", (data) ->
+        gist = gists[id]
+        gist.data = data
 
-      # Only insert the stylesheets once.
-      stylesheet = gist.data.stylesheet
-      if stylesheets.indexOf(stylesheet) < 0
-        stylesheets.push stylesheet
-        loader(stylesheet)
+        # Only insert the stylesheets once.
+        stylesheet = gist.data.stylesheet
+        if stylesheets.indexOf(stylesheet) < 0
+          stylesheets.push stylesheet
+          loader(stylesheet)
 
-      div = gist.data.div
-      gist.files = $(div).find('.gist-file')
-      gist.outer = $(div).first().html('')
+        div = gist.data.div
+        gist.files = $(div).find('.gist-file')
+        gist.outer = $(div).first().html('')
 
-      # Iterate elements refering to this gist.
-      $(gist.targets).each (index, target) ->
-        file = target.data 'gist-file'
-        if file
-          outer = gist.outer.clone()
-          inner = "<div class=\"gist-file\">" \
-            + $(gist.files.get(gist.data.files.indexOf(file))).html() \
-            + "</div>"
-          outer.html inner
-        else
-          outer = $(div)
+        # Iterate elements refering to this gist.
+        $(gist.targets).each (index, target) ->
+          file = target.data 'gist-file'
+          if file
+            outer = gist.outer.clone()
+            inner = "<div class=\"gist-file\">" \
+              + $(gist.files.get(gist.data.files.indexOf(file))).html() \
+              + "</div>"
+            outer.html inner
+          else
+            outer = $(div)
 
-        outer.hide()
-        target.fadeOut 'fast', ->
-          $(this).replaceWith(outer)
-          outer.fadeIn()
+          outer.hide()
+          target.fadeOut 'fast', ->
+            $(this).replaceWith(outer)
+            outer.fadeIn()