ask 0.3.1 → 0.4.0

data/README.markdown

@@ -5,6 +5,8 @@ Ask is a Rails engine that provides tools to simplify the process of letting you
 Requirements
 ------------
 - Rails 3.1 or higher
+- jQuery
+- jQuery UI
 
 Installation
 ------------
@@ -48,6 +50,7 @@ In your stylesheet manifest file add:
     *= require ask  
     */
 
+If you want your form to start with one question, you can do the following...
 In your asker controller's `new` and `edit` methods you'll need to build the first question and choice. The best way to do this is create a private method:
 
     def build_questions
@@ -58,8 +61,9 @@ In your asker controller's `new` and `edit` methods you'll need to build the fir
 Then at the top of your asker controller, include:
 
     before_filter :build_questions, :only => [:new, :edit]
+    # or you can call the build_questions method inside the new or edit controller
 
-In your answerer controller's `new` and `edit` methods you'll want to call `build_or_create_answers` and pass it in the appropriate questions. Such as:
+In your answerer controller's `new` and `edit` methods you'll need to call `build_or_create_answers` and pass it in the appropriate questions. Such as:
 
     @event_registration.build_or_create_answers @event_registration.event.questions
 

data/app/assets/javascripts/ask.js.coffee

@@ -1,54 +1,158 @@
-#= require jquery.handle-nesting
-
-$(document).ready ->
-  handleChoiceNesting = (container) ->
-    $(container).find("ul.choices").handleNesting 
-      nameMatch: /(.*\[)[0-9]+(\].*)/
-      nameReplace: "$1{NEW_ID}$2"
-      afterAdd: (added) ->
-        insertDeleteButtons added.parent(), ".choice"
-  
+jQuery ->
+  ### 
+    Handle adding and removing fields 
+  ###
+  $('form').on 'click', '.remove_fields', (event) ->
+    $(this).prev('input[type=hidden]').val('1')
+    $(this).closest('fieldset').hide()
+    event.preventDefault()
+
+  $('form').on 'click', '.add_fields', (event) ->
+    time = new Date().getTime()
+    regexp = new RegExp($(this).data('id'), 'g')
+    new_question = $($(this).data('fields').replace(regexp, time))
+    $(this).before(new_question)
+    createQuestionPreview new_question
+    toggleEditMode new_question
+    event.preventDefault()
+
+  ### 
+    Update the edit preview mode between textQuestion, ChecklistQuestion, etc.
+  ###
   updateChoiceVisibility = (select) ->
-    if select.val() == "ChooseOneQuestion" or select.val() == "ChecklistQuestion"
-      select.parents("dl").find("dd.choices:hidden").slideDown "fast"
-    else
-      select.parents("dl").find("dd.choices:visible").slideUp "fast"
+    question = select.parents("fieldset.question")
+    question_choices = question.find(".edit-question-choices")
+    question_choices.find(".question-type").hide()  # first hide all the question types
+    current_question_type = question_choices.find(".question-type."+select.val())
+    current_question_type.show()  # Then show the current question type
+    question.find('.required-option').show()  # show the required-option field, it may be hidden later by certain question types
+    if select.val() == 'ChooseOneQuestion'
+      current_question_type.removeClass('show-checkbox').addClass('show-radio')
+    else if select.val() == 'ChecklistQuestion'
+      current_question_type.removeClass('show-radio').addClass('show-checkbox')
+    else if select.val() == 'FormSection'
+      question.find('.required-option').hide()
   
+  # Update preview type whenever the user changes the type of this question
   bindTypeChange = (select) ->
-    select.change ->
+    select.live "change", ->
       updateChoiceVisibility $(this)
