fae-rails 1.4.1 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5ca1e68d30ca0971938a3c67346c2e3206e69da9
-  data.tar.gz: c7e4a0028cc5cba77b65a0fe43c80f62f79c7025
+  metadata.gz: f1fe56e23cab5d11935a3a65e8e9dfc3166c4188
+  data.tar.gz: c80ca3ab502aa32aff7727a513f77c7410178461
 SHA512:
-  metadata.gz: 3887719aaabd5523019aebda185bc64ff4176f185dc0b65651542d8fa76537491e0fc532276e2f0568ecb959959c401d46be6873c85795789cd1304c5b7f66ca
-  data.tar.gz: f64402c0062646be6ecc14ed29e7a1af669ece3ff90a7750591a4acbb886d05b92a61bbec8f9b499b1b71576fe513d2d6acadaf40d7d407247e562711bee58e4
+  metadata.gz: 808c0f7aee35990a98189ec60e153bb69721bbc480c5ac585fe16ec027a872f70d98e052a6538c764087b8332c19e16959a26150e93bde12f759745658b5aeec
+  data.tar.gz: 1bb677026b37881aab4fb1e39d6b2bead0ae39e53f449aa304a39db98303fddf6fde4c2ab05eeced9c909b8d849d8554dca5a21fe62baebcc47458c71fb9b140

data/README.md

@@ -1,6 +1,5 @@
 # Meet Fae
 
