added (name)-snippet class to snippets, so they can be styled easier …

…by type -- fixes jejacks0n#176

features/regions/editable/inserting_snippets.feature

@@ -25,7 +25,7 @@ Feature:
     And fill in "Favorite Beer" with "Stella"
     And press "Insert Snippet"
     Then the modal window should not be visible
-    And the contents of the editable region should be "this is <div data-version='1' data-snippet='snippet_14' class='mercury-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div><span>simple</span> <b>content</b>"
+    And the contents of the editable region should be "this is <div data-version='1' data-snippet='snippet_14' class='mercury-snippet example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div><span>simple</span> <b>content</b>"
 
 
   Scenario: A user can use the snippet toolbar to remove a snippet
@@ -52,7 +52,7 @@ Feature:
     When I fill in "First Name" with "Jeremy"
     And fill in "Favorite Beer" with "Stella"
     And press "Insert Snippet"
-    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
+    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
 
 
   Scenario: A user can make changes to a snippets options, and they'll be versioned for undo and redo
@@ -63,7 +63,7 @@ Feature:
     And I fill in "First Name" with "Jeremy"
     And fill in "Favorite Beer" with "Stella"
     And press "Insert Snippet"
-    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
+    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
 
     When I edit the snippet
     Then the "First Name" field should contain "Jeremy"
@@ -72,10 +72,10 @@ Feature:
     When fill in "First Name" with "Diesel"
     And fill in "Favorite Beer" with "Bells Hopslam"
     And press "Insert Snippet"
-    Then the content of the editable region should be "<div data-version='3' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Diesel</strong> likes Bells Hopslam</div> <b>content</b>"
+    Then the content of the editable region should be "<div data-version='3' data-snippet='snippet_42' class='mercury-snippet example-snippet' contenteditable='false'><strong>Diesel</strong> likes Bells Hopslam</div> <b>content</b>"
 
     When I click on the "Undo" button
-    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
+    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
 
     When I edit the snippet
     # todo: this is a bug
@@ -84,7 +84,7 @@ Feature:
 
     When I close the modal
     When I click on the "Redo" button
-    Then the contents of the editable region should be "<div data-version='3' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Diesel</strong> likes Bells Hopslam</div> <b>content</b>"
+    Then the contents of the editable region should be "<div data-version='3' data-snippet='snippet_42' class='mercury-snippet example-snippet' contenteditable='false'><strong>Diesel</strong> likes Bells Hopslam</div> <b>content</b>"
 
     When I edit the snippet
     Then the "First Name" field should contain "Diesel"
@@ -93,7 +93,7 @@ Feature:
     When I fill in "First Name" with "Jen"
     And fill in "Favorite Beer" with "Miller High Life"
     And press "Insert Snippet"
-    Then the contents of the editable region should be "<div data-version='4' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Jen</strong> likes Miller High Life</div> <b>content</b>"
+    Then the contents of the editable region should be "<div data-version='4' data-snippet='snippet_42' class='mercury-snippet example-snippet' contenteditable='false'><strong>Jen</strong> likes Miller High Life</div> <b>content</b>"
 
 
 #  Scenario: When a user saves, the snippets should be gone from the html, but the options are serialized

spec/javascripts/mercury/regions/snippetable_spec.js.coffee

@@ -312,7 +312,7 @@ describe "Mercury.Regions.Snippetable.actions", ->
 
       it "finds the snippet by it's identity and replaces it with the new snippet", ->
         @actions['insertSnippet'].call(@region, {value: Mercury.Snippet.find('snippet_1')})
-        expect($('#snippetable_region2').html()).toContain('class="mercury-snippet"')
+        expect($('#snippetable_region2').html()).toContain('class="mercury-snippet example-snippet"')
         expect($('#snippetable_region2').html()).toContain('contenteditable="false"')
         expect($('#snippetable_region2').html()).toContain('data-version="1"')
         expect($('#snippetable_region2').html()).toContain('data-snippet="snippet_1"')

spec/javascripts/mercury/snippet_spec.js.coffee

@@ -35,7 +35,7 @@ describe "Mercury.Snippet", ->
     it "builds an element (in whatever context is provided", ->
       ret = @snippet.getHTML($(document))
       html = $('<div>').html(ret).html()
-      expect(html).toContain('class="mercury-snippet"')
+      expect(html).toContain('class="mercury-snippet foo-snippet"')
       expect(html).toContain('contenteditable="false"')
       expect(html).toContain('data-snippet="identity"')
       expect(html).toContain('data-version="1"')

vendor/assets/javascripts/mercury/snippet.js.coffee

@@ -44,9 +44,12 @@ class @Mercury.Snippet
 
 
   getHTML: (context, callback = null) ->
-    element = jQuery('<div class="mercury-snippet" contenteditable="false">', context)
-    element.attr({'data-snippet': @identity})
-    element.attr({'data-version': @version})
+    element = jQuery('<div>', {
+      class: "mercury-snippet #{@name}-snippet"
+      contenteditable: "false"
+      'data-snippet': @identity
+      'data-version': @version
+    }, context)
     element.html("[#{@identity}]")
     @loadPreview(element, callback)
     return element