Skip to content

Commit

Permalink
Local file upload support added.
Browse files Browse the repository at this point in the history
  • Loading branch information
@StyingDev
StyingDev committed Nov 9, 2024
1 parent 0900b08 commit 79a52ef
Show file tree
Hide file tree
Showing 4 changed files with 192 additions and 55 deletions.
216 changes: 167 additions & 49 deletions Scripts/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ document.addEventListener("DOMContentLoaded", function() {
// New elements for weather functionality
const toggleWeatherCheckbox = document.getElementById("toggle-weather"); // Checkbox for toggling weather
const weatherWidget = document.getElementById("weather-widget"); // Weather widget element

// File upload element
const fileUploadButton = document.getElementById("file-upload");



// Variables to track changes
let newBackground = '';
Expand Down Expand Up @@ -123,67 +128,72 @@ document.addEventListener("DOMContentLoaded", function() {

// Only apply changes after pressing the save button
saveButton.addEventListener("click", () => {
// Get values from inputs
newBackground = backgroundInput.value.trim();
newGreeting = document.getElementById("greeting").value.trim();
newSearchEngine = searchEngineSelect.value;
newSearchVisible = toggleSearchCheckbox.checked;
newQuickLinksVisible = toggleQuickLinksCheckbox.checked;
newTimeVisible = toggleTimeCheckbox.checked;
newTimeFormat = timeFormatSelect.value;
newWeatherVisible = toggleWeatherCheckbox.checked;

// Apply background settings
if (newBackground === "") {
removeBackground();
document.body.classList.add("gradient-active");
localStorage.removeItem("background");
} else {
localStorage.setItem("background", newBackground);
setBackground(newBackground);
document.body.classList.remove("gradient-active");
}
try {
// Get values from inputs
newBackground = backgroundInput.value.trim();
newGreeting = document.getElementById("greeting").value.trim();
newSearchEngine = searchEngineSelect.value;
newSearchVisible = toggleSearchCheckbox.checked;
newQuickLinksVisible = toggleQuickLinksCheckbox.checked;
newTimeVisible = toggleTimeCheckbox.checked;
newTimeFormat = timeFormatSelect.value;
newWeatherVisible = toggleWeatherCheckbox.checked;

// Apply greeting settings
if (newGreeting === "") {
greetingElement.textContent = "Hello!"; // Default greeting
localStorage.setItem("greeting", "Hello!");
} else {
greetingElement.textContent = newGreeting;
localStorage.setItem("greeting", newGreeting);
}
// Apply background settings
if (newBackground === "") {
removeBackground();
document.body.classList.add("gradient-active");
localStorage.removeItem("background");
} else {
try {
localStorage.setItem("background", newBackground);
setBackground(newBackground);
document.body.classList.remove("gradient-active");
} catch (error) {
console.error('Error saving background:', error);
alert('Error saving background. Please try again.');
}
}

// Apply visibility settings
searchBox.style.display = newSearchVisible ? 'block' : 'none';
quickLinksDiv.style.display = newQuickLinksVisible ? 'block' : 'none';
clockElement.style.display = newTimeVisible ? 'block' : 'none';
// Apply greeting settings
if (newGreeting === "") {
greetingElement.textContent = "Hello!"; // Default greeting
localStorage.setItem("greeting", "Hello!");
} else {
greetingElement.textContent = newGreeting;
localStorage.setItem("greeting", newGreeting);
}

// Set weather visibility based on newWeatherVisible
weatherWidget.style.display = newWeatherVisible ? 'block' : 'none';
localStorage.setItem("weatherVisible", newWeatherVisible);
// Apply visibility settings
searchBox.style.display = newSearchVisible ? 'block' : 'none';
quickLinksDiv.style.display = newQuickLinksVisible ? 'block' : 'none';
clockElement.style.display = newTimeVisible ? 'block' : 'none';

// Save settings to localStorage
localStorage.setItem("searchEngine", newSearchEngine);
localStorage.setItem("searchBarVisible", newSearchVisible);
localStorage.setItem("quickLinksVisible", newQuickLinksVisible);
localStorage.setItem("timeVisible", newTimeVisible);
localStorage.setItem("timeFormat", newTimeFormat);
// Set weather visibility based on newWeatherVisible
weatherWidget.style.display = newWeatherVisible ? 'block' : 'none';
localStorage.setItem("weatherVisible", newWeatherVisible);

// Update search form action
searchForm.action = newSearchEngine;
localStorage.setItem("searchEngine", newSearchEngine);
localStorage.setItem("searchBarVisible", newSearchVisible);
localStorage.setItem("quickLinksVisible", newQuickLinksVisible);
localStorage.setItem("timeVisible", newTimeVisible);
localStorage.setItem("timeFormat", newTimeFormat);

// Call updateClock to reflect the new format immediately
updateClock();
searchForm.action = newSearchEngine;

// Close settings sidebar after saving
closeSidebar();
updateClock();

closeSidebar();
} catch (error) {
console.error('Error in save button handler:', error);
alert('Error saving settings. Please try again.');
}
});

// Add these new functions
function setBackground(url) {
removeBackground();

if (url.toLowerCase().endsWith('.mp4')) {
if (url.toLowerCase().endsWith('.mp4') || url.includes('data:video/mp4')) {
const video = document.createElement('video');
video.id = 'background-video';
video.autoplay = true;
Expand Down Expand Up @@ -217,4 +227,112 @@ document.addEventListener("DOMContentLoaded", function() {
}
document.body.style.backgroundImage = '';
}


function processFile(file) {
if (!file.type.startsWith('image/') && file.type !== 'video/mp4') {
alert('Only image and MP4 video files are supported');
return;
}

const reader = new FileReader();
reader.onload = (e) => {
try {
const dataUrl = e.target.result;
if (backgroundInput) {
backgroundInput.value = dataUrl;
document.body.classList.remove("gradient-active");
setBackground(dataUrl);
} else {
console.error('Background input element not found');
}
} catch (error) {
console.error('Error processing file:', error);
alert('Error processing file. Please try another file.');
}
};

reader.onerror = () => {
console.error('Error reading file');
alert('Error reading file. Please try again.');
};

try {
reader.readAsDataURL(file);
} catch (error) {
console.error('Error initiating file read:', error);
alert('Error reading file. Please try again.');
}
}

fileUploadButton.addEventListener("click", (e) => {
e.preventDefault();
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*,video/mp4";

input.onchange = async (e) => {
const file = e.target.files[0];
if (file) {
processFile(file);
}
};

input.click();
});

let dragCounter = 0;

document.addEventListener("dragenter", (e) => {
e.preventDefault();
dragCounter++;
document.body.classList.add('drag-over');
});

document.addEventListener("dragleave", (e) => {
e.preventDefault();
dragCounter--;
if (dragCounter === 0) {
document.body.classList.remove('drag-over');
}
});

document.addEventListener("dragover", (e) => {
e.preventDefault();
});

document.addEventListener("drop", (e) => {
e.preventDefault();
dragCounter = 0;
document.body.classList.remove('drag-over');

const file = e.dataTransfer.files[0];
if (file) {
processFile(file);
}
});

saveButton.addEventListener("click", () => {
try {
const newBackground = backgroundInput?.value?.trim() ?? '';

if (newBackground === "") {
removeBackground();
document.body.classList.add("gradient-active");
localStorage.removeItem("background");
} else {
try {
localStorage.setItem("background", newBackground);
setBackground(newBackground);
document.body.classList.remove("gradient-active");
} catch (error) {
console.error('Error saving background:', error);
alert('Error saving background. Please try again.');
}
}
} catch (error) {
console.error('Error in save button handler:', error);
alert('Error saving settings. Please try again.');
}
});
});
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "StyTab",
"version": "1.1.7",
"version": "1.1.8",
"description": "Stytab - A minimalist Startpage that meets your needs.",
"chrome_url_overrides": {
"newtab": "startpage.html"
Expand Down
12 changes: 10 additions & 2 deletions startpage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,15 @@ <h2>Settings</h2>
<input type="text" id="greeting" placeholder="Hello!">


<label for="background">Background Image URL:</label>
<label for="background" title="Supported formats: Images (.jpg, .png, .gif, etc) and MP4 videos">Background Image URL:</label>
<input type="text" id="background" placeholder="Background URL">

<div class="or-divider">
<span>OR</span>
</div>

<button class="file-upload" id="file-upload">Upload or Drag and Drop</button>


<label for="text-color">Custom Text Color (Hex):</label>
<input type="text" id="text-color" placeholder="#FFFFFF">
Expand Down Expand Up @@ -116,6 +123,7 @@ <h2>Settings</h2>
<option value="24">24-hour</option>
</select>


<h2>Display Settings</h2>


Expand Down Expand Up @@ -152,7 +160,7 @@ <h2>Display Settings</h2>
<span class="slider"></span>
</label>
</div>
<button id="save-settings">Save</button>
<button class="save-settings" id="save-settings">Save</button>
</div>


Expand Down
17 changes: 14 additions & 3 deletions styles/settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
color: white;
}

.settings-sidebar button {
.settings-sidebar .save-settings, .settings-sidebar .file-upload {
font-size: 15px;
padding: 10px;
background-color: #00b894;
Expand All @@ -94,10 +94,12 @@
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
margin-bottom: 30px;
}

.settings-sidebar button:hover {
.settings-sidebar .save-settings {
margin-bottom: 30px;
}
.settings-sidebar .save-settings:hover, .settings-sidebar .file-upload:hover {
background-color: #009874;
}

Expand Down Expand Up @@ -161,3 +163,12 @@ input:checked + .slider {
input:checked + .slider:before {
transform: translateX(98px);
}

.settings-sidebar .or-divider {
text-align: center;
margin-bottom: 10px;
}

.settings-sidebar .or-divider span {
color: #888;
}

0 comments on commit 79a52ef

Please sign in to comment.