Merge pull request #2140 from tf/hotspots-6

Further improvements for hotspots element
codevise · Aug 2, 2024 · 4c22bce · 4c22bce
2 parents 0ec7d48 + 12851a2
commit 4c22bce
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git a/...led/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js b/...led/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js
@@ -40,8 +40,8 @@ export const DraggableEditorView = Marionette.View.extend({
   render() {
     ReactDOM.render(
       <DraggableEditor
-        imageSrc={this.options.file.getBackgroundPositioningImageUrl()}
-        portrait={this.options.file.get('width') < this.options.file.get('height')}
+        imageSrc={this.options.file?.getBackgroundPositioningImageUrl()}
+        portrait={this.options.file && this.options.file.get('width') < this.options.file.get('height')}
         indicatorColor={paletteColor(this.model.get(this.getPropertyName('color')) || this.model.get('color'))}
         initialMode={this.model.get(this.getPropertyName('mode'))}
         initialPoints={this.model.get(this.getPropertyName('outline'))}
@@ -135,9 +135,11 @@ function DraggableEditor({
       </div>
 
       <div className={styles.wrapper}>
-        <img className={classNames(styles.image, {[styles.portraitImage]: portrait})}
-             src={imageSrc}
-             alt={I18n.t(`${i18nPrefix}.hotspots_image`)} />
+        {imageSrc ?
+         <img className={classNames(styles.image, {[styles.portraitImage]: portrait})}
+              src={imageSrc}
+              alt={I18n.t(`${i18nPrefix}.hotspots_image`)} /> :
+         <div className={classNames(styles.image, styles.placeholderImage)} />}
         <div ref={ref}
              className={styles.overlay}
              onMouseMove={event => dispatch({type: MOUSE_MOVE, cursor: clientToPercent(event)})}>

diff --git a/...age/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.module.css b/...age/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.module.css
@@ -73,6 +73,11 @@
   margin-right: 6px;
 }
 
+.placeholderImage {
+  aspect-ratio: 16 / 9;
+  background-color: #000;
+}
+
 .image {
   display: block;
   height: calc(100vh - 250px);

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js b/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js
@@ -50,7 +50,7 @@ editor.contentElementTypes.register('hotspots', {
       });
       this.input('invertTooltips', CheckBoxInputView);
       this.input('enablePanZoom', SelectInputView, {
-        values: ['phonePlatform', 'always', 'never']
+        values: ['never', 'phonePlatform', 'always']
       });
       this.view(SeparatorView);
       this.input('enableFullscreen', CheckBoxInputView, {
@@ -60,10 +60,6 @@ editor.contentElementTypes.register('hotspots', {
       });
       this.group('ContentElementPosition');
     });
-  },
-
-  defaultConfig: {
-    enablePanZoom: 'phonePlatform'
   }
 });
 

diff --git a/entry_types/scrolled/package/src/frontend/global.module.css b/entry_types/scrolled/package/src/frontend/global.module.css
@@ -22,5 +22,5 @@
 
 :global [data-floating-ui-portal] {
   position: relative;
-  z-index: 30000;
+  z-index: 1000;
 }