From 778d656de2807669ed39d71c60c1954bdea66031 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 6 Apr 2022 20:21:50 +0530 Subject: [PATCH 1/4] upload html markup revamp --- assets/js/shared-ui/upload.js | 36 +++++++-------- assets/scss/shared-ui/_upload.scss | 28 ++++++------ page-uploads-image.html | 72 +++++++++++++----------------- 3 files changed, 62 insertions(+), 74 deletions(-) diff --git a/assets/js/shared-ui/upload.js b/assets/js/shared-ui/upload.js index 161ff61e..52ea58b2 100644 --- a/assets/js/shared-ui/upload.js +++ b/assets/js/shared-ui/upload.js @@ -21,12 +21,12 @@ }); // check whether element exist then execute js - if($( 'SUI_BODY_CLASS .sui-file-upload' ).length){ + if($( 'SUI_BODY_CLASS .sui-upload--file' ).length){ // This will trigger on file change. - $( 'SUI_BODY_CLASS .sui-file-browser input[type="file"]' ).on( 'change', function() { - var parent = $( this ).parent(); + $( 'SUI_BODY_CLASS .sui-upload--browser input[type="file"]' ).on( 'change', function() { + var parent = $( this ).closest( '.sui-upload' );; var filename = $( this ).val(); - var imageContainer = parent.find( '.sui-upload-image' ); + var imageContainer = parent.find( '.sui-upload__image' ); if(filename) { var lastIndex = filename.lastIndexOf( "\\" ); if ( lastIndex >= 0 ) { @@ -34,37 +34,37 @@ // To show uploaded file preview. if( imageContainer.length ){ var reader = new FileReader(); - var imagePreview = imageContainer.find( '.sui-image-preview' ); + var imagePreview = imageContainer.find( '.sui-upload__image--preview' ); reader.onload = function ( e ) { imagePreview.attr( 'style', 'background-image: url('+e.target.result+' );' ); } reader.readAsDataURL($( this )[0].files[0]); } - parent.find( '.sui-upload-file > span' ).text(filename); - parent.addClass( 'sui-has_file' ); + parent.find( '.sui-upload__file > span' ).text(filename); + parent.addClass( 'sui-upload--has-file' ); } } else { if( imageContainer.length ){ - var imagePreview = imageContainer.find( '.sui-image-preview' ); + var imagePreview = imageContainer.find( '.sui-upload__image--preview' ); imagePreview.attr( 'style', 'background-image: url();' ); } - parent.find( '.sui-upload-file > span' ).text( '' ); - parent.removeClass( 'sui-has_file' ); + parent.find( '.sui-upload__file > span' ).text( '' ); + parent.removeClass( 'sui-upload--has-file' ); } }); // This will trigger on click of upload button - $( 'SUI_BODY_CLASS .sui-file-browser .sui-upload-button' ).on( 'click', function(){ + $( 'SUI_BODY_CLASS .sui-upload--browser .sui-upload__button' ).on( 'click', function(){ selectFile($( this )); }); // This will trigger when user wants to remove the selected upload file - $( 'SUI_BODY_CLASS .sui-file-upload [aria-label="Remove file"]' ).on( 'click', function(){ + $( 'SUI_BODY_CLASS .sui-upload--file [aria-label="Remove file"]' ).on( 'click', function(){ removeFile($( this )); }); // This will trigger reupload of file - $( 'SUI_BODY_CLASS .sui-file-browser .sui-upload-image' ).on( 'click', function(){ + $( 'SUI_BODY_CLASS .sui-upload--browser .sui-upload__image' ).on( 'click', function(){ selectFile($( this )); }); @@ -74,7 +74,7 @@ return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window; }(); - var uploadArea = $( 'SUI_BODY_CLASS .sui-upload-button' ); + var uploadArea = $( 'SUI_BODY_CLASS .sui-upload__button' ); if(isAdvancedUpload){ var droppedFiles = false; @@ -98,18 +98,18 @@ // function to set uploaded file const uploadedFile = function (element, file, filename){ var parent = element.closest( '.sui-upload' ); - var imageContainer = parent.find( '.sui-upload-image' ); + var imageContainer = parent.find( '.sui-upload__image' ); if(filename) { if( imageContainer.length ){ var reader = new FileReader(); - var imagePreview = imageContainer.find( '.sui-image-preview' ); + var imagePreview = imageContainer.find( '.sui-upload__image--preview' ); reader.onload = function ( e ) { imagePreview.attr( 'style', 'background-image: url('+e.target.result+' );' ); } reader.readAsDataURL(file); } - parent.find( '.sui-upload-file > span' ).text(filename); - parent.addClass( 'sui-has_file' ); + parent.find( '.sui-upload__file > span' ).text(filename); + parent.addClass( 'sui-upload--has-file' ); } } diff --git a/assets/scss/shared-ui/_upload.scss b/assets/scss/shared-ui/_upload.scss index f24b2d62..334ada56 100644 --- a/assets/scss/shared-ui/_upload.scss +++ b/assets/scss/shared-ui/_upload.scss @@ -22,7 +22,7 @@ } } - .sui-upload-image { + .sui-upload__image { width: $file-upload--image-size; height: $file-upload--image-size; flex: 0 0 auto; @@ -32,21 +32,21 @@ border: $file-upload--image-border-width $file-upload--image-border-style $file-upload--image-border-color; border-radius: $border-radius; - [class*="sui-image-"] { + [class*="sui-upload__image--"] { width: #{$file-upload--image-size - (($file-upload--image-border-width * 2) + ($file-upload--image-padding * 2))}; height: #{$file-upload--image-size - (($file-upload--image-border-width * 2) + ($file-upload--image-padding * 2))}; display: block; border-radius: #{$border-radius - $file-upload--image-padding}; } - .sui-image-mask { + .sui-upload__image--mask { background-color: $file-upload--image-mask-background; background-image: linear-gradient(45deg, $white 25%, transparent 25%, transparent 75%, $white 75%, $white), linear-gradient(45deg, $white 25%, transparent 25%, transparent 75%, $white 75%, $white); background-size: 12px 12px; background-position: 0 0, 6px 6px; } - .sui-image-preview { + .sui-upload__image--preview { cursor: pointer; display: none; position: absolute; @@ -93,12 +93,12 @@ } } - ~ .sui-upload-button, - ~ .sui-upload-file { + ~ .sui-upload__file, + ~ .sui-upload__button { margin-left: 5px; } - ~ .sui-upload-file { + ~ .sui-upload__file { max-width: calc(100% - #{$file-upload--image-size + 5px}); cursor: initial; padding-left: 19px; @@ -114,7 +114,7 @@ } } - .sui-upload-file { + .sui-upload__file { max-width: 100%; cursor: pointer; flex: 0 0 auto; @@ -184,7 +184,7 @@ } } - .sui-upload-button { + .sui-upload__button { margin: 0; padding: 11px 19px; border: $file-upload--add-border-width $file-upload--add-border-style $file-upload--add-border-color; @@ -219,20 +219,20 @@ } // STATUS: File uploaded - &.sui-has_file { + &.sui-upload--has-file { - .sui-upload-image { + .sui-upload__image { - .sui-image-preview { + .sui-upload__image--preview { display: block; } } - .sui-upload-file { + .sui-upload__file { display: block; } - .sui-upload-button { + .sui-upload__button { display: none; } } diff --git a/page-uploads-image.html b/page-uploads-image.html index a2fafbf2..59098e87 100644 --- a/page-uploads-image.html +++ b/page-uploads-image.html @@ -94,28 +94,24 @@

Single Image

-
- - +
-