Angular Focus Point

Example of jquery focus point converted to AngularJS

by kmturley

HTML

<body ng-app="app" ng-controller="DemoCtrl">
    <img src="https://i.pinimg.com/736x/17/30/42/17304288adec0f9350546e7a745305c9--antlers-elk.jpg" alt="" focus-point />
    <img src="https://www.outdoorphotographer.com/images/stories/2016/apr/traps/lead.jpg" alt="" focus-point />
</body>

CSS

body {
    margin: 0;
}

/* focus point */

.focus-point {
    clear: both;
    overflow: hidden;
}

.focus-point .focus-area {
    float: left;
    position: relative;
    overflow: hidden;
}

.focus-point .source {
    margin: 0 5px 5px 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.focus-point img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    width: 600px;
}

.focus-point .target {
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
    position: absolute;
    border: 1px solid #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    pointer-events: none;
}

.focus-point .preview,
.focus-point .preview-portrait,
.focus-point .preview-landscape,
.focus-point .preview-wide {
    margin: 0 5px 5px 0;
    width: 100px;
    height: 100px;
    display: block;
    float: left;
    background-size: cover;
}

.focus-point .preview-portrait {
    width: 75px;
}

.focus-point .preview-landscape {
    width: 133.33px;
}

.focus-point .preview-wide {
    width: 156.25px;
}

.focus-point .info {
    clear: both;
}

JavaScript

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

module.directive('focusPoint', function () {
    'use strict';
    
    return {
        restrict: 'A',
        replace: true,
        scope: {
            model: '=ngModel'
        },
        template: '<div class="focus-point">' +
        '<div class="focus-area">' +
        '<span class="target" style="left: {{ x }}%; top: {{ y }}%"></span>' +
        '<img src="{{ src }}" alt="" ng-mousemove="onMouseMove($event)" ng-mousedown="onMouseDown($event)" ng-mouseup="onMouseUp($event)" draggable="false" class="source" />' +
        '</div>' +
        '<span style="background-image: url(\'{{ src }}\'); background-position: {{ x }}% {{ y }}%" class="preview-portrait"></span>' +
        '<span style="background-image: url(\'{{ src }}\'); background-position: {{ x }}% {{ y }}%" class="preview"></span>' +
        '<span style="background-image: url(\'{{ src }}\'); background-position: {{ x }}% {{ y }}%" class="preview-landscape"></span>' +
        '<span style="background-image: url(\'{{ src }}\'); background-position: {{ x }}% {{ y }}%" class="preview-wide"></span>' +
        '<div class="info">{{ x }}% / {{ y }}%</div>' +
        '</div>',
        link: function (scope, element, attr) {
            var dragging = false;
            scope.src = attr.src;
            
            scope.onMouseDown = function (e) {
                scope.update(e);
                dragging = true;
            };
            
            scope.onMouseMove = function (e) {
                if (dragging === true) {
                    scope.update(e);
                }
            };
            
            scope.onMouseUp = function (e) {
                e.preventDefault();
                dragging = false;
            };
            
            scope.update = function (e) {
                e.preventDefault();
                var offset = scope.offset(e.target);
                scope.x = Math.round(((e.pageX - offset.left) / e.target.clientWidth) *...