Power Select Custom Options

components.lazy-options.js

import Ember from 'ember';

import PSOptionsComponent from 'ember-power-select/components/power-select/options';

const {
  $,
  assert,
  get,
} = Ember;

const OptionsComponent = PSOptionsComponent.extend({
  canLoadMore: false,

  init() {
    this._super(...arguments); 
    
    // BEGIN Move to initializer
    $.fn.checkInView = function(partial = false) {
    const elem = this;

    if (!elem.length) { return false; }

    const container = elem.parent();
    const contHeight = container.height();
    const contTop = container.scrollTop();
    const contBottom = contTop + contHeight;

    const elemTop = elem.offset().top - container.offset().top;
    const elemBottom = elemTop + elem.height();

    const isTotal = elemTop >= 0 && elemBottom <= contHeight;
    const isPart = (elemTop < 0 && elemBottom > 0  || elemTop > 0 && elemTop <= container.height()) && partial;

    return  isTotal  || isPart;
  };
  // END
    
    assert('<component:infinite-options>: You must provide a closure action name `loadMore`', get(this, 'loadMore') && typeof get(this, 'loadMore') === 'function');
  },

  didInsertElement() {
    this._super(...arguments);
    const checkVisibility = () => {
      if ($(this.element).find('.ember-power-select-option--load-more').checkInView(true)) {
        const loadMore = get(this, 'loadMore');

        return loadMore();
      }
    };

    $(this.element).on('scroll', () => checkVisibility());
  },

  willDestroyElement() {
    this._super(...arguments);

    $(this.element).off('scroll');
  }

});

export default OptionsComponent;

controllers.application.js

import Ember from 'ember';

import { task, timeout } from 'ember-concurrency';

const {
  Controller,
  get,
  set,
  Logger: { log },
} = Ember;

const TEST_WAIT = 1000;

export default Ember.Controller.extend({
  appName: 'Power Select Custom Options',
  canLoadMore: true,
  isLoading:   false,
  
  init() {
    this._setColors();
  },
  
  colors: [],

  _setColors()  {
    const baseColors = ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro"];
    set(this, 'colors', baseColors);
  },
  
  task__loadMore: task(function* () {
    set(this, 'isLoading', true);
    log('task__loadMore');

    timeout(250);

    setTimeout(() => {
      set(this, 'canLoadMore', false);
      set(this, 'isLoading', false);
      get(this, 'colors').pushObjects(["GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"]);
    }, TEST_WAIT);
  }).drop(),

  actions: {

    reset() {
      this._setColors();
      set(this, 'canLoadMore', true);
    },

    loadMore() {
      get(this, 'task__loadMore').perform();
    },

  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>

Can load more? {{canLoadMore}} 
<br>
<br>
{{#unless canReloadMore}}
<button {{action "reset"}}>Reset</button>
<br>
<br>
{{/unless}}
{{#power-select optionsComponent=(component 'lazy-options'
                                            loadMore=(perform task__loadMore)
                                            isLoading=isLoading
                                            canLoadMore=canLoadMore
                )
                options=colors
                selected=selectedColor
                onchange=(action (mut selectedColor))
                as |option|}}
            {{option}}
{{/power-select}}

templates.components.lazy-options.hbs

{{#each options as |opt index|}}

  {{#if (ember-power-select-is-group opt)}}
    {{#component groupComponent
                 group=(readonly opt)
                 select=(readonly select)
                 extra=(readonly extra)
    }}
      {{#component optionsComponent
                   select=(readonly select)
                   groupIndex=(concat groupIndex index ".")
                   optionsComponent=(readonly optionsComponent)
                   groupComponent=(readonly groupComponent)
                   extra=(readonly extra)
                   role="group"
                   class="ember-power-select-options" as |option|}}
        {{yield option select}}
      {{/component}}
    {{/component}}
  {{else}}
    <li class="ember-power-select-option"
        aria-selected="{{ember-power-select-is-selected opt select.selected}}"
        aria-disabled={{ember-power-select-true-string-if-present opt.disabled}}
          aria-current="{{eq opt select.highlighted}}"
        data-option-index="{{groupIndex}}{{index}}"
        role="option">
      {{yield opt select}}
    </li>
  {{/if}}
{{/each}}

{{#if (or isLoading select.loading)}}
  Loading...
{{else if canLoadMore}}
  <li class="ember-power-select-option ember-power-select-option--load-more" {{action loadMore}}>
    Load More
  </li>
{{/if}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-power-select": "1.7.0",
    "ember-concurrency": "0.8.1"
  }
}