From 250b26024bec3b846c8169afb7503113f62c9a7b Mon Sep 17 00:00:00 2001 From: Aatman Vaidya Date: Wed, 29 Jan 2025 12:58:25 +0530 Subject: [PATCH] fix: slur metadata bug --- .../plugin/manifest.firefox.json | 2 +- browser-extension/plugin/manifest.json | 2 +- .../plugin/src/transform-general.js | 225 +++++++++--------- .../seed_plugin_slur_metadata_28_01_25.ex | 116 ++++----- 4 files changed, 172 insertions(+), 173 deletions(-) diff --git a/browser-extension/plugin/manifest.firefox.json b/browser-extension/plugin/manifest.firefox.json index 49c17c3a..4c5f61f5 100644 --- a/browser-extension/plugin/manifest.firefox.json +++ b/browser-extension/plugin/manifest.firefox.json @@ -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": [ diff --git a/browser-extension/plugin/manifest.json b/browser-extension/plugin/manifest.json index 62c5239a..d1708303 100644 --- a/browser-extension/plugin/manifest.json +++ b/browser-extension/plugin/manifest.json @@ -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';" diff --git a/browser-extension/plugin/src/transform-general.js b/browser-extension/plugin/src/transform-general.js index a7c5178b..6e1dfab2 100644 --- a/browser-extension/plugin/src/transform-general.js +++ b/browser-extension/plugin/src/transform-general.js @@ -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); @@ -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++; } } @@ -98,20 +97,20 @@ 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 = {}; @@ -119,49 +118,51 @@ function findPositions(word, text) { 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(`${targetWord}`); - tempParent.innerHTML = replacedHTML + const replacedHTML = parts.join( + `${targetWord}` + ); + 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) @@ -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(/]*>/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 += `

Level of Severity: ${levelOfSeverity}

` + 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 += `

Level of Severity: ${levelOfSeverity}

`; } - if(casual){ - htmlContent += `

Casual: ${casual}

` + if (casual) { + htmlContent += `

Casual: ${casual}

`; } - if(approapriated){ - htmlContent += `

Appropriated: ${approapriated}

` + if (approapriated) { + htmlContent += `

Appropriated: ${approapriated}

`; } - if(reason){ - htmlContent += `

If, Appropriated, Is it by Community or Others?: ${reason}

` + if (reason) { + htmlContent += `

If, Appropriated, Is it by Community or Others?: ${reason}

`; } - if(problematic){ - htmlContent += `

What Makes it Problematic?: ${problematic}

` + if (problematic) { + htmlContent += `

What Makes it Problematic?: ${problematic}

`; } - if(categories.length > 0){ - htmlContent += `

Categories: ${slurDetails["Categories"].join(', ')}

` + if (categories.length > 0) { + htmlContent += `

Categories: ${slurDetails[ + 'Categories' + ].join(', ')}

`; } span.innerHTML = htmlContent; } }); - + // sup.appendChild(span) - // element.append(sup) // element.append(img) // let sups = element.children[0] @@ -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 }; - - - diff --git a/uli-community/lib/scripts/seed_plugin_slur_metadata_28_01_25.ex b/uli-community/lib/scripts/seed_plugin_slur_metadata_28_01_25.ex index 9480b355..984c8ff5 100644 --- a/uli-community/lib/scripts/seed_plugin_slur_metadata_28_01_25.ex +++ b/uli-community/lib/scripts/seed_plugin_slur_metadata_28_01_25.ex @@ -85,18 +85,18 @@ defmodule Scripts.SeedPluginSlurMetadata280125 do batch: 1, categories: [:gendered, :sexualized] }, - %{ - label: "r&d-khana", - language: "Unknown", - level_of_severity: :high, - casual: false, - appropriated: false, - appropriation_context: nil, - meaning: - "It is used against women, to imply 'looseness' and looks at sex work in a negative light", - batch: 1, - categories: [:gendered, :sexualized] - }, + # %{ + # label: "r&d-khana", + # language: "Unknown", + # level_of_severity: :high, + # casual: false, + # appropriated: false, + # appropriation_context: nil, + # meaning: + # "It is used against women, to imply 'looseness' and looks at sex work in a negative light", + # batch: 1, + # categories: [:gendered, :sexualized] + # }, %{ label: "khanki", language: "Unknown", @@ -199,17 +199,17 @@ defmodule Scripts.SeedPluginSlurMetadata280125 do batch: 1, categories: [:gendered, :sexualized] }, - %{ - label: "Dheela Lun@", - language: "Unknown", - level_of_severity: :low, - casual: true, - appropriated: false, - appropriation_context: nil, - meaning: "It is used to humilate people with a penis on their sexual performance", - batch: 1, - categories: [:gendered, :body_shaming] - }, + # %{ + # label: "Dheela Lun@", + # language: "Unknown", + # level_of_severity: :low, + # casual: true, + # appropriated: false, + # appropriation_context: nil, + # meaning: "It is used to humilate people with a penis on their sexual performance", + # batch: 1, + # categories: [:gendered, :body_shaming] + # }, %{ label: "kutiya", language: "Unknown", @@ -1140,18 +1140,18 @@ defmodule Scripts.SeedPluginSlurMetadata280125 do batch: 1, categories: [:gendered, :political_affiliation] }, - %{ - label: "R@ndi", - language: "Unknown", - level_of_severity: :high, - casual: false, - appropriated: true, - appropriation_context: true, - meaning: - "A word that demeans a sex-worker; also used against women to insult and insinuate they are a prostitute.", - batch: 1, - categories: [:gendered, :sexualized, :class, :caste] - }, + # %{ + # label: "R@ndi", + # language: "Unknown", + # level_of_severity: :high, + # casual: false, + # appropriated: true, + # appropriation_context: true, + # meaning: + # "A word that demeans a sex-worker; also used against women to insult and insinuate they are a prostitute.", + # batch: 1, + # categories: [:gendered, :sexualized, :class, :caste] + # }, %{ label: "pheminist", language: "Unknown", @@ -1319,17 +1319,17 @@ defmodule Scripts.SeedPluginSlurMetadata280125 do batch: 1, categories: [:ableist] }, - %{ - label: "r*tarded", - language: "Unknown", - level_of_severity: :medium, - casual: true, - appropriated: false, - appropriation_context: nil, - meaning: "The word is used to mock someone who does something silly.", - batch: 1, - categories: [:ableist] - }, + # %{ + # label: "r*tarded", + # language: "Unknown", + # level_of_severity: :medium, + # casual: true, + # appropriated: false, + # appropriation_context: nil, + # meaning: "The word is used to mock someone who does something silly.", + # batch: 1, + # categories: [:ableist] + # }, %{ label: "lesbo", language: "Unknown", @@ -2218,18 +2218,18 @@ defmodule Scripts.SeedPluginSlurMetadata280125 do batch: 1, categories: [:religion, :ethnicity] }, - %{ - label: "wh@re child", - language: "Unknown", - level_of_severity: :high, - casual: false, - appropriated: false, - appropriation_context: nil, - meaning: - "The word whore historically referred to a person, typically a woman, who engages in sexual activity for payment. The term whore child is a gendered insult towards someone to shame or ridicule someone and to say they are a child of a sex worker.", - batch: 1, - categories: [:sexualized, :gendered, :class, :sexual_identity] - }, + # %{ + # label: "wh@re child", + # language: "Unknown", + # level_of_severity: :high, + # casual: false, + # appropriated: false, + # appropriation_context: nil, + # meaning: + # "The word whore historically referred to a person, typically a woman, who engages in sexual activity for payment. The term whore child is a gendered insult towards someone to shame or ridicule someone and to say they are a child of a sex worker.", + # batch: 1, + # categories: [:sexualized, :gendered, :class, :sexual_identity] + # }, %{ label: "nigga", language: "Unknown",