directive.js

'use strict';

import angular from 'angular';

export default angular.module('directive.typeahead', [])
  //TODO Check This
  .directive('typeahead', ["$timeout", $timeout => {
    return {
      restrict: 'E',
      transclude: true,
      replace: true,
      template: require('./typeahead.html'),
      scope: {
        nameInput: '@',
        term: '=',
        model: '=',
        items: '=',
        search: '&',
        select: '&',
        required: '@',
        placeHolder: '@',
        classDefault: '@',
        classCondition: '=',
        classIsCondition: '@'
      },
      controller: ["$scope", function($scope) {
        $scope.items = [];
        $scope.hide = false;

        this.activate = item => { $scope.active = item; };

        this.activateNextItem = () => {
          var index = $scope.items.indexOf($scope.active);
          this.activate($scope.items[(index + 1) % $scope.items.length]);
        };

        this.activatePreviousItem = () => {
          var index = $scope.items.indexOf($scope.active);
          this.activate($scope.items[index === 0 ? $scope.items.length - 1 : index - 1]);
        };

        this.isActive = item => $scope.active === item;

        this.selectActive = () => {
          this.select($scope.active);
        };

        this.select = item => {
          if (item){
            $scope.hide = true;
            $scope.focused = true;
            $scope.select({item: {item}});
          }
        };

        $scope.isVisible = () => !$scope.hide && ($scope.focused || $scope.mousedOver);
      }],
      link: (scope, element, attrs, controller) => {
        const $input = element.find('> input');
        const $list = element.find('> div');

        // INPUT
        $input.bind('focus', () => {
          scope.$apply(() => { scope.focused = true; });
        });

        $input.bind('blur', () => {
          if (!scope.model) {
            scope.term = '';
          }
          scope.$apply(() => { scope.active = null; scope.focused = false; });
        });

        $input.bind('keyup', e => {
          if (e.keyCode === 9 || e.keyCode === 13) {
            scope.$apply(() => { controller.selectActive() });
          }

          if (e.keyCode === 27) {
            scope.$apply(() => { scope.hide = true });
          }
        });

        $input.bind('keydown', e => {
          if (e.keyCode === 9) {
            if (!scope.model && scope.term){
                e.preventDefault();
            }
          }

          if (e.keyCode === 13 || e.keyCode === 27) {
            e.preventDefault();
          }

          if (e.keyCode === 40) {
            e.preventDefault();
            scope.$apply(() => { controller.activateNextItem() });
          }

          if (e.keyCode === 38) {
            e.preventDefault();
            scope.$apply(() => { controller.activatePreviousItem() });
          }
          scope.$apply(() => { scope.hide = false; });
        });

        // LIST OF RESULTS

        $list.bind('mouseover', () => {
          scope.$apply(() => { scope.mousedOver = true; });
        });

        $list.bind('mouseleave', () => {
          scope.$apply(() => { scope.mousedOver = false; });
        });

        //WATCH

        scope.$watch('items', items => {
          controller.activate(items.length ? items[0] : null);
        });

        scope.$watch('focused', focused => {
          if (focused) {
            $timeout(() => { $input.focus(); }, 0, false);
          }
        });
        scope.$watch('isVisible()', visible => {
          if (visible) {
            const pos = $input.position();
            const width = $input.width();
            const height = $input[0].offsetHeight;

            $list.css({
              top: pos.top + height,
              left: pos.left,
              position: 'absolute',
              display: 'block',
              zIndex: '1',
              width: width
            });
          } else {
            $list.css('display', 'none');
          }
        });

        scope.$watch('classCondition', classCondition => {
          if (classCondition) {
            $input.addClass(scope.classIsCondition);
          } else {
            $input.removeClass(scope.classIsCondition);
            $input.addClass(scope.classDefault);
          }
        });
      }
    }
  }])
  .name