Contents

(function($) {
  $(document).on('FlexibleSearchMenu:present', function(event){
    var $element = $(event.target);
    var $flexibleSelectContainer = $element.find('.js-flexible-container');
    var $flexibleSelect = $flexibleSelectContainer.find('.js-flexible-select');

    var ARROW_PADDING = 30;
    var OVERFLOW_PADDING = 30;
    var DEFAULT_PADDING = parseInt($flexibleSelect.css('padding-left'), 10);

    var flexibleSearchMenu = {

      init: function() {
        this.resizeSearchMenu();
        this.bind();
      },

      bind: function() {
        $flexibleSelect.on('change', function() {
          flexibleSearchMenu.resizeSearchMenu();
        });

        $(window).on('resize', function() {
          if (window.undercase.BreakpointTell.isMobile()) {
            flexibleSearchMenu.clearResizedCss();
          } else {
            flexibleSearchMenu.resizeSearchMenu();
          }
        });
      },

      resizeSearchMenu: function() {
        var calculatedWidth = this.getTextWidth() + DEFAULT_PADDING + ARROW_PADDING;

        if (window.undercase.BreakpointTell.isMobile()) {
          $flexibleSelectContainer.css('width', '');
          return;
        }

        $element.css('padding-left', calculatedWidth);
        $flexibleSelectContainer.css('width', calculatedWidth);
        $flexibleSelect.css('width', calculatedWidth + OVERFLOW_PADDING);
      },

      clearResizedCss: function() {
        $element.css('padding-left', '');
        $flexibleSelectContainer.css('width', '');
        $flexibleSelect.css('width', '');
      },

      getTextWidth: function() {
        this.flexibleSelectValue = $flexibleSelect.children(':selected').text();
        this.hiddenSpan = $('<span>' + this.flexibleSelectValue + '</span>').hide().appendTo(document.body)
        this.hiddenSpan.css("font-size", ($flexibleSelect.css("font-size")));

        return this.hiddenSpan.width();
      }
    }

    flexibleSearchMenu.init();

  });

})(jQuery);

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
undercase-0.2.57	app/assets/javascripts/undercase/patterns/FlexibleSearchMenu.js
undercase-0.2.29	app/assets/javascripts/undercase/patterns/FlexibleSearchMenu.js