browsercms-artirix 4.0.0.rc1.art4

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

@@ -0,0 +1,88 @@
+// Allows users to upload files via AJAX as attachments for a given block.
+//
+$(function () {
+    $.cms.AttachmentManager = {
+        upload:function (file) {
+            var assetName = $('#attachment_attachable_type').val()
+                    , attachableClass = $('#asset_attachable_class').val()
+//                    , attachableIDField = $('#asset_attachable_id')
+                    , attachableID = $('#asset_attachable_id').val()
+                    , file = $('#asset_add_file')
+                    , form = $('<form target="asset_add_uploader" method="post" action="/cms/attachments" enctype="multipart/form-data" style="visibility:hidden">')
+                    , fields = '';
+
+            fields += '<input type="hidden" name="attachment[attachment_name]" value="' + assetName.toLowerCase() + '" />';
+            fields += '<input type="hidden" name="attachment[attachable_class]" value="' + attachableClass + '" />';
+            fields += '<input type="hidden" name="attachment[attachable_type]" value="' + attachableClass + '" />';
+            fields += '<input type="hidden" name="attachment[attachable_id]" value="' + attachableID + '" />';
+            fields += '<input type="hidden" name="authenticity_token" value="' + $.cms.csrfToken() + '" />';
+
+            $('body').append(form);
+            form.append(fields);
+            form.append(file);
+            $('label[for="asset_add_file"]').after(file.clone());
+
+            var inp = $('<input type="file" name="attachment[data]" id="asset_add_file" onchange="$.cms.AttachmentManager.upload(this)" />');
+
+            form.submit();
+
+            $('#upload-attachment').modal('hide');
+        },
+        enableDeleteButtons:function(){
+          // Handle delete attachment button
+          var delete_attachments_btns = $("a[data-purpose='delete-attachment']");
+          if(delete_attachments_btns.exists()){
+              delete_attachments_btns.off('click').on('click', function(){
+                  var id = $(this).data('id');
+                  $.cms.AttachmentManager.destroy(id);
+              });
+          }
+        },
+        // @param [Integer] id The id of the attachment to delete.
+        destroy:function (id) {
+            if (confirm("Are you sure want to delete this attachment?")) {
+                $.post('/cms/attachments/' + id, {_method:'delete', authenticity_token:$.cms.csrfToken()}, function (attachment_id) {
+//                    console.log(attachment_id);
+                    $("#attachment_" + attachment_id).hide();
+                    if ($("#assets_table > table tr:visible").length <= 2) {
+                        $("#assets_table > table").hide();
+                    }
+                    $('#attachments_manager_changed').val(true);
+                }, 'script');
+
+            }
+            return false;
+        }
+    }
+
+    $('#asset_types').selectbox({width:'445px'});
+
+    $('#asset_types').change(function () {
+        if ($(this).val().indexOf('Select') != 0) {
+            $('#asset_add').show();
+        } else {
+            $('#asset_add').hide();
+        }
+    });
+
+    // After an attachment is uploaded, copy the values into the main attachment table.
+    $('#asset_add_uploader').load(function () {
+        $('#attachments_manager_changed').val(true); // Mark that the list of attachment has changed
+        var response = $(this).contents();
+
+        if (response.find('tr').html()) {
+            var asset = $(response).find('tr').clone();
+            var id = $(response).find("#asset-id").html();
+            var asset_ids = $('#attachment_manager_ids_list');
+
+            $(asset_ids).val($(asset_ids).val() + id + ",");
+            $('#file-asset-uploader').remove();
+            $('#assets_table > table').append(asset).show();
+            $('div.buttons').show();
+        }
+        $('.empty-row').hide();
+        $.cms.AttachmentManager.enableDeleteButtons();
+    });
+
+  $.cms.AttachmentManager.enableDeleteButtons();
+});

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

