Skip to content

Commit 2c60452

Browse files
devsai9devsai9
committed
Added German & Added Icons for light and dark mode (options page)
1 parent 210b4cc commit 2c60452

6 files changed

Lines changed: 194 additions & 9 deletions

File tree

‎options/options.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,12 @@
1010

1111
.options-container {
1212
text-align: center;
13+
}
14+
15+
.bi-brightness-high-fill {
16+
font-size: 23px;
17+
}
18+
19+
.bi-moon-fill {
20+
font-size: 20px
1321
}

‎options/options.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Multi-Lingual Input Tools - Options</title>
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
89
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
910
<link href="options.css" rel="stylesheet">
1011
<link href="../main-styles.css" rel="stylesheet">
@@ -21,15 +22,15 @@
2122
-->
2223
<div class="options-container">
2324
<div class="title">
24-
<h1>Type Spanish and French</h1>
25+
<h1>Multi-Lingual Input Tools</h1>
2526
</div>
2627
<div class="options">
2728
<div class="color-mode">
2829
<h2>Color Mode</h3>
2930

3031
<div class="color-mode-buttons">
3132
<input type="checkbox" id="color-mode-checkbox" class="btn-check" name="color-mode-checkbox" value="color-mode-button">
32-
<label for="color-mode-checkbox" id="color-mode-label" class="btn btn-outline-primary mb-2">Dark Mode</label>
33+
<label for="color-mode-checkbox" id="color-mode-label" class="btn btn-outline-primary mb-2" title="Dark Mode"><i id="mode-icon" class=""></i></label>&nbsp;&nbsp;
3334
</div>
3435
</div>
3536
<br>
@@ -38,10 +39,13 @@ <h2>Language</h2>
3839

3940
<div class="language-options">
4041
<input type="radio" class="btn-check" name="language" id="spanish" autocomplete="off">
41-
<label class="btn btn-outline-primary" for="spanish" id="spanish-label">Spanish</label>
42+
<label class="btn btn-outline-primary" for="spanish" id="spanish-label">Spanish 🇪🇸</label>
4243

4344
<input type="radio" class="btn-check" name="language" id="french" autocomplete="off">
44-
<label class="btn btn-outline-primary" for="french" id="french-label">French</label>
45+
<label class="btn btn-outline-primary" for="french" id="french-label">French 🇫🇷</label>
46+
47+
<input type="radio" class="btn-check" name="language" id="german" autocomplete="off">
48+
<label class="btn btn-outline-primary" for="german" id="german-label">German 🇩🇪</label>
4549
</div>
4650
</div>
4751
</div>

‎options/options.js‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,15 @@ function getChromeVars() {
2828
function actColorMode(colorModeRestored) {
2929
if (colorModeRestored == "light") {
3030
document.getElementById("color-mode-checkbox").checked = false;
31-
document.getElementById("color-mode-label").innerText = "Light Mode";
31+
document.getElementById("mode-icon").classList.add("bi");
32+
document.getElementById("mode-icon").classList.add("bi-brightness-high-fill");
33+
//document.getElementById("color-mode-label").innerText = "Light Mode";
3234
document.getElementsByTagName("body")[0].setAttribute('data-theme', 'light');
3335
} else if (colorModeRestored == "dark") {
3436
document.getElementById("color-mode-checkbox").checked = true;
35-
document.getElementById("color-mode-label").innerText = "Dark Mode";
37+
document.getElementById("mode-icon").classList.add("bi");
38+
document.getElementById("mode-icon").classList.add("bi-moon-fill");
39+
//document.getElementById("color-mode-label").innerText = "Dark Mode";
3640
document.getElementsByTagName("body")[0].setAttribute('data-theme', 'dark');
3741
}
3842
}
@@ -43,6 +47,8 @@ function actLanguage(languageRestored) {
4347
document.getElementById('spanish').checked = true;
4448
} else if (languageRestored == 'french') {
4549
document.getElementById('french').checked = true;
50+
} else if (languageRestored == 'german') {
51+
document.getElementById('german').checked = true;
4652
}
4753
}
4854

@@ -85,6 +91,13 @@ function setLanguage() {
8591
}, function () {
8692
setTimeout(function() {document.getElementById("french-label").innerText = "French";}, 1000);
8793
});
94+
} else if (document.getElementById("german").checked == true) {
95+
document.getElementById("german-label").innerText = "Syncing...";
96+
chrome.storage.sync.set({
97+
language: 'german'
98+
}, function () {
99+
setTimeout(function() {document.getElementById("german-label").innerText = "German";}, 1000);
100+
});
88101
}
89102
}
90103

