Angular Modal Service Sample

A simple sample of the Angular Modal Service.

by Nicolas PUJOL

HTML

<script src="https://code.angularjs.org/1.4.2/angular.min.js"></script>
<div class="container" ng-app="app" ng-controller="Controller">
    <input ng-keydown="onKeyDown($event)" ng-model="searchBarValue" />
</div>

CSS

#lionSearch {
    display:none;
    font-size: 20px;
    font-weight: bold;
    left: 30%;
    position: absolute;
    text-transform: uppercase;
    top: 30%;
    opacity:0;
}
#lionSearch::before {
  content: "Raaawr";
}

JavaScript

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

app.controller('Controller', function ($scope) {
    /*var keyList = [38, 38, 40, 40, 37, 39, 37, 39, 65, 66];
    var keyListOk = 0;*/
    $scope.onKeyDown = function ($event) {
        
        var keyDown = (window.event ? $event.keyCode : $event.which);
        if ($scope.searchBarValue === "lio" && keyDown === 78) {
            $("body").append("<div id=\"lionSearch\"></div>");
            $("#lionSearch").show().animate({
                "font-size": "50px",
                    "opacity": "1"
            }, 500, 'linear').animate({
                "font-size": "100px",
                    "opacity": "0"
            }, 500, "linear",
            function () {
                $("#lionSearch").remove();
            });
        }
        /*keyListOk = (keyDown === keyList[keyListOk]) ? keyListOk + 1 : (keyDown === keyList[0]) ? 1 : 0;
        if (keyListOk === 10) {
            $('body').animate({
                borderSpacing: -90
            }, {
                step: function (now, fx) {
                    $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                    $(this).css('transform', 'rotate(' + now + 'deg)');
                },
                duration: 'slow'
            }, 'linear');
        }*/
    };
});