@@ -0,0 +1,121 @@
+jQuery(function ($) {
+
+    //----- Helper Functions -----------------------------------------------------
+    //In all of this code, we are defining functions that we use later
+    //None of this actually manipulates the DOM in any way
+
+    //This is used to get the id part of an elementId
+    //For example, if you have section_node_5, 
+    //you pass this 'section_node_5', 'section_node' 
+    //and this returns 5
+    var getId = function (elementId, s) {
+        return elementId.replace(s, '')
+    }
+
+
+    var nodeOnDoubleClick = function () {
+        if ($('#edit_button').hasClass('disabled')) {
+            //$('#view_button').click()
+            location.href = $('#view_button')[0].href
+        } else {
+            //$('#edit_button').click()
+            location.href = $('#edit_button')[0].href
+        }
+    }
+
+    var addNodeOnDoubleClick = function () {
+        $('#blocks tr').dblclick(nodeOnDoubleClick)
+    }
+
+    //----- Init -----------------------------------------------------------------
+    //In other words, stuff that happens when the page loads
+    //This is where we actually manipulate the DOM, fire events, etc.
+
+    addNodeOnDoubleClick()
+
+});
+
+// Makes the toolbar for the Content table correctly work based on the selected row.
+//  I.e. Select a row, the 'View' button becomes active and the URL goes to the right path.
+//
+//  Any element with class='cms-content-table' will have this applied to it.
+(function ($) {
+    $.fn.cmsContentToolbar = function () {
+        var content_type = this.data('content_type')
+        var is_versioned = this.data('versioned')
+        var can_publish = this.data('can_publish')
+        var plural_title = this.data('plural_title')
+
+        $('table.data tbody tr').hover(
+            function () {
+                $(this).addClass('hover')
+            },
+            function () {
+                $(this).removeClass('hover')
+            }).click(function () {
+                var view_path = $(this).data('view_path');
+                var edit_path = $(this).data('edit_path');
+                var delete_path = $(this).data('delete_path');
+                var new_path = $(this).data('new_path');
+                var versions_path = $(this).data('versions_path');
+                var preview_path = $(this).data('preview_path');
+                var publish_path = $(this).data('publish_path') + '?_redirect_to=' + location.href;
+                var status = $(this).data('status');
+
+                var editable = !$(this).hasClass("non-editable");
+                var publishable = !$(this).hasClass("non-publishable");
+                $('table.data tbody tr').removeClass('selected');
+                $(this).addClass('selected');
+                $('#functions .button').addClass('disabled').attr('href', '#');
+                $('#add_button').removeClass('disabled').attr('href', new_path);
+                $('#view_button').removeClass('disabled').attr('href', view_path);
+                if (editable) $('#edit_button').removeClass('disabled').attr('href', edit_path);
+                if (is_versioned) {
+                    $('#revisions_button').removeClass('disabled').attr('href', versions_path);
+                } else {
+                    $('#revisions_button').addClass('disabled')
+                        .attr('title', plural_title + ' are not versioned');
+                }
+                var cannot_be_deleted_message = $(this).find('.cannot_be_deleted_message');
+                if (cannot_be_deleted_message.length > 0) {
+                    $('#delete_button').addClass('disabled')
+                        .attr('title', $.trim(cannot_be_deleted_message.text()));
+                } else {
+                    if (publishable) {
+                        $('#delete_button').removeClass('disabled')
+                            .attr('href', delete_path)
+                            .attr('title', 'Are You Sure You Want To Delete This Record?');
+                    }
+                }
+                if (can_publish) {
+                    if (status == 'draft' && publishable) {
+                        $('#publish_button')
+                            .attr('href', publish_path)
+                            .enable_menu_button();
+                    } else {
+                        $('#publish_button')
+                            .disable_menu_button();
+                    }
+                }
+                if(preview_path){
+                  $('#preview_button').attr('href', preview_path).enable_menu_button();
+                }
+            })
+    };
+})(jQuery);
+
+(function ($) {
+    $.fn.disable_menu_button = function () {
+        $(this).addClass('disabled');
+        $(this).attr("href", "#");
+    }
+    $.fn.enable_menu_button = function () {
+        $(this).removeClass('disabled');
+        return $(this);
+    }
+})(jQuery);
+
+$(function () {
+    $('.cms-content-table').cmsContentToolbar();
+});
+

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

