1.0.0-beta.4 Improved hotspot editor.

born05 · Oct 31, 2019 · 68f8de9 · 68f8de9
1 parent 65c1a4a
commit 68f8de9
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.0.0-beta.4 - 2019-10-31
+### Changed
+- Improved hotspot editor.
+
 ## 1.0.0-beta.3 - 2019-10-30
 ### Added
 - Added documentation

diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
     "name": "born05/craft-imagehotspots",
     "description": "Image Hotspots fieldtype for Craft CMS",
-    "version": "1.0.0-beta.3",
+    "version": "1.0.0-beta.4",
     "type": "craft-plugin",
     "keywords": [
       "hotspots",

diff --git a/src/assetbundles/imagehotspotsfield/dist/css/Input.css b/src/assetbundles/imagehotspotsfield/dist/css/Input.css
@@ -24,6 +24,14 @@
     display: inline-block;
     user-select: none;
     z-index: 0;
+    width: 100%;
+    height: 100%;
+}
+.image-hotspot-editor .image-container.align-height {
+    width: auto;
+}
+.image-hotspot-editor .image-container.align-width {
+    height: auto;
 }
 
 .image-hotspot-editor img {

diff --git a/src/assetbundles/imagehotspotsfield/dist/js/Editor.js b/src/assetbundles/imagehotspotsfield/dist/js/Editor.js
@@ -9,10 +9,15 @@ Born05.ImageHotspotEditor = Garnish.Modal.extend({
     $cancelBtn: null,
     $imgContainer: null,
 
+    asset: null,
+    pos: null,
     listData: null,
 
-    init: function(assetUrl, pos, listData, settings) {
+    init: function(asset, pos, listData, settings) {
         this.setSettings(settings, Born05.ImageHotspotEditor.defaults);
+
+        this.asset = asset;
+        this.pos = pos;
         this.updateData(listData);
 
         // Build the modal
@@ -21,19 +26,33 @@ Born05.ImageHotspotEditor = Garnish.Modal.extend({
         var $footer = $('<div class="footer"/>').appendTo($container);
 
         this.$primaryButtons = $('<div class="buttons right"/>').appendTo($footer);
-        this.$cancelBtn = $('<div class="btn">' + Craft.t('app', 'Cancel') + '</div>').appendTo(this.$primaryButtons);
+        this.$cancelBtn = $('<div class="btn submit">' + Craft.t('app', 'Done') + '</div>').appendTo(this.$primaryButtons);
 
         this.$imgContainer = $('<div class="image-container"></div>').appendTo($body);
-        this.$img = $('<img src="'+assetUrl+'" alt="" />').appendTo(this.$imgContainer);
+        this.$img = $('<img src="'+this.asset.url+'" alt="" />').appendTo(this.$imgContainer);
         this.$point = $('<div class="current"></div>').appendTo(this.$imgContainer);
-        this.setPoint(pos.x, pos.y);
+        this.setPoint(this.pos.x, this.pos.y);
 
         this.base($container, this.settings);
 
         this.addListener(this.$imgContainer, 'click', 'select');
         this.addListener(this.$cancelBtn, 'activate', 'hide');
     },
 
+    createImage: function(asset) {
+        this.$imgContainer.removeClass('align-height align-width');
+
+        var containerBounds = this.$imgContainer[0].getBoundingClientRect();
+        var containerRatio = containerBounds.width / containerBounds.height;
+        var imageRatio = asset.width / asset.height;
+
+        if (containerRatio > imageRatio) {
+            this.$imgContainer.addClass('align-height');
+        } else  {
+            this.$imgContainer.addClass('align-width');
+        }
+    },
+
     updateData: function(listData) {
         this.listData = listData;
     },
@@ -55,6 +74,10 @@ Born05.ImageHotspotEditor = Garnish.Modal.extend({
         }, this);
     },
 
+    onFadeIn: function() {
+        this.createImage(this.asset);
+    },
+
     setPoint: function(x, y) {
         this.$point.css({
             top: (y * 100) + '%',
@@ -65,7 +88,7 @@ Born05.ImageHotspotEditor = Garnish.Modal.extend({
     select: function(e) {
         e.preventDefault();
 
-        const imageBounds = this.$img[0].getBoundingClientRect();
+        var imageBounds = this.$img[0].getBoundingClientRect();
 
         var x = (e.clientX - imageBounds.left) / imageBounds.width;
         var y = (e.clientY - imageBounds.top) / imageBounds.height;

diff --git a/src/assetbundles/imagehotspotsfield/dist/js/Input.js b/src/assetbundles/imagehotspotsfield/dist/js/Input.js
@@ -52,7 +52,7 @@ Born05.ImageHotspotInput = Garnish.Base.extend({
 
     createModal: function() {
         return new Born05.ImageHotspotEditor(
-            this.settings.assetUrl,
+            this.settings.asset,
             {
                 x: parseFloat(this.$xField.val() || 0.5),
                 y: parseFloat(this.$yField.val() || 0.5),

diff --git a/src/templates/_components/field/input.html b/src/templates/_components/field/input.html
@@ -19,7 +19,11 @@
 
 {% set jsSettings = {
     id: id|namespaceInputId,
-    assetUrl: (asset is not null) ? asset.url : null,
+    asset: (asset is not null) ? {
+        url: asset.url,
+        width: asset.width,
+        height: asset.height,
+    } : null,
 } %}
 
 {% js %}