@@ -99,4 +112,7 @@ document.getElementById("spanish").onchange = function() {
99112
}
100113
document.getElementById("french").onchange = function() {
101114
setLanguage();
115+
}
116+
document.getElementById("german").onchange = function() {
117+
setLanguage();
102118
}

‎popup/language/german.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/* THIS SCRIPT IS PART OF THE MULTI-LINGUAL INPUT TOOLS BROWSER EXTENSION
2+
JAVASCRIPT FOR GERMAN INPUT TOOLS
3+
--------------------------------------------------------------
4+
Chrome: https://chrome.google.com/webstore/detail/multi-lingual-input-tools/dkbgodmmblfcnfledmedmepimmpebnjo?hl=en
5+
Microsoft Edge: https://microsoftedge.microsoft.com/addons/detail/multilingual-input-tools/aoehggnalolhonphifnooepocfjpghfl
6+
--------------------------------------------------------------
7+
Path: popup/language/german.js
8+
--------------------------------------------------------------
9+
*/
10+
11+
/* Defining Variables */
12+
// Elements on page
13+
var uppercaseCheckbox = document.getElementById('german-uppercase');
14+
var uppercase = document.getElementById('german-uppercase').checked;
15+
var accent_a_doubledot = document.getElementById('german-accent-a-doubledot');
16+
var accent_o_doubledot = document.getElementById('german-accent-o-doubledot');
17+
var accent_u_doubledot = document.getElementById('german-accent-u-doubledot');
18+
var beta = document.getElementById('german-beta');
19+
20+
// All Accented Non-English Keyboard Letters (From German)
21+
accentedLetters = {
22+
a_doubledot: "ä",
23+
A_DOUBLEDOT: "Ä",
24+
o_doubledot: "ö",
25+
O_DOUBLEDOT: "Ö",
26+
u_doubledot: "ü",
27+
U_DOUBLEDOT: "Ü",
28+
beta: "ß",
29+
BETA: "ẞ"
30+
}
31+
32+
/* Extension Core Function (German) */
33+
// Change Text of Buttons
34+
function changeButtonTextCase() {
35+
uppercase = uppercaseCheckbox.checked;
36+
if (!uppercase) {
37+
accent_a_doubledot.textContent = accentedLetters.a_doubledot;
38+
accent_o_doubledot.textContent = accentedLetters.o_doubledot;
39+
accent_u_doubledot.textContent = accentedLetters.u_doubledot;
40+
beta.textContent = accentedLetters.beta;
41+
} else if (uppercase) {
42+
accent_a_doubledot.textContent = accentedLetters.A_DOUBLEDOT;
43+
accent_o_doubledot.textContent = accentedLetters.O_DOUBLEDOT;
44+
accent_u_doubledot.textContent = accentedLetters.U_DOUBLEDOT;
45+
beta.textContent = accentedLetters.BETA;
46+
}
47+
}
48+
49+
// On Click Listeners
50+
accent_a_doubledot.onclick = function() {
51+
if (!uppercase) {
52+
navigator.clipboard.writeText(accentedLetters.a_doubledot).then(function() {
53+
accent_a_doubledot.textContent = "Copied";
54+
setTimeout(function() {
55+
accent_a_doubledot.textContent = accentedLetters.a_doubledot;
56+
}, 1000);
57+
});
58+
} else if (uppercase) {
59+
navigator.clipboard.writeText(accentedLetters.A_DOUBLEDOT).then(function() {
60+
accent_a_doubledot.textContent = "Copied";
61+
setTimeout(function() {
62+
accent_a_doubledot.textContent = accentedLetters.A_DOUBLEDOT;
63+
}, 1000);
64+
});
65+
}
66+
}
67+
accent_o_doubledot.onclick = function() {
68+
if (!uppercase) {
69+
navigator.clipboard.writeText(accentedLetters.o_doubledot).then(function() {
70+
accent_o_doubledot.textContent = "Copied";
71+
setTimeout(function() {
72+
accent_o_doubledot.textContent = accentedLetters.o_doubledot;
73+
}, 1000);
74+
});
75+
} else if (uppercase) {
76+
navigator.clipboard.writeText(accentedLetters.O_DOUBLEDOT).then(function() {
77+
accent_o_doubledot.textContent = "Copied";
78+
setTimeout(function() {
79+
accent_o_doubledot.textContent = accentedLetters.O_DOUBLEDOT;
80+
}, 1000);
81+
});
82+
}
83+
}
84+
accent_u_doubledot.onclick = function() {
85+
if (!uppercase) {
86+
navigator.clipboard.writeText(accentedLetters.u_doubledot).then(function() {
87+
accent_u_doubledot.textContent = "Copied";
88+
setTimeout(function() {
89+
accent_u_doubledot.textContent = accentedLetters.u_doubledot;
90+
}, 1000);
91+
});
92+
} else if (uppercase) {
93+
navigator.clipboard.writeText(accentedLetters.U_DOUBLEDOT).then(function() {
94+
accent_u_doubledot.textContent = "Copied";
95+
setTimeout(function() {
96+
accent_u_doubledot.textContent = accentedLetters.U_DOUBLEDOT;
97+
}, 1000);
98+
});
99+
}
100+
}
101+
beta.onclick = function() {
102+
if (!uppercase) {
103+
navigator.clipboard.writeText(accentedLetters.beta).then(function() {
104+
beta.textContent = "Copied";
105+
setTimeout(function() {
106+
beta.textContent = accentedLetters.beta;
107+
}, 1000);
108+
});
109+
} else if (uppercase) {
110+
navigator.clipboard.writeText(accentedLetters.BETA).then(function() {
111+
beta.textContent = "Copied";
112+
setTimeout(function() {
113+
beta.textContent = accentedLetters.BETA;
114+
}, 1000);
115+
});
116+
}
117+
}
118+
119+
// On Change Listener for when the user wants lowercase or uppercase letters
120+
uppercaseCheckbox.onchange = function() {
121+
changeButtonTextCase();
122+
}
123+
124+
// Using Shift to toggle lowercase and uppercase
125+
document.addEventListener("keydown", function (event) {
126+
if (event.key == "Shift") {
127+
if (!uppercase) {
128+
uppercaseCheckbox.checked = true;
129+
} else if (uppercase) {
130+
uppercaseCheckbox.checked = false;
131+
}
132+
changeButtonTextCase();
133+
}
134+
});

