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

Focus mode new window #11

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Focus mode new window #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
72ee4e3
Update 1
Irisveil Jan 6, 2024
a36ce37
Update 2
Irisveil Jan 7, 2024
4306ba3
Merge branch 'main' into Focus-mode-new-window
Irisveil Jan 7, 2024
914c29a
Update 3
Irisveil Jan 7, 2024
efed005
Merge branch 'main' into Focus-mode-new-window
Irisveil Jan 7, 2024
b28fec4
Update 4
Irisveil Jan 7, 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
86 changes: 86 additions & 0 deletions src/focusmode/focusmode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
// set up buttons and variables
let themeNight = document.getElementById("night");
let themeDay = document.getElementById("day");
let themeForest = document.getElementById("forest");
let themeRoses = document.getElementById("roses");
let themeOcean = document.getElementById("ocean");
let fonts = document.getElementById("fonts");
let size = document.getElementById("size");
let background = document.getElementById("background");
let paragraph = document.getElementById("paragraph");
let cButton = document.getElementById("cButton");
let themeList = [document.getElementById("par"), document.getElementById("defaultColor"), document.getElementById("indentColor"), document.getElementById("cButton")]
const themeCollection = document.getElementsByClassName("theme");
var nightThemeColor = ["rgb(21, 21, 73)", "rgb(17, 17, 43)", "rgb(196, 196, 196)", "rgb(41, 41, 142)"]
var dayThemeColor = ["rgb(252, 245, 237)", "white", "rgb(0, 0, 0)", "rgb(255, 228, 196)"];
var forestThemeColor = ["rgb(199, 237, 204)", "rgb(207, 243, 214)", "rgb(37, 97, 53)", "rgb(120, 234, 133)"];
var rosesThemeColor = ["rgb(235, 176, 189)", "rgb(249, 212, 225)", "rgb(107, 44, 66)","rgb(216,112,147"];
var oceanThemeColor = ["rgb(200, 226, 255)", "rgb(177, 214, 255)","rgb(21, 21, 103)", "rgb(61, 171, 244)"];

// set up button listeners
themeNight.addEventListener("click", function() {
changeTheme(nightThemeColor);
})

themeDay.addEventListener("click", function() {
changeTheme(dayThemeColor);
})

themeForest.addEventListener("click", function() {
changeTheme(forestThemeColor);
})

themeRoses.addEventListener("click", function() {
changeTheme(rosesThemeColor);
})

themeOcean.addEventListener("click", function() {
changeTheme(oceanThemeColor);
})

cButton.addEventListener("click", function() {
// check for line spacing
paragraph.style.lineHeight = Number(fonts.value);
document.getElementById("par").style.fontSize = size.value.toString() + "px";
})

function changeTheme(theme) {
background.style.backgroundColor = theme[0];
paragraph.style.backgroundColor = theme[1];
for (let i = 0; i < themeCollection.length; i++) {
themeCollection[i].style.color = theme[2];
}
for (let i = 0; i < themeList.length; i++) {
themeList[i].style.color = theme[2];
}
cButton.style.backgroundColor = theme[3];
}

async function fetchAndExtractText(url) {
try {
// Fetch the content of the webpage
const response = await fetch(url);
const html = await response.text();

// Parse the HTML content
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');

// Extract text content
const text = doc.body.textContent || "";

document.getElementById("par").innerText = text;

return text;
} catch (error) {
console.error('Error fetching or parsing:', error);
return null;
}
}

function main() {
const url = 'https://agilemanifesto.org/history.html'; // Replace with your URL
var text = fetchAndExtractText(url);
}

main();
168 changes: 168 additions & 0 deletions src/focusmode/focuswindow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Focus Mode</title>
</head>

<style>
body {
background-color: rgb(252, 245, 237);
}

.layout {
/* display: grid;
grid-template-areas:
'main main main main main main main feature'; */
gap: 10px;
padding: 10px;
display: flex;
}

.paragraphs {
background-color: white;
padding: 20px;
border-radius: 5px;
line-height: 2;
margin: 0 auto;
margin-top: 10px;
margin-left: 10%;
margin-right: 2%;
grid-area: main;
flex:1
}

