fae-rails 2.1.0 → 2.2.0

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

@@ -0,0 +1,295 @@
+/* global Fae */
+
+/**
+ * Fae form manager
+ * @namespace form
+ * @memberof Fae
+ */
+Fae.form.formManager = {
+
+  $theForm:                 null,
+  $managerForm:             null,
+  savedFieldSettings:       null,
+  mainContentClass:         'main-content',
+  fmContainerClass:         'js-form-manager-container',
+  formManagerFormClass:     'form-manager-form',
+  launchManagerClass:       'js-launch-form-manager',
+  cancelManagerClass:       'js-form-manager-cancel',
+  saveAndCloseManagerClass: 'js-form-manager-submit',
+  helperTextTextElClass:    'helper_text_text',
+  infoAttr:                 'data-form-manager-info',
+  languageAttr:             'data-language',
+  requiredEl:               '<abbr title="required">*</abbr> ',
+  containerManagerDataId:   'data-form-manager-id',
+  ignoredFields: [
+    'seo_title',
+    'seo_description',
+    'social_media_title',
+    'social_media_description',
+    'social_media_image'
+  ],
+
+  init: function(formSelector) {
+    var _this      = this;
+    formSelector   = formSelector || 'form:first';
+    _this.$theForm = $(formSelector);
+
+    // Draw initial label/helper overrides
+    _this.setupAllFields(_this.$theForm);
+
+    $('body').on('click', '.'+_this.launchManagerClass, function(e) {
+      e.preventDefault();
+      _this.$theForm = $(this).parents('form');
+      _this._launchManager($(this));
+    });
+
+    $('body').on('click', '.'+_this.saveAndCloseManagerClass, function(e) {
+      e.preventDefault();
+      _this._saveAndCloseManager($(this));
+    });
+
+    $('body').on('click', '.'+_this.cancelManagerClass, function(e) {
+      e.preventDefault();
+      _this._closeManager($(this));
+    });
+
+  },
+
+  setupAllFields: function($theForm) {
+    _this = this;
+    if ($theForm.length && $theForm.attr(_this.infoAttr)) {
+      this.savedFieldSettings = JSON.parse($theForm.attr(_this.infoAttr));
+
+      $.each(JSON.parse(this.savedFieldSettings.fields), function(i, fieldSettings) {
+        _this._determineFieldSetup(fieldSettings);
+      });
+    }
+  },
+
+  _determineFieldSetup: function(fieldSettings) {
+    var $container = $('[data-form-manager-id="'+fieldSettings.formManagerId+'"]');
+    _this._setupField($container, fieldSettings.label, fieldSettings.helper);
+
+    if ($container.hasClass('image')) {
+      var $captionContainer = $('.' + fieldSettings.formManagerId + '_caption_container');
+      var $altContainer = $('.' + fieldSettings.formManagerId + '_alt_container');
+
+      if ($captionContainer) {
+        var captionLabel = fieldSettings.label + ' Caption';
+        _this._setupField($captionContainer, captionLabel, '');
+      }
+      if ($altContainer) {
+        var altLabel = fieldSettings.label + ' Alt Text';
+        _this._setupField($altContainer, altLabel, '');
+      }
+    }
+  },
+
+  _setupField: function($container, overriddenLabel, overriddenHelper) {
+    var _this = this;
+    if ($container.length) {
+      var $label                 = $container.find('label:first');
+      var $helperTextContainerEl = $container.find('h6');
+      var $labelInner            = $label.find('.label_inner');
+      var $labelTextEl           = $label;
+      if ($labelInner.length) {
+        $labelTextEl = $labelInner;
+      }
+      var $labelsCheckbox = $labelTextEl.find('input');
+
+      var newLabelText = '';
+      if ($container.hasClass('required') || $label.hasClass('required') || $labelInner.text().indexOf('*') !== -1) {
+        newLabelText = _this.requiredEl;
+      }
+
+      newLabelText += overriddenLabel;
+      $labelTextEl.html(newLabelText);
+
+      if($labelsCheckbox.length) {
+        $labelTextEl.append($labelsCheckbox);
+      }
+
+      // Don't mess with image alt text or caption helpers
+      if ($container.attr('class').indexOf('alt_container') !== -1
+          || $container.attr('class').indexOf('caption_container') !== -1
+         ) {
+        return;
+      }
+
+      // Just do the helper thing no matter what, aka allow empty
+      $label.removeClass('has_no_helper_text');
+
+      // Main form and nested form markup differs, deal with it
+      if ($container.find('h6').length) {
+        $label.find('.'+_this.helperTextTextElClass).text(overriddenHelper);
+      } else {
+        if ($helperTextContainerEl.length) {
+          $helperTextContainerEl.find('.'+_this.helperTextTextElClass).text(overriddenHelper);
+        } else {
+          $helperTextContainerEl = $('<h6 />', {class: 'helper_text'}).append($('<span />', {class: 'helper_text_text', text: overriddenHelper}));
+        }
+        $label.append($helperTextContainerEl);
+      }
+    }
+  },
+
+  _launchManager: function() {
+    var _this = this;
+
+    // Show all language inputs so we can manage them
+    _this.$theForm.find('['+_this.languageAttr+']').show();
+
+    _this.$managerForm =
+      $('<form />', {action: '#', class: _this.formManagerFormClass})
+        .append($('<header />', {class: 'content-header js-content-header js-will-be-sticky'})
+          .append($('<a />', {href: '#', text: 'Cancel', class: 'button '+_this.cancelManagerClass}))
+          .append($('<a />', {href: '#', text: 'Submit', class: 'button js-form-manager-submit'}))
+      );
+
+    // Insert a bunch of inputs for label/helper text
+    _this._gatherAndInjectManagerEls();
+
+    $('.'+_this.fmContainerClass).append(_this.$managerForm);
+    _this._revealManagerForm();
+
+  },
+
+  _gatherAndInjectManagerEls: function() {
+    $(_this.$theForm.find('['+_this.containerManagerDataId+']')).each(function(i) {
+      var $container    = $(this);
+
+      if ($container.hasClass('hidden') || !_this._shouldDisplayInManager($container)) { return; }
+
+      var $label        = $container.find('label:first');
+      var $labelTextEl  = $label;
+      var $labelInner   = $label.find('.label_inner');
+      if ($labelInner.length) {
+        $labelTextEl = $labelInner;
+      }
+      var $helperTextTextEl  = $label.find('.'+_this.helperTextTextElClass);
+      var containerManagerId = $container.attr(_this.containerManagerDataId);
+      var iDParts            = containerManagerId.split('_');
+      iDParts.shift();
+      var fMLabelText        = _this._titleize(iDParts.join(' '));
+      var labelInputValue    = $labelTextEl.clone().children().remove().end().text().replace('*','').trim();
+      var helperInputValue   = $helperTextTextEl.text();
+
+      var $fmFieldContainer             = $('<div />', {class: "form-section", 'data-form-manager-id': $container.attr('data-form-manager-id')});
+      var $fmSingleFieldContainer       = $('<div />', {class: "single-field"});
+      var $fmSingleHelperFieldContainer = $('<div />', {class: "single-field"});
+      var $fmFieldTitle                 = $('<div />', {class: "field_title"});
+      var $fmHelperFieldTitle           = $('<div />', {class: "field_title"});
+      var $fMLabel                      = $('<label />', {text: fMLabelText, class: 'fm_label'});
+      var $fMHelper                     = $('<label />', {text: 'Helper', class: 'fm_label'});
+      var $labelInput                   = $('<input />', {type: 'text', id: $container.attr('data-form-manager-id')+'_label_input', class: 'label_input', value: labelInputValue});
+      var $helperInput                  = $('<input />', {type: 'text', id: $container.attr('data-form-manager-id')+'_helper_input', class: 'helper_input', value: helperInputValue});
+
+      _this.$managerForm.append(
+        $fmFieldContainer.append(
+          $fmSingleFieldContainer.append(
+            $fmFieldTitle.append(
+              $fMLabel
+            ),
+            $labelInput
+          ),
+          $fmSingleHelperFieldContainer.append(
+            $fmHelperFieldTitle.append(
+              $fMHelper
+            ),
+            $helperInput
+          )
+        )
+      );
+
+    });
+  },
+
+  _revealManagerForm: function() {
+    var _this = this;
+    $('.'+_this.mainContentClass).hide();
+    $('.'+_this.fmContainerClass).show();
+    $('.'+_this.formManagerFormClass).fadeIn('fast');
+  },
+
+  _saveAndCloseManager: function() {
+    _this = this;
+    _this._submitManager();
+    _this._closeManager();
+  },
+
+  _closeManager: function() {
+    var _this = this;
+    $('.'+_this.fmContainerClass).children().remove();
+    $('.'+_this.mainContentClass).show();
+  },
+
+  _submitManager: function() {
+    var _this = this;
+    var payload = {
+      form_manager: {
+        form_manager_model_name: _this.$theForm.data('form-manager-model'),
+        form_manager_model_id:   _this.$theForm.data('form-manager-model-id'),
+        fields: {}
+      }
+    };
+
+    // Gather everything in the inputs for a POST
+    $.each(_this.$managerForm.find('['+_this.containerManagerDataId+']'), function(i) {
+      var $container    = $(this);
+      var formManagerId = $container.attr(_this.containerManagerDataId);
+      var requiredValue = $container.hasClass('required') ? 1 : 0;
+
+      payload.form_manager.fields[formManagerId] = {
+        formManagerId: formManagerId,
+        label:         $container.find('.label_input').val(),
+        helper:        $container.find('.helper_input').val(),
+        required:      requiredValue
+      };
+    });
+
+    // Reset the labels/helpers to the custom ones just made
+    $.each(payload.form_manager.fields, function(i, fieldSettings) {
+      _this._determineFieldSetup(fieldSettings);
+    });
+
+    $.ajax({
+      url: Fae.path+'/form_managers/update',
+      type: 'post',
+      data: payload,
+      headers: {
+        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
+      },
+      dataType: 'json',
+      success: function (data) {
+        // do something?
+      }
+    });
+
+  },
+
+  _shouldDisplayInManager: function($container) {
+    var _this = this;
+    var should = true;
+    $(_this.ignoredFields).each(function(i, fuzzyClass) {
+      if ($container.attr('class').indexOf(fuzzyClass) > -1) {
+        should = false;
+        return false;
+      }
+    });
+    return should;
+  },
+
+  _capitalize: function(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  },
+
+  _titleize: function(str) {
+    var _this = this;
+    var string_array = str.split(' ');
+    string_array = string_array.map(function(str) {
+       return _this._capitalize(str);
+    });
+    return string_array.join(' ');
+  }
+
+};

