buggy init :3
This commit is contained in:
PlOszukiwacz
commit
0f96641be1
GPG key ID:
E059F5C88034386C
2179 changed files with 388452 additions and 0 deletions
387
startpage/js/modules/LinksManager.js
Executable file
387
startpage/js/modules/LinksManager.js
Executable file
|
|
@ -0,0 +1,387 @@
|
|||
export class LinksManager {
|
||||
constructor() {
|
||||
this.iconPacks = {
|
||||
'Font Awesome Icons': {
|
||||
prefix: {
|
||||
brands: 'fab fa-',
|
||||
solid: 'fas fa-'
|
||||
},
|
||||
icons: {
|
||||
brands: [
|
||||
'github', 'gitlab', 'reddit', 'twitter', 'youtube', 'spotify', 'discord', 'twitch',
|
||||
'steam', 'linkedin', 'instagram', 'facebook', 'amazon', 'apple', 'google',
|
||||
'pinterest', 'microsoft', 'windows', 'linux', 'chrome', 'firefox', 'opera',
|
||||
'html5', 'css3', 'js', 'npm', 'node', 'react', 'angular',
|
||||
'wordpress', 'sass', 'gulp', 'python', 'java', 'php', 'stack-overflow',
|
||||
'docker', 'android'
|
||||
],
|
||||
solid: [
|
||||
'home', 'link', 'folder', 'file', 'book', 'code', 'film',
|
||||
'envelope', 'star', 'heart', 'user', 'cog', 'search',
|
||||
'lock', 'check', 'times', 'plus', 'minus', 'edit', 'trash',
|
||||
'download', 'upload', 'print', 'camera', 'phone', 'desktop',
|
||||
'wifi', 'moon', 'sun', 'cloud', 'bell', 'bookmark', 'map',
|
||||
'globe', 'eye', 'pen', 'terminal', 'folder-open', 'image'
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
this.customIcons = JSON.parse(localStorage.getItem('customIcons')) || {};
|
||||
this.links = JSON.parse(localStorage.getItem('customLinks')) || this.getDefaultLinks();
|
||||
this.categoriesEditor = document.getElementById('categories-editor');
|
||||
this.init();
|
||||
}
|
||||
|
||||
getDefaultLinks() {
|
||||
return {
|
||||
'Development': [
|
||||
{ name: 'GitHub', url: 'https://github.com', icon: 'fab fa-github' },
|
||||
{ name: 'Stack Overflow', url: 'https://stackoverflow.com', icon: 'fab fa-stack-overflow' },
|
||||
{ name: 'MDN', url: 'https://developer.mozilla.org', icon: 'fas fa-book' }
|
||||
],
|
||||
'Social': [
|
||||
{ name: 'Reddit', url: 'https://www.reddit.com', icon: 'fab fa-reddit' },
|
||||
{ name: 'Twitter', url: 'https://www.twitter.com', icon: 'fab fa-twitter' },
|
||||
{ name: 'LinkedIn', url: 'https://www.linkedin.com', icon: 'fab fa-linkedin' }
|
||||
],
|
||||
'Entertainment': [
|
||||
{ name: 'YouTube', url: 'https://www.youtube.com', icon: 'fab fa-youtube' },
|
||||
{ name: 'Netflix', url: 'https://www.netflix.com', icon: 'fas fa-film' },
|
||||
{ name: 'Spotify', url: 'https://www.spotify.com', icon: 'fab fa-spotify' }
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
init() {
|
||||
this.renderLinks();
|
||||
this.attachEventListeners();
|
||||
}
|
||||
|
||||
renderLinks() {
|
||||
// Render links in settings
|
||||
this.renderLinksEditor();
|
||||
// Render links in main container
|
||||
this.renderLinksContainer();
|
||||
}
|
||||
|
||||
renderLinksEditor() {
|
||||
this.categoriesEditor.innerHTML = Object.entries(this.links)
|
||||
.map(([category, links]) => `
|
||||
<div class="category-item">
|
||||
<h5>${category}</h5>
|
||||
<button class="settings-btn small remove-category" data-category="${category}">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
<div class="category-links">
|
||||
${links.map((link, index) => {
|
||||
const iconHtml = link.icon.startsWith('custom-')
|
||||
? `<img src="${this.customIcons[link.icon.replace('custom-', '')]}" style="width: 16px; height: 16px; vertical-align: middle;">`
|
||||
: `<i class="${link.icon}"></i>`;
|
||||
return `
|
||||
<div class="link-item">
|
||||
<div class="icon-select" data-category="${category}" data-index="${index}">
|
||||
${iconHtml}
|
||||
</div>
|
||||
<input type="text" value="${link.name}" placeholder="Name"
|
||||
data-category="${category}" data-index="${index}" data-field="name">
|
||||
<input type="text" value="${link.url}" placeholder="URL"
|
||||
data-category="${category}" data-index="${index}" data-field="url">
|
||||
<button class="settings-btn small remove-link" data-category="${category}" data-index="${index}">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// Add event listeners
|
||||
this.categoriesEditor.addEventListener('click', (e) => {
|
||||
const target = e.target.closest('[data-category]');
|
||||
if (!target) return;
|
||||
|
||||
if (target.classList.contains('remove-category')) {
|
||||
this.removeCategory(target.dataset.category);
|
||||
} else if (target.classList.contains('remove-link')) {
|
||||
this.removeLink(target.dataset.category, parseInt(target.dataset.index));
|
||||
} else if (target.classList.contains('icon-select')) {
|
||||
this.showIconPicker(target.dataset.category, parseInt(target.dataset.index));
|
||||
}
|
||||
});
|
||||
|
||||
this.categoriesEditor.addEventListener('change', (e) => {
|
||||
const target = e.target;
|
||||
if (target.matches('input[data-field]')) {
|
||||
this.updateLink(
|
||||
target.dataset.category,
|
||||
parseInt(target.dataset.index),
|
||||
target.dataset.field,
|
||||
target.value
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
showIconPicker(category, linkIndex) {
|
||||
const popup = document.createElement('div');
|
||||
popup.className = 'icon-picker-popup';
|
||||
|
||||
const content = document.createElement('div');
|
||||
content.className = 'icon-picker-content';
|
||||
|
||||
const pack = this.iconPacks['Font Awesome Icons'];
|
||||
|
||||
content.innerHTML = `
|
||||
<div class="icon-picker-header">
|
||||
<h3>Icon Picker</h3>
|
||||
<div class="icon-picker-tabs">
|
||||
<button class="active" data-tab="fontawesome">Font Awesome Icons</button>
|
||||
<button data-tab="custom">Custom Icons</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-sections">
|
||||
<div class="icon-section fontawesome-section">
|
||||
${[...pack.icons.brands.map(icon => ({
|
||||
class: pack.prefix.brands + icon,
|
||||
name: 'brands-' + icon
|
||||
})), ...pack.icons.solid.map(icon => ({
|
||||
class: pack.prefix.solid + icon,
|
||||
name: 'solid-' + icon
|
||||
}))].map(icon => `
|
||||
<div class="icon-item" data-icon="${icon.class}">
|
||||
<i class="${icon.class}"></i>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
<div class="icon-section custom-section" style="display: none;">
|
||||
<div class="custom-icons-grid">
|
||||
${Object.entries(this.customIcons).map(([name, url]) => `
|
||||
<div class="custom-icon-item" data-name="${name}">
|
||||
<img src="${url}" class="custom-icon" title="${name}">
|
||||
<button class="delete-icon" data-name="${name}">×</button>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
<input type="file" id="customIconUpload" accept="image/*" style="display: none;">
|
||||
<button class="settings-btn upload-icon-btn">Upload Custom Icon</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Event listeners for icons
|
||||
content.querySelectorAll('.icon-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
if (item.dataset.icon) {
|
||||
this.setIcon(category, linkIndex, item.dataset.icon);
|
||||
} else if (item.dataset.name && item.dataset.url) {
|
||||
this.setCustomIcon(category, linkIndex, item.dataset.name, item.dataset.url);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add delete icon handler
|
||||
content.querySelectorAll('.delete-icon').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const name = btn.dataset.name;
|
||||
if (confirm(`Delete custom icon "${name}"?`)) {
|
||||
delete this.customIcons[name];
|
||||
localStorage.setItem('customIcons', JSON.stringify(this.customIcons));
|
||||
this.showIconPicker(category, linkIndex);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update custom icon click handler
|
||||
content.querySelectorAll('.custom-icon-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
const name = item.dataset.name;
|
||||
if (name && this.customIcons[name]) {
|
||||
this.setCustomIcon(category, linkIndex, name, this.customIcons[name]);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Upload button handler
|
||||
const uploadBtn = content.querySelector('.upload-icon-btn');
|
||||
const fileInput = content.querySelector('#customIconUpload');
|
||||
uploadBtn?.addEventListener('click', () => fileInput.click());
|
||||
|
||||
// File input handler
|
||||
fileInput?.addEventListener('change', (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const name = file.name.replace(/\.[^/.]+$/, "");
|
||||
this.customIcons[name] = e.target.result;
|
||||
localStorage.setItem('customIcons', JSON.stringify(this.customIcons));
|
||||
this.showIconPicker(category, linkIndex);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
// Tab switching
|
||||
content.querySelectorAll('.icon-picker-tabs button').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
content.querySelectorAll('.icon-picker-tabs button').forEach(b => b.classList.remove('active'));
|
||||
button.classList.add('active');
|
||||
|
||||
const tab = button.dataset.tab;
|
||||
content.querySelectorAll('.icon-section').forEach(section => {
|
||||
section.style.display = section.classList.contains(`${tab}-section`) ? 'grid' : 'none';
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
popup.appendChild(content);
|
||||
document.body.appendChild(popup);
|
||||
|
||||
popup.addEventListener('click', (e) => {
|
||||
if (e.target === popup) popup.remove();
|
||||
});
|
||||
}
|
||||
|
||||
renderIconPackContent(packName) {
|
||||
const pack = this.iconPacks[packName];
|
||||
return Object.entries(pack.icons).map(([type, icons]) => `
|
||||
<div class="${type}-icons icon-grid">
|
||||
${icons.map(icon =>
|
||||
`<i class="${pack.prefix[type]}${icon}" title="${icon}"
|
||||
data-icon="${pack.prefix[type]}${icon}"></i>`
|
||||
).join('')}
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
setCustomIcon(category, index, name, url) {
|
||||
if (this.customIcons[name]) {
|
||||
this.updateLink(category, index, 'icon', `custom-${name}`);
|
||||
// Remove iconUrl since we're storing it in customIcons
|
||||
const link = this.links[category][index];
|
||||
delete link.iconUrl;
|
||||
this.save();
|
||||
document.querySelector('.icon-picker-popup').remove();
|
||||
}
|
||||
}
|
||||
|
||||
setIcon(category, index, icon) {
|
||||
this.updateLink(category, index, 'icon', icon);
|
||||
document.querySelector('.icon-picker-popup').remove();
|
||||
}
|
||||
|
||||
renderLinksContainer() {
|
||||
const container = document.querySelector('.links-container');
|
||||
container.innerHTML = Object.entries(this.links)
|
||||
.map(([category, links]) => `
|
||||
<div class="category">
|
||||
<h2>${category}</h2>
|
||||
<ul>
|
||||
${links.map(link => {
|
||||
if (link.icon.startsWith('custom-')) {
|
||||
const iconData = this.customIcons[link.icon.replace('custom-', '')];
|
||||
if (!iconData) return `<li><a href="${link.url}"><i class="fas fa-link"></i> ${link.name}</a></li>`;
|
||||
return `<li><a href="${link.url}"><img src="${iconData}" style="width: 1em; height: 1em; vertical-align: middle;"> ${link.name}</a></li>`;
|
||||
}
|
||||
return `<li><a href="${link.url}"><i class="${link.icon}"></i> ${link.name}</a></li>`;
|
||||
}).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
attachEventListeners() {
|
||||
document.getElementById('addCategory').addEventListener('click', () => {
|
||||
const name = prompt('Enter category name:');
|
||||
if (name) this.addCategory(name);
|
||||
});
|
||||
|
||||
document.getElementById('addLink').addEventListener('click', () => {
|
||||
const category = prompt('Enter category:');
|
||||
if (category && this.links[category]) {
|
||||
this.addLink(category, {
|
||||
name: 'New Link',
|
||||
url: 'https://',
|
||||
icon: 'fas fa-link'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('exportLinks').addEventListener('click', () => this.export());
|
||||
|
||||
document.getElementById('importLinksBtn').addEventListener('click', () => {
|
||||
document.getElementById('importLinks').click();
|
||||
});
|
||||
|
||||
document.getElementById('importLinks').addEventListener('change', (e) => {
|
||||
if (e.target.files[0]) this.import(e.target.files[0]);
|
||||
});
|
||||
}
|
||||
|
||||
addCategory(name) {
|
||||
if (!this.links[name]) {
|
||||
this.links[name] = [];
|
||||
this.save();
|
||||
this.renderLinks();
|
||||
}
|
||||
}
|
||||
|
||||
addLink(category, link) {
|
||||
this.links[category].push(link);
|
||||
this.save();
|
||||
this.renderLinks();
|
||||
}
|
||||
|
||||
updateLink(category, index, field, value) {
|
||||
if (this.links[category] && this.links[category][index]) {
|
||||
this.links[category][index][field] = value;
|
||||
this.save();
|
||||
this.renderLinks();
|
||||
}
|
||||
}
|
||||
|
||||
removeLink(category, index) {
|
||||
if (this.links[category]) {
|
||||
this.links[category].splice(index, 1);
|
||||
this.save();
|
||||
this.renderLinks();
|
||||
}
|
||||
}
|
||||
|
||||
removeCategory(category) {
|
||||
if (confirm(`Are you sure you want to delete the category "${category}" and all its links?`)) {
|
||||
delete this.links[category];
|
||||
this.save();
|
||||
this.renderLinks();
|
||||
}
|
||||
}
|
||||
|
||||
save() {
|
||||
localStorage.setItem('customLinks', JSON.stringify(this.links));
|
||||
}
|
||||
|
||||
export() {
|
||||
const blob = new Blob([JSON.stringify(this.links, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'links-config.json';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
async import(file) {
|
||||
try {
|
||||
const text = await file.text();
|
||||
this.links = JSON.parse(text);
|
||||
this.save();
|
||||
this.renderLinks();
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Failed to import links:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue