diff --git a/blocks/Config/normalizeConfigValue.js b/blocks/Config/normalizeConfigValue.js index d91540b30..00ee7f2c5 100644 --- a/blocks/Config/normalizeConfigValue.js +++ b/blocks/Config/normalizeConfigValue.js @@ -5,7 +5,7 @@ const asString = (value) => String(value); /** @param {unknown} value */ const asNumber = (value) => Number(value); /** @param {unknown} value */ -const asBoolean = (value) => { +export const asBoolean = (value) => { if (typeof value === 'boolean') return value; // for attr like multiple="true" (react will pass it as string) if (value === 'true') return true; diff --git a/blocks/DropArea/DropArea.js b/blocks/DropArea/DropArea.js index 50a2e53ac..dcc57d4da 100644 --- a/blocks/DropArea/DropArea.js +++ b/blocks/DropArea/DropArea.js @@ -4,6 +4,7 @@ import { DropzoneState, addDropzone } from './addDropzone.js'; import { Modal } from '../Modal/Modal.js'; import { stringToArray } from '../../utils/stringToArray.js'; import { UploadSource } from '../utils/UploadSource.js'; +import { asBoolean } from '../Config/normalizeConfigValue.js'; export class DropArea extends UploaderBlock { init$ = { @@ -44,16 +45,16 @@ export class DropArea extends UploaderBlock { this.$['lr-drop-area/targets'].add(this); this.defineAccessor('disabled', (value) => { - this.set$({ isEnabled: !value }); + this.set$({ isEnabled: !asBoolean(value) }); }); this.defineAccessor('clickable', (value) => { - this.set$({ isClickable: typeof value === 'string' }); + this.set$({ isClickable: asBoolean(value) }); }); this.defineAccessor('with-icon', (value) => { - this.set$({ withIcon: typeof value === 'string' }); + this.set$({ withIcon: asBoolean(value) }); }); this.defineAccessor('fullscreen', (value) => { - this.set$({ isFullscreen: typeof value === 'string' }); + this.set$({ isFullscreen: asBoolean(value) }); }); this.defineAccessor('text', (value) => { diff --git a/blocks/DropArea/addDropzone.js b/blocks/DropArea/addDropzone.js index 65504f84e..42a2042c0 100644 --- a/blocks/DropArea/addDropzone.js +++ b/blocks/DropArea/addDropzone.js @@ -76,10 +76,13 @@ export function addDropzone(desc) { }; let onDragOver = (e) => { + if (desc.shouldIgnore()) { + return; + } + if (!isDragging()) { eventCounter += 1; } - e.preventDefault(); /** @type {[Number, Number]} */ let dragPoint = [e.x, e.y]; @@ -92,6 +95,7 @@ export function addDropzone(desc) { let isNearest = Math.min(...nearnessRegistry.values()) === nearness; if (isOver && isNearest) { + e.preventDefault(); setState(DropzoneState.OVER); } else if (isNear && isNearest) { setState(DropzoneState.NEAR); diff --git a/blocks/SimpleBtn/SimpleBtn.js b/blocks/SimpleBtn/SimpleBtn.js index 570162d16..d1f3672c9 100644 --- a/blocks/SimpleBtn/SimpleBtn.js +++ b/blocks/SimpleBtn/SimpleBtn.js @@ -1,5 +1,6 @@ // @ts-check import { UploaderBlock } from '../../abstract/UploaderBlock.js'; +import { asBoolean } from '../Config/normalizeConfigValue.js'; export class SimpleBtn extends UploaderBlock { constructor() { @@ -8,6 +9,7 @@ export class SimpleBtn extends UploaderBlock { this.init$ = { ...this.init$, '*simpleButtonText': '', + withDropZone: true, onClick: () => { this.initFlow(); }, @@ -16,6 +18,17 @@ export class SimpleBtn extends UploaderBlock { initCallback() { super.initCallback(); + + this.defineAccessor( + 'dropzone', + /** @param {unknown} val */ + (val) => { + if (typeof val === 'undefined') { + return; + } + this.$.withDropZone = asBoolean(val); + } + ); this.subConfigValue('multiple', (val) => { this.$['*simpleButtonText'] = val ? this.l10n('upload-files') : this.l10n('upload-file'); }); @@ -23,7 +36,7 @@ export class SimpleBtn extends UploaderBlock { } SimpleBtn.template = /* HTML */ ` - + `; + +SimpleBtn.bindAttributes({ + // @ts-expect-error TODO: we need to update symbiote types + dropzone: null, +});