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

Jump to bottom

[#544] Inject SVG : Week 2 #595

Closed
wants to merge 3 commits into from
Closed

[#544] Inject SVG : Week 2 #595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fd6213d
inject svg v 1.0.1
hardik-pratap-singh Jun 25, 2024
c5b51ca
week2 : inject SVG
hardik-pratap-singh Jun 30, 2024
01abf32
Hover feature in progress
hardik-pratap-singh Jul 2, 2024
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
48 changes: 48 additions & 0 deletions browser-extension/c4gt_testing_code/inject_svg/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

</head>
<body>
<div>
<p>
Lorem ipsum dolor sit amet consectetur crazy adipisicing elit. Quaerat alias iste quo exercitationem stupid
nesciunt ea?
</p>

<p>
Lorem ipsum, dolor sit amet stupid mad adipisicing elit. Magni minima adipisci architecto.
</p>
</div>

<div class="class">
<img src="" alt="">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa possimus quisquam temporibus
reprehenderit nesciunt dignissimos sunt ipsum, nostrum modi? Iusto libero sed alias!
</p>
<span>crazy</span>
</div>
</div>
<h3>
crazy
</h3>
<p>
Lorem ipsum dolor crazy stupid sit stupid amet consectetur adipisicing elit. Aut architecto illum dolorum
mad.
</p>

<button>
crazy
</button>
<!-- <script src="./ver1.js"></script> -->
<!-- <script src="./ver2.js"></script> -->
<script src="./ver3.js"></script>
</body>

</html>
1 change: 1 addition & 0 deletions browser-extension/c4gt_testing_code/inject_svg/info.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions browser-extension/c4gt_testing_code/inject_svg/ver1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// Find all elements that contain the target word
const iconSrc = './info.svg';
const iconAlt = 'Icon description';
const targetWord = 'crazy';

// Find all elements that contain the target word
document.querySelectorAll('*').forEach(element => {
// Use innerHTML to ensure all text content is considered
if (element.innerHTML.includes(targetWord)) {
// Split the innerHTML into parts to handle replacements
const parts = element.innerHTML.split(targetWord);
const replacedHTML = parts.join(`${targetWord}<span class="icon-container"></span>`);

// Update the element with the replaced content
element.innerHTML = replacedHTML;

// Add icon after each occurrence of the target word
const iconContainers = element.querySelectorAll('.icon-container');
iconContainers.forEach(container => {
const icon = document.createElement('img');
icon.src = iconSrc;
icon.alt = iconAlt;
container.appendChild(icon);

// Optionally, adjust icon styles here
// icon.style.width = '5%';
// icon.style.height = '5%';
});
}
});
28 changes: 28 additions & 0 deletions browser-extension/c4gt_testing_code/inject_svg/ver2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
const iconSrc = './info.svg';
const iconAlt = 'Icon description';
const targetWords = ['crazy', 'stupid', 'mad']; // Replace with your list of target words

// Find all elements that contain any of the target words
document.querySelectorAll('*').forEach(element => {
targetWords.forEach(targetWord => {
if (element.innerHTML.includes(targetWord)) {
const className = `icon-container-${targetWord}`;
// Split the innerHTML into parts to handle replacements
const parts = element.innerHTML.split(targetWord);
const replacedHTML = parts.join(`${targetWord}<span class="${className}"></span>`);

// Update the element with the replaced content
element.innerHTML = replacedHTML;

// Add icon after each occurrence of the target word
const iconContainers = element.querySelectorAll(`.${className}`);
iconContainers.forEach(container => {
const icon = document.createElement('img');
icon.src = iconSrc;
icon.alt = iconAlt;
container.appendChild(icon);

});
}
});
});
49 changes: 49 additions & 0 deletions browser-extension/c4gt_testing_code/inject_svg/ver3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
const iconSrc = './info.svg';
const iconAlt = 'Icon description';
const targetWords = ['crazy', 'stupid', 'mad']; // Replace with your list of target words

document.querySelectorAll('*').forEach(element => {
targetWords.forEach(targetWord => {
if (element.innerHTML.includes(targetWord)) {
const className = `icon-container-${targetWord}`;
// Split the innerHTML into parts to handle replacements
const parts = element.innerHTML.split(targetWord);
const replacedHTML = parts.join(`${targetWord}<span class="${className}"></span>`);

// Update the element with the replaced content
element.innerHTML = replacedHTML;

// Add icon after each occurrence of the target word
const iconContainers = element.querySelectorAll(`.${className}`);

iconContainers.forEach(container => {
const icon = document.createElement('img');
icon.src = iconSrc;
icon.alt = iconAlt;
container.appendChild(icon);

console.log(icon)
// Hovering feature: Popup with content
icon.addEventListener('mouseover', () => {
const popup = document.createElement('div');
popup.className = 'popup-content';
popup.textContent = "wow";
// Positioning of the popup content
popup.style.position = 'absolute';
popup.style.left = `${icon.offsetLeft + icon.offsetWidth}px`;
popup.style.top = `${icon.offsetTop}px`;
// Append popup to the document body or relevant container
document.body.appendChild(popup);
// container.appendChild(popup);


// Remove popup when mouseout
icon.addEventListener('mouseout', () => {
popup.remove();
});
});

});
}
});
});
Loading