-  
-  insertDeleteButtons = (container, selector) ->
-    container.find(selector).each ->
-      if $(this).children("button.remove").length == 0
-        $("<button type=\"button\" class=\"remove\">Remove</button>").click(->
-          $(this).parents(selector).fadeOut "fast", ->
-            $(this).remove()
-            container.find("button.remove:last").remove()  if container.find(selector).length == 1
-          
-          false
-        ).appendTo $(this)
-  
-  makeSortable = ->
-    questions = $("form ul.ask.questions")
-    questions.sortable stop: (event, ui) ->
-      order = 1
-      questions.find(".position-wrapper").each ->
-        $(this).find("input").val order
-        order++
-  
-  selects = $("dd.type > select")
+
+  # Update once when the DOM first loads
+  selects = $(".select-question-type select")
   bindTypeChange selects
   selects.each ->
     updateChoiceVisibility $(this)
-  
+
+
+  ### 
+    Make the list sortable 
+  ###
+  makeSortable = ->
+    questions = $("form .ask.questions")
+    questions.sortable
+      axis: "y"
+      stop: (event, ui) ->
+        order = 1
+        questions.find(".position-wrapper").each ->
+          $(this).find("input").val order
+          order++
   makeSortable()
-  if jQuery.fn.handleNesting
-    $("form ul.ask.questions").handleNesting afterAdd: (added) ->
-      handleChoiceNesting added
-      insertDeleteButtons added.parent(), ".question"
-      bindTypeChange added.find("dd.type > select")
-      makeSortable()
-  
-  $("form ul.ask.questions").children("li").each (i, li) ->
-    handleChoiceNesting li
+
+
+  ###
+    Toggle between 'edit' question and 'preview' question
+  ###
+  createQuestionPreview = (question) ->
+    if question.children('preview-question-fields').length == 0 # if we don't have a question preview yet
+      asker = question.serialize().match(/^\w+/)[0] # get asker name
+      question_type = question.find('.select-question-type select').val() # get question type
+      question_details = question.serializeObject(/^.*?\[\d+\]/)  # get question details and choices
+
+      preview_section = $("<div class='preview-question-fields'></div>") # create DOM object
+      question.append preview_section
+      q_label = $("<label class='preview-question-name'>"+question_details.name+"</label>")
+      q_label.addClass("required") if question_details.required == "1"
+      q_help_text = if (question_details.instructions != "") then $("<p class='help-block'>"+question_details.instructions+"</p>") else false
+
+      # generate preview based on question type
+      switch question_type
+        when "TextQuestion"
+          preview_section.append(q_label).append("<input type='text'>")
+          preview_section.append(q_help_text) if q_help_text
+        when "EssayQuestion"
+          preview_section.append(q_label).append("<textarea></textarea>")
+          preview_section.append(q_help_text) if q_help_text
+        when "ChooseOneQuestion"
+          preview_section.append(q_label)
+          preview_section.append(q_help_text) if q_help_text
+          $.each question_details.choices_attributes, (k,v) ->
+            unless v._destroy == "1"
+              checkbox_item = $("<div class='checkbox-preview-item'></div>")
+              checkbox_item.append("<input type='radio'>")
+              checkbox_item.append("<span>"+v.name+"</span>")
+              preview_section.append(checkbox_item)
+        when "ChecklistQuestion"
+          preview_section.append(q_label)
+          preview_section.append(q_help_text) if q_help_text
+          $.each question_details.choices_attributes, (k,v) ->
+            unless v._destroy == "1"
+              checkbox_item = $("<div class='checkbox-preview-item'></div>")
+              checkbox_item.append("<input type='checkbox'>")
+              checkbox_item.append("<span>"+v.name+"</span>")
+              preview_section.append(checkbox_item)
+        when "FormSection"
+          preview_section.append("<h3>"+question_details.name+"</h3>")
+          preview_section.append(q_help_text) if q_help_text
+          preview_section.append("<hr/>")
+
+  toggleEditMode = (question) ->
+    if question.hasClass('preview')
+      $('fieldset.question.edit').each ->  # first put all other questions into preview mode.
+        toggleEditMode($(this))
+      question.find('.preview-question-fields').remove()
+      question.find('.edit-question-link').html('Done')
+      question.removeClass('preview').addClass('edit')
+
+    else if question.hasClass('edit')
+      createQuestionPreview(question)
+      question.find('.edit-question-link').html('Edit')
+      question.removeClass('edit').addClass('preview')
+
+
+  $('fieldset.question').each ->
+    createQuestionPreview $(this)
+
+  $('a.edit-question-link').live "click", (e) ->
+    toggleEditMode($(this).closest('fieldset.question'))
+    e.preventDefault()
+
+
+jQuery.fn.serializeObject = (ignore_regex = null) ->
+  arrayData = @serializeArray()
+  objectData = {}
+
+  pushData = (node, hash_tail, value) ->
+    hash = hash_tail.shift()
+    if hash_tail.length == 0
+      node[hash] = value
+    else
+      unless node[hash]?
+        node[hash] = {}
+      pushData(node[hash], hash_tail, value)
+
+  $.each arrayData, ->
+    if @value?
+      value = @value
+    else
+      value = ''
+
+    # splits nested hash into array of keys
+    #  @name needs to be in the form of person[attributes][about][name]
+    #  It can also ignore a regular expression
+    hash_array = @name.replace(ignore_regex, "").match(/\w+/g)
+
+    # recursive function that builds a nested object based on the name
+    pushData(objectData, hash_array, value)
+
+  return objectData

