RubyGems - dolores-cml - Versions diffs - 0.4.0 → 0.5.2 - Mend

dolores-cml 0.4.0 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

data/VERSION +1 -1
data/cml.gemspec +5 -2
data/lib/cml/converters/jsawesome.rb +2 -2
data/lib/cml/parser.rb +21 -7
data/lib/cml/tag.rb +10 -6
data/spec/complex_spec.rb +13 -142
data/spec/converters/jsawesome_spec.rb +5 -5
data/spec/fixtures/html.cml +66 -140
data/spec/fixtures/segfault.cml +1 -0
data/spec/normalize_spec.rb +47 -0
metadata +6 -4

data/VERSION CHANGED Viewed

	@@ -1 +1 @@
1	- 0.4.0
1	+ 0.5.2

data/cml.gemspec CHANGED Viewed

@@ -2,11 +2,11 @@
 Gem::Specification.new do |s|
   s.name = %q{cml}
-  s.version = "0.4.0"
+  s.version = "0.5.2"
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Chris Van Pelt"]
-  s.date = %q{2009-09-02}
+  s.date = %q{2009-09-07}
   s.description = %q{CML let's you easily create form elements and custom interfaces for the CrowdFlower Croud Labor platform}
   s.email = %q{vanpelt@doloreslabs.com}
   s.extra_rdoc_files = [
@@ -44,7 +44,9 @@ Gem::Specification.new do |s|
      "spec/fixtures/complex.cml",
      "spec/fixtures/html.cml",
      "spec/fixtures/invalid.cml",
+     "spec/fixtures/segfault.cml",
      "spec/meta_spec.rb",
+     "spec/normalize_spec.rb",
      "spec/sorta_match.rb",
      "spec/spec_helper.rb",
      "spec/tags/checkbox_spec.rb",
@@ -68,6 +70,7 @@ Gem::Specification.new do |s|
     "spec/complex_spec.rb",
      "spec/converters/jsawesome_spec.rb",
      "spec/meta_spec.rb",
+     "spec/normalize_spec.rb",
      "spec/sorta_match.rb",
      "spec/spec_helper.rb",
      "spec/tags/checkbox_spec.rb",

data/lib/cml/converters/jsawesome.rb CHANGED Viewed

@@ -42,7 +42,7 @@ module CML
         label = label(parts[0])
         parts << key if label != key.capitalize.gsub(/_/,' ') || opts[:meta]
         attrs = opts[:meta] ? [] : ["label=\"#{label}\""]
-        attrs << "name=\"#{parts[1]}\"" if parts[1]
+        attrs << "#{opts[:nested] ? "value" : "name"}=\"#{parts[1]}\"" if parts[1]
         attrs << "checked=\"true\"" if val[1]
         attrs << "validates=\"required\"" if @labels[key] && @labels[key]["required"]
         opts.reject {|k,v| v.to_s.strip.length == 0 || k.is_a?(Symbol) }.each do |k,v|
@@ -81,7 +81,7 @@ module CML
               parent = "select"
               child = "option"
             end
-            tag(parent, k, {:children => v.map { |c| [child, c]}, :parent => true })
+            tag(parent, k, {:children => v.map { |c| [child, c, {:nested => child}]}, :parent => parent })
           #Multiple hidden fields...
           elsif(k =~ /^_/)
             v.map { |c| tag("hidden", c, :parent => true)}.join("\n")

data/lib/cml/parser.rb CHANGED Viewed

@@ -5,22 +5,24 @@ module CML
     def initialize(content, opts = {})
       @opts = opts
       #Because nokogiri is munging my CDATA sections, we parse it out ahead of time
-      @cdata = content.scan(/(<(?:script|style)[^>]*>)(.+?)</m)
+      @cdata = content.scan(/(<(script|style)[^>]*>)(.+?)(<\/\2)/m)
       @doc = Parser.parse(content)
       @cftags = @doc.xpath("//cml:*[not(ancestor::cml:*)]")
+      normalize if opts[:normalize]
       @tags = @cftags.map do |t|
         Parser.tag_class(t.name).new(t, @opts)
       end
     end
     def self.parse(content)
-      #This sucks, we remove scripts, styles, and close brs
-      xhtml = content.gsub(/(<(?:script|style)[^>]*>)(.+?)</m, "\\1<").gsub(/(<(b|h)r[^\/]*?)>/,'\1/>')
+      #This sucks, we remove scripts, styles, and close non self closed tags
+      #We could potentially add CDATA clauses to them, but this is "easier"
+      xhtml = content.gsub(/(<(script|style)[^>]*>)(.+?)(<\/\2)/m, "\\1\\4").gsub(/(<(input|link|img|br|hr).*?)>/,'\1/>') #base, basefont, area, meta
       Nokogiri::XML("<root xmlns:cml=\"http://crowdflower.com\">#{xhtml}</root>")
     end
     def convert(opts = nil)
-      @opts = opts if opts
+      @opts.merge!(opts) if opts
       cloned = @doc.dup
       cloned.xpath("//cml:*[not(ancestor::cml:*)]").each_with_index do |t,i|
         t.replace(@tags[i].convert(opts))
@@ -28,6 +30,18 @@ module CML
       cloned
     end
+    def normalize
+      @cftags.each do |t|
+        if ["radios", "select"].include?(t.name)
+          child = t.name == "radios" ? "radio" : "option"
+          t.name = "checkboxes"
+          t.xpath("cml:#{child}").each { |c| c.name = "checkbox" }
+        elsif t.name == "meta"
+          t.name = "text"
+        end
+      end
+    end
     def fields
       @fields = {}
       @tags.each do |g|
@@ -83,7 +97,7 @@ module CML
     def wrap(content)
       #This has to happen if we are outputing html, can go away if we use xhtml
-      content = content.gsub(/%7B%7B/,'{{').gsub(/%7D%7D/,'}}')
+      #content = content.gsub(/%7B%7B/,'{{').gsub(/%7D%7D/,'}}')
       @opts[:no_wrap] ? content : "<div class=\"cml#{" "+@opts[:class] if @opts[:class]}\" id=\"#{@opts[:prefix]}\">#{content}</div>"
     end
@@ -93,9 +107,9 @@ module CML
     def to_html(opts = nil)
       #We are going to html because xhtml is crazy with the encoding
-      html = convert(opts).at("root").children.to_html
+      html = convert(opts).at("root").children.to_xhtml
       #Let's re-insert that CDATA
-      @cdata.each { |s,c| html.sub!(/(<(?:script|style)[^>]*>)</m, "\\1#{c}<") }
+      @cdata.each { |matches| html.sub!(/(<(?:script|style)[^>]*>)</m, "\\1#{matches[2]}<") }
       wrap(html)
     end

data/lib/cml/tag.rb CHANGED Viewed

@@ -80,14 +80,18 @@ module CML
       @cml.to_s
     end
-    def label(label, tag = "label")
+    def raw_label
+      label = @attrs["label"]
       label ||= @attrs["name"].to_s.capitalize
+    end
+    def label(tag = "label")
       required = " <span class=\"required\">(required)</span>" if validations.include?("required")
-      "<#{tag} class=\"legend\">#{label}#{required}</#{tag.split(" ")[0]}>" if label.to_s != ""
+      "<#{tag} class=\"legend\">#{raw_label}#{required}</#{tag.split(" ")[0]}>" if raw_label.to_s != ""
     end
-    def legend(label)
-      label(label, "h2") if label
+    def legend
+      label("h2")
     end
     def to_liquid
@@ -124,8 +128,8 @@ module CML
     def data
       (@opts[:data] || {}).merge({
         "name" => prefix(name),
-        "label" => label(@attrs["label"]),
-        "legend" => legend(@attrs["label"]),
+        "label" => label,
+        "legend" => legend,
         "classes" => classes,
         "value" => value
       })

data/spec/complex_spec.rb CHANGED Viewed

@@ -59,11 +59,12 @@ describe "CML Complex" do
   it "parses scripts and styles" do
     @p = Parser.new(File.read(File.dirname(__FILE__) + "/fixtures/html.cml"), {:prefix => "u12345"})
-    @p.to_html.length.should > 1000
+    @p.to_html.length.should > 900
+  #puts Parser.escape(@p.to_html).gsub(/\n/,"<br/>")
     @p.to_html.should sorta_match(<<-HTML)
-    <div class="cml" id="u12345">
-      <hr>
-      <a href="#" class="toggle" target="_blank">toggle series description</a>
+    <div class="cml" id="u12345"><hr />
+    <a target="_blank" class="toggle" href="#">toggle series description</a>
     <div style="display:none">
     {{seriesdescription | textilize}}
     </div>
@@ -73,155 +74,25 @@ describe "CML Complex" do
     <img src="{{url}}/{{image}}" style="width:110px" /></div>
     {% endfor %}
     <br style="clear:both" />
-    <div class="text">
-      <label class="legend">Cool dude</label>
+    <div class="text"><label class="legend">Cool dude</label>
     <input name="u12345[cool_dude]" class="cool_dude" value="" type="text" />
     </div>
-    <style type="text/css" media="screen">
+    <style media="screen" type="text/css">
     div.wrap {
     position:relative;
     float:left;
     margin:5px 5px 0 0;
     }
-    div.wrap span {
-    font-size:430%;
-    text-align:center;
-    color:#111;
-    background:#CCC;
-    opacity:0.65;
-    width:110px;
-    font-weight:bold;
-    position:absolute;
-    left:0;
-    z-index:1;
-    }
     </style>
     <script type="text/javascript" charset="utf-8">
     var ranking = [null]
-    var rank = new Element('ul', {'class':'rank'}).adopt(['✓'].map(function(n,i){
-    return new Element('li').grab(new Element('a', {
-    html:n,
-    'class': "_"+(i+1),
-    events: {
-    click: function(e){
-    if(document.location.href.test(/ASSIGNMENT_ID_NOT_AVAILABLE/))
-    return alert('Please accept the hit before proceeding.')
-    var ul = this.getParent('ul')
-    var i = ul.retrieve('i')
-    var rank = this.get('class').replace(/\D/g,'')
-    var cur = i.getPrevious('span')
-    if(cur) {
-    var cur_rank = cur.get('class').replace(/\D/g,'')
-    ranking[cur_rank.toInt() - 1] = null
-    cur.destroy()
-    if(cur_rank == rank) {
-    i.retrieve('i').fireEvent('mouseleave')
-    return
-    }
-    }
-    var old = ranking[rank.toInt() - 1]
-    if(old)
-    old.getPrevious().destroy()
-    ranking[rank.toInt() - 1] = i
-    $$('input.ranking').destroy()
-    this.getParent('form').getElement('.jsawesome').adopt(ranking.map(function(r){
-    if(r) {
-    return new Element('input', {
-    type:'hidden',
-    name:'u{{_unit_id}}[ranking][]',
-    'class':'ranking',
-    value: r.get('src')
-    }).store('custom', function(right, inform){
-    right.each(function(url){
-    $$('img[src='+url+']').each(function(img){
-    img.getParent().setStyles({
-    background: 'green'
-    })
-    img.set('opacity', 0.7)
-    })
-    })
-    new Fx.Scroll(window, {onComplete:function(){
-    alert('The only acceptable images for this show are shown below in green. Please be more careful!')
-    inform()
-    }, offset:{x:0,y:-50}}).toElement($$('.wrap')[0])
-    })
-    }
-    }).clean())
-    new Element('span', {
-    html:this.get('html'),
-    styles: {
-    'line-height': i.getHeight()
-    },
-    'class':this.get('class'),
-    opacity: 0.65,
-    events: {
-    'mouseenter': function(e){
-    this.getNext().fireEvent('mouseenter', [e, rank])
-    },
-    'mouseleave': function(e){
-    this.getNext().fireEvent('mouseleave', [e, rank])
-    }
-    }
-    }).inject(i,'before')
-    i.retrieve('i').fireEvent('mouseleave')
-    }
-    }
-    }))
-    }))
-    window.addEvent('domready', function(){
-    $$('form').addEvent('submit', function(e){
-    if($$('input.any_problems').some(function(i){return i.checked}))
-    return true
-    var needed = ranking.indexOf(null)
-    if(needed > -1) {
-    var suf;
-    switch (needed){
-    case 0: suf = 'st'; break;
-    case 1: suf = 'nd'; break;
-    case 2: suf = 'rd'; break;
-    default: suf = 'th'
-    }
-    alert('You must choose '+ranking.length+' image or select no good images.')
-    e.stop()
-    }
-    })
-    $$('a.toggle').addEvent('click', function(e){
-    e.stop()
-    this.getNext().setStyle('display', (this.getNext().getStyle('display') == 'none' ? '' : 'none'))
-    })
-    $$('.wrap img').addEvent('mouseenter', function(e, cur){
-    this.store('cur', cur)
-    if(!this.retrieve('i')) {
-    var thumb = this
-    this.store('i', this.clone(true).setStyles({width:400}).addEvent('mouseenter', function(e){
-    rank.getElements('a').removeClass('cur')
-    var cur = thumb.retrieve('cur')
-    if(cur)
-    rank.getElement('a._'+cur).addClass('cur')
-    rank.store('i', thumb).setStyles({top:this.getTop() + 40, left:this.getLeft() + 160}).inject(this, 'after').fade('hide').fade(0.7)
-    }).addEvent('mouseleave', function(e){
-    //Don't know why the ul goes missing sometime..
-    if(this.getNext('ul') && (!e || !e.relatedTarget || !(e.relatedTarget.get('tag') == "ul" || e.relatedTarget.getParent('ul.rank')))) {
-    this.getNext('ul').dispose();
-    this.dispose()
-    }
-    }).addEvent('click', function(){this.fireEvent('mouseleave')}).addClass('zoomed'))
+    //Some really long comment that doesn't get borked by libxml... don't you dare insert a new line.
+    //Why are my && disapearing?
+    if(ranking && !false) {
+    //Preserve my curlies
+    var unit_id = {{_unit_id}};
+    var rad = "even inside strings {{awesome}}"
     }
-    //Cleanup
-    $$('.zoomed').dispose()
-    var i = this.retrieve('i')
-    s = this.getParent('.wrap')
-    i.setStyles({position:'absolute',zIndex:2,top:s.getTop() + 40, left:s.getLeft() - 145})
-    i.inject(s,'after').fade('hide').fade('in')
-    }).addEvent('mouseleave', function(e){
-    var i = this.retrieve('i')
-    if(e.relatedTarget != i)
-    i.dispose()
-    })
-    })
     </script></div>
     HTML
   end

data/spec/converters/jsawesome_spec.rb CHANGED Viewed

@@ -6,9 +6,9 @@ describe "JSAwesome Converter" do
     json = "[[
             [\"text_field\", \"default value\"],
             [\"#text_area\", \"\"],
-            [\"single_select\", [\"boo\", \"~yah\"]],
+            [\"single_select\", [\"boo|moo\", \"~yah\"]],
             [\"^check\", [\"One|totally_rad\", [\"two\",true], \"three\"]],
-            [\"*radio\", [\"a\", \"b\", [\"c\", true]]],
+            [\"*radio\", [\"a\", \"b|D\", [\"c\", true]]],
             [\"_hidden\",\"hot\"],
             [[\"^single_check\"],[\"^Edge|edge_case\", false]]
           ],
@@ -35,17 +35,17 @@ describe "JSAwesome Converter" do
     </cml:text>
     <cml:textarea name="text_area" validates="required" label="Input some text with atleast one digit" />
     <cml:select label="Single select" validates="required">
-      <cml:option label="Boo" />
+      <cml:option label="Boo" value="moo" />
       <cml:option label="Yah" />
     </cml:select>
     <cml:checkboxes label="Check" gold="true">
-      <cml:checkbox label="One" name="totally_rad" />
+      <cml:checkbox label="One" value="totally_rad" />
       <cml:checkbox label="Two" checked="true" />
       <cml:checkbox label="Three" />
     </cml:checkboxes>
     <cml:radios label="Radio">
       <cml:radio label="A" />
-      <cml:radio label="B" />
+      <cml:radio label="B" value="D" />
       <cml:radio label="C" checked="true" />
     </cml:radios>
     <cml:hidden label="Hidden" value="hot" />

data/spec/fixtures/html.cml CHANGED Viewed

@@ -11,148 +11,74 @@
 <br style="clear:both">
 <cml:text label="Cool dude"/>
 <style media="screen" type="text/css">
-div.wrap {
-position:relative;
-float:left;
-margin:5px 5px 0 0;
-}
-div.wrap span {
-font-size:430%;
-text-align:center;
-color:#111;
-background:#CCC;
-opacity:0.65;
-width:110px;
-font-weight:bold;
-position:absolute;
-left:0;
-z-index:1;
-}
+  div.wrap {
+    position:relative;
+    float:left;
+    margin:5px 5px 0 0;
+  }
 </style>
 <script type="text/javascript" charset="utf-8">
-  var ranking = [null]
-  var rank = new Element('ul', {'class':'rank'}).adopt(['✓'].map(function(n,i){
-    return new Element('li').grab(new Element('a', {
-      html:n,
-      'class': "_"+(i+1),
-      events: {
-        click: function(e){
-          if(document.location.href.test(/ASSIGNMENT_ID_NOT_AVAILABLE/))
-            return alert('Please accept the hit before proceeding.')
-          var ul = this.getParent('ul')
-          var i = ul.retrieve('i')
-          var rank = this.get('class').replace(/\D/g,'')
-          var cur = i.getPrevious('span')
-          if(cur) {
-            var cur_rank = cur.get('class').replace(/\D/g,'')
-            ranking[cur_rank.toInt() - 1] = null
-            cur.destroy()
-            if(cur_rank == rank) {
-              i.retrieve('i').fireEvent('mouseleave')
-              return
-            }
-          }
-          var old = ranking[rank.toInt() - 1]
-          if(old)
-            old.getPrevious().destroy()
-          ranking[rank.toInt() - 1] = i
-          $$('input.ranking').destroy()
-          this.getParent('form').getElement('.jsawesome').adopt(ranking.map(function(r){
-            if(r) {
-              return new Element('input', {
-                type:'hidden',
-                name:'u{{_unit_id}}[ranking][]',
-                'class':'ranking',
-                value: r.get('src')
-              }).store('custom', function(right, inform){
-                right.each(function(url){
-                  $$('img[src='+url+']').each(function(img){
-                    img.getParent().setStyles({
-                      background: 'green'
-                    })
-                    img.set('opacity', 0.7)
-                  })
-                })
-                new Fx.Scroll(window, {onComplete:function(){
-                  alert('The only acceptable images for this show are shown below in green. Please be more careful!')
-                  inform()
-                }, offset:{x:0,y:-50}}).toElement($$('.wrap')[0])
-              })
-            }
-          }).clean())
-          new Element('span', {
-            html:this.get('html'),
-            styles: {
-              'line-height': i.getHeight()
-            },
-            'class':this.get('class'),
-            opacity: 0.65,
-            events: {
-              'mouseenter': function(e){
-                this.getNext().fireEvent('mouseenter', [e, rank])
-              },
-              'mouseleave': function(e){
-                this.getNext().fireEvent('mouseleave', [e, rank])
-              }
-            }
-          }).inject(i,'before')
-          i.retrieve('i').fireEvent('mouseleave')
-        }
-      }
-    }))
-  }))
-  window.addEvent('domready', function(){
-    $$('form').addEvent('submit', function(e){
-      if($$('input.any_problems').some(function(i){return i.checked}))
-        return true
-      var needed = ranking.indexOf(null)
-      if(needed > -1) {
-        var suf;
-        switch (needed){
-          case 0: suf = 'st'; break;
-          case 1: suf = 'nd'; break;
-          case 2: suf = 'rd'; break;
-          default: suf = 'th'
-        }
-        alert('You must choose '+ranking.length+' image or select no good images.')
-        e.stop()
+  // query1 = 'compare'
+  // query2 = 'base'
+  document.addEvent('domready', function() {
+    var inFrame = ($$('body.in_frame').length > 0);
+    var onWarningPage = ($$('div.missed', 'h3.tainted').length > 0);
+    var results = $('u{{_unit_id}}_div').getElements('.searchresult');
+    var rand = Math.floor(Math.random()*2);
+    var inputValues = ['compare_is_much_better', 'compare_is_a_little_better', 'base_is_a_little_better', 'base_is_much_better']
+    var htmlValues = [
+      'The <b>top</b> result is <b>much better</b> than the bottom one',
+      'The <b>top</b> result is <b>a little better</b> than the bottom one',
+      'The <b>bottom</b> result is <b>a little better</b> than the top one',
+      'The <b>bottom</b> result is <b>much better</b> than the top one',
+      '<b>Both</b> results are <b>not relevant</b> to the search terms <b>at all</b>'
+    ];
+    if (inFrame && !onWarningPage) {
+      if (rand == 0) {
+        // Put base on top
+        results[0].inject(results[1], 'after');
+        inputValues.reverse();
       }
-    })
-    $$('a.toggle').addEvent('click', function(e){
-      e.stop()
-      this.getNext().setStyle('display', (this.getNext().getStyle('display') == 'none' ? '' :  'none'))
-    })
-    $$('.wrap img').addEvent('mouseenter', function(e, cur){
-      this.store('cur', cur)
-      if(!this.retrieve('i')) {
-        var thumb = this
-        this.store('i', this.clone(true).setStyles({width:400}).addEvent('mouseenter', function(e){
-          rank.getElements('a').removeClass('cur')
-          var cur = thumb.retrieve('cur')
-          if(cur)
-            rank.getElement('a._'+cur).addClass('cur')
-          rank.store('i', thumb).setStyles({top:this.getTop() + 40, left:this.getLeft() + 160}).inject(this, 'after').fade('hide').fade(0.7)
-        }).addEvent('mouseleave', function(e){
-          //Don't know why the ul goes missing sometime..
-          if(this.getNext('ul') && (!e || !e.relatedTarget || !(e.relatedTarget.get('tag') == "ul" || e.relatedTarget.getParent('ul.rank')))) {
-            this.getNext('ul').dispose();
-            this.dispose()
-          }
-        }).addEvent('click', function(){this.fireEvent('mouseleave')}).addClass('zoomed'))
+    } else {
+      // Fix the text a bit
+      $$('div.missed span').each(function(el) {
+        el.set('text', el.get('text').replace('Compare', 'The top result'));
+        el.set('text', el.get('text').replace('Base', 'The bottom result'));
+        el.set('text', el.get('text').replace(' compare', ' or the top result'));
+        el.set('text', el.get('text').replace(' base', ' or the bottom result'));
+      });
+    }
+    // Fix the input values and labels
+    if ($('u{{_unit_id}}')) {
+      $('u{{_unit_id}}').getElements('input.result_is_better').each(function(input, i) {
+        if (i < inputValues.length) input.set('value', inputValues[i]);
+        input.inject(input.getParent().set('html', htmlValues[i]), 'top');
+      });
+    }
+    $('u{{_unit_id}}_div').getElements('table.srchresult').each(function(el, i) {
+      // Fix a weird bug that got introduced in some circumstances way back in the scraping process
+      var bid_buy = el.getElement('td.bid_buy');
+      if (bid_buy.getChildren().length < 1) {
+        var numBids = Math.floor(Math.random()*15);
+        new Element('p', {'text': numBids+' bids'}).inject(bid_buy);
       }
-      //Cleanup
-      $$('.zoomed').dispose()
-      var i = this.retrieve('i')
-      s = this.getParent('.wrap')
-      i.setStyles({position:'absolute',zIndex:2,top:s.getTop() + 40, left:s.getLeft() - 145})
-      i.inject(s,'after').fade('hide').fade('in')
-    }).addEvent('mouseleave', function(e){
-      var i = this.retrieve('i')
-      if(e.relatedTarget != i)
-        i.dispose()
-    })
-  })
+    });
+    // Show the input form
+    $('u{{_unit_id}}_div').setStyle('display', 'block');
+  });
+  var ranking = [null]
+  //Some really long comment that doesn't get borked by libxml... don't you dare insert a new line.
+  //Why are my && disapearing?
+  if (ranking && !onSomeWarningpage) {
+    //Preserve my curlies
+    var unit_id = {{_unit_id}};
+    var rad = "even inside strings {{awesome}}"
+  }
 </script>

data/spec/fixtures/segfault.cml ADDED Viewed

@@ -0,0 +1 @@

+ <script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=Knx84fDV34H2VnhVU1DoD7chT1wjJ2r36uf4dZW7Vc5si9sqQRAYU_g8fo7zV.wF"></script> <script src="/javascripts/upload.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">     mapInterface=new Object();//Wrapper for all info we will store;     mapInterface.baseCrowdflowerUrl='http://crowdflower.com';//'http://www.crowdflower.com';     mapInterface.debug=false;     mapInterface.jobId=1059;     mapInterface.accepted=new Object();     mapInterface.accepted.unit=null;     mapInterface.accepted.unitId=null;     mapInterface.accepted.cart=new Object();//Contains all units selected     //Consider using cookie for this     mapInterface.accepted.cond=false; //Bool thatrepresents whether the user has accepted a task yet     mapInterface.imageBaseUrl='http://a1.doloreslabs.com/q82/images/';     mapInterface.startingZoom=15;     mapInterface.addressZoom=10;     mapInterface.searchBox=new Object();     mapInterface.searchBox.lonRange=10;     mapInterface.searchBox.latRange=10;     mapInterface.maxDistance=160900;//100 miles in meters     mapInterface.maxPoints=300; //Max points to display on the screen     mapInterface.formAwesome=new Object();         mapInterface.formAwesome.form = [["*the_specified_location",["yes","no"]],["#and_the_situation","For example, \"This is a new road and there is no paint.\""],["#specified_latitudelongitude_location",""],["*the_road_paved",["yes","no"]],["*road_private_access",["yes","no"]],["*road_one_way",["yes","no"]],["*on_the_road",["yes","no"]],["in_the_map",""],["in_the_map_2",""],["of_the_road",""],["the_new_road",""],["of_the_map",""],["#residential_development_etc","For example, \"This is a new road in a developing neighborhood.\""],["*in_the_future",["yes","no"]],["#please_elaborate",""],["#about_the_task",""]];     mapInterface.formAwesome.labels={"in_the_map_2":{"label":"What is the number of lanes in the south or west-ward direction of travel in the map? ","required":true},"of_the_road":{"label":"What is the speed limit on the initial section of the road? ","required":true},"the_road_paved":{"label":"Is the road paved? ","required":true},"road_one_way":{"label":"Is the road one way? ","required":true},"about_the_task":{"label":"Any comments about the task?"},"the_new_road":{"label":"Are there any turn restrictions turning on to the new road, or turning off the new road? ","required":true},"the_specified_location":{"label":"Does a road exist at the specified location? ","required":true},"on_the_road":{"label":"Is there a divider on the road? ","required":true},"and_the_situation":{"label":"Describe the road and the situation. ","required":true},"road_private_access":{"label":"Is the road private access? ","required":true},"in_the_map":{"label":"What is the number of lanes in the north or east-ward direction of travel in the map? ","required":true},"of_the_map":{"label":"What are the minimum and maximum address numbers on the road within the range of the map? ","required":true},"residential_development_etc":{"label":"Please provide a general description of the road and area. Note whether the road is still under construction, leads to hotels, if it is in the residential development, etc. ","required":true},"in_the_future":{"label":"Would you be willing to do this task again in the future?","required":true},"please_elaborate":{"label":"Please elaborate"},"specified_latitudelongitude_location":{"label":"If the road did not exist at the specified latitude/longitude location but was nearby, please describe its actual location. What was at the specified latitude/longitude location?"}};          mapInterface.points=new Object();     //mapInterface.points.data=<?=file_get_contents('units.json')?>;          //Returns an array of units that fit in the appropriate location     mapInterface.points.filterByLoc=function(userLoc){         var filtUnits=new Array();         var counter=0;         for(var unitId in mapInterface.points.data){             var unit=mapInterface.points.data[unitId];             //Check distance             if( great_circle_distance(userLoc,unit)>=mapInterface.maxDistance){                 continue;             }             else if(counter >= mapInterface.maxPoints){                 break;             }             else{                 filtUnits[unitId]=unit;                 counter++;             }         }         //*/         return filtUnits;              //Calculates Euclidean distance between two points         function checkDistance(point1,point2){             return Math.pow (                   Math.pow( (point2.Lat-point1.Lat), 2)+Math.pow( (point2.Lon-point1.Lon), 2)                  , .5);         }         //Gabe smed's true distance calc         function great_circle_distance(point_a, point_b) {             var lat1 = point_a.Lat;             var lat2 = point_b.Lat;             var lon1 = point_a.Lon;             var lon2 = point_b.Lon;                            var R = 6378140; // meters             var dLat = deg_to_rad(lat2-lat1)             var dLon = deg_to_rad(lon2-lon1)             var a = Math.sin(dLat/2) * Math.sin(dLat/2) +                 Math.cos(deg_to_rad(lat1)) * Math.cos(deg_to_rad(lat2)) *                 Math.sin(dLon/2) * Math.sin(dLon/2);             var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));             var d = R * c;                             return d                      function deg_to_rad(deg) {                 return deg * Math.PI / 180.0             }         }              };     mapInterface.points.draw=function(userLoc, map){         //AJAX GET request to pull units in a large bounding box         //Then we use method .filterByLoc to reduce the search further         //(function(){             var dataRequest=new Request.JSON({                 url: mapInterface.baseCrowdflowerUrl+'/jobs/'+mapInterface.jobId+'/units/custom.json',                 onSuccess: function(responseJSON, responseText){                     //console.log(responseJSON);                     mapInterface.points.data=new Object();                     for(var unitId in responseJSON){                         mapInterface.points.data[unitId]= mapInterface.formatUnit(responseJSON[unitId], unitId);                     }                     afterDataUpdated();                     $$('div.loading').setStyle('visibility','hidden');                 },                 onFailure: function(xhr){                     alert('Error loading data.  Please try refreshing the page or send an email to info@doloreslabs.com');                 }             });             var searchBoxLonSize=mapInterface.searchBox.lonRange;             var searchBoxLatSize=mapInterface.searchBox.latRange;             var params={    c1_key:'long'                     ,c1_val: (userLoc.Lon-searchBoxLonSize).toString()+','+(userLoc.Lon+searchBoxLonSize).toString()                     ,c1_op: 'bt'                     ,c2_key:'lat'                     ,c2_val: (userLoc.Lat-searchBoxLatSize).toString()+','+(userLoc.Lat+searchBoxLatSize).toString()                     ,c2_op: 'bt'             };             dataRequest.get(params);         //})();         function afterDataUpdated(){             map.removeMarkersAll();             if(typeof(userLoc)=='undefined'){                 return false;             }             var units=mapInterface.points.filterByLoc(userLoc);             if ( units.length===0){                 alert('Sorry, no results found!  Try another address.');                 return false;             }             for(var unitId in units){                 unit=units[unitId];                 if(typeof(unit['file1'])=='undefined'                    || typeof(unit['file2'])=='undefined'){                     //For some reason some of the unit objects are malformed                     //console.log(unit);                     continue;                 }                                  var sMarker=new YMarker(new YGeoPoint( unit.Lat,unit.Lon ));                 sMarker.unitId=unitId;                 sMarker.unit=unit;                 //Add onclick event to the markers                 YEvent.Capture(sMarker,EventsList.MouseClick,function(e){                     if(mapInterface.accepted.cond===true){                         mapInterface.popup.confirmReturnUnit.bind(this, [this.unit, this.unitId])();                     }                     else{                         mapInterface.popup.simpleUnit.bind(this, [this.unit, this.unitId])();                     }                 });                 map.addOverlay(sMarker);             }         }     };//*/     //Adds some custom properties to the unit     mapInterface.formatUnit=function(unit, unitId){         unit.Lat=unit.lat;         unit.Lon=unit.long;         unit.image1Url=mapInterface.imageBaseUrl+unit.file1.trim();         unit.image2Url=mapInterface.imageBaseUrl+unit.file2.trim();         unit.unitMapLink="<a href=\"http://maps.yahoo.com/#mvt=m&lat="+unit.Lat+"&lon="+unit.Lon+"&zoom=14&q1="+unit.Lat+"%252C%2520"+unit.Lon+"\" target=\"_blank\">Click here to get driving instructions</a>";         unit.img1html='<a target="_blank" href="'+unit.image1Url+'"><img src="'+unit.image1Url+'"/></a>';         unit.img2html='<a target="_blank" href="'+unit.image2Url+'"><img src="'+unit.image2Url+'"/></a>';         unit.unitId=unitId;         return unit;     }          mapInterface.popup=new Object();     //Used for callback on click of a YAHOO map marker.     //Pops up a new window with a simple unit view     mapInterface.popup.simpleUnit=function(unit, unitId){         //Kill any existing window div         $$('div.popup').dispose();         //Create a new popup div window (popup) using template found in div.popupContent         var divText=$(document.body)                 .getElement('div.popupContent div.simpleUnitView')                 .get('html')                 .substitute(unit);                          //Inject into DOM         var newDiv=new Element('div', {"class": "popup", "id":"popupU"})                     .set('html',divText)                     .inject( $(document.body) )                     .store('unit',unit)                     .store('unitId',unitId);                  //Wire up close button         newDiv.getElement('span.close').addEvent('click',function(e){             this.getParent().getParent().dispose();         });                           //Wire up accept button         if(mapInterface.previewMode===true){             newDiv.getElement('div.viewMore').dispose();             $$('div.simpleUnitView div.previewInstructions').setStyle('display','block');         }         else{             //Wire up "View More Details" button             newDiv.getElement('div.viewMore').addEvent('click',mapInterface.popup.advUnit);         }                  //Make div popup and transparent while dragging         var movableDiv=new Drag.Move(newDiv,{             onStart:function(el){el.addClass('dragging').set('opacity','.5');},             onComplete: function(el){el.removeClass('dragging').set('opacity','1.0');}                      });     };     //Used as callback for when someone clicks "View more info" on the unit popup div     //Fullscreens an existing unit     mapInterface.popup.advUnit=function(e){         //Move window to upper left, Add a class that will include styles to maximize div to full screen         var popupDiv=this.getParent().position({x:'left',y:'top'}).addClass('fullscreen');         var unitId=this.getParent().retrieve('unitId');         var unit=this.getParent().retrieve('unit');                  var divText=$(document.body)                 .getElement('div.popupContent div.advUnitView')                 .get('html')                 .substitute(unit);         this.getParent().set('html',divText);                  popupDiv.getElement('div.accept').addEvent('click',function(e){             //Lock in unit through AJAX request             var acceptRequest=new Request.JSON({                 url:'/jobs/'+mapInterface.jobId+'/units/'+unitId+'/custom',                 method: 'put',                 data: {unit:{state:'judging'}},                 onSuccess: function(responseJSON, responseText){                     mapInterface.accepted.unitId=unitId;                     mapInterface.accepted.unit=unit;                     mapInterface.accepted.cond=true;                     mapInterface.popup.printableForm.bind( this )();                     $$('div.acceptedTaskLink').setStyle('display','block');                 }.bind(this.getParent().getParent()),                 onFailure: function(){                     alert('Sorry, it seems a network problem is preventing you from accepting the task.  Please try again later or email admin@doloreslabs.com');                 }             });             //Params             acceptRequest.send();         });         //Wire up close button         popupDiv.getElement('span.close').addEvent('click',function(e){             this.getParent().getParent().dispose();         });     };     //Pops up a new window at the beginning of task     mapInterface.popup.splash=function(){         var content=$(document.body).getElement('div.popupContent div.splash').get('html');         var newDiv=new Element('div', {"class": "splash popup fullscreen"})                     .set('html',content)                     .inject( $(document.body) );         //Wire up close button         newDiv.getElement('span.close').addEvent('click',function(e){             this.getParent().getParent().dispose();         });         //Wire up returning button         newDiv.getElement('div.returning').addEvent('click',function(e){             mapInterface.popup.checkUnitId();             });         //Wire up new button         newDiv.getElement('div.new').addEvent('click',function(e){             this.getParent().getParent().dispose();         });     };          //Pops up a new window at the beginning of task     mapInterface.popup.preview=function(){         var content=$(document.body).getElement('div.popupContent div.preview').get('html');         var newDiv=new Element('div', {"class": "preview popup"})                     .set('html',content)                     .inject( $(document.body) );         //Wire up close button         newDiv.getElement('span.close').addEvent('click',function(e){             newDiv.dispose();         });         //Wire up returning button         newDiv.getElement('div.preview.clickable').addEvent('click',function(e){             //Undisable search box (which is by default disabled in PREVIEW mode)             if(mapInterface.previewMode===true){                 $('userAddress').set('disabled',false);             }             newDiv.dispose();         });                  //Make div popup and transparent while dragging         var movableDiv=new Drag.Move(newDiv,{             onStart:function(el){el.addClass('dragging').set('opacity','.5');},             onComplete: function(el){el.removeClass('dragging').set('opacity','1.0');}                      });     };          //Allow user to enter in existing unit id     mapInterface.popup.checkUnitId=function(){         var content=$(document.body).getElement('div.popupContent div.checkUnitId').get('html');         var popupDiv=    new Element('div', {"class": "popup checkUnitId fullscreen"})                 .set('html',content)                 .inject( $(document.body) );         //So we can distinguish this div from the hidden one         popupDiv.getElement('input.unitId').addClass('real');         //Wire up close button         popupDiv.getElement('span.close').addEvent('click',function(e){             this.getParent().getParent().dispose();         });         //Wire up submit button                 popupDiv.getElement('div.checkUnitId').addEvent('click',function(e){             //Grab unitId             var unitId=Number( $(document.body).getElement('input.unitId.real').value.trim() );             if(typeof(unitId)!='number' || !isFinite(unitId) || unitId<=0 ){                 alert('The unit ID must be a number in the format 9999999');                 return false;             }             var request=new Request.JSON({                 url: mapInterface.baseCrowdflowerUrl+'/jobs/'+mapInterface.jobId+'/units/'+unitId+'/custom.json',                 method: 'get',                 onSuccess: function(responseText, responseXML){                     mapInterface.accepted.unitId=unitId;                     mapInterface.accepted.unit=mapInterface.formatUnit(responseText.data, unitId);                     mapInterface.accepted.cond=true;                     //console.log(responseText);                     mapInterface.popup.submittableForm();                 },                 onFailure: function(xhr){                     alert('The entered unit ID is not valid.  Please ensure you entered it correctly and try again.');                 }             });             request.send();         });         //Wire up cancel button         popupDiv.getElement('div.cancel').addEvent('click',function(e){             popupDiv.dispose();             });                  //Wire up input box so that hitting enter submits form         popupDiv.getElement('input.unitId').addEvent('keypress',function(e){             if(e.key=='enter'){                 e.stop(); //Prevent form from submitting                 popupDiv.getElement('div.checkUnitId').fireEvent('click');             }         });     };     //Now actually display the form     mapInterface.popup.submittableForm=function(e){         //Kill existing popups         $$('div.popup').dispose();         //Grab HTML from hidden div on page         var html=$(document.body).getElement('div.popupContent div.submittableForm').get('html').substitute(mapInterface.accepted.unit);         //Create the windowed div         var newDiv=new Element('div', {"class": "submittableForm popup fullscreen"})                     .set('html',html)                     .inject( $(document.body) );         //Wire up close button         newDiv.getElement('span.close').addEvent('click',function(e){             this.getParent().getParent().dispose();         });         //Add form         var jsaDivId='u'+mapInterface.accepted.unitId;         var jsaDiv=new Element('div', {"class": "submittableForm", id: jsaDivId} )                 .inject( newDiv.getElement('div.content form'), 'bottom' );         //JSawesome creates the form elements         var myJSAwesome=new JSAwesome(jsaDivId,mapInterface.formAwesome.form, mapInterface.formAwesome.labels);         myJSAwesome.to_html();         myJSAwesome.addValidation();                  //Submit button         var submitButton=new Element('input', {type: "submit", name: "submit", value: "Submit"}).inject(newDiv.getElement('div.content form'), 'bottom');                  //Add some validation when submitting         submitButton.addEvent('click',function(e){             if( $$('.files').length > 0 ){                 var myCookie=Cookie.write('submittedForm','yes',{duration: 30}); //save for a month)                 return true;             }             else{                 e.stop();                 alert('You didn\'t upload any files!  You must upload an image of the street to submit this task.  Make sure you click the "Upload Images" button to upload the files after you have selected them from your computer.');             }         });                  newDiv.getElement('input.upload').addClass('real');         newDiv.getElement('div.uploadStatus').addClass('real');         newDiv.getElement('ul.list').addClass('real');         newDiv.getElement('a.browse').addClass('real');         mapInterface.uploader.wireUp(newDiv);     };          mapInterface.popup.printableForm=function(e){         //Kill existing popups         $$('div.popup').dispose();         //Grab HTML from hidden div on page         var html=$(document.body).getElement('div.popupContent div.printableForm').get('html').substitute(mapInterface.accepted.unit);         //Create the windowed div         var newDiv=new Element('div', {"class": "printableForm popup fullscreen"})                     .set('html',html)                     .inject( $(document.body) );         //Wire up close button         newDiv.getElement('span.close').addEvent('click',function(e){             this.getParent().getParent().dispose();         });         var form=new Element('form', {"class": "printableForm", id: "printableForm" } )                 .inject( newDiv.getElement('div.content') );         new JSAwesome('printableForm',mapInterface.formAwesome.form, mapInterface.formAwesome.labels).to_html();     }     mapInterface.uploader=new Object();     mapInterface.uploader.wireUp=function(newDiv){         newDiv.getElement('input.upload').addEvent('click', function(){mapInterface.uploader.swiffy.upload()})         var unit_id = mapInterface.accepted.unitId;         var worker_id = "{{_worker_id}}"         mapInterface.uploader.swiffy = new FancyUpload2(newDiv.getElement('div.uploadStatus'), newDiv.getElement('ul.list'), {           url: 'http://crowdflower_upload.s3.amazonaws.com/',           typeFilter: {'Data (*.jpg, *.jpeg)': '*.jpg; *.jpeg'},           fieldName: 'file',           path: '/Swiff.Uploader.swf',           limitSize: 5 * 1024 * 1024, // 5Mb           multiple: true,           mergeData: true,           autoStart: false,           method: 'post',           passStatus:[201],           data: {             'key': 'uploads/'+unit_id+'-'+worker_id+'_1.jpg',             'AWSAccessKeyId': "00NZJT8HNJ5H6N5MGP02",             'success_action_status' : 201,             'acl': 'private',             'policy': "eyJleHBpcmF0aW9uIjogIjIwMTAtMDEtMDFUMDA6MDA6MDBaIiwKICAiY29uZGl0aW9ucyI6IFsgCiAgICB7ImJ1Y2tldCI6ICJjcm93ZGZsb3dlcl91cGxvYWQifSwgCiAgICBbInN0YXJ0cy13aXRoIiwgIiRrZXkiLCAidXBsb2Fkcy8iXSwKICAgIFsic3RhcnRzLXdpdGgiLCAiJEZpbGVuYW1lIiwgIiJdLAogICAgeyJhY2wiOiAicHJpdmF0ZSJ9LAogICAgWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsIDAsIDEwNDg1NzZdLAogICAgWydlcScsICckc3VjY2Vzc19hY3Rpb25fc3RhdHVzJywgJzIwMSddCiAgXQp9Cg==",             'signature': "RUrMBFa13RBYm4HQ5zGfE0BXFIY="                       },           fileInvalid: function(e) {             flash("File must be less than 10MB", "error")           },           onComplete: function(res){             $$('input.upload.real').set({'value': 'Upload complete!'})             this.fileList.each(function(file,i){               if(file.element.hasClass('completed'))             return               file.element.addClass('completed').getElement('.file-remove').dispose()               new Element('input', {type:'hidden', 'class':'files', name:'u'+unit_id+'[_files][]', value:unit_id+'-'+worker_id+'_'+(i+1)+'.'+file.extension}).inject(this.status)             }, this)             var later = function(){               this.size = this.uploading = this.bytesLoaded = this.percentLoaded = 0;             }             later.delay(500,this)             $$('input.upload.real').set({disabled:false, value:'Upload these images', style:'display:none'})           },           onFileRemove: function(w){             if(this.fileList.length == 0) {               $$('a.browse.real').set('html', 'Choose images of the road')               $$('input.upload.real').setStyle('display', 'none')             }           },           onBeforeStart: function(){             $$('input.upload.real').set({'disabled':true, 'value': 'Uploading...'})           },           onSelectSuccess: function(files){             this.overallProgress.set(0);             this.currentProgress.set(0);             var offset = this.fileList.length - files.length + 1             files.each(function(f,i){               var data = mapInterface.uploader.swiffy.options.data               data.key = data.key.replace(/_(\d+)\.jpg/,'_'+(offset + i)+'.'+f.extension)               f.setOptions({data:data})             })             $$('a.browse.real').set('html', 'Choose more images of the road')             $$('input.upload.real').setStyle('display','')           },           onFail: function(error) {             switch (error) {               case 'hidden': // works after enabling the movie and clicking refresh             alert('To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).');             break;               case 'blocked': // This no *full* fail, it works after the user clicks the button             alert('To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).');             break;               case 'empty': // Oh oh, wrong path             alert('A required file was not found, please be patient and we\'ll fix this.');             break;               case 'flash': // no flash 9+ :(             alert('To enable the embedded uploader, install the latest Adobe Flash plugin.')             }           },           target: ($$('a.browse.real')[0])         });     };                    mapInterface.popup.confirmReturnUnit=function(unit, unitId){         //Kill any existing window div         $$('div.popup').dispose();         //Create a new popup div window (popup) using template found in div.popupContent         var divText=$(document.body)                 .getElement('div.popupContent div.confirmReturnUnit')                 .get('html');                          //Inject into DOM         var newDiv=new Element('div', {"class": "popup confirmReturnUnit"})                     .set('html',divText)                     .inject( $(document.body) )                  //Wire up close button         newDiv.getElement('span.close').addEvent('click',function(e){             this.getParent().getParent().dispose();         });                  //Wire up "View More Details" button         newDiv.getElement('div.confirm').addEvent('click',function(unit, unitId){             mapInterface.popup.simpleUnit(unit, unitId);             /*             //If task is already accepted, we need to first revoke the original task             if(mapInterface.accepted.cond===true){                 //AJAX call to set state of the unit back to unjudged                 var returnRequest=new Request.JSON({                     url:'/jobs/'+mapInterface.jobId+'/units/'+mapInterface.accepted.unitId+'/custom',                     method: 'put',                     data: {unit:{state:'judgable'}},                     onSuccess: function(responseJSON, responseText){                         mapInterface.accepted.unitId=null;                         mapInterface.accepted.unit=null;                         mapInterface.accepted.cond=false;                         $$('div.acceptedTaskLink').setStyle('display','none');                         $$('div.popup').dispose();                     },                     onFailure: function(){                         alert('Error connecting to server: could not return task.  If you continue to receive this error, please send an email to admin@doloreslabs.com');                     }                 });                 //Params                 returnRequest.send();             }             //*/         }.bind(this, [unit, unitId]) );         newDiv.getElement('div.cancel').addEvent('click',function(e){             mapInterface.popup.printableForm();         });                  //Make div popup and transparent while dragging         var movableDiv=new Drag.Move(newDiv,{             onStart:function(el){el.addClass('dragging').set('opacity','.5');},             onComplete: function(el){el.removeClass('dragging').set('opacity','1.0');}                      });     }          // Create a Map that will be placed in the "map" div.     window.addEvent('domready',function(){         if( Cookie.read('submittedForm') === 'yes'){             Cookie.write('submittedForm','no');             alert('Thanks for submitting the task!  Now you can select a new task or submit answers to another one.');         }                  //Hide existing submit button         $$('input[type=submit]').addClass('invisible');                  //Check if this is preview in AMT or not         if( $$('input[type=submit]')[0].get('disabled') ){             mapInterface.previewMode=true;             $$('div.linkToSubmitPage.clickable').setStyle('visibility','hidden');             mapInterface.popup.preview();         }         //Only display splash screen if we're not in preview mode         else{             mapInterface.previewMode=false;             mapInterface.popup.splash();         }                  var map = new YMap($('map'));         // Add the ability to change between Sat, Hybrid, and Regular Maps         map.addTypeControl();              // Add the zoom control. Long specifies a Slider versus a "+" and "-" zoom control         map.addZoomLong();                     // Add the Pan control to have North, South, East and West directional control         map.addPanControl();           // Specifying the Map starting location and zoom level         map.drawZoomAndCenter("San Francisco", mapInterface.startingZoom);                  $$('div.acceptedTaskLink').addEvent('click',function(){             mapInterface.popup.printableForm();         });                  //Wire up the user address submit button         $$('span#submitUserForm').addEvent('click',function(){             $$('div.loading').setStyle('visibility','visible');             var userAddress=$('userAddress').value;             map.geoCodeAddress(userAddress);             YEvent.Capture(map, EventsList.onEndGeoCode, function(geoCode) {                 map.drawZoomAndCenter(geoCode.GeoPoint,mapInterface.addressZoom);                 if (geoCode.success){                     //Clear points                     mapInterface.points.draw(geoCode.GeoPoint,map);                 }             });          });                  //Wire up take me back to home page link         $$('div.linkToSubmitPage').addEvent('click',function(){             mapInterface.popup.checkUnitId();         });                  //Change default action of hitting enter on the input element         $$('input#userAddress').addEvent('keypress',function(e){             if(e.key=='enter'){                 e.stop(); //Prevent form from submitting                 $$('span#submitUserForm').fireEvent('click');             }         });     }); </script> <style type="text/css"> .invisible{     display:none; } input{     margin-right:15px; } div#map{          height:400px;     width:700px; } div.loading{     background-color:yellow;     width:8em;     font-size:130%;     visibility:hidden; } div.loadingTop{     position:fixed;     left:0px;     top:0px;     z-index:1000;     background-color:yellow;     width:8em;     font-size:130%;     display:none; } div.acceptedTaskLink{     margin-top:5px;     display:none;      } div.userLocation{     padding-top:30px; } span#submitUserForm{     cursor:pointer;     background-color:#5D9732;     padding:4px;     color:white; } input#userAddress{     width:50em; } /*Styling for div/span buttons*/ div.clickable{     background-color:#27572A;     padding:5px;     cursor:pointer;     text-align:center;     font-size:120%;     color:white; } div.clickable.small{     width:10em; } div.popup{     background-color:white;     border-width:5px;     border-style:solid;     border-color:black;     width:400px;     z-index:255;     position:fixed;     top:10%;     left:10%;     cursor:-moz-grab;     cursor:grab; } div.popup.preview{     width:540px; } div.dragging{     cursor:-moz-grabbing;     cursor:grabbing; } div.popup.fullscreen{     width:96%;     height:96%;     position:absolute;     left:2px;     top:2px; } div.popup div.topBar{     width:100%;     text-align:right;     background-color:#5D9732; } div.popup.fullscreen{     cursor:default; } /*Close button*/ div.popup span.popupButton{     padding-left:5px;     padding-right:5px;     background-color:black;     color:white;     cursor:pointer; } div.popup span.popupButtonSpacer{     background-color:inherit;     padding:0px;     padding-left:3px; } div.popup div.content{     background-color:white;     padding:20px; } div.popup div.content div.image1{     width:300px; } div.popup div.content div.image2{     width:300px; } div.popup.fullscreen div.content div.imageHolder{     float:right;     width:60%; } div.popup.fullscreen div.content div.image1{     height:40%;     float:right; } div.popup.fullscreen div.content div.image2{     height:40%;     float:right; } div.popup.fullscreen div.text{     padding:40px; } div.popup div.content img{     width:100%; } div.popupContent{     display:none; } div.popup.splash{     cursor:default;     position:fixed;     top:2px;     left:2px;     bottom:2px;     right:2px; } div.popup.splash div.returning{     width:60%;     margin-top:20%;     margin-left:15%; } div.popup.splash div.new{     margin-top:1em;     margin-left:15%;     width:60%; } div.popup.checkUnitId input{     width:10em;     margin-top:5%;     margin-bottom:5px; } div#formAwesome{     width:95%;     height:95%;     margin-top:5%; } div.linkToSubmitPage{     margin-top:3px;     width:45em;     font-size:80%; } div.popup.fullscreen.printableForm{     height:auto;     cursor:default; } div.popup.fullscreen.submittableForm{     height:auto;     cursor:default; } div.popup div.previewInstructions{     display:none;     padding:10px; } div.vertPadding{     margin-top:5px; } </style> <style type="text/css" media="screen"> /*Uploader styles*/ div.uploader{     margin-left:10px;     width:auto; } div.uploader img{     width:auto !important; } div#status{     display:hidden; } .progress {   background: white url(/images/progress-bar/progress.gif) no-repeat +50% 0;   margin-right: 0.5em; } .progress-text{   font-size: 0.9em;   font-weight: bold; } .file-remove {   font-size:0.9em;   padding:5px;   color:#ad1a2c; } .file-info {   margin-left:8px; } .file-name {   margin-left:5px; } .completed {   color:#CCC; } </style> <div class="loadingTop">Loading</div> <div class="linkToSubmitPage clickable">     I've already driven to a location and completed a task.  Let me submit my answers! </div> <div class="userLocation">     <form name="userLocationForm">         <h3>Enter your city to find nearby tasks (e.g. San Francisco, CA or Melbourne, Australia): </h3>         <input type="text" name="address" id="userAddress"/>         Search     </form> </div> <div class="acceptedTaskLink clickable">You have already accepted a task!  Click here to view instructions</div> <div class="mapInstructions"><h3>Click on an orange flag to preview a task.</h3></div> <div class="loading">Loading</div> <div id="map"></div>  <div class="popupContent">     <div class="splash">         <div class="topBar">x</div>         <div class="content">             In this task, you will drive to a given location and answer questions about the area.  To perform this task, you must:                 <ol>                     <li>Choose a location from the map interface</li>                     <li>Print out or write down a short form containing questions about the physical location</li>                     <li>Within 24 hours, drive to the chosen location and answer the questions about the location</li>                     <li>Take pictures of the area using a digital camera</li>                     <li>Return to this task, enter in the information you collected, and upload your photos</li>                     <li>Submit the task</li>                 </ol>                          You've now accepted the Task through Mechanical Turk, but you now need to accept a particular location in our map interface.             To continue, please select one of the following:             <div class="buttons">                 <div class="clickable returning">I previously accepted a task here and just need to submit my answer</div>                 <div class="clickable new">I need to browse through the available tasks</div>             </div>         </div>     </div>          <div class="preview">         <div class="topBar">x</div>         <div class="content">                              <h3>IMPORTANT: After accepting this task AND accepting a location, you will have 24 hours to drive to the location, take photos, and return to your computer to submit the answers.</h3>                 <h3>It may take up to 48 hours to approve your results.</h3>                          In this task, you will drive to a given location and answer questions about the area.  To perform this task, you must:                 <ol>                     <li>Choose a location from the map interface</li>                     <li>Print out or write down a short form containing questions about the physical location</li>                     <li>Within 24 hours, drive to the chosen location and answer the questions about the location</li>                     <li>Take pictures of the area using a digital camera</li>                     <li>Return to this task, enter in the information you collected, and upload your photos</li>                     <li>Submit the task</li>                 </ol>                          Before you accept this task, you should see if any tasks are available in your location.  Click the Preview button below to search for tasks in your area.             If you find a task that you want to accept, you need to then click the yellow Accept button in the Mechanical Turk inteface (above this frame).             <div class="clickable preview small">Preview</div>         </div>     </div>                  <div class="confirmReturnUnit">         <div class="topBar">x</div>         <div class="content">             You've already accepted a task!  Are you sure you want to also accept another one?  Make sure you've printed out details of the first task before you accept the next one!         </div>         <div class="buttons">                     <div class="confirm clickable">I've already printed out details of my last task and want also to accept another one</div>                     <div class="vertPadding"></div>                     <div class="cancel clickable">Never mind, bring me back to the last task I accepted</div>         </div>     </div>          <div class="simpleUnitView">         <div class="topBar">x</div>         <div class="content">             <div class="image1">{img1html}</div>                 Address: {address}                 City: {city}                 State: {state}                 Country: {country}                 {unitMapLink}         </div>         <div class="previewInstructions">             You must accept the task by pressing the yellow "Accept" button above this frame (in the Amazon interface) before you can choose this location for your task.         </div>         <div class="viewMore clickable small">Proceed</div>     </div>     <div class="advUnitView">         <div class="topBar">x</div>         <div class="content">             <div class="imageHolder">                 <div class="image1">{img1html}</div>                 <div class="image2">{img2html}</div>             </div>             <div class="text">                 Lat: {Lat}                 Lon: {Lon}                 Street Name: {address}                 City: {city}                 State: {state}                 Country: {country}                 {unitMapLink}             </div>             <div class="instructions">                 To complete this task, you will need to drive to the specified location with a digital camera and a printout of a short (one-page) questionnaire about the area.                 To accept the task and display a printable questionnaire to answer about the location, click the button below.                 DISCLAIMER: You need to drive to the location and take and upload a JPEG digital photo of the specified location to complete this task.             </div>             <div class="accept clickable small">Accept this task</div>         </div>     </div>          <div class="checkUnitId">         <div class="topBar">x</div>         <div class="content">             <h1>Enter in the UNIT ID code given to you earlier.  You must have the UNIT ID to continue with the task:</h1>             Unit Id: <input type="text" name="unitId" class="unitId hidden"/>             <table>                 <tr>                     <td> <div class="clickable small checkUnitId">Proceed</div> </td>                     <td> <div class="clickable small cancel">Cancel</div> </td>                 </tr>             </table>         </div>     </div>          <div class="submittableForm">         <div class="topBar">x</div>         <div class="instructions">             <h1>Before submitting the form, make sure that the below information is the correct location (the one that you drove to).</h1>             <h2>Unit ID:{unitId}</h2>             Lat: {Lat}             Lon: {Lon}             Street Name: {address}             City: {city}             State: {state}             Country: {country}             Please be as descriptive as possible in your answers!             Note that it may take up to 48 hours before your work is approved and you are paid.  Your work will be manually verified.         </div>         <div class="content">             <form method="POST">                 <input type="hidden" name="started_at" class="started_at" value=""/>                 <div class="uploader">                     <h3>File upload</h3>                     <div class="uploadStatus">                         <a href="#" class="browse">Choose images of the road</a>                         <div>                           <div class="current-title"></div>                           <img src="/images/progress-bar/bar.gif" class="progress current-progress" />                         </div>                         <div class="current-text" style="display:none"></div>                         <div>                           <div class="overall-title"></div>                           <img src="/images/progress-bar/bar.gif" class="progress overall-progress" />                           <ul class="list"></ul>                         </div>                         <input type="button" class="upload" value="Upload these images" style="display:none"/>                     </div>                 </div>                 <div class="vertPadding"></div>                 </form>         </div>     </div>          <div class="printableForm">         <div class="topBar">x</div>         <div class="instructions">             <h1>Print out a copy of these questions.  Make sure you write down the UNIT ID, or you will not be able to submit your answers and get paid.  Read and follow the instructions carefully!</h1>             <h2>Unit ID:{unitId}</h2>             <h3>                 Instructions:                 <ol>                     <li>Drive to the location shown in the map and specified in the below details.</li>                     <li>Bring a digital camera and a copy of these questions.  A digital camera that geotags images (stores the location where they were taken) is preferred, if you have access to one (don't worry--you'll still get paid if you use a regular digital camera).  Please use the highest resolution and quality possible on your camera.</li>                     <li>See if there is a street at the location shown in the map with the name given below.</li>                     <li>If so, take a picture of the street and the corresponding street sign containing the name of the street</li>                     <li>EITHER WAY, take at least 4 pictures of the area around the latitude/longtitude position given.  Take one photo in each direction (North, East, South, West).  IMPORTANT: When taking these four photos, please write on a piece of paper the direction (North, East, etc.) in which you are taking the given photo and then hold this label in the picture.  For an example, <a href="http://a1.doloreslabs.com/q82/examples/ex_img_map.JPG">click here</a>.</li>                     <li>If the street mentioned in the task is nearby but not at the latitude/longitude specified, please take a picture of the street sign and make note of the location in as much detail as possible.</li>                     <li>Take as many other pictures as possible to fully provide an understanding of the location and the streets there.</li>                     <li>Answer the questions below for the street and the area around it (the area to consider for this task extends to the edges of the first map image given)</li>                     <li>After you have the answers and photos of the street, refresh the page and choose the option, "I previously accepted a task here and just need to submit my answer".                     Then enter in the Unit ID ({unitId}).</li>                                      </ol>                                      After you've printed the instructions for the task, if you'd like to accept another location in addition to this one (and do both), click the black X on the right side of the green bar above.  Then choose another location by clicking an orange marker.                              </h3>             Lat: {Lat}             Lon: {Lon}             Street Name: {address}             City: {city}             State: {state}             Country: {country}             {unitMapLink}             <div class="imageHolder">                 <div class="image1">{img1html}</div>                 <div class="image2">{img2html}</div>             </div>         </div>         <div class="content">         </div>     </div> </div><cml:text label="Text"/>

data/spec/normalize_spec.rb ADDED Viewed

@@ -0,0 +1,47 @@
+require File.expand_path(File.dirname(__FILE__) + '/spec_helper')
+describe "CML Normalize" do
+  it "normalizes everything to checkboxes or text inputs" do
+    @p = Parser.new(<<-HTML, {:prefix => "u12345", :normalize => true})
+      <cml:select label="Awesome" validates="required" default="Choose an option" instructions="Just be cool about it">
+        <cml:gold src="awesome_gold" regex="\\.asdf\\." flags="i" strict="true"  />
+        <cml:option label="Awesome" />
+        <cml:option label="Cool" />
+        <cml:option label="Rad" />
+        <cml:option label="Neat" />
+      </cml:select>
+      <cml:text label="Opinion" validates="minLength:30" class="large" />
+      <cml:radios label="Hot">
+        <cml:radio label="For sure"/>
+        <cml:radio label="Not" />
+      </cml:radios>
+      <cml:meta label="Neat" gold="true"/>
+    HTML
+  #puts Parser.escape(@p.to_html).gsub(/\n/,"<br/>")
+    @p.to_html.should sorta_match(<<-HTML)
+      <div class="cml" id="u12345">
+        <div class="checkboxes">
+          <h2 class="legend">Awesome</h2>
+          <label><input name="u12345[awesome][]" class="awesome validates-required" value="Awesome" type="checkbox" /> Awesome</label>
+          <label><input name="u12345[awesome][]" class="awesome validates-required" value="Cool" type="checkbox" /> Cool</label>
+          <label><input name="u12345[awesome][]" class="awesome validates-required" value="Rad" type="checkbox" /> Rad</label>
+          <label><input name="u12345[awesome][]" class="awesome validates-required" value="Neat" type="checkbox" /> Neat</label>
+          <p class="instructions">Just be cool about it</p>
+        </div>
+        <div class="text"><label class="legend">Opinion</label>
+          <input name="u12345[opinion]" class="opinion validates-minLength:30 large" value="" type="text" />
+        </div>
+        <div class="checkboxes">
+          <h2 class="legend">Hot</h2>
+          <label><input name="u12345[hot][]" class="hot" value="For sure" type="checkbox" /> For sure</label>
+          <label><input name="u12345[hot][]" class="hot" value="Not" type="checkbox" /> Not</label>
+        </div>
+        <div class="text">
+          <label class="legend">Neat</label>
+          <input name="u12345[neat]" class="neat" value="" type="text" />
+        </div>
+      </div>
+    HTML
+  end
+end

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dolores-cml
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.2
 platform: ruby
 authors:
 - Chris Van Pelt
@@ -9,7 +9,7 @@ autorequire:
 bindir: bin
 cert_chain: []
-date: 2009-09-02 00:00:00 -07:00
+date: 2009-09-07 00:00:00 -07:00
 default_executable:
 dependencies:
 - !ruby/object:Gem::Dependency
@@ -82,7 +82,9 @@ files:
 - spec/fixtures/complex.cml
 - spec/fixtures/html.cml
 - spec/fixtures/invalid.cml
+- spec/fixtures/segfault.cml
 - spec/meta_spec.rb
+- spec/normalize_spec.rb
 - spec/sorta_match.rb
 - spec/spec_helper.rb
 - spec/tags/checkbox_spec.rb
@@ -98,7 +100,6 @@ files:
 - spec/validation_spec.rb
 has_rdoc: false
 homepage: http://github.com/dolores/cml
-licenses:
 post_install_message:
 rdoc_options:
 - --charset=UTF-8
@@ -119,7 +120,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 rubyforge_project:
-rubygems_version: 1.3.5
+rubygems_version: 1.2.0
 signing_key:
 specification_version: 3
 summary: CML is CrowdFlower Markup Language
@@ -127,6 +128,7 @@ test_files:
 - spec/complex_spec.rb
 - spec/converters/jsawesome_spec.rb
 - spec/meta_spec.rb
+- spec/normalize_spec.rb
 - spec/sorta_match.rb
 - spec/spec_helper.rb
 - spec/tags/checkbox_spec.rb