AngularJS xborder + hoverzone directive

by luckylooke

HTML

<div ng-app="myApp" ng-controller="appCtrl">
    <div style="margin:100px; width:300px; height:150px; background:#ddeebb; padding:2em" xborder>content conteb df bdf bdfnt content content conten fdb d content cfg fgd fbd fbdfb dfbcontent cob dfb dfb dfbntent content codfb dfb dfb ntent content content content contenb dfb dft content content contef bdfb dfb dfnt content content content</div>
    <div style="margin:100px; width:300px; height:150px; background:#ddeebb; padding:2em" xborder>content conteb df bdf bdfnt content content conten fdb d content cfg fgd fbd fbdfb dfbcontent cob dfb dfb dfbntent content codfb dfb dfb ntent content content content contenb dfb dft content content contef bdfb dfb dfnt content content content</div>
</div>

CSS

.mnu-root {
    position: relative;
}
.posrelative {
    position: relative;
}
.ui {
    background: yellow;
    width:1em;
    height:1em;
    text-align: center;
    position:absolute;
}
.circle {
    border-radius: 50%;
}
.mnubtn {
    -moz-box-shadow:inset 0em 0.125em 0em -0.250em #fff0a6;
    -webkit-box-shadow:inset 0em 0.125em 0em -0.250em #fff0a6;
    box-shadow:inset 0em 0.125em 0em -0.250em #fff0a6;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffff00), color-stop(1, #fab32f));
    background:-moz-linear-gradient(center top, #ffff00 5%, #fab32f 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#fab32f');
    background-color:#ffff00;
    -webkit-border-top-left-radius:1.250em;
    -moz-border-radius-topleft:1.250em;
    border-top-left-radius:1.250em;
    -webkit-border-top-right-radius:1.250em;
    -moz-border-radius-topright:1.250em;
    border-top-right-radius:1.250em;
    -webkit-border-bottom-right-radius:1.250em;
    -moz-border-radius-bottomright:1.250em;
    border-bottom-right-radius:1.250em;
    -webkit-border-bottom-left-radius:1.250em;
    -moz-border-radius-bottomleft:1.250em;
    border-bottom-left-radius:1.250em;
    text-indent:0em;
    border:0.1em solid #8a8483;
    display:inline-block;
    color:#6b6a6a;
    font-family:Arial Black;
    font-size:1.813em;
    font-weight:bold;
    font-style:normal;
    height:1em;
    line-height:1em;
    width:1em;
    text-decoration:none;
    text-align:center;
    text-shadow:0.03em 0.03em 0em #f0ecc0;
}
.mnubtn:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fab32f), color-stop(1, #ffff00));
    background:-moz-linear-gradient(center top, #fab32f 5%, #ffff00 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fab32f', endColorstr='#ffff00');
    background-color:#fab32f;
}
.mnubtn:active {
    position:relative;
    top:0.063em;
}
.hoverZoneLeft,...

JavaScript

var myApp = angular.module('myApp', [])
    .controller('appCtrl', function ($scope) {
    $scope.buttons = "";
})
    .directive('xborder', function directive() {
    return {
        transclude: true,
        template: '<div ng-transclude></div><div hoverzone="top"></div><div hoverzone="right"></div><div hoverzone="bottom"></div><div hoverzone="left"></div>',
        scope: {},
        link: function(scope, iE, iA, ctrl) {
            scope.hoverzones = false;
            iE.on("mouseover", function () {
                iE.addClass("posrelative");
                scope.hoverzones = true;
                scope.$apply();
            }).on("mouseout", function () {
                iE.removeClass("posrelative");
                scope.hoverzones = false;
                scope.$apply();
            });
        }
    };
}).directive('hoverzone', function directive() {
    return {
        replace: true,
        scope: {},
        controller: function ($scope, $element, $attrs) {
            $scope.side = $attrs.hoverzone;
            //console.log($scope);
        },
        template: '<div ng-show="$parent.hoverzones" class="hoverZone{{side | capitalize}}"></div>'
    };
}).filter('capitalize', function () {
    //http://scofred.com/2013/12/20/angularjs-filter-to-auto-capitalize-the-first-letter/
    return function (input, scope) {
        if (input != null) input = input.toLowerCase();
        return input.substring(0, 1).toUpperCase() + input.substring(1);
    }
});