Hover Zoom Minus --

image popup: zoom, pan, scroll, pin, scale

当前为 2024-03-25 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Hover Zoom Minus --
  3. // @namespace Hover Zoom Minus --
  4. // @version 1.0.8
  5. // @description image popup: zoom, pan, scroll, pin, scale
  6. // @author Ein, Copilot AI
  7. // @match *://*/*
  8. // @license MIT
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12. // 01. to use hover over the image(container) to view a popup of the target image
  13. // 02. to zoom in/out use wheel up/down.
  14. // 03. click left mouse to lock popup this will make it move along with the mouse, click again to release (indicated by green border)
  15. // 04. while being locked"Y" the wheel up/down will act as scroll up/down
  16. // 05. double click will lock it on screen preventing it from being hidden
  17. // 06. hover below the image and click blue bar this will make a 3rd mode for wheel bottom, which will scroll next/previous image under an album
  18. // 07. while locked at screen (indicated by red outline) a single click with the blurred background will unblur it, only one popup per time, so the locked popup will prevent other popup to spawn
  19. // 08. double clicking on blurred background will de-spawn popup
  20. // 09. click on the corner to toggle scaling (blue) will retain current aspect ratio, double clicking will turn to 2nd mode for scaling (magenta) will not retain current aspect ratio
  21. // 10. return to original aspect ration via clicking on sides, if it's in an album to reset to aspect ratio on bottom side use double click
  22. // 11. to turn on/off hover at the bottom of the page
  23.  
  24. (function() {
  25. 'use strict';
  26.  
  27. // Configuration ----------------------------------------------------------
  28.  
  29. // Define regexp of web page you want HoverZoomMinus to run with,
  30. // 1st array value - default status at start of page: '1' for on, '0' for off
  31. // 2nd array value - spawn position for popup: 'center' for center of screen, '' for cursor position
  32. // 3rd array value - allowed interval for spawning popup; i.e. when exited on popup but immediately touches an img container thus making it "blink spawn blink spawn", experiment it with the right number
  33.  
  34. const siteConfig = {
  35. 'reddit.com': [1, 'center', '0'],
  36. '9gag.com': [1, 'center', '0'],
  37. 'feedly.com': [1, 'center', '200'],
  38. '4chan.org': [1, '', '400'],
  39. 'deviantart.com': [0, 'center', '300'],
  40. 'home': [1, 'center', '0'] /* for testing */
  41. };
  42.  
  43. // image container [hover box where popup triggers]
  44. const imgContainers = `
  45. /* ------- reddit */ ._3BxRNDoASi9FbGX01ewiLg, ._3Oa0THmZ3f5iZXAQ0hBJ0k > div, ._35oEP5zLnhKEbj5BlkTBUA, ._1ti9kvv_PMZEF2phzAjsGW > div,
  46. /* ------- reddit */ ._28TEYBuEdOuE3kN6UyoKMa div, ._3Oa0THmZ3f5iZXAQ0hBJ0k.WjuR4W-BBrvdtABBeKUMx div, ._3m20hIKOhTTeMgPnfMbVNN, zoomable-img.fixed,
  47. /* --------- 9gag */ .post-container .post-view > picture,
  48. /* ------- feedly */ .PinableImageContainer, .entryBody,
  49. /* -------- 4chan */ div.post div.file a,
  50. /* --- deviantart */ ._3_LJY, ._2e1g3, ._2SlAD, ._1R2x6
  51. `;
  52. // target img
  53. const imgElements = `
  54. /* ------- reddit */ ._2_tDEnGMLxpM6uOa2kaDB3, ._1dwExqTGJH2jnA-MYGkEL-, ._2_tDEnGMLxpM6uOa2kaDB3._1XWObl-3b9tPy64oaG6fax, zoomable-img.fixed img,
  55. /* --------- 9gag */ .post-container .post-view > picture > img,
  56. /* ------- feedly */ .pinable, .entryBody img,
  57. /* -------- 4chan */ div.post div.file img:nth-child(1), ._3Oa0THmZ3f5iZXAQ0hBJ0k.WjuR4W-BBrvdtABBeKUMx img, div.post div.file .fileThumb img,
  58. /* --- deviantart */ ._3_LJY img, ._2e1g3 img, ._2SlAD img, ._1R2x6 img
  59. `;
  60. // excluded element
  61. const nopeElements = `
  62. /* ------- reddit */ ._2ED-O3JtIcOqp8iIL1G5cg
  63. `;
  64. // AlbumSelector take note that it will only load image that are already in the DOM tree
  65. // example reddit will not include all until you press navigator buttons so most of the time this will only load a few image
  66. // unless you update it via interacting with navigator button thus updating the DOM tree (added new function for navigation it can now update)
  67. let albumSelector = [
  68. /* ---reddit */ { imgElement: '._1dwExqTGJH2jnA-MYGkEL-', albumElements: '._1apobczT0TzIKMWpza0OhL' },
  69. /* ---feedly */ { imgElement: '.entryBody > div > img', albumElements: '.entryBody > div' },
  70. /* ---feedly */ { imgElement: 'div[id^="Article-"] > div > span > img', albumElements: 'div[id^="Article-"]' },
  71. ];
  72.  
  73. // specialElements were if targeted, will call it's paired function
  74. // for convenience an element className "specialElement" will be remove during mouseout or function hidepopup() is called you can use that with specialElements function for temporary elements
  75. const specialElements = [
  76. /* --- 4chan */ { selector: 'div.post div.file .fileThumb img', func: SP1 },
  77. /* -- reddit */ { selector: '._1dwExqTGJH2jnA-MYGkEL-', func: SP2 },
  78. ];
  79. // special function triggered when clicking LeftBar/ wheel down in album mode
  80. const specialLeftBar = [
  81. /* -- reddit */ { selector: '._1dwExqTGJH2jnA-MYGkEL-', func: SPL }
  82. ];
  83. // special function triggered when clicking RightBar/ wheel up in album mode
  84. const specialRightBar = [
  85. /* -- reddit */ { selector: '._1dwExqTGJH2jnA-MYGkEL-', func: SPR }
  86. ];
  87. //-------------------------------------------------------------------------
  88. // Special Funtions -------------------------------------------------------
  89.  
  90.  
  91. // 4chan: replaces thumbnail so popup will use the larger version, or if its animated replace it with that
  92. function SP1(imageElement) {
  93. console.log('SP1 called');
  94. const parentElement = imageElement.parentElement;
  95. const href = parentElement.getAttribute('href');
  96. if (parentElement.tagName === 'a') {
  97. if (href.endsWith('.webm')) {
  98. const videoElement = document.createElement('video');
  99. videoElement.src = href;
  100. videoElement.controls = true;
  101. parentElement.replaceChild(videoElement, imageElement);
  102. } else {
  103. imageElement.setAttribute('src', href);
  104. }
  105. } else {
  106. imageElement.setAttribute('src', href);
  107. }
  108. }
  109.  
  110. // reddit: added the label/description of image along with the popup
  111. function SP2(imageElement) {
  112. if (enableP === 0) {
  113. return;
  114. }
  115. let closestElement = imageElement.closest('.m3aNC6yp8RrNM_-a0rrfa, .kcerW9lbT-se3SXd-wp2i');
  116. if (!closestElement) {
  117. return;
  118. }
  119. let descendantElement = closestElement.querySelector('._15nNdGlBIgryHV04IfAfpA');
  120. if (descendantElement) {
  121. document.querySelectorAll('.specialElement').forEach(e => e.remove());
  122. let title = descendantElement.getAttribute('title');
  123. const specialContent = document.createElement('div');
  124. specialContent.className = 'specialElement';
  125. specialContent.style.cssText = 'position:fixed; bottom:80px; left:50%; transform:translateX(-50%); width:100vw; text-align:center; font-size:40px; color:white; text-shadow:0 0 10px rgba(255,255,255,0.7); z-index:99999;';
  126. specialContent.textContent = title;
  127. document.body.appendChild(specialContent);
  128.  
  129. var specialBackdrop = document.createElement('div');
  130. specialBackdrop.className = 'specialElement';
  131. specialBackdrop.style.cssText = 'position:fixed; bottom:60px; left:0; width:100vw; height:80px; background:rgba(0,0,0,0.2); backdrop-filter:blur(5px); z-index:99998;';
  132. document.body.appendChild(specialBackdrop);
  133.  
  134. } else {
  135. return;
  136. }
  137. }
  138. function SPL(imageElement) {
  139. document.querySelectorAll('.specialElement').forEach(e => e.remove());
  140.  
  141. let closestElement = imageElement.closest('.kcerW9lbT-se3SXd-wp2i');
  142. var element = closestElement.querySelector('._1fSFPkxZ9pToLETLQT2dmc');
  143. if (element) element.click();
  144.  
  145. let descendantElement = closestElement.querySelector('._15nNdGlBIgryHV04IfAfpA');
  146. if (descendantElement) {
  147. let title = descendantElement.getAttribute('title');
  148. const specialContent = document.createElement('div');
  149. specialContent.className = 'specialElement';
  150. specialContent.style.cssText = 'position:fixed; bottom:80px; left:50%; transform:translateX(-50%); width:100vw; text-align:center; font-size:40px; color:white; text-shadow:0 0 10px rgba(255,255,255,0.7); z-index:99999;';
  151. specialContent.textContent = title;
  152. document.body.appendChild(specialContent);
  153.  
  154. var specialBackdrop = document.createElement('div');
  155. specialBackdrop.className = 'specialElement';
  156. specialBackdrop.style.cssText = 'position:fixed; bottom:60px; left:0; width:100vw; height:80px; background:rgba(0,0,0,0.2); backdrop-filter:blur(5px); z-index:99998;';
  157. document.body.appendChild(specialBackdrop);
  158. } else {
  159. return;
  160. }
  161. }
  162. function SPR(imageElement) {
  163. document.querySelectorAll('.specialElement').forEach(e => e.remove());
  164.  
  165. let closestElement = imageElement.closest('.kcerW9lbT-se3SXd-wp2i');
  166. var element = closestElement.querySelector('._3-JCOd-nY76g29C7ZVX_kl:last-child');
  167. if (element) element.click();
  168.  
  169. let descendantElement = closestElement.querySelector('._15nNdGlBIgryHV04IfAfpA');
  170. if (descendantElement) {
  171. let title = descendantElement.getAttribute('title');
  172. const specialContent = document.createElement('div');
  173. specialContent.className = 'specialElement';
  174. specialContent.style.cssText = 'position:fixed; bottom:80px; left:50%; transform:translateX(-50%); width:100vw; text-align:center; font-size:40px; color:white; text-shadow:0 0 10px rgba(255,255,255,0.7); z-index:99999;';
  175. specialContent.textContent = title;
  176. document.body.appendChild(specialContent);
  177.  
  178. var specialBackdrop = document.createElement('div');
  179. specialBackdrop.className = 'specialElement';
  180. specialBackdrop.style.cssText = 'position:fixed; bottom:60px; left:0; width:100vw; height:80px; background:rgba(0,0,0,0.2); backdrop-filter:blur(5px); z-index:99998;';
  181. document.body.appendChild(specialBackdrop);
  182. } else {
  183. return;
  184. }
  185. }
  186.  
  187.  
  188. //-------------------------------------------------------------------------
  189.  
  190.  
  191. // Configuration variables
  192. const currentHref = window.location.href;
  193. let enableP, positionP, intervalP, URLmatched;
  194. Object.keys(siteConfig).some((config) => {
  195. const regex = new RegExp(config);
  196. if (currentHref.match(regex)) {
  197. [enableP, positionP, intervalP] = siteConfig[config];
  198. URLmatched = true;
  199. return true;
  200. }
  201. });
  202.  
  203.  
  204. // The HoverZoomMinus Function---------------------------------------------
  205. function HoverZoomMinus() {
  206. let isshowPopupEnabled = true;
  207. isshowPopupEnabled = true;
  208.  
  209. const style = document.createElement('style');
  210. style.type = 'text/css';
  211. style.innerHTML = `
  212. .popup-container {
  213. display: none;
  214. z-index: 1001;
  215. cursor: move;
  216. }
  217. .popup-image {
  218. max-height: calc(90vh - 10px);
  219. display: none;
  220. }
  221. .popup-backdrop {
  222. position: fixed;
  223. top: 0;
  224. left: 0;
  225. width: 100vw;
  226. height: 100vh;
  227. display: none;
  228. z-index: 1000;
  229. }
  230. .centerBox {
  231. top: 40px;
  232. left: 40px;
  233. position: absolute;
  234. height: calc(100% - 80px);
  235. width: calc(100% - 80px);
  236. z-index: 9999;
  237. }
  238. .TopBar,
  239. .BottomBar,
  240. .LeftBar,
  241. .RightBar {
  242. opacity: 0;
  243. box-sizing: border-box;
  244. background: #0000;
  245. position: absolute;
  246. z-index: 9999;
  247. &::after {
  248. content: "";
  249. position: absolute;
  250. }
  251. }
  252. .TopBar,
  253. .BottomBar {
  254. height: 40px;
  255. width: calc(100% - 80px);
  256. left: 40px;
  257. &::after {
  258. display: none;
  259. width: 25px;
  260. height: 25px;
  261. transform: rotate(45deg) translateX(-50%) translateY(-50%);
  262. }
  263. }
  264. .TopBar { top: 0; }
  265. .BottomBar { bottom: 0; }
  266. .TopBar::after {
  267. left: calc(50% - 17px);
  268. top: calc(50% + 15px);
  269. border-top: 5px solid #6f8e9e;
  270. border-left: 5px solid #6f8e9e;
  271. }
  272. .BottomBar::after {
  273. left: calc(50% - 2px);
  274. bottom: -8px;
  275. border-bottom: 5px solid #6f8e9e;
  276. border-right: 5px solid #6f8e9e;
  277. }
  278. .LeftBar,
  279. .RightBar {
  280. height: calc(100% - 80px);
  281. width: 40px;
  282. top: 40px;
  283. &::before {
  284. content: "";
  285. display: block;
  286. position: absolute;
  287. top: 50%;
  288. width: 40px;
  289. height: 40px;
  290. transform: translateY(-50%);
  291. border-radius: 9999px;
  292. background: #242526;
  293. }
  294. &::after {
  295. content: "";
  296. display: block;
  297. position: absolute;
  298. top: calc(50% + -2px);
  299. width: 15px;
  300. height: 15px;
  301. }
  302. &:hover::before {
  303. display: none;
  304. }
  305. &:hover::after {
  306. width: 25px;
  307. height: 25px;
  308. border-color: #6f8e9e;
  309. border-width: 5px;
  310. }
  311. }
  312. .LeftBar { left: 0; }
  313. .RightBar { right: 0; }
  314. .LeftBar::before { left: 5px; }
  315. .RightBar::before { right: 5px; }
  316. .LeftBar:hover::after { left: 3px; }
  317. .RightBar:hover::after { right: 3px; }
  318. .LeftBar::after {
  319. transform: rotate(45deg) translateY(-50%);
  320. border-bottom: 3px solid #777;
  321. border-left: 3px solid #777;
  322. left: 12px;
  323. }
  324. .RightBar::after {
  325. transform: rotate(-45deg) translateY(-50%);
  326. border-bottom: 3px solid #777;
  327. border-right: 3px solid #777;
  328. right: 12px;
  329. }
  330. .CornerBox {
  331. box-sizing: border-box;
  332. height: 40px;
  333. width: 40px;
  334. background: #0000;
  335. position: absolute;
  336. z-index: 9999;
  337. }
  338. .CornerBox.TR {
  339. top: 0;
  340. right: 0;
  341. font-size: 11px;
  342. text-align: center;
  343. line-height: 25px;
  344. color:white;
  345. text-shadow:0 0 4px rgba(255,255,255,0.7);
  346. }
  347. .CornerBox.TL {
  348. top: 0;
  349. left: 0;
  350. }
  351. .CornerBox.BR {
  352. bottom: 0;
  353. right: 0;
  354. }
  355. .CornerBox.BL {
  356. bottom: 0;
  357. left: 0;
  358. }
  359. .CropCover {
  360. position:absolute;
  361. display: block;
  362. cursor: move;
  363. box-sizing: border-box;
  364. height:100%;
  365. width:100%;
  366. left: 0;
  367. top: 0;
  368. z-index:1;
  369. }
  370. `;
  371.  
  372. document.head.appendChild(style);
  373. const backdrop = document.createElement('div');
  374. backdrop.className = 'popup-backdrop';
  375. document.body.appendChild(backdrop);
  376. const popupContainer = document.createElement('div');
  377. popupContainer.className = 'popup-container';
  378. document.body.appendChild(popupContainer);
  379. const popup = document.createElement('img');
  380. popup.className = 'popup-image';
  381. popupContainer.appendChild(popup);
  382.  
  383. const BottomBar = document.createElement('div');
  384. BottomBar.className = 'BottomBar';
  385. popupContainer.appendChild(BottomBar);
  386. const TopBar = document.createElement('div');
  387. TopBar.className = 'TopBar';
  388. popupContainer.appendChild(TopBar);
  389. const RightBar = document.createElement('div');
  390. RightBar.className = 'RightBar';
  391. popupContainer.appendChild(RightBar);
  392. const LeftBar = document.createElement('div');
  393. LeftBar.className = 'LeftBar';
  394. popupContainer.appendChild(LeftBar);
  395.  
  396. const TR = document.createElement('div');
  397. TR.className = 'CornerBox TR';
  398. popupContainer.appendChild(TR);
  399. const TL = document.createElement('div');
  400. TL.className = 'CornerBox TL';
  401. popupContainer.appendChild(TL);
  402. const BR = document.createElement('div');
  403. BR.className = 'CornerBox BR';
  404. popupContainer.appendChild(BR);
  405. const BL = document.createElement('div');
  406. BL.className = 'CornerBox BL';
  407. popupContainer.appendChild(BL);
  408.  
  409. const centerBox = document.createElement('div');
  410. centerBox.className = 'popup centerBox';
  411. popupContainer.appendChild(centerBox);
  412.  
  413. const style2 = document.createElement('style');
  414. style2.type = 'text/css';
  415. document.head.appendChild(style2);
  416.  
  417. const CropCover = document.createElement('div');
  418. CropCover.className = 'CropCover';
  419. popupContainer.appendChild(CropCover);
  420.  
  421.  
  422. //-------------------------------------------------------------------------
  423.  
  424. // Variable
  425. const ZOOM_SPEED = 0.005;
  426. let pageDirection;
  427. let isLockedY = false;
  428. let isLockedX = false;
  429. let scale = 1;
  430. let clickTimeout;
  431. let popupTimer;
  432. let isScale, isScaleTR, isScaleBR, isScaleTL, isScaleBL;
  433. let rect, rectT, rectH, rectL, rectW;
  434. let rectIH, rectIW, rectIT, rectIL, rectIRatio;
  435. let rectzT, rectzH, rectzL, rectzW, rectzRatio;
  436. let scaleCurrentX, scaleCurrentY;
  437. let scaleFactorX, scaleFactorY;
  438. let offsetX, offsetY, offsetXR, offsetYT, offsetXL, offsetYB;
  439. let offsetRatioY, offsetRatioX;
  440. let ishidePopupEnabled = true;
  441. let ScaleMode2 = false;
  442. let imgElementsList = [];
  443. let currentZeroImgElement;
  444. let rectIzRatio;
  445.  
  446. function NoMode() {
  447. isLockedY = false;
  448. isLockedX = false;
  449. isScale = false;
  450. isScaleTR = false;
  451. isScaleTL = false;
  452. isScaleBL = false;
  453. isScaleBR = false;
  454. popupContainer.style.border = '';
  455. TR.style.border = '';
  456. BR.style.border = '';
  457. TL.style.border = '';
  458. BL.style.border = '';
  459. }
  460.  
  461. function LockedYMode() {
  462. NoMode();
  463. isLockedY = true;
  464. popupContainer.style.borderLeft = '6px solid #00ff00';
  465. popupContainer.style.borderRight = '6px solid #00ff00';
  466. LeftBar.style.opacity = '0';
  467. RightBar.style.opacity = '0';
  468. }
  469. function LockedXMode() {
  470. NoMode();
  471. LockedScreen();
  472. isLockedX = true;
  473. popupContainer.style.borderTop = '6px solid #00ff00';
  474. popupContainer.style.borderBottom = '6px solid #00ff00';
  475. LeftBar.style.opacity = '1';
  476. RightBar.style.opacity = '1';
  477. style2.innerHTML = `
  478. .LeftBar::before,
  479. .LeftBar::after,
  480. .RightBar::before,
  481. .RightBar::after {
  482. display: block;
  483. }
  484. `;
  485. }
  486.  
  487. function toggleLockedScreen(event) {
  488. ishidePopupEnabled = !ishidePopupEnabled;
  489. popupContainer.style.outline = ishidePopupEnabled ? '' : '6px solid #ae0001';
  490. }
  491.  
  492. function LockedScreen() {
  493. ishidePopupEnabled = false;
  494. popupContainer.style.outline = '6px solid #ae0001';
  495. }
  496. function ScalingMode1() {
  497. TL.style.borderTop = '6px solid #0000ff';
  498. TR.style.borderTop = '6px solid #0000ff';
  499. TL.style.borderLeft = '6px solid #0000ff';
  500. BL.style.borderLeft = '6px solid #0000ff';
  501. TR.style.borderRight = '6px solid #0000ff';
  502. BR.style.borderRight = '6px solid #0000ff';
  503. BR.style.borderBottom = '6px solid #0000ff';
  504. BL.style.borderBottom = '6px solid #0000ff';
  505. }
  506. function ScalingMode2() {
  507. ScalingMode1();
  508. TL.style.borderColor = '#ff00ff';
  509. TR.style.borderColor = '#ff00ff';
  510. BL.style.borderColor = '#ff00ff';
  511. BR.style.borderColor = '#ff00ff';
  512. }
  513. function ScalingMode0() {
  514. TL.style.border = '';
  515. TR.style.border = '';
  516. BL.style.border = '';
  517. BR.style.border = '';
  518. }
  519.  
  520. function ResetGeometry() {
  521. let rectF = popup.getBoundingClientRect();
  522. rectzH = rectF.height;
  523. rectzW = rectF.width;
  524. rectzT = rectF.top;
  525. rectzL = rectF.left;
  526. popup.style.maxHeight = rectzH + 'px';
  527. popup.style.height = rectzH + 'px';
  528. popup.style.width = rectzW + 'px';
  529. popupContainer.style.top = rectzT + (rectzH / 2) + 'px';
  530. popupContainer.style.left = rectzL + (rectzW / 2) + 'px';
  531. popupContainer.style.transformOrigin = '50% 50% 0px';
  532. popupContainer.style.transform = `translate(-50%, -50%) scaleX(1) scaleY(1)`;
  533. }
  534.  
  535. function BarClear() {
  536. TL.style.border = '';
  537. TR.style.border = '';
  538. BL.style.border = '';
  539. BR.style.border = '';
  540. TL.style.background = '';
  541. TR.style.background = '';
  542. BL.style.background = '';
  543. BR.style.background = '';
  544. TopBar.style.background = '';
  545. LeftBar.style.background = '';
  546. RightBar.style.background = '';
  547. BottomBar.style.background = '';
  548. popupContainer.style.border = '';
  549. LeftBar.style.opacity = '0';
  550. RightBar.style.opacity = '0';
  551. }
  552.  
  553.  
  554. function NavigateAlbum() {
  555. let pair = albumSelector.find(pair => currentZeroImgElement.matches(pair.imgElement));
  556. if (pair) {
  557. let ancestorElement = currentZeroImgElement.closest(pair.albumElements);
  558. if (ancestorElement) {
  559. imgElementsList = Array.from(ancestorElement.querySelectorAll(pair.imgElement));
  560. let zeroIndex = imgElementsList.indexOf(currentZeroImgElement);
  561. let direction = pageDirection;
  562. let newIndex = zeroIndex + direction;
  563.  
  564. TR.textContent = `${newIndex + 1}/${imgElementsList.length}`;
  565.  
  566. if (newIndex <= 0) {
  567. LeftBar.style.display = 'none';
  568. TR.textContent = `1/${imgElementsList.length}`;
  569. } else {
  570. LeftBar.style.display = '';
  571. }
  572. if (newIndex >= imgElementsList.length - 1) {
  573. RightBar.style.display = 'none';
  574. TR.textContent = `${imgElementsList.length}/${imgElementsList.length}`;
  575. } else {
  576. RightBar.style.display = '';
  577. }
  578. if (newIndex < 0 || newIndex >= imgElementsList.length) {
  579. return;
  580. }
  581. currentZeroImgElement = imgElementsList[newIndex];
  582. popup.src = currentZeroImgElement.src;
  583. }
  584. }
  585. }
  586.  
  587.  
  588.  
  589.  
  590. // Mouse Click: Center
  591. centerBox.addEventListener('click', function(event) {
  592. if (clickTimeout) clearTimeout(clickTimeout);
  593. clickTimeout = setTimeout(function() {
  594. ResetGeometry();
  595. if (!isScale) {
  596. isLockedY = !isLockedY;
  597. }
  598. if (isLockedY) {
  599. LockedYMode();
  600. let rect = popupContainer.getBoundingClientRect();
  601. offsetX = event.clientX - rect.left - (rect.width / 2);
  602. offsetY = event.clientY - rect.top - (rect.height / 2);
  603. } else {
  604. NoMode();
  605. }
  606. }, 300);
  607. });
  608.  
  609. centerBox.addEventListener('dblclick', function(event) {
  610. clearTimeout(clickTimeout);
  611. toggleLockedScreen();
  612. if (!ishidePopupEnabled) {
  613. backdrop.style.display = 'block';
  614. backdrop.style.zIndex = '999';
  615. backdrop.style.backdropFilter = 'blur(10px)';
  616. }
  617. });
  618. //-------------------------------------------------------------------------
  619.  
  620. // Mouse Click: Corners
  621. document.querySelectorAll('.CornerBox').forEach(element => {
  622. element.addEventListener('click', function(event) {
  623. ishidePopupEnabled = false;
  624. if (isScale) {
  625. BarClear();
  626. isLockedY = false;
  627. isLockedX = false;
  628. popup.style.border = '';
  629.  
  630. const clickedElement = event.target;
  631. const popupContainer = clickedElement.parentElement;
  632. const currentTransform = window.getComputedStyle(popupContainer).transform;
  633. const matrixMatch = currentTransform.match(/^matrix\(([^,]+), [^,]+, [^,]+, ([^,]+), [^,]+, [^,]+\)$/);
  634. if (matrixMatch) {
  635. scaleCurrentX = parseFloat(matrixMatch[1]);
  636. scaleCurrentY = parseFloat(matrixMatch[2]);
  637. }
  638.  
  639. let rect = popupContainer.getBoundingClientRect();
  640. offsetYT = event.clientY - rect.top;
  641. offsetXL = event.clientX - rect.left;
  642. offsetYB = rect.height + rect.top - event.clientY;
  643. offsetXR = rect.width + rect.left - event.clientX;
  644.  
  645. rectT = rect.top;
  646. rectL = rect.left;
  647. rectH = rect.height;
  648. rectW = rect.width;
  649.  
  650. } else {
  651. LockedScreen();
  652. ResetGeometry();
  653. }
  654.  
  655. });
  656. });
  657. document.querySelectorAll('.CrnerBox').forEach(element => {
  658. element.addEventListener('click', function(event) {
  659. if (clickTimeout) clearTimeout(clickTimeout);
  660. isScale = !isScale;
  661. }, 300);
  662. });
  663. document.querySelectorAll('.CornerBox').forEach(element => {
  664. element.addEventListener('dblclick', function(event) {
  665. clearTimeout(clickTimeout);
  666. ScaleMode2 = !ScaleMode2;
  667. });
  668. });
  669.  
  670. TL.addEventListener('click', function(event) {
  671. if (clickTimeout) clearTimeout(clickTimeout);
  672. clickTimeout = setTimeout(function() {
  673. isScaleTL = !isScaleTL;
  674. isScaleTR = false;
  675. isScaleBL = false;
  676. isScaleBR = false;
  677. }, 300);
  678. });
  679. TR.addEventListener('click', function(event) {
  680. if (clickTimeout) clearTimeout(clickTimeout);
  681. clickTimeout = setTimeout(function() {
  682. isScaleTL = false;
  683. isScaleTR = !isScaleTR;
  684. isScaleBL = false;
  685. isScaleBR = false;
  686. }, 300);
  687. });
  688. BL.addEventListener('click', function(event) {
  689. if (clickTimeout) clearTimeout(clickTimeout);
  690. clickTimeout = setTimeout(function() {
  691. isScaleTL = false;
  692. isScaleTR = false;
  693. isScaleBL = !isScaleBL;
  694. isScaleBR = false;
  695. }, 300);
  696. });
  697. BR.addEventListener('click', function(event) {
  698. if (clickTimeout) clearTimeout(clickTimeout);
  699. clickTimeout = setTimeout(function() {
  700. isScaleTL = false;
  701. isScaleTR = false;
  702. isScaleBL = false;
  703. isScaleBR = !isScaleBR;
  704. }, 300);
  705. });
  706.  
  707. //-------------------------------------------------------------------------
  708.  
  709.  
  710. // Mouse Move: Pan, Scale
  711. document.addEventListener('mousemove', function(event) {
  712. // Panning mode: popup locked and follows the mouse
  713. if (isLockedY) {
  714. popupContainer.style.left = (event.clientX - offsetX) + 'px';
  715. popupContainer.style.top = (event.clientY - offsetY) + 'px';
  716. } else if (isScale) {
  717. ScalingMode1();
  718. if (ScaleMode2) {
  719. ScalingMode2();
  720. }
  721. if (isScaleTL) {
  722. popupContainer.style.transformOrigin = '100% 100% 0px';
  723. scaleFactorY = scaleCurrentY * (1 + (rectT - event.clientY + offsetYT) / rectH);
  724. scaleFactorX = scaleCurrentX * (1 + (rectL - event.clientX + offsetXL) / rectW);
  725. } else if (isScaleTR) {
  726. popupContainer.style.transformOrigin = '0 100% 0px';
  727. scaleFactorY = scaleCurrentY * (1 + (rectT - event.clientY + offsetYT) / rectH);
  728. scaleFactorX = scaleCurrentX * ((event.clientX - rectL + offsetXR) / rectW);
  729. } else if (isScaleBL) {
  730. popupContainer.style.transformOrigin = '100% 0% 0px';
  731. scaleFactorY = scaleCurrentY * ((event.clientY - rectT + offsetYB) / rectH);
  732. scaleFactorX = scaleCurrentX * (1 + (rectL - event.clientX + offsetXL) / rectW);
  733. } else if (isScaleBR) {
  734. popupContainer.style.transformOrigin = '0% 0% 0px';
  735. scaleFactorY = scaleCurrentY * ((event.clientY - rectT + offsetYB) / rectH);
  736. scaleFactorX = scaleCurrentX * ((event.clientX - rectL + offsetXR) / rectW);
  737. }
  738. if (ScaleMode2) {
  739. popupContainer.style.transform = `translate(-50%, -50%) scaleX(${scaleFactorX}) scaleY(${scaleFactorY})`;
  740.  
  741. } else {
  742. popupContainer.style.transform = `translate(-50%, -50%) scaleX(${scaleFactorX}) scaleY(${scaleFactorX})`;
  743. }
  744. }
  745. });
  746.  
  747.  
  748. // Mouse Wheel: Zoom, Scroll, Navigate
  749. function ZoomOrScroll(event) {
  750. event.preventDefault();
  751. if (isLockedY) {
  752. let deltaY = event.deltaY * -ZOOM_SPEED;
  753. let newTop = parseInt(popupContainer.style.top) || 0;
  754. newTop += deltaY * 100;
  755. popupContainer.style.top = newTop + 'px';
  756. offsetY -= deltaY * 100;
  757.  
  758. } else if (isLockedX && currentZeroImgElement) {
  759. pageDirection = event.deltaY > 0 ? 1 : -1;
  760. NavigateAlbum();
  761.  
  762. if (pageDirection === 1) {
  763. const imageElement = currentContainer.querySelector(imgElements);
  764. specialRightBar.forEach(pair => {
  765. if (imageElement.matches(pair.selector)) {
  766. pair.func(imageElement);
  767. }
  768. });
  769. } else {
  770. const imageElement = currentContainer.querySelector(imgElements);
  771. specialLeftBar.forEach(pair => {
  772. if (imageElement.matches(pair.selector)) {
  773. pair.func(imageElement);
  774. }
  775. });
  776. }
  777.  
  778. } else {
  779. scale += event.deltaY * -ZOOM_SPEED;
  780. scale = Math.min(Math.max(0.125, scale), 10);
  781. popupContainer.style.transform = `translate(-50%, -50%) scaleX(${scale}) scaleY(${scale})`;
  782. }
  783. }
  784. popupContainer.addEventListener('wheel', ZoomOrScroll);
  785. //-------------------------------------------------------------------------
  786.  
  787.  
  788. // Bottom Bar: Album
  789. BottomBar.addEventListener('mouseenter', function(e) {
  790.  
  791. if (isScale) {
  792. return;
  793. } else {
  794. BottomBar.style.opacity = '1';
  795.  
  796. let rect = popup.getBoundingClientRect();
  797. rectzRatio = rect.height / rect.width;
  798. rectIzRatio = Number(rectIRatio.toFixed(3)) / Number(rectzRatio.toFixed(3));
  799.  
  800. if (isAlbum) {
  801. if (!isScale) {
  802. BottomBar.style.background = 'linear-gradient(to right, rgba(0, 0, 255, 0) 0%, rgba(0, 0, 255, 0.5) 25%, rgba(0, 0, 255, 0.5) 75%, rgba(0, 0, 255, 0) 100%)';
  803. }
  804. } else {
  805. BottomBar.style.background = '';
  806. if (!( (rectIzRatio === 1) || isScale ) ) {
  807. style2.innerHTML = `
  808. .BottomBar::after {
  809. display: block;
  810. }
  811. `;
  812. BL.style.background = 'rgba(0, 0, 0, 0.5)';
  813. BR.style.background = 'rgba(0, 0, 0, 0.5)';
  814. BottomBar.style.background = 'rgba(0, 0, 0, 0.5)';
  815. } else {
  816. style2.innerHTML = `
  817. .BottomBar::after {
  818. display: none;
  819. }
  820. `;
  821. }
  822. }
  823. }
  824. });
  825.  
  826. BottomBar.addEventListener('mouseleave', function() {
  827. BottomBar.style.opacity = '0';
  828. if (!isLockedX) {
  829. BarClear();
  830. }
  831. });
  832. BottomBar.addEventListener('click', function(event) {
  833. if (clickTimeout) clearTimeout(clickTimeout);
  834. clickTimeout = setTimeout(function() {
  835. if (!isScale) {
  836. LeftBar.style.opacity = '0';
  837. RightBar.style.opacity = '0';
  838. }
  839. if (isAlbum) {
  840. ResetGeometry();
  841. isLockedX = !isLockedX;
  842. if (isLockedX) {
  843. LockedXMode();
  844. LeftBar.style.opacity = '1';
  845. RightBar.style.opacity = '1';
  846. } else {
  847. popupContainer.style.border = '';
  848. }
  849. } else {
  850. ResetGeometry();
  851. if (isScale) {
  852. isScale = false;
  853. popup.style.maxHeight = rectzH + 'px';
  854. popup.style.height = rectzH + 'px';
  855. offsetRatioY = 0;
  856. } else {
  857. popup.style.maxHeight = 'unset';
  858. popup.style.height = '';
  859. offsetRatioY = (rectzH - rectzW * rectIRatio) / 2 ;
  860. }
  861. popupContainer.style.top = rectzT + (rectzH / 2) + offsetRatioY + 'px';
  862. }
  863. }, 300);
  864. });
  865.  
  866.  
  867. BottomBar.addEventListener('dblclick', function(event) {
  868. clearTimeout(clickTimeout);
  869.  
  870. if (isAlbum) {
  871. ResetGeometry();
  872. if (isScale) {
  873. popup.style.maxHeight = rectzH + 'px';
  874. popup.style.height = rectzH + 'px';
  875. offsetRatioY = 0;
  876. } else {
  877. popup.style.maxHeight = 'unset';
  878. popup.style.height = '';
  879. offsetRatioY = (rectzH - rectzW * rectIRatio) / 2 ;
  880. }
  881. popupContainer.style.top = rectzT + (rectzH / 2) + offsetRatioY + 'px';
  882. BarClear();
  883. } else {
  884. return;
  885. }
  886. });
  887. //-------------------------------------------------------------------------
  888.  
  889.  
  890. // Indicators
  891. document.querySelectorAll('.CornerBox').forEach(element => {
  892. element.addEventListener('mouseenter', function(event) {
  893. ScalingMode1();
  894. if (ScaleMode2) {
  895. ScalingMode2();
  896. }
  897. });
  898. element.addEventListener('mouseleave', function(event) {
  899. if (!isScale) {
  900. ScalingMode0();
  901. }
  902. });
  903. });
  904.  
  905. // Re-scale/ Navigate
  906. TopBar.addEventListener('click', function(event) {
  907. if (clickTimeout) clearTimeout(clickTimeout);
  908. clickTimeout = setTimeout(function() {
  909. ResetGeometry();
  910. if (isScale) {
  911. isScale = false;
  912. popup.style.maxHeight = rectzH + 'px';
  913. popup.style.height = rectzH + 'px';
  914. offsetRatioY = 0;
  915. } else {
  916. popup.style.maxHeight = 'unset';
  917. popup.style.height = '';
  918. offsetRatioY = (rectzH - rectzW * rectIRatio) / 2 ;
  919. }
  920. popupContainer.style.top = rectzT + (rectzH / 2) - offsetRatioY + 'px';
  921. BarClear();
  922.  
  923. }, 300);
  924. });
  925.  
  926.  
  927. const styleCrop = document.createElement('style');
  928. styleCrop.type = 'text/css';
  929. styleCrop.innerHTML = `
  930. .cropArea1,
  931. .cropArea2,
  932. .cropArea3,
  933. .cropArea4 {
  934. display:none;
  935. }`;
  936.  
  937.  
  938. const cropArea1 = document.createElement('div');
  939. const cropArea2 = document.createElement('div');
  940. const cropArea3 = document.createElement('div');
  941. const cropArea4 = document.createElement('div');
  942.  
  943. let clickX1, clickY1, clickX2, clickY2;
  944. let clickCount;
  945. let cropAreaSet = false;
  946.  
  947. TopBar.addEventListener('dblclick', function(event) {
  948. clearTimeout(window.clickTimeout);
  949.  
  950. clickCount = 0;
  951. ResetGeometry()
  952. cropAreaSet = false;
  953.  
  954. const cropArea1 = document.createElement('div');
  955. const cropArea2 = document.createElement('div');
  956. cropArea1.className = 'cropArea1';
  957. cropArea2.className = 'cropArea2';
  958. document.body.appendChild(cropArea1);
  959. document.body.appendChild(cropArea2);
  960.  
  961. cropArea1.style.display = 'block';
  962. cropArea1.style.zIndex = '9999';
  963. cropArea1.style.position = 'fixed';
  964. cropArea1.style.background = 'rgba(0, 0, 0, 0.4)';
  965.  
  966. cropArea2.style.display = 'block';
  967. cropArea2.style.zIndex = '9999';
  968. cropArea2.style.position = 'fixed';
  969. cropArea2.style.background = 'rgba(0, 0, 0, 0.4)';
  970.  
  971. const cropArea3 = document.createElement('div');
  972. const cropArea4 = document.createElement('div');
  973. cropArea3.className = 'cropArea3';
  974. cropArea4.className = 'cropArea4';
  975. document.body.appendChild(cropArea3);
  976. document.body.appendChild(cropArea4);
  977.  
  978. cropArea3.style.display = 'block';
  979. cropArea3.style.zIndex = '9999';
  980. cropArea3.style.position = 'fixed';
  981. cropArea3.style.background = 'rgba(0, 0, 0, 0.4)';
  982.  
  983. cropArea4.style.display = 'block';
  984. cropArea4.style.zIndex = '9999';
  985. cropArea4.style.position = 'fixed';
  986. cropArea4.style.background = 'rgba(0, 0, 0, 0.4)';
  987.  
  988. CropCover.style.zIndex = '99999';
  989. CropCover.style.border = '1px solid yellow';
  990.  
  991. let rect = popup.getBoundingClientRect();
  992. rectzH = rect.height;
  993. rectzW = rect.width;
  994. rectzT = rect.top;
  995. rectzL = rect.left;
  996.  
  997. let clickTimeout;
  998.  
  999. CropCover.addEventListener('click', function(e) {
  1000. // 1st click for Top Left cropping position
  1001. if (clickCount === 0) {
  1002. clickX1 = e.clientX;
  1003. clickY1 = e.clientY;
  1004. clickCount = 1;
  1005. // 2nd click for Bottom Right cropping position
  1006. } else if (clickCount === 1) {
  1007. clickX2 = e.clientX;
  1008. clickY2 = e.clientY;
  1009. cropAreaSet = true;
  1010. cropImage();
  1011. }
  1012. });
  1013.  
  1014. document.addEventListener('mousemove', function(event) {
  1015. cropArea1.style.left = '0px';
  1016. cropArea1.style.top = '0px';
  1017. cropArea1.style.height = '100vh';
  1018. cropArea2.style.top = '0px';
  1019. if (clickCount === 0) {
  1020. cropArea1.style.width = event.clientX + 'px';
  1021. cropArea2.style.left = event.clientX + 'px';
  1022. cropArea2.style.height = event.clientY + 'px';
  1023. cropArea2.style.width = `calc(100vw - ${event.clientX}px)`;
  1024. } else if (clickCount === 1) {
  1025. cropArea1.style.width = clickX1 + 'px';
  1026. cropArea2.style.left = clickX1 + 'px';
  1027. cropArea2.style.height = clickY1 + 'px';
  1028. cropArea2.style.width = `calc(100vw - ${clickX1}px)`;
  1029. }
  1030. if (!cropAreaSet && (clickCount === 1)) {
  1031. cropArea3.style.left = clickX1 + 'px';
  1032. cropArea3.style.top = event.clientY + 1 + 'px';
  1033. cropArea3.style.width = `calc(${event.clientX}px + 1px - ${clickX1}px)`;
  1034. cropArea3.style.height = `calc(100vh - 1px - ${event.clientY}px)`;
  1035.  
  1036. cropArea4.style.left = event.clientX + 1 + 'px';
  1037. cropArea4.style.top = clickY1 + 'px'
  1038. cropArea4.style.height = `calc(100vh - 1px - ${clickY1}px)`;
  1039. cropArea4.style.width = `calc(100vw - 1px - ${event.clientX}px)`;
  1040. }
  1041. });
  1042.  
  1043. });
  1044.  
  1045.  
  1046. function cropImage() {
  1047.  
  1048.  
  1049. var canvas = document.createElement('canvas');
  1050. canvas.id = 'cropCanvas';
  1051. var ctx = canvas.getContext('2d');
  1052. document.body.appendChild(canvas);
  1053.  
  1054. let cropiX, cropiY, cropiW, cropiH, cropzW, cropzH
  1055.  
  1056. cropiX = rectIW * ((clickX1 - rectzL) / rectzW);
  1057. cropiY = rectIH * ((clickY1 - rectzT) / rectzH);
  1058.  
  1059. cropzW = clickX2 - clickX1
  1060. cropzH = clickY2 - clickY1
  1061.  
  1062. cropiW = rectIW * (cropzW / rectzW);
  1063. cropiH = rectIH * (cropzH / rectzH);
  1064.  
  1065. canvas.width = cropzW;
  1066. canvas.height = cropzH;
  1067.  
  1068. var image = new Image();
  1069. image.crossOrigin = "anonymous";
  1070. image.src = popup.src
  1071.  
  1072. image.onload = function() {
  1073. if (clickCount === 0) {
  1074. return;
  1075. }
  1076. ctx.drawImage(image, cropiX, cropiY, cropiW, cropiH, 0, 0, cropzW, cropzH);
  1077. saveImage(canvas);
  1078.  
  1079. clickCount = 0;
  1080. cropAreaSet = false;
  1081. CropCover.style.zIndex = '1';
  1082. CropCover.style.border = '';
  1083. document.querySelectorAll('.cropArea1').forEach(e => e.remove())
  1084. document.querySelectorAll('.cropArea2').forEach(e => e.remove())
  1085. document.querySelectorAll('.cropArea3').forEach(e => e.remove())
  1086. document.querySelectorAll('.cropArea4').forEach(e => e.remove())
  1087. }
  1088. }
  1089. function saveImage(canvas) {
  1090. if (confirm('Do you want to save the image?')) {
  1091.  
  1092. var croppedImageDataURL = canvas.toDataURL('image/png');
  1093. var downloadLink = document.createElement('a');
  1094. downloadLink.href = croppedImageDataURL;
  1095. downloadLink.download = 'cropped-image.png';
  1096. document.body.appendChild(downloadLink);
  1097. downloadLink.click();
  1098. document.body.removeChild(downloadLink);
  1099.  
  1100. var removecropCanvas = document.getElementById('cropCanvas');
  1101. removecropCanvas.remove();
  1102. }
  1103. }
  1104.  
  1105. let zeroIndex;
  1106. LeftBar.addEventListener('click', function(event) {
  1107. if (clickTimeout) clearTimeout(clickTimeout);
  1108. clickTimeout = setTimeout(function() {
  1109. ResetGeometry();
  1110. if (isScale) {
  1111. isScale = false;
  1112. popup.style.width = rectzW + 'px';
  1113. offsetRatioX = 0;
  1114. } else {
  1115. popup.style.width = '';
  1116. offsetRatioX = (rectzW - (rectzH / rectIRatio)) / 2 ;
  1117. }
  1118. if (isLockedX && currentZeroImgElement) {
  1119. pageDirection = -1;
  1120. NavigateAlbum();
  1121.  
  1122. TL.style.background = 'rgba(0, 0, 0, 0.5)';
  1123. BL.style.background = 'rgba(0, 0, 0, 0.5)';
  1124. LeftBar.style.background = 'rgba(0, 0, 0, 0.5)';
  1125.  
  1126. const imageElement = currentContainer.querySelector(imgElements);
  1127. specialLeftBar.forEach(pair => {
  1128. if (imageElement.matches(pair.selector)) {
  1129. pair.func(imageElement);
  1130. }
  1131. });
  1132.  
  1133. } else {
  1134. popupContainer.style.left = rectzL + (rectzW / 2) - offsetRatioX + 'px';
  1135. }
  1136. }, 300);
  1137. });
  1138. RightBar.addEventListener('click', function(event) {
  1139. if (clickTimeout) clearTimeout(clickTimeout);
  1140. clickTimeout = setTimeout(function() {
  1141. ResetGeometry();
  1142. if (isScale) {
  1143. isScale = false;
  1144. popup.style.width = rectzW + 'px';
  1145. offsetRatioX = 0;
  1146. } else {
  1147. popup.style.width = '';
  1148. offsetRatioX = (rectzW - (rectzH / rectIRatio)) / 2 ;
  1149. }
  1150. if (isLockedX && currentZeroImgElement) {
  1151. pageDirection = 1;
  1152. NavigateAlbum();
  1153. TR.style.background = 'rgba(0, 0, 0, 0.5)';
  1154. BR.style.background = 'rgba(0, 0, 0, 0.5)';
  1155. RightBar.style.background = 'rgba(0, 0, 0, 0.5)';
  1156.  
  1157. const imageElement = currentContainer.querySelector(imgElements);
  1158. specialRightBar.forEach(pair => {
  1159. if (imageElement.matches(pair.selector)) {
  1160. pair.func(imageElement);
  1161. }
  1162. });
  1163.  
  1164. } else {
  1165. popupContainer.style.left = rectzL + (rectzW / 2) + offsetRatioX + 'px';
  1166. }
  1167. }, 300);
  1168. });
  1169.  
  1170.  
  1171.  
  1172. TopBar.addEventListener('mouseenter', function() {
  1173. let rect = popup.getBoundingClientRect();
  1174. rectzRatio = rect.height / rect.width;
  1175. rectIzRatio = Number(rectIRatio.toFixed(3)) / Number(rectzRatio.toFixed(3));
  1176. if (!( (rectIzRatio === 1) || isScale ) ) {
  1177. TopBar.style.opacity = '1';
  1178. style2.innerHTML = `
  1179. .TopBar::after {
  1180. display: block;
  1181. }`;
  1182. TL.style.background = 'rgba(0, 0, 0, 0.5)';
  1183. TR.style.background = 'rgba(0, 0, 0, 0.5)';
  1184. TopBar.style.background = 'rgba(0, 0, 0, 0.5)';
  1185. } else {
  1186. style2.innerHTML = `
  1187. .TopBar::after {
  1188. display: none;
  1189. }`;
  1190. if (ishidePopupEnabled) {
  1191. TopBar.style.opacity = '1';
  1192. TL.style.background = 'rgba(0, 0, 0, 0.5)';
  1193. TR.style.background = 'rgba(0, 0, 0, 0.5)';
  1194. TopBar.style.background = 'rgba(0, 0, 0, 0.5)';
  1195. }
  1196. }
  1197. });
  1198. LeftBar.addEventListener('mouseenter', function() {
  1199. LeftBar.style.opacity = '1';
  1200. let rect = popup.getBoundingClientRect();
  1201. rectzRatio = rect.height / rect.width;
  1202. rectIzRatio = Number(rectIRatio.toFixed(3)) / Number(rectzRatio.toFixed(3));
  1203. if ( isLockedX || !( (rectIzRatio === 1) || isScale ) ) {
  1204. style2.innerHTML = `
  1205. .LeftBar::before, .LeftBar::after {
  1206. display: block;
  1207. }`;
  1208. TL.style.background = 'rgba(0, 0, 0, 0.5)';
  1209. BL.style.background = 'rgba(0, 0, 0, 0.5)';
  1210. LeftBar.style.background = 'rgba(0, 0, 0, 0.5)';
  1211. } else {
  1212. style2.innerHTML = `
  1213. .LeftBar::before, .LeftBar::after {
  1214. display: none;
  1215. }`;
  1216. }
  1217. });
  1218. RightBar.addEventListener('mouseenter', function() {
  1219. RightBar.style.opacity = '1';
  1220. let rect = popup.getBoundingClientRect();
  1221. rectzRatio = rect.height / rect.width;
  1222. rectIzRatio = Number(rectIRatio.toFixed(3)) / Number(rectzRatio.toFixed(3));
  1223. if ( isLockedX || !( (rectIzRatio === 1) || isScale ) ) {
  1224. style2.innerHTML = `
  1225. .RightBar::before, .RightBar::after {
  1226. display: block;
  1227. }`;
  1228. TR.style.background = 'rgba(0, 0, 0, 0.5)';
  1229. BR.style.background = 'rgba(0, 0, 0, 0.5)';
  1230. RightBar.style.background = 'rgba(0, 0, 0, 0.5)';
  1231. } else {
  1232. style2.innerHTML = `
  1233. .RightBar::before, .RightBar::after {
  1234. display: none;
  1235. }`;
  1236. }
  1237. });
  1238.  
  1239. TopBar.addEventListener('mouseleave', function() {
  1240. TopBar.style.opacity = '0';
  1241. TopBar.style.border = '';
  1242. TL.style.background = '';
  1243. TR.style.background = '';
  1244. TopBar.style.background = '';
  1245. if (isScale) {
  1246. TR.style.borderColor = '#0000ff';
  1247. TL.style.borderColor = '#0000ff';
  1248. if (ScaleMode2) {
  1249. TR.style.borderColor = '#ff00ff';
  1250. TL.style.borderColor = '#ff00ff';
  1251. }
  1252. } else {
  1253. TR.style.border = '';
  1254. TL.style.border = '';
  1255. }
  1256. });
  1257. LeftBar.addEventListener('mouseleave', function() {
  1258. if (isLockedX) {
  1259. LeftBar.style.opacity = '1';
  1260. } else {
  1261. LeftBar.style.opacity = '0';
  1262. }
  1263. TL.style.background = '';
  1264. BL.style.background = '';
  1265. LeftBar.style.background = '';
  1266. });
  1267. RightBar.addEventListener('mouseleave', function() {
  1268. if (isLockedX) {
  1269. RightBar.style.opacity = '1';
  1270. } else {
  1271. RightBar.style.opacity = '0';
  1272. }
  1273. TR.style.background = '';
  1274. BR.style.background = '';
  1275. RightBar.style.background = '';
  1276. });
  1277. //-------------------------------------------------------------------------
  1278.  
  1279.  
  1280. // show popup
  1281. function showPopup(src, mouseX, mouseY) {
  1282. if (!isshowPopupEnabled) return;
  1283. ishidePopupEnabled = true;
  1284. if (enableP === 0) return;
  1285.  
  1286. popup.src = src;
  1287. popup.style.display = 'block';
  1288. popupContainer.style.display = 'block';
  1289. popupContainer.style.position = 'fixed';
  1290. popupContainer.style.transform = 'translate(-50%, -50%) scaleX(1) scaleY(1)';
  1291. backdrop.style.display = 'block';
  1292. backdrop.style.zIndex = '999';
  1293. backdrop.style.backdropFilter = 'blur(10px)';
  1294.  
  1295. if (positionP === 'center') {
  1296. popupContainer.style.top = '50%';
  1297. popupContainer.style.left = '50%';
  1298. } else {
  1299. popupContainer.style.top = `${mouseY}px`;
  1300. popupContainer.style.left = `${mouseX}px`;
  1301. }
  1302.  
  1303. let rectI = popup.getBoundingClientRect();
  1304. rectIH = rectI.height;
  1305. rectIW = rectI.width;
  1306. rectIT = rectI.top;
  1307. rectIL = rectI.left;
  1308.  
  1309. rectIRatio = rectIH / rectIW;
  1310.  
  1311. if (positionP === '') {
  1312. if (mouseY < window.innerHeight * 0.33) {
  1313. console.log('adjust top');
  1314. popupContainer.style.top = mouseY + (rectIH / 2) - 40 + 'px';
  1315. } else if (mouseY >= window.innerHeight * 0.33 && mouseY < window.innerHeight * 0.67) {
  1316. console.log('center Y');
  1317. popupContainer.style.top = mouseY + 'px';
  1318. } else if (mouseY >= window.innerHeight * 0.67) {
  1319. console.log('adjust bottom');
  1320. popupContainer.style.top = mouseY - (rectIH / 2) + 40 + 'px';
  1321. }
  1322. if (mouseX < window.innerWidth * 0.33) {
  1323. console.log('adjust left');
  1324. popupContainer.style.left = mouseX + (rectIW / 2) - 40 + 'px';
  1325. } else if (mouseX >= window.innerWidth * 0.33 && mouseX < window.innerWidth * 0.67) {
  1326. console.log('center X');
  1327. popupContainer.style.left = mouseX + 'px';
  1328. } else if (mouseX >= window.innerWidth * 0.67) {
  1329. console.log('center right');
  1330. popupContainer.style.left = mouseX - (rectIW / 2) + 40 + 'px';
  1331. }
  1332. }
  1333. if (isAlbum) {
  1334. LockedXMode();
  1335. }
  1336.  
  1337. }
  1338.  
  1339. let isAlbum;
  1340. let currentContainer;
  1341. document.addEventListener('mouseover', function(e) {
  1342.  
  1343. if (popupTimer) return;
  1344. let target = e.target.closest(imgContainers);
  1345.  
  1346. console.log('Entered imgContainer:', target);
  1347. if (!target) return;
  1348.  
  1349.  
  1350. if (target.querySelector(nopeElements)) return;
  1351. currentContainer = target;
  1352.  
  1353. const imageElement = currentContainer.querySelector(imgElements);
  1354.  
  1355. specialElements.forEach(pair => {
  1356. if (imageElement.matches(pair.selector)) {
  1357. pair.func(imageElement);
  1358. }
  1359. });
  1360.  
  1361. if (imageElement) {
  1362. currentZeroImgElement = imageElement;
  1363. if (currentZeroImgElement) {
  1364. let pair = albumSelector.find(pair => currentZeroImgElement.matches(pair.imgElement));
  1365.  
  1366. if (pair) {
  1367. let closestAlbumElement = currentZeroImgElement.closest(pair.albumElements);
  1368. isAlbum = closestAlbumElement && closestAlbumElement.querySelectorAll(pair.imgElement).length > 1;
  1369.  
  1370. if (isAlbum) {
  1371. imgElementsList = Array.from(closestAlbumElement.querySelectorAll(pair.imgElement));
  1372. let zeroIndex = imgElementsList.indexOf(currentZeroImgElement);
  1373.  
  1374. TR.textContent = `${zeroIndex + 1}/${imgElementsList.length}`;
  1375.  
  1376. if (zeroIndex === 0) {
  1377. LeftBar.style.display = 'none';
  1378. } else {
  1379. LeftBar.style.display = '';
  1380. }
  1381. if (zeroIndex === imgElementsList.length - 1) {
  1382. RightBar.style.display = 'none';
  1383. } else {
  1384. RightBar.style.display = '';
  1385. }
  1386. }
  1387. } else {
  1388. isAlbum = false;
  1389. TR.textContent = '';
  1390. LeftBar.style.display = '';
  1391. RightBar.style.display = '';
  1392. }
  1393. }
  1394. if (intervalP === '') {
  1395. showPopup(imageElement.src, e.clientX, e.clientY);
  1396. } else {
  1397. popupTimer = setTimeout(() => {
  1398. showPopup(imageElement.src, e.clientX, e.clientY);
  1399. popupTimer = null;
  1400. }, parseInt(intervalP));
  1401. }
  1402. }
  1403. });
  1404. //-------------------------------------------------------------------------
  1405.  
  1406. // hide popup
  1407. function hidePopup() {
  1408. if (!ishidePopupEnabled) return;
  1409. imgElementsList = [];
  1410. if (popupTimer) {
  1411. clearTimeout(popupTimer);
  1412. }
  1413. popup.style.display = 'none';
  1414. popupContainer.style.display = 'none';
  1415.  
  1416. NoMode();
  1417. popup.style.maxHeight = 'calc(90vh - 10px)';
  1418. popup.style.width = '';
  1419. popup.style.height = '';
  1420. popupContainer.style.left = '50%';
  1421. popupContainer.style.top = '50%';
  1422. popupContainer.style.position = 'fixed';
  1423. popupContainer.style.transform = 'translate(-50%, -50%) scaleX(1) scaleY(1)';
  1424. popupContainer.style.transformOrigin = '';
  1425. popupContainer.style.outline = '';
  1426. backdrop.style.zIndex = '';
  1427. backdrop.style.display = 'none';
  1428. backdrop.style.backdropFilter = '';
  1429. LeftBar.style.opacity = '0';
  1430. RightBar.style.opacity = '0';
  1431. style2.innerHTML = `
  1432. .LeftBar::before,
  1433. .LeftBar::after,
  1434. .RighttBar::before,
  1435. .RighttBar::after {
  1436. display: none;
  1437. }`;
  1438. document.querySelectorAll('.specialElement').forEach(e => e.remove());
  1439.  
  1440. clickCount = 0;
  1441. cropAreaSet = false;
  1442. CropCover.style.zIndex = '1';
  1443. CropCover.style.border = '';
  1444. document.querySelectorAll('.cropArea1').forEach(e => e.remove())
  1445. document.querySelectorAll('.cropArea2').forEach(e => e.remove())
  1446. document.querySelectorAll('.cropArea3').forEach(e => e.remove())
  1447. document.querySelectorAll('.cropArea4').forEach(e => e.remove())
  1448. var removecropCanvas = document.getElementById('cropCanvas');
  1449. removecropCanvas.remove();
  1450. }
  1451. popupContainer.addEventListener('mouseout', function(event) {
  1452.  
  1453. let relatedTarget = event.relatedTarget;
  1454. if (relatedTarget && (popupContainer.contains(relatedTarget) || relatedTarget.matches('.imgContainers') || relatedTarget.closest('.imgContainers'))) {
  1455. return;
  1456. }
  1457.  
  1458. document.querySelectorAll('.specialElement').forEach(e => e.remove());
  1459.  
  1460. hidePopup();
  1461. if (intervalP !== '') {
  1462. popupTimer = setTimeout(() => {
  1463. popupTimer = null;
  1464. }, parseInt(intervalP));
  1465. }
  1466. });
  1467. document.addEventListener('keydown', function(event) {
  1468. if (event.key === "Escape") {
  1469. event.preventDefault();
  1470. hidePopup();
  1471. }
  1472. });
  1473. //-------------------------------------------------------------------------
  1474.  
  1475.  
  1476. // lock popup in screen
  1477. backdrop.addEventListener('dblclick', function(event) {
  1478. clearTimeout(clickTimeout);
  1479. ishidePopupEnabled = true;
  1480. hidePopup();
  1481. });
  1482. backdrop.addEventListener('click', function(event) {
  1483. if (clickTimeout) clearTimeout(clickTimeout);
  1484. clickTimeout = setTimeout(function() {
  1485. ResetGeometry();
  1486. if (isScale) {
  1487. isScale = false;
  1488. isScaleTL = false;
  1489. isScaleTR = false;
  1490. isScaleBL = false;
  1491. isScaleBR = false;
  1492. ScalingMode0();
  1493.  
  1494. } else if (isLockedY) {
  1495. isLockedY = false;
  1496. popupContainer.style.border = '';
  1497. } else {
  1498. backdrop.style.zIndex = '';
  1499. backdrop.style.display = 'none';
  1500. backdrop.style.backdropFilter = '';
  1501. isshowPopupEnabled = false;
  1502. }
  1503. }, 300);
  1504. });
  1505.  
  1506. }
  1507. //-------------------------------------------------------------------------
  1508.  
  1509.  
  1510. // Is to be run -----------------------------------------------------------
  1511. if (URLmatched) {
  1512. const indicatorBar = document.createElement('div');
  1513. indicatorBar.style.cssText = `
  1514. position: fixed;
  1515. bottom: 0;
  1516. left: 50%;
  1517. transform: translateX(-50%);
  1518. z-index: 9999;
  1519. height: 30px;
  1520. width: 50vw;
  1521. background: #0000;`;
  1522. document.body.appendChild(indicatorBar);
  1523.  
  1524. function toggleIndicator() {
  1525. enableP = 1 - enableP;
  1526.  
  1527. indicatorBar.style.background = enableP ? 'linear-gradient(to right, rgba(50, 190, 152, 0) 0%, rgba(50, 190, 152, 0.5) 25%, rgba(50, 190, 152, 0.5) 75%, rgba(50, 190, 152, 0) 100%)' : 'linear-gradient(to right, rgba(174, 0, 1, 0) 0%, rgba(174, 0, 1, 0.5) 25%, rgba(174, 0, 1, 0.5) 75%, rgba(174, 0, 1, 0) 100%)';
  1528. setTimeout(() => {
  1529. indicatorBar.style.background = '#0000';
  1530. }, 1000);
  1531. if (enableP === 1) {
  1532. HoverZoomMinus();
  1533. } else {
  1534. document.querySelectorAll('.popup-container').forEach(e => e.remove());
  1535. document.querySelectorAll('.popup-backdrop').forEach(e => e.remove());
  1536. document.querySelectorAll('.specialElement').forEach(e => e.remove());
  1537. }
  1538. }
  1539. let hoverTimeout;
  1540. indicatorBar.addEventListener('mouseenter', () => {
  1541. hoverTimeout = setTimeout(toggleIndicator, 500);
  1542. });
  1543. indicatorBar.addEventListener('mouseleave', () => {
  1544. clearTimeout(hoverTimeout);
  1545. indicatorBar.style.background = '#0000';
  1546. });
  1547. if (enableP === 1) {
  1548. HoverZoomMinus();
  1549. }
  1550. } else {
  1551. return;
  1552. }
  1553.  
  1554. })();