AngularJS Clean

AngularJS project

by Felipe Alfaro

HTML

<ul>
    <li ng-repeat="car in cars">
        <span>{{ car }}</span><input type="text" ng-model="car">
        <rp-context-options>
            <rp-context-option action="rent(car)">Rent {{ car }}</rp-context-option>
        </rp-context-options>
    </li>
</ul>

CSS

* { font-family: open sans; box-sizing: border-box; }
h1, h2, h3, h4, h5 { font-weight: 400; }
h1 { text-align: center; }
h1, h2, h3, h4, h5, p { color: rgb(73, 73, 73); }


ul li span {
    display: inline-block;
    width: 100px;
}

rp-context-options {
    background: #2d2d2d;
    overflow: hidden;
    display: block;
    position: absolute;
    outline: none;
    border-radius: 2px;
}
rp-context-option {
    display: block;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
}

.hello {
    transition
}
.bye {
    transition: 500ms;
    opacity: 0;
}

JavaScript

var app = angular.module('app', []);

app.controller('mainController', function($scope, $element){
	$scope.cars = ['Mitsubishi', 'BMW', 'Porsche', 'McLaren', 'Renault'];
    $scope.rent = function(car){
    	console.info('Rent ' + car)
    };
});

app.directive('rpContextOptions', contextOptionsDirective);
app.directive('rpContextOption', contextOptionDirective);

function contextOptionsDirective($compile, $document){
	const $body = $document.find('body');
    function controller(){
    	var ctrl = this;
        ctrl.$element = null;
        ctrl.coords = [0, 0]
        ctrl.fadeIn = function($newElement){
        	if(ctrl.$element) ctrl.fadeOut();
            ctrl.$element = $newElement;
        	$newElement.attr('tabindex', 0);
            $newElement.css({
            	top: ctrl.coords[0] + 'px',
                left: ctrl.coords[1] + 'px'
            });
        	$body.append($newElement);
            $newElement[0].focus();
            $newElement.on('contextmenu', function($event){
            	$event.preventDefault();
            });
            $newElement.on('focusout', function(){
                ctrl.fadeOut();
            });
        };
        ctrl.fadeOut = function(){
        	if(ctrl.$element){
                var $elementToRemove = ctrl.$element;
                ctrl.$element = null;
                $elementToRemove.addClass('bye');
                setTimeout(function(){
                    $elementToRemove.remove();
                }, 500);
            }
        };
    }
	function compile(tElement, tAttrs, transcludeFn){
    	return function postLink($scope, $element, $attrs, ctrl){
        	$element.parent().on('contextmenu', function($event){
            	$event.preventDefault();
                ctrl.coords = [$event.pageY, $event.pageX];
                $scope.$apply(function(){
                	transcludeFn($scope, function($clone){
                    	ctrl.fadeIn($clone);
                    });
                });
            });
       ...