data/app/assets/javascripts/fae/form/_slugger.js.erb

@@ -74,8 +74,8 @@ Fae.form.slugger = {
     slug_text = slug_text.join(' ');
 
     // Strip accented characters
-    var from = 'àáâãäæåçèéêëęēėìíîïñòóôõöùúûüýÿÀÁÂÃÄÇÈÉÊËÌÍÎÏÑÒÓÔÕÖÙÚÛÜÝ';
-    var to = 'aaaaaaaceeeeeeeiiiinooooouuuuyyAAAAACEEEEIIIINOOOOOUUUUY';
+    var from = 'âàáâãäæåçèéêëęēėìíîïñòóôõöùúûüýÿÀÁÂÃÄÇÈÉÊËÌÍÎÏÑÒÓÔÕÖÙÚÛÜÝ';
+    var to = 'aaaaaaaaceeeeeeeiiiinooooouuuuyyAAAAACEEEEIIIINOOOOOUUUUY';
 
     // Loop through all accented characters and replace with non-accents
     for (var i = 0; i < from.length; i++) {

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

@@ -92,8 +92,11 @@ Fae.form.select = {
         })
       });
 
-      // Add actions to wraper
-      $deselect_all_action.insertAfter($chosen);
+      // prevent duplicate link from being added when nested form re-renders on the page after saving
+      if (!$('.js-multiselect-action-deselect_all').length > 0) {
+        // Add actions to wraper
+        $deselect_all_action.insertAfter($chosen);
+      }
 
       // Add special "Select All" option and notify Chosen of new option
       addSelectAllOption($element)

