Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Notify Users for the failure in loading Image via external URL #1813

Merged
merged 7 commits into from
Feb 19, 2021
Merged

Notify Users for the failure in loading Image via external URL #1813

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d4b7339
Load image via URL
vivek-30 Feb 16, 2021
9d82d16
notify users for image load failue due to CORS error
vivek-30 Feb 18, 2021
70df3cb
added a check for notifybox
vivek-30 Feb 18, 2021
4ab5be2
added some more checks
vivek-30 Feb 18, 2021
40d74eb
Merge branch 'main' into image-url
jywarren Feb 19, 2021
7d50715
added bootstrap version v4 classes
vivek-30 Feb 19, 2021
fe644c6
Merge branch 'image-url' of https://github.com/vivek-30/image-sequenc…
vivek-30 Feb 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions examples/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@ a.name-header{
display: block;
}

#update-prompt-modal {
#update-prompt-modal,#notify-box {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
Expand All @@ -347,7 +347,18 @@ a.name-header{
left: 10%;
top: 30px;
}
#update-prompt-modal.show {

#notify-box {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow cool, it looks like you created a custom alert box style, was there a reason why the bootstrap styles didn't work for you? Thanks!!!

Copy link
Author

@vivek-30 vivek-30 Feb 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no special reason for this .But the thing which took me to create a custom one is because toast is available in bootstrap version v4 and currently we have v3 so either we have to use cdn links or update it which i feel not to do so just for a notification prompt.
But it worth having this custom Toast. right?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jywarren sir is it ok😊

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, that makes sense! And, it looks nice, good work!

image

Let's do this: let's use a classname instead of an ID so it can be more easily reused, and let's also use the same classname as the Bootstrap 4 code -- that way if we upgrade in the future, it'll be a relatively easy change where we remove our custom style and switch over. How does that sound?

Thank you for your help on this!!!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That sounds perfect!! . And sir you are right we should make this code a little bit more general in nature for further reusability. i will change it now 😊 .

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BTW i was just planning to provide you a visual for the changes i have made so that you can judge it better ,but before that you send this pick isn't it funny

width:34vw;
padding:18px;
border-radius:8px;
margin-left:0.8rem;
text-align:left;
color:#333;
background:#c3c3c3;
}

#update-prompt-modal.show,#notify-box {
visibility: visible;
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
Expand Down
9 changes: 9 additions & 0 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,15 @@

<div id="update-prompt-modal">A new version of image sequencer is available. Click <a href="#" id="reload">here</a> to update.</div>

<div id="notify-box" class="hide">
<strong>Failed To Load Image</strong>
<button type="button" class="ml-2 mb-1 close" id="close-popup"><span>&times;</span></button>
<div id="notify-msg">
Can not Load Image Due to CORS Error Learn more about this
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors" target="_blank">here</a>
</div>
</div>

<div class="container-fluid">

<header class="text-center">
Expand Down
64 changes: 52 additions & 12 deletions src/ui/LoadImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,22 @@ function LoadImage(ref, name, src, main_callback) {
};
return image;
}

// function to check whether a image can be fetched from external source or not
function checkForError(image_url) {
return fetch(image_url).then(function(res) {
if(res)
return false;
else
return true;
}).catch(function(err) {
if(err)
console.log('Error occured because of image URL ',err);

return true;
});
}

function CImage(src, step, callback) {
var datauri;
if (src.match(/^data:/i)) {
Expand All @@ -25,18 +41,42 @@ function LoadImage(ref, name, src, main_callback) {
});
}
else if (ref.options.inBrowser) {
var ext = src.split('.').pop();
var image = document.createElement('img');
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
image.onload = function() {
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
context.drawImage(image, 0, 0);
datauri = canvas.toDataURL(ext);
callback(datauri, step);
};
image.src = src;

let notifyBox = document.getElementById('notify-box');
let closePopUP = document.getElementById('close-popup');
if(src.indexOf('images/') !== 0 && src.indexOf('./images/') !== 0 && checkForError(src)){

if(notifyBox){
notifyBox.classList.remove('hide');
notifyBox.classList.add('show');
}

if(closePopUP){
closePopUP.addEventListener('click',function(){
if(notifyBox){
notifyBox.classList.remove('show');
notifyBox.classList.add('hide');
}
if(document.querySelector('button.remove'))
document.querySelector('button.remove').click(); // Remove the step due to redundant processing.
location.reload();
});
}
}
else{
var ext = src.split('.').pop();
var image = document.createElement('img');
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
image.onload = function() {
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
context.drawImage(image, 0, 0);
datauri = canvas.toDataURL(ext);
callback(datauri, step);
};
image.src = src;
}
}
else {
datauri = require('urify')(src);
Expand Down