Component Library
Sign out

Dropzone 

<div class="demo-container">
    <h3 class="acl-typography--subtitle1">File Dropzone</h3>
    <div class="acl-dropzone__container" style="min-height: 175px;">
        <div class="acl-dropzone__vertical-indicator"></div>
        <div class="acl-dropzone">
            <div class="acl-dropzone__content animated fadeIn">
                <div class="acl-dropzone__icon"><i class="aforza-icons">acl_upload</i></div>
                <div class="acl-dropzone__label">Drag and Drop files here</div>
                <div class="acl-dropzone__button">
                    <button class="acl-button acl-button--tertiary">
                        <span class="acl-button__label">Click here</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div style="margin: 25px 0">
        <h3>Example</h3>
        <div style="width: 500px;display:flex;">
            <button onclick="dropzone.showErrorValidation()">Show Error Validation</button>
            <button onclick="dropzone.hideErrorValidation()">Hide Error Validation</button>
        </div>
    </div>

    <h3 class="acl-typography--subtitle1">Element Dropzone</h3>
    <div class="acl-dropzone__container element-dropdown" style="min-height: 75px;">
        <div class="acl-dropzone__vertical-indicator"></div>
        <div class="acl-dropzone">
            <div class="acl-dropzone__content animated fadeIn">
                <div class="acl-dropzone__label">Drag and Drop element here</div>
            </div>
        </div>
    </div>
</div>

<script>
    const dropzoneContainer = document.querySelector(".acl-dropzone__container");
    const dropzone = new acl.ACLDropzone(dropzoneContainer, true);
    const elementdropzoneContainer = document.querySelector(".element-dropdown");
    const elementDropzone = new acl.ACLDropzone(elementdropzoneContainer);
</script>
 
<div class="demo-container">
<h3 class="acl-typography--subtitle1">File Dropzone</h3>
    <div class="acl-dropzone__container" style="min-height: 175px;">
        <div class="acl-dropzone__vertical-indicator"></div>
        <div class="acl-dropzone">
            <div class="acl-dropzone__content animated fadeIn">
                <div class="acl-dropzone__icon"><i class="aforza-icons">acl_upload</i></div>
                <div class="acl-dropzone__label">Drag and Drop files here</div>
                <div class="acl-dropzone__button">
                <button class="acl-button acl-button--tertiary">
                        <span class="acl-button__label">Click here</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div style="margin: 25px 0">
        <h3>Example</h3>
        <div style="width: 500px;display:flex;">
            <button onclick="dropzone.showErrorValidation()">Show Error Validation</button>
            <button onclick="dropzone.hideErrorValidation()">Hide Error Validation</button>
        </div>
    </div>

    <h3 class="acl-typography--subtitle1">Element Dropzone</h3>
    <div class="acl-dropzone__container element-dropdown" style="min-height: 75px;">
        <div class="acl-dropzone__vertical-indicator"></div>
        <div class="acl-dropzone">
            <div class="acl-dropzone__content animated fadeIn">
                <div class="acl-dropzone__label">Drag and Drop element here</div>
            </div>
        </div>
    </div>
</div>



<script>
    const dropzoneContainer = document.querySelector(".acl-dropzone__container");
    const dropzone = new acl.ACLDropzone(dropzoneContainer, true);

    const elementdropzoneContainer = document.querySelector(".element-dropdown");
    const elementDropzone = new acl.ACLDropzone(elementdropzoneContainer);
</script>
 
/* No context defined. */
  • Content: 
    .acl-dropzone {
	border: 1px dashed #93c3ea;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 25px;
	width: 100%;

	&__container {
		width: 100%;
		display: flex;
	}

	&__content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		pointer-events: none;
	}

	&__button {
		margin-top: 15px;
		pointer-events: all;
	}

	&__vertical-indicator {
		width: 4px;
		border-radius: 2.5px;
		background-color: #93c3ea;
		margin-right: 5px;

		&--error {
			background-color: $acl-theme-error;
		}
	}

	&__label {
		color: rgba(0, 0, 0, 0.75);
		font-family: 'Open Sans';
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 17px;
		text-align: center;
	}

	&__icon {
		i {
			color: #d5d5d5;
			font-size: 40px;
			user-select: none;
		}
		margin-bottom: 15px;
	}

	&--drag-over {
		border: 2px solid $teal;
		box-sizing: border-box;
	}

	&--hide-content {
		& .acl-dropzone__content {
			display: none;
		}
	}

	&--error {
		border: 2px solid $acl-theme-error;
		box-sizing: border-box;
	}
}
  • URL: /components/raw/dropzone/acl-dropzone.scss
  • Filesystem Path: src/components/dropzone/acl-dropzone.scss
  • Size: 1.1 KB
  • Content: 
    class ACLDropzone {
	constructor(dropzoneContainer, hideContentOnHover) {
		this.dropzoneContainer = dropzoneContainer;
		this.hideContentOnHover = hideContentOnHover;

		this.selectors = Object.freeze({
			DROPZONE: 'acl-dropzone',
			VERTICAL_INDICATOR: 'acl-dropzone__vertical-indicator',
			BUTTON: 'acl-dropzone__button',
		});

		this.modifiers = Object.freeze({
			DRAG_OVER: '--drag-over',
			ERROR: '--error',
			HIDE_CONTENT: '--hide-content',
		});

		this.dropzoneEl = this.dropzoneContainer.querySelector(`.${this.selectors.DROPZONE}`);
		this.verticalIndicatorEl = this.dropzoneContainer.querySelector(`.${this.selectors.VERTICAL_INDICATOR}`);
		this.button = this.dropzoneContainer.querySelector(`.${this.selectors.BUTTON}`);

		this.setEventListeners();
	}

	setEventListeners() {
		this.dropzoneEl.addEventListener('dragenter', this.showDragOverIndicator.bind(this));

		this.dropzoneEl.addEventListener('dragleave', this.hideDragOverIndicator.bind(this));

		if (this.button) {
			this.button.addEventListener('dragenter', this.showDragOverIndicator.bind(this));
			this.button.addEventListener('dragleave', this.hideDragOverIndicator.bind(this));
		}
	}

	showDragOverIndicator() {
		this.dropzoneEl.classList.add(`${this.selectors.DROPZONE}${this.modifiers.DRAG_OVER}`);

		if (this.hideContentOnHover)
			this.dropzoneEl.classList.add(`${this.selectors.DROPZONE}${this.modifiers.HIDE_CONTENT}`);
	}

	hideDragOverIndicator() {
		this.dropzoneEl.classList.remove(`${this.selectors.DROPZONE}${this.modifiers.DRAG_OVER}`);

		if (this.hideContentOnHover)
			this.dropzoneEl.classList.remove(`${this.selectors.DROPZONE}${this.modifiers.HIDE_CONTENT}`);
	}

	showErrorValidation() {
		this.dropzoneEl.classList.add(`${this.selectors.DROPZONE}${this.modifiers.ERROR}`);

		if (this.verticalIndicatorEl)
			this.verticalIndicatorEl.classList.add(`${this.selectors.DROPZONE}${this.modifiers.ERROR}`);
	}

	hideErrorValidation() {
		this.dropzoneEl.classList.remove(`${this.selectors.DROPZONE}${this.modifiers.ERROR}`);

		if (this.verticalIndicatorEl)
			this.verticalIndicatorEl.classList.remove(`${this.selectors.DROPZONE}${this.modifiers.ERROR}`);
	}
}

export { ACLDropzone };
  • URL: /components/raw/dropzone/index.js
  • Filesystem Path: src/components/dropzone/index.js
  • Size: 2.2 KB

No notes defined.