fae-railsz 2.1.0

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

@@ -0,0 +1,162 @@
+/* global Fae, multiSelect, fae_chosen */
+
+/**
+ * Fae form select
+ * @namespace form.select
+ * @memberof form
+ */
+Fae.form.select = {
+
+  init: function() {
+    this.multiselectOrChosen();
+    this.multiselectChosenActions();
+  },
+
+  /**
+   * Initialize multi select fields or regular select fields and add appropriate available/added item helper text
+   */
+  multiselectOrChosen: function() {
+    var _this = this;
+    var availableItemsStr = ' Available Items';
+    var addedItemsStr = ' Added Items';
+
+    /**
+     * On selection change, update items left and currently added
+     * @private
+     */
+    function updateMultiselectHeader() {
+      var $instance = $(this)[0];
+      $('.ms-selectable .custom-header').text( $instance.$selectableContainer.find($instance.elemsSelector).length + availableItemsStr);
+      $('.ms-selection .custom-header').text( $instance.$selectionContainer.find($instance.elemsSelector).length + addedItemsStr);
+    }
+
+    $('select').each(function(index, elm){
+      var $this = $(this);
+
+      if ($this.hasClass('multiselect')) {
+        $this.multiSelect({
+          selectableHeader: '<div class="custom-header"></div>',
+          selectionHeader: '<div class="custom-header"></div>',
+          afterSelect: function(values) {
+            updateMultiselectHeader.call(this);
+          },
+          afterDeselect: function(values) {
+            updateMultiselectHeader.call(this);
+          }
+        });
+
+        var selectableCount = $this.next('.ms-container').find('.ms-selectable li').not('.ms-selected').length
+        var selectedCount = $this.next('.ms-container').find('.ms-selection .ms-selected').length;
+
+        $('.ms-selectable .custom-header').text(selectableCount + availableItemsStr);
+        $('.ms-selection .custom-header').text(selectedCount + addedItemsStr);
+
+      } else {
+        $this.fae_chosen();
+
+      }
+    });
+  },
+
+  /**
+   * Adds functionality for Select All and Deselect All multiselect options
+   */
+  multiselectChosenActions: function() {
+    var query_input_select = '.input.select';
+    // Ignore select elements with .multiselect classes, because these are used for a different widget
+    var query_eligible_multiselects = query_input_select + ' select[multiple]:not(.multiselect)';
+    var select_all_value = 'multiselect_action-select_all';
+
+    var $eligible_multiselects = $(query_eligible_multiselects);
+    $eligible_multiselects.each(function(index, element) {
+      var $element = $(element);
+      var $options = $element.find('option');
+      var $chosen = $('#' + $element.attr('id') + '_chosen');
+
+      // Ignore if select doesn't have enough options to warrant additional actions
+      if ($options.length < 2) {
+        return;
+      }
+
+      // Insert Select All btn above select
+      var $label = $element.closest(query_input_select).find('label:first');
+      var $deselect_all_action = $('<div/>', {
+        class: 'multiselect-action_wrap',
+        html: $('<div/>', {
+          class: 'js-multiselect-action-deselect_all multiselect-action-deselect_all multiselect-action',
+          html: $('<a/>', {
+            href: '#',
+            tabindex: '-1',
+            html: 'Deselect&nbsp;All'
+          })
+        })
+      });
+
+      // Add actions to wraper
+      $deselect_all_action.insertAfter($chosen);
+
+      // 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');
+
+      // Enable or disable multiselect actions based on select state
+      setAbilities($element);
+    });
+
+    // Watch select for changes and add, remove, or carry out Select All option as needed
+    $('#js-main-content').on('change', query_eligible_multiselects, function(e) {
+      var $element = $(e.currentTarget);
+
+      // Set state of possible actions
+      setAbilities($element);
+
+      // Intercept selections of the Select All option and select all other options.
+      var requesting_select_all = $element.val() && $element.val().indexOf(select_all_value) !== -1;
+      if (requesting_select_all) {
+        setAllOptionsSelected($element, true);
+      }
+    });
+
+    // Handle click on Deselect All btn
+    $('#js-main-content').on('click', '.js-multiselect-action-deselect_all', function(e) {
+      e.preventDefault();
+      setAllOptionsSelected(this, false);
+    });
+
+    // Enable or disable actions based on state
+    function setAbilities($element) {
+      var $deselect_all = $('.js-multiselect-action-deselect_all');
+
+      // Only allow deselects when options are selected
+      if ($element.find('option:selected').length) {
+        $deselect_all.show();
+      } else {
+        $deselect_all.hide();
+      }
+    }
+
+    // Add special "Select All" option
+    function addSelectAllOption($element) {
+      var $select_all_option = $('<option />', {
+        value: select_all_value,
+        text: 'SELECT ALL'
+      });
+      $select_all_option.prependTo($element);
+      $element.trigger('chosen:updated');
+    }
+
+    // Mark all options as selected or not
+    function setAllOptionsSelected(select, state) {
+      var $select = $(select).closest(query_input_select).find('select');
+      // Set selection state per provided state boolean
+      $select.find('option').prop('selected', state);
+      // Always ignore magic Select All btn
+      $select.find('option[value="' + select_all_value + '"]').prop('selected', false);
+      $select.trigger('chosen:updated');
+      $select.trigger('change');
+    }
+  }
+
+};

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

