browsercms 3.5.7 → 4.0.0.alpha

data/app/assets/javascripts/cms/core_library.js.erb

@@ -1,9 +1,8 @@
 //
 // Defines Core BrowserCMS functions used throughout the application.
 //
-//= require jquery
 //
-jQuery(function ($) {
+jQuery(function($) {
 
     //It would be cool if these were added to the real jQuery
     //You can call this a few ways:
@@ -11,7 +10,7 @@ jQuery(function ($) {
     //createElement('p','hi') => "<p>hi</p>"
     //createElement('p', {align: 'center'}) => "<p align="center"/>"
     //createElement('p','hi',{align: 'center'}) => "<p align="center">hi</p>"
-    $.createElement = function (tag_name, tag_value, tag_attrs) {
+    $.createElement = function(tag_name, tag_value, tag_attrs) {
         var name = tag_name
         if (typeof tag_value == "object") {
             var value = null
@@ -22,7 +21,7 @@ jQuery(function ($) {
         }
         var element = $(document.createElement(tag_name))
         if (attrs) {
-            $.each(attrs, function (k, v) {
+            $.each(attrs, function(k, v) {
                 element.attr(k, v)
             })
         }
@@ -40,33 +39,39 @@ jQuery(function ($) {
     ]
 
     $.cms = {
-        sanitizeFileName:function (s) {
+        // Return the CSRF token for any JS function that needs to do AJAX.
+        // Since AJAX posts will fail if you don't attach this as defined here:
+        // http://michaelhendrickx.com/201012_jquery-ajax-with-rails-authenticity-token.html
+        csrfToken: function() {
+            return $('meta[name=csrf-token]').attr('content');
+        },
+        sanitizeFileName: function(s) {
             var split = s.split(/\/|\\/)
             s = split[split.length - 1]
-            $.each(sanitizationRegexes, function (i, e) {
+            $.each(sanitizationRegexes, function(i, e) {
                 var r = new RegExp(e[0].source, 'g')
                 s = s.replace(r, e[1])
             })
             return s;
         },
-        slug:function (s) {
+        slug: function(s) {
             return $.trim(s.toLowerCase().replace(/[^a-zA-Z0-9_\s]+/g, '')).replace(/\ +/g, '-')
         },
-        showNotice:function (msg) {
-            $('#message').removeClass('error').addClass('notice').html(msg).parent().show().animate({opacity:1.0}, 3000).fadeOut("normal")
+        showNotice: function(msg) {
+            $('#message').removeClass('error').addClass('notice').html(msg).parent().show().animate({opacity: 1.0}, 3000).fadeOut("normal")
         },
-        showError:function (msg) {
-            $('#message').removeClass('notice').addClass('error').html(msg).parent().show().animate({opacity:1.0}, 3000).fadeOut("normal")
+        showError: function(msg) {
+            $('#message').removeClass('notice').addClass('error').html(msg).parent().show().animate({opacity: 1.0}, 3000).fadeOut("normal")
         },
-        attachEventHandlers:function (context) {
-            $('a.button', context).click(function () {
+        attachEventHandlers: function(context) {
+            $('a.button', context).click(function() {
                 if ($(this).hasClass('disabled')) return false;
             });
-            $('a.http_post, a.http_put, a.http_delete', context).click(function () {
+            $('a.http_post, a.http_put, a.http_delete', context).click(function() {
                 if ($(this).hasClass('disabled')) return false;
                 if ($(this).hasClass('confirm_with_title') ? confirm(this.title) : true) {
 
-                    // Create the form
+                    // Create a hidden form to submit this link as PUT/POST/DELETE.
                     var f = document.createElement('form')
                     f.style.display = 'none'
                     this.parentNode.appendChild(f)
@@ -80,12 +85,10 @@ jQuery(function ($) {
                     $(m).attr('type', 'hidden').attr('name', '_method').attr('value', http_method)
                     f.appendChild(m)
 
-                    //Create the authenticity_token hidden input
-                    if ($.cms.authenticity_token && $.cms.authenticity_token != '') {
-                        var m = document.createElement('input')
-                        $(m).attr('type', 'hidden').attr('name', 'authenticity_token').attr('value', $.cms.authenticity_token)
-                        f.appendChild(m)
-                    }
+                    // Add the authenticity_token as a hidden input so rails doesn't reject the form.
+                    var m = document.createElement('input')
+                    $(m).attr('type', 'hidden').attr('name', 'authenticity_token').attr('value', $.cms.csrfToken());
+                    f.appendChild(m);
 
                     f.submit()
                 }
@@ -96,38 +99,67 @@ jQuery(function ($) {
 
     $.cms.attachEventHandlers(document);
 
-    $('#message.notice').parent().show().animate({opacity:1.0}, 3000).fadeOut("normal")
-    $('#message.error').parent().show().animate({opacity:1.0}, 3000).fadeOut("normal")
+    $('#message.notice').parent().show().animate({opacity: 1.0}, 3000).fadeOut("normal")
+    $('#message.error').parent().show().animate({opacity: 1.0}, 3000).fadeOut("normal")
+
+});
+
+// Autogenerate slugs for form fields as user types.
+// Requires two fields to enable autogeneration, a source and destination. You can leave one out for cases
+// where you don't want to overwrite the existing slug (i.e. editing an existing record's name).
+//
+// Required CSS classes:
+// .slug-source - The input field to pull the name from.
+// .slug-dest - The input field to set the slug value in.
+//   @options data-prefix An optional prefix (on slug-dest) that should be added in front of autogenerated slugs
+//      (i.e. <input class='slug-dest' data-prefix="/products" />)
+$(function() {
+    if ($('.slug-dest').length && $('.slug-source').length) {
+        $('.slug-source').keyup(function() {
+            var name = $('.slug-source').val();
+            if ($('.slug-dest').attr('data-prefix')) {
+                var prefix = $('.slug-dest').data('prefix');
+                // Handle / section
+                if (prefix !== '/') {
+                    prefix += "/";
+                }
+            } else {
+                var prefix = "";
+            }
 
+            var slug_value = prefix + $.cms.slug(name);
+            $('.slug-dest').val(slug_value);
+        });
+    }
 });
 
 // Automatically enable date_picker controls
-$(function () {
+$(function() {
     if ($.datepicker) {
-        $('input.date_picker').datepicker({ changeFirstDay:false, changeMonth:true, changeYear:true, closeText:'', showButtonPanel:true, dateFormat:'<%= Cms::DatePicker.jquery_format %>' });
+        $('input.date_picker').datepicker({ changeFirstDay: false, changeMonth: true, changeYear: true, closeText: '', showButtonPanel: true, dateFormat: '<%= Cms::DatePicker.jquery_format %>' });
     }
 });
 
 // UI Enhancement to suggest paths for uploaded files
-$(function () {
+$(function() {
     var path_input = $('.suggest_file_path');
     if (path_input.length) {
-        $('select[data-purpose=section_selector], input[data-purpose=cms_file_field]').change(function () {
+        $('select[data-purpose=section_selector], input[data-purpose=cms_file_field]').change(function() {
             var section_id = $('select[data-purpose=section_selector]').val();
-            var section_path = $('.section_id_map[data-id='+ section_id +']').data('path');
-            var file_path =  $.cms.sanitizeFileName($('input[data-purpose=cms_file_field]').val());
+            var section_path = $('.section_id_map[data-id=' + section_id + ']').data('path');
+            var file_path = $.cms.sanitizeFileName($('input[data-purpose=cms_file_field]').val());
             path_input.val(section_path + file_path);
         });
     }
 });
 
-//CookieSet allows us to treat one cookie value as a set of values
-jQuery(function ($) {
+//CookieSet allows us to treat one cookie value as a Set of values (Each value can appear only once)
+jQuery(function($) {
     var sep = '|'
 
     $.cookieSet = {
         //Treats the cookie as an array
-        add:function (name, value, options) {
+        add: function(name, value, options) {
             this.remove(name, value, options)
             var set = this.get(name)
             if (set) {
@@ -139,7 +171,7 @@ jQuery(function ($) {
             return this.get(name)
         },
 
-        get:function (name) {
+        get: function(name) {
             var val = $.cookie(name)
             if (val) {
                 return val.split(sep)
@@ -148,11 +180,11 @@ jQuery(function ($) {
             }
         },
 
-        remove:function (name, value, options) {
+        remove: function(name, value, options) {
             var set = this.get(name)
             if (set) {
                 var arr = []
-                $.each(set, function () {
+                $.each(set, function() {
                     if (this != value + '') {
                         arr.push(this)
                     }
@@ -165,7 +197,7 @@ jQuery(function ($) {
         },
 
         //Treats the cookie as an array
-        contains:function (name, value) {
+        contains: function(name, value) {
             var set = this.get(name)
             if (set) {
                 return $.inArray(value + '', set) > -1

data/app/assets/javascripts/cms/form_builder.js

@@ -0,0 +1,250 @@
+//= require cms/ajax
+//= require underscore
+//= require jquery.exists
+
+/**
+ * The UI for dynamically creating custom forms via the UI.
+ * @constructor
+ *
+ */
+
+var FormBuilder = function() {
+};
+
+// Add a new field to the form
+// (Implementation: Clone existing hidden form elements rather than build new ones via HTML).
+FormBuilder.prototype.newField = function(field_type) {
+  this.hideNewFormInstruction();
+  this.addPreviewFieldToForm(field_type);
+
+};
+
+FormBuilder.prototype.addPreviewFieldToForm = function(field_type) {
+  $("#placeHolder").load($('#placeHolder').data('new-path') + '?field_type=' + field_type + ' .control-group', function() {
+    var newField = $("#placeHolder").find('.control-group');
+    newField.insertBefore('#placeHolder');
+    formBuilder.enableFieldButtons();
+    formBuilder.resetAddFieldButton();
+  });
+};
+
+FormBuilder.prototype.resetAddFieldButton = function() {
+  $("#form_new_entry_new_field").val('1');
+};
+
+FormBuilder.prototype.removeCurrentField = function() {
+  this.field_being_editted.remove();
+  this.field_being_editted = null;
+};
+
+// Function that triggers when users click the 'Delete' field button.
+FormBuilder.prototype.confirmDeleteFormField = function() {
+  formBuilder.field_being_editted = $(this).parents('.control-group');
+
+  var path = $(this).attr('data-path');
+  if (path == "") {
+    formBuilder.removeCurrentField();
+  } else {
+    $('#modal-confirm-delete-field').modal({
+      show: true
+    });
+  }
+};
+
+// Function that triggers when users click the 'Edit' field button.
+FormBuilder.prototype.editFormField = function() {
+  // This is the overall container for the entire field.
+  formBuilder.field_being_editted = $(this).parents('.control-group');
+  $('#modal-edit-field').modal({
+    show: true,
+    remote: $(this).attr('data-edit-path')
+  });
+
+};
+
+
+FormBuilder.prototype.hideNewFormInstruction = function() {
+  var no_fields = $("#no-field-instructions");
+  if (no_fields.exists()) {
+    no_fields.hide();
+  }
+};
+
+// Add handler to any edit field buttons.
+FormBuilder.prototype.enableFieldButtons = function() {
+  $('.edit_form_button').unbind('click').on('click', formBuilder.editFormField);
+  $('.delete_field_button').unbind('click').on('click', formBuilder.confirmDeleteFormField);
+};
+
+FormBuilder.prototype.newFormField = function() {
+  return $('#ajax_form_field');
+};
+
+// Delete field from form, then remove it from the field
+FormBuilder.prototype.deleteFormField = function() {
+  var element = formBuilder.field_being_editted.find('.delete_field_button');
+  var url = element.attr('data-path');
+  $.cms_ajax.delete({
+    url: url,
+    success: function(field) {
+      formBuilder.removeCurrentField();
+      formBuilder.removeFieldId(field.id);
+    }
+  });
+};
+
+// @param [Number] value The id of the field that is to be removed from the form.
+FormBuilder.prototype.removeFieldId = function(value) {
+  var field_ids = $('#field_ids').val().split(" ");
+  field_ids.splice($.inArray(value.toString(), field_ids), 1);
+  formBuilder.setFieldIds(field_ids);
+};
+
+// @param [Array<String>] value
+FormBuilder.prototype.setFieldIds = function(value) {
+  var spaced_string = value.join(" ");
+  $('#field_ids').val(spaced_string);
+};
+
+FormBuilder.prototype.addFieldIdToList = function(new_value) {
+  $('#field_ids').val($('#field_ids').val() + " " + new_value);
+};
+
+// Save a new Field to the database for the current form.
+FormBuilder.prototype.createField = function() {
+  var form = formBuilder.newFormField();
+  var data = form.serialize();
+  var url = form.attr('action');
+
+  $.ajax({
+    type: "POST",
+    url: url,
+    data: data,
+    global: false,
+    datatype: $.cms_ajax.asJSON()
+  }).done(
+    function(field) {
+      formBuilder.clearFieldErrorsOnCurrentField();
+
+      formBuilder.addFieldIdToList(field.id);
+      formBuilder.field_being_editted.find('input').attr('data-id', field.id);
+      formBuilder.field_being_editted.find('label').html(field.label);
+      formBuilder.field_being_editted.find('a').attr('data-edit-path', field.edit_path);
+      formBuilder.field_being_editted.find('a.delete_field_button').attr('data-path', field.delete_path);
+      formBuilder.field_being_editted.find('.help-block').html(field.instructions);
+
+    }
+  ).fail(function(xhr, textStatus, errorThrown) {
+      formBuilder.displayErrorOnField(formBuilder.field_being_editted, xhr.responseJSON);
+    });
+
+};
+
+FormBuilder.prototype.clearFieldErrorsOnCurrentField = function() {
+  var field = formBuilder.field_being_editted;
+  field.removeClass("error");
+  field.find('.help-inline').remove();
+};
+
+FormBuilder.prototype.displayErrorOnField = function(field, json) {
+  var error_message = json.errors[0];
+//  console.log(error_message);
+  field.addClass("error");
+  var input_field = field.find('.input-append');
+  input_field.after('<span class="help-inline">' + error_message + '</span>');
+};
+
+// Edit Field should handle Enter by submitting the form via AJAX.
+    // Enter within textareas should still add endlines as normal.
+FormBuilder.prototype.onEnterSubmitFormViaAjax = function() {
+  this.newFormField().on("keypress", function(e) {
+    if (e.which == 13 && e.target.tagName != 'TEXTAREA') {
+      formBuilder.createField();
+      e.preventDefault();
+      $('#modal-edit-field').modal('hide');
+      return false;
+    }
+  });
+};
+// Attaches behavior to the proper element.
+FormBuilder.prototype.setup = function() {
+  var select_box = $('.add-new-field');
+  if (select_box.exists()) {
+    select_box.change(function() {
+      formBuilder.newField($(this).val());
+    });
+
+    this.enableFieldButtons();
+    $("#delete_field").on('click', formBuilder.deleteFormField);
+
+    $('#modal-edit-field').on('hidden.bs.modal', function(e) {
+      $(this).removeData('bs.modal');
+    });
+
+    // Allow fields to be sorted.
+    $('#form-preview').sortable({
+      axis: 'y',
+      delay: 250,
+
+      // When form element is moved
+      update: function(event, ui) {
+        var field_id = ui.item.find('input').attr('data-id');
+        var new_position = ui.item.index() + 1;
+        formBuilder.moveFieldTo(field_id, new_position);
+      }
+    });
+    this.setupConfirmationBehavior();
+    this.enableFormCleanup();
+  }
+};
+
+// Since we create a form for the #new action, we need to delete it if the user doesn't save it explicitly.
+FormBuilder.prototype.enableFormCleanup = function() {
+  var cleanup_element = $('#cleanup-before-abandoning');
+  if (cleanup_element.exists()) {
+    var cleanup_on_leave = true;
+    $(":submit").on('click', function() {
+      cleanup_on_leave = false;
+    });
+    $(window).bind('beforeunload', function() {
+      if (cleanup_on_leave) {
+        var path = cleanup_element.attr('data-path');
+        $.cms_ajax.delete({url: path, async: false});
+      }
+    });
+  }
+};
+
+// Updates the server with the new position for a given field.
+FormBuilder.prototype.moveFieldTo = function(field_id, position) {
+  var url = '/cms/form_fields/' + field_id + '/insert_at/' + position;
+
+  var success = function(data) {
+    console.log("Success:", data);
+  };
+  console.log('For', field_id, 'to', position);
+  $.post(url, success);
+};
+
+FormBuilder.prototype.setupConfirmationBehavior = function() {
+  // Confirmation Behavior
+  $("#form_confirmation_behavior_show_text").on('click', function() {
+    $(".form_confirmation_text").show();
+    $(".form_confirmation_redirect").hide();
+  });
+  $("#form_confirmation_behavior_redirect").on('click', function() {
+    $(".form_confirmation_redirect").show();
+    $(".form_confirmation_text").hide();
+  });
+  $("#form_confirmation_behavior_show_text").trigger('click');
+};
+var formBuilder = new FormBuilder();
+
+// Register FormBuilder handlers on page load.
+$(function() {
+  formBuilder.setup();
+
+
+  // Include a text field to start (For easier testing)
+//  formBuilder.newField('text_field');
+});