.features {
grid-area: feature;
padding: 10px;
border-radius: 5px;
margin: 0 auto;
margin-top: 10px;
margin-left: 2%;
margin-right: 2%;
}

.theme {
font-size: 15px;
margin: 5px;
margin-top: 10px;
}

.par {
font-size: 15px;
margin: 5px;
color: black;
}

.general {
font-size: 10px;
padding: 5px;
margin: 5px;
justify-content: left;
background-color: rgb(255, 228, 196);
border-radius: 5px;
border: 0;
}

button:hover {
filter: brightness(75%);
}

button:active {
filter: saturate(120%);
}

.night {
background-color: rgb(25, 25, 112);
padding: 8px;
margin-bottom: 5px;
border: 0cap;
}

.day {
background-color: rgb(255, 254, 211);
padding: 8px;
margin-bottom: 5px;
border: 0cap;
}

.forest {
background-color: rgb(106, 240, 131);
padding: 8px;
margin-bottom: 5px;
border: 0cap;
}

.roses {
background-color: rgb(231, 47, 86);
padding: 8px;
margin-bottom: 5px;
border: 0cap;
}

.ocean {
background-color: rgb(73, 73, 241);
padding: 8px;
margin-bottom: 5px;
border: 0cap;
}

label {
font-size: 15px;
}

.size {
size: 10px;
max-width: 100px;
}

</style>

<body id="background">
<div class="layout">
<!-- main paragraphs -->
<section class="paragraphs" id="paragraph">
<p class="par" id="par">the paragraph</p>
</section>

<!-- features -->
<div class="features">
<!-- themes -->
<p class="theme">Themes</p>
<div class="themes">
<button class="night" id="night"></button>
<button class="day" id="day"></button>
<button class="forest" id="forest"></button>
<button class="roses" id="roses"></button>
<button class="ocean" id="ocean"></button>
</div>

<!-- line spacing -->
<p class="theme">Spacing</p>
<select name="fonts" id="fonts">
<option value="1">Single</option>
<option value="1.15">1.15</option>
<option value="1.5">1.5</option>
<option value="2" selected="selected">Double</option>
</select>

<!-- indentation DOES NOT WORK-->
<!-- <p class="theme">Indentation</p>
<input type="radio" id="default" name="indentation" value="d">
  <label for="default" id="defaultColor">None</label><br>
  <input type="radio" id="indent" name="indentation" value="i">
  <label for="indent" id="indentColor">Indent</label><br> -->

<!-- font size -->
<p class="theme">Font Size</p>
<input class="size" id="size" type="number" value="15">

<br>
<button class="general" id="cButton">Confirm</button>
</div>
</div>
<script src="focusmode.js"></script>
</body>

</html>
15 changes: 2 additions & 13 deletions src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,27 +33,16 @@ export function bionify() {
return defaultRes;
}
}
let testFont = "Consolas";

chrome.storage.sync.get(["algorithm"], (data) => {
var algorithm = parseAlgorithm(data.algorithm);

function createStylesheet() {
chrome.storage.sync.get(["highlightSheet", "restSheet", "font"], function (data) {
console.log(data.font);
chrome.storage.sync.get(["highlightSheet", "restSheet"], function (data) {
var style = document.createElement("style");
style.type = "text/css";
style.id = "bionify-style-id";
style.innerHTML =
`@font-face {
font-family: 'Open Dyslexic';
src: url('https://cdn.jsdelivr.net/npm/[email protected]/ttf/OpenDyslexic3-Regular.ttf') format('woff2'),
url('https://cdn.jsdelivr.net/npm/[email protected]/ttf/OpenDyslexic3-Bold.ttf') format('woff2')
;
font-weight: normal;
font-style: normal;
font-display: swap;
}` +
".bionify-highlight, .bionify-rest { font-family: '" + data.font + "', sans-serif; }" +
".bionify-highlight {" +
data.highlightSheet +
" } .bionify-rest {" +
Expand Down