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

fix: slur metadata bug #676

Merged
merged 1 commit into from
Jan 29, 2025
Merged

fix: slur metadata bug #676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion browser-extension/plugin/manifest.firefox.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"manifest_version": 2,
"name": "uli",
"description": "Moderate your Twitter Feed",
"version": "0.2.0",
"version": "0.2.1",
"author": "tattlemade|cis",
"content_security_policy": "default-src 'none'; connect-src https://uli-community.tattle.co.in/ https://uli-media.tattle.co.in/; font-src https://fonts.gstatic.com; object-src 'none'; script-src 'self' ; style-src https://fonts.googleapis.com 'self' 'unsafe-inline'; img-src https://uli-media.tattle.co.in/; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; report-uri 'none';",
"permissions": [
Expand Down
2 changes: 1 addition & 1 deletion browser-extension/plugin/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"manifest_version": 3,
"name": "uli",
"description": "Moderate your Twitter Feed",
"version": "0.2.0",
"version": "0.2.1",
"author": "tattlemade|cis",
"content_security_policy": {
"extension_pages": "default-src 'none'; connect-src https://uli-community.tattle.co.in/ https://uli-media.tattle.co.in/; font-src https://fonts.gstatic.com; object-src 'none'; script-src 'self'; style-src https://fonts.googleapis.com 'self' 'unsafe-inline'; img-src https://uli-media.tattle.co.in/; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; report-uri 'none';"
Expand Down
225 changes: 112 additions & 113 deletions browser-extension/plugin/src/transform-general.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,12 @@ function setCaretPosition(element, offset) {
}

const processNewlyAddedNodesGeneral2 = function (firstBody, jsonData) {
let targetWords = [];
jsonData.forEach(slur => {
let targetWords = [];
jsonData.forEach((slur) => {
const slurWord = Object.keys(slur)[0];
targetWords.push(slurWord);
targetWords.push(slurWord.charAt(0).toUpperCase() + slurWord.slice(1));
targetWords.push(slurWord);
// targetWords.push(slurWord.charAt(0).toUpperCase() + slurWord.slice(1));
});

let uliStore = [];
getAllTextNodes(firstBody, uliStore);
abc = locateSlur(uliStore, targetWords);
Expand Down Expand Up @@ -89,7 +88,7 @@ const processNewlyAddedNodesGeneral = function (firstBody) {
function checkFalseTextNode(text, actualLengthOfText) {
let totalNewlineAndWhitespaces = 0;
for (let i = 0; i < text.length; i++) {
if (text[i] === "\n" || text[i] === " " || text[i] === "\t") {
if (text[i] === '\n' || text[i] === ' ' || text[i] === '\t') {
totalNewlineAndWhitespaces++;
}
}
Expand All @@ -98,70 +97,72 @@ function checkFalseTextNode(text, actualLengthOfText) {

// Function to recursively get all text nodes for a given node
function getAllTextNodes(node, uliStore) {
if (node.nodeType === 3) {
if (node.nodeType === 3) {
if (!checkFalseTextNode(node.data, node.length)) {
uliStore.push({ node: node, parent: node.parentNode });
}
} else {
let children = Array.from(node.childNodes);
children.forEach(child => getAllTextNodes(child, uliStore));
children.forEach((child) => getAllTextNodes(child, uliStore));
}
}

function findPositions(word, text) {
let positions = {};
let len = word.length
let loc = []
let len = word.length;
let loc = [];
let index = text.toString().indexOf(word);
while (index !== -1) {
let obj = {};
loc.push([index, index + len]);
index = text.toString().indexOf(word, index + 1);
}
if (loc.length !== 0) {
positions.slurText = word
positions.slurText = word;
positions.slurLocation = loc;
}
return positions;
}



function locateSlur(uliStore, targetWords) {
let n = uliStore.length;

for (let i = 0; i < n; i++) {
let store = uliStore[i];
let parentNode = store.parent
let textnode = store.node
let text = store.node.textContent
let tempParent = document.createElement("span");
let store = uliStore[i];
let parentNode = store.parent;
let textnode = store.node;
let text = store.node.textContent;
let tempParent = document.createElement('span');
tempParent.textContent = text;
let slurs = [];
let slurPresentInTempParent = false;
targetWords.forEach(targetWord => {
targetWords.forEach((targetWord) => {
let slurWord = targetWord;
let pos = findPositions(slurWord, text);
if (Object.keys(pos).length !== 0) {
slurs.push(pos)
slurs.push(pos);
}

if (tempParent.innerHTML.includes(targetWord)) {
const className = `icon-container-${targetWord}`;
const slurClass = `slur-container-${targetWord}`
const slurClass = `slur-container-${targetWord}`;

// if (!tempParent.innerHTML.includes(`class="${slurClass}"`)) {
const parts = tempParent.innerHTML.split(targetWord);
// console.log("PARTS: ",parts)
const replacedHTML = parts.join(`<span class="${slurClass}"><span class="slur">${targetWord}</span></span>`);
tempParent.innerHTML = replacedHTML
const replacedHTML = parts.join(
`<span class="${slurClass}"><span class="slur">${targetWord}</span></span>`
);
tempParent.innerHTML = replacedHTML;
slurPresentInTempParent = true;
// }
}
})
uliStore[i].nodeToParent = tempParent
});
uliStore[i].nodeToParent = tempParent;
uliStore[i].slurs = slurs;

//O(1) complexity
if (slurPresentInTempParent) {
textnode.replaceWith(tempParent)
textnode.replaceWith(tempParent);
}

// console.log("TEMPParent: ",tempParent)
Expand All @@ -170,87 +171,89 @@ function locateSlur(uliStore, targetWords) {
}

function addMetaData(targetWords, jsonData) {
// console.log(targetWords)
targetWords.forEach(targetWord => {
const className = `slur-container-${targetWord}`
const elements = Array.from(document.querySelectorAll(`.${className}`))
targetWords.forEach((targetWord) => {
const className = `slur-container-${targetWord}`;
const elements = Array.from(document.querySelectorAll(`.${className}`));
// console.log("ELEMENTS are: ",elements)
elements.forEach(element => {

elements.forEach((element) => {
// console.log("ELements InnerHTML:",element.innerHTML)

// element.innerHTML = element.innerHTML.replace(/<img[^>]*>/g, '')

let sup = document.createElement("span");
let img = document.createElement("img");
img.style.height = "0.6em"
img.style.width = "0.6em"
img.style.border = "1px solid black"
img.style.cursor = "pointer"
img.style.marginBottom="0.4em"

img.src = "https://raw.githubusercontent.com/tattle-made/Uli/main/uli-website/src/images/favicon-32x32.png"
img.alt = "altText"

let span = document.createElement("span")
span.style.display = "none"
span.style.position = "absolute"
span.style.marginLeft ="2px"
span.style.marginTop ="2px"
span.style.backgroundColor = "antiquewhite"
span.style.border = "1px solid black"
span.style.borderRadius = "12px"
span.style.padding = "2px 6px"
span.style.width = "16rem"
span.style.textAlign = "justify"
span.style.fontWeight = "lighter"
span.style.color = "black"
span.style.zIndex = "1000000000"; // This ensures it appears above other elements
span.style.fontSize = "14px"
span.style.textDecoration = "none"
span.style.fontStyle = "normal"

span.innerHTML = `${targetWord} is an offensive word`


jsonData.forEach(slur => {
const slurWord = Object.keys(slur)[0];
let sup = document.createElement('span');
let img = document.createElement('img');
img.style.height = '0.6em';
img.style.width = '0.6em';
img.style.border = '1px solid black';
img.style.cursor = 'pointer';
img.style.marginBottom = '0.4em';

img.src =
'https://raw.githubusercontent.com/tattle-made/Uli/main/uli-website/src/images/favicon-32x32.png';
img.alt = 'altText';

let span = document.createElement('span');
span.style.display = 'none';
span.style.position = 'absolute';
span.style.marginLeft = '2px';
span.style.marginTop = '2px';
span.style.backgroundColor = 'antiquewhite';
span.style.border = '1px solid black';
span.style.borderRadius = '12px';
span.style.padding = '2px 6px';
span.style.width = '16rem';
span.style.textAlign = 'justify';
span.style.fontWeight = 'lighter';
span.style.color = 'black';
span.style.zIndex = '1000000000'; // This ensures it appears above other elements
span.style.fontSize = '14px';
span.style.textDecoration = 'none';
span.style.fontStyle = 'normal';

span.innerHTML = `${targetWord} is an offensive word`;

jsonData.forEach((slur) => {
const slurWord = Object.keys(slur)[0];
if (slurWord.toLowerCase() === targetWord.toLowerCase()) {
const slurDetails = slur[slurWord];
let levelOfSeverity = slurDetails["Level of Severity"] ;
let casual = slurDetails["Casual"] ;
let approapriated = slurDetails["Appropriated"] ;
let reason = slurDetails["If, Appropriated, Is it by Community or Others?"] ;
let problematic = slurDetails["What Makes it Problematic?"];
let categories = slurDetails["Categories"] ;
let htmlContent = `` ;
if(levelOfSeverity){
htmlContent += `<p><span class="label"><b>Level of Severity:</b></span> ${levelOfSeverity}</p>`
const slurDetails = slur[slurWord];
let levelOfSeverity = slurDetails['Level of Severity'];
let casual = slurDetails['Casual'];
let approapriated = slurDetails['Appropriated'];
let reason =
slurDetails[
'If, Appropriated, Is it by Community or Others?'
];
let problematic = slurDetails['What Makes it Problematic?'];
let categories = slurDetails['Categories'];
let htmlContent = ``;
if (levelOfSeverity) {
htmlContent += `<p><span class="label"><b>Level of Severity:</b></span> ${levelOfSeverity}</p>`;
}
if(casual){
htmlContent += `<p><span class="label"><b>Casual:</b></span> ${casual}</p>`
if (casual) {
htmlContent += `<p><span class="label"><b>Casual:</b></span> ${casual}</p>`;
}
if(approapriated){
htmlContent += `<p><span class="label"><b>Appropriated:</b></span> ${approapriated}</p>`
if (approapriated) {
htmlContent += `<p><span class="label"><b>Appropriated:</b></span> ${approapriated}</p>`;
}
if(reason){
htmlContent += `<p><span class="label"><b>If, Appropriated, Is it by Community or Others?:</b></span> ${reason}</p>`
if (reason) {
htmlContent += `<p><span class="label"><b>If, Appropriated, Is it by Community or Others?:</b></span> ${reason}</p>`;
}
if(problematic){
htmlContent += `<p><span class="label"><b>What Makes it Problematic?:</b></span> ${problematic}</p>`
if (problematic) {
htmlContent += `<p><span class="label"><b>What Makes it Problematic?:</b></span> ${problematic}</p>`;
}
if(categories.length > 0){
htmlContent += `<p><span class="label"><b>Categories:</b></span> ${slurDetails["Categories"].join(', ')}</p>`
if (categories.length > 0) {
htmlContent += `<p><span class="label"><b>Categories:</b></span> ${slurDetails[
'Categories'
].join(', ')}</p>`;
}
span.innerHTML = htmlContent;
}
});



// sup.appendChild(span)


// element.append(sup)
// element.append(img)
// let sups = element.children[0]
Expand All @@ -265,49 +268,45 @@ function addMetaData(targetWords, jsonData) {
// sups.children[0].style.display = "none"
// });


sup.appendChild(span)
sup.appendChild(span);

// console.log("Element first child",element.children[0])
// console.log("Element last child",element.children[element.children.length-1])
// console.log("SUP: ",sup)
// console.log("ELEMENT IS: ",element)
// console.log("ELEMENT INNERHTML: ",element.innerHTML)
element.append(span)

element.append(span);

// console.log("ELEMENT AFTER IS: ",element)
// element.append(img)
let slur = element.children[0]
slur.style.backgroundColor="#ffde2155"
slur.style.boxShadow="0px 0px 5px #ffde21"
slur.style.cursor = "pointer"
let metabox = element.children[1]
let slur = element.children[0];
slur.style.backgroundColor = '#ffde2155';
slur.style.boxShadow = '0px 0px 5px #ffde21';
slur.style.cursor = 'pointer';

let metabox = element.children[1];
// console.log("METABOX IS: ",metabox)
let spans = element.children[0].children[1]
let spans = element.children[0].children[1];
// const svgs = element.children[0].children[0];
const svgs = element.children[element.children.length-1];
const svgs = element.children[element.children.length - 1];
slur.addEventListener('mouseover', function () {
metabox.style.display = "inline-block"
metabox.style.display = 'inline-block';
});

slur.addEventListener('mouseout', function () {
metabox.style.display = "none"
metabox.style.display = 'none';
});
})
})
});
});
}

export default {
processNewlyAddedNodesGeneral,
processNewlyAddedNodesGeneral2,
addMetaData,
locateSlur,
findPositions,
getAllTextNodes,
checkFalseTextNode
addMetaData,
locateSlur,
findPositions,
getAllTextNodes,
checkFalseTextNode
};



Loading
Loading