WebOrbiton
v3.0.0.2

FlatlyPage

← Changes All versions
663 lines · 19.9 KB
  1. (function() {
  2. 'use strict';
  3. ​
  4. let lastSourceLang = localStorage.getItem('translator_source') || 'pl';
  5. let lastTargetLang = localStorage.getItem('translator_target') || 'en';
  6. let selectedAPI = localStorage.getItem('translator_api') || 'mymemory';
  7. let apiConfig = null;
  8. ​
  9. const LANGUAGES = {
  10. 'en': 'English', 'pl': 'Polish', 'de': 'German', 'es': 'Spanish',
  11. 'fr': 'French', 'it': 'Italian', 'pt': 'Portuguese', 'ru': 'Russian',
  12. 'ja': 'Japanese', 'zh': 'Chinese', 'ar': 'Arabic', 'nl': 'Dutch',
  13. 'sv': 'Swedish', 'no': 'Norwegian', 'da': 'Danish', 'fi': 'Finnish',
  14. 'cs': 'Czech', 'sk': 'Slovak', 'hu': 'Hungarian', 'ro': 'Romanian',
  15. 'tr': 'Turkish', 'uk': 'Ukrainian', 'ko': 'Korean'
  16. };
  17. ​
  18. const ICONS = {
  19. translate: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>',
  20. globe: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>',
  21. search: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>',
  22. settings: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6m5.2-14.8L13.4 7.6m-2.8 8.8-3.8 3.8M23 12h-6m-6 0H1m17.8 5.2-3.8-3.8m-8.8-2.8L1.2 6.8"/></svg>'
  23. };
  24. ​
  25. const style = document.createElement('style');
  26. style.textContent = `
  27. .translate-btn {
  28. position: fixed;
  29. top: 0;
  30. left: 0;
  31. z-index: 150;
  32. display: none;
  33. align-items: center;
  34. gap: 6px;
  35. height: 28px;
  36. padding: 0 12px;
  37. background: var(--bg-elevated);
  38. border: 1px solid var(--border-focus);
  39. color: var(--text);
  40. border-radius: 8px;
  41. font-family: inherit;
  42. font-size: 0.6875rem;
  43. font-weight: 600;
  44. cursor: pointer;
  45. box-shadow: var(--shadow-md);
  46. transition: border-color var(--transition-base), background var(--transition-base);
  47. }
  48. ​
  49. .translate-btn.visible {
  50. display: inline-flex;
  51. }
  52. ​
  53. .translate-btn svg {
  54. flex-shrink: 0;
  55. }
  56. ​
  57. .translate-btn:hover {
  58. border-color: var(--accent);
  59. background: var(--bg-hover);
  60. }
  61. ​
  62. .translate-btn:disabled {
  63. cursor: progress;
  64. opacity: 0.8;
  65. }
  66. ​
  67. .tr-overlay {
  68. position: fixed;
  69. inset: 0;
  70. background: rgba(0, 0, 0, 0.75);
  71. backdrop-filter: blur(12px);
  72. display: flex;
  73. align-items: center;
  74. justify-content: center;
  75. z-index: 1000;
  76. padding: 20px;
  77. animation: fadeIn var(--transition-base) ease-out;
  78. }
  79. ​
  80. [data-theme="light"] .tr-overlay {
  81. background: rgba(15, 23, 42, 0.5);
  82. }
  83. ​
  84. .tr-modal {
  85. background: var(--bg-elevated);
  86. border: 1px solid var(--border);
  87. border-radius: var(--radius);
  88. width: 100%;
  89. max-width: 580px;
  90. padding: 24px;
  91. box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  92. font-family: var(--font-interface, 'Space Grotesk'), -apple-system, BlinkMacSystemFont, sans-serif;
  93. color: var(--text);
  94. animation: modalSlideIn var(--transition-smooth) cubic-bezier(0.16, 1, 0.3, 1);
  95. }
  96. ​
  97. [data-theme="light"] .tr-modal {
  98. box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  99. }
  100. ​
  101. .tr-title {
  102. font-size: 1rem;
  103. font-weight: 600;
  104. margin: 0 0 20px 0;
  105. display: flex;
  106. align-items: center;
  107. justify-content: space-between;
  108. }
  109. ​
  110. .tr-title-left {
  111. display: flex;
  112. align-items: center;
  113. gap: 10px;
  114. }
  115. ​
  116. .tr-title svg {
  117. color: var(--blue);
  118. }
  119. ​
  120. .tr-search {
  121. width: 100%;
  122. background: var(--bg-card);
  123. border: 1px solid var(--border);
  124. color: var(--text);
  125. padding: 12px 12px 12px 40px;
  126. border-radius: var(--radius-sm);
  127. margin-bottom: 20px;
  128. outline: none;
  129. transition: border-color var(--transition-base);
  130. font-size: 0.875rem;
  131. }
  132. ​
  133. .tr-search-wrapper {
  134. position: relative;
  135. }
  136. ​
  137. .tr-search-icon {
  138. position: absolute;
  139. left: 12px;
  140. top: 22px;
  141. transform: translateY(-50%);
  142. color: var(--text-muted);
  143. pointer-events: none;
  144. z-index: 1;
  145. }
  146. ​
  147. .tr-search:focus {
  148. border-color: var(--border-focus);
  149. }
  150. ​
  151. .tr-label {
  152. font-size: 0.6875rem;
  153. font-weight: 600;
  154. color: var(--text-subtle);
  155. text-transform: uppercase;
  156. letter-spacing: 0.05em;
  157. margin-bottom: 10px;
  158. display: block;
  159. }
  160. ​
  161. .tr-api-selector {
  162. display: flex;
  163. gap: 8px;
  164. margin-bottom: 20px;
  165. padding: 4px;
  166. background: var(--bg-card);
  167. border-radius: var(--radius-sm);
  168. }
  169. ​
  170. .tr-api-option {
  171. flex: 1;
  172. padding: 10px;
  173. border-radius: var(--radius-sm);
  174. cursor: pointer;
  175. text-align: center;
  176. font-size: 0.8125rem;
  177. color: var(--text-muted);
  178. transition: all var(--transition-base);
  179. border: 1px solid transparent;
  180. display: flex;
  181. flex-direction: column;
  182. align-items: center;
  183. gap: 4px;
  184. }
  185. ​
  186. .tr-api-option:hover {
  187. color: var(--text);
  188. background: var(--bg-hover);
  189. }
  190. ​
  191. .tr-api-option.selected {
  192. background: rgba(59, 130, 246, 0.1);
  193. border-color: var(--blue);
  194. color: var(--text);
  195. font-weight: 600;
  196. }
  197. ​
  198. .tr-api-badge {
  199. display: inline-block;
  200. font-size: 0.625rem;
  201. padding: 2px 6px;
  202. background: var(--bg-elevated);
  203. border-radius: 4px;
  204. margin-left: 0;
  205. }
  206. ​
  207. .tr-api-badge.free {
  208. background: var(--success);
  209. color: white;
  210. }
  211. ​
  212. .tr-grid {
  213. display: grid;
  214. grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  215. gap: 8px;
  216. max-height: 140px;
  217. overflow-y: auto;
  218. padding-right: 5px;
  219. margin-bottom: 20px;
  220. }
  221. ​
  222. .tr-grid::-webkit-scrollbar {
  223. width: 4px;
  224. }
  225. ​
  226. .tr-grid::-webkit-scrollbar-thumb {
  227. background: var(--border);
  228. border-radius: 10px;
  229. }
  230. ​
  231. .tr-grid::-webkit-scrollbar-thumb:hover {
  232. background: var(--text-muted);
  233. }
  234. ​
  235. .tr-opt {
  236. background: var(--bg-card);
  237. border: 1px solid var(--border);
  238. padding: 10px;
  239. border-radius: var(--radius-sm);
  240. cursor: pointer;
  241. text-align: center;
  242. font-size: 0.8125rem;
  243. color: var(--text-muted);
  244. transition: all var(--transition-base);
  245. }
  246. ​
  247. .tr-opt:hover {
  248. background: var(--bg-hover);
  249. color: var(--text);
  250. border-color: var(--border-focus);
  251. }
  252. ​
  253. .tr-opt.selected {
  254. background: rgba(59, 130, 246, 0.1);
  255. border-color: var(--blue);
  256. color: var(--text);
  257. font-weight: 500;
  258. box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.1);
  259. }
  260. ​
  261. .tr-footer {
  262. display: flex;
  263. justify-content: flex-end;
  264. gap: 12px;
  265. margin-top: 24px;
  266. }
  267. ​
  268. .tr-btn-main {
  269. padding: 12px 24px;
  270. border-radius: var(--radius-sm);
  271. border: none;
  272. font-weight: 600;
  273. cursor: pointer;
  274. transition: all var(--transition-base);
  275. font-size: 0.875rem;
  276. }
  277. ​
  278. .tr-btn-cancel {
  279. background: transparent;
  280. color: var(--text-muted);
  281. }
  282. ​
  283. .tr-btn-cancel:hover {
  284. color: var(--text);
  285. }
  286. ​
  287. .tr-btn-confirm {
  288. background: var(--blue);
  289. color: white;
  290. box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.39);
  291. }
  292. ​
  293. .tr-btn-confirm:hover {
  294. transform: translateY(-1px);
  295. box-shadow: 0 6px 20px rgba(59, 130, 246, 0.23);
  296. }
  297. ​
  298. .tr-btn-confirm:active {
  299. transform: scale(0.98);
  300. }
  301. ​
  302. .loader-spin {
  303. width: 14px;
  304. height: 14px;
  305. border: 2px solid rgba(255, 255, 255, 0.2);
  306. border-top-color: white;
  307. border-radius: 50%;
  308. animation: spin 0.8s linear infinite;
  309. }
  310. ​
  311. @keyframes spin {
  312. to {
  313. transform: rotate(360deg);
  314. }
  315. }
  316. ​
  317. @media (max-width: 768px) {
  318. .tr-modal {
  319. max-width: 100%;
  320. border-radius: var(--radius) var(--radius) 0 0;
  321. padding: 20px;
  322. }
  323. ​
  324. .tr-title {
  325. font-size: 1.125rem;
  326. }
  327. ​
  328. .tr-api-option {
  329. font-size: 0.75rem;
  330. padding: 8px;
  331. }
  332. ​
  333. .tr-grid {
  334. grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  335. }
  336. ​
  337. .tr-footer {
  338. flex-direction: column;
  339. gap: 10px;
  340. }
  341. ​
  342. .tr-btn-main {
  343. width: 100%;
  344. }
  345. }
  346. `;
  347. document.head.appendChild(style);
  348. ​
  349. async function loadAPIConfig() {
  350. try {
  351. const response = await fetch('../api/get-translate-config');
  352. return await response.json();
  353. } catch (e) {
  354. console.error('Failed to load API config:', e);
  355. return {
  356. 'mymemory': {
  357. name: 'MyMemory',
  358. free: true,
  359. rateLimit: '1000/day'
  360. }
  361. };
  362. }
  363. }
  364. ​
  365. function showModal(callback) {
  366. const overlay = document.createElement('div');
  367. overlay.className = 'tr-overlay';
  369. const apiButtons = apiConfig ? Object.entries(apiConfig).map(([id, config]) => `
  370. <div class="tr-api-option ${id === selectedAPI ? 'selected' : ''}" data-api="${id}">
  371. ${config.name}
  372. ${config.free ? '<span class="tr-api-badge free">FREE</span>' : '<span class="tr-api-badge">PRO</span>'}
  373. </div>
  374. `).join('') : '';
  375. ​
  376. overlay.innerHTML = `
  377. <div class="tr-modal">
  378. <div class="tr-title">
  379. <div class="tr-title-left">
  380. ${ICONS.globe} Smart Translator
  381. </div>
  382. </div>
  383. ​
  384. ${apiConfig ? `
  385. <div class="tr-label">Translation Provider</div>
  386. <div class="tr-api-selector">
  387. ${apiButtons}
  388. </div>
  389. ` : ''}
  391. <div class="tr-search-wrapper">
  392. <span class="tr-search-icon">${ICONS.search}</span>
  393. <input type="text" class="tr-search" placeholder="Search languages...">
  394. </div>
  396. <span class="tr-label">Source Language</span>
  397. <div class="tr-grid" id="src-grid"></div>
  398. ​
  399. <span class="tr-label">Target Language</span>
  400. <div class="tr-grid" id="trg-grid"></div>
  401. ​
  402. <div class="tr-footer">
  403. <button class="tr-btn-main tr-btn-cancel">Close</button>
  404. <button class="tr-btn-main tr-btn-confirm">Translate Content</button>
  405. </div>
  406. </div>`;
  407. document.body.appendChild(overlay);
  408. ​
  409. let sSrc = lastSourceLang;
  410. let sTrg = lastTargetLang;
  411. let sAPI = selectedAPI;
  412. ​
  413. overlay.querySelectorAll('.tr-api-option').forEach(opt => {
  414. opt.onclick = () => {
  415. sAPI = opt.dataset.api;
  416. overlay.querySelectorAll('.tr-api-option').forEach(o => o.classList.remove('selected'));
  417. opt.classList.add('selected');
  418. };
  419. });
  420. ​
  421. const render = (filter = '') => {
  422. const srcG = overlay.querySelector('#src-grid');
  423. const trgG = overlay.querySelector('#trg-grid');
  424. srcG.innerHTML = ''; trgG.innerHTML = '';
  425. ​
  426. Object.entries(LANGUAGES).forEach(([code, name]) => {
  427. if (!name.toLowerCase().includes(filter.toLowerCase())) return;
  428. ​
  429. [ {g: srcG, cur: sSrc, set: (c)=>sSrc=c}, {g: trgG, cur: sTrg, set: (c)=>sTrg=c} ].forEach(config => {
  430. const el = document.createElement('div');
  431. el.className = `tr-opt ${code === config.cur ? 'selected' : ''}`;
  432. el.textContent = name;
  433. el.onclick = () => { config.set(code); render(filter); };
  434. config.g.appendChild(el);
  435. });
  436. });
  437. };
  438. ​
  439. overlay.querySelector('.tr-search').oninput = (e) => render(e.target.value);
  440. overlay.querySelector('.tr-btn-cancel').onclick = () => overlay.remove();
  441. overlay.querySelector('.tr-btn-confirm').onclick = () => {
  442. lastSourceLang = sSrc; lastTargetLang = sTrg; selectedAPI = sAPI;
  443. localStorage.setItem('translator_source', sSrc);
  444. localStorage.setItem('translator_target', sTrg);
  445. localStorage.setItem('translator_api', sAPI);
  446. overlay.remove();
  447. callback(sSrc, sTrg, sAPI);
  448. };
  449. ​
  450. render();
  451. }
  452. ​
  453. async function translateText(text, src, trg, api) {
  454. const response = await fetch('../api/translate', {
  455. method: 'POST',
  456. headers: {
  457. 'Content-Type': 'application/json'
  458. },
  459. body: JSON.stringify({
  460. text: text,
  461. source: src,
  462. target: trg,
  463. provider: api
  464. })
  465. });
  466. ​
  467. if (!response.ok) {
  468. const error = await response.json();
  469. console.error('❌ Backend error:', error);
  470. throw new Error(error.error || 'Translation failed');
  471. }
  472. ​
  473. const data = await response.json();
  474. return data.translatedText;
  475. }
  476. ​
  477. async function handleTranslate(field, btn) {
  478. const val = field.value.trim();
  480. if (!val) {
  481. alert('Please enter text to translate');
  482. return;
  483. }
  484. ​
  485. showModal(async (src, trg, api) => {
  486. const original = btn.innerHTML;
  487. btn.innerHTML = `<div class="loader-spin"></div>`;
  488. btn.classList.add('loading');
  489. btn.disabled = true;
  490. ​
  491. try {
  492. const translated = await translateText(val, src, trg, api);
  494. if (translated) {
  495. field.value = translated;
  496. field.dispatchEvent(new Event('input', { bubbles: true }));
  497. } else {
  498. alert('Translation failed or limit exceeded');
  499. }
  500. } catch (e) {
  501. console.error('❌ Translation error:', e);
  502. alert('Connection failed: ' + e.message);
  503. } finally {
  504. btn.innerHTML = original;
  505. btn.classList.remove('loading');
  506. btn.disabled = false;
  507. }
  508. });
  509. }
  510. ​
  511. const FIELD_SELECTOR = 'textarea, input[type="text"]';
  512. const BLOCK_SELECTOR = '.blocks-container .block-content';
  513. const GAP = 6;
  514. const EDGE = 8;
  515. ​
  516. let activeField = null;
  517. let floatBtn = null;
  518. let busy = false;
  519. ​
  520. const PAGE_TEXT_FIELDS = /^(page_title|page_description|product_title|product_description)$/;
  521. const NON_TEXT_KEY = /(url|link|href|src|image|icon|poster|slug|color|class|embed)$/i;
  522. const ID_KEY = /(^|_)id$|[a-z]Id$/;
  523. const URL_LIKE = /^\s*(https?:\/\/|\/|#|mailto:|tel:|www\.)/i;
  524. ​
  525. function fieldKey(el) {
  526. const m = (el.getAttribute('oninput') || '').match(/'([A-Za-z0-9_]+)'\s*,\s*this\.value/);
  527. return m ? m[1] : '';
  528. }
  529. ​
  530. function isTranslatable(el) {
  531. if (!(el instanceof HTMLElement) ||
  532. !el.matches(FIELD_SELECTOR) ||
  533. el.readOnly ||
  534. el.disabled ||
  535. el.closest('.tr-modal') ||
  536. el.dataset.noTranslate !== undefined) {
  537. return false;
  538. }
  539. ​
  540. if (PAGE_TEXT_FIELDS.test(el.name || '')) {
  541. return true;
  542. }
  543. ​
  544. if (el.closest(BLOCK_SELECTOR) === null) {
  545. return false;
  546. }
  547. ​
  548. if (el.closest('.link-input-wrapper') || el.closest('.image-input-group')) {
  549. return false;
  550. }
  551. const key = fieldKey(el);
  552. if (NON_TEXT_KEY.test(key) || ID_KEY.test(key)) {
  553. return false;
  554. }
  555. if (el.type === 'url' || URL_LIKE.test(el.value) || /^\s*https?:\/\//i.test(el.placeholder || '')) {
  556. return false;
  557. }
  558. return true;
  559. }
  560. ​
  561. function ensureButton() {
  562. if (floatBtn) return floatBtn;
  563. floatBtn = document.createElement('button');
  564. floatBtn.type = 'button';
  565. floatBtn.className = 'translate-btn';
  566. floatBtn.innerHTML = `${ICONS.translate} Translate`;
  567. floatBtn.addEventListener('mousedown', (e) => e.preventDefault());
  568. floatBtn.addEventListener('click', (e) => {
  569. e.preventDefault();
  570. e.stopPropagation();
  571. if (activeField && !busy) {
  572. const field = activeField;
  573. busy = true;
  574. handleTranslate(field, floatBtn).finally(() => {
  575. busy = false;
  576. position();
  577. });
  578. }
  579. });
  580. document.body.appendChild(floatBtn);
  581. return floatBtn;
  582. }
  583. ​
  584. function hide() {
  585. if (floatBtn) floatBtn.classList.remove('visible');
  586. }
  587. ​
  588. function position() {
  589. if (!activeField || !document.contains(activeField)) {
  590. activeField = null;
  591. hide();
  592. return;
  593. }
  594. ​
  595. const btn = ensureButton();
  596. const rect = activeField.getBoundingClientRect();
  597. const vw = window.innerWidth;
  598. const vh = window.innerHeight;
  599. ​
  600. if (rect.bottom < 0 || rect.top > vh || rect.width === 0) {
  601. hide();
  602. return;
  603. }
  604. ​
  605. btn.classList.add('visible');
  606. const w = btn.offsetWidth;
  607. const h = btn.offsetHeight;
  608. ​
  609. let left = rect.right - w;
  610. left = Math.max(EDGE, Math.min(left, vw - w - EDGE));
  611. ​
  612. let top = rect.top - h - GAP;
  613. const header = document.querySelector('.main-header');
  614. const minTop = header ? header.getBoundingClientRect().bottom + 2 : EDGE;
  615. if (top < minTop) {
  616. top = Math.min(minTop, vh - h - EDGE);
  617. }
  618. ​
  619. btn.style.left = left + 'px';
  620. btn.style.top = top + 'px';
  621. }
  622. ​
  623. document.addEventListener('focusin', (e) => {
  624. if (floatBtn && (e.target === floatBtn || floatBtn.contains(e.target))) return;
  625. if (isTranslatable(e.target)) {
  626. activeField = e.target;
  627. position();
  628. } else if (!(e.target.closest && e.target.closest('.tr-modal'))) {
  629. activeField = null;
  630. hide();
  631. }
  632. });
  633. ​
  634. document.addEventListener('focusout', (e) => {
  635. if (e.target !== activeField || busy) return;
  636. setTimeout(() => {
  637. if (busy) return;
  638. const now = document.activeElement;
  639. if (now !== activeField && !(floatBtn && floatBtn.contains(now))) {
  640. activeField = null;
  641. hide();
  642. }
  643. }, 150);
  644. });
  645. ​
  646. let positionFrame = 0;
  647. const schedulePosition = () => {
  648. if (!activeField || positionFrame) return;
  649. positionFrame = requestAnimationFrame(() => {
  650. positionFrame = 0;
  651. position();
  652. });
  653. };
  654. ['scroll', 'resize'].forEach((evt) => window.addEventListener(evt, schedulePosition, { capture: true, passive: true }));
  655. document.addEventListener('input', (e) => {
  656. if (e.target === activeField) position();
  657. });
  658. ​
  659. (async function init() {
  660. apiConfig = await loadAPIConfig();
  661. })();
  662. })();
  663. ​