Make Gists a deferred package

src/app/deferred-atom-package.coffee

@@ -1,4 +1,5 @@
 AtomPackage = require 'atom-package'
+_ = require 'underscore'
 
 module.exports =
 class DeferredAtomPackage extends AtomPackage
@@ -10,8 +11,13 @@ class DeferredAtomPackage extends AtomPackage
 
   activate: (@rootView, @state) ->
     @instance = null
-    for event in @loadEvents
-      @rootView.command event, (e) => @onLoadEvent(e, @getInstance())
+    onLoadEvent = (e) => @onLoadEvent(e, @getInstance())
+    if _.isArray(@loadEvents)
+      for event in @loadEvents
+        @rootView.command(event, onLoadEvent)
+    else
+      for event, selector of @loadEvents
+        @rootView.command(event, selector, onLoadEvent)
     this
 
   deactivate: -> @instance?.deactivate?()

src/packages/gists/index.coffee

@@ -1 +1,12 @@
-module.exports = require './lib/gists'
+DeferredAtomPackage = require 'deferred-atom-package'
+
+module.exports =
+class GistsPackage extends DeferredAtomPackage
+
+  loadEvents:
+    'gist:create': '.editor'
+
+  instanceClass: 'gists/lib/gists'
+
+  onLoadEvent: (event, instance) ->
+    instance.createGist(event.currentTargetView())

src/packages/gists/lib/gists.coffee

@@ -2,9 +2,11 @@ $ = require 'jquery'
 {$$} = require 'space-pen'
 
 module.exports =
-  activate: (rootView) ->
-    rootView.command 'gist:create', '.editor', (e) =>
-      @createGist(e.currentTargetView())
+class Gists
+
+  @activate: (rootView) -> new Gists(rootView)
+
+  constructor: (@rootView) ->
 
   createGist: (editor) ->
     gist = { public: false, files: {} }
@@ -17,10 +19,13 @@ module.exports =
       dataType: 'json'
       contentType: 'application/json; charset=UTF-8'
       data: JSON.stringify(gist)
-      success: (response) ->
+      success: (response) =>
         pasteboard.write(response.html_url)
         notification = $$ ->
           @div class: 'gist-notification', =>
-            @span "Gist #{response.id} created"
-        rootView.append(notification.hide())
-        notification.fadeIn().delay(1800).fadeOut(complete: -> $(this).remove())
+            @div class: 'message-area', =>
+              @span "Gist #{response.id} created", class: 'message'
+              @br()
+              @span "The url is on your clipboard", class: 'clipboard'
+        @rootView.append(notification.hide())
+        notification.fadeIn().delay(2000).fadeOut(complete: -> $(this).remove())

src/packages/gists/spec/gists-spec.coffee

@@ -7,7 +7,7 @@ describe "Gists package", ->
 
   beforeEach ->
     rootView = new RootView(fixturesProject.resolve('sample.js'))
-    atom.loadPackage('gists')
+    atom.loadPackage('gists').getInstance()
     editor = rootView.getActiveEditor()
     spyOn($, 'ajax')
 
@@ -45,7 +45,7 @@ describe "Gists package", ->
 
         it "flashes that the Gist was created", ->
           expect(rootView.find('.gist-notification')).toExist()
-          expect(rootView.find('.gist-notification').text()).toBe 'Gist 1 created'
+          expect(rootView.find('.gist-notification .message').text()).toBe 'Gist 1 created'
           advanceClock(2000)
           expect(rootView.find('.gist-notification')).not.toExist()
 

src/packages/gists/stylesheets/gists.css

@@ -7,13 +7,21 @@
   padding-left: 5px;
   padding-right: 10px;
   -webkit-box-shadow: 0px 0px 5px 5px #222;
-  color: #FFF;
+  color: #BBB;
   background-color: #444;
 }
 
-.gist-notification span {
-  position: relative;
-  top: -8px;
+.gist-notification .message-area {
+  float: right;
+  padding-top: 11px;
+}
+
+.gist-notification .message {
+  font-size: 13px;
+}
+
+.gist-notification .clipboard {
+  font-size: 11px;
 }
 
 .gist-notification:before {