.

2021-07-26 10:48:08 +01:00
parent 16d7875d0d
commit 3367328d94
659 changed files with 170339 additions and 1 deletions
@@ -0,0 +1,143 @@
+// #FOCAL POINT#
+// This script implements the image focal point setting
+'use strict';
+
+var Cl = window.Cl || {};
+/* globals Class, django */
+
+// as of Django 2.x we need to check where jQuery is
+var djQuery = window.$;
+
+if (django.jQuery) {
+    djQuery = django.jQuery;
+}
+
+(function ($) {
+    Cl.FocalPoint = new Class({
+        options: {
+            containerSelector: '.js-focal-point',
+            imageSelector: '.js-focal-point-image',
+            circleSelector: '.js-focal-point-circle',
+            locationSelector: '.js-focal-point-location',
+            draggableClass: 'ui-draggable',
+            hiddenClass: 'hidden',
+            dataLocation: 'location-selector'
+        },
+        _init: function (container) {
+            var focalPointInstance = new Cl.FocalPointConstructor(container, this.options);
+            this.focalPointInstances.push(focalPointInstance);
+        },
+        initialize: function (options) {
+            var that = this;
+
+            this.options = $.extend({}, this.options, options);
+            this.focalPointInstances = [];
+
+            $(this.options.containerSelector).each(function () {
+                that._init(this);
+            });
+
+            Cl.mediator.subscribe('focal-point:init', this._init);
+        },
+        destroy: function () {
+            Cl.mediator.remove('focal-point:init', this._init);
+
+            this.focalPointInstances.forEach(function (focalPointInstance) {
+                focalPointInstance.destroy();
+            });
+
+            this.focalPointInstances = [];
+        }
+    });
+
+    Cl.FocalPointConstructor = new Class({
+        _updateLocationValue: function (x, y) {
+            var locationValue;
+
+            locationValue = Math.round(x * this.ratio) + ',' + Math.round(y * this.ratio);
+
+            this.location.val(locationValue);
+        },
+        _onImageLoaded: function () {
+            var that = this;
+            var x = null;
+            var y = null;
+            var locationValue = this.location.val();
+            var imageWidth = this.image.width();
+            var imageHeight = this.image.height();
+
+            if (this.image[0].naturalWidth === 0) {
+                return;
+            }
+
+            this.circle.removeClass(this.options.hiddenClass);
+
+            if (locationValue.length) {
+                x = Math.round(Number(locationValue.split(',')[0]) / this.ratio);
+                y = Math.round(Number(locationValue.split(',')[1]) / this.ratio);
+            } else {
+                y = imageHeight / 2;
+                x = imageWidth / 2;
+            }
+
+            if (isNaN(x) || isNaN(y)) {
+                return;
+            }
+
+            this.circle.css({
+                top: y,
+                left: x
+            });
+
+            this.circle.draggable({
+                containment: 'parent',
+                drag: function (event, ui) {
+                    that._updateLocationValue(ui.position.left, ui.position.top);
+                }
+            });
+
+            this._updateLocationValue(x, y);
+        },
+        _getLocation: function () {
+            var newLocationSelector = this.container.data(this.options.dataLocation);
+            var newLocation = $(newLocationSelector);
+            if (newLocation.length) {
+                return newLocation;
+            } else {
+                return this.container.find(this.options.locationSelector);
+            }
+        },
+        initialize: function (container, options) {
+            this.options = $.extend({}, this.options, options);
+
+            this.container = $(container);
+            this.containerOffset = this.container.offset();
+            this.image = this.container.find(this.options.imageSelector);
+            this.circle = this.container.find(this.options.circleSelector);
+            this.ratio = parseFloat(this.image.data('ratio'));
+            this.location = this._getLocation();
+            this._onImageLoaded = $.proxy(this._onImageLoaded, this);
+
+            if (this.image.prop('complete')) {
+                this._onImageLoaded();
+            } else {
+                this.image.on('load', this._onImageLoaded);
+            }
+
+        },
+        destroy: function () {
+            if (this.circle.hasClass(this.options.draggableClass)) {
+                this.circle.draggable('disable');
+            }
+
+            this.options = null;
+
+            this.container = null;
+            this.containerOffset = null;
+            this.image = null;
+            this.circle = null;
+            this.location = null;
+            this.ratio = null;
+        }
+    });
+})(djQuery);