Skip to content

Commit

Permalink
Converted popup to React in newpopup.tsx, still no functionality impl…
Browse files Browse the repository at this point in the history
…emented yet but the UI is identical
  • Loading branch information
basshelal committed Jul 3, 2022
1 parent c367342 commit b4b62b3
Show file tree
Hide file tree
Showing 16 changed files with 1,515 additions and 290 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Wudooh وضوح

[![Wudooh Banner](https://raw.githubusercontent.com/basshelal/Wudooh/master/pics/WudoohLogo1400x560.png)](https://wudooh.app)
[![Wudooh Banner](https://raw.githubusercontent.com/basshelal/Wudooh/master/pages/pics/WudoohLogo1400x560.png)](https://wudooh.app)

[![Chrome Web Store](https://img.shields.io/chrome-web-store/v/nigfaloeeeakmmgndbdcijjegolpjfhn.svg)](https://chrome.google.com/webstore/detail/wudooh/nigfaloeeeakmmgndbdcijjegolpjfhn)
[![Chrome Web Store](https://img.shields.io/chrome-web-store/users/nigfaloeeeakmmgndbdcijjegolpjfhn.svg)](https://chrome.google.com/webstore/detail/wudooh/nigfaloeeeakmmgndbdcijjegolpjfhn)
Expand Down
1,418 changes: 1,226 additions & 192 deletions package-lock.json

Large diffs are not rendered by default.

35 changes: 21 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,44 +26,51 @@
"buildChrome": "run-s minifyAll chrome",
"buildFirefox": "run-s minifyAll firefox",
"build": "run-s buildChrome",

"watch": "webpack --config webpack/webpack.dev.js --watch",
"build-new": "webpack --config webpack/webpack.prod.js",
"clean": "rimraf dist",
"test": "jest"
},
"devDependencies": {
"@types/chrome": "0.0.190",
"@types/chromedriver": "^81.0.1",
"@types/firefox-webext-browser": "^94.0.1",
"@types/fs-extra": "^9.0.13",
"@types/jest": "^28.1.1",
"@types/materialize-css": "^1.0.11",
"@types/node": "^18.0.0",
"@types/jest": "^28.1.1",
"@types/chromedriver": "^81.0.1",
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
"@types/selenium-webdriver": "^4.1.1",
"@types/sinon-chrome": "^2.2.11",
"typescript": "^4.7.4",
"chromedriver": "^103.0.0",
"copy-webpack-plugin": "^9.1.0",
"cross-zip": "^4.0.0",
"fs-extra": "^10.1.0",
"npm-run-all": "^4.1.5",
"replace-in-file": "^6.3.5",
"ts-node": "^10.8.1",
"uglify-js": "^3.16.1",
"chromedriver": "^103.0.0",
"selenium-webdriver": "^4.3.0",
"glob": "^7.2.3",
"jest": "^28.1.1",
"ts-jest": "^28.0.5",
"sinon-chrome": "^3.0.1",
"jest-environment-jsdom": "^28.1.1",
"copy-webpack-plugin": "^9.1.0",
"glob": "^7.2.3",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",
"replace-in-file": "^6.3.5",
"rimraf": "^3.0.2",
"selenium-webdriver": "^4.3.0",
"sinon-chrome": "^3.0.1",
"ts-jest": "^28.0.5",
"ts-loader": "^8.4.0",
"ts-node": "^10.8.1",
"typescript": "^4.7.4",
"uglify-js": "^3.16.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@fontsource/roboto": "^4.5.7",
"@mui/material": "^5.8.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
2 changes: 1 addition & 1 deletion public/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"24": "icons/icon256.png",
"32": "icons/icon256.png"
},
"default_popup": "popup.html"
"default_popup": "newpopup.html"
},
"icons": {
"128": "icons/icon128.png",
Expand Down
14 changes: 14 additions & 0 deletions public/newpopup.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<html lang="en">
<head>
<title>وضوح</title>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
<link href="popup.css" rel="stylesheet">
<style id="wudoohCustomFontsStyle"></style>
</head>

<body>
<div id="root"></div>
<script src="js/newpopup.js"></script>
</body>

</html>
2 changes: 1 addition & 1 deletion src/background.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import {
DefaultWudoohStorage,
extensions,
MessageReasons,
runtime,
sync,
tabs,
WudoohKeys,
WudoohStorage
} from "./common"
import {extensions} from "./extensions"
/**
* This is the code that runs on the background page of the extension.
*
Expand Down
70 changes: 10 additions & 60 deletions src/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
* This trick is done by loading this script before any others when they are requested
*/

import {extensions} from "./extensions"

extensions()

// Import Types
export type Tab = chrome.tabs.Tab | browser.tabs.Tab

Expand Down Expand Up @@ -436,64 +440,10 @@ export function now(): number {return Date.now()}

export function nowString(): string {return new Date().toISOString()}

declare global {
interface Array<T> {
contains(element: T): boolean;
clear(): void;
filterAsync(predicate: (value: T, index: number, array: T[]) => Promise<boolean>): Promise<Array<T>>
forEachAsync(callback: (value: T, index: number, array: T[]) => Promise<void>): Promise<void>
}

interface String {
contains(string: string): boolean
}

// TODO: Better way of having delayed task that changes if updated before ran
interface Element {
currentTask: number;

postDelayed(millis: number, func: Function): void;
}
}

export function extensions(): void {
if (!Array.prototype.contains) {
Array.prototype.contains = function <T>(element: T): boolean {
return this.indexOf(element) !== -1
}
}

if (!Array.prototype.clear) {
Array.prototype.clear = function <T>(): void {
this.splice(0, this.length)
}
}

if (!Array.prototype.filterAsync) {
Array.prototype.filterAsync = async function <T>(predicate: (value: T, index: number, array: T[]) => Promise<boolean>): Promise<Array<T>> {
const booleans: Array<boolean> = await Promise.all(this.map((value, index, array) => predicate(value, index, array)))
return this.filter((_value, index) => booleans[index])
}
}

if (!Array.prototype.forEachAsync) {
Array.prototype.forEachAsync = async function <T>(callback: (value: T, index: number, array: T[]) => Promise<void>): Promise<void> {
await Promise.all(this.map((value, index, array) => callback(value, index, array)))
}
}

if (!String.prototype.contains) {
String.prototype.contains = function (string: string) {
return this.indexOf(string) !== -1
}
}

if (typeof Element !== "undefined" && !Element.prototype.postDelayed) {
Element.prototype.postDelayed = function (millis: number, func: Function) {
let localTask = wait(millis, () => {
if (localTask === this.currentTask) func.call(this)
})
this.currentTask = localTask
}
}
export function getAllWudoohFonts(): Array<CustomFont> {
// TODO: See if we can have all fonts fetched from a server (like Github) so that we can add and remove fonts
// without extension updates, this makes the extension size significantly smaller too since we don't have to
// bundle with all the fonts, the only issue is the need for internet, though that should generally be the case
// on a browser no?
return []
}
2 changes: 1 addition & 1 deletion src/custom_fonts.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {
CustomFont,
defaultDelay,
extensions,
get,
injectCustomFonts,
MessageReasons,
Expand All @@ -10,6 +9,7 @@ import {
WudoohKeys,
WudoohStorage
} from "./common"
import {extensions} from "./extensions"

extensions()

Expand Down
63 changes: 63 additions & 0 deletions src/extensions.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import {wait} from "./common"

declare global {
interface Array<T> {
contains(element: T): boolean;
clear(): void;
filterAsync(predicate: (value: T, index: number, array: T[]) => Promise<boolean>): Promise<Array<T>>
forEachAsync(callback: (value: T, index: number, array: T[]) => Promise<void>): Promise<void>
}

interface String {
contains(string: string): boolean
}

// TODO: Better way of having delayed task that changes if updated before ran
interface Element {
currentTask: number;

postDelayed(millis: number, func: Function): void;
}
}

export function extensions(): void {
if (!Array.prototype.contains) {
Array.prototype.contains = function <T>(element: T): boolean {
return this.indexOf(element) !== -1
}
}

if (!Array.prototype.clear) {
Array.prototype.clear = function <T>(): void {
this.splice(0, this.length)
}
}

if (!Array.prototype.filterAsync) {
Array.prototype.filterAsync = async function <T>(predicate: (value: T, index: number, array: T[]) => Promise<boolean>): Promise<Array<T>> {
const booleans: Array<boolean> = await Promise.all(this.map((value, index, array) => predicate(value, index, array)))
return this.filter((_value, index) => booleans[index])
}
}

if (!Array.prototype.forEachAsync) {
Array.prototype.forEachAsync = async function <T>(callback: (value: T, index: number, array: T[]) => Promise<void>): Promise<void> {
await Promise.all(this.map((value, index, array) => callback(value, index, array)))
}
}

if (!String.prototype.contains) {
String.prototype.contains = function (string: string) {
return this.indexOf(string) !== -1
}
}

if (typeof Element !== "undefined" && !Element.prototype.postDelayed) {
Element.prototype.postDelayed = function (millis: number, func: Function) {
let localTask = wait(millis, () => {
if (localTask === this.currentTask) func.call(this)
})
this.currentTask = localTask
}
}
}
3 changes: 2 additions & 1 deletion src/main.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {
arabicRegex, extensions, hasArabicScript,
arabicRegex, hasArabicScript,
injectCustomFonts,
isNodeEditable,
log,
Expand All @@ -10,6 +10,7 @@ import {
runtime
} from "./common"
import {WudoohNodeModificationReason, WudoohPlugin, wudoohPlugins} from "./plugins"
import {extensions} from "./extensions"

extensions()

Expand Down
Loading

0 comments on commit b4b62b3

Please sign in to comment.