@@ -0,0 +1,118 @@
+/* global Fae, SimpleMDE, toolbarBuiltInButtons */
+
+/**
+ * Fae form text
+ * @namespace form.text
+ * @memberof form
+ */
+Fae.form.text = {
+  init: function() {
+    this.overrideMarkdownDefaults();
+    this.initMarkdown();
+    this.initHTML();
+  },
+
+  /**
+   * Override SimpleMDE's preference for font-awesome icons and use a modal for the guide
+   * @see {@link modals.markdownModal}
+   */
+  overrideMarkdownDefaults: function() {
+    toolbarBuiltInButtons['bold'].className = 'icon-bold';
+    toolbarBuiltInButtons['italic'].className = 'icon-italic';
+    toolbarBuiltInButtons['heading'].className = 'icon-font';
+    toolbarBuiltInButtons['code'].className = 'icon-code';
+    toolbarBuiltInButtons['unordered-list'].className = 'icon-list-ul';
+    toolbarBuiltInButtons['ordered-list'].className = 'icon-list-ol';
+    toolbarBuiltInButtons['link'].className = 'icon-link';
+    toolbarBuiltInButtons['image'].className = 'icon-image';
+    toolbarBuiltInButtons['quote'].className = 'icon-quote';
+    toolbarBuiltInButtons['fullscreen'].className = 'icon-fullscreen no-disable no-mobile';
+    toolbarBuiltInButtons['horizontal-rule'].className = 'icon-minus';
+    toolbarBuiltInButtons['preview'].className = 'icon-eye no-disable';
+    toolbarBuiltInButtons['side-by-side'].className = 'icon-columns no-disable no-mobile';
+    toolbarBuiltInButtons['guide'].className = 'icon-question';
+
+    // Override SimpleMDE's default guide and use a homegrown modal
+    toolbarBuiltInButtons['guide'].action = Fae.modals.markdownModal;
+  },
+
+  /**
+   * Find all markdown fields and initialize them with a markdown GUI
+   * @has_test {features/form_helpers/fae_input_spec.rb}
+   */
+  initMarkdown: function() {
+    $('.js-markdown-editor:not(.mde-enabled)').each(function() {
+      var $this = $(this);
+
+      var editor = new SimpleMDE({
+        element: this,
+        autoDownloadFontAwesome: false,
+        status: false,
+        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
+      editor.codemirror.on('change', function(){
+        // updates the original textarea's value for JS validations
+        $this.val(editor.value());
+        // update length counter
+        Fae.form.validator.length_counter.updateCounter($this);
+      });
+      editor.codemirror.on('focus', function(){
+        $this.parent().addClass('mde-focus');
+      });
+      editor.codemirror.on('blur', function(){
+        // trigger blur on the original textarea to trigger JS validations
+        $this.blur();
+        $this.parent().removeClass('mde-focus');
+      });
+    });
+  },
+
+  /**
+   * Find all HTML fields and initialize them with a wysiwyg GUI
+   * @has_test {features/form_helpers/fae_input_spec.rb}
+   */
+  initHTML: function() {
+    var $html_editors = $('.js-html-editor');
+    if(!$html_editors.length) {
+      return;
+    }
+    $html_editors.trumbowyg({
+      btnsDef: {
+        image: {
+          dropdown: ['insertImage', 'upload', 'base64', 'noEmbed'],
+          ico: 'insertImage'
+        }
+      },
+      btns: [
+        ['viewHTML'],
+        ['undo', 'redo'],
+        ['formatting'],
+        'btnGrp-design',
+        ['link'],
+        ['image'],
+        'btnGrp-justify',
+        'btnGrp-lists',
+        ['foreColor', 'backColor'],
+        ['preformatted'],
+        ['horizontalRule'],
+        ['fullscreen']
+      ],
+      plugins: {
+        upload: {
+          serverPath: '/admin/html_embedded_image',
+          fileFieldName: 'image'
+        }
+      },
+      resetCss: true
+    });
+  }
+};

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

@@ -0,0 +1,184 @@
+/* global Fae, FCH */
+
+/**
+ * Fae global search
+ * @namespace global_search
+ * @memberof Fae
+ */
+Fae.navigation.global_search = {
+
+  init: function() {
+    this.$wrapper = $('#js-utility-search-wrapper');
+    this.$input = $('#js-global-search');
+
+    this.utilitySearch();
+    this.searchListener();
+  },
+
+  /**
+   * Click event of the admin search in the main nav
+   */
+  utilitySearch: function() {
+    var _this = this;
+    var $header = $('#js-main-header');
+    var timer;
+
+    /**
+     * Hide search menu, unbind listener, and blur the input
+     * @private
+     */
+    function hideSearch() {
+      _this.$wrapper.data('hover', 0);
+      _this.$wrapper.hide();
+      _this.$input.blur();
+      // Avoid duplicate/rapid bindings
+      $header.off('mouseleave', hideSearch);
+    }
+
+    // If user leaves search, remove menu
+    _this.$wrapper.on('mouseleave', hideSearch);
+
+    // Search mouseover effects
+    $('#js-utility-search')
+      // Ensure that the cursor is over the search menu after timeout
+      .hover(function() {
+        _this.$wrapper.data('hover', 1);
+      }, function() {
+        _this.$wrapper.data('hover', 0);
+      })
+
+      .mouseover(function() {
+        // Reset timeout
+        clearTimeout(timer);
+        $header.on('mouseleave', hideSearch);
+
+        // Hover intent
+        // If user gets from header to search within .8s, they can pass over other icons
+        // but after .8s, the search menu will disappear if they leave the area
+        timer = setTimeout(function() {
+          $header.off('mouseleave', hideSearch);
+
+          // If cursor is no long on search, collapse it
+          if ( !_this.$wrapper.data('hover') ) {
+            hideSearch();
+          }
+        }, 800);
+
+        _this.$wrapper.show();
+        _this.$input.focus();
+      });
+  },
+
+  /**
+   * Applies keyup listener on search input to handle live results and navigation
+   */
+  searchListener: function() {
+    var _this = this;
+    // shift, ctrl, alt, caps
+    var ignored_keycodes = [16, 17, 18, 20];
+    // left, up, right, down
+    var arrow_keycodes = [37, 38, 39, 40];
+
+    _this.$input.on('keyup', function(ev) {
+      // handle arrow keys
+      if (arrow_keycodes.indexOf(ev.keyCode) > -1) {
+        _this.moveSelection(ev.keyCode);
+        return;
+      }
+
+      // handle enter key
+      if (ev.keyCode === 13) {
+        // if there's a highlighted result, redirect to its href
+        var $current_link = $('.js-search-results a.-current');
+        if ($current_link.length) {
+          window.location = $current_link.attr('href');
+        }
+        return;
+      }
+
+      // ignore keys that won't change the result set
+      if (ignored_keycodes.indexOf(ev.keyCode) > -1) {
+        return;
+      }
+
+      // otherwise update the live search
+      var val = _this.$input.val();
+      var post_url = Fae.path + '/search/' + val;
+
+      // Match only values that exist within links - we don't want to highlight the labels
+      // Positive lookahead
+        // Ignore if > is present (to avoid matches in href=".*">)
+        // End at </a> tag (to ensure that we don't highlight any other markup, like the labels)
+      // Case insensitive; find all
+      var val_regex = new RegExp(val + '(?=[^>]*<\/a>)', 'ig');
+
+      $.post(post_url, function(data) {
+        // Wrap query in b tags
+        data = data.replace(val_regex, '<b>$&</b>');
+        _this.$wrapper.find('ul').replaceWith(data);
+
+        var $links = _this.$wrapper.find('a');
+        // Initial offset spoofs items' position relative to their parent (.js-search-results)
+        var initial_offset = $links.first().offset().top;
+
+        // Cache the offset for use later in moveSelection
+        $links.each(function() {
+          // Have to use offset because the element is hidden
+          // So .position() is ineffective
+          $(this).data('offset', $(this).offset().top - initial_offset);
+        });
+
+        // If only one result, remove border from header nav item (set by the .search-nav-item class)
+        if ($('.js-search-results li').length === 1) {
+          $('.js-search-results .search-nav-item').removeClass('search-nav-item');
+        }
+      });
+    });
+  },
+
+  /**
+   * Updates the selected result
+   * @param {Number} keyCode - the key pressed
+   */
+  moveSelection: function(keyCode) {
+    var $results = $('.js-search-results');
+    var $result_links = $('.js-search-results a');
+    var $current_link = $('.js-search-results a.-current');
+    var current_index = $.inArray($current_link[0], $result_links);
+
+    // handle up and left arrow keys
+    if (keyCode === 37 || keyCode === 38) {
+      if (current_index <= 0) {
+        current_index = $result_links.length - 1;
+      } else {
+        current_index -= 1
+      }
+    }
+
+    // handle down and right arrow keys
+    if (keyCode === 39 || keyCode === 40) {
+      if (current_index + 1 >= $result_links.length) {
+        current_index = 0;
+      } else {
+        current_index += 1
+      }
+    }
+
+    // move current class to new selection
+    $current_link.removeClass('-current');
+    var $new_current = $result_links.eq(current_index);
+    $new_current.addClass('-current');
+
+    // Scroll to item
+    var offset = $new_current.data('offset');
+
+    // Reset to start if it's in the first "page" of results
+    // Add height in case it's inbetween "pages"
+    if( (offset + $new_current.outerHeight()) < $results.outerHeight() ) {
+      offset = 0;
+    }
+
+    $results.scrollTop( offset );
+  },
+
+};