Redesign
This commit is contained in:
parent
60149f73e2
commit
7f3425b386
@ -3,305 +3,529 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CodeShare - Modern Pastebin</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
|
||||
<title>PasteBoard - Simple Code Sharing</title>
|
||||
<!-- Highlight.js for syntax highlighting -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<!-- Load common languages -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/javascript.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/css.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/xml.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
/* Light theme variables */
|
||||
--bg-color: #f8f9fa;
|
||||
--text-color: #212529;
|
||||
--editor-bg: #ffffff;
|
||||
--line-number-bg: #f1f3f5;
|
||||
--line-number-color: #868e96;
|
||||
--header-bg: #ffffff;
|
||||
--border-color: #dee2e6;
|
||||
--btn-bg: #e9ecef;
|
||||
--btn-hover: #ced4da;
|
||||
--accent-color: #228be6;
|
||||
--notification-bg: #d3f9d8;
|
||||
--notification-text: #2b8a3e;
|
||||
--editor-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
<!-- Font Awesome for icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
[data-theme='dark'] {
|
||||
/* Dark theme variables */
|
||||
--bg-color: #212529;
|
||||
--text-color: #f8f9fa;
|
||||
--editor-bg: #343a40;
|
||||
--line-number-bg: #2b3035;
|
||||
--line-number-color: #adb5bd;
|
||||
--header-bg: #343a40;
|
||||
--border-color: #495057;
|
||||
--btn-bg: #495057;
|
||||
--btn-hover: #6c757d;
|
||||
--accent-color: #74c0fc;
|
||||
--notification-bg: #0b7285;
|
||||
--notification-text: #e3fafc;
|
||||
--editor-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap">
|
||||
<link rel="stylesheet" href="/index.css">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--header-bg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
background-color: var(--btn-bg);
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background-color: var(--btn-hover);
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background-color: var(--btn-bg);
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
display: flex;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--editor-shadow);
|
||||
background-color: var(--editor-bg);
|
||||
height: calc(100vh - 200px);
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.line-numbers {
|
||||
background-color: var(--line-number-bg);
|
||||
color: var(--line-number-color);
|
||||
padding: 1rem 0.5rem;
|
||||
text-align: right;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 0.9rem;
|
||||
min-width: 3.5rem;
|
||||
user-select: none;
|
||||
overflow-y: hidden;
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.line-numbers div {
|
||||
padding: 0 0.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
#editor, #viewer {
|
||||
flex-grow: 1;
|
||||
padding: 1rem;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 0.9rem;
|
||||
background-color: var(--editor-bg);
|
||||
color: var(--text-color);
|
||||
border: none;
|
||||
resize: none;
|
||||
outline: none;
|
||||
white-space: pre;
|
||||
overflow-y: auto;
|
||||
tab-size: 4;
|
||||
line-height: 1.5rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#viewer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.viewer-active #editor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.viewer-active #viewer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 0.75rem 1.25rem;
|
||||
background-color: var(--notification-bg);
|
||||
color: var(--notification-text);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.notification.show {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
margin-top: 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--line-number-color);
|
||||
}
|
||||
|
||||
.language-selector {
|
||||
padding: 0.5rem;
|
||||
background-color: var(--btn-bg);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* For mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
height: calc(100vh - 260px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="light">
|
||||
<body>
|
||||
<header>
|
||||
<div class="container header-content">
|
||||
<div class="logo">
|
||||
<i class="fas fa-code"></i>
|
||||
<span>CodeShare</span>
|
||||
</div>
|
||||
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
<div class="editor-container">
|
||||
<div class="editor-header">
|
||||
<h2 id="pageTitle">Create New Paste</h2>
|
||||
<div id="viewControls" style="display:none;">
|
||||
<button class="btn btn-secondary" id="newPasteBtn">
|
||||
<i class="fas fa-plus"></i> New Paste
|
||||
<div class="container">
|
||||
<div class="header-content">
|
||||
<div class="logo">PasteBoard</div>
|
||||
<div class="controls">
|
||||
<select class="language-selector" id="language-selector">
|
||||
<option value="plaintext">Plain Text</option>
|
||||
<option value="javascript" selected>JavaScript</option>
|
||||
<option value="html">HTML</option>
|
||||
<option value="css">CSS</option>
|
||||
<option value="python">Python</option>
|
||||
<option value="java">Java</option>
|
||||
<option value="csharp">C#</option>
|
||||
<option value="php">PHP</option>
|
||||
<option value="ruby">Ruby</option>
|
||||
<option value="go">Go</option>
|
||||
<option value="rust">Rust</option>
|
||||
<option value="swift">Swift</option>
|
||||
<option value="kotlin">Kotlin</option>
|
||||
</select>
|
||||
<button class="control-btn" id="save-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
|
||||
Save
|
||||
</button>
|
||||
<button class="control-btn" id="copy-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
||||
Copy
|
||||
</button>
|
||||
<button class="control-btn" id="new-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
|
||||
New
|
||||
</button>
|
||||
<button class="theme-toggle" id="theme-toggle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="moon-icon" style="display: none;"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-wrapper">
|
||||
<div class="line-numbers" id="lineNumbers"></div>
|
||||
<div class="editor-area">
|
||||
<textarea id="editor" placeholder="Paste or type your code here..."></textarea>
|
||||
<div class="viewer-area code-viewer" id="codeViewer">
|
||||
<pre><code id="highlightedCode"></code></pre>
|
||||
</div>
|
||||
<div class="loading-overlay" id="loadingOverlay">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons" id="actionButtons">
|
||||
<button class="btn btn-primary" id="saveBtn">
|
||||
<i class="fas fa-save"></i> Save Paste
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="url-container" id="urlContainer">
|
||||
<div class="url-display" id="urlDisplay"></div>
|
||||
<button class="copy-btn" id="copyBtn">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</header>
|
||||
|
||||
<div class="toast" id="toast">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<span id="toastMessage"></span>
|
||||
<div class="container">
|
||||
<div class="editor-container">
|
||||
<div class="line-numbers" id="line-numbers">
|
||||
<div>1</div>
|
||||
</div>
|
||||
<textarea id="editor" spellcheck="false" placeholder="Paste or type your code here..."></textarea>
|
||||
<pre><code id="viewer" class="language-javascript"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="notification" id="notification"></div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2025 CodeShare. A modern pastebin application.</p>
|
||||
<p>Pastes will be stored for 2 hours only.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// API Endpoint (adjust based on your server settings)
|
||||
const baseUrl = window.location.origin;
|
||||
const API_BASE_URL = baseUrl + '/api';
|
||||
// DOM Elements
|
||||
const editor = document.getElementById('editor');
|
||||
const viewer = document.getElementById('viewer');
|
||||
const lineNumbers = document.getElementById('line-numbers');
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const sunIcon = themeToggle.querySelector('.sun-icon');
|
||||
const moonIcon = themeToggle.querySelector('.moon-icon');
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
const copyBtn = document.getElementById('copy-btn');
|
||||
const newBtn = document.getElementById('new-btn');
|
||||
const notification = document.getElementById('notification');
|
||||
const languageSelector = document.getElementById('language-selector');
|
||||
const editorContainer = document.querySelector('.editor-container');
|
||||
|
||||
// Theme toggle functionality
|
||||
$('#themeToggle').on('click', function() {
|
||||
const currentTheme = $('body').attr('data-theme');
|
||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
$('body').attr('data-theme', newTheme);
|
||||
|
||||
// Update icon
|
||||
if (newTheme === 'dark') {
|
||||
$(this).html('<i class="fas fa-sun"></i>');
|
||||
} else {
|
||||
$(this).html('<i class="fas fa-moon"></i>');
|
||||
}
|
||||
|
||||
// Store preference
|
||||
localStorage.setItem('theme', newTheme);
|
||||
});
|
||||
|
||||
// Check for saved theme preference
|
||||
// Initial theme setup
|
||||
function setInitialTheme() {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme) {
|
||||
$('body').attr('data-theme', savedTheme);
|
||||
if (savedTheme === 'dark') {
|
||||
$('#themeToggle').html('<i class="fas fa-sun"></i>');
|
||||
}
|
||||
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
sunIcon.style.display = 'none';
|
||||
moonIcon.style.display = 'block';
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
sunIcon.style.display = 'block';
|
||||
moonIcon.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Line numbers functionality
|
||||
function updateLineNumbers() {
|
||||
const text = $('#editor').val();
|
||||
const lines = text.split('\n');
|
||||
const lineCount = lines.length;
|
||||
setInitialTheme();
|
||||
|
||||
let lineNumbersHtml = '';
|
||||
for (let i = 1; i <= lineCount; i++) {
|
||||
lineNumbersHtml += i + '<br>';
|
||||
}
|
||||
|
||||
$('#lineNumbers').html(lineNumbersHtml);
|
||||
// Theme toggle
|
||||
themeToggle.addEventListener('click', () => {
|
||||
if (document.documentElement.getAttribute('data-theme') === 'dark') {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
localStorage.setItem('theme', 'light');
|
||||
sunIcon.style.display = 'block';
|
||||
moonIcon.style.display = 'none';
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
sunIcon.style.display = 'none';
|
||||
moonIcon.style.display = 'block';
|
||||
}
|
||||
});
|
||||
|
||||
// Update line numbers on input
|
||||
$('#editor').on('input scroll keyup', function() {
|
||||
updateLineNumbers();
|
||||
// Sync scroll position between textarea and line numbers
|
||||
$('#lineNumbers').scrollTop($(this).scrollTop());
|
||||
});
|
||||
// Line numbers
|
||||
function updateLineNumbers() {
|
||||
const lineCount = editor.value.split('\n').length;
|
||||
lineNumbers.innerHTML = '';
|
||||
|
||||
// Initialize line numbers
|
||||
for (let i = 1; i <= lineCount; i++) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = i;
|
||||
lineNumbers.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle editor input
|
||||
editor.addEventListener('input', () => {
|
||||
updateLineNumbers();
|
||||
|
||||
// Save paste functionality
|
||||
$('#saveBtn').on('click', function() {
|
||||
const content = $('#editor').val();
|
||||
// Update viewer content with syntax highlighting
|
||||
viewer.textContent = editor.value;
|
||||
viewer.className = `language-${languageSelector.value}`;
|
||||
hljs.highlightElement(viewer);
|
||||
});
|
||||
|
||||
if (!content.trim()) {
|
||||
showToast('Please enter some content first!', 'warning');
|
||||
return;
|
||||
}
|
||||
// Handle tab key in editor
|
||||
editor.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
const start = editor.selectionStart;
|
||||
const end = editor.selectionEnd;
|
||||
|
||||
$('#loadingOverlay').fadeIn(200);
|
||||
// Insert tab at cursor position
|
||||
editor.value = editor.value.substring(0, start) + ' ' + editor.value.substring(end);
|
||||
|
||||
$.ajax({
|
||||
url: `${API_BASE_URL}/pastes`,
|
||||
// Move cursor after the inserted tab
|
||||
editor.selectionStart = editor.selectionEnd = start + 4;
|
||||
|
||||
// Update line numbers
|
||||
updateLineNumbers();
|
||||
}
|
||||
});
|
||||
|
||||
// Save paste
|
||||
saveBtn.addEventListener('click', async () => {
|
||||
if (!editor.value.trim()) {
|
||||
showNotification('Cannot save empty paste!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/pastes', {
|
||||
method: 'POST',
|
||||
data: content,
|
||||
contentType: 'text/plain',
|
||||
success: function(response) {
|
||||
const pasteUrl = `${window.location.origin}${window.location.pathname}?id=${response.id}`;
|
||||
$('#urlDisplay').text(pasteUrl);
|
||||
$('#urlContainer').fadeIn();
|
||||
showToast('Paste created successfully!', 'success');
|
||||
|
||||
// Update URL without reloading page
|
||||
history.pushState({}, '', `?id=${response.id}`);
|
||||
|
||||
// Copy to clipboard automatically
|
||||
copyToClipboard(pasteUrl);
|
||||
headers: {
|
||||
'Content-Type': 'text/plain'
|
||||
},
|
||||
error: function(xhr) {
|
||||
console.error('Error creating paste:', xhr);
|
||||
showToast('Failed to create paste. Please try again.', 'error');
|
||||
},
|
||||
complete: function() {
|
||||
$('#loadingOverlay').fadeOut(200);
|
||||
}
|
||||
body: editor.value
|
||||
});
|
||||
});
|
||||
|
||||
// Copy URL functionality
|
||||
$('#copyBtn').on('click', function() {
|
||||
const url = $('#urlDisplay').text();
|
||||
copyToClipboard(url);
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text)
|
||||
.then(function() {
|
||||
showToast('URL copied to clipboard!', 'success');
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.error('Failed to copy: ', err);
|
||||
showToast('Failed to copy URL.', 'error');
|
||||
});
|
||||
}
|
||||
if (response.ok) {
|
||||
// Add language as a hash parameter with query param format
|
||||
const url = `${window.location.origin}/?id=${data.id}#${languageSelector.value}`;
|
||||
navigator.clipboard.writeText(url);
|
||||
showNotification('Paste saved! URL copied to clipboard.', 'success');
|
||||
|
||||
// Toast notification
|
||||
function showToast(message, type = 'info') {
|
||||
let icon = 'fa-info-circle';
|
||||
// Update URL without reloading the page
|
||||
window.history.pushState({}, '', `/?id=${data.id}#${languageSelector.value}`);
|
||||
|
||||
switch(type) {
|
||||
case 'success':
|
||||
icon = 'fa-check-circle';
|
||||
break;
|
||||
case 'error':
|
||||
icon = 'fa-exclamation-circle';
|
||||
break;
|
||||
case 'warning':
|
||||
icon = 'fa-exclamation-triangle';
|
||||
break;
|
||||
// Switch to viewer mode
|
||||
editorContainer.classList.add('viewer-active');
|
||||
} else {
|
||||
showNotification(`Error: ${data.error}`, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showNotification('Failed to save paste. Please try again.', 'error');
|
||||
console.error('Save error:', error);
|
||||
}
|
||||
});
|
||||
|
||||
$('#toast').html(`<i class="fas ${icon}"></i><span>${message}</span>`);
|
||||
$('#toast').addClass('show');
|
||||
// Copy to clipboard
|
||||
copyBtn.addEventListener('click', () => {
|
||||
if (editorContainer.classList.contains('viewer-active')) {
|
||||
navigator.clipboard.writeText(viewer.textContent);
|
||||
} else {
|
||||
navigator.clipboard.writeText(editor.value);
|
||||
}
|
||||
showNotification('Content copied to clipboard!', 'success');
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
$('#toast').removeClass('show');
|
||||
}, 3000);
|
||||
// Create new paste
|
||||
newBtn.addEventListener('click', () => {
|
||||
editor.value = '';
|
||||
updateLineNumbers();
|
||||
window.history.pushState({}, '', '/'); // Reset URL to homepage
|
||||
editorContainer.classList.remove('viewer-active');
|
||||
languageSelector.value = 'javascript';
|
||||
});
|
||||
|
||||
// Language change
|
||||
languageSelector.addEventListener('change', () => {
|
||||
if (editorContainer.classList.contains('viewer-active')) {
|
||||
viewer.className = `language-${languageSelector.value}`;
|
||||
hljs.highlightElement(viewer);
|
||||
|
||||
// Update URL hash
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const pasteId = urlParams.get('id');
|
||||
if (pasteId) {
|
||||
window.history.replaceState({}, '', `/?id=${pasteId}#${languageSelector.value}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Show notification
|
||||
function showNotification(message, type = 'success') {
|
||||
notification.textContent = message;
|
||||
notification.className = 'notification show';
|
||||
|
||||
if (type === 'error') {
|
||||
notification.style.backgroundColor = 'var(--error-bg, #fa5252)';
|
||||
notification.style.color = 'var(--error-text, #fff5f5)';
|
||||
} else {
|
||||
notification.style.backgroundColor = 'var(--notification-bg)';
|
||||
notification.style.color = 'var(--notification-text)';
|
||||
}
|
||||
|
||||
// Check for paste ID in URL
|
||||
function getParameterByName(name) {
|
||||
const url = window.location.href;
|
||||
name = name.replace(/[\[\]]/g, '\\$&');
|
||||
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
|
||||
const results = regex.exec(url);
|
||||
if (!results) return null;
|
||||
if (!results[2]) return '';
|
||||
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
||||
}
|
||||
setTimeout(() => {
|
||||
notification.className = 'notification';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
const pasteId = getParameterByName('id');
|
||||
// Load paste on page load
|
||||
async function loadPasteFromUrl() {
|
||||
// Get the id from query parameter instead of path
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const pasteId = urlParams.get('id');
|
||||
|
||||
if (pasteId) {
|
||||
// We're viewing an existing paste
|
||||
$('#pageTitle').text('Viewing Paste');
|
||||
$('#editor').hide();
|
||||
$('#codeViewer').show();
|
||||
$('#actionButtons').hide();
|
||||
$('#viewControls').show();
|
||||
try {
|
||||
const response = await fetch(`/api/pastes/${pasteId}`);
|
||||
|
||||
$('#loadingOverlay').fadeIn(200);
|
||||
if (response.ok) {
|
||||
const content = await response.text();
|
||||
editor.value = content;
|
||||
updateLineNumbers();
|
||||
|
||||
$.ajax({
|
||||
url: `${API_BASE_URL}/pastes/${pasteId}`,
|
||||
method: 'GET',
|
||||
success: function(response) {
|
||||
const code = response;
|
||||
|
||||
// Clear any existing content first
|
||||
$('#highlightedCode').empty();
|
||||
|
||||
// Use .text() to safely set the content without HTML interpretation
|
||||
$('#highlightedCode').text(code);
|
||||
|
||||
// Apply syntax highlighting
|
||||
hljs.highlightAll();
|
||||
|
||||
// Update line numbers for the viewer
|
||||
const lines = code.split('\n');
|
||||
const lineCount = lines.length;
|
||||
|
||||
let lineNumbersHtml = '';
|
||||
for (let i = 1; i <= lineCount; i++) {
|
||||
lineNumbersHtml += i + '<br>';
|
||||
// Check for language in URL hash
|
||||
const hash = window.location.hash.substring(1);
|
||||
if (hash && document.querySelector(`option[value="${hash}"]`)) {
|
||||
languageSelector.value = hash;
|
||||
}
|
||||
|
||||
$('#lineNumbers').html(lineNumbersHtml);
|
||||
},
|
||||
error: function(xhr) {
|
||||
console.error('Error fetching paste:', xhr);
|
||||
showToast('Failed to load paste. It may have expired.', 'error');
|
||||
// Redirect to new paste creation after a delay
|
||||
setTimeout(function() {
|
||||
window.location.href = window.location.pathname;
|
||||
}, 2000);
|
||||
},
|
||||
complete: function() {
|
||||
$('#loadingOverlay').fadeOut(200);
|
||||
// Update viewer
|
||||
viewer.textContent = content;
|
||||
viewer.className = `language-${languageSelector.value}`;
|
||||
hljs.highlightElement(viewer);
|
||||
|
||||
// Switch to viewer mode
|
||||
editorContainer.classList.add('viewer-active');
|
||||
} else {
|
||||
showNotification('Paste not found or has expired.', 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// New paste button
|
||||
$('#newPasteBtn').on('click', function() {
|
||||
window.location.href = window.location.pathname;
|
||||
});
|
||||
|
||||
// Handle tab key in textarea
|
||||
$('#editor').on('keydown', function(e) {
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
const start = this.selectionStart;
|
||||
const end = this.selectionEnd;
|
||||
|
||||
// Insert tab character
|
||||
this.value = this.value.substring(0, start) + ' ' + this.value.substring(end);
|
||||
|
||||
// Move cursor position
|
||||
this.selectionStart = this.selectionEnd = start + 4;
|
||||
|
||||
// Update line numbers
|
||||
updateLineNumbers();
|
||||
} catch (error) {
|
||||
showNotification('Failed to load paste.', 'error');
|
||||
console.error('Load error:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
updateLineNumbers();
|
||||
loadPasteFromUrl();
|
||||
hljs.highlightAll();
|
||||
});
|
||||
|
||||
// Sync scroll between line numbers and editor
|
||||
editor.addEventListener('scroll', () => {
|
||||
lineNumbers.scrollTop = editor.scrollTop;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user