data/app/assets/stylesheets/fae/base.scss

@@ -32,7 +32,8 @@
   'globals/navigation/sidenav',
   'globals/navigation/mobilenav',
   'globals/navigation/utility',
-  'globals/navigation/search'
+  'globals/navigation/search',
+  'globals/navigation/multi-col-subnav'
 ;
 
 // Tables
@@ -52,6 +53,7 @@
 @import
   'modules/buttons',
   'modules/modal',
+  'modules/deploy',
   'modules/toggles',
   'modules/alerts'
 ;
@@ -70,7 +72,8 @@
   'modules/forms/colorpicker',
   'modules/forms/hints',
   'modules/forms/validation',
-  'modules/forms/simple-mde'
+  'modules/forms/simple-mde',
+  'modules/forms/form-manager'
 ;
 
 // Pages

data/app/assets/stylesheets/fae/globals/imports/_variables.scss

@@ -89,6 +89,7 @@ $c-chosen-gradient-end: $c-light-grey !default;
 $c-chosen-multi-bg: $c-lightest-grey !default;
 $c-chosen-multi-text: $c-dark-grey !default;
 $c-chosen-multi-delete: $c-darker-grey !default;
+$c-focus-border: $c-mid-dark-grey !default;
 
 // Yes / No Sliders
 $c-slider-no-color: $c-light-grey !default;

