Сохранение картинок в всплывающем окне, для быстрой вставки.
// ==UserScript==
// @name ImagePasteSaver
// @namespace https://wi33y.ru/
// @version 1.1.0
// @description Сохранение картинок в всплывающем окне, для быстрой вставки.
// @author Wi33y
// @match https://zelenka.guru/*
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Стили для окна
GM_addStyle(`
#myPopup {
display: none;
position: fixed;
top: 15%;
left: 50%;
transform: translateX(-50%);
width: 470px; /* Фиксированная ширина */
background-color: #222;
border: 1px solid #ccc;
max-height: 450px;
overflow: auto;
padding: 20px;
z-index: 9999;
}
#myPopup .close-button {
position: absolute;
top: 10px;
right: 10px;
color: white;
font-size: 20px;
cursor: pointer;
}
.image-container {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 10px;
}
.image-container img {
max-width: 100px;
max-height: 100px;
margin-right: 10px;
}
.btn-container {
display: flex;
flex-direction: column;
}
.insert-button, .upload-button, .delete-button {
margin-top: 10px;
background-color: #007bff;
color: white;
border: none;
padding: 7px 14px;
cursor: pointer;
}
.insert-button:hover, .upload-button:hover, .delete-button:hover {
background-color: #0056b3;
}
.open-popup-button {
position: fixed;
top: 20%;
right: 20px;
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
.open-popup-button:hover {
background-color: #0056b3;
}
`);
// Создание попита
const popup = document.createElement('div');
popup.id = 'myPopup';
// Кнопка "Закрыть" (крестик)
const closeButton = document.createElement('span');
closeButton.innerHTML = '×';
closeButton.className = 'close-button';
closeButton.addEventListener('click', () => {
popup.style.display = 'none';
});
// В попит крестик вставляем
popup.appendChild(closeButton);
// Сохраняем URL изображений
let imageUrls = JSON.parse(localStorage.getItem('imageUrls')) || [];
// Создаем контейер для изображения
const imageContainer = document.createElement('div');
imageContainer.className = 'image-container';
// Кнопки "Вставить" и "Удалить"
const insertButton = document.createElement('button');
insertButton.textContent = 'Вставить';
insertButton.className = 'insert-button';
insertButton.style.display = 'none';
insertButton.addEventListener('click', () => {
const imageUrl = imgElement.src;
if (imageUrl) {
insertImageLink(imageUrl);
}
});
// Элементы в попите
imageContainer.appendChild(insertButton);
const btnContainer = document.createElement('div');
btnContainer.className = 'btn-container';
// url поле
const urlInput = document.createElement('input');
urlInput.type = 'text';
urlInput.placeholder = 'URL изображения';
// Кнопка "Загрузить"
const uploadButton = document.createElement('button');
uploadButton.textContent = 'Загрузить';
uploadButton.className = 'upload-button';
uploadButton.addEventListener('click', () => {
const imageUrl = urlInput.value;
if (imageUrl) {
imageUrls.push(imageUrl);
localStorage.setItem('imageUrls', JSON.stringify(imageUrls)); // Сохраняем в localStorage
displayImages();
urlInput.value = '';
}
});
btnContainer.appendChild(urlInput);
btnContainer.appendChild(uploadButton);
popup.appendChild(btnContainer);
popup.appendChild(imageContainer);
let isPopupOpen = false; // Флаг для отслеживания состояния окна
// Создаем кнопку "Открыть/Закрыть окно" с классом "open-popup-button"
const openPopupButton = document.createElement('button');
openPopupButton.textContent = 'Открыть';
openPopupButton.className = 'open-popup-button';
openPopupButton.addEventListener('click', () => {
if (!isPopupOpen) {
displayImages(); // Отображаем изображения при открытии pop-up окна
popup.style.display = 'block';
openPopupButton.textContent = 'Закрыть';
} else {
popup.style.display = 'none';
openPopupButton.textContent = 'Открыть';
}
isPopupOpen = !isPopupOpen;
});
document.body.appendChild(openPopupButton);
// Отображаем изображения при открытии pop-up окна
displayImages();
document.body.appendChild(popup);
function displayImages() {
const imageUrlList = document.createElement('ul');
for (let i = 0; i < imageUrls.length; i++) {
const imageUrl = imageUrls[i];
const listItem = document.createElement('li');
listItem.innerHTML = `
<img src="${imageUrl}" alt="Изображение" class="hover-zoom-image" data-index="${i}">
<button class="insert-button" data-index="${i}">Вставить</button>
<button class="delete-button" data-index="${i}">Удалить</button>
`;
imageUrlList.appendChild(listItem);
}
insertButton.style.display = imageUrls.length > 0 ? 'block' : 'none';
imageContainer.innerHTML = '';
imageContainer.appendChild(imageUrlList);
const deleteButtons = imageUrlList.querySelectorAll('.delete-button');
deleteButtons.forEach((button) => {
button.addEventListener('click', (e) => {
const index = e.target.getAttribute('data-index');
if (index !== null) {
imageUrls.splice(index, 1);
localStorage.setItem('imageUrls', JSON.stringify(imageUrls)); // Обновляем localStorage
displayImages();
}
});
});
const insertButtons = imageUrlList.querySelectorAll('.insert-button');
insertButtons.forEach((button) => {
button.addEventListener('click', (e) => {
const index = e.target.getAttribute('data-index');
if (index !== null) {
const imageUrl = imageUrls[index];
if (imageUrl) {
insertImageLink(imageUrl);
}
}
});
});
const hoverZoomImages = imageUrlList.querySelectorAll('.hover-zoom-image');
hoverZoomImages.forEach((image) => {
image.addEventListener('mouseenter', () => {
toggleImageSize(image, true); // Увеличить размер изображения
});
image.addEventListener('mouseleave', () => {
toggleImageSize(image, false); // Вернуть размер изображения к обычному
});
});
}
function toggleImageSize(image, zoomIn) {
if (zoomIn) {
image.style.maxWidth = '420px';
image.style.maxHeight = '180px';
} else {
image.style.maxWidth = '100px'; // Вернуть обычный размер
image.style.maxHeight = '100px';
}
}
// Функция для вставки изображения как ссылки в текстовое поле
function insertImageLink(link) {
const textField = document.querySelector('div.fr-element');
if (textField) {
const formattedLink = `[img]${link}[/img]`; // Убираем пробелы перед и после ссылки
textField.innerHTML += formattedLink;
}
}
})();