‎popup/popup.html‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313

1414
<body>
1515
<div class="menu-icons">
16-
<i class="bi bi-person-badge" id="about-icon"></i>&nbsp;
17-
<i class="bi bi-keyboard" id="controls-icon"></i>&nbsp;
18-
<i class="bi bi-gear-fill" id="settings-icon"></i>
16+
<i class="bi bi-globe2" id="about-icon" title="About the Developer"></i>&nbsp;
17+
<i class="bi bi-keyboard" id="controls-icon" title="Extension Controls"></i>&nbsp;
18+
<i class="bi bi-gear-fill" id="settings-icon" title="Extension Settings"></i>
1919
</div>
2020
<br>
2121
<div class="custom-container" id="language-select-prompt">
@@ -75,6 +75,23 @@ <h2>Type French</h2>
7575
</div>
7676
<br>
7777
</div>
78+
<div class="custom-container" id="german-container">
79+
<div class="title">
80+
<h1>Multi-Lingual Input Tools</h1>
81+
</div>
82+
<div class="subtitle">
83+
<h2>Type German</h2>
84+
</div>
85+
<div class="input-buttons">
86+
<input type="checkbox" id="german-uppercase" class="btn-check" name="german-uppercase-letters" value=" uppercase" autofocus>
87+
<label for="german-uppercase" id="german-uppercase-label" class="btn btn-outline-primary mb-3 mt-1"> uppercase</label><br>
88+
<button id="german-accent-a-doubledot" class="input-button btn btn-light">ä</button>
89+
<button id="german-accent-o-doubledot" class="input-button btn btn-light">ö</button>
90+
<button id="german-accent-u-doubledot" class="input-button btn btn-light">ü</button>
91+
<button id="german-beta" class="input-button btn btn-light">ß</button>
92+
</div>
93+
<br>
94+
</div>
7895
<div id="scripts">
7996
<script src="popup.js"></script>
8097
</div>

‎popup/popup.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
// Hide Containers
1212
document.getElementById('spanish-container').style.display = "none";
1313
document.getElementById('french-container').style.display = "none";
14+
document.getElementById('german-container').style.display = "none";
1415
document.getElementById('language-select-prompt').style.display = "none";
1516

1617
// Chrome-Synced Variables
@@ -57,6 +58,11 @@ function useRestoredLanguage(languageRestored) {
5758
frenchScript.src = 'language/french.js';
5859
document.getElementById('scripts').appendChild(frenchScript);
5960
document.getElementById('french-container').style.display = "block";
61+
} else if (languageRestored == 'german') {
62+
var germanScript = document.createElement('script');
63+
germanScript.src = 'language/german.js';
64+
document.getElementById('scripts').appendChild(germanScript);
65+
document.getElementById('german-container').style.display = "block";
6066
}
6167
}
6268

0 commit comments

Comments
 (0)