feat(utils): wrap diffs in a span in browers

abe33 · Nov 12, 2013 · 5360f6e · 5360f6e
1 parent 334411f
commit 5360f6e
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 6 deletions.
diff --git a/css/spectacular.css b/css/spectacular.css
@@ -814,6 +814,28 @@ body {
   border-radius: 3px;
   padding: 1px 3px;
 }
+#viewer .example .diff {
+  display: block;
+  background: #163a4c;
+  padding: 5px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  color: #aac8c8;
+}
+#viewer .example .diff del,
+#viewer .example .diff ins {
+  padding: 2px;
+  text-decoration: none;
+}
+#viewer .example .diff del {
+  background: rgba(255,40,20,0.5);
+}
+#viewer .example .diff ins {
+  background: rgba(100,180,50,0.5);
+}
 .error {
   background: rgba(255,40,20,0.3);
   padding: 5px;

diff --git a/css/spectacular.styl b/css/spectacular.styl
@@ -478,6 +478,22 @@ for state in states
         border-radius 3px
         padding 1px 3px
 
+    .diff
+      display block
+      background dark_blue
+      padding 5px
+      border-radius 4px
+      color medium_gray
+
+      del, ins
+        padding 2px
+        text-decoration none
+
+      del
+        background transparentize(failure, 0.5)
+
+      ins
+        background transparentize(success, 0.5)
 
 .error
   background transparentize(failure, 0.7)

diff --git a/lib/spectacular.js b/lib/spectacular.js
diff --git a/src/utils.coffee b/src/utils.coffee
@@ -93,12 +93,16 @@ spectacular.utils.padRight = (string, pad=4) ->
 spectacular.utils.toggle = (value, c1, c2) -> if value then c2 else c1
 
 spectacular.utils.TAGS = if isCommonJS
+  diffStart: ''
+  diffEnd: ''
   delStart: '\x1B[31m'
   delEnd: '\x1B[39m'
   insStart: '\x1B[32m'
   insEnd: '\x1B[39m'
   space: ''
 else
+  diffStart: '<span class="diff">'
+  diffEnd: '</span>'
   delStart: '<del>'
   delEnd: '</del>'
   insStart: '<ins>'
@@ -312,7 +316,7 @@ spectacular.utils.compare = (actual, value, diff, noMessage=false) ->
     when 'object'
       if utils.isArray actual
         unless noMessage
-          diff.diff = "#{diff.diff}\n\n#{utils.objectDiff actual, value}"
+          diff.diff = utils.TAGS.diffStart + "#{diff.diff}\n\n#{utils.objectDiff actual, value}" + utils.TAGS.diffEnd
         return false if actual.length isnt value.length
 
         for v,i in value
@@ -321,7 +325,7 @@ spectacular.utils.compare = (actual, value, diff, noMessage=false) ->
         return true
       else
         unless noMessage
-          diff.diff = "#{diff.diff}\n\n#{utils.objectDiff actual, value}"
+          diff.diff = utils.TAGS.diffStart + "#{diff.diff}\n\n#{utils.objectDiff actual, value}" + utils.TAGS.diffEnd
         return false if utils.keys(actual).length isnt utils.keys(value).length
 
         for k,v of value
@@ -330,11 +334,12 @@ spectacular.utils.compare = (actual, value, diff, noMessage=false) ->
         return true
     when 'string'
       unless noMessage
-        diff.diff = "#{diff.diff}\n\n'#{utils.stringDiff actual, value}'"
+        diff.diff = utils.TAGS.diffStart + "#{diff.diff}\n\n'#{utils.stringDiff actual, value}'" + utils.TAGS.diffEnd
       actual is value
     else
       actual is value
 
+
 spectacular.utils.findStateMethodOrProperty = (obj, state) ->
   camelizedVersion = "is#{utils.capitalize state}"
   snakedVersion = "is_#{state}"