data/app/assets/stylesheets/fae/globals/layout/_base.scss

@@ -33,8 +33,7 @@
     text-transform: uppercase;
     font-size: 14px;
     letter-spacing: .2em;
-    // counters the padding from .content
-    margin: 0 negate($content-buffer) 30px;
+    margin: 0 0 30px;
   }
 
   h3 {
@@ -46,3 +45,9 @@
     margin-bottom: 20px;
   }
 }
+
+p {
+  margin-bottom: 1.3em;
+  max-width: 80%;
+  line-height: 1.2em;
+}

data/app/assets/stylesheets/fae/globals/layout/_content-header.scss

@@ -10,7 +10,7 @@ $content-header-padding: 16px;
   position: absolute;
   left: 0;
   top: 0;
-  box-shadow: 0 0 10px $c-grey;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -43,7 +43,7 @@ $content-header-padding: 16px;
     display: inline-block;
     vertical-align: top;
     padding: 6px 0;
-    border-bottom: 4px solid transparent;
+    border-bottom: 2px solid transparent;
     margin: 0 12px;
     font-size: 13px;
     color: $c-darkest-grey;
@@ -74,6 +74,12 @@ $content-header-padding: 16px;
 }
 
 .content-header-buttons {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  display: flex;
+  align-items: center;
+  right: 30px;
   a {
     margin-right: 5px;
 

data/app/assets/stylesheets/fae/globals/navigation/_header.scss

@@ -6,7 +6,7 @@
   left: 0;
   width: 100%;
   background: $c-header-bg;
-  border-bottom: $header-border-width solid $c-custom-highlight;
+  border-top: $header-border-width solid $c-custom-highlight;
 
   @include bp(large) {
     padding: 0 $content-buffer;
@@ -87,7 +87,7 @@
   }
 }
 
-.main-header-nav {
+.main-header-nav, .utility-nav {
   @include transition(opacity .2s ease-in-out);
 
   a {

data/app/assets/stylesheets/fae/globals/navigation/_multi-col-subnav.scss

@@ -0,0 +1,50 @@
+$col_width: 176px;
+$col_width_padding: 36px;
+
+header.main-header ul ul.multicol-nav {
+  min-height: auto;
+  max-height: 1024px!important;
+  left: -($col_width * .5);
+}
+.main-header-nav li:nth-of-type(n+5) ul.multicol-nav.three,
+.main-header-nav li ul.multicol-nav.four,
+.main-header-nav li:nth-of-type(n+7) ul.multicol-nav {
+  left: -($col_width * 0.75);
+}
+.main-header-nav li:nth-of-type(n+6) ul.multicol-nav.three,
+.main-header-nav li:nth-of-type(n+2) ul.multicol-nav.four,
+.main-header-nav li:nth-of-type(n+8) ul.multicol-nav {
+  left: -($col_width * 1);
+}
+
+.main-header-nav li:nth-of-type(n+7) ul.multicol-nav.three,
+.main-header-nav li:nth-of-type(n+3) ul.multicol-nav.four {
+  left: -($col_width * 1.25);
+}
+
+.main-header-nav li:nth-of-type(n+8) ul.multicol-nav.three,
+.main-header-nav li:nth-of-type(n+4) ul.multicol-nav.four {
+  left: -($col_width * 1.75);
+}
+
+.main-header-nav li:nth-of-type(n+5) ul.multicol-nav.four {
+  left: -($col_width * 2.25);
+}
+.main-header-nav li:nth-of-type(n+6) ul.multicol-nav.four {
+  left: -($col_width * 2.5);
+}
+.main-header-nav li:nth-of-type(n+7) ul.multicol-nav.four {
+  left: -($col_width * 3);
+}
+
+
+.multicol-nav {
+  display: grid;
+  grid-template-columns: $col_width $col_width;
+  &.three {
+    grid-template-columns: $col_width $col_width $col_width;
+  }
+  &.four {
+    grid-template-columns: $col_width $col_width $col_width $col_width;
+  }
+}

data/app/assets/stylesheets/fae/modules/_buttons.scss

@@ -13,6 +13,10 @@ button[type=button],
   line-height: 1;
 }
 
+.deploy .button {
+  margin-right: 10px;
+}
+
 // Dark buttons
 
 input[type=submit],
@@ -47,6 +51,13 @@ button[type=button],
   &:hover {
     background: $c-light-button-gradient-end;
   }
+
+  &:disabled {
+    background: $c-light-button-gradient-end;
+    color: $c-mid-grey;
+    border-color: $c-grey;
+    cursor: wait;
+  }
 }
 
 .button {

data/app/assets/stylesheets/fae/modules/_deploy.scss

@@ -0,0 +1,25 @@
+.deploying-heading.running:after {
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: bottom;
+  -webkit-animation: ellipsis steps(4,end) 900ms infinite;
+  animation: ellipsis steps(4,end) 900ms infinite;
+  content: "\2026"; /* ascii code for the ellipsis character */
+  width: 0px;
+}
+
+@keyframes ellipsis {
+  to {
+    width: 20px;
+  }
+}
+
+@-webkit-keyframes ellipsis {
+  to {
+    width: 20px;
+  }
+}
+
+.hidden {
+  display: none;
+}

data/app/assets/stylesheets/fae/modules/_modal.scss

@@ -76,3 +76,28 @@
     font-size: 12px;
   }
 }
+
+#fae-modal {
+  padding: 0;
+  box-shadow: none;
+
+  .simplemodal-data {
+    min-height: 100%;
+  }
+
+  .simplemodal-close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    height: 20px;
+    width: 20px;
+
+    &:before {
+      position: relative;
+      padding: 4px;
+      top: auto;
+      right: auto;
+      color: #3b3b3b;
+    }
+  }
+}

