transferred JS code in "archive.html" into seperate file "archive.js".

[Aarav238]

Fixes #1182

transferred JS code in archive.html into seperate file archive.js and added script source in head section of archive.html.

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

• PR is descriptively titled 📑 and links the original issue above 🔗
• [] tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with grunt test
• code is in uniquely-named feature branch and has no merge conflicts 📁
• screenshots/GIFs are attached 📎 in case of UI updates
• @mention the original creator of the issue in a comment below for help or for a review

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software

Thanks!

[welcome]

Thanks for opening this pull request! Dangerbot will test out your code and reply in a bit with some pointers and requests.
There may be some errors, but don't worry! We're here to help! 👍🎉😄


One thing that can help to get started is to make sure you've included a link back to the original issue you're solving, in the format fixes #0000 (for example). And to make sure the PR title describes what you're trying to do! (often it can be the same as the issue title) Thanks! 🙌


Then, you can say hello in our chatroom & share a link to this PR to get a review! 👋 ✅

[Aarav238]

@TildaDares Please review it.

[TildaDares]

Hi @Aarav238, contributors can only work on one first-timers-only issue. Do you think you could close one of these PRs #1282 or #1285 so that other first-timers have something to work on? Thank you!

[Aarav238]

I have raise two pull request of FTO issues.
None of them are merged

[Aarav238]

Okay, i have closed the #1285 one.
Please review this one😇.
@TildaDares

[Aarav238]

@TildaDares is there any problem in this PR?

[7malikk]

Hello @Aarav238, there have been some new changes to the archive.html file.
Would you be willing to update your PR accordingly?

[Aarav238]

@7malikk i have resolved thr conflict

[7malikk]

@Aarav238 This is looking really good, one final touch, and I believe we are on our way to merge-ville.
Now as your PR implies, extract the js code into a separate file, like you did previously and we are home free.

How does that sound @Aarav238 ?

[Aarav238]

but I have Already extracted js code into archieve.js
@7malikk

[7malikk]

but I have Already extracted js code into archieve.js

@7malikk

Oh my bad @Aarav238
I was looking at a different commit
Thank you for that clarification.

I believe @jywarren can also review and merge this.

Great job @Aarav238 one 🍭 for you😊

[Aarav238]

Oh It's Okay @7malikk.
Thank you very much.

[Aarav238]

@7malikk I have some doubts related to start contributing in core project in this organisation

[7malikk]

@7malikk I have some doubts related to start contributing in core project in this organisation

Oh alright @Aarav238
You can join the community element chat, and raise said doubts and we can thrash them out there.

How does that sound?

[7malikk]

@Aarav238 you could start here https://code.publiclab.org/#r=all

[7malikk]

@Aarav238 you could start here https://code.publiclab.org/#r=all

[jywarren]

Hi all, this looks good, but @7malikk would you be able to check this file against the most recent changes in https://github.com/publiclab/Leaflet.DistortableImage/pull/1286/files, or have you already? I just want to be sure we don't lose that last change regarding the search box. Thanks!

[7malikk]

Just went through it again, seems @Aarav238 might've missed the changes regarding the search box.

@Aarav238 would you be willing to fetch the most recent changes files?

Thank you @jywarren for that pointer.

[Aarav238]

When will my PR get merged @jywarren

[7malikk]

@Aarav238 Hey there, could you check your extracted js code again as it is not in line with the code found here: https://github.com/publiclab/Leaflet.DistortableImage/blob/main/examples/archive.html

You could use the command git fetch upstream/main to get the latest updates locally and make your own updates.

[Aarav238]

Okay @7malikk Let me try .
If I will face any problem I will tag you in gitter.😊

[Aarav238]

What i have to add in archieve.js @7malikk

[7malikk]

What i have to add in archieve.js @7malikk

Hello @Aarav238
All you need to do is to extract the recently updated js code in the archive.html

https://github.com/publiclab/Leaflet.DistortableImage/blob/main/examples/archive.html

[Aarav238]

I have resolved the issue.

[7malikk]

@Aarav238 Hey there, great work so far
One last thing, here:

Leaflet.DistortableImage/examples/archive.html