data/app/assets/stylesheets/ask.css.scss

@@ -0,0 +1,58 @@
+.ask.questions { margin: 0; list-style-type: none; background: white; border: solid 1px #ddd;
+  a.add_fields { display: block; padding: 15px; 
+    &:hover { background-color: #FFF9DD; }
+  }
+  fieldset { border: none; }
+  
+  >fieldset.question { position: relative; margin: 0; padding: 10px 10px 25px 10px; cursor: move;
+      
+    input[type=text] { width: 300px; }
+    textarea { height: 3em; width: 60%; font-family: sans-serif; }
+    .question-action-links { float: right; display: none; }
+
+    &:hover { background-color: #FFF9DD; 
+      .question-action-links { display: inline-block; }
+    }
+
+    &.preview {   // hide edit fields when in preview mode
+      .edit-question-fields { display: none; }
+      input[type="checkbox"], input[type="radio"] { margin: 0 8px 4px; }
+      label.preview-question-name { font-weight: bold; }
+      h3 { margin-bottom: 0; }
+      hr { margin-bottom: 0; border-top: 1px solid #EEE; border-bottom: none; }
+      .help-block { color: #595959; }
+    }
+    &.edit { background-color: #FFF4C2; 
+      .question-action-links { display: inline-block; }
+      table {
+        th { text-align: left; }
+      }
+
+      .askwidget-fieldlabel {
+        label { font-weight: bold; display: inline-block; margin-right: 20px; }
+      }
+
+      .required-option { display: inline-block;
+        input[type="checkbox"] { margin: 0 5px 0; }
+      }
+
+      .edit-question-choices { margin: 10px;
+        .start-hidden { display: none; }
+        .question-type {
+          fieldset.choice { margin-bottom: 10px;
+            input[type="radio"], input[type="checkbox"] { display: none; margin-right: 5px; }
+            input[type="text"] { margin: 0; }
+          }
+          &.show-radio {
+            fieldset.choice input[type="radio"] { display: inline-block; }
+          }
+          &.show-checkbox {
+            fieldset.choice input[type="checkbox"] { display: inline-block; }
+          }
+        }
+      }
+
+    }
+
+  }  // End fieldset.question
+}

data/app/helpers/ask_helper.rb

@@ -1,5 +1,14 @@
 module AskHelper
 
+  def link_to_add_fields(name, f, association)
+    new_object = f.object.send(association).klass.new
+    id = new_object.object_id
+    fields = f.fields_for(association, new_object, child_index: id) do |builder|
+      render("asker/"+association.to_s.singularize + "_fields", f: builder)
+    end
+    link_to(name, '#', class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")})
+  end
+
   def question_label(question, builder=nil)
     if question.type.to_sym == :ChecklistQuestion
       h(question.name)

data/app/views/asker/_choice_fields.html.haml

@@ -0,0 +1,6 @@
+%fieldset.choice
+  %input.radio-preview{type: 'radio', disabled: "true"}
+  %input.checkbox-preview{type: 'checkbox', disabled: "true"}
+  = f.text_field :name, :placeholder=>'Choice'
+  = f.hidden_field :_destroy
+  = link_to "remove", '#', class: "remove_fields"

data/app/views/asker/_choices.html.haml

@@ -0,0 +1,17 @@
+.question-type.TextQuestion
+  %input.askwidget-disabledpreview{:disabled => "true", :name => "undefined", :type => "text", :value => "Their answer"}
+
+.question-type.EssayQuestion.start-hidden
+  %textarea.askwidget-disabledpreview{:disabled => "true", :name => "undefined", :type => "text", :value => "Their answer"}
+
+.question-type.ChooseOneQuestion.ChecklistQuestion.start-hidden
+  = f.fields_for(:choices) do |choice|
+    = render 'asker/choice_fields', f: choice
+
+  = link_to_add_fields "Add Choice", f, :choices
+
+.question-type.FormSection.start-hidden
+  %h4 Name of section
+  %p
+    This will provide a divider between form sections
+

data/app/views/asker/_form.html.haml

@@ -1,27 +1,5 @@
-%ul.ask.questions
-  =f.fields_for(:questions) do |question|
-    %li.question
-      %dl
-        .hidden.position-wrapper
-          =question.hidden_field(:position)
-        %dt.name=question.label(:name)
-        %dd.name=question.text_field(:name, :placeholder=>'Title')
-        %dt.instructions=question.label(:instructions)
-        %dd.instructions=question.text_area(:instructions, :placeholder=>'Instructions')
-        %dt.type=question.label(:type)
-        %dd.type=question.collection_select(:type, Question::TYPES, :to_s, :titleize)
-        %dt.required=question.label(:required)
-        %dd.required=question.select(:required, [['Optional', false], ['Required', true]])
-        -unless question.object.new_record?
-          %dt.delete=question.label(:_destroy, 'Delete')
-          %dd.delete=question.check_box(:_destroy)
-        %dt.choices
-        %dd.choices
-          %ul.choices
-            =question.fields_for(:choices) do |choice|
-              %li.choice
-                =choice.label(:name)
-                =choice.text_field(:name, :placeholder=>'Choice')
-                -unless choice.object.new_record?
-                  =choice.label(:_destroy, 'Remove')
-                  =choice.check_box(:_destroy)
+.ask.questions
+  =f.fields_for(:questions) do |f|
+    =render 'asker/question_fields', f: f
+
+  = link_to_add_fields "Add Question", f, :questions

data/app/views/asker/_question_fields.html.haml

@@ -0,0 +1,33 @@
+%fieldset.question.preview
+  .question-action-links
+    =link_to 'Edit', '#', class: 'edit-question-link'
+    |
+    = f.hidden_field :_destroy
+    = link_to "Remove", '#', class: "remove_fields"
+  .hidden.position-wrapper
+    =f.hidden_field(:position)
+  .edit-question-fields
+    %table.question-details
+      %tbody
+        %tr
+          %th
+            %span.askwidget-fieldlabel=f.label(:name)
+          %td=f.text_field :name, class: 'askwidget-inputfield'
+        %tr
+          %th
+            %span.askwidget-fieldlabel= f.label(:instructions, 'Help Text')
+          %td=f.text_field :instructions, class: 'askwidget-inputfield'
+        %tr.select-question-type
+          %th
+            %span.askwidget-fieldlabel=f.label(:type)
+          %td=f.collection_select :type, Question::TYPES, :to_s, :titleize, class: 'askwidget-inputfield'
+
+
+    .edit-question-choices
+      =render 'asker/choices', f: f
+
+    .askwidget-buttons
+      =link_to "Done", "#", class: 'edit-question-link btn'
+      .required-option
+        =f.check_box :required, class: 'askwidget-inputfield'
+        %span.askwidget-fieldlabel=f.label(:required, "Make this a required question")

data/lib/ask/version.rb

@@ -1,3 +1,3 @@
 module Ask
-  VERSION = "0.3.1"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ask
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.4.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-06-04 00:00:00.000000000 Z
+date: 2012-12-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -117,7 +117,7 @@ files:
 - app/assets/images/add.png
 - app/assets/images/delete.png
 - app/assets/javascripts/ask.js.coffee
-- app/assets/stylesheets/ask.css.sass
+- app/assets/stylesheets/ask.css.scss
 - app/helpers/ask_helper.rb
 - app/models/answer.rb
 - app/models/checklist_question.rb
@@ -129,8 +129,11 @@ files:
 - app/models/text_question.rb
 - app/views/answerer/_answers.html.haml
 - app/views/answerer/_form.html.haml
+- app/views/asker/_choice_fields.html.haml
+- app/views/asker/_choices.html.haml
 - app/views/asker/_form.html.haml
 - app/views/asker/_form_preview.html.haml
+- app/views/asker/_question_fields.html.haml
 - db/migrate/20110913214050_create_answers.rb
 - db/migrate/20110913214255_create_choices.rb
 - db/migrate/20110913214410_create_questions.rb
@@ -139,7 +142,6 @@ files:
 - lib/ask/engine.rb
 - lib/ask/version.rb
 - lib/ask.rb
-- lib/assets/javascripts/jquery.handle-nesting.js.coffee
 - MIT-LICENSE
 - Rakefile
 - README.markdown

data/app/assets/stylesheets/ask.css.sass

@@ -1,139 +0,0 @@
-ul.ask.questions
-  margin: 0
-  list-style-type: none
-  
-  button.remove:after
-    content: " this question"
-
-  >li
-    position: relative
-    margin: 10px 0
-    padding: 10px 10px 25px 10px
-    border: solid 1px #ccc
-    background-color: #eee
-    cursor: move
-    
-    dt
-      display: none
-    
-    dd.type select
-      position: absolute
-      top: 10px
-      right: 120px
-      width: 100px
-      
-    dd.choices
-      display: none
-
-      a.delete
-        float: none
-        text-indent: 400px
-        width: 16px
-        margin: 0px
-
-      a.delete:after
-        content: ""
-
-    dd.required select
-      position: absolute
-      top: 10px
-      right: 10px
-      width: 100px
-      
-    dd.instructions
-      margin-top: 10px
-    
-    textarea
-      height: 3em
-      font-family: sans-serif
-      
-    input[type=text]
-      width: 300px
-      
-    input[type=checkbox]
-      display: none
-      
-    button
-      float: right
-      clear: both
-    
-    button.remove
-      padding: 0px
-      color: #000
-      font-family: sans-serif
-      font-size: 9pt
-      font-weight: normal
-      text-shadow: none
-      border: none
-      background: image-url("delete.png") no-repeat transparent
-      display: inline-block
-      vertical-align: 1px
-      text-indent: 20px
-      margin: 5px
-      float: right
-      height: 16px
-      text-decoration: none
-      -moz-box-shadow: none
-      -webkit-box-shadow: none
-      box-shadow: none
-      
-    button.remove:after
-      content: " Question"
-
-    button.remove:active
-      top: 0px
-    
-    button.add
-      float: none
-      height: 16px
-      padding: 0 20px 0 0
-      color: #000
-      font-family: sans-serif
-      font-size: 9pt
-      font-weight: normal
-      text-shadow: none
-      border: none
-      background: image-url("add.png") left center no-repeat transparent
-      -moz-box-shadow: none
-      -webkit-box-shadow: none
-      box-shadow: none
-      text-indent: 20px
-      
-    button.add:after
-      content: " Choice"
-    
-    ul.choices
-    
-      li
-        margin: 10px 0
-        padding: 0
-        border: none
-        background: transparent
-        
-        label
-          display: none
-          
-        input[type=text]
-          width: 200px
-        
-        input[type=checkbox]
-          display: none
-        
-        button.remove
-          position: relative
-          float: none
-          margin: 0px
-          right: 0
-          bottom: 0
-          height: 16px
-          width: 16px
-          padding: 0
-          text-indent: -9999px
-          border: none
-          background: image-url("delete.png") no-repeat transparent
-          -moz-box-shadow: none
-          -webkit-box-shadow: none
-          box-shadow: none
-      
-        button.remove:after
-          content: ""

data/lib/assets/javascripts/jquery.handle-nesting.js.coffee

@@ -1,84 +0,0 @@
-(($) ->
-  $.HandleNesting = (el, options) ->
-    base = this
-    base.$el = $(el)
-    base.el = el
-    base.items = []
-    base.blank = null
-    base.$el.data "HandleNesting", base
-    base.init = ->
-      base.options = $.extend({}, $.HandleNesting.defaultOptions, options)
-      base.items = base.$el.children("li")
-      base.blank = $(base.items[base.items.length - 1]).clone()  if base.items.length
-      base.addButtons()
-    
-    base.addButtons = ->
-      base.addAddButton()
-      base.items.each (i, item) ->
-        base.addRemoveButton item
-    
-    base.addAddButton = ->
-      addButton = $("<button type=\"button\"/>").addClass("add").text("Add")
-      addButton.click ->
-        base.add()
-      
-      base.$el.after addButton
-    
-    base.addRemoveButton = (item) ->
-      destroys = $(item).find("input[name*=_destroy]")
-      destroys.each (i, destroy) ->
-        if $(item).find("button.remove").length == 0
-          removeButton = $("<button type=\"button\"/>").addClass("remove").text("Remove")
-          removeButton.click ->
-            base.remove this
-          
-          $(item).append removeButton
-        $(destroy).hide()
-        $(item).find("label[for=" + $(destroy).attr("id") + "]").hide()
-    
-    base.add = ->
-      newId = new Date().getTime()
-      match = base.options.nameMatch
-      replace = base.options.nameReplace.replace(/{NEW_ID}/g, newId)
-      base.options.beforeAdd()  if base.options.beforeAdd?
-      added = base.blank.clone().hide()
-      added.find("*").each (i, el) ->
-        $(el).attr "id", null
-      
-      added.find("input, select, textarea").each (i, el) ->
-        $(el).val ""
-        el.name = el.name.replace(match, replace)
-        
-      base.addRemoveButton added
-      
-      base.$el.append added
-      base.options.afterAdd added  if base.options.afterAdd?
-      added.fadeIn "fast"
-      
-      # Temporary hack to fix the bug where choices don't 
-      #    display if you go back to edit the form and the 
-      #    last question was a choose one question.
-      added.find("dd.choices").css "height", "auto"
-      added.find("dd.choices").hide()
-      # Remove any extra choices field and just leave the first one
-      firstchoice = added.find("ul.choices").children().first()
-      added.find("ul.choices").html firstchoice
-    
-    base.remove = (item) ->
-      li = $(item).closest("li")
-      li.find("input[name*=_destroy]").val 1
-      li.find("input:checkbox[name*=_destroy]").attr "checked", "checked"
-      li.fadeOut "fast"
-    
-    base.init()
-  
-  $.HandleNesting.defaultOptions = 
-    nameMatch: /\[[0-9]+\]/
-    nameReplace: "[{NEW_ID}]"
-    beforeAdd: null
-    afterAdd: null
-  
-  $.fn.handleNesting = (options) ->
-    @each ->
-      new $.HandleNesting(this, options)
-) jQuery