Image Viewer

Allows viewing full image without leaving the page

当前为 2022-04-16 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Image Viewer
  3. // @description Allows viewing full image without leaving the page
  4. // @namespace https://github.com/shikiyoku
  5. // @version 1.1.9
  6. // @author shikiyoku
  7. // @license MIT
  8. // @icon https://raw.githubusercontent.com/shikiyoku/user-scripts/master/image-viewer/icon.png
  9. // @homepageURL https://github.com/shikiyoku/user-scripts
  10. // @supportURL https://github.com/shikiyoku/user-scripts/issues
  11. // @include *
  12. // @connect www.imagebam.com
  13. // @connect imagevenue.com
  14. // @connect www.turboimagehost.com
  15. // @connect fastpic.ru
  16. // @connect radikal.ru
  17. // @run-at document-start
  18. // @compatible chrome
  19. // @compatible firefox
  20. // @grant GM_addStyle
  21. // @grant GM_xmlhttpRequest
  22. // @grant GM.xmlHttpRequest
  23. // @grant GM_setValue
  24. // @grant GM.setValue
  25. // @grant GM_getValue
  26. // @grant GM.getValue
  27. // @grant GM_registerMenuCommand
  28. // ==/UserScript==
  29. ;(function () {
  30. 'use strict'
  31.  
  32. /* global Bliss */
  33. // eslint-disable-next-line
  34. !(function(){function t(e,n,i){return n=void 0===n?1:n,i=i||n+1,i-n<=1?function(){if(arguments.length<=n||"string"===r.type(arguments[n]))return e.apply(this,arguments);var t,i=arguments[n];for(var o in i){var s=Array.prototype.slice.call(arguments);s.splice(n,1,o,i[o]),t=e.apply(this,s);}return t}:t(t(e,n+1,i),n,i-1)}function e(t,r,i){var o=n(i);if("string"===o){var s=Object.getOwnPropertyDescriptor(r,i);!s||s.writable&&s.configurable&&s.enumerable&&!s.get&&!s.set?t[i]=r[i]:(delete t[i],Object.defineProperty(t,i,s));}else if("array"===o)i.forEach(function(n){n in r&&e(t,r,n);});else for(var a in r)i&&("regexp"===o&&!i.test(a)||"function"===o&&!i.call(r,a))||e(t,r,a);return t}function n(t){if(null===t)return "null";if(void 0===t)return "undefined";var e=(Object.prototype.toString.call(t).match(/^\[object\s+(.*?)\]$/)[1]||"").toLowerCase();return "number"==e&&isNaN(t)?"nan":e}var r=self.Bliss=e(function(t,e){return 2==arguments.length&&!e||!t?null:"string"===r.type(t)?(e||document).querySelector(t):t||null},self.Bliss);e(r,{extend:e,overload:t,type:n,property:r.property||"_",listeners:self.WeakMap?new WeakMap:new Map,original:{addEventListener:(self.EventTarget||Node).prototype.addEventListener,removeEventListener:(self.EventTarget||Node).prototype.removeEventListener},sources:{},noop:function(){},$:function(t,e){return t instanceof Node||t instanceof Window?[t]:2!=arguments.length||e?Array.prototype.slice.call("string"==typeof t?(e||document).querySelectorAll(t):t||[]):[]},defined:function(){for(var t=0;t<arguments.length;t++)if(void 0!==arguments[t])return arguments[t]},create:function(t,e){return t instanceof Node?r.set(t,e):(1===arguments.length&&("string"===r.type(t)?e={}:(e=t,t=e.tag,e=r.extend({},e,function(t){return "tag"!==t}))),r.set(document.createElement(t||"div"),e))},each:function(t,e,n){n=n||{};for(var r in t)n[r]=e.call(t,r,t[r]);return n},ready:function(t,e,n){if("function"!=typeof t||e||(e=t,t=void 0),t=t||document,e&&("loading"!==t.readyState?e():r.once(t,"DOMContentLoaded",function(){e();})),!n)return new Promise(function(e){r.ready(t,e,!0);})},Class:function(t){var e,n=["constructor","extends","abstract","static"].concat(Object.keys(r.classProps)),i=t.hasOwnProperty("constructor")?t.constructor:r.noop;2==arguments.length?(e=arguments[0],t=arguments[1]):(e=function(){if(this.constructor.__abstract&&this.constructor===e)throw new Error("Abstract classes cannot be directly instantiated.");e["super"]&&e["super"].apply(this,arguments),i.apply(this,arguments);},e["super"]=t["extends"]||null,e.prototype=r.extend(Object.create(e["super"]?e["super"].prototype:Object),{constructor:e}),e.prototype["super"]=e["super"]?e["super"].prototype:null,e.__abstract=!!t["abstract"]);var o=function(t){return this.hasOwnProperty(t)&&n.indexOf(t)===-1};if(t["static"]){r.extend(e,t["static"],o);for(var s in r.classProps)s in t["static"]&&r.classProps[s](e,t["static"][s]);}r.extend(e.prototype,t,o);for(var s in r.classProps)s in t&&r.classProps[s](e.prototype,t[s]);return e},classProps:{lazy:t(function(t,e,n){return Object.defineProperty(t,e,{get:function(){var t=n.call(this);return Object.defineProperty(this,e,{value:t,configurable:!0,enumerable:!0,writable:!0}),t},set:function(t){Object.defineProperty(this,e,{value:t,configurable:!0,enumerable:!0,writable:!0});},configurable:!0,enumerable:!0}),t}),live:t(function(t,e,n){return "function"===r.type(n)&&(n={set:n}),Object.defineProperty(t,e,{get:function(){var t=this["_"+e],r=n.get&&n.get.call(this,t);return void 0!==r?r:t},set:function(t){var r=this["_"+e],i=n.set&&n.set.call(this,t,r);this["_"+e]=void 0!==i?i:t;},configurable:n.configurable,enumerable:n.enumerable}),t})},include:function(){var t=arguments[arguments.length-1],e=2===arguments.length&&arguments[0],n=document.createElement("script");return e?Promise.resolve():new Promise(function(e,i){r.set(n,{async:!0,onload:function(){e(),n.parentNode&&n.parentNode.removeChild(n);},onerror:function(){i();},src:t,inside:document.head});})},fetch:function(t,n){if(!t)throw new TypeError("URL parameter is mandatory and cannot be "+t);var i=e({url:new URL(t,location),data:"",method:"GET",headers:{},xhr:new XMLHttpRequest},n);i.method=i.method.toUpperCase(),r.hooks.run("fetch-args",i),"GET"===i.method&&i.data&&(i.url.search+=i.data),document.body.setAttribute("data-loading",i.url),i.xhr.open(i.method,i.url.href,i.async!==!1,i.user,i.password);for(var o in n)if("upload"===o)i.xhr.upload&&"object"==typeof n[o]&&r.extend(i.xhr.upload,n[o]);else if(o in i.xhr)try{i.xhr[o]=n[o];}catch(s){self.console&&console.error(s);}var a=Object.keys(i.headers).map(function(t){return t.toLowerCase()});"GET"!==i.method&&a.indexOf("content-type")===-1&&i.xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");for(var c in i.headers)void 0!==i.headers[c]&&i.xhr.setRequestHeader(c,i.headers[c]);var u=new Promise(function(t,e){i.xhr.onload=function(){document.body.removeAttribute("data-loading"),0===i.xhr.status||i.xhr.status>=200&&i.xhr.status<300||304===i.xhr.status?t(i.xhr):e(r.extend(Error(i.xhr.statusText),{xhr:i.xhr,get status(){return this.xhr.status}}));},i.xhr.onerror=function(){document.body.removeAttribute("data-loading"),e(r.extend(Error("Network Error"),{xhr:i.xhr}));},i.xhr.ontimeout=function(){document.body.removeAttribute("data-loading"),e(r.extend(Error("Network Timeout"),{xhr:i.xhr}));},i.xhr.send("GET"===i.method?null:i.data);});return u.xhr=i.xhr,u},value:function(t){var e="string"!==r.type(t);return r.$(arguments).slice(+e).reduce(function(t,e){return t&&t[e]},e?t:self)}}),r.Hooks=new r.Class({add:function(t,e,n){if("string"==typeof arguments[0])(Array.isArray(t)?t:[t]).forEach(function(t){this[t]=this[t]||[],e&&this[t][n?"unshift":"push"](e);},this);else for(var t in arguments[0])this.add(t,arguments[0][t],arguments[1]);},run:function(t,e){this[t]=this[t]||[],this[t].forEach(function(t){t.call(e&&e.context?e.context:e,e);});}}),r.hooks=new r.Hooks;r.property;r.Element=function(t){this.subject=t,this.data={},this.bliss={};},r.Element.prototype={set:t(function(t,e){t in r.setProps?r.setProps[t].call(this,e):t in this?this[t]=e:this.setAttribute(t,e);},0),transition:function(t,e){return e=+e||400,new Promise(function(n,i){if("transition"in this.style){var o=r.extend({},this.style,/^transition(Duration|Property)$/);r.style(this,{transitionDuration:(e||400)+"ms",transitionProperty:Object.keys(t).join(", ")}),r.once(this,"transitionend",function(){clearTimeout(s),r.style(this,o),n(this);});var s=setTimeout(n,e+50,this);r.style(this,t);}else r.style(this,t),n(this);}.bind(this))},fire:function(t,e){var n=document.createEvent("HTMLEvents");return n.initEvent(t,!0,!0),this.dispatchEvent(r.extend(n,e))},bind:t(function(t,e){if(arguments.length>1&&("function"===r.type(e)||e.handleEvent)){var n=e;e="object"===r.type(arguments[2])?arguments[2]:{capture:!!arguments[2]},e.callback=n;}var i=r.listeners.get(this)||{};t.trim().split(/\s+/).forEach(function(t){if(t.indexOf(".")>-1){t=t.split(".");var n=t[1];t=t[0];}i[t]=i[t]||[],0===i[t].filter(function(t){return t.callback===e.callback&&t.capture==e.capture}).length&&i[t].push(r.extend({className:n},e)),r.original.addEventListener.call(this,t,e.callback,e);},this),r.listeners.set(this,i);},0),unbind:t(function(t,e){if(e&&("function"===r.type(e)||e.handleEvent)){var n=e;e=arguments[2];}"boolean"==r.type(e)&&(e={capture:e}),e=e||{},e.callback=e.callback||n;var i=r.listeners.get(this);(t||"").trim().split(/\s+/).forEach(function(t){if(t.indexOf(".")>-1){t=t.split(".");var n=t[1];t=t[0];}if(t&&e.callback)return r.original.removeEventListener.call(this,t,e.callback,e.capture);if(i)for(var o in i)if(!t||o===t)for(var s,a=0;s=i[o][a];a++)n&&n!==s.className||e.callback&&e.callback!==s.callback||!!e.capture!=!!s.capture||(i[o].splice(a,1),r.original.removeEventListener.call(this,o,s.callback,s.capture),a--);},this);},0)},r.setProps={style:function(t){for(var e in t)e in this.style?this.style[e]=t[e]:this.style.setProperty(e,t[e]);},attributes:function(t){for(var e in t)this.setAttribute(e,t[e]);},properties:function(t){r.extend(this,t);},events:function(t){if(1!=arguments.length||!t||!t.addEventListener)return r.bind.apply(this,[this].concat(r.$(arguments)));var e=this;if(r.listeners){var n=r.listeners.get(t);for(var i in n)n[i].forEach(function(t){r.bind(e,i,t.callback,t.capture);});}for(var o in t)0===o.indexOf("on")&&(this[o]=t[o]);},once:t(function(t,e){var n=this,i=function(){return r.unbind(n,t,i),e.apply(n,arguments)};r.bind(this,t,i,{once:!0});},0),delegate:t(function(t,e,n){r.bind(this,t,function(t){t.target.closest(e)&&n.call(this,t);});},0,2),contents:function(t){(t||0===t)&&(Array.isArray(t)?t:[t]).forEach(function(t){var e=r.type(t);/^(string|number)$/.test(e)?t=document.createTextNode(t+""):"object"===e&&(t=r.create(t)),t instanceof Node&&this.appendChild(t);},this);},inside:function(t){t&&t.appendChild(this);},before:function(t){t&&t.parentNode.insertBefore(this,t);},after:function(t){t&&t.parentNode.insertBefore(this,t.nextSibling);},start:function(t){t&&t.insertBefore(this,t.firstChild);},around:function(t){t&&t.parentNode&&r.before(this,t),this.appendChild(t);}},r.Array=function(t){this.subject=t;},r.Array.prototype={all:function(t){var e=r.$(arguments).slice(1);return this[t].apply(this,e)}},r.add=t(function(t,e,n,i){n=r.extend({$:!0,element:!0,array:!0},n),"function"==r.type(e)&&(!n.element||t in r.Element.prototype&&i||(r.Element.prototype[t]=function(){return this.subject&&r.defined(e.apply(this.subject,arguments),this.subject)}),!n.array||t in r.Array.prototype&&i||(r.Array.prototype[t]=function(){var t=arguments;return this.subject.map(function(n){return n&&r.defined(e.apply(n,t),n)})}),n.$&&(r.sources[t]=r[t]=e,(n.array||n.element)&&(r[t]=function(){var e=[].slice.apply(arguments),i=e.shift(),o=n.array&&Array.isArray(i)?"Array":"Element";return r[o].prototype[t].apply({subject:i},e)})));},0),r.add(r.Array.prototype,{element:!1}),r.add(r.Element.prototype),r.add(r.setProps),r.add(r.classProps,{element:!1,array:!1});var i=document.createElement("_");r.add(r.extend({},HTMLElement.prototype,function(t){return "function"===r.type(i[t])}),null,!0);}());
  35.  
  36. // eslint-disable-next-line
  37. const $ = Bliss;
  38. // eslint-disable-next-line
  39. const $$ = Bliss.$;
  40.  
  41. function hasOwnProperty(object, property) {
  42. return Object.prototype.hasOwnProperty.call(object, property)
  43. }
  44.  
  45. const gmPolyfill = (function () {
  46. const gmMethodMap = {
  47. getValue: 'GM_getValue',
  48. setValue: 'GM_setValue',
  49. openInTab: 'GM_openInTab',
  50. }
  51.  
  52. return function polyfill(methodName) {
  53. if (hasOwnProperty(gmMethodMap, methodName)) {
  54. return typeof GM !== 'undefined' && methodName in GM
  55. ? GM[methodName]
  56. : function (...args) {
  57. return new Promise((resolve, reject) => {
  58. try {
  59. resolve(window[gmMethodMap[methodName]](...args))
  60. } catch (e) {
  61. reject(e)
  62. }
  63. })
  64. }
  65. }
  66.  
  67. return null
  68. }
  69. })()
  70.  
  71. const addStyle =
  72. 'GM_addStyle' in window
  73. ? GM_addStyle // eslint-disable-line camelcase
  74. : (css) => {
  75. const head = document.getElementsByTagName('head')[0]
  76.  
  77. if (head) {
  78. const style = document.createElement('style')
  79.  
  80. style.type = 'text/css'
  81. style.innerHTML = css
  82. head.appendChild(style)
  83.  
  84. return css
  85. }
  86. }
  87.  
  88. let request
  89.  
  90. const getRequest = () => {
  91. if (!request) {
  92. const xmlHttpRequest =
  93. typeof GM !== 'undefined' && 'xmlHttpRequest' in GM
  94. ? GM.xmlHttpRequest
  95. : GM_xmlhttpRequest; // eslint-disable-line
  96.  
  97. request = function (url, { method = 'GET' } = {}) {
  98. return new Promise((resolve, reject) => {
  99. xmlHttpRequest({
  100. url,
  101. method,
  102. onload: resolve,
  103. onerror: reject,
  104. })
  105. })
  106. }
  107. }
  108. return request
  109. }
  110.  
  111. let store
  112.  
  113. const getStore = () => {
  114. if (!store) {
  115. store = {
  116. get: gmPolyfill('getValue'),
  117. set: gmPolyfill('setValue'),
  118. }
  119. }
  120.  
  121. return store
  122. }
  123.  
  124. const request$1 = getRequest()
  125.  
  126. async function getPageHtml(pageUrl) {
  127. const response = await request$1(pageUrl)
  128.  
  129. return response.responseText
  130. }
  131.  
  132. async function getUrlFromPage(link, extractor) {
  133. const html = await getPageHtml(link.url)
  134.  
  135. const match = extractor.imageUrlRegEx.exec(html)
  136.  
  137. let url
  138.  
  139. if (match) {
  140. if (match.groups) {
  141. url = match.groups.url
  142. } else {
  143. url = match[1]
  144. }
  145. }
  146.  
  147. if (!url) {
  148. console.warn(`[image-viewer] Unable to get URL from page ${link.url}`)
  149. }
  150.  
  151. return url
  152. }
  153.  
  154. const fastpic = {
  155. name: 'FastPic',
  156. linkRegEx: /^http.?:\/\/fastpic\.ru\/view/,
  157. imageUrlRegEx: /src="(?<url>[^"]+)" class="image img-fluid"/,
  158. getUrl: getUrlFromPage,
  159. }
  160.  
  161. const URL_PARTS_REGEXP = /i(\d+).+big(\/\d+\/\d+\/).+\/([^/]+)$/
  162.  
  163. const fastpicDirect = {
  164. name: 'FastPic (direct link)',
  165. linkRegEx: /fastpic\.ru\/big/,
  166.  
  167. async getUrl(link) {
  168. let hostLink = link.url
  169.  
  170. if (hostLink.includes('?')) {
  171. const urlObject = new URL(hostLink)
  172. const params = new URLSearchParams(urlObject.search)
  173. for (const param of params.values()) {
  174. if (fastpicDirect.linkRegEx.test(param)) {
  175. hostLink = param
  176. break
  177. }
  178. }
  179. }
  180.  
  181. const [, index, date, filename] = URL_PARTS_REGEXP.exec(hostLink)
  182.  
  183. const url = `https://fastpic.ru/view/${index}${date}${filename}.html`
  184.  
  185. return fastpic.getUrl({ ...link, url }, fastpic)
  186. },
  187. }
  188.  
  189. const imagebam = {
  190. name: 'ImageBam',
  191. linkRegEx: /^http:\/\/www\.imagebam\.com\/image/,
  192. imageUrlRegEx: /property="og:image" content="([^"]*)"/,
  193. getUrl: getUrlFromPage,
  194. }
  195.  
  196. const DATE_PATTERN = /(\d{4})\.(\d{2})\.(\d{2})/
  197.  
  198. const imageban = {
  199. name: 'ImageBan.ru',
  200. linkRegEx: /\/\/imageban\.ru\/show/,
  201.  
  202. async getUrl(link) {
  203. return link.thumbnailUrl
  204. .replace('thumbs', 'out')
  205. .replace(DATE_PATTERN, '$1/$2/$3')
  206. },
  207. }
  208.  
  209. const imagebanDirect = {
  210. name: 'ImageBan.ru (direct link)',
  211. linkRegEx: /imageban\.ru\/out/,
  212.  
  213. async getUrl(link) {
  214. return link.url
  215. },
  216. }
  217.  
  218. const imagetwist = {
  219. name: 'ImageTwist',
  220. linkRegEx: /imagetwist\.com/,
  221.  
  222. async getUrl(link) {
  223. const imageName = link.url.split('/').pop().replace('.html', '')
  224. const extension = imageName.split('.').pop()
  225. const imageUrl = link.thumbnailUrl
  226. .replace('/th/', '/i/')
  227. .slice(0, -extension.length)
  228.  
  229. return `${imageUrl}${extension}/${imageName}`
  230. },
  231. }
  232.  
  233. const HOST_REPLACE_REG_EX = /(picturelol|picshick|imageshimage)/
  234.  
  235. const imagetwistBased = {
  236. name: 'ImageTwist based (legacy)',
  237. hosts: ['Picturelol.com', 'PicShick.com', 'Imageshimage.com'],
  238. linkRegEx: /^https?:\/\/(picturelol|picshick|imageshimage)\.com/,
  239.  
  240. async getUrl(link) {
  241. const imageName = link.url.split('/').pop()
  242. const imageUrl = link.thumbnailUrl
  243. .replace('/th/', '/i/')
  244. .replace(HOST_REPLACE_REG_EX, 'imagetwist')
  245.  
  246. return `${imageUrl}/${imageName}`
  247. },
  248. }
  249.  
  250. const imagevenueLegacy = {
  251. name: 'ImageVenue.com',
  252.  
  253. linkRegEx: /(imagevenue.com\/img.php|www.imagevenue.com\/\\w+$)/,
  254. imageUrlRegEx: /data-toggle="full">\W*<img src="(?<url>[^"]*)/im,
  255.  
  256. getUrl: getUrlFromPage,
  257. }
  258.  
  259. const imgadult = {
  260. name: 'ImgAdult.com',
  261. linkRegEx: /^https:\/\/imgadult\.com/,
  262.  
  263. async getUrl(link) {
  264. return link.thumbnailUrl.replace('/small/', '/big/')
  265. },
  266. }
  267.  
  268. const imgbb = {
  269. name: 'imgbb.com',
  270. linkRegEx: /^https:\/\/ibb\.co/,
  271.  
  272. async getUrl(link) {
  273. return link.thumbnailUrl.replace('//thumb', '//image')
  274. },
  275. }
  276.  
  277. const imgbox = {
  278. name: 'imgbox.com',
  279. linkRegEx: /^http:\/\/imgbox\.com/,
  280.  
  281. async getUrl(link) {
  282. return link.thumbnailUrl.replace('/thumbs', '/images').replace('_t', '_o')
  283. },
  284. }
  285.  
  286. const imgbum = {
  287. name: 'imgbum.net',
  288. linkRegEx: /^http:\/\/imgbum\.net/,
  289.  
  290. async getUrl(link) {
  291. return link.thumbnailUrl.replace('-thumb', '')
  292. },
  293. }
  294.  
  295. const imgchilibum = {
  296. name: 'imgchilibum.ru',
  297. linkRegEx: /^http:\/\/imgchilibum\.ru\/v/,
  298.  
  299. async getUrl(link) {
  300. return link.thumbnailUrl.replace('_s/', '_b/')
  301. },
  302. }
  303.  
  304. const imgdrive = {
  305. name: 'ImgDrive.net',
  306. linkRegEx: /^https:\/\/imgdrive\.net/,
  307.  
  308. async getUrl(link) {
  309. return link.thumbnailUrl.replace('small', 'big')
  310. },
  311. }
  312.  
  313. const imgtaxi = {
  314. name: 'imgtaxi.com',
  315. linkRegEx: /^https:\/\/imgtaxi\.com/,
  316.  
  317. async getUrl(link) {
  318. return link.thumbnailUrl
  319. .replace('/small/', '/big/')
  320. .replace('/small-medium/', '/big/')
  321. },
  322. }
  323.  
  324. const imx = {
  325. name: 'IMX.to',
  326. linkRegEx: /^https:\/\/imx\.to/,
  327.  
  328. async getUrl(link) {
  329. return link.thumbnailUrl.replace('/imx', '/i.imx').replace('/u/t/', '/i/')
  330. },
  331. }
  332.  
  333. const lostpic = {
  334. name: 'Lostpic.net',
  335. linkRegEx: /^http:\/\/lostpic\.net/,
  336.  
  337. async getUrl(link) {
  338. return link.thumbnailUrl.replace('.th', '').replace('http:', 'https:')
  339. },
  340. }
  341.  
  342. const moneyPic = {
  343. name: 'money-pic.ru',
  344. linkRegEx: /^http:\/\/money-pic\.ru/,
  345.  
  346. async getUrl(link) {
  347. return link.thumbnailUrl.replace('-thumb', '')
  348. },
  349. }
  350.  
  351. const nikapic = {
  352. name: 'nikapic.ru',
  353. linkRegEx: /^http:\/\/nikapic\.ru/,
  354.  
  355. async getUrl(link) {
  356. return link.thumbnailUrl.replace('/small/', '/big/')
  357. },
  358. }
  359.  
  360. const picage = {
  361. name: 'picage.ru',
  362. linkRegEx: /^http:\/\/picage\.ru/,
  363.  
  364. async getUrl(link) {
  365. return link.thumbnailUrl
  366. .replace('picage', 'pic4you')
  367. .replace('-thumb', '')
  368. },
  369. }
  370.  
  371. const piccash = {
  372. name: 'PicCash.net',
  373. linkRegEx: /^http:\/\/piccash\.net\//,
  374.  
  375. async getUrl(link) {
  376. return link.thumbnailUrl.replace('_thumb', '_full').replace('-thumb', '')
  377. },
  378. }
  379.  
  380. const HOST_REPLACE_REG_EX$1 = /(freescreens\.ru|imgclick\.ru|picclick\.ru|payforpic\.ru|picforall\.ru)/
  381.  
  382. const picforall = {
  383. name: 'PicForAll.ru',
  384. hosts: [
  385. 'freescreens.ru',
  386. 'imgclick.ru',
  387. 'picclick.ru',
  388. 'payforpic.ru',
  389. 'picforall.ru',
  390. ],
  391. linkRegEx: /^http:\/\/(freescreens\.ru|imgclick\.ru|picclick\.ru|payforpic\.ru|picforall\.ru)/,
  392.  
  393. async getUrl(link) {
  394. return link.thumbnailUrl
  395. .replace(HOST_REPLACE_REG_EX$1, 'picpic.online')
  396. .replace('-thumb', '')
  397. },
  398. }
  399.  
  400. const HOST_REPLACE_REG_EX$2 = /(iceimg\.net|pixsense\.net|vestimage\.site|chaosimg\.site)/
  401.  
  402. const pixsense = {
  403. name: 'PixSense',
  404. hosts: [
  405. 'www.iceimg.net',
  406. 'www.pixsense.net',
  407. 'www.vestimage.site',
  408. 'www.chaosimg.site',
  409. ],
  410. linkRegEx: /^http:\/\/www\.(iceimg\.net|pixsense\.net|vestimage\.site|chaosimg\.site)/,
  411.  
  412. async getUrl(link) {
  413. return link.thumbnailUrl
  414. .replace(HOST_REPLACE_REG_EX$2, 'fortstore.net')
  415. .replace('small-', '')
  416. .replace('/small/', '/big/')
  417. },
  418. }
  419.  
  420. const radikal = {
  421. name: 'Radikal.ru',
  422. linkRegEx: /https?:\/\/.\.radikal\.ru\//,
  423.  
  424. async getUrl(link) {
  425. return link.url
  426. },
  427. }
  428.  
  429. const radikalLegacy = {
  430. name: 'Radikal.ru (legacy)',
  431. linkRegEx: /^http:\/\/radikal\.ru\//,
  432. imageUrlRegEx: /id="imgFullSize" src="(?<url>[^"]+)"/,
  433. getUrl: getUrlFromPage,
  434. }
  435.  
  436. const stuffed = {
  437. name: 'stuffed.ru',
  438. linkRegEx: /^http:\/\/stuffed\.ru/,
  439.  
  440. async getUrl(link) {
  441. return link.thumbnailUrl.replace('-thumb', '')
  442. },
  443. }
  444.  
  445. const turboimagehost = {
  446. name: 'TurboImageHost',
  447. linkRegEx: /^https:\/\/www\.turboimagehost\.com\/p/,
  448. imageUrlRegEx: /property="og:image" content="([^"]*)"/,
  449. getUrl: getUrlFromPage,
  450. }
  451.  
  452. const vfl = {
  453. name: 'VFL.ru',
  454. linkRegEx: /^http:\/\/vfl\.ru/,
  455.  
  456. async getUrl(link) {
  457. return link.thumbnailUrl.replace('_s', '')
  458. },
  459. }
  460.  
  461. const xxxscreens = {
  462. name: 'XXXScreens.com',
  463. linkRegEx: /^http:\/\/xxxscreens\.com/,
  464.  
  465. async getUrl(link) {
  466. return link.thumbnailUrl.replace('small/', 'big/')
  467. },
  468. }
  469.  
  470. const hostExtractors = /* #__PURE__ */ Object.freeze({
  471. __proto__: null,
  472. fastpic: fastpic,
  473. fastpicDirect: fastpicDirect,
  474. imagebam: imagebam,
  475. imageban: imageban,
  476. imagebanDirect: imagebanDirect,
  477. imagetwist: imagetwist,
  478. imagetwistBased: imagetwistBased,
  479. imagevenueLegacy: imagevenueLegacy,
  480. imgadult: imgadult,
  481. imgbb: imgbb,
  482. imgbox: imgbox,
  483. imgbum: imgbum,
  484. imgchilibum: imgchilibum,
  485. imgdrive: imgdrive,
  486. imgtaxi: imgtaxi,
  487. imx: imx,
  488. lostpic: lostpic,
  489. moneyPic: moneyPic,
  490. nikapic: nikapic,
  491. picage: picage,
  492. piccash: piccash,
  493. picforall: picforall,
  494. pixsense: pixsense,
  495. radikal: radikal,
  496. radikalLegacy: radikalLegacy,
  497. stuffed: stuffed,
  498. turboimagehost: turboimagehost,
  499. vfl: vfl,
  500. xxxscreens: xxxscreens,
  501. })
  502.  
  503. const urlExtractor = (function () {
  504. function sortCaseInsensitive(array, getValue) {
  505. return array
  506. .map((value, index) => ({
  507. index,
  508. value: getValue(value).toLowerCase(),
  509. }))
  510. .sort((a, b) => {
  511. if (a.value > b.value) {
  512. return 1
  513. }
  514. if (a.value < b.value) {
  515. return -1
  516. }
  517. return 0
  518. })
  519. .map((m) => array[m.index])
  520. }
  521.  
  522. let extractorsActive = []
  523.  
  524. const extractors = Object.values(hostExtractors).filter(Boolean)
  525.  
  526. const extractorsByName = extractors.reduce((result, extractor) => {
  527. result[extractor.name] = extractor
  528. return result
  529. }, {})
  530.  
  531. return {
  532. getImageHostsInfo() {
  533. const result = extractors.map((e) => ({
  534. name: e.name,
  535. description: e.hosts ? e.hosts.join(', ') : '',
  536. }))
  537.  
  538. return sortCaseInsensitive(result, (value) => value.name)
  539. },
  540.  
  541. getImageUrl(link) {
  542. const extractor = extractorsByName[link.host]
  543.  
  544. return extractor.getUrl(link, extractor)
  545. },
  546.  
  547. getHostNameMatcher(enabledHosts) {
  548. extractorsActive = extractors.filter((e) =>
  549. enabledHosts.includes(e.name)
  550. )
  551.  
  552. let prevExtractor = null
  553.  
  554. return (url) => {
  555. if (prevExtractor && prevExtractor.linkRegEx.test(url)) {
  556. return prevExtractor.name
  557. }
  558.  
  559. const extractor = extractorsActive.find((e) => e.linkRegEx.test(url))
  560.  
  561. if (extractor) {
  562. prevExtractor = extractor
  563. return extractor.name
  564. }
  565.  
  566. return null
  567. }
  568. },
  569. }
  570. })()
  571.  
  572. const config = (function () {
  573. const store = getStore()
  574.  
  575. const CLASSES = {
  576. open: 'iv-config-form--open',
  577. }
  578.  
  579. let configMenu = null
  580. const currentHost = unsafeWindow.location.host
  581.  
  582. function showMenu(config) {
  583. createMenuElement(config).classList.add(CLASSES.open)
  584. }
  585.  
  586. function createMenuElement(config) {
  587. if (!configMenu) {
  588. const rows = config.hosts.map(createConfigMenuRow)
  589.  
  590. configMenu = $.create('div', {
  591. id: 'iv-config-form',
  592. className: 'iv-config-form',
  593. contents: [
  594. createMenuHeader(),
  595. {
  596. tag: 'div',
  597. className: 'iv-config-form__options',
  598. contents: rows,
  599. },
  600. ],
  601. delegate: {
  602. change: {
  603. '.js-iv-config-checkbox': (e) =>
  604. updateHostConfig(
  605. config.storedConfig,
  606. e.target.value,
  607. e.target.checked
  608. ),
  609. },
  610. },
  611. })
  612.  
  613. document.body.appendChild(configMenu)
  614. }
  615.  
  616. return configMenu
  617. }
  618.  
  619. function createMenuHeader() {
  620. const closeButton = $.create('a', {
  621. href: '#',
  622. title: 'Close',
  623. className: `iv-icon-button iv-icon-button--small iv-icon iv-icon--type-close`,
  624. events: {
  625. click: (e) => {
  626. e.preventDefault()
  627. configMenu.classList.remove(CLASSES.open)
  628. },
  629. },
  630. })
  631.  
  632. return {
  633. tag: 'div',
  634. className: 'iv-config-form__header',
  635. contents: [
  636. {
  637. tag: 'span',
  638. className: 'iv-config-form__header-title',
  639. contents: `Settings for ${currentHost}`,
  640. },
  641. closeButton,
  642. ],
  643. }
  644. }
  645.  
  646. function createConfigMenuRow(host) {
  647. return $.create('label', {
  648. className: 'iv-config-form__label',
  649. title: host.description,
  650. contents: [
  651. {
  652. tag: 'input',
  653. type: 'checkbox',
  654. className: 'iv-config-form__checkbox js-iv-config-checkbox',
  655. checked: host.enabled,
  656. value: host.name,
  657. },
  658. host.name,
  659. ],
  660. })
  661. }
  662.  
  663. function updateHostConfig(config, hostName, isEnabled) {
  664. config.hosts[hostName] = isEnabled
  665. store.set(currentHost, config)
  666. }
  667.  
  668. async function getHostConfig() {
  669. const hosts = urlExtractor.getImageHostsInfo()
  670. const storedConfig = await store.get(currentHost, { hosts: {} })
  671. const enabledHosts = []
  672.  
  673. hosts.forEach((host) => {
  674. const id = host.name
  675. const isEnabled =
  676. id in storedConfig.hosts ? storedConfig.hosts[id] : true
  677.  
  678. host.enabled = isEnabled
  679. storedConfig.hosts[id] = isEnabled
  680.  
  681. if (isEnabled) {
  682. enabledHosts.push(id)
  683. }
  684. })
  685.  
  686. storedConfig.hosts = hosts.reduce((result, host) => {
  687. result[host.name] = host.enabled
  688. return result
  689. }, {})
  690.  
  691. return {
  692. hosts,
  693. storedConfig,
  694. enabledHosts,
  695. }
  696. }
  697.  
  698. return {
  699. async init() {
  700. const config = await getHostConfig()
  701.  
  702. const handler = () => showMenu(config)
  703.  
  704. // eslint-disable-next-line
  705. if (typeof GM_registerMenuCommand !== 'undefined') {
  706. GM_registerMenuCommand('Image Viewer Settings', handler)
  707. } else {
  708. unsafeWindow.imageViewer = {
  709. settings: handler,
  710. }
  711. }
  712.  
  713. return config
  714. },
  715. }
  716. })()
  717.  
  718. const css_248z =
  719. "@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}.iv-icon{position:relative}.iv-icon:after,.iv-image-link img:after{content:\"\";position:absolute;z-index:2;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);background-repeat:no-repeat;background-position:50%;background-size:contain}.iv-icon--hover:after{transition:opacity .35s ease;opacity:0}.iv-icon--hover:hover:after{opacity:1}.iv-icon--size-button:after{width:50px;height:50px}.iv-icon--type-loading:after{animation:spin 1s linear infinite;opacity:1;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff'%3E%3Cpath d='M12 4V2A10 10 0 002 12h2a8 8 0 018-8z'/%3E%3C/svg%3E\")!important}.iv-icon--type-zoom:after{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z'/%3E%3C/svg%3E\")}.iv-icon--type-next:after{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E\")}.iv-icon--type-previous:after{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E\")}.iv-icon--type-close:after{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E\")}.iv-icon--type-expand:after{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff'%3E%3Cpath d='M5 5h5v2H7v3H5V5m9 0h5v5h-2V7h-3V5m3 9h2v5h-5v-2h3v-3m-7 3v2H5v-5h2v3h3z'/%3E%3C/svg%3E\")}.iv-icon--type-shrink:after{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff'%3E%3Cpath d='M14 14h5v2h-3v3h-2v-5m-9 0h5v5H8v-3H5v-2m3-9h2v5H5V8h3V5m11 3v2h-5V5h2v3h3z'/%3E%3C/svg%3E\")}.iv-icon--type-image-broken:after,.iv-image-link img:after{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff'%3E%3Cpath d='M21 5v6.59l-3-3.01-4 4.01-4-4-4 4-3-3.01V5a2 2 0 012-2h14a2 2 0 012 2m-3 6.42l3 3.01V19a2 2 0 01-2 2H5a2 2 0 01-2-2v-6.58l3 2.99 4-4 4 4'/%3E%3C/svg%3E\")}.iv-image-link{display:inline-flex;min-width:50px;min-height:50px;margin:3px;padding:4px;border:1px solid rgba(0,0,0,.2);box-shadow:1px 1px 3px rgba(0,0,0,.5);vertical-align:top}.iv-image-link img{margin:0}.iv-image-link>:not(img){display:flex;align-items:center;justify-content:center;width:100%}.iv-image-link:before{content:\"\";position:absolute;z-index:1;top:4px;right:4px;bottom:4px;left:4px;transition:opacity .35s ease;opacity:0;background-color:rgba(0,0,0,.5)}.iv-image-link.iv-icon--type-loading:before,.iv-image-link:hover:before{opacity:1}.iv-image-link img:after,.iv-image-link img:before{content:\"\";position:absolute}.iv-image-link img:before{top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.2)}.iv-image-link img:after{z-index:0;width:35px;height:35px}.iv-image-view{display:none;flex-direction:column;height:0;transition:opacity .35s ease-out;opacity:0;background-color:rgba(0,0,0,.8);color:#fff;user-select:none}.iv-image-view--open body,html.iv-image-view--open{overflow:hidden}.iv-image-view--open .iv-image-view{display:flex;position:fixed;z-index:3;top:0;right:0;bottom:0;left:0;height:auto;opacity:1}.iv-image-view--single .single-hide{visibility:hidden}.iv-image-view__footer,.iv-image-view__header{display:flex;background-color:rgba(0,0,0,.8)}.iv-image-view__footer-wrapper,.iv-image-view__header-wrapper{z-index:2}.iv-image-view__header-wrapper{box-shadow:0 3px 7px rgba(0,0,0,.7)}.iv-image-view__footer-wrapper{box-shadow:0 -3px 7px rgba(0,0,0,.7)}.iv-image-view__header{justify-content:space-between}.iv-image-view__footer{justify-content:center}.iv-image-view__body{display:flex;position:relative;height:100%;overflow:auto}.iv-image-view__body::-webkit-scrollbar{width:20px}.iv-image-view__body::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.8)}.iv-image-view__body::-webkit-scrollbar-track{background-color:hsla(0,0%,100%,.8)}.iv-thumbnail-wrapper{display:flex;position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}.iv-image-view__number{display:flex;align-items:center;padding:0 40px;font-size:18px}.iv-image-view__backdrop{position:fixed;z-index:1;top:0;left:0;width:100%;height:100%}.iv-image,.iv-thumbnail{max-width:100%;max-height:100%;object-fit:contain;margin:auto}.iv-image{z-index:2;transition:opacity .35s ease-out;opacity:1}.iv-thumbnail{filter:blur(5px)}.iv-icon--type-error .iv-image,.iv-image-view__image--loading .iv-image,.iv-image-view__image--thumbnail .iv-image{opacity:0}.iv-image-view__image--thumbnail .iv-thumbnail-wrapper{z-index:2}.iv-image-view--full-height .iv-image,.iv-image-view--full-height .iv-thumbnail{max-height:none;cursor:grab}.iv-image-view--full-height .iv-image--grabbing{cursor:grabbing}.iv-icon-button{width:50px;height:50px;transition:all .35s ease-out}.iv-icon-button--small{width:25px;height:25px}.iv-icon-button+.iv-icon-button{margin-left:5px}.iv-icon-button:hover{background-color:hsla(0,0%,100%,.1)}.iv-icon-button--active,.iv-icon-button:active{background-color:hsla(0,0%,100%,.2)}.iv-config-form{display:none;top:10px;left:10px;flex-direction:column;width:50%;max-width:500px;height:50%;padding:10px;background-color:rgba(0,0,0,.85);color:#fff}.iv-config-form--open{display:flex;position:fixed;z-index:3}.iv-config-form__header{display:flex;align-items:center;padding:10px}.iv-config-form__header-title{flex-grow:1}.iv-config-form__options{display:flex;flex-flow:column wrap;flex-grow:1;overflow:auto}.iv-config-form__label{display:flex;flex:0 0 auto;align-items:center;margin:0;padding:10px;transition:all .35s ease-out}.iv-config-form__label:hover{background-color:hsla(0,0%,100%,.15)}.iv-config-form__checkbox{margin:0 5px 0 0!important}"
  720.  
  721. const initViewer = (function () {
  722. const CLASSES = {
  723. imageLink: 'js-image-link',
  724. imageLinkZoom: 'iv-icon--type-zoom',
  725. imageLinkHover: 'iv-icon--hover',
  726. brokenImage: 'iv-icon--type-image-broken',
  727. loadingIcon: 'iv-icon--type-loading',
  728. loading: 'iv-image-view__image--loading',
  729. thumbnail: 'iv-image-view__image--thumbnail',
  730. open: 'iv-image-view--open',
  731. single: 'iv-image-view--single',
  732. fullHeight: 'iv-image-view--full-height',
  733. iconExpand: 'iv-icon--type-expand',
  734. iconShrink: 'iv-icon--type-shrink',
  735. grabbing: 'iv-image--grabbing',
  736. buttonActive: 'iv-icon-button--active',
  737. }
  738.  
  739. const SELECTORS = {
  740. imageLink: `.${CLASSES.imageLink}`,
  741. }
  742.  
  743. const EMPTY_SRC =
  744. 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI='
  745.  
  746. const TRANSITION_DURATION = 350
  747.  
  748. const elements = {
  749. container: null,
  750. image: null,
  751. imageThumbnail: null,
  752. imageContainer: null,
  753. imageNumber: null,
  754. imageTotal: null,
  755. buttons: {
  756. next: null,
  757. previous: null,
  758. close: null,
  759. toggleFullHeight: null,
  760. },
  761. }
  762.  
  763. const state = {
  764. firstClick: true,
  765. open: false,
  766. currentLink: null,
  767. linksSet: [],
  768. isSingle: false,
  769. getCurrentLinkIndex() {
  770. return this.linksSet.indexOf(this.currentLink)
  771. },
  772. getLastLinkIndex() {
  773. return this.linksSet.length - 1
  774. },
  775. dragPosition: null,
  776. dragging: false,
  777. }
  778.  
  779. const image = {
  780. async show(link) {
  781. const container = elements.container
  782. const img = elements.image
  783. const thumbnail = elements.imageThumbnail
  784.  
  785. state.currentLink = link
  786.  
  787. if (state.isSingle) {
  788. container.classList.add(CLASSES.single)
  789. } else {
  790. container.classList.remove(CLASSES.single)
  791. elements.imageNumber.textContent = state.getCurrentLinkIndex() + 1
  792. }
  793.  
  794. if (!state.open) {
  795. document.documentElement.classList.add(CLASSES.open)
  796. state.open = true
  797. }
  798.  
  799. img.src = EMPTY_SRC
  800.  
  801. if (link.classList.contains(CLASSES.brokenImage)) {
  802. container.classList.add(CLASSES.brokenImage)
  803.  
  804. return
  805. }
  806.  
  807. container.classList.remove(CLASSES.brokenImage)
  808.  
  809. container.classList.add(CLASSES.loading, CLASSES.loadingIcon)
  810.  
  811. const isSizeKnown = !!link.dataset.ivWidth
  812. const thumbnailUrl = link.dataset.ivThumbnail
  813.  
  814. if (isSizeKnown) {
  815. thumbnail.width = link.dataset.ivWidth
  816. thumbnail.src = thumbnailUrl
  817.  
  818. container.classList.add(CLASSES.thumbnail)
  819. }
  820.  
  821. let imageUrl = link.dataset.ivImgUrl
  822.  
  823. if (!imageUrl) {
  824. imageUrl = await urlExtractor.getImageUrl({
  825. url: link.href,
  826. thumbnailUrl,
  827. host: link.dataset.ivHost,
  828. })
  829.  
  830. if (!imageUrl) {
  831. image.markAsBroken(link)
  832. return
  833. }
  834.  
  835. link.dataset.ivImgUrl = imageUrl
  836. }
  837.  
  838. try {
  839. await image.preload(
  840. imageUrl,
  841. isSizeKnown ? null : image.setThumbnailSize
  842. )
  843.  
  844. img.src = imageUrl
  845.  
  846. container.classList.remove(
  847. CLASSES.thumbnail,
  848. CLASSES.loading,
  849. CLASSES.loadingIcon
  850. )
  851.  
  852. setTimeout(image.hideThumbnail, TRANSITION_DURATION)
  853. } catch (e) {
  854. link.classList.remove(CLASSES.imageLink)
  855. image.markAsBroken(link)
  856.  
  857. $.attributes(link, { target: '_blank' })
  858. }
  859. },
  860.  
  861. preload(url, onSizeGet) {
  862. return new Promise((resolve, reject) => {
  863. const imageObject = new Image()
  864.  
  865. imageObject.onload = resolve
  866. imageObject.onerror = reject
  867.  
  868. imageObject.src = url
  869.  
  870. if (onSizeGet) {
  871. image.getSize(imageObject).then(onSizeGet)
  872. }
  873. })
  874. },
  875.  
  876. getSize(img) {
  877. return new Promise((resolve) => {
  878. const intervalId = setInterval(() => {
  879. if (img.naturalWidth) {
  880. clearInterval(intervalId)
  881. resolve({ width: img.naturalWidth, complete: img.complete })
  882. }
  883. }, 10)
  884. })
  885. },
  886.  
  887. setThumbnailSize({ width, complete }) {
  888. elements.imageThumbnail.width = width
  889. elements.imageThumbnail.src = state.currentLink.dataset.ivThumbnail
  890.  
  891. if (!complete) {
  892. elements.container.classList.add(CLASSES.thumbnail)
  893. }
  894.  
  895. state.currentLink.dataset.ivWidth = width
  896. },
  897.  
  898. hideThumbnail() {
  899. elements.imageThumbnail.removeAttribute('width')
  900. elements.imageThumbnail.src = EMPTY_SRC
  901. },
  902.  
  903. hide() {
  904. document.documentElement.classList.remove(CLASSES.open)
  905. state.open = false
  906. state.currentLink = null
  907. elements.image.src = EMPTY_SRC
  908. events.keyboard.unbind()
  909. },
  910.  
  911. next() {
  912. const currentIndex = state.getCurrentLinkIndex()
  913. const newIndex =
  914. currentIndex < state.getLastLinkIndex() ? currentIndex + 1 : 0
  915.  
  916. image.show(state.linksSet[newIndex])
  917. },
  918.  
  919. previous() {
  920. const currentIndex = state.getCurrentLinkIndex()
  921. const newIndex =
  922. currentIndex === 0 ? state.getLastLinkIndex() : currentIndex - 1
  923.  
  924. image.show(state.linksSet[newIndex])
  925. },
  926.  
  927. toggleFullHeight() {
  928. elements.container.classList.toggle(CLASSES.fullHeight)
  929. elements.buttons.toggleFullHeight.classList.toggle(CLASSES.iconExpand)
  930. elements.buttons.toggleFullHeight.classList.toggle(CLASSES.iconShrink)
  931. },
  932.  
  933. markAsBroken(link) {
  934. elements.container.classList.replace(
  935. CLASSES.loadingIcon,
  936. CLASSES.brokenImage
  937. )
  938. elements.container.classList.remove(CLASSES.loading)
  939. link.classList.replace(CLASSES.imageLinkZoom, CLASSES.brokenImage)
  940. },
  941. }
  942.  
  943. const events = {
  944. linkClick(e) {
  945. e.preventDefault()
  946.  
  947. if (state.firstClick) {
  948. create.viewContainer()
  949. state.firstClick = false
  950. }
  951.  
  952. const link = e.target
  953.  
  954. state.linksSet = $$(SELECTORS.imageLink, link.parentNode)
  955. state.isSingle = state.linksSet.length === 1
  956.  
  957. if (!state.isSingle) {
  958. elements.imageTotal.textContent = state.linksSet.length
  959. }
  960.  
  961. events.keyboard.bind()
  962.  
  963. image.show(link)
  964. },
  965.  
  966. keyboard: {
  967. bind() {
  968. document.addEventListener('keydown', events.keyboard.handler, true)
  969. },
  970. unbind() {
  971. document.removeEventListener('keydown', events.keyboard.handler, true)
  972. },
  973. handler(e) {
  974. if (e.defaultPrevented || e.repeat) {
  975. return
  976. }
  977.  
  978. switch (e.key) {
  979. case 'ArrowRight':
  980. image.next()
  981. break
  982.  
  983. case 'ArrowLeft':
  984. image.previous()
  985. break
  986.  
  987. case 'Escape':
  988. image.hide()
  989. break
  990.  
  991. case ' ':
  992. image.toggleFullHeight()
  993. break
  994.  
  995. default:
  996. return
  997. }
  998.  
  999. e.preventDefault()
  1000. },
  1001. },
  1002.  
  1003. mouse(e) {
  1004. switch (e.type) {
  1005. case 'mousedown':
  1006. state.dragging = true
  1007. state.dragPosition = e.clientY
  1008. elements.image.classList.add(CLASSES.grabbing)
  1009. break
  1010.  
  1011. case 'mousemove':
  1012. if (state.dragging) {
  1013. elements.imageContainer.scrollTop -=
  1014. e.clientY - state.dragPosition
  1015. state.dragPosition = e.clientY
  1016. }
  1017. break
  1018.  
  1019. case 'mouseup':
  1020. case 'mouseout':
  1021. state.dragging = false
  1022. elements.image.classList.remove(CLASSES.grabbing)
  1023. break
  1024.  
  1025. case 'dblclick':
  1026. image.toggleFullHeight()
  1027. break
  1028.  
  1029. default:
  1030. return
  1031. }
  1032.  
  1033. e.preventDefault()
  1034. },
  1035. }
  1036.  
  1037. const create = {
  1038. viewContainer() {
  1039. elements.container = $.create('div', {
  1040. className: 'iv-image-view iv-icon iv-icon--size-button',
  1041. contents: [
  1042. create.viewContainerHeader(),
  1043. create.viewContainerBody(),
  1044. create.viewContainerFooter(),
  1045. ],
  1046. })
  1047.  
  1048. document.body.appendChild(elements.container)
  1049. },
  1050.  
  1051. viewContainerBody() {
  1052. elements.image = $.create('img', {
  1053. className: 'iv-image',
  1054. events: {
  1055. 'mousedown mouseup mousemove mouseout dblclick': events.mouse,
  1056. },
  1057. })
  1058.  
  1059. elements.imageThumbnail = $.create('img', {
  1060. className: 'iv-thumbnail',
  1061. })
  1062.  
  1063. elements.imageContainer = $.create('div', {
  1064. className: 'iv-image-view__body',
  1065. contents: [
  1066. {
  1067. tag: 'div',
  1068. className: 'iv-image-view__backdrop',
  1069. events: {
  1070. click: image.hide,
  1071. },
  1072. },
  1073. {
  1074. tag: 'div',
  1075. className: 'iv-thumbnail-wrapper',
  1076. contents: elements.imageThumbnail,
  1077. },
  1078. elements.image,
  1079. ],
  1080. })
  1081.  
  1082. return elements.imageContainer
  1083. },
  1084.  
  1085. viewContainerHeader() {
  1086. elements.imageNumber = document.createElement('span')
  1087. elements.imageTotal = document.createElement('span')
  1088. const imageNumber = $.create('div', {
  1089. className: 'iv-image-view__number single-hide',
  1090. contents: [elements.imageNumber, '/', elements.imageTotal],
  1091. })
  1092.  
  1093. elements.buttons.close = create.toolbarButton(
  1094. 'Close (Esc)',
  1095. 'close',
  1096. image.hide
  1097. )
  1098.  
  1099. return {
  1100. tag: 'div',
  1101. className: 'iv-image-view__header-wrapper',
  1102. contents: {
  1103. tag: 'div',
  1104. className: 'iv-image-view__header',
  1105. contents: [imageNumber, elements.buttons.close],
  1106. },
  1107. }
  1108. },
  1109.  
  1110. viewContainerFooter() {
  1111. const buttons = elements.buttons
  1112. buttons.previous = create.toolbarButton(
  1113. 'Previous (←)',
  1114. 'previous',
  1115. image.previous,
  1116. 'single-hide'
  1117. )
  1118. buttons.toggleFullHeight = create.toolbarButton(
  1119. 'Toggle full height (Space)',
  1120. 'expand',
  1121. image.toggleFullHeight
  1122. )
  1123. buttons.next = create.toolbarButton(
  1124. 'Next (→)',
  1125. 'next',
  1126. image.next,
  1127. 'single-hide'
  1128. )
  1129.  
  1130. return {
  1131. tag: 'div',
  1132. className: 'iv-image-view__footer-wrapper',
  1133. contents: {
  1134. tag: 'div',
  1135. className: 'iv-image-view__footer',
  1136. contents: [
  1137. buttons.previous,
  1138. buttons.toggleFullHeight,
  1139. buttons.next,
  1140. ],
  1141. },
  1142. }
  1143. },
  1144.  
  1145. toolbarButton(title, icon, handler, className = '') {
  1146. return $.create('a', {
  1147. href: '#',
  1148. title: title,
  1149. className: `iv-icon-button iv-icon iv-icon--type-${icon} ${className}`,
  1150. events: {
  1151. click: (e) => {
  1152. e.preventDefault()
  1153. handler()
  1154. },
  1155. },
  1156. })
  1157. },
  1158. }
  1159.  
  1160. return function (enabledHosts) {
  1161. addStyle(css_248z)
  1162.  
  1163. const container = $('body')
  1164.  
  1165. const linkClasses = [
  1166. CLASSES.imageLink,
  1167. 'iv-image-link',
  1168. 'iv-icon',
  1169. 'iv-icon--hover',
  1170. CLASSES.imageLinkZoom,
  1171. 'iv-icon--size-button',
  1172. ]
  1173.  
  1174. const getHostName = urlExtractor.getHostNameMatcher(enabledHosts)
  1175.  
  1176. const imagesWithLinks = $$('a > img, a > var', container)
  1177.  
  1178. imagesWithLinks
  1179. .map((img) => {
  1180. return { link: img.parentNode, thumbnailUrl: img.src || img.title }
  1181. })
  1182. .filter(({ link }) => link.href)
  1183. .forEach(({ link, thumbnailUrl }) => {
  1184. const hostName = getHostName(link.href)
  1185.  
  1186. if (hostName) {
  1187. link.dataset.ivHost = hostName
  1188. link.dataset.ivThumbnail = thumbnailUrl
  1189. link.classList.add(...linkClasses)
  1190. }
  1191. })
  1192.  
  1193. $.delegate(container, 'click', SELECTORS.imageLink, events.linkClick)
  1194. }
  1195. })()
  1196.  
  1197. $.ready().then(async () => {
  1198. const hostConfig = await config.init()
  1199.  
  1200. initViewer(hostConfig.enabledHosts)
  1201. })
  1202. })()