wheelhouse-forms 1.0

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2011-12 Sam Pohlenz
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,39 @@
+Forms Plugin for Wheelhouse CMS
+===============================
+
+![Screenshot of forms plugin](https://www.wheelhousecms.com/media/cdfaf962/Forms-Plugin.png)
+
+This gem makes it easy to add customizable forms (such as contact forms) into your [Wheelhouse CMS](https://www.wheelhousecms.com/) site, via an easy-to-use form builder. Form submissions are saved within the CMS and may optionally be emailed to one or more recipients.
+
+The following field types are supported:
+
+ - single-line text (with HTML5 input types)
+ - text areas
+ - select/dropdown box
+ - single checkboxes
+ - checkbox set
+ - radio button set
+ - US/Australian states dropdown
+ - countries dropdown
+ - HTML content
+ - custom fields
+ - nesting within field sets
+
+Other features include:
+
+ - server-side and HTML5 form validation
+ - CSV export of submissions
+
+
+Installation & Usage
+--------------------
+
+**1. Add `wheelhouse-forms` to your Gemfile:**
+
+    gem "wheelhouse-forms"
+
+Then run `bundle install`.
+
+**2. Create a new form from the New Page dropdown.**
+
+**3. To customize, copy the `form.html.haml` template from `app/templates` to your theme templates folder.**

data/app/assets/javascripts/wheelhouse-forms/admin.js

@@ -0,0 +1,125 @@
+//= require ./jquery.autogrow
+//= require ./jquery.options
+
+$(function() {
+
+var root = $('#fields');
+var target;
+
+function resetTarget() {
+  target = $('.fields:last', root);
+  if (target.length < 1) target = root;
+}
+resetTarget();
+
+function prefixFor(container, index) {
+  return container.attr('data-prefix') + "[" + index + "]";
+}
+
+function insertFieldHandler(template, optionize, callback) {
+  return function() {
+    var nextIndex = parseInt($('> :last-child', target).attr('data-index')) + 1 || 0;
+    var field = $(template).tmpl({ index: nextIndex, prefix: prefixFor(target, nextIndex) });
+
+    field.appendTo(target);
+    $('input[placeholder]', field).placeholder().click();
+    
+    if (optionize) { $('ul.options', field).options(); }
+    if ($.isFunction(callback)) { callback(field); }
+    
+    return false;
+  }
+}
+
+$('.tools li.text-field a').click(insertFieldHandler("#text-field-template"));
+$('.tools li.text-area a').click(insertFieldHandler("#text-area-template"));
+$('.tools li.select-field a').click(insertFieldHandler("#select-field-template", true));
+$('.tools li.checkbox a').click(insertFieldHandler("#checkbox-template"));
+$('.tools li.checkboxes a').click(insertFieldHandler("#checkboxes-template", true));
+$('.tools li.submit-button a').click(insertFieldHandler("#submit-button-template"));
+$('.tools li.radio-buttons a').click(insertFieldHandler("#radio-buttons-template", true));
+$('.tools li.states-dropdown a').click(insertFieldHandler("#states-dropdown-template"));
+$('.tools li.countries-dropdown a').click(insertFieldHandler("#countries-dropdown-template"));
+$('.tools li.content-field a').click(insertFieldHandler("#content-field-template", false, function(field) {
+  $('textarea.editor', field).editor();
+}));
+$('.tools li.custom-field a').click(insertFieldHandler("#custom-field-template"));
+
+$('.tools li.field-set a').click(function() {
+  var nextIndex = parseInt($('#fields > :last-child').attr('data-index')) + 1 || 0;
+  var fieldset = $('#field-set-template').tmpl({ index: nextIndex, prefix: prefixFor(root, nextIndex) });
+  fieldset.appendTo(root);
+  
+  target = $('.fields', fieldset);
+  target.sortable(SortableOptions);
+  
+  return false;
+});
+
+$('ul.options', root).options();
+
+root.delegate('a.delete', 'click', function() {
+  if (confirm("Are you sure you want to remove this field?")) {
+    var field = $(this).parent();
+    var isCurrentTarget = field.find('.fields').get(0) == target.get(0);
+    
+    field.remove();
+    if (isCurrentTarget) { resetTarget(); }
+    
+    refreshFields();
+  }
+  
+  return false;
+});
+
+
+function refreshFields() {
+  function replacePrefix(input, prefix) {
+    var name = $(input).attr('name').replace(/.*(\[[^\[\]]+\](\[\])?)$/, "$1");
+    $(input).attr('name', prefix + name);
+  }
+  
+  $('#fields > div').each(function(index) {
+    var prefix = $('#fields').attr("data-prefix") + "[" + index + "]";
+    $(this).attr('data-index', index);
+    
+    $('input:not(.fields input), textarea:not(.fields textarea), select:not(.fields select)', this).each(function() {
+      replacePrefix(this, prefix);
+    });
+    $('> .fields', this).attr('data-prefix', prefix + "[fields]");
+  });
+  
+  $('.fields').each(function() {
+    var fieldsPrefix = $(this).attr('data-prefix');
+    
+    $('> div', this).each(function(index) {
+      var prefix = fieldsPrefix + "[" + index + "]";
+      $(this).attr('data-index', index);
+      
+      $('input, textarea, select', this).each(function() { replacePrefix(this, prefix); });
+    });
+  });
+}
+
+var BaseSortableOptions = {
+  items:       '> div',
+  handle:      '> .drag',
+  placeholder: 'drag-placeholder',
+  tolerance:   'intersect',
+  toleranceElement: '> .drag-area',
+  connectWith: '.fields',
+  forcePlaceholderSize: true,
+  start: function(e, ui) {
+    $('textarea.editor', ui.item).removeEditor();
+  },
+  stop: function(e, ui) {
+    $('textarea.editor', ui.item).editor();
+    refreshFields();
+  }
+};
+var SortableOptions = $.extend({}, BaseSortableOptions, { connectWith: '#fields, .fields' });
+
+$('#fields').sortable(BaseSortableOptions); // Top-level
+$('.fields').sortable(SortableOptions);     // Fieldsets
+
+});

data/app/assets/javascripts/wheelhouse-forms/jquery.autogrow.js

@@ -0,0 +1,50 @@
+$.fn.autoGrowInput = function(o) {
+  o = $.extend({
+      maxWidth: 400,
+      minWidth: 150,
+      comfortZone: 40
+    }, o);
+
+  this.filter('input:text').each(function() {
+    var minWidth = o.minWidth || $(this).width(),
+      val = '',
+      input = $(this),
+      testSubject = $('<div />').css({
+        position: 'absolute',
+        top: -9999,
+        left: -9999,
+        width: 'auto',
+        fontSize: input.css('fontSize'),
+        fontFamily: input.css('fontFamily'),
+        fontWeight: input.css('fontWeight'),
+        letterSpacing: input.css('letterSpacing'),
+        whiteSpace: 'nowrap'
+      }),
+      check = function() {
+        if (val === (val = input.val())) {return;}
+        
+        // Enter new content into testSubject
+        var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        testSubject.html(escaped);
+        
+        // Calculate new width + whether to change
+        var testerWidth = testSubject.width(),
+          newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
+          currentWidth = input.width(),
+          isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
+                                 || (newWidth > minWidth && newWidth < o.maxWidth);
+        
+        // Animate width
+        if (isValidWidthChange) {
+          input.width(newWidth);
+        }
+      };
+
+    testSubject.insertAfter(input);
+
+    $(this).bind('keyup keydown blur update', check);
+    check();
+  });
+
+  return this;
+};

data/app/assets/javascripts/wheelhouse-forms/jquery.options.js

@@ -0,0 +1,24 @@
+$.fn.options = function() {
+  return $(this).each(function() {
+    $(this).delegate("li input", "blur", function() {
+      var li = $(this).parent();
+      
+      if ($(this).val() == "" && !li.is(":last-child")) {
+        li.remove();
+      }
+    });
+    
+    $(this).delegate("li:last-child input", "keydown", function(e) {
+      // Tab key pressed
+      if (e.keyCode == '9' && $(this).val() != '') {
+        e.preventDefault();
+        
+        var li = $(this).parent();
+        var next = li.clone().find('div').remove().end().insertAfter(li);
+        next.find('input').val('').width('auto').autoGrowInput().focus();
+      }
+    });
+    
+    $("input:text", this).autoGrowInput();
+  });
+};

data/app/assets/stylesheets/wheelhouse-forms/admin.css.sass

@@ -0,0 +1,244 @@
+@import compass
+
+=field
+  position: relative
+  margin: 10px 0
+  padding: 0 0 0 32px
+  +border-radius(4px)
+
+=colored-field( $background, $border, $text )
+  background: $background
+  border: 1px solid $border
+  
+  label
+    color: $text
+  
+  .drag
+    border-right: 1px solid $border
+
+=blue
+  +colored-field(#f3f7fa, #cbd4da, #76828a)
+
+=green
+  +colored-field(#f3f8f4, #d3dbd2, #748572)
+
+=orange
+  +colored-field(#faf8f0, #e1ddc8, #8c8977)
+
+=purple
+  +colored-field(#fdfafd, #e3d2e3, #987898)
+
+.drag-area
+  padding: 6px
+  margin-left: -32px
+  padding-left: 38px
+  
+  .field-set > &
+    margin-left: -14px
+    padding-left: 20px
+
+#fields
+  label
+    display: inline
+    
+  input[type=text]
+    width: 40%
+    display: inline
+
+  select
+    margin: 0.4em 0
+    padding: 0.5% 0.2% 0.2% 0.2%
+    font-size: 110%
+
+  input, select
+    font-size: 100%
+    
+    &.placeholder
+      color: #ccc
+  
+  label
+    color: #545454
+    font-weight: bold
+    margin-right: 0.5em
+    
+    &.required
+      float: right
+      margin: 0.5em 0
+      margin-right: 10%
+      font-weight: normal
+      font-size: 95%
+      
+      input
+        margin-right: 4px
+  
+  span.note
+    font-size: 95%
+    color: #a9a9a9
+  
+  .field-set
+    +field
+    background: #fdfefe
+    border: 1px solid #ccc
+    padding-left: 14px
+    
+    .placeholder, .text-field, .text-area, .select-field, .checkbox, .submit-button, .states-dropdown, .countries-dropdown, .radio-buttons, .checkboxes, .custom-field, .content-field
+      margin-left: 0
+      margin-right: 0
+    
+    .fields
+      margin-right: 5px
+    
+  .text-field, .text-area, .select-field, .checkbox, .submit-button, .states-dropdown, .countries-dropdown, .radio-buttons, .checkboxes, .custom-field, .content-field
+    +field
+    min-height: 26px
+    
+    input[type=text]
+      width: 47%
+      
+    select
+      display: inline
+      width: 17%
+      margin-left: 2%
+    
+    .drag
+      width: 24px
+    
+    a.delete
+      top: 12px
+      right: 8px
+  
+  .text-field, .text-area, .content-field
+    +blue
+  
+  .checkbox, .radio-buttons, .checkboxes
+    +orange
+  
+  .select-field, .states-dropdown, .countries-dropdown
+    +green
+  
+  .submit-button, .custom-field
+    +purple
+  
+  .drag-placeholder
+    +field
+    border: 1px dashed #ccc
+    padding: 6px 6px 6px 38px
+  
+  .content-field
+    a.delete
+      top: 14px
+      right: 14px
+    
+  .field-set .content-field
+    a.delete
+      right: 12px
+  
+  .custom-field
+    input[type=text]
+      width: 40%
+  
+  ul.options
+    line-height: 2.6em
+    min-height: 2em
+    margin-top: 0.5em
+    
+    li
+      display: inline
+      margin-right: 5px
+    
+      input[type=text]
+        width: auto
+        min-width: 8em
+  
+  .drag
+    position: absolute
+    top: 0
+    left: 0
+    cursor: move
+    width: 7px
+    height: 100%
+    background: image-url("wheelhouse/backgrounds/drag.png") repeat
+    border-right: 1px solid #dfdfdf
+    +border-left-radius(4px)
+    
+    img
+      margin: 12px 4px
+  
+  .fields
+    min-height: 100px
+  
+  a.delete
+    position: absolute
+    right: 14px
+    top: 16px
+    z-index: 99
+    width: 16px
+    height: 16px
+    background: image-url("wheelhouse/icons/delete-item.png") no-repeat
+    text-indent: -9999px
+    opacity: 0.5
+    
+    &:hover
+      opacity: 1.0
+
+.tools li
+  a
+    padding-left: 45px
+    background-position: 17px center
+    
+    &:hover
+      background-color: #d3dadf
+
+  &.text-field a
+    background-image: image-url("wheelhouse-forms/text-field.png")
+
+  &.text-area a
+    background-image: image-url("wheelhouse-forms/text-area.png")
+  
+  &.select-field a
+    background-image: image-url("wheelhouse-forms/select.png")
+  
+  &.checkbox a
+    background-image: image-url("wheelhouse-forms/checkbox.png")
+  
+  &.checkboxes a
+    background-image: image-url("wheelhouse-forms/checkboxes.png")
+
+  &.radio-buttons a
+    background-image: image-url("wheelhouse-forms/radio-buttons.png")
+  
+  &.field-set a
+    background-image: image-url("wheelhouse-forms/field-set.png")
+  
+  &.submit-button a
+    background-image: image-url("wheelhouse-forms/submit-button.png")
+  
+  &.states-dropdown a
+    background-image: image-url("wheelhouse-forms/states.png")
+  
+  &.countries-dropdown a
+    background-image: image-url("wheelhouse-forms/countries.png")
+    
+  &.content-field a
+    background-image: image-url("wheelhouse-forms/content.png")
+    
+  &.custom-field a
+    background-image: image-url("wheelhouse-forms/custom.png")
+
+.sidebar li a.export-csv
+  background-image: image-url("wheelhouse-forms/csv.png")
+  padding-left: 40px
+
+.field
+  li
+    margin-bottom: 0.2em
+
+.shaded
+  h2
+    border-bottom: 1px solid #ddd
+    padding-bottom: 5px
+    margin-right: 6%
+  
+  .inline input
+    margin-right: 1em
+