-[![Build Status](https://jenkins.afinedevelopment.com/buildStatus/icon?job=Fae/Prod)](https://jenkins.afinedevelopment.com/job/Fae/job/Prod/)
 [![Code Climate](https://codeclimate.com/github/wearefine/fae/badges/gpa.svg)](https://codeclimate.com/github/wearefine/fae)
 
 
@@ -60,6 +59,7 @@ $ bundle update sass
 * [Pages and Content Blocks](docs/topics/pages.md)
 * [Custom JS, CSS and Helpers](docs/topics/custom_js_css.md)
 * [Root Settings](docs/topics/root_settings.md)
+* [Caching](docs/topics/caching.md)
 
 
 ### Features
@@ -80,6 +80,7 @@ $ bundle update sass
 * [Adding Conditional Validations](docs/tutorials/conditional_validations.md)
 * [Custom Image Processing](docs/tutorials/custom_images.md)
 * [Overriding The Landing Page](docs/tutorials/landing_page.md)
+* [Overriding The Markdown Helper](docs/tutorials/markdown_helper.md)
 * [Devise Action Mailer Configuration](docs/tutorials/actionmailer.md)
 
 
@@ -101,4 +102,3 @@ $ bundle update sass
 ## [Changelog](CHANGELOG.md)
 
 ## [MIT License](LICENSE)
-

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

@@ -14,7 +14,7 @@ Fae.modals = {
    * Click event to open modal with only an image
    */
   imageModals: function() {
-    $('.js-image-modal').click(function(e){
+    $('#js-main-content').on('click', '.js-image-modal', function(e) {
       e.preventDefault();
       var $this = $(this);
 

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

@@ -109,11 +109,13 @@ Fae.form.ajax = {
       // ignore calls not returning html
       if (data !== ' ' && $(data)[0]) {
         var $this = $(this);
-        var $html = $(data);
 
-        // remotipart returns data inside textarea, let's grab it from there
-        if ($html.is('textarea')) {
-          $html = $( $html.val() );
+        // if its the new or old remotipart, return the html
+        var $html = $(data).length === 1 ? $(data) : $(data)[2];
+
+        // if it returns data inside textarea, strip that out
+        if ( $($html).is('textarea') ) {
+          $html = $( $($html).val() );
         }
 
         if ($html) {
@@ -283,17 +285,22 @@ Fae.form.ajax = {
 
   /**
    * Attaching click handlers to #main_content to allow ajax replacement
+   * @todo Clean this up, moving listeners into their respective component classes (select, checkbox, etc.)
    */
   htmlListeners: function() {
-    $('#js-main-content')
+    $('#js-main-content, .login-form > form')
 
-      // for the yes/no slider
+      /**
+       * For the yes/no slider
+       */
       .on('click', '.slider-wrapper', function(e){
         e.preventDefault();
         $(this).toggleClass('slider-yes-selected');
       })
 
-      // The settings menu for tables and checkboxes
+      /**
+       * The settings menu for tables and checkboxes
+       */
       .on('click', '.boolean label, .js-checkbox-wrapper label', function(e){
         var $this = $(this);
 
@@ -302,9 +309,69 @@ Fae.form.ajax = {
         }
       })
 
-      // stop the event bubbling and running the above toggleClass twice
+      /**
+       * Stop event bubbling and running the above toggleClass twice
+       */
       .on('click', '.boolean :checkbox, .js-checkbox-wrapper :checkbox', function(e){
         e.stopPropagation();
+      })
+
+      /**
+       * Support for a focus state on radio collections
+       */
+      .on('focus blur', '.radio_collection :radio', function(e) {
+        $(this)
+          .closest('.input.radio_collection')
+          .toggleClass('focused', $(this).has(':focus'));
+      })
+
+      /**
+       * Support for a focus state on checkboxes
+       */
+      .on('focus blur', '.boolean :checkbox, .js-checkbox-wrapper :checkbox', function(e) {
+        $(this)
+          .closest('label.boolean, span.checkbox')
+          .toggleClass('focused', $(this).has(':focus'));
+      })
+
+      /**
+       * Support spacebar toggling for checkboxes
+       */
+      .on('keydown', '.boolean, .js-checkbox-wrapper :checkbox', function(e) {
+        if (e.which === 32) {
+          e.preventDefault();
+          $(':checkbox:focus')
+            .closest('label')
+            .trigger('click');
+        }
+      })
+
+      /**
+       * Support for shift+tab off of ms-list element.
+       * By default, $.multiSelect() plugin captures shift+tab and disgards it
+       * @todo This entire method feels very brittle. Possible alternative:
+       * - Create an index of all focusable form elements on page load / DOM mutation
+       * - Use this index to navigate upwards from .ms-list element
+      */
+      .on('keydown', '.ms-list', function(e) {
+        if (e.which === 9 && e.shiftKey) {
+          e.preventDefault();
+
+          // Sniff out the previous focusable element
+          var $prevFocusable = $(this)
+            .closest('.input')
+            .prevAll('.input:not(.hidden):first') // Ugh X(
+            .find('input[type!=hidden][type!=file], select, button, textarea') // Yuck :(
+            .first();
+
+          // Trigger focus
+          $prevFocusable.focus();
+
+          // Check for select instance and further trigger focus via Chosen API
+          if ($prevFocusable.is('select')) {
+            $prevFocusable.trigger('chosen:activate');
+          }
+        }
       });
   }
 

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

@@ -31,17 +31,17 @@ Fae.form.filtering = {
     // hardcode _this because this === Fryr object
     var _this = Fae.form.filtering;
     var post_url = _this.$filter_form.attr('action');
-    var $results_table = ($(".js-results-table").length) ? $(".js-results-table").first() : _this.$filter_form.find('table');
- 
+    var $results_table = ($(".js-results-table").length) ? $(".js-results-table").first() : _this.$filter_form.next('table');
+
     $results_table.addClass('loading-fade');
 
     $.post(post_url, this.params, function(data){
       var $data = $(data);
       var $table_from_data = $data.find('table').first();
-      
+
       // replace table
       $results_table.replaceWith($table_from_data);
-      
+
       // replace sticky header
       $('.sticky-table-header thead').html($table_from_data.find('thead').html());
       // replace pagination

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

@@ -8,23 +8,9 @@
 Fae.form.checkbox = {
 
   init: function() {
-    this.loginCheckbox();
     this.setCheckboxAsActive();
   },
 
-  /**
-   * Login page checkbox listeners to add active class on click
-   */
-  loginCheckbox: function() {
-    $('.login-body')
-      .on('click', 'label.boolean', function(e){
-        $(this).toggleClass('active');
-      })
-      .on('click', '.input.boolean :checkbox', function(e){
-        e.stopPropagation();
-      });
-  },
-
   /**
    * Run through the checkboxes and see if they are checked. apply js class for styling.
    */
@@ -37,4 +23,5 @@ Fae.form.checkbox = {
       }
     });
   }
+
 };

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

@@ -51,6 +51,11 @@ Fae.form.text = {
         spellChecker: false,
         hideIcons: ['image', 'side-by-side', 'fullscreen', 'preview']
       });
+
+      // Disable tabbing within editor
+      editor.codemirror.options.extraKeys['Tab'] = false;
+      editor.codemirror.options.extraKeys['Shift-Tab'] = false;
+
       $this.addClass('mde-enabled');
 
       // code mirror events to hook into current form element functions

data/app/assets/javascripts/fae/navigation/_navigation.js

@@ -169,12 +169,13 @@ Fae.navigation = {
 
     if(FCH.exists('.js-content-header')) {
       var $header = $('.js-content-header');
-      var sidebar_top_offset = (parseInt( $header.outerHeight(), 10) + 20) + 'px';
-      $('#js-sidenav').css('padding-top',  sidebar_top_offset );
+      var sidebar_top_offset = (parseInt( $header.outerHeight(), 10) + 30) + 'px';
+      $('#js-sidenav').css('padding-top', sidebar_top_offset );
 
       $header.sticky({
         placeholder: true,
-        perpetual_placeholder: true
+        perpetual_placeholder: true,
+        ignore_placeholder_offsets: true
       });
 
     } else {

data/app/assets/javascripts/fae/navigation/sticky.js

@@ -69,6 +69,7 @@
     });
 
     $placeholder.insertAfter(this.$el);
+
     // save for reference later
     this.$placeholder = $placeholder;
   };
@@ -140,7 +141,7 @@
     }
 
     function debounceResizeCallback() {
-      if ( _this.$placeholder && _this.$placeholder.is(':visible')) {
+      if ( _this.$placeholder && !_this.options.ignore_placeholder_offsets && _this.$placeholder.is(':visible')) {
         setDimensionsTopLeft.call(_this, _this.$placeholder);
       } else {
         setDimensionsTopLeft.call(_this, _this.$el);
@@ -168,6 +169,7 @@
       class_name: 'js-sticky',
       placeholder_class: 'js-sticky-placeholder',
       placeholder: false,
+      ignore_placeholder_offsets: false,
       offset: 0,
       perpetual_placeholder: false
     };

data/app/assets/javascripts/fae/vendor/jquery.multi-select.js

@@ -221,10 +221,12 @@
               tabindex = (e.shiftKey) ? tabindex-1 : tabindex+1;
               $('[tabindex="'+(tabindex)+'"]').focus();
               return;
-            }else{
-              if(e.shiftKey){
-                that.$element.trigger('focus');
-              }
+            } else {
+              // @hack Disable key capture on shift+tab
+              // @author Aaron Ransley, 12/12/16
+              // if(e.shiftKey){
+              //   that.$element.trigger('focus');
+              // }
             }
         }
         if($.inArray(e.which, that.options.keySelect) > -1){
@@ -286,7 +288,7 @@
       }
       if ($nextElem.length > 0){
         $nextElem.addClass('ms-hover');
-        var scrollTo = $list.scrollTop() + $nextElem.position().top - 
+        var scrollTo = $list.scrollTop() + $nextElem.position().top -
                        containerHeight / 2 + elemHeight / 2;
 
         $list.scrollTop(scrollTo);

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

@@ -20,9 +20,6 @@ $breakpoints: map-merge($fine-breakpoints, $fae-breakpoints);
 // Widths, padding, margins, and the like
 $content-buffer: 30px !default;
 $sidenav-width: 250px !default;
-$sidenav-padding-one-level: 10px !default;
-$sidenav-padding-base-level: $content-buffer !default;
-$sidenav-active-border-width: 7px !default;
 
 $header-border-width: 4px !default;
 

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

@@ -5,7 +5,7 @@
 .nav {
   top: 0;
   left: 0;
-  width: $sidenav-width;
+  width: $sidenav-width - 30px;
   height: 100%;
   font-size: 15px;
   overflow: auto;

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

@@ -1,33 +1,31 @@
 .sidenav {
   @include stack($fae-nav-stack);
   position: absolute;
+  left: $content-buffer;
 
   @include bp(large-down) {
     display: none;
   }
 
   a {
-    padding: 10px $sidenav-padding-base-level;
+    padding: 3px 0;
 
     &.-current {
       font-weight: bold;
       color: $c-black;
-      padding-left: $sidenav-padding-base-level - $sidenav-active-border-width;
-      border-left: $sidenav-active-border-width solid $c-custom-highlight;
     }
   }
 
   .subnav {
-    padding-left: $sidenav-padding-base-level;
+    padding: 10px 10px 10px 0;
+    background-color: $c-light-grey;
   }
 
   li {
     &.-parent-current {
       > a {
-        color: $c-black;
-        font-weight: bold;
-        padding-left: $sidenav-padding-base-level - $sidenav-active-border-width;
-        border-left: $sidenav-active-border-width solid $c-custom-highlight;
+        color: $c-white;
+        background-color: $c-custom-highlight;
       }
 
       > ul {
@@ -36,6 +34,21 @@
     }
   }
 
+  > ul > li:not(.sidenav-accordian) {
+    border: 1px solid $c-grey;
+    border-bottom: none;
+    background-color: $c-white;
+
+    &:last-of-type {
+      border-bottom: 1px solid $c-grey;
+    }
+
+    > a {
+      padding: 13px 15px;
+      font-size: 15px;
+    }
+  }
+
   // Index pages
   ~ .content,
   // Edit pages
@@ -48,36 +61,77 @@
 
 // The accordion. An <li> element.
 .sidenav-accordion {
+  font-size: 13px;
+  line-height: 1.38em;
+
   &.-open {
     > a {
       &:after {
-        @extend .icon-arrow_up:before;
-        color: $c-black;
+        @extend .icon-arrow_down:before;
+        top: 19px;
+        transform: rotate(0);
+        opacity: 1;
+      }
+    }
+  }
+
+  &.-parent-current {
+    > a:hover:after {
+      color: $c-white;
+    }
+
+    &.-open {
+      > a {
+        &:after {
+          color: $c-white;
+        }
       }
     }
   }
 
   a {
+    padding-left: $content-buffer;
+    padding-right: $content-buffer;
+    margin-top: 7px;
+
     &.-current {
-      border-left: 0;
-      padding-left: $sidenav-padding-one-level;
+      border-left: 5px solid $c-custom-highlight;
+      padding-left: 25px;
     }
   }
 
-  li {
-    a {
-      font-size: 13px;
-      padding-left: $sidenav-padding-one-level;
-    }
+  > ul:first-of-type > li:first-child a {
+    margin-top: 0;
+  }
+
+  &:not(:first-of-type) > a {
+    border-top: 0;
   }
 
   > a {
     @extend %nav-icon;
 
+    margin-top: 0;
+    padding: 13px $content-buffer 13px 15px;
+    font-size: 15px;
+    background-color: $c-white;
+
     &:after {
-      @extend .icon-arrow_down:before;
-      top: 14px;
+      @extend .icon-arrow_up:before;
+
+      top: 18px;
+      right: 13px;
+      color: $c-black;
       font-size: 6px;
+
+      transition: opacity 0.4s ease,
+                  color 0.4s ease;
+      transform: rotate(90deg);
+      opacity: 0;
+    }
+
+    &:hover:after {
+      opacity: 1;
     }
   }