data/app/assets/stylesheets/fae/modules/_toggles.scss

@@ -2,47 +2,63 @@
 .slider-wrapper {
   display: block;
   position: relative;
-  width: 60px;
-  border: 1px solid $c-mid-grey;
-  border-radius: 2px;
+  width: 50px;
+  border-radius: 15px;
+  height: 25px;
   font-size: 12px;
-  overflow: hidden;
   cursor: pointer;
   text-decoration: none;
-  background: $c-white;
+  background: $c-light-grey;
+  transition: background-color 0.24s;
+  &:hover, &:focus {
+    background-color: $c-mid-grey;
+  }
+  &.slider-yes-selected {
+    background: $c-custom-highlight;
+  }
 }
 
 .slider-options {
-  @include transition(left .2s);
-  position: relative;
-  left: -35px;
+  @include transition(left .24s);
   white-space: nowrap;
-
-  .slider-yes-selected & {
-    left: 0;
-  }
 }
 
 .slider-option-selector {
-  display: inline-block;
-  width: 18px;
+  display: block;
+  position: absolute;
+  width: 50%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: 50%;
+  box-sizing: border-box;
+  height: 100%;
+  border: 1px solid $c-mid-grey;
+  transition: left 0.24s;
+  .slider-yes-selected & {
+    left: 50%;
+  }
+  background: $c-white;
 }
 
 .slider-option-no,
 .slider-option-yes {
-  @include user-select(none);
-  display: inline-block;
-  width: 35px;
-  padding: 3px 4px;
-  text-align: center;
+  position: absolute;
+  height: 0;
+  width: 0;
+  left: -200vw;
 }
 
 .slider-option-no {
-  color: $c-slider-no-color;
-  background: $c-slider-no-bg;
+  display:block;
+  .slider-yes-selected & {
+    display: none;
+  }
 }
 
 .slider-option-yes {
-  color: $c-white;
-  background: $c-custom-highlight;
+  display: none;
+  .slider-yes-selected & {
+    display:block;
+  }
 }

data/app/assets/stylesheets/fae/modules/forms/_asset-actions.scss

@@ -45,7 +45,7 @@
     margin-right: 10px;
 
     &:focus {
-      border-color: $c-notice-content;
+      border-color: $c-focus-border;
       outline: 0;
     }
 

data/app/assets/stylesheets/fae/modules/forms/_base.scss

@@ -14,7 +14,7 @@ input[type=email] {
   max-width: 100%;
 
   &:focus {
-    border-color: $c-notice-content;
+    border-color: $c-focus-border;
   }
 }
 

data/app/assets/stylesheets/fae/modules/forms/_checkbox.scss

@@ -56,7 +56,7 @@ label.checkbox,
 
 label.checkbox.focused:before,
 .checkbox.focused label:before {
-  border-color: $c-notice-content;
+  border-color: $c-focus-border;
 }
 
 .checkbox-wrapper {