Skip to content
This repository
Browse code

You can now add whitespace in and around tags easily.

  • Loading branch information...
commit 7df30e5a2209317e576d158ca6c3f9ed55b72e4d 1 parent 20cf931
Aaron Blohowiak authored May 08, 2011
20  README.markdown
Source Rendered
@@ -170,7 +170,27 @@ If you want to have comments that will be in the compiled JS function but *NOT*
170 170
 
171 171
 If you want an HTML comment that **WILL** be in the final HTML, begin with `/`
172 172
 
  173
+## Whitespace
173 174
 
  175
+By default, Haml.js **has no whitespace between tags**.  In this way, Haml.js is the opposite of Haml in Ruby.  You can insert whitespace around or inside tags with `>` and `<`, respectively. 
  176
+
  177
+Most commonly, you want to have an `a` or `span` with whitespace around it:
  178
+
  179
+    Download the file
  180
+    %a(href="/home")> here
  181
+    now.
  182
+
  183
+Will produce:
  184
+
  185
+    Download the file <a href="/home">here</a> now.
  186
+
  187
+You can also combine them if you want to have whitespace around and inside your tag.
  188
+
  189
+    %span<> This will have space in and around it.
  190
+    %span>< This will, too.
  191
+    %span><= "also works with code".toUpperCase()
  192
+
  193
+Please see `test/whitespace.haml` for more examples.
174 194
 
175 195
 ## Code interpolation
176 196
 
32  lib/haml.js
@@ -172,7 +172,7 @@ var Haml;
172 172
       name: "html tags",
173 173
       regexp: /^(\s*)((?:[.#%][a-z_\-][a-z0-9_:\-]*)+)(.*)$/i,
174 174
       process: function () {
175  
-        var line_beginning, tag, classes, ids, attribs, content;
  175
+        var line_beginning, tag, classes, ids, attribs, content, whitespaceSpecifier, whitespace={}, output;
176 176
         line_beginning = this.matches[2];
177 177
         classes = line_beginning.match(/\.([a-z_\-][a-z0-9_\-]*)/gi);
178 178
         ids = line_beginning.match(/\#([a-z_\-][a-z0-9_\-]*)/gi);
@@ -185,6 +185,20 @@ var Haml;
185 185
         if (attribs) {
186 186
           attribs = parse_attribs(attribs);
187 187
           if (attribs._content) {
  188
+            if(whitespaceSpecifier = attribs._content.match(/^([<>]{1,2})/)){
  189
+              whitespaceSpecifier = whitespaceSpecifier[1];
  190
+              if(whitespaceSpecifier.length == 2){
  191
+                attribs._content = attribs._content.substr(2)
  192
+                whitespace.around = true;
  193
+                whitespace.inside = true;
  194
+              }else{
  195
+                attribs._content = attribs._content.substr(1)
  196
+                if(whitespaceSpecifier == ">")
  197
+                  whitespace.around = true;
  198
+                else
  199
+                  whitespace.inside = true;
  200
+              }
  201
+            }
188 202
             //once we've identified the tag and its attributes, the rest is content.
189 203
             // this is currently trimmed for neatness.
190 204
             this.contents.unshift(attribs._content.trim());
@@ -225,14 +239,26 @@ var Haml;
225 239
         if (content === '""') {
226 240
           content = '';
227 241
         }
  242
+        
  243
+        if(whitespace.inside){
  244
+          content = '" '+content.substr(1, content.length - 2)+' "';
  245
+        }
228 246
 
229 247
         if (forceXML ? content.length > 0 : self_close_tags.indexOf(tag) == -1) {
230  
-          return '"<' + tag + attribs + '>"' +
  248
+          output = '"<' + tag + attribs + '>"' +
231 249
             (content.length > 0 ? ' + \n' + content : "") +
232 250
             ' + \n"</' + tag + '>"';
233 251
         } else {
234  
-          return '"<' + tag + attribs + ' />"';
  252
+          output = '"<' + tag + attribs + ' />"';
235 253
         }
  254
+        
  255
+        if(whitespace.around){
  256
+          //output now contains '"<b>hello</b>"'
  257
+          //we need to crack it open to insert whitespace.
  258
+          output = '" '+output.substr(1, output.length - 2)+' "';
  259
+        }
  260
+
  261
+        return output;
236 262
       }
237 263
     },
238 264
 
2  package.json
@@ -8,5 +8,5 @@
8 8
         "haml-js": "./lib/cli.js"
9 9
     },
10 10
     "author": "Aaron Blohowiak <aaron.blohowiak@gmail.com>, Tim Caswell <tim@creationix.com>",
11  
-    "version": "0.2.6"
  11
+    "version": "0.3.0"
12 12
 }
36  test/whitespace.haml
... ...
@@ -0,0 +1,36 @@
  1
+%p I want my words 
  2
+  %a> to have spaces on the outside
  3
+  So they don't run together. 
  4
+  But i also want some to have
  5
+  %a< spaces on the inside
  6
+  and still others to have
  7
+  %a<> spaces on either side
  8
+  even if it has
  9
+  %a<>= "code"
  10
+  on the line
  11
+  %a>= "or"
  12
+  just code with space on the outside
  13
+
  14
+
  15
+%p
  16
+  %a link
  17
+  s that touch their neighbor.
  18
+
  19
+
  20
+%p
  21
+  And
  22
+  %a>links
  23
+  that do not
  24
+
  25
+%p
  26
+  Or a
  27
+  %b<> important thing
  28
+  with tons of space
  29
+
  30
+%p
  31
+  Download the file
  32
+  %a(href="/home")> here
  33
+  now.
  34
+
  35
+-# empty tag
  36
+%p<>
1  test/whitespace.html
... ...
@@ -0,0 +1 @@
  1
+<p>I want my words <a>to have spaces on the outside</a> So they don't run together. But i also want some to have<a> spaces on the inside </a>and still others to have <a> spaces on either side </a> even if it has <a> code </a> on the line <a>or</a> just code with space on the outside</p><p><a>link</a>s that touch their neighbor.</p><p>And <a>links</a> that do not</p><p>Or a <b> important thing </b> with tons of space</p><p>Download the file <a href="/home">here</a> now.</p> <p>  </p> 

0 notes on commit 7df30e5

Please sign in to comment.
Something went wrong with that request. Please try again.