Skip to content

Commit

Permalink
+ redo
Browse files Browse the repository at this point in the history
  • Loading branch information
@gllmAR
gllmAR committed Oct 17, 2024
1 parent f0fa282 commit e3b57db
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 18 deletions.
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ <h1 id="title">Visual Prompt Builder</h1>
<button id="copy-prompt-btn" onclick="copyPrompt()" title="Copy Prompt">📋</button>
<button id="random-prompt-btn" onclick="generateRandomPrompt()" title="Generate Random Prompt">🎲</button>
<button id="undo-prompt-btn" onclick="undoPrompt()" title="Undo Last Action">⏪</button>
<button id="redo-prompt-btn" onclick="redoPrompt()" title="Redo Last Action">⏩</button>
<button id="clear-prompt-btn" onclick="clearPrompt()" title="Clear Prompt">🗑️</button>
</div>
</div>
Expand Down
125 changes: 109 additions & 16 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
let translations = {};
let currentLanguage = 'en';
let promptHistory = []; // To store the history of prompt changes
let undoStack = []; // Stack for undo operations
let redoStack = []; // Stack for redo operations

// Load translations
async function loadTranslations() {
Expand Down Expand Up @@ -55,7 +56,8 @@ function changeLanguage(lang) {
document.getElementById('copy-prompt-btn').title = texts['copy_prompt'];
document.getElementById('clear-prompt-btn').title = texts['clear_prompt'];
document.getElementById('random-prompt-btn').title = texts['generate_random_prompt'];
document.getElementById('undo-prompt-btn').title = texts['undo_prompt']; // New
document.getElementById('undo-prompt-btn').title = texts['undo_prompt'];
document.getElementById('redo-prompt-btn').title = texts['redo_prompt'];

// Update current language abbreviation
document.getElementById('current-language').textContent = translations[lang]['language_abbr'];
Expand Down Expand Up @@ -113,13 +115,23 @@ function displayDropdowns(data) {
}
}

// Save the current prompt to the undo stack and clear redo stack
function saveState() {
const promptTextarea = document.getElementById('prompt');
undoStack.push(promptTextarea.value);
// Limit undo stack size to 50
if (undoStack.length > 50) {
undoStack.shift();
}
redoStack = []; // Clear redo stack
}

// Add selected keyword to prompt and scroll to bottom
function addToPrompt(keyword) {
if (keyword) {
const promptTextarea = document.getElementById('prompt');
// Save current prompt to history before adding new text
promptHistory.push(promptTextarea.value);
saveState();

const promptTextarea = document.getElementById('prompt');
promptTextarea.value += (promptTextarea.value ? ' ' : '') + keyword;

// Scroll to the bottom
Expand All @@ -130,33 +142,99 @@ function addToPrompt(keyword) {
// Copy prompt to clipboard
function copyPrompt() {
const promptTextarea = document.getElementById('prompt');
const copyButton = document.getElementById('copy-prompt-btn');

navigator.clipboard
.writeText(promptTextarea.value)
.then(() => {
alert(translations[currentLanguage]['prompt_copied']);
// Visual feedback for success
copyButton.classList.remove('error');
copyButton.classList.add('success');
// Remove the class after the animation duration
setTimeout(() => {
copyButton.classList.remove('success');
}, 1000);
})
.catch(err => {
// Visual feedback for error
copyButton.classList.remove('success');
copyButton.classList.add('error');
setTimeout(() => {
copyButton.classList.remove('error');
}, 1000);
console.error('Failed to copy text: ', err);
});
}

// Clear the prompt
function clearPrompt() {
const promptTextarea = document.getElementById('prompt');
const clearButton = document.getElementById('clear-prompt-btn');
if (promptTextarea.value) {
// Save current prompt to history before clearing
promptHistory.push(promptTextarea.value);
saveState();
promptTextarea.value = '';

// Visual feedback for success
clearButton.classList.remove('error');
clearButton.classList.add('success');
setTimeout(() => {
clearButton.classList.remove('success');
}, 1000);
} else {
// Visual feedback for error
clearButton.classList.remove('success');
clearButton.classList.add('error');
setTimeout(() => {
clearButton.classList.remove('error');
}, 1000);
}
}

// Undo last action
function undoPrompt() {
const promptTextarea = document.getElementById('prompt');
if (promptHistory.length > 0) {
promptTextarea.value = promptHistory.pop();
const undoButton = document.getElementById('undo-prompt-btn');
if (undoStack.length > 0) {
redoStack.push(promptTextarea.value);
promptTextarea.value = undoStack.pop();

// Visual feedback for success
undoButton.classList.remove('error');
undoButton.classList.add('success');
setTimeout(() => {
undoButton.classList.remove('success');
}, 1000);
} else {
alert(translations[currentLanguage]['nothing_to_undo'] || 'Nothing to undo');
// Visual feedback for error
undoButton.classList.remove('success');
undoButton.classList.add('error');
setTimeout(() => {
undoButton.classList.remove('error');
}, 1000);
}
}

// Redo last undone action
function redoPrompt() {
const promptTextarea = document.getElementById('prompt');
const redoButton = document.getElementById('redo-prompt-btn');
if (redoStack.length > 0) {
undoStack.push(promptTextarea.value);
promptTextarea.value = redoStack.pop();

// Visual feedback for success
redoButton.classList.remove('error');
redoButton.classList.add('success');
setTimeout(() => {
redoButton.classList.remove('success');
}, 1000);
} else {
// Visual feedback for error
redoButton.classList.remove('success');
redoButton.classList.add('error');
setTimeout(() => {
redoButton.classList.remove('error');
}, 1000);
}
}

Expand Down Expand Up @@ -188,13 +266,13 @@ function applyTheme() {

// Generate Random Prompt and scroll to bottom
function generateRandomPrompt() {
const randomButton = document.getElementById('random-prompt-btn');
fetch(`keywords_${currentLanguage}.json`)
.then(response => response.json())
.then(data => {
const promptTextarea = document.getElementById('prompt');
// Save current prompt to history before adding new text
promptHistory.push(promptTextarea.value);
saveState();

const promptTextarea = document.getElementById('prompt');
const categories = Object.keys(data);

const allKeywords = [];
Expand All @@ -219,13 +297,28 @@ function generateRandomPrompt() {
// Scroll to the bottom
promptTextarea.scrollTop = promptTextarea.scrollHeight;

// Visual feedback
// Visual feedback for success
randomButton.classList.remove('error');
randomButton.classList.add('success');
setTimeout(() => {
randomButton.classList.remove('success');
}, 1000);

// Visual feedback on prompt textarea
promptTextarea.classList.add('highlight');
setTimeout(() => {
promptTextarea.classList.remove('highlight');
}, 500);
})
.catch(error => console.error('Error generating random prompt:', error));
.catch(error => {
console.error('Error generating random prompt:', error);
// Visual feedback for error
randomButton.classList.remove('success');
randomButton.classList.add('error');
setTimeout(() => {
randomButton.classList.remove('error');
}, 1000);
});
}

// Close language menu when clicking outside
Expand Down
58 changes: 56 additions & 2 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
--input-border-color: #cccccc;
--button-bg-color: #007BFF;
--button-text-color: #ffffff;
--success-color: #28a745; /* Green */
--error-color: #dc3545; /* Red */
}

[data-theme="dark"] {
Expand All @@ -15,6 +17,8 @@
--input-border-color: #444444;
--button-bg-color: #1a73e8;
--button-text-color: #ffffff;
--success-color: #28a745;
--error-color: #dc3545;
}

/* General Styles */
Expand Down Expand Up @@ -165,16 +169,66 @@ h1 {
border: none;
background: none;
color: var(--text-color);
border: 2px solid transparent; /* Default border */
border-radius: 5px;
}

/* Hover effect */
.buttons button:hover {
color: var(--button-bg-color);
}

/* Success and Error Animations */
@keyframes fadeInOutSuccess {
0% {
border-color: var(--success-color);
opacity: 1;
}
100% {
border-color: transparent;
opacity: 1;
}
}

@keyframes fadeInOutError {
0% {
border-color: var(--error-color);
opacity: 1;
}
100% {
border-color: transparent;
opacity: 1;
}
}

.buttons button.success {
animation: fadeInOutSuccess 1s ease-in-out;
}

.buttons button.error {
animation: fadeInOutError 1s ease-in-out;
}

/* Ensure the border returns to default after animation */
.buttons button.success,
.buttons button.error {
border-color: transparent;
}

/* Highlight effect for the prompt textarea */
.highlight {
border-color: gold;
box-shadow: 0 0 10px gold;
animation: highlightAnimation 0.5s ease-in-out;
}

@keyframes highlightAnimation {
0% {
border-color: gold;
box-shadow: 0 0 10px gold;
}
100% {
border-color: var(--input-border-color);
box-shadow: none;
}
}

/* Responsive Design */
Expand Down
10 changes: 10 additions & 0 deletions translations.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@
"copy_prompt": "Copy Prompt",
"clear_prompt": "Clear Prompt",
"undo_prompt": "Undo Last Action",
"redo_prompt": "Redo Last Action",
"prompt_copied": "Prompt copied to clipboard!",
"nothing_to_undo": "Nothing to undo",
"nothing_to_redo": "Nothing to redo",
"switch_to_dark": "🌜",
"switch_to_light": "🌞",
"language": "Language",
Expand All @@ -26,8 +28,10 @@
"copy_prompt": "Copiar Prompt",
"clear_prompt": "Borrar Prompt",
"undo_prompt": "Deshacer última acción",
"redo_prompt": "Rehacer última acción",
"prompt_copied": "¡Prompt copiado al portapapeles!",
"nothing_to_undo": "Nada que deshacer",
"nothing_to_redo": "Nada que rehacer",
"switch_to_dark": "🌜",
"switch_to_light": "🌞",
"language": "Idioma",
Expand All @@ -43,8 +47,10 @@
"copy_prompt": "Copier le Prompt",
"clear_prompt": "Effacer le Prompt",
"undo_prompt": "Annuler la dernière action",
"redo_prompt": "Rétablir la dernière action",
"prompt_copied": "Prompt copié dans le presse-papiers !",
"nothing_to_undo": "Rien à annuler",
"nothing_to_redo": "Rien à rétablir",
"switch_to_dark": "🌜",
"switch_to_light": "🌞",
"language": "Langue",
Expand All @@ -60,8 +66,10 @@
"copy_prompt": "Copia Promptum",
"clear_prompt": "Dele Promptum",
"undo_prompt": "Rescribe ultimam actionem",
"redo_prompt": "Iterum fac actionem",
"prompt_copied": "Promptum in memoriam positum est!",
"nothing_to_undo": "Nihil ad rescribendum",
"nothing_to_redo": "Nihil ad iterandum",
"switch_to_dark": "🌜",
"switch_to_light": "🌞",
"language": "Lingua",
Expand All @@ -77,8 +85,10 @@
"copy_prompt": "📋",
"clear_prompt": "🗑️",
"undo_prompt": "⏪",
"redo_prompt": "⏩",
"prompt_copied": "✅",
"nothing_to_undo": "❌",
"nothing_to_redo": "❌",
"switch_to_dark": "🌜",
"switch_to_light": "🌞",
"language": "🌐",
Expand Down

0 comments on commit e3b57db

Please sign in to comment.