@@ -0,0 +1,13 @@
+// Adds AJAX behavior primarily for List Portlet
+
+jQuery(function($){
+  var select_tag = $('*[data-role="content_type_selector"]');
+  var order_field = $('*[data-role="order-fields"]');
+  if(select_tag.exists()){
+    select_tag.on('change', function(){
+      var selected_option = $( this ).val();
+      console.log("Changed to", selected_option );
+      order_field.load( '/cms/content_types.js .load > .select', { "content_type": selected_option } )
+    });
+  }
+});

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

@@ -0,0 +1,210 @@
+//
+// Defines Core BrowserCMS functions used throughout the application.
+//
+//
+jQuery(function($) {
+
+    //It would be cool if these were added to the real jQuery
+    //You can call this a few ways:
+    //createElement('p') => "<p/>"
+    //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) {
+        var name = tag_name
+        if (typeof tag_value == "object") {
+            var value = null
+            var attrs = tag_value
+        } else {
+            var value = tag_value
+            var attrs = tag_attrs
+        }
+        var element = $(document.createElement(tag_name))
+        if (attrs) {
+            $.each(attrs, function(k, v) {
+                element.attr(k, v)
+            })
+        }
+        if (value) {
+            element.html(value)
+        }
+        return element
+    }
+
+
+    var sanitizationRegexes = [
+        [/\s/, "_"],
+        [/[&+()]/, "-"],
+        [/[=?!'"{}\[\]#<>%]/, ""]
+    ]
+
+    $.cms = {
+        // 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) {
+                var r = new RegExp(e[0].source, 'g')
+                s = s.replace(r, e[1])
+            })
+            return 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")
+        },
+        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() {
+                if ($(this).hasClass('disabled')) return false;
+            });
+            $('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 a hidden form to submit this link as PUT/POST/DELETE.
+                    var f = document.createElement('form')
+                    f.style.display = 'none'
+                    this.parentNode.appendChild(f)
+                    f.method = "POST"
+                    f.action = this.href
+                    $(f).attr('target', $(this).attr('target'))
+
+                    //Create the _method hidden input
+                    var m = document.createElement('input')
+                    var http_method = $(this).attr('class').match(/http_([^ ]*)/)[1]
+                    $(m).attr('type', 'hidden').attr('name', '_method').attr('value', http_method)
+                    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()
+                }
+                return false
+            })
+        }
+    }
+
+    $.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")
+
+});
+
+// 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" />)
+jQuery(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
+jQuery(function($){
+    if ($.datepicker) {
+        $('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
+jQuery(function($){
+    var path_input = $('.suggest_file_path');
+    if (path_input.length) {
+        $('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());
+            path_input.val(section_path + file_path);
+        });
+    }
+});
+
+//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) {
+            this.remove(name, value, options)
+            var set = this.get(name)
+            if (set) {
+                set.push(value)
+            } else {
+                var set = [value]
+            }
+            $.cookie(name, set.join(sep), options)
+            return this.get(name)
+        },
+
+        get: function(name) {
+            var val = $.cookie(name)
+            if (val) {
+                return val.split(sep)
+            } else {
+                return null
+            }
+        },
+
+        remove: function(name, value, options) {
+            var set = this.get(name)
+            if (set) {
+                var arr = []
+                $.each(set, function() {
+                    if (this != value + '') {
+                        arr.push(this)
+                    }
+                })
+                $.cookie(name, arr.join(sep), options)
+                return this.get(name)
+            } else {
+                return null
+            }
+        },
+
+        //Treats the cookie as an array
+        contains: function(name, value) {
+            var set = this.get(name)
+            if (set) {
+                return $.inArray(value + '', set) > -1
+            } else {
+                return false
+            }
+        }
+    }
+
+});

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.
+jQuery(function($){
+  formBuilder.setup();
+
+
+  // Include a text field to start (For easier testing)
+//  formBuilder.newField('text_field');
+});

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

@@ -0,0 +1,2 @@
+// Sets up the Cms namespace for other modules.
+var Cms = Cms || {};