fae-rails 2.1.0 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 64efa885d567372d041fc98081e6074e37adb03a
-  data.tar.gz: 9945edf6077be0c1ef698a593da299c422baeb60
+  metadata.gz: '09c68df667f8b7ace15a19a487daa942920cbf0b'
+  data.tar.gz: dac2b54b4e27960568834510f11858e2173eddaa
 SHA512:
-  metadata.gz: ab50aeecbc77980ccb20b73c742ef4043b74319b658a4e01f5a88432f538f95896e18bdf87cfdfee55331026d03283315e4b6ff1f1f8738274bc869a458f3bc9
-  data.tar.gz: 48c3aae1f2cde1deb1405161f4942328c417733bf2832bac73fc4ca6967d96c30a0a8dfe994121c19e14631bdaabad28f721c9d4be82bdb099343bfff04f1947
+  metadata.gz: 99e3412b45fd0809a4af841af0c810971e0106dbe71f43104e9063abc691af0bf46d15b6d6b4890d68eca748ad8c633903c3446209675acb5f8c55dff9b9627e
+  data.tar.gz: aa26791d19a9c46c6cc9c4b8feb133832961d4035751bb2eeb534f402cc3eb9597d952dd517c62f1919bd4a3fcd53b0cbb4de82a14588ca2ba5995e6149cbca4

data/README.md

@@ -7,7 +7,7 @@
 
 Like many Rails CMS engines, Fae delivers all the basics to get you up and running quickly: authentication, authorization, a sleek UI, form helpers, image processing and workflows. But unlike other engines, Fae's generated models, controllers, and views are built to customize and scale.
 
-Fae 2.0 supports Rails 5.0 to 5.2, support for Rails 4.x is deprecated as of Fae 2.0.
+Fae 3.x supports Rails 7. For legacy Rails support you can use Fae 2.x on Rails 5.0 to 5.2.
 
 ## Installation
 
@@ -27,7 +27,7 @@ $ rails g fae:install
 
 ## Documentation
 
-For full documentation visit:  
+For full documentation visit:
 https://www.faecms.com/documentation
 
 ### Topics
@@ -57,10 +57,13 @@ https://www.faecms.com/documentation
 * [Change Tracker](docs/features/change_tracker.md)
 * [Slugger](docs/features/slugger.md)
 * [Disabling Environments](docs/features/disable_envs.md)
+* [Form Field Label & Helper Text Manager](docs/features/form_manager.md)
+* [Netlify Deploy Monitor](docs/features/netlify.md)
 
 
 ### Tutorials
 
+* [Setting Up SEO with Fae](docs/tutorials/seo.md)
 * [Setting Up GraphQL with Fae](docs/tutorials/graphql_support.md)
 * [Setting Up Images and Files](docs/tutorials/image_and_files.md)
 * [Adding Dynamic Relationships to Pages](docs/tutorials/dynamic_relationships_to_pages.md)

data/app/assets/config/fae/manifest.js

@@ -0,0 +1,2 @@
+//= link fae/application.css
+//= link fae/application.js

data/app/assets/javascripts/fae/_contrast.js

@@ -0,0 +1,50 @@
+/* global Fae, modal, FCH */
+
+/**
+ * Fae contrast
+ * @namespace
+ */
+
+Fae.contrast = {
+  ready: function () {
+    this.highlightHex = getComputedStyle(document.body).getPropertyValue('--highlight-color');
+
+    // exit if highlight color css var not found
+    if (!this.highlightHex) {
+      return;
+    }
+    
+    this.$body        = $('body');
+    this.whiteHex     = '#fff';
+    this.blackHex     = '#000';
+    this.hexRegex     = /(^#[0-9a-fA-F]{6}$)/;
+
+    // exit if highlight color is not a valid hex color
+    if (!this.hexRegex.test(this.highlightHex)) {
+      return;
+    }
+
+    this.setForegroundColor();
+  },
+  
+
+  // dynamically set foreground color based on contrast with user set highlight color
+  setForegroundColor() {
+    const yiq = this.getContrastYIQ();
+    if (yiq >= 170) {
+      this.$body[0].style.setProperty('--foreground-color', this.blackHex);
+    } else {
+      this.$body[0].style.setProperty('--foreground-color', this.whiteHex);
+    }
+  },
+
+  getContrastYIQ() {
+    const hex = this.highlightHex.replace('#', '');
+    const r = parseInt(hex.substr(0, 2), 16);
+    const g = parseInt(hex.substr(2, 2), 16);
+    const b = parseInt(hex.substr(4, 2), 16);
+    return ((r * 299) + (g * 587) + (b * 114)) / 1000;
+  }
+
+
+};

data/app/assets/javascripts/fae/_deploy.js

@@ -0,0 +1,198 @@
+
+/* global Fae, modal, FCH */
+
+/**
+ * Fae deploy
+ * @namespace
+ */
+
+Fae.deploy = {
+
+  ready: function() {
+    if (!$('body').hasClass('deploy')) return false;
+    this.$deployButtons  = $('.js-run-deploy');
+    this.deployFinished  = true;
+    this.buttonsEnabled  = true;
+    this.pollTimeout     = null;
+    this.pollInterval    = 5000;
+    this.idleStates      = ['ready', 'error', 'rejected']
+
+    this.pollDeployStatus();
+    this.deployButtonListener();
+    this.documentFocusListener();
+    this.notifyIdle();
+    this.refreshDeploysListAndStatuses();
+  },
+
+  deployButtonListener: function() {
+    var _this = this;
+    _this.$deployButtons.click(function(e) {
+      e.preventDefault();
+      _this.disableButtons();
+      var deploy_hook_type = $(this).data('build-hook-type');
+      $.post( '/admin/deploy/deploy_site', { deploy_hook_type: deploy_hook_type }, function(data) {
+        // Netlify returns nothing for deploy hook posts
+      });
+    });
+  },
+
+  documentFocusListener: function() {
+    var _this = this;
+    document.addEventListener('visibilitychange', function(ev) {
+      if (document.visibilityState === 'visible') {
+        _this.pollDeployStatus();
+      } else if (document.visibilityState === 'hidden') {
+        _this.destroyPoll();
+      }
+    });
+  },
+
+  refreshDeploysListAndStatuses: function() {
+    var _this = this;
+    $.get('/admin/deploy/deploys_list', function (data) {
+      if (data) {
+        _this.drawTables(data);
+        _this.stateChecks(data);
+      }
+    });
+  },
+
+  pollDeployStatus: function() {
+    var _this = this;
+    function poll() {
+      _this.refreshDeploysListAndStatuses();
+      _this.pollTimeout = setTimeout(poll, _this.pollInterval);
+    }
+    poll();
+  },
+
+  destroyPoll: function() {
+    clearTimeout(this.pollTimeout);
+  },
+
+  notifyRunning: function() {
+    $('.deploying-heading').addClass('running');
+    $('#js-deploying-section').removeClass('hidden');
+  },
+
+  notifyIdle: function() {
+    $('.deploying-heading').removeClass('running');
+    $('#js-deploying-section').addClass('hidden');
+  },
+
+  enableButtons: function() {
+    var _this = this;
+    if (!_this.buttonsEnabled) {
+      _this.buttonsEnabled = true;
+      _this.$deployButtons.prop('disabled', false);
+    }
+  },
+
+  disableButtons: function() {
+    var _this = this;
+    if (_this.buttonsEnabled) {
+      _this.buttonsEnabled = false;
+      _this.$deployButtons.prop('disabled', true);
+    }
+  },
+
+  afterDeploy: function() {
+    var _this = this;
+    if (!_this.deployFinished) {
+      _this.notifyIdle();
+      _this.enableButtons();
+      _this.deployFinished = true;
+    }
+  },
+
+  drawTables: function(data) {
+    var _this = this;
+    var runningDeploys = _this.getRunningDeploys(data);
+    var pastDeploys = _this.getPastDeploys(data);
+    $('.js-deploys-list').find('tbody').find('tr').remove();
+    _this.injectTableDeployData(runningDeploys, $('.js-deploys-list.running').find('tbody'));
+    _this.injectTableDeployData(pastDeploys, $('.js-deploys-list.past').find('tbody'));
+    Fae.navigation.lockFooter();
+  },
+
+  getRunningDeploys: function(data) {
+    var _this = this;
+    return data.filter(function(deploy) {
+      return $.inArray(deploy.state, _this.idleStates) === -1;
+    });
+  },
+
+  getPastDeploys: function(data) {
+    var _this = this;
+    return data.filter(function(deploy) {
+      return $.inArray(deploy.state, _this.idleStates) !== -1;
+    });
+  },
+
+  injectTableDeployData: function(deploys, $tbody) {
+    var _this = this;
+    $.each(deploys, function(i, deploy) {
+      $tbody.append(
+        $('<tr>').append([
+          $('<td>').text(deploy.commit_ref !== null ? 'FINE dev update' : deploy.title),
+          $('<td>').text(moment(deploy.updated_at).format('MM/DD/YYYY h:mm a')),
+          $('<td>').text(_this.deployDuration(deploy)),
+          $('<td>').text(_this.deployEnvironment(deploy)),
+          $('<td>').html(_this.errorMsg(deploy)),
+        ])
+      );
+    });
+  },
+
+  stateChecks: function(data) {
+    var _this = this;
+    if (_this.deployIsRunning(data)) {
+      _this.notifyRunning();
+      _this.disableButtons();
+      _this.deployFinished = false;
+    } else {
+      _this.afterDeploy();
+    }
+  },
+
+  valCheck: function(val) {
+    if (val !== null) return val;
+  },
+
+  deployIsRunning: function(data) {
+    var _this = this;
+    var running = false;
+    $.each(data, function(i, deploy) {
+      if(_this.idleStates.indexOf(deploy.state) === -1) {
+        running = true;
+        return false;
+      }
+    });
+    return running;
+  },
+
+  deployDuration: function(deploy) {
+    if (deploy.deploy_time === null) {
+      return '–';
+    } else {
+      return moment.utc(parseInt(deploy.deploy_time)*1000).format('HH:mm:ss');
+    }
+  },
+
+  deployEnvironment: function(deploy) {
+    if (deploy.branch === 'master' || deploy.branch === 'main') {
+      return 'Production';
+    }
+    return deploy.branch.charAt(0).toUpperCase() + deploy.branch.slice(1);
+  },
+
+  errorMsg: function(deploy) {
+    if (deploy.error_message) {
+      var out = 'An error occurred. Please contact your ';
+      out += '<a href="/admin/help">FINE team</a>.'
+      return out;
+    }
+  }
+
+};
+

data/app/assets/javascripts/fae/_modals.js

@@ -6,8 +6,19 @@
  */
 Fae.modals = {
   ready: function() {
+    this.$body = $('body');
+    this.openClass = 'modal-open';
+    this.modalClass = 'MODAL_ID-modal-open';
+    this.showEvent = 'modal:show';
+    this.shownEvent = 'modal:shown';
+    this.closeEvent = 'modal:close';
+    this.closedEvent = 'modal:closed';
+    this.modalOpen = false;
+
     this.imageModals();
     this.markdownModalListener();
+
+    this.ajaxModalListener();
   },
 
   /**
@@ -56,5 +67,88 @@ Fae.modals = {
    */
   markdownModalListener: function() {
     FCH.$document.on('click', '.markdown-support', this.markdownModal);
+  },
+
+  /**
+   * load remote data, open modal view
+   * @see {@link modals.formModalListener}
+   * @has_test {features/form_helpers/fae_input_spec.rb}
+   */
+  openAjaxModal: function (remoteUrl, relatedTarget) {
+    var _this = this;
+
+    $.get(remoteUrl, function (data) {
+      //Open remote url content in modal window
+      $(data).modal({
+        minHeight: "75%",
+        minWidth: "75%",
+        overlayClose: true,
+        zIndex: 1100,
+        containerId: "fae-modal",
+        persist: true,
+        opacity: 70,
+        overlayCss: { backgroundColor: "#000" },
+        onOpen: function (dialog) {
+          // Fade in modal + show data
+          dialog.overlay.fadeIn();
+          dialog.container.fadeIn(function() {
+            var shownEvent = $.Event(_this.shownEvent, { dialog: dialog, relatedTarget: relatedTarget });
+            _this.$body.trigger(shownEvent);
+          });
+          dialog.data.show();
+
+          var modalClasses = [_this.createClassFromModalId(relatedTarget.attr('id')), _this.openClass].join(' ');
+
+          _this.modalOpen = true;
+          _this.$body.addClass(modalClasses);
+        },
+        onShow: function (dialog) {
+          var showEvent = $.Event(_this.showEvent, { dialog: dialog, relatedTarget: relatedTarget });
+          _this.$body.trigger(showEvent);
+
+          $(dialog.container).css('height', 'auto')
+        },
+        onClose: function (dialog) {
+          var closeEvent = $.Event(_this.closeEvent, { dialog: dialog, relatedTarget: relatedTarget });
+          _this.$body.trigger(closeEvent);
+
+          // Fade out modal and close
+          dialog.container.fadeOut();
+          dialog.overlay.fadeOut(function () {
+            $.modal.close(); // must call this!
+
+            var closedEvent = $.Event(_this.closedEvent, { dialog: dialog, relatedTarget: relatedTarget });
+            var modalClasses = [_this.createClassFromModalId(relatedTarget.attr('id')), _this.openClass].join(' ');
+
+            _this.modalOpen = false;
+            _this.$body.removeClass(modalClasses);
+            _this.$body.trigger(closedEvent);
+          });
+        }
+      });
+
+    });
+  },
+
+  /**
+   * Click event listener for ajax modal links triggering specific view within modal popup
+   * @fires {@link modals.ajaxModal}
+   * @has_test {features/form_helpers/fae_input_spec.rb}
+   */
+  ajaxModalListener: function () {
+    var _this = this;
+
+    FCH.$document.on('click', '.js-fae-modal', function (e) {
+      e.preventDefault();
+      var $this = $(this);
+      var url = $this.attr('href');
+      var id = $this.attr('id');
+
+      _this.openAjaxModal(url, $this)
+    });
+  },
+
+  createClassFromModalId: function(modalId) {
+    return this.modalClass.replace('MODAL_ID', modalId);
   }
 };

data/app/assets/javascripts/fae/application.js

@@ -30,7 +30,9 @@
 //= require fae/vendor/jquery.tablesorter
 //= require fae/vendor/js.cookie
 //= require fae/vendor/touch_punch
-//= require fae/vendor/simplemde.min
+//= require fae/vendor/simplemde/simplemde.min
+//= require fae/vendor/simplemde/inline-attachment
+//= require fae/vendor/simplemde/codemirror-4.inline-attachment
 
 //= require fae/admin
 
@@ -46,8 +48,10 @@
 //= require fae/form/_cancel
 //= require fae/form/_ajax
 //= require fae/form/_filtering
+//= require fae/form/_form_manager
 //= require fae/form/fae_chosen
 //= require fae/form/fileinputer
+//= require fae/form/drag_drop
 
 //= require fae/navigation/sticky
 //= require fae/navigation/_navigation
@@ -57,6 +61,8 @@
 
 //= require fae/_modals
 //= require fae/_tables
+//= require fae/_deploy
+//= require fae/_contrast
 
 //= require fae
 

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

@@ -67,6 +67,8 @@ Fae.form.ajax = {
         $wrapper.find('.input.file').fileinputer();
       }
 
+      this.$nested_form = $('.nested-form');
+
       // Bind validation to nested form fields added by AJAX
       Fae.form.validator.bindValidationEvents(this.$nested_form);
 
@@ -80,6 +82,9 @@ Fae.form.ajax = {
       Fae.form.text.initHTML();
       Fae.form.checkbox.setCheckboxAsActive();
       Fae.form.select.init();
+      Fae.form.formManager.setupAllFields($wrapper.find('form'));
+      Fae.form.dragDrop.init();
+      Fae.tables.rowSorting();
 
       // validate nested form fields on submit
       Fae.form.validator.formValidate(this.$nested_form);
@@ -116,6 +121,11 @@ Fae.form.ajax = {
 
       var $target = $(evt.target);
 
+      // We need to target the form wrapper containing the target form to enable nesting
+      // multiple forms.
+      // Relying on $this will end up redrawing the top-most parent form with the returned table
+      var $theFormWrapper = $target.closest('.js-addedit-form');
+
       // ignore calls not returning html
       if (data !== ' ' && $(data)[0]) {
         var $this = $(this);
@@ -131,13 +141,13 @@ Fae.form.ajax = {
         if ($html) {
           if($html.hasClass('js-addedit-form') || $html.hasClass( 'js-index-addedit-form' )) {
             // we're returning the table, replace everything
-            _this._addEditReplaceAndReinit($this, $html.html(), $target);
+            _this._addEditReplaceAndReinit($theFormWrapper, $html.html(), $target);
           } else if ($html.hasClass('nested-form')) {
 
             // we're returning the form due to an error, just replace the form
-            $this.find('.nested-form' ).replaceWith($html);
-            $this.find('.select select').fae_chosen();
-            $this.find('.input.file').fileinputer();
+            $theFormWrapper.find('.nested-form' ).replaceWith($html);
+            $theFormWrapper.find('.select select').fae_chosen();
+            $theFormWrapper.find('.input.file').fileinputer();
 
             Fae.form.dates.initDatepicker();
             Fae.form.dates.initDateRangePicker();
@@ -163,6 +173,7 @@ Fae.form.ajax = {
 
         $parent.fadeOut(function(){
           $parent.next('.asset-inputs').fadeIn();
+          $parent.remove();
         });
       }
 
@@ -271,6 +282,7 @@ Fae.form.ajax = {
 
         $parent.fadeOut(function(){
           $parent.next('.asset-inputs').fadeIn();
+          $parent.remove();
         });
       }
     });
@@ -297,7 +309,7 @@ Fae.form.ajax = {
    * @todo Clean this up, moving listeners into their respective component classes (select, checkbox, etc.)
    */
   htmlListeners: function() {
-    $('#js-main-content, .login-form > form')
+    $('#js-main-content, .login-form > form, #simplemodal-data')
 
       /**
        * For the delete button on file input

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

@@ -25,6 +25,7 @@ Fae.form.filtering = {
       }
 
       this.setFilterDropDowns();
+      this.setTextInputs();
       this.filterFormListeners();
       this.paginationListeners();
       this.sortingSetup();
@@ -87,6 +88,7 @@ Fae.form.filtering = {
       // update search param when form submits
       .on('submit', function(ev) {
         $('.js-reset-btn').show();
+        $('.js-reset-btn').removeClass('hidden');
         _this.updateFryrAndResetPaging('search', $('#filter_search').val());
         return false;
       })
@@ -117,6 +119,17 @@ Fae.form.filtering = {
         _this.updateFryrAndResetPaging(key, value);
 
         $('.js-reset-btn').show();
+        $('.js-reset-btn').removeClass('hidden');
+      })
+
+      // update hash when date inputs changed
+      .on('change', '.datepicker input', function() {
+        var key = $(this).attr('id').split('filter_')[1];
+        var value = $(this).val();
+        timer = setTimeout(function() {
+          _this.updateFryrAndResetPaging(key, value);
+          $('.js-reset-btn').show();
+        }, 500);
       });
   },
 
@@ -147,6 +160,27 @@ Fae.form.filtering = {
     $('.js-reset-btn').show();
   },
 
+  /**
+   * Sets filter dropdowns on page load based on Fryr params
+   */
+  setTextInputs: function() {
+    // Exit early if this.fry.params is blank
+    if ($.isEmptyObject(this.fry.params)) {
+      return;
+    }
+
+    // Loop through all available this.fry.params to find the select menu and the proper option
+    $.each(this.fry.params, function(key, value) {
+      var $input = $('.js-filter-form .table-filter-group.text-input #filter_' + key);
+
+      if($input.length) {
+        $input.val(decodeURIComponent(value));
+      }
+    });
+
+    $('.js-reset-btn').show();
+  },
+
   /**
    * Updates a Fryr param while reseting paging
    * Use for most cases of pushing a single params to Fryr, as paging will always reset in those cases

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

@@ -20,15 +20,18 @@ Fae.form = {
     this.ajax.init();
     this.filtering.init();
     this.slugger.init();
-
+    this.formManager.init();
+    
     // input type=file customization
     // This doesn't work in IE. It's not worth figuring out why by this point. IE9 gets plain file uploader.
     if (!FCH.IE9) {
       $('.input.file').fileinputer();
     }
-
+    
     // make all the hint areas
     $('.hint').hinter();
+    
+    this.dragDrop.init();
   },
 
   makeTwoColumnLabels: function() {