Custom Select AMD Module

customSelect.js

define(function (require) {

  var $ = require('jquery');
  var $el = $('.js-custom-select');
  var numEl = $el.length;
  // Check if module should run.
  if (!numEl) { return false; }

  // Proceed with module execution
  if ($el.data('map')) {
    var exchangeMap = require('src/exchangeMap');
  }

  var stateData = require('models/stateData');

  var _build = function ($el) {
    var $selectOptions = $el.find('option'),
      customList = '<ul class="custom-select__list" />',
      listItems = '',
      selectItems = '',
      $customSelect = '',
      stateArr = [];

    //hide original select + init wrapper
    $el.wrap('<div class="js-touch-tap custom-select" />').show();

    //cache wrapper selection 
    $customSelect = $el.parent('.custom-select');

    //append dropdown arrow
    $customSelect.append(' <span class="custom-select__arrow" />');

    //append custom ul
    $(customList).insertBefore($el);

    //add inline styles
    if($el.data('inline')){
      $customSelect.addClass('custom-select--inline');
    }

    //add custom classes
    if($el.data('class')){
      $customSelect.addClass($el.data('class'));
    }

    //add options to custom ul + select
    if($el.data('map') || $el.data('states')){
      for( var stateName in stateData.states){
        stateArr.push(stateName);
      }

      stateArr.sort();

      for(var i = 0; i < stateArr.length; i++){
        if(i === 0){
          $customSelect.prepend('<div class="custom-select__current"><span class="custom-select__current__option">'+ stateArr[i] +'</span></div>');
        }
        listItems += '<li data-list-name="'+ stateArr[i] +'">' + stateArr[i] + '</li>';
        selectItems += '<option value="'+ stateArr[i] +'">'+ stateArr[i] +'</option>';
      }

      $el.append($(selectItems));

    } else {
      $selectOptions.each(function(index){
        if(index === 0){
          $customSelect.prepend('<div class="custom-select__current"><span class="custom-select__current__option">'+ $(this).text() +'</span></div>');
        }
        listItems += '<li data-list-name="'+ $(this).attr('value') +'">' + $(this).text() + '</li>';
      });
    }

    //append li's to custom ul
    $customSelect.find('.custom-select__list').append($(listItems));

    //toggle select
    $customSelect.on({
      click : function(e){
        e.preventDefault();
        $(this).toggleClass('expanded');
      },
      tap: function(e) {
        $(this).find('select').focus();
      }
    });

    $customSelect.find('li').on({
      click : function(e){
        var $parentContainer = $(this).parents('.custom-select'),
          selection = $(this).data('list-name');

        //update original select
        $parentContainer.find('.js-custom-select ').val(selection).change();
      }
    });

    $el.on({
      change : function(){
        var $parentContainer = $customSelect,
          selection = $(this).val();

        //update custom select
        $parentContainer.find('.custom-select__current__option').text(selection);
        $parentContainer.find('.custom-select__list').children().removeClass('active');
        $parentContainer.find('.custom-select__list').children().filter('[data-list-Name="'+ selection +'"]').addClass('active');

        if($el.data('map')){
          exchangeMap.updateMap(stateData.states[selection].lat,stateData.states[selection].lng);
          $('.js-exchange-launcher').attr('href', stateData.states[selection].urls.exchange);
        }

        $(this).blur();
      }
    });

    if ($el.data('states')) {
      var location = window.location.href.split('/')[3];
      var providers = {
        'abcbs': 'Colorado',
        'bcbsg': 'Georgia',
        'abc': 'California',
        'ebcbs': 'New York'
      };
      var state;
      var current;
      for (state in providers) {
        if (state === location) {
          $el.val(providers[location]).trigger('change');
          break;
        }
      }
    }

    //add a z-index to element
    $customSelect.css({'z-index' : 100 + numEl});
    numEl--;

    // Trigger a change event after loading everything to ensure everything works.
    $el.trigger('change');
  };

  $el.each(function () {
    var $el = $(this);
    _build($el);
    //tap event for touch screens
    var tapStartX, tapStartY, tapEndX, tapEndY;
    $('.js-touch-tap').on({
      touchstart : function(e){
        tapStartY = e.originalEvent.changedTouches[0].clientY;
        tapStartX = e.originalEvent.changedTouches[0].clientX;
      },
      touchend : function(e){
        tapEndY = e.originalEvent.changedTouches[0].clientY;
        tapEndX = e.originalEvent.changedTouches[0].clientX;

        if(tapStartY === tapEndY && tapStartX === tapEndX){
          $(this).trigger('tap');
        }
        return false;
      }
    });
  });

  return function () {};
});