Lines 75 to 201 in 073e121

	<script>
	let map;
	let welcomeModal = document.getElementById('welcomeModal');
	let sidebar = document.getElementById('offcanvasRight');
	let form = document.getElementById('form');
	let input = document.getElementById('input');
	let responseText = document.getElementById('response');
	let imageContainer = document.getElementById('imgContainer');
	let mapToggle = document.getElementById('mapToggle')
	const setupMap = () => {
	map = L.map('map').setView([51.505, -0.09], 13);
	map.attributionControl.setPosition('bottomleft');
	map.addGoogleMutant();
	map.whenReady(() => {
	new bootstrap.Modal(welcomeModal).show();
	});
	};
	const setupCollection = () => {
	map.imgGroup = L.distortableCollection().addTo(map);
	};
	setupMap();
	L.Control.geocoder().addTo(map);
	setupCollection();
	form.addEventListener('submit', (event) => {
	event.preventDefault();
	extractKey();
	});
	welcomeModal.addEventListener('hidden.bs.modal', (event) => {
	new bootstrap.Offcanvas(sidebar).show();
	});
	function extractKey() {
	let getUrl;
	if(!input.value.includes('archive.org/details/') && !input.value.includes('https://'))
	{
	getUrl = `https://archive.org/details/${input.value}/`;
	showImages(getUrl);
	}
	else if(!input.value.includes('https://') && !input.value.includes('http://') && input.value.includes('archive.org/details/')) {
	getUrl = `https://${input.value}`;
	showImages(getUrl);
	}
	else if(input.value.includes('http://')) {
	getUrl = input.value.replace('http:', 'https:');
	input.value = getUrl;
	console.log('input', input.value);
	showImages(getUrl);
	}
	else
	{
	getUrl = input.value;
	showImages(getUrl)
	}
	}
	function showImages(getUrl) {
	const url = getUrl.replace('details', 'metadata');
	let fetchedFrom
	axios.get(url)
	.then((response) => {
	if (response.data.files && response.data.files.length != 0) {
	let imageCount = 0;
	response.data.files.forEach(file => {
	if (file.format === 'PNG' || file.format === 'JPEG'){
	let imageRow = document.createElement('div');
	let image = new Image(150, 150);
	let placeButton = document.createElement('a');
	fetchedFrom = document.createElement('p');
	fetchedFromUrl = document.createElement('a');
	fetchedFromUrl.setAttribute('href', input.value);
	fetchedFromUrl.setAttribute('target', '_blank');
	fetchedFromUrl.innerHTML = 'this Internet Archive Collection';
	fetchedFrom.appendChild(fetchedFromUrl)
	placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button');
	placeButton.innerHTML = 'Place on map';
	image.src = `${url.replace('metadata', 'download')}/${file.name}`;
	imageRow.classList.add('d-flex', 'justify-content-between', 'align-items-center', 'mb-4', 'pe-5');
	imageRow.append(image, placeButton);
	imageContainer.appendChild(imageRow);
	imageCount++;
	}
	});
	responseText.innerHTML = imageCount ? `${imageCount} image(s) fetched successfully from ${fetchedFrom.innerHTML}.` : 'No images found in the link provided...'
	} else {
	responseText.innerHTML = 'No images found in the link provided...'
	}
	})
	.catch((error) => {
	responseText.innerHTML = 'Uh-oh! Something\'s not right with the link provided!'
	})
	.finally(() => {
	bootstrap.Modal.getInstance(welcomeModal).hide();
	});
	}
	welcomeModal.addEventListener('hidden.bs.modal', (event) => {
	new bootstrap.Offcanvas(sidebar).show();
	});
	map.addEventListener('click', (event)=>{
	sidebar.classList.remove('show')
	})
	mapToggle.addEventListener('click', (event)=>{
	new bootstrap.Offcanvas(sidebar).show();
	})
	document.addEventListener("click", (event) => {
	if (event.target.classList.contains('place-button')) {
	let imageURL = event.target.previousElementSibling.src;
	let image = L.distortableImageOverlay(imageURL);
	map.imgGroup.addLayer(image);
	}
	});
	</script>

I believe you forgot to cut the js code from the html file.
Would you like to resolve this? This should be the last of them all.

[Aarav238]

I have removed the extra js code from archive.html

[7malikk]

@Aarav238 Great job!

@jywarren I believe this is ready for your review and merge.

[welcome]

Congrats on merging your first pull request! 🙌🎉⚡️
Your code will likely be published to https://mapknitter.org in the next few days.
Now that you've completed this, you can help someone else take their first step!
Reach out to someone else working on theirs on Public Lab's code welcome page (where you'll now be featured as a recent contributor!). Thanks!

Help others take their first step

Now that you've merged your first pull request, you're the perfect person to help someone else out with this challenging first step. 🙌

https://code.publiclab.org

Try looking at this list of `first-timers-only` issues, and see if someone else is waiting for feedback, or even stuck! 😕

People often get stuck at the same steps, so you might be able to help someone get unstuck, or help lead them to some documentation that'd help. Reach out and be encouraging and friendly! 😄 🎉

Read about how to help support another newcomer here, or find other ways to offer mutual support here.

[jywarren]

Great work, folks!!!

[7malikk]

@Aarav238 Congratulations on merging you PR

@jywarren Thank you