fae-rails 2.2.0 → 3.0.0

data/app/assets/javascripts/fae/form/_validator.js

@@ -6,11 +6,11 @@
  * @memberof form
  */
 Fae.form.validator = {
-
   is_valid: '',
   validations_called: 0,
   validations_returned: 0,
   validation_test_count: 0,
+  invalidFields: [],
 
   init: function () {
     // validate all forms except the login form
@@ -20,6 +20,7 @@ Fae.form.validator = {
       this.bindValidationEvents();
       this.formValidate();
       this.length_counter.init();
+      this.checkForSsrImageAndFileErrors();
     }
   },
 
@@ -29,14 +30,13 @@ Fae.form.validator = {
   formValidate: function ($scope) {
     var _this = this;
 
-    if (typeof($scope) === 'undefined'){
+    if (typeof $scope === 'undefined') {
       $scope = FCH.$document;
     }
     $scope.on('submit', 'form:not([data-remote=true])', function (e) {
       var $this = $(this);
 
       if ($this.data('passed_validation') !== 'true') {
-
         // pause form submission
         e.preventDefault();
 
@@ -63,8 +63,14 @@ Fae.form.validator = {
 
         _this.testValidation($this, $scope);
 
+      } else if (_this._preventFormSaveDueToNestedForm()) {
+        // nested form has unsaved changes and user cancelled form submission
+        e.preventDefault();
+        
+      } else {
+        // form is valid and can submit so set saving indication
+        _this._setSavingIndicator();
       }
-
     });
   },
 
@@ -72,15 +78,13 @@ Fae.form.validator = {
    * Tests a forms validation after all validation checks have responded
    * Polls validations responses every 50ms to allow uniqueness AJAX calls to complete
    */
-  testValidation: function($this, $scope) {
+  testValidation: function ($this, $scope) {
     var _this = this;
     _this.validation_test_count++;
 
-    setTimeout(function(){
-
+    setTimeout(function () {
       // if all the validation checks have returned a response
       if (_this.validations_called === _this.validations_returned) {
-
         if (_this.is_valid) {
           // if form is valid, submit it
           $this.data('passed_validation', 'true');
@@ -89,15 +93,17 @@ Fae.form.validator = {
         } else {
           // otherwise scroll to the top to display alerts (unless in a nested form scope)
           Fae.navigation.language.checkForHiddenErrors();
-          if (typeof($scope) === 'undefined') {
+          if (typeof $scope === 'undefined') {
             FCH.smoothScroll($('#js-main-header'), 500, 100, 0);
           }
 
-          if ($(".field_with_errors").length) {
-            $('.alert').slideDown('fast').delay(3000).slideUp('fast');
+          // display error messages grouped at top of form with jump links to invalid fields
+          _this._buildErrorLinks($scope);
+
+          if ($('.field_with_errors').length) {
+            $('.errors-bar-wrapper').slideDown('fast');
           }
         }
-
       } else {
         // check again if it hasn't run more than 50 times
         // (to prevent against infinite loop)
@@ -105,9 +111,7 @@ Fae.form.validator = {
           _this.testValidation($this);
         }
       }
-
     }, 50);
-
   },
 
   /**
@@ -116,7 +120,7 @@ Fae.form.validator = {
   bindValidationEvents: function ($scope) {
     var _this = this;
 
-    if (typeof($scope) === 'undefined'){
+    if (typeof $scope === 'undefined') {
       $scope = $('body');
     }
 
@@ -129,13 +133,13 @@ Fae.form.validator = {
           $this.blur(function () {
             _this._judgeIt($this);
           });
-
         } else if ($this.hasClass('hasDatepicker')) {
           // date pickers need a little delay
           $this.blur(function () {
-            setTimeout(function(){ _this._judgeIt($this); }, 500);
+            setTimeout(function () {
+              _this._judgeIt($this);
+            }, 500);
           });
-
         } else if ($this.is('select')) {
           // selects validate on change
           $this.change(function () {
@@ -146,6 +150,67 @@ Fae.form.validator = {
     });
   },
 
+  /**
+   * Sent indicator to let the user know the form is saving
+   * @protected
+   */
+  _setSavingIndicator: function () {
+    var $saveButton = $('.js-content-header').find('input[type="submit"]');
+    $saveButton.addClass('saving').val('Saving...');
+  },
+
+  /**
+   * Detect if a nested form has content and alert user
+   * @protected
+   */
+  _preventFormSaveDueToNestedForm: function () {
+    let preventSave = false;
+    const $nestedFormWrapper = $('.js-addedit-form-wrapper:visible');
+    // exit if no nested objects
+    if ($nestedFormWrapper.length === 0) return false;
+
+    const $form = $nestedFormWrapper.find('form');
+
+    // get all form values without hidden fields. this omits utf encoding, csrf token, and parent item id fields
+    const formValues = $form.find(':input:not(:hidden)').serializeArray();
+
+    // detect if any fields have content
+    const formHasContent = formValues.some((item) => item.value !== '');
+
+    if (formHasContent) {
+      const formLabel = $nestedFormWrapper.siblings('h2').text();
+      // set to true if user decides not to continue
+      preventSave = !window.confirm(
+        `${formLabel} has unsaved changes! To return to your draft, click “Cancel.” To proceed without saving, click “OK.”`
+      );
+
+      if (preventSave) {
+        FCH.smoothScroll($nestedFormWrapper, 500, 100, -100);
+      }
+    }
+
+    return preventSave;
+  },
+
+  // check for server side errors for images/files and display error bar with jump links on form re-render
+  checkForSsrImageAndFileErrors: function () {
+    const _this = this;
+    let imageErrorFound = false;
+
+    $('.input.file').each(function () {
+      $assetInput = $(this);
+      if ($assetInput.hasClass('field_with_errors')) {
+        const errorMessage = $assetInput.find('.error').text();
+        _this._addInvalidField($assetInput, [errorMessage]);
+        imageErrorFound = true;
+      }
+    });
+
+    if (imageErrorFound) {
+      this._buildErrorLinks();
+      $('.errors-bar-wrapper').slideDown('fast');
+    }
+  },
 
   /**
    * Initialize Judge on a field
@@ -159,6 +224,7 @@ Fae.form.validator = {
       valid: function () {
         _this.validations_returned++;
         _this._createSuccessClass($input);
+        _this._clearInvalidField($input);
       },
       invalid: function (input, messages) {
         _this.validations_returned++;
@@ -166,9 +232,95 @@ Fae.form.validator = {
         if (messages.length) {
           _this.is_valid = false;
           _this._createOrReplaceError($input, messages);
+          _this._addInvalidField($input, messages);
         }
-      }
+      },
+    });
+  },
+
+  /**
+   * Add error to invalid fields array if it doesn't already exist
+   * @protected
+   * @param  {jQuery} $input - field to check if exists
+   */
+  _addInvalidField: function ($input, messages) {
+    const foundIndex = this.invalidFields.findIndex((item) => {
+      return item.$input[0] === $input[0];
     });
+    if (foundIndex === -1) {
+      this.invalidFields.push({
+        $input: $input,
+        messages: messages,
+      });
+    }
+  },
+
+  /**
+   * Remove error from invalid fields array if exists
+   * @protected
+   * @param  {jQuery} $input - field to check if exists
+   */
+  _clearInvalidField: function ($input) {
+    const foundIndex = this.invalidFields.findIndex((item) => {
+      return item.$input[0] === $input[0];
+    });
+    if (foundIndex !== -1) {
+      this.invalidFields.splice(foundIndex, 1);
+    }
+  },
+
+  /**
+   * Builds jump links for all invalid fields to display at top of form
+   * @protected
+   * @param  {jQuery} $scope - form scope
+   */
+
+  _buildErrorLinks: function ($scope) {
+    const $header = $('.js-content-header');
+    const headerHeight = $header[0].getBoundingClientRect().height;
+
+    if (typeof $scope === 'undefined') {
+      $scope = $('body');
+    }
+
+    // get all fields with non-empty validations
+    const fieldsWithValidation = Array.from(
+      $scope.find('[data-validate*="{"]')
+    );
+
+    // sort invalid fields to match ordering of fields within form
+    this.invalidFields.sort((a, b) => {
+      return (
+        fieldsWithValidation.indexOf(a.$input[0]) -
+        fieldsWithValidation.indexOf(b.$input[0])
+      );
+    });
+
+    // generate error links
+    const $errorLinks = this.invalidFields.map((field) => {
+      const $wrapper = field.$input.parents('div.input');
+      let label = $wrapper.find('.label_inner').text();
+
+      // build clean label with name of field and error message
+      label = `${label.replace('*', '')} - ${field.messages.join(', ')}`;
+
+      // build jump link
+      let $errorLink = $('<a/>', {
+        class: 'error-jump-link',
+        href: `#`,
+        html: label,
+      });
+
+      // smooth scroll invalid field right below header
+      $errorLink.click((e) => {
+        e.preventDefault;
+        FCH.smoothScroll($wrapper, 500, 100, headerHeight * -1);
+      });
+      return $errorLink;
+    });
+
+    // append all links to error bar in form_header partial
+    $('.errors-bar').empty().append($errorLinks);
   },
 
   /**
@@ -208,7 +360,11 @@ Fae.form.validator = {
     var $styled_input = this._setTargetInput($input);
     $styled_input.addClass('valid').removeClass('invalid');
 
-    $input.parent().removeClass('field_with_errors').children('.error').remove();
+    $input
+      .parent()
+      .removeClass('field_with_errors')
+      .children('.error')
+      .remove();
   },
 
   /**
@@ -225,7 +381,9 @@ Fae.form.validator = {
     if ($wrapper.children('.error').length) {
       $wrapper.children('.error').text(messages.join(', '));
     } else {
-      $wrapper.addClass('field_with_errors').append("<span class='error'>" + messages.join(', ') + "</span>");
+      $wrapper
+        .addClass('field_with_errors')
+        .append("<span class='error'>" + messages.join(', ') + '</span>');
     }
   },
 
@@ -239,17 +397,18 @@ Fae.form.validator = {
     var $styled_input = $input;
 
     // If field is a chosen input
-    if ( $input.next('.chosen-container').length ) {
+    if ($input.next('.chosen-container').length) {
       if ($input.next('.chosen-container').find('.chosen-single').length) {
         $styled_input = $input.next('.chosen-container').find('.chosen-single');
-
-      } else if ($input.next('.chosen-container').find('.chosen-choices').length) {
-        $styled_input = $input.next('.chosen-container').find('.chosen-choices');
-
+      } else if (
+        $input.next('.chosen-container').find('.chosen-choices').length
+      ) {
+        $styled_input = $input
+          .next('.chosen-container')
+          .find('.chosen-choices');
       }
     } else if ($input.hasClass('mde-enabled')) {
       $styled_input = $input.siblings('.editor-toolbar, .CodeMirror-wrap');
-
     }
 
     return $styled_input;
@@ -260,13 +419,16 @@ Fae.form.validator = {
    * @param {jQuery} $field - Input fields
    * @param {String} kind - Type of validation (e.g. 'presence' or 'confirmation')
    */
-  stripValidation: function($field, kind) {
+  stripValidation: function ($field, kind) {
     var validations = $field.data('validate');
 
     for (var i = 0; i < validations.length; i++) {
       // validation items can be strings or JSON objects
       // let's convert the strings to JSON so we're dealing with consistent types
-      if (typeof validations[i] == 'string' || validations[i] instanceof String) {
+      if (
+        typeof validations[i] == 'string' ||
+        validations[i] instanceof String
+      ) {
         validations[i] = JSON.parse(validations[i]);
       }
 
@@ -289,14 +451,17 @@ Fae.form.validator = {
    * @memberof! validator
    */
   password_confirmation_validation: {
-    init: function() {
+    init: function () {
       var _this = this;
 
       _this.$password_field = $('#user_password');
       _this.$password_confirmation_field = $('#user_password_confirmation');
 
       if (_this.$password_confirmation_field.length) {
-        Fae.form.validator.stripValidation(_this.$password_field, 'confirmation');
+        Fae.form.validator.stripValidation(
+          _this.$password_field,
+          'confirmation'
+        );
         _this.addCustomValidation();
       }
     },
@@ -304,7 +469,7 @@ Fae.form.validator = {
     /**
      * Validate password on blur and form submit; halt form execution if invalid
      */
-    addCustomValidation: function() {
+    addCustomValidation: function () {
       var _this = this;
 
       /**
@@ -316,18 +481,24 @@ Fae.form.validator = {
       function validateConfirmation() {
         var validator = Fae.form.validator;
 
-        if (_this.$password_field.val() === _this.$password_confirmation_field.val()) {
+        if (
+          _this.$password_field.val() ===
+          _this.$password_confirmation_field.val()
+        ) {
           validator._createSuccessClass(_this.$password_confirmation_field);
         } else {
           var message = ['must match Password'];
           validator.is_valid = false;
-          validator._createOrReplaceError(_this.$password_confirmation_field, message);
+          validator._createOrReplaceError(
+            _this.$password_confirmation_field,
+            message
+          );
         }
       }
 
       this.$password_confirmation_field.on('blur', validateConfirmation);
 
-      $('form').on('submit', function(ev) {
+      $('form').on('submit', function (ev) {
         _this.is_valid = true;
         validateConfirmation();
 
@@ -335,13 +506,13 @@ Fae.form.validator = {
           ev.preventDefault();
         }
       });
-    }
+    },
   },
 
   /**
    * Judge always read the `on: :create` validations, so we need to strip the password presence validation on the user edit form
    */
-  passwordPresenceConditional: function() {
+  passwordPresenceConditional: function () {
     var $edit_user_password = $('.edit_user #user_password');
     if ($edit_user_password.length) {
       this.stripValidation($edit_user_password, 'presence');
@@ -354,25 +525,24 @@ Fae.form.validator = {
    * @memberof! validator
    */
   length_counter: {
-
-    init: function(){
+    init: function () {
       this.findLengthValidations();
     },
 
     /**
      * Add counter text to fields that validate based on character counts
      */
-    findLengthValidations: function() {
+    findLengthValidations: function () {
       var _this = this;
 
       $('[data-validate]').each(function () {
         var $this = $(this);
 
-        if ($this.data('validate').length ) {
+        if ($this.data('validate').length) {
           var validations = $this.data('validate');
 
-          $.grep(validations, function(item){
-            if (item.kind === 'length'){
+          $.grep(validations, function (item) {
+            if (item.kind === 'length') {
               $this.data('length-max', item.options.maximum);
               _this._setupCounter($this);
             }
@@ -386,17 +556,17 @@ Fae.form.validator = {
      * @access protected
      * @param {jQuery} $elem - Input field being counted
      */
-    _setupCounter: function($elem) {
+    _setupCounter: function ($elem) {
       var _this = this;
 
       _this._createCounterDiv($elem);
       _this.updateCounter($elem);
 
       $elem
-        .keyup(function() {
+        .keyup(function () {
           _this.updateCounter($elem);
         })
-        .keypress(function(e) {
+        .keypress(function (e) {
           if (_this._charactersLeft($elem) <= 0) {
             if (e.keyCode !== 8 && e.keyCode !== 46) {
               e.preventDefault();
@@ -410,17 +580,17 @@ Fae.form.validator = {
      * @protected
      * @param {jQuery} $elem - Input field to evaluate
      */
-    _createCounterDiv: function($elem) {
+    _createCounterDiv: function ($elem) {
       if ($elem.siblings('.counter').length === 0) {
-        var text = "Maximum Characters: " + $elem.data('length-max');
+        var text = 'Maximum Characters: ' + $elem.data('length-max');
         text += " / <span class='characters-left'></span>";
 
         var $counter_div = $('<div />', {
           class: 'counter',
-          html: '<p>' + text + '</p>'
+          html: '<p>' + text + '</p>',
         });
 
-        $elem.parent().append( $counter_div );
+        $elem.parent().append($counter_div);
       }
     },
 
@@ -428,7 +598,7 @@ Fae.form.validator = {
      * Updates the counter count and class
      * @param {jQuery} $elem - Input field to evaluate
      */
-    updateCounter: function($elem) {
+    updateCounter: function ($elem) {
       var $count_span = $elem.siblings('.counter').find('.characters-left');
       if ($count_span.length) {
         var current = this._charactersLeft($elem);
@@ -452,14 +622,13 @@ Fae.form.validator = {
      * @param {jQuery} $elem - Input field being counted
      * @return {integer} The number of characters left
      */
-    _charactersLeft: function($elem) {
+    _charactersLeft: function ($elem) {
       var input_value = $elem.val();
       var current = $elem.data('length-max') - input_value.length;
       // Rails counts a newline as two characters, so let's make up for it here
       current -= (input_value.match(/\n/g) || []).length;
 
       return current;
-    }
-  }
-
+    },
+  },
 };

data/app/assets/javascripts/fae/form/drag_drop.js

@@ -0,0 +1,109 @@
+/* global Fae */
+
+/**
+ * Fae form drag n drop uploads
+ * @namespace form.dragDrop
+ * @memberof form
+ */
+Fae.form.dragDrop = {
+
+  init: function () {
+    this.fileInputs = document.querySelectorAll('input[type="file"]');
+    if (this.fileInputs.length === 0) return;
+
+    this.bindListeners();
+  },
+
+  bindListeners() {
+
+    Array.from(this.fileInputs).forEach(input => {
+      const container = input.closest('.input.field');
+
+      ['dragenter', 'dragover'].forEach((eventName) => {
+        container.addEventListener(eventName, this.highlight.bind(container));
+      });
+
+      ['dragleave', 'drop'].forEach((eventName) => {
+        container.addEventListener(eventName, this.unhighlight.bind(container));
+      });
+
+      // This needed to be bound via jquery since tests have to use a simulated jquery event and native event listeners do not pickup on jquery events
+      $(container).on('drop', this.handleDrop.bind(this, container));
+    })
+  },
+
+  highlight(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.classList.add('highlight');
+  },
+
+  unhighlight(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.classList.remove('highlight');
+  },
+
+  handleDrop(inputContainer, e) {
+    // return the original event from the jquery event
+    if (e.originalEvent) {
+      e = e.originalEvent;
+    }
+    const input = inputContainer.querySelector('input[type="file"]');
+    const fileList = e.dataTransfer.files;
+    const file = fileList[0];
+    const isValidFile = this.validatesFileSize(input, file);
+
+    if (isValidFile) {
+      this.attachFile(input, fileList);
+      this.addFileInfo(inputContainer, file);
+    }
+  },
+  
+  attachFile(input, files) {
+    input.files = files;
+  },
+
+  addFileInfo(inputContainer, file) {
+    const deleteButton = inputContainer.querySelector('.asset-delete');
+
+    // only exists if image is already loaded into field
+    let label = inputContainer.querySelector('.asset-title');
+    if (!label) {
+      // else is a new image
+      label = inputContainer.querySelector('.asset-actions span');
+    }
+    label.innerText = file.name;
+    deleteButton.style.display = 'block';
+  },
+
+  validatesFileSize(input, file) {
+    const limit = parseInt(input.dataset.limit);
+    const fileSize = file.size / 1024 / 1024;
+
+    if (fileSize < limit) {
+      this.removeFileSizeError(input);
+      return true;
+    }
+
+    this.addFileSizeError(input, limit);
+    return false;
+  },
+
+  addFileSizeError(input, limit) {
+    const errorElem = document.createElement('span');
+    errorElem.innerText = input.dataset.exceeded.replace('###', limit);
+    errorElem.classList.add('error');
+    input.after(errorElem);
+    input.parentElement.classList.add('field_with_errors');
+  },
+
+  removeFileSizeError(input) {
+    const nextSibling = input.nextSibling;
+    if (nextSibling.classList.contains('error')) {
+      nextSibling.remove();
+    }
+    input.parentElement.classList.remove('field_with_errors');
+  }
+
+};

data/app/assets/javascripts/fae/form/inputs/_select.js

@@ -92,14 +92,17 @@ Fae.form.select = {
         })
       });
 
-      // prevent duplicate link from being added when nested form re-renders on the page after saving
-      if (!$('.js-multiselect-action-deselect_all').length > 0) {
+      // prevent multiple deselect all actions from being added when nested forms are generated
+      if ($('.multiselect-action_wrap').length === 0) {
         // Add actions to wraper
         $deselect_all_action.insertAfter($chosen);
       }
 
-      // Add special "Select All" option and notify Chosen of new option
-      addSelectAllOption($element)
+      // prevent multiple 'SELECT ALL' options from being added when nested forms are generated
+      if ($element[0].options[0].value != select_all_value) {
+        // Add special "Select All" option and notify Chosen of new option
+        addSelectAllOption($element);
+      }
 
       // Mark label wrapper as having multiselect actions for styling
       $label.addClass('has-multiselect-actions');