codevise/pageflow

import $ from 'jquery';
import I18n from 'i18n-js';
import _ from 'underscore';

import {SelectInputView} from './SelectInputView';

export const ExtendedSelectInputView = SelectInputView.extend({
  className: 'extended_select_input',

  initialize: function() {
    SelectInputView.prototype.initialize.apply(this, arguments);

    if (this.options.collection) {
      if (this.options.descriptionProperty) {
        this.options.descriptions = _.pluck(this.options.collection, this.options.descriptionProperty);
      }
      else if (this.options.descriptionTranslationKeyProperty) {
        this.options.descriptionTanslationKeys = _.pluck(this.options.collection, this.options.descriptionTranslationKeyProperty);
      }
    }

    if (!this.options.descriptions) {
      this.options.descriptions = _.map(this.options.descriptionTanslationKeys, function(key) {
        return I18n.t(key);
      });
    }
  },

  onRender: function() {
    var view = this,
        options = this.options;

    SelectInputView.prototype.onRender.apply(this, arguments);

    $.widget("custom.extendedselectmenu", $.ui.selectmenu, {
      _renderItem: function(ul, item) {
        var widget = this;
        var li = $('<li>', { class: item.value });
        var container = $('<div>', { class: 'text-container' }).appendTo(li);
        var index = options.values.indexOf(item.value);

        if (item.disabled) {
          li.addClass('ui-state-disabled');
        }

        if (options.pictogramClass) {
          $('<span>', {
            class: options.pictogramClass
          }).prependTo(li);
        }

        $('<p>', {
          text: item.label,
          class: 'item-text'
        }).appendTo(container);

        $('<p>', {
          text: options.descriptions[index],
          class: 'item-description'
        }).appendTo(container);

        if (options.helpLinkClicked) {
          $('<a>', {
            href: '#',
            title: I18n.t('pageflow.ui.views.extended_select_input_view.display_help'),
          })
            .on('click', function() {
              widget.close();
              options.helpLinkClicked(item.value);
              return false;
            })
            .appendTo(li);
        }

        return li.appendTo(ul);
      },

      _resizeMenu: function() {
        this.menuWrap.addClass('extended_select_input_menu');

        var menuHeight = this.menu.height(),
            menuOffset = this.button.offset().top + this.button.outerHeight(),
            bodyHeight = $('body').height();

        if (menuHeight + menuOffset > bodyHeight) {
          this.menuWrap.outerHeight(bodyHeight - menuOffset - 5).css({ 'overflow-y': 'scroll' });
        }
        else {
          this.menuWrap.css({
            height: 'initial',
            'overflow-y': 'initial'
          });
        }
      }
    });

    this.ui.select.extendedselectmenu({
      select: view.select.bind(view),
      width: '100%',
      position: {
        my: 'right top',
        at: 'right bottom'
      }
    });
  },

  select: function(event, ui) {
    this.ui.select.val(ui.item.value);
    this.save();
  }

});