Skip to content

Commit

Permalink
fix: slur metadata bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@aatmanvaidya
aatmanvaidya committed Jan 29, 2025
1 parent b0f65be commit 250b260
Show file tree
Hide file tree
Showing 4 changed files with 172 additions and 173 deletions.
2 changes: 1 addition & 1 deletion browser-extension/plugin/manifest.firefox.json
View file
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
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
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

0 comments on commit 250b260

Please sign in to comment.