viewer.js 98 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097
  1. /*!
  2. * Viewer v1.0.0
  3. * https://github.com/fengyuanchen/viewer
  4. *
  5. * Copyright (c) 2015-2018 Chen Fengyuan
  6. * Released under the MIT license
  7. *
  8. * Date: 2018-04-01T06:11:06.751Z
  9. */
  10. (function (global, factory) {
  11. typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery')) :
  12. typeof define === 'function' && define.amd ? define(['jquery'], factory) :
  13. (factory(global.jQuery));
  14. }(this, (function ($) { 'use strict';
  15. $ = $ && $.hasOwnProperty('default') ? $['default'] : $;
  16. var DEFAULTS = {
  17. // Enable inline mode
  18. inline: false,
  19. // Show the button on the top-right of the viewer
  20. button: true,
  21. // Show the navbar
  22. navbar: true,
  23. // Show the title
  24. title: true,
  25. // Show the toolbar
  26. toolbar: true,
  27. // Show the tooltip with image ratio (percentage) when zoom in or zoom out
  28. tooltip: true,
  29. // Enable to move the image
  30. movable: true,
  31. // Enable to zoom the image
  32. zoomable: true,
  33. // Enable to rotate the image
  34. rotatable: true,
  35. // Enable to scale the image
  36. scalable: true,
  37. // Enable CSS3 Transition for some special elements
  38. transition: true,
  39. // Enable to request fullscreen when play
  40. fullscreen: true,
  41. // The amount of time to delay between automatically cycling an image when playing.
  42. interval: 2000,
  43. // Enable keyboard support
  44. keyboard: true,
  45. // Enable a modal backdrop, specify `static` for a backdrop which doesn't close the modal on click
  46. backdrop: true,
  47. // Indicate if show a loading spinner when load image or not.
  48. loading: true,
  49. // Indicate if enable loop viewing or not.
  50. loop: true,
  51. // Min width of the viewer in inline mode
  52. minWidth: 200,
  53. // Min height of the viewer in inline mode
  54. minHeight: 100,
  55. // Define the ratio when zoom the image by wheeling mouse
  56. zoomRatio: 0.1,
  57. // Define the min ratio of the image when zoom out
  58. minZoomRatio: 0.01,
  59. // Define the max ratio of the image when zoom in
  60. maxZoomRatio: 100,
  61. // Define the CSS `z-index` value of viewer in modal mode.
  62. zIndex: 2015,
  63. // Define the CSS `z-index` value of viewer in inline mode.
  64. zIndexInline: 0,
  65. // Define where to get the original image URL for viewing
  66. // Type: String (an image attribute) or Function (should return an image URL)
  67. url: 'src',
  68. url_original:'src',
  69. // Define where to put the viewer in modal mode.
  70. // Type: String | Element
  71. container: 'body',
  72. // Filter the images for viewing.
  73. // Type: Function (return true if the image is viewable)
  74. filter: null,
  75. // Event shortcuts
  76. ready: null,
  77. show: null,
  78. shown: null,
  79. hide: null,
  80. hidden: null,
  81. view: null,
  82. viewed: null
  83. };
  84. var TEMPLATE = '<div class="viewer-container" touch-action="none">' +
  85. '<div class="viewer-canvas"></div>' +
  86. '<div class="viewer-footer">' +
  87. '<div class="viewer-toolbar">'+
  88. '<div class="viewer-title"></div>'+'</div>' +
  89. '<div class="viewer-navbar" style="display: none">' + '<ul class="viewer-list"></ul>' + '</div>' + '</div>' +
  90. '<div class="viewer-tooltip"></div>' +
  91. '<div role="button" class="viewer-button" data-action="mix"></div>' +
  92. '<div class="viewer-player"></div>' + '</div>';
  93. var IN_BROWSER = typeof window !== 'undefined';
  94. var WINDOW = IN_BROWSER ? window : {};
  95. var NAMESPACE = 'viewer';
  96. // Actions
  97. var ACTION_MOVE = 'move';
  98. var ACTION_SWITCH = 'switch';
  99. var ACTION_ZOOM = 'zoom';
  100. // Classes
  101. var CLASS_ACTIVE = NAMESPACE + '-active';
  102. var CLASS_CLOSE = NAMESPACE + '-close';
  103. var CLASS_FADE = NAMESPACE + '-fade';
  104. var CLASS_FIXED = NAMESPACE + '-fixed';
  105. var CLASS_FULLSCREEN = NAMESPACE + '-fullscreen';
  106. var CLASS_FULLSCREEN_EXIT = NAMESPACE + '-fullscreen-exit';
  107. var CLASS_HIDE = NAMESPACE + '-hide';
  108. var CLASS_HIDE_MD_DOWN = NAMESPACE + '-hide-md-down';
  109. var CLASS_HIDE_SM_DOWN = NAMESPACE + '-hide-sm-down';
  110. var CLASS_HIDE_XS_DOWN = NAMESPACE + '-hide-xs-down';
  111. var CLASS_IN = NAMESPACE + '-in';
  112. var CLASS_INVISIBLE = NAMESPACE + '-invisible';
  113. var CLASS_LOADING = NAMESPACE + '-loading';
  114. var CLASS_MOVE = NAMESPACE + '-move';
  115. var CLASS_OPEN = NAMESPACE + '-open';
  116. var CLASS_SHOW = NAMESPACE + '-show';
  117. var CLASS_TRANSITION = NAMESPACE + '-transition';
  118. // Events
  119. var EVENT_READY = 'ready';
  120. var EVENT_SHOW = 'show';
  121. var EVENT_SHOWN = 'shown';
  122. var EVENT_HIDE = 'hide';
  123. var EVENT_HIDDEN = 'hidden';
  124. var EVENT_VIEW = 'view';
  125. var EVENT_VIEWED = 'viewed';
  126. var EVENT_CLICK = 'click';
  127. var EVENT_DRAG_START = 'dragstart';
  128. var EVENT_KEY_DOWN = 'keydown';
  129. var EVENT_LOAD = 'load';
  130. var EVENT_POINTER_DOWN = WINDOW.PointerEvent ? 'pointerdown' : 'touchstart mousedown';
  131. var EVENT_POINTER_MOVE = WINDOW.PointerEvent ? 'pointermove' : 'touchmove mousemove';
  132. var EVENT_POINTER_UP = WINDOW.PointerEvent ? 'pointerup pointercancel' : 'touchend touchcancel mouseup';
  133. var EVENT_RESIZE = 'resize';
  134. var EVENT_TRANSITION_END = 'transitionend';
  135. var EVENT_WHEEL = 'wheel mousewheel DOMMouseScroll';
  136. //var BUTTONS = ['zoom-in', 'zoom-out', 'one-to-one', 'reset', 'prev', 'play', 'next', 'rotate-left', 'rotate-right', 'flip-horizontal', 'flip-vertical'];
  137. var BUTTONS = [ 'one-to-ones','enlarge','zoom-ins', 'zoom-outs', 'prevs', 'plays', 'nexts',];
  138. var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
  139. return typeof obj;
  140. } : function (obj) {
  141. return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
  142. };
  143. var classCallCheck = function (instance, Constructor) {
  144. if (!(instance instanceof Constructor)) {
  145. throw new TypeError("Cannot call a class as a function");
  146. }
  147. };
  148. var createClass = function () {
  149. function defineProperties(target, props) {
  150. for (var i = 0; i < props.length; i++) {
  151. var descriptor = props[i];
  152. descriptor.enumerable = descriptor.enumerable || false;
  153. descriptor.configurable = true;
  154. if ("value" in descriptor) descriptor.writable = true;
  155. Object.defineProperty(target, descriptor.key, descriptor);
  156. }
  157. }
  158. return function (Constructor, protoProps, staticProps) {
  159. if (protoProps) defineProperties(Constructor.prototype, protoProps);
  160. if (staticProps) defineProperties(Constructor, staticProps);
  161. return Constructor;
  162. };
  163. }();
  164. /**
  165. * Check if the given value is a string.
  166. * @param {*} value - The value to check.
  167. * @returns {boolean} Returns `true` if the given value is a string, else `false`.
  168. */
  169. function isString(value) {
  170. return typeof value === 'string';
  171. }
  172. /**
  173. * Check if the given value is not a number.
  174. */
  175. var isNaN = Number.isNaN || WINDOW.isNaN;
  176. /**
  177. * Check if the given value is a number.
  178. * @param {*} value - The value to check.
  179. * @returns {boolean} Returns `true` if the given value is a number, else `false`.
  180. */
  181. function isNumber(value) {
  182. return typeof value === 'number' && !isNaN(value);
  183. }
  184. /**
  185. * Check if the given value is undefined.
  186. * @param {*} value - The value to check.
  187. * @returns {boolean} Returns `true` if the given value is undefined, else `false`.
  188. */
  189. function isUndefined(value) {
  190. return typeof value === 'undefined';
  191. }
  192. /**
  193. * Check if the given value is an object.
  194. * @param {*} value - The value to check.
  195. * @returns {boolean} Returns `true` if the given value is an object, else `false`.
  196. */
  197. function isObject(value) {
  198. return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && value !== null;
  199. }
  200. var hasOwnProperty = Object.prototype.hasOwnProperty;
  201. /**
  202. * Check if the given value is a plain object.
  203. * @param {*} value - The value to check.
  204. * @returns {boolean} Returns `true` if the given value is a plain object, else `false`.
  205. */
  206. function isPlainObject(value) {
  207. if (!isObject(value)) {
  208. return false;
  209. }
  210. try {
  211. var _constructor = value.constructor;
  212. var prototype = _constructor.prototype;
  213. return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf');
  214. } catch (e) {
  215. return false;
  216. }
  217. }
  218. /**
  219. * Check if the given value is a function.
  220. * @param {*} value - The value to check.
  221. * @returns {boolean} Returns `true` if the given value is a function, else `false`.
  222. */
  223. function isFunction(value) {
  224. return typeof value === 'function';
  225. }
  226. /**
  227. * Iterate the given data.
  228. * @param {*} data - The data to iterate.
  229. * @param {Function} callback - The process function for each element.
  230. * @returns {*} The original data.
  231. */
  232. function forEach(data, callback) {
  233. if (data && isFunction(callback)) {
  234. if (Array.isArray(data) || isNumber(data.length) /* array-like */) {
  235. var length = data.length;
  236. var i = void 0;
  237. for (i = 0; i < length; i += 1) {
  238. if (callback.call(data, data[i], i, data) === false) {
  239. break;
  240. }
  241. }
  242. } else if (isObject(data)) {
  243. Object.keys(data).forEach(function (key) {
  244. callback.call(data, data[key], key, data);
  245. });
  246. }
  247. }
  248. return data;
  249. }
  250. /**
  251. * Extend the given object.
  252. * @param {*} obj - The object to be extended.
  253. * @param {*} args - The rest objects which will be merged to the first object.
  254. * @returns {Object} The extended object.
  255. */
  256. var assign = Object.assign || function assign(obj) {
  257. for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  258. args[_key - 1] = arguments[_key];
  259. }
  260. if (isObject(obj) && args.length > 0) {
  261. args.forEach(function (arg) {
  262. if (isObject(arg)) {
  263. Object.keys(arg).forEach(function (key) {
  264. obj[key] = arg[key];
  265. });
  266. }
  267. });
  268. }
  269. return obj;
  270. };
  271. var REGEXP_SUFFIX = /^(?:width|height|left|top|marginLeft|marginTop)$/;
  272. /**
  273. * Apply styles to the given element.
  274. * @param {Element} element - The target element.
  275. * @param {Object} styles - The styles for applying.
  276. */
  277. function setStyle(element, styles) {
  278. var style = element.style;
  279. forEach(styles, function (value, property) {
  280. if (REGEXP_SUFFIX.test(property) && isNumber(value)) {
  281. value += 'px';
  282. }
  283. style[property] = value;
  284. });
  285. }
  286. /**
  287. * Check if the given element has a special class.
  288. * @param {Element} element - The element to check.
  289. * @param {string} value - The class to search.
  290. * @returns {boolean} Returns `true` if the special class was found.
  291. */
  292. function hasClass(element, value) {
  293. return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1;
  294. }
  295. /**
  296. * Add classes to the given element.
  297. * @param {Element} element - The target element.
  298. * @param {string} value - The classes to be added.
  299. */
  300. function addClass(element, value) {
  301. if (!value) {
  302. return;
  303. }
  304. if (isNumber(element.length)) {
  305. forEach(element, function (elem) {
  306. addClass(elem, value);
  307. });
  308. return;
  309. }
  310. if (element.classList) {
  311. element.classList.add(value);
  312. return;
  313. }
  314. var className = element.className.trim();
  315. if (!className) {
  316. element.className = value;
  317. } else if (className.indexOf(value) < 0) {
  318. element.className = className + ' ' + value;
  319. }
  320. }
  321. /**
  322. * Remove classes from the given element.
  323. * @param {Element} element - The target element.
  324. * @param {string} value - The classes to be removed.
  325. */
  326. function removeClass(element, value) {
  327. if (!value) {
  328. return;
  329. }
  330. if (isNumber(element.length)) {
  331. forEach(element, function (elem) {
  332. removeClass(elem, value);
  333. });
  334. return;
  335. }
  336. if (element.classList) {
  337. element.classList.remove(value);
  338. return;
  339. }
  340. if (element.className.indexOf(value) >= 0) {
  341. element.className = element.className.replace(value, '');
  342. }
  343. }
  344. /**
  345. * Add or remove classes from the given element.
  346. * @param {Element} element - The target element.
  347. * @param {string} value - The classes to be toggled.
  348. * @param {boolean} added - Add only.
  349. */
  350. function toggleClass(element, value, added) {
  351. if (!value) {
  352. return;
  353. }
  354. if (isNumber(element.length)) {
  355. forEach(element, function (elem) {
  356. toggleClass(elem, value, added);
  357. });
  358. return;
  359. }
  360. // IE10-11 doesn't support the second parameter of `classList.toggle`
  361. if (added) {
  362. addClass(element, value);
  363. } else {
  364. removeClass(element, value);
  365. }
  366. }
  367. var REGEXP_HYPHENATE = /([a-z\d])([A-Z])/g;
  368. /**
  369. * Transform the given string from camelCase to kebab-case
  370. * @param {string} value - The value to transform.
  371. * @returns {string} The transformed value.
  372. */
  373. function hyphenate(value) {
  374. return value.replace(REGEXP_HYPHENATE, '$1-$2').toLowerCase();
  375. }
  376. /**
  377. * Get data from the given element.
  378. * @param {Element} element - The target element.
  379. * @param {string} name - The data key to get.
  380. * @returns {string} The data value.
  381. */
  382. function getData(element, name) {
  383. if (isObject(element[name])) {
  384. return element[name];
  385. } else if (element.dataset) {
  386. return element.dataset[name];
  387. }
  388. return element.getAttribute('data-' + hyphenate(name));
  389. }
  390. /**
  391. * Set data to the given element.
  392. * @param {Element} element - The target element.
  393. * @param {string} name - The data key to set.
  394. * @param {string} data - The data value.
  395. */
  396. function setData(element, name, data) {
  397. if (isObject(data)) {
  398. element[name] = data;
  399. } else if (element.dataset) {
  400. element.dataset[name] = data;
  401. } else {
  402. element.setAttribute('data-' + hyphenate(name), data);
  403. }
  404. }
  405. /**
  406. * Remove data from the given element.
  407. * @param {Element} element - The target element.
  408. * @param {string} name - The data key to remove.
  409. */
  410. function removeData(element, name) {
  411. if (isObject(element[name])) {
  412. try {
  413. delete element[name];
  414. } catch (e) {
  415. element[name] = undefined;
  416. }
  417. } else if (element.dataset) {
  418. // #128 Safari not allows to delete dataset property
  419. try {
  420. delete element.dataset[name];
  421. } catch (e) {
  422. element.dataset[name] = undefined;
  423. }
  424. } else {
  425. element.removeAttribute('data-' + hyphenate(name));
  426. }
  427. }
  428. var REGEXP_SPACES = /\s\s*/;
  429. var onceSupported = function () {
  430. var supported = false;
  431. if (IN_BROWSER) {
  432. var once = false;
  433. var listener = function listener() {};
  434. var options = Object.defineProperty({}, 'once', {
  435. get: function get$$1() {
  436. supported = true;
  437. return once;
  438. },
  439. /**
  440. * This setter can fix a `TypeError` in strict mode
  441. * {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only}
  442. * @param {boolean} value - The value to set
  443. */
  444. set: function set$$1(value) {
  445. once = value;
  446. }
  447. });
  448. WINDOW.addEventListener('test', listener, options);
  449. WINDOW.removeEventListener('test', listener, options);
  450. }
  451. return supported;
  452. }();
  453. /**
  454. * Remove event listener from the target element.
  455. * @param {Element} element - The event target.
  456. * @param {string} type - The event type(s).
  457. * @param {Function} listener - The event listener.
  458. * @param {Object} options - The event options.
  459. */
  460. function removeListener(element, type, listener) {
  461. var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
  462. var handler = listener;
  463. type.trim().split(REGEXP_SPACES).forEach(function (event) {
  464. if (!onceSupported) {
  465. var listeners = element.listeners;
  466. if (listeners && listeners[event] && listeners[event][listener]) {
  467. handler = listeners[event][listener];
  468. delete listeners[event][listener];
  469. if (Object.keys(listeners[event]).length === 0) {
  470. delete listeners[event];
  471. }
  472. if (Object.keys(listeners).length === 0) {
  473. delete element.listeners;
  474. }
  475. }
  476. }
  477. element.removeEventListener(event, handler, options);
  478. });
  479. }
  480. /**
  481. * Add event listener to the target element.
  482. * @param {Element} element - The event target.
  483. * @param {string} type - The event type(s).
  484. * @param {Function} listener - The event listener.
  485. * @param {Object} options - The event options.
  486. */
  487. function addListener(element, type, listener) {
  488. var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
  489. var _handler = listener;
  490. type.trim().split(REGEXP_SPACES).forEach(function (event) {
  491. if (options.once && !onceSupported) {
  492. var _element$listeners = element.listeners,
  493. listeners = _element$listeners === undefined ? {} : _element$listeners;
  494. _handler = function handler() {
  495. for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  496. args[_key2] = arguments[_key2];
  497. }
  498. delete listeners[event][listener];
  499. element.removeEventListener(event, _handler, options);
  500. listener.apply(element, args);
  501. };
  502. if (!listeners[event]) {
  503. listeners[event] = {};
  504. }
  505. if (listeners[event][listener]) {
  506. element.removeEventListener(event, listeners[event][listener], options);
  507. }
  508. listeners[event][listener] = _handler;
  509. element.listeners = listeners;
  510. }
  511. element.addEventListener(event, _handler, options);
  512. });
  513. }
  514. /**
  515. * Dispatch event on the target element.
  516. * @param {Element} element - The event target.
  517. * @param {string} type - The event type(s).
  518. * @param {Object} data - The additional event data.
  519. * @returns {boolean} Indicate if the event is default prevented or not.
  520. */
  521. function dispatchEvent(element, type, data) {
  522. var event = void 0;
  523. // Event and CustomEvent on IE9-11 are global objects, not constructors
  524. if (isFunction(Event) && isFunction(CustomEvent)) {
  525. event = new CustomEvent(type, {
  526. detail: data,
  527. bubbles: true,
  528. cancelable: true
  529. });
  530. } else {
  531. event = document.createEvent('CustomEvent');
  532. event.initCustomEvent(type, true, true, data);
  533. }
  534. return element.dispatchEvent(event);
  535. }
  536. /**
  537. * Get the offset base on the document.
  538. * @param {Element} element - The target element.
  539. * @returns {Object} The offset data.
  540. */
  541. function getOffset(element) {
  542. var box = element.getBoundingClientRect();
  543. return {
  544. left: box.left + (window.pageXOffset - document.documentElement.clientLeft),
  545. top: box.top + (window.pageYOffset - document.documentElement.clientTop)
  546. };
  547. }
  548. /**
  549. * Get transforms base on the given object.
  550. * @param {Object} obj - The target object.
  551. * @returns {string} A string contains transform values.
  552. */
  553. function getTransforms(_ref) {
  554. var rotate = _ref.rotate,
  555. scaleX = _ref.scaleX,
  556. scaleY = _ref.scaleY,
  557. translateX = _ref.translateX,
  558. translateY = _ref.translateY;
  559. var values = [];
  560. if (isNumber(translateX) && translateX !== 0) {
  561. values.push('translateX(' + translateX + 'px)');
  562. }
  563. if (isNumber(translateY) && translateY !== 0) {
  564. values.push('translateY(' + translateY + 'px)');
  565. }
  566. // Rotate should come first before scale to match orientation transform
  567. if (isNumber(rotate) && rotate !== 0) {
  568. values.push('rotate(' + rotate + 'deg)');
  569. }
  570. if (isNumber(scaleX) && scaleX !== 1) {
  571. values.push('scaleX(' + scaleX + ')');
  572. }
  573. if (isNumber(scaleY) && scaleY !== 1) {
  574. values.push('scaleY(' + scaleY + ')');
  575. }
  576. var transform = values.length ? values.join(' ') : 'none';
  577. return {
  578. WebkitTransform: transform,
  579. msTransform: transform,
  580. transform: transform
  581. };
  582. }
  583. /**
  584. * Get an image name from an image url.
  585. * @param {string} url - The target url.
  586. * @example
  587. * // picture.jpg
  588. * getImageNameFromURL('http://domain.com/path/to/picture.jpg?size=1280×960')
  589. * @returns {string} A string contains the image name.
  590. */
  591. function getImageNameFromURL(url) {
  592. return isString(url) ? url.replace(/^.*\//, '').replace(/[?&#].*$/, '') : '';
  593. }
  594. var IS_SAFARI = WINDOW.navigator && /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(WINDOW.navigator.userAgent);
  595. /**
  596. * Get an image's natural sizes.
  597. * @param {string} image - The target image.
  598. * @param {Function} callback - The callback function.
  599. * @returns {HTMLImageElement} The new image.
  600. */
  601. function getImageNaturalSizes(image, callback) {
  602. var newImage = document.createElement('img');
  603. // Modern browsers (except Safari)
  604. if (image.naturalWidth && !IS_SAFARI) {
  605. callback(image.naturalWidth, image.naturalHeight);
  606. return newImage;
  607. }
  608. var body = document.body || document.documentElement;
  609. newImage.onload = function () {
  610. callback(newImage.width, newImage.height);
  611. if (!IS_SAFARI) {
  612. body.removeChild(newImage);
  613. }
  614. };
  615. newImage.src = image.src;
  616. // iOS Safari will convert the image automatically
  617. // with its orientation once append it into DOM
  618. if (!IS_SAFARI) {
  619. newImage.style.cssText = 'left:0;' + 'max-height:none!important;' + 'max-width:none!important;' + 'min-height:0!important;' + 'min-width:0!important;' + 'opacity:0;' + 'position:absolute;' + 'top:0;' + 'z-index:-1;';
  620. body.appendChild(newImage);
  621. }
  622. return newImage;
  623. }
  624. /**
  625. * Get the related class name of a responsive type number.
  626. * @param {string} type - The responsive type.
  627. * @returns {string} The related class name.
  628. */
  629. function getResponsiveClass(type) {
  630. switch (type) {
  631. case 2:
  632. return CLASS_HIDE_XS_DOWN;
  633. case 3:
  634. return CLASS_HIDE_SM_DOWN;
  635. case 4:
  636. return CLASS_HIDE_MD_DOWN;
  637. default:
  638. return '';
  639. }
  640. }
  641. /**
  642. * Get the max ratio of a group of pointers.
  643. * @param {string} pointers - The target pointers.
  644. * @returns {number} The result ratio.
  645. */
  646. function getMaxZoomRatio(pointers) {
  647. var pointers2 = assign({}, pointers);
  648. var ratios = [];
  649. forEach(pointers, function (pointer, pointerId) {
  650. delete pointers2[pointerId];
  651. forEach(pointers2, function (pointer2) {
  652. var x1 = Math.abs(pointer.startX - pointer2.startX);
  653. var y1 = Math.abs(pointer.startY - pointer2.startY);
  654. var x2 = Math.abs(pointer.endX - pointer2.endX);
  655. var y2 = Math.abs(pointer.endY - pointer2.endY);
  656. var z1 = Math.sqrt(x1 * x1 + y1 * y1);
  657. var z2 = Math.sqrt(x2 * x2 + y2 * y2);
  658. var ratio = (z2 - z1) / z1;
  659. ratios.push(ratio);
  660. });
  661. });
  662. ratios.sort(function (a, b) {
  663. return Math.abs(a) < Math.abs(b);
  664. });
  665. return ratios[0];
  666. }
  667. /**
  668. * Get a pointer from an event object.
  669. * @param {Object} event - The target event object.
  670. * @param {boolean} endOnly - Indicates if only returns the end point coordinate or not.
  671. * @returns {Object} The result pointer contains start and/or end point coordinates.
  672. */
  673. function getPointer(_ref2, endOnly) {
  674. var pageX = _ref2.pageX,
  675. pageY = _ref2.pageY;
  676. var end = {
  677. endX: pageX,
  678. endY: pageY
  679. };
  680. return endOnly ? end : assign({
  681. startX: pageX,
  682. startY: pageY
  683. }, end);
  684. }
  685. /**
  686. * Get the center point coordinate of a group of pointers.
  687. * @param {Object} pointers - The target pointers.
  688. * @returns {Object} The center point coordinate.
  689. */
  690. function getPointersCenter(pointers) {
  691. var pageX = 0;
  692. var pageY = 0;
  693. var count = 0;
  694. forEach(pointers, function (_ref3) {
  695. var startX = _ref3.startX,
  696. startY = _ref3.startY;
  697. pageX += startX;
  698. pageY += startY;
  699. count += 1;
  700. });
  701. pageX /= count;
  702. pageY /= count;
  703. return {
  704. pageX: pageX,
  705. pageY: pageY
  706. };
  707. }
  708. var render = {
  709. render: function render() {
  710. this.initContainer();
  711. this.initViewer();
  712. this.initList();
  713. this.renderViewer();
  714. },
  715. initContainer: function initContainer() {
  716. this.containerData = {
  717. width: window.innerWidth,
  718. height: window.innerHeight
  719. };
  720. },
  721. initViewer: function initViewer() {
  722. var options = this.options,
  723. parent = this.parent;
  724. var viewerData = void 0;
  725. if (options.inline) {
  726. viewerData = {
  727. width: Math.max(parent.offsetWidth, options.minWidth),
  728. height: Math.max(parent.offsetHeight, options.minHeight)
  729. };
  730. this.parentData = viewerData;
  731. }
  732. if (this.fulled || !viewerData) {
  733. viewerData = this.containerData;
  734. }
  735. this.viewerData = assign({}, viewerData);
  736. },
  737. renderViewer: function renderViewer() {
  738. if (this.options.inline && !this.fulled) {
  739. setStyle(this.viewer, this.viewerData);
  740. }
  741. },
  742. initList: function initList() {
  743. var _this = this;
  744. var element = this.element,
  745. options = this.options,
  746. list = this.list;
  747. var items = [];
  748. var dealOriginal= this.dealOriginal;
  749. forEach(this.images, function (image, i) {
  750. var src = image.src;
  751. var alt = image.alt;// || getImageNameFromURL(src);
  752. var url = options.url;
  753. var url_original = options.url_original;
  754. if (isString(url_original)) {
  755. url_original = image.getAttribute(url_original);
  756. } else if (isFunction(url_original)) {
  757. url_original = url_original.call(_this, image);
  758. }
  759. if (dealOriginal.indexOf(url_original)>-1)
  760. {
  761. url=url_original;
  762. }else {
  763. if (isString(url)) {
  764. url = image.getAttribute(url);
  765. } else if (isFunction(url)) {
  766. url = url.call(_this, image);
  767. }
  768. }
  769. if (src || url) {
  770. items.push('<li>' + '<img' + (' src="' + (src || url) + '"') + ' role="button"' + ' data-action="view"' + (' data-index="' + i + '"') + (' data-original-url="' + (url || src) + '"') + (' data-deal-url="' + (url_original || src) + '"') + (' alt="' + alt + '"') + '>' + '</li>');
  771. }
  772. });
  773. list.innerHTML = items.join('');
  774. this.items = list.getElementsByTagName('li');
  775. forEach(this.items, function (item) {
  776. var image = item.firstElementChild;
  777. setData(image, 'filled', true);
  778. if (options.loading) {
  779. addClass(item, CLASS_LOADING);
  780. }
  781. addListener(image, EVENT_LOAD, function (event) {
  782. if (options.loading) {
  783. removeClass(item, CLASS_LOADING);
  784. }
  785. _this.loadImage(event);
  786. }, {
  787. once: true
  788. });
  789. });
  790. if (options.transition) {
  791. addListener(element, EVENT_VIEWED, function () {
  792. addClass(list, CLASS_TRANSITION);
  793. }, {
  794. once: true
  795. });
  796. }
  797. },
  798. renderList: function renderList(index) {
  799. var i = index || this.index;
  800. var width = this.items[i].offsetWidth || 30;
  801. var outerWidth = width + 1; // 1 pixel of `margin-left` width
  802. // Place the active item in the center of the screen
  803. setStyle(this.list, assign({
  804. width: outerWidth * this.length
  805. }, getTransforms({
  806. translateX: (this.viewerData.width - width) / 2 - outerWidth * i
  807. })));
  808. },
  809. resetList: function resetList() {
  810. var list = this.list;
  811. list.innerHTML = '';
  812. removeClass(list, CLASS_TRANSITION);
  813. setStyle(list, getTransforms({
  814. translateX: 0
  815. }));
  816. },
  817. initImage: function initImage(done) {
  818. var _this2 = this;
  819. var options = this.options,
  820. image = this.image,
  821. viewerData = this.viewerData;
  822. var footerHeight = this.footer.offsetHeight;
  823. var viewerWidth = viewerData.width;
  824. var viewerHeight = Math.max(viewerData.height - footerHeight, footerHeight);
  825. var oldImageData = this.imageData || {};
  826. var sizingImage = void 0;
  827. this.imageInitializing = {
  828. abort: function abort() {
  829. sizingImage.onload = null;
  830. }
  831. };
  832. sizingImage = getImageNaturalSizes(image, function (naturalWidth, naturalHeight) {
  833. var aspectRatio = naturalWidth / naturalHeight;
  834. var width = viewerWidth;
  835. var height = viewerHeight;
  836. _this2.imageInitializing = false;
  837. if (viewerHeight * aspectRatio > viewerWidth) {
  838. height = viewerWidth / aspectRatio;
  839. } else {
  840. width = viewerHeight * aspectRatio;
  841. }
  842. // width = Math.min(width * 0.9, naturalWidth);
  843. // height = Math.min(height * 0.9, naturalHeight);
  844. width = Math.min(width , naturalWidth);
  845. height = Math.min(height, naturalHeight);
  846. var imageData = {
  847. naturalWidth: naturalWidth,
  848. naturalHeight: naturalHeight,
  849. aspectRatio: aspectRatio,
  850. ratio: width / naturalWidth,
  851. width: width,
  852. height: height,
  853. left: (viewerWidth - width) / 2,
  854. top: (viewerHeight - height) / 2
  855. };
  856. var initialImageData = assign({}, imageData);
  857. if (options.rotatable) {
  858. imageData.rotate = oldImageData.rotate || 0;
  859. initialImageData.rotate = 0;
  860. }
  861. if (options.scalable) {
  862. imageData.scaleX = oldImageData.scaleX || 1;
  863. imageData.scaleY = oldImageData.scaleY || 1;
  864. initialImageData.scaleX = 1;
  865. initialImageData.scaleY = 1;
  866. }
  867. _this2.imageData = imageData;
  868. _this2.initialImageData = initialImageData;
  869. if (done) {
  870. done();
  871. }
  872. });
  873. },
  874. renderImage: function renderImage(done) {
  875. var _this3 = this;
  876. var image = this.image,
  877. imageData = this.imageData;
  878. setStyle(image, assign({
  879. width: imageData.width,
  880. height: imageData.height,
  881. marginLeft: imageData.left,
  882. marginTop: imageData.top
  883. }, getTransforms(imageData)));
  884. if (done) {
  885. if (this.viewing && this.options.transition) {
  886. var onTransitionEnd = function onTransitionEnd() {
  887. _this3.imageRendering = false;
  888. done();
  889. };
  890. this.imageRendering = {
  891. abort: function abort() {
  892. removeListener(image, EVENT_TRANSITION_END, onTransitionEnd);
  893. }
  894. };
  895. addListener(image, EVENT_TRANSITION_END, onTransitionEnd, {
  896. once: true
  897. });
  898. } else {
  899. done();
  900. }
  901. }
  902. },
  903. resetImage: function resetImage() {
  904. // this.image only defined after viewed
  905. if (this.viewing || this.viewed) {
  906. var image = this.image;
  907. if (this.viewing) {
  908. this.viewing.abort();
  909. }
  910. image.parentNode.removeChild(image);
  911. this.image = null;
  912. }
  913. }
  914. };
  915. var events = {
  916. bind: function bind() {
  917. var element = this.element,
  918. viewer = this.viewer;
  919. addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
  920. addListener(viewer, EVENT_WHEEL, this.onWheel = this.wheel.bind(this));
  921. addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
  922. addListener(this.canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
  923. addListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
  924. addListener(element.ownerDocument, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
  925. addListener(element.ownerDocument, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
  926. addListener(window, EVENT_RESIZE, this.onResize = this.resize.bind(this));
  927. },
  928. unbind: function unbind() {
  929. var element = this.element,
  930. viewer = this.viewer;
  931. removeListener(viewer, EVENT_CLICK, this.onClick);
  932. removeListener(viewer, EVENT_WHEEL, this.onWheel);
  933. removeListener(viewer, EVENT_DRAG_START, this.onDragStart);
  934. removeListener(this.canvas, EVENT_POINTER_DOWN, this.onPointerDown);
  935. removeListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onPointerMove);
  936. removeListener(element.ownerDocument, EVENT_POINTER_UP, this.onPointerUp);
  937. removeListener(element.ownerDocument, EVENT_KEY_DOWN, this.onKeyDown);
  938. removeListener(window, EVENT_RESIZE, this.onResize);
  939. }
  940. };
  941. var handlers = {
  942. click: function click(_ref) {
  943. var target = _ref.target;
  944. var options = this.options,
  945. imageData = this.imageData;
  946. var action = getData(target, 'action');
  947. switch (action) {
  948. case 'mix':
  949. if (this.played) {
  950. this.stop();
  951. } else if (options.inline) {
  952. if (this.fulled) {
  953. this.exit();
  954. } else {
  955. this.full();
  956. }
  957. } else {
  958. this.hide();
  959. }
  960. break;
  961. case 'hide':
  962. this.hide();
  963. break;
  964. case 'view':
  965. this.view(getData(target, 'index'));
  966. break;
  967. case 'zoom-ins':
  968. this.zoom(0.1, true);
  969. break;
  970. case 'zoom-outs':
  971. this.zoom(-0.1, true);
  972. break;
  973. case 'reset':
  974. this.reset();
  975. break;
  976. case 'prevs':
  977. this.prev(options.loop);
  978. break;
  979. case 'plays':
  980. this.play(options.fullscreen);
  981. break;
  982. case 'nexts':
  983. this.next(options.loop);
  984. break;
  985. case 'one-to-ones':
  986. this.normal();
  987. break;
  988. //放大
  989. case 'enlarge':
  990. this.toggle();
  991. break;
  992. //case 'rotate-left':
  993. // this.rotate(-90);
  994. // break;
  995. //
  996. //case 'rotate-right':
  997. // this.rotate(90);
  998. // break;
  999. //
  1000. //case 'flip-horizontal':
  1001. // this.scaleX(-imageData.scaleX || -1);
  1002. // break;
  1003. //
  1004. //case 'flip-vertical':
  1005. // this.scaleY(-imageData.scaleY || -1);
  1006. // break;
  1007. default:
  1008. if (this.played) {
  1009. this.stop();
  1010. return;
  1011. }
  1012. this.hide();
  1013. }
  1014. },
  1015. load: function load() {
  1016. var _this = this;
  1017. if (this.timeout) {
  1018. clearTimeout(this.timeout);
  1019. this.timeout = false;
  1020. }
  1021. var element = this.element,
  1022. options = this.options,
  1023. image = this.image,
  1024. index = this.index,
  1025. viewerData = this.viewerData;
  1026. removeClass(image, CLASS_INVISIBLE);
  1027. if (options.loading) {
  1028. removeClass(this.canvas, CLASS_LOADING);
  1029. }
  1030. image.style.cssText = 'height:0;' + ('margin-left:' + viewerData.width / 2 + 'px;') + ('margin-top:' + viewerData.height / 2 + 'px;') + 'max-width:none!important;' + 'position:absolute;' + 'width:0;';
  1031. this.initImage(function () {
  1032. toggleClass(image, CLASS_MOVE, options.movable);
  1033. toggleClass(image, CLASS_TRANSITION, options.transition);
  1034. _this.renderImage(function () {
  1035. _this.viewed = true;
  1036. _this.viewing = false;
  1037. if (isFunction(options.viewed)) {
  1038. addListener(element, EVENT_VIEWED, options.viewed, {
  1039. once: true
  1040. });
  1041. }
  1042. dispatchEvent(element, EVENT_VIEWED, {
  1043. originalImage: _this.images[index],
  1044. index: index,
  1045. image: image
  1046. });
  1047. });
  1048. });
  1049. },
  1050. loadImage: function loadImage(e) {
  1051. var image = e.target;
  1052. var parent = image.parentNode;
  1053. var parentWidth = parent.offsetWidth || 30;
  1054. var parentHeight = parent.offsetHeight || 50;
  1055. var filled = !!getData(image, 'filled');
  1056. getImageNaturalSizes(image, function (naturalWidth, naturalHeight) {
  1057. var aspectRatio = naturalWidth / naturalHeight;
  1058. var width = parentWidth;
  1059. var height = parentHeight;
  1060. if (parentHeight * aspectRatio > parentWidth) {
  1061. if (filled) {
  1062. width = parentHeight * aspectRatio;
  1063. } else {
  1064. height = parentWidth / aspectRatio;
  1065. }
  1066. } else if (filled) {
  1067. height = parentWidth / aspectRatio;
  1068. } else {
  1069. width = parentHeight * aspectRatio;
  1070. }
  1071. setStyle(image, assign({
  1072. width: width,
  1073. height: height
  1074. }, getTransforms({
  1075. translateX: (parentWidth - width) / 2,
  1076. translateY: (parentHeight - height) / 2
  1077. })));
  1078. });
  1079. },
  1080. keydown: function keydown(e) {
  1081. var options = this.options;
  1082. if (!this.fulled || !options.keyboard) {
  1083. return;
  1084. }
  1085. switch (e.keyCode || e.which || e.charCode) {
  1086. // Escape
  1087. case 27:
  1088. if (this.played) {
  1089. this.stop();
  1090. } else if (options.inline) {
  1091. if (this.fulled) {
  1092. this.exit();
  1093. }
  1094. } else {
  1095. this.hide();
  1096. }
  1097. break;
  1098. // Space
  1099. case 32:
  1100. if (this.played) {
  1101. this.stop();
  1102. }
  1103. break;
  1104. // ArrowLeft
  1105. case 37:
  1106. this.prev(options.loop);
  1107. break;
  1108. // ArrowUp
  1109. case 38:
  1110. // Prevent scroll on Firefox
  1111. e.preventDefault();
  1112. // Zoom in
  1113. this.zoom(options.zoomRatio, true);
  1114. break;
  1115. // ArrowRight
  1116. case 39:
  1117. this.next(options.loop);
  1118. break;
  1119. // ArrowDown
  1120. case 40:
  1121. // Prevent scroll on Firefox
  1122. e.preventDefault();
  1123. // Zoom out
  1124. this.zoom(-options.zoomRatio, true);
  1125. break;
  1126. // Ctrl + 0
  1127. case 48:
  1128. // Fall through
  1129. // Ctrl + 1
  1130. // eslint-disable-next-line no-fallthrough
  1131. case 49:
  1132. if (e.ctrlKey) {
  1133. e.preventDefault();
  1134. this.toggle();
  1135. }
  1136. break;
  1137. default:
  1138. }
  1139. },
  1140. dragstart: function dragstart(e) {
  1141. if (e.target.tagName.toLowerCase() === 'img') {
  1142. e.preventDefault();
  1143. }
  1144. },
  1145. pointerdown: function pointerdown(e) {
  1146. var options = this.options,
  1147. pointers = this.pointers;
  1148. if (!this.viewed || this.showing || this.viewing || this.hiding) {
  1149. return;
  1150. }
  1151. if (e.changedTouches) {
  1152. forEach(e.changedTouches, function (touch) {
  1153. pointers[touch.identifier] = getPointer(touch);
  1154. });
  1155. } else {
  1156. pointers[e.pointerId || 0] = getPointer(e);
  1157. }
  1158. var action = options.movable ? ACTION_MOVE : false;
  1159. if (Object.keys(pointers).length > 1) {
  1160. action = ACTION_ZOOM;
  1161. } else if ((e.pointerType === 'touch' || e.type === 'touchstart') && this.isSwitchable()) {
  1162. action = ACTION_SWITCH;
  1163. }
  1164. this.action = action;
  1165. },
  1166. pointermove: function pointermove(e) {
  1167. var options = this.options,
  1168. pointers = this.pointers,
  1169. action = this.action,
  1170. image = this.image;
  1171. if (!this.viewed || !action) {
  1172. return;
  1173. }
  1174. e.preventDefault();
  1175. if (e.changedTouches) {
  1176. forEach(e.changedTouches, function (touch) {
  1177. assign(pointers[touch.identifier], getPointer(touch, true));
  1178. });
  1179. } else {
  1180. var pointerTmep=pointers[e.pointerId || 0];
  1181. if (pointerTmep==null||pointerTmep==undefined)
  1182. {
  1183. return;
  1184. }
  1185. assign(pointerTmep, getPointer(e, true));
  1186. }
  1187. if (action === ACTION_MOVE && options.transition && hasClass(image, CLASS_TRANSITION)) {
  1188. removeClass(image, CLASS_TRANSITION);
  1189. }
  1190. this.change(e);
  1191. },
  1192. pointerup: function pointerup(e) {
  1193. var action = this.action,
  1194. pointers = this.pointers;
  1195. if (e.changedTouches) {
  1196. forEach(e.changedTouches, function (touch) {
  1197. delete pointers[touch.identifier];
  1198. });
  1199. } else {
  1200. delete pointers[e.pointerId || 0];
  1201. }
  1202. if (!action) {
  1203. return;
  1204. }
  1205. if (action === ACTION_MOVE && this.options.transition) {
  1206. addClass(this.image, CLASS_TRANSITION);
  1207. }
  1208. this.action = false;
  1209. },
  1210. resize: function resize() {
  1211. var _this2 = this;
  1212. if (!this.isShown || this.hiding) {
  1213. return;
  1214. }
  1215. this.initContainer();
  1216. this.initViewer();
  1217. this.renderViewer();
  1218. this.renderList();
  1219. if (this.viewed) {
  1220. this.initImage(function () {
  1221. _this2.renderImage();
  1222. });
  1223. }
  1224. if (this.played) {
  1225. if (this.options.fullscreen && this.fulled && !document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
  1226. this.stop();
  1227. return;
  1228. }
  1229. forEach(this.player.getElementsByTagName('img'), function (image) {
  1230. addListener(image, EVENT_LOAD, _this2.loadImage.bind(_this2), {
  1231. once: true
  1232. });
  1233. dispatchEvent(image, EVENT_LOAD);
  1234. });
  1235. }
  1236. },
  1237. wheel: function wheel(e) {
  1238. var _this3 = this;
  1239. if (!this.viewed) {
  1240. return;
  1241. }
  1242. e.preventDefault();
  1243. // Limit wheel speed to prevent zoom too fast
  1244. if (this.wheeling) {
  1245. return;
  1246. }
  1247. this.wheeling = true;
  1248. setTimeout(function () {
  1249. _this3.wheeling = false;
  1250. }, 50);
  1251. var ratio = Number(this.options.zoomRatio) || 0.1;
  1252. var delta = 1;
  1253. if (e.deltaY) {
  1254. delta = e.deltaY > 0 ? 1 : -1;
  1255. } else if (e.wheelDelta) {
  1256. delta = -e.wheelDelta / 120;
  1257. } else if (e.detail) {
  1258. delta = e.detail > 0 ? 1 : -1;
  1259. }
  1260. this.zoom(-delta * ratio, true, e);
  1261. }
  1262. };
  1263. var methods = {
  1264. /** Show the viewer (only available in modal mode)
  1265. * @param {boolean} [immediate=false] - Indicates if show the viewer immediately or not.
  1266. * @returns {Viewer} this
  1267. */
  1268. show: function show() {
  1269. var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  1270. var element = this.element,
  1271. options = this.options;
  1272. if (options.inline || this.showing || this.isShown || this.showing) {
  1273. return this;
  1274. }
  1275. if (!this.ready) {
  1276. this.build();
  1277. if (this.ready) {
  1278. this.show(immediate);
  1279. }
  1280. return this;
  1281. }
  1282. if (isFunction(options.show)) {
  1283. addListener(element, EVENT_SHOW, options.show, {
  1284. once: true
  1285. });
  1286. }
  1287. if (dispatchEvent(element, EVENT_SHOW) === false || !this.ready) {
  1288. return this;
  1289. }
  1290. if (this.hiding) {
  1291. this.transitioning.abort();
  1292. }
  1293. this.showing = true;
  1294. this.open();
  1295. var viewer = this.viewer;
  1296. removeClass(viewer, CLASS_HIDE);
  1297. if (options.transition && !immediate) {
  1298. var shown = this.shown.bind(this);
  1299. this.transitioning = {
  1300. abort: function abort() {
  1301. removeListener(viewer, EVENT_TRANSITION_END, shown);
  1302. removeClass(viewer, CLASS_IN);
  1303. }
  1304. };
  1305. addClass(viewer, CLASS_TRANSITION);
  1306. // Force reflow to enable CSS3 transition
  1307. // eslint-disable-next-line
  1308. viewer.offsetWidth;
  1309. addListener(viewer, EVENT_TRANSITION_END, shown, {
  1310. once: true
  1311. });
  1312. addClass(viewer, CLASS_IN);
  1313. } else {
  1314. addClass(viewer, CLASS_IN);
  1315. this.shown();
  1316. }
  1317. return this;
  1318. },
  1319. /**
  1320. * Hide the viewer (only available in modal mode)
  1321. * @param {boolean} [immediate=false] - Indicates if hide the viewer immediately or not.
  1322. * @returns {Viewer} this
  1323. */
  1324. hide: function hide() {
  1325. var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  1326. var element = this.element,
  1327. options = this.options;
  1328. if (options.inline || this.hiding || !(this.isShown || this.showing)) {
  1329. return this;
  1330. }
  1331. if (isFunction(options.hide)) {
  1332. addListener(element, EVENT_HIDE, options.hide, {
  1333. once: true
  1334. });
  1335. }
  1336. if (dispatchEvent(element, EVENT_HIDE) === false) {
  1337. return this;
  1338. }
  1339. if (this.showing) {
  1340. this.transitioning.abort();
  1341. }
  1342. this.hiding = true;
  1343. if (this.played) {
  1344. this.stop();
  1345. } else if (this.viewing) {
  1346. this.viewing.abort();
  1347. }
  1348. var viewer = this.viewer;
  1349. if (options.transition && !immediate) {
  1350. var hidden = this.hidden.bind(this);
  1351. var hide = function hide() {
  1352. addListener(viewer, EVENT_TRANSITION_END, hidden, {
  1353. once: true
  1354. });
  1355. removeClass(viewer, CLASS_IN);
  1356. };
  1357. this.transitioning = {
  1358. abort: function abort() {
  1359. if (this.viewed) {
  1360. removeListener(this.image, EVENT_TRANSITION_END, hide);
  1361. } else {
  1362. removeListener(viewer, EVENT_TRANSITION_END, hidden);
  1363. }
  1364. }
  1365. };
  1366. if (this.viewed) {
  1367. addListener(this.image, EVENT_TRANSITION_END, hide, {
  1368. once: true
  1369. });
  1370. this.zoomTo(0, false, false, true);
  1371. } else {
  1372. hide();
  1373. }
  1374. } else {
  1375. removeClass(viewer, CLASS_IN);
  1376. this.hidden();
  1377. }
  1378. return this;
  1379. },
  1380. /**
  1381. * View one of the images with image's index
  1382. * @param {number} index - The index of the image to view.
  1383. * @returns {Viewer} this
  1384. */
  1385. view: function view() {
  1386. var _this = this;
  1387. var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
  1388. var mandatory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  1389. index = Number(index) || 0;
  1390. if (!this.isShown) {
  1391. this.index = index;
  1392. return this.show();
  1393. }
  1394. if (!mandatory)
  1395. {
  1396. if (this.hiding || this.played || index < 0 || index >= this.length || this.viewed && index === this.index) {
  1397. return this;
  1398. }
  1399. }
  1400. if (this.viewing) {
  1401. this.viewing.abort();
  1402. }
  1403. var element = this.element,
  1404. options = this.options,
  1405. title = this.title,
  1406. canvas = this.canvas;
  1407. var item = this.items[index];
  1408. var img = item.querySelector('img');
  1409. var url = getData(img, 'originalUrl');
  1410. var alt = img.getAttribute('alt');
  1411. var image = document.createElement('img');
  1412. image.src = url;
  1413. image.alt = alt;
  1414. if (isFunction(options.view)) {
  1415. addListener(element, EVENT_VIEW, options.view, {
  1416. once: true
  1417. });
  1418. }
  1419. if (dispatchEvent(element, EVENT_VIEW, {
  1420. originalImage: this.images[index],
  1421. index: index,
  1422. image: image
  1423. }) === false || !this.isShown || this.hiding || this.played) {
  1424. return this;
  1425. }
  1426. this.image = image;
  1427. removeClass(this.items[this.index], CLASS_ACTIVE);
  1428. addClass(item, CLASS_ACTIVE);
  1429. this.viewed = false;
  1430. this.index = index;
  1431. this.imageData = {};
  1432. addClass(image, CLASS_INVISIBLE);
  1433. if (options.loading) {
  1434. addClass(canvas, CLASS_LOADING);
  1435. }
  1436. canvas.innerHTML = '';
  1437. canvas.appendChild(image);
  1438. // Center current item
  1439. this.renderList();
  1440. // Clear title
  1441. // title.innerHTML = '';
  1442. title.textContent = (_this.index+1)+'/'+_this.images.length;
  1443. // Generate title after viewed
  1444. var onViewed = function onViewed() {
  1445. // var imageData = _this.imageData;
  1446. // title.textContent = alt + ' (' + imageData.naturalWidth + ' \xD7 ' + imageData.naturalHeight + ')';
  1447. };
  1448. if (this.dealOriginal.indexOf(url)>-1)
  1449. {
  1450. this.toolbar.querySelector(".viewer-one-to-ones").style.display='none';
  1451. }else {
  1452. this.toolbar.querySelector(".viewer-one-to-ones").style.display='block';
  1453. }
  1454. var onLoad = void 0;
  1455. addListener(element, EVENT_VIEWED, onViewed, {
  1456. once: true
  1457. });
  1458. this.viewing = {
  1459. abort: function abort() {
  1460. removeListener(element, EVENT_VIEWED, onViewed);
  1461. if (image.complete) {
  1462. if (this.imageRendering) {
  1463. this.imageRendering.abort();
  1464. } else if (this.imageInitializing) {
  1465. this.imageInitializing.abort();
  1466. }
  1467. } else {
  1468. removeListener(image, EVENT_LOAD, onLoad);
  1469. if (this.timeout) {
  1470. clearTimeout(this.timeout);
  1471. }
  1472. }
  1473. }
  1474. };
  1475. if (image.complete) {
  1476. this.load();
  1477. } else {
  1478. addListener(image, EVENT_LOAD, onLoad = this.load.bind(this), {
  1479. once: true
  1480. });
  1481. if (this.timeout) {
  1482. clearTimeout(this.timeout);
  1483. }
  1484. // Make the image visible if it fails to load within 1s
  1485. this.timeout = setTimeout(function () {
  1486. removeClass(image, CLASS_INVISIBLE);
  1487. _this.timeout = false;
  1488. }, 1000);
  1489. }
  1490. return this;
  1491. },
  1492. /**
  1493. * View the previous image
  1494. * @param {boolean} [loop=false] - Indicate if view the last one
  1495. * when it is the first one at present.
  1496. * @returns {Viewer} this
  1497. */
  1498. prev: function prev() {
  1499. var loop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  1500. var index = this.index - 1;
  1501. if (index < 0) {
  1502. index = loop ? this.length - 1 : 0;
  1503. }
  1504. this.view(index);
  1505. return this;
  1506. },
  1507. /**
  1508. * View the next image
  1509. * @param {boolean} [loop=false] - Indicate if view the first one
  1510. * when it is the last one at present.
  1511. * @returns {Viewer} this
  1512. */
  1513. next: function next() {
  1514. var loop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  1515. var maxIndex = this.length - 1;
  1516. var index = this.index + 1;
  1517. if (index > maxIndex) {
  1518. index = loop ? 0 : maxIndex;
  1519. }
  1520. this.view(index);
  1521. return this;
  1522. },
  1523. normal: function normal() {
  1524. var index = this.index;
  1525. var item = this.items[index];
  1526. var img = item.querySelector('img');
  1527. var dealUrl = getData(img, 'originalUrl');
  1528. if (this.dealOriginal.indexOf(dealUrl)>-1)
  1529. {
  1530. return this;
  1531. }
  1532. this.dealOriginal.push(dealUrl);
  1533. setData(img,'originalUrl',dealUrl);
  1534. this.view(index,true);
  1535. return this;
  1536. },
  1537. /**
  1538. * Move the image with relative offsets.
  1539. * @param {number} offsetX - The relative offset distance on the x-axis.
  1540. * @param {number} offsetY - The relative offset distance on the y-axis.
  1541. * @returns {Viewer} this
  1542. */
  1543. move: function move(offsetX, offsetY) {
  1544. var imageData = this.imageData;
  1545. this.moveTo(isUndefined(offsetX) ? offsetX : imageData.left + Number(offsetX), isUndefined(offsetY) ? offsetY : imageData.top + Number(offsetY));
  1546. return this;
  1547. },
  1548. /**
  1549. * Move the image to an absolute point.
  1550. * @param {number} x - The x-axis coordinate.
  1551. * @param {number} [y=x] - The y-axis coordinate.
  1552. * @returns {Viewer} this
  1553. */
  1554. moveTo: function moveTo(x) {
  1555. var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
  1556. var imageData = this.imageData;
  1557. x = Number(x);
  1558. y = Number(y);
  1559. if (this.viewed && !this.played && this.options.movable) {
  1560. var changed = false;
  1561. if (isNumber(x)) {
  1562. imageData.left = x;
  1563. changed = true;
  1564. }
  1565. if (isNumber(y)) {
  1566. imageData.top = y;
  1567. changed = true;
  1568. }
  1569. if (changed) {
  1570. this.renderImage();
  1571. }
  1572. }
  1573. return this;
  1574. },
  1575. /**
  1576. * Zoom the image with a relative ratio.
  1577. * @param {number} ratio - The target ratio.
  1578. * @param {boolean} [hasTooltip=false] - Indicates if it has a tooltip or not.
  1579. * @param {Event} [_originalEvent=null] - The original event if any.
  1580. * @returns {Viewer} this
  1581. */
  1582. zoom: function zoom(ratio) {
  1583. var hasTooltip = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  1584. var _originalEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
  1585. var imageData = this.imageData;
  1586. ratio = Number(ratio);
  1587. if (ratio < 0) {
  1588. ratio = 1 / (1 - ratio);
  1589. } else {
  1590. ratio = 1 + ratio;
  1591. }
  1592. this.zoomTo(imageData.width * ratio / imageData.naturalWidth, hasTooltip, _originalEvent);
  1593. return this;
  1594. },
  1595. /**
  1596. * Zoom the image to an absolute ratio.
  1597. * @param {number} ratio - The target ratio.
  1598. * @param {boolean} [hasTooltip=false] - Indicates if it has a tooltip or not.
  1599. * @param {Event} [_originalEvent=null] - The original event if any.
  1600. * @param {Event} [_zoomable=false] - Indicates if the current zoom is available or not.
  1601. * @returns {Viewer} this
  1602. */
  1603. zoomTo: function zoomTo(ratio) {
  1604. var hasTooltip = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  1605. var _originalEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
  1606. var _zoomable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  1607. var options = this.options,
  1608. pointers = this.pointers,
  1609. imageData = this.imageData;
  1610. ratio = Math.max(0, ratio);
  1611. if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
  1612. if (!_zoomable) {
  1613. var minZoomRatio = Math.max(0.01, options.minZoomRatio);
  1614. var maxZoomRatio = Math.min(100, options.maxZoomRatio);
  1615. ratio = Math.min(Math.max(ratio, minZoomRatio), maxZoomRatio);
  1616. }
  1617. if (_originalEvent && ratio > 0.95 && ratio < 1.05) {
  1618. ratio = 1;
  1619. }
  1620. var newWidth = imageData.naturalWidth * ratio;
  1621. var newHeight = imageData.naturalHeight * ratio;
  1622. if (_originalEvent) {
  1623. var offset = getOffset(this.viewer);
  1624. var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : {
  1625. pageX: _originalEvent.pageX,
  1626. pageY: _originalEvent.pageY
  1627. };
  1628. // Zoom from the triggering point of the event
  1629. imageData.left -= (newWidth - imageData.width) * ((center.pageX - offset.left - imageData.left) / imageData.width);
  1630. imageData.top -= (newHeight - imageData.height) * ((center.pageY - offset.top - imageData.top) / imageData.height);
  1631. } else {
  1632. // Zoom from the center of the image
  1633. imageData.left -= (newWidth - imageData.width) / 2;
  1634. imageData.top -= (newHeight - imageData.height) / 2;
  1635. }
  1636. imageData.width = newWidth;
  1637. imageData.height = newHeight;
  1638. imageData.ratio = ratio;
  1639. this.renderImage();
  1640. if (hasTooltip) {
  1641. this.tooltip();
  1642. }
  1643. }
  1644. return this;
  1645. },
  1646. /**
  1647. * Rotate the image with a relative degree.
  1648. * @param {number} degree - The rotate degree.
  1649. * @returns {Viewer} this
  1650. */
  1651. rotate: function rotate(degree) {
  1652. this.rotateTo((this.imageData.rotate || 0) + Number(degree));
  1653. return this;
  1654. },
  1655. /**
  1656. * Rotate the image to an absolute degree.
  1657. * @param {number} degree - The rotate degree.
  1658. * @returns {Viewer} this
  1659. */
  1660. rotateTo: function rotateTo(degree) {
  1661. var imageData = this.imageData;
  1662. degree = Number(degree);
  1663. if (isNumber(degree) && this.viewed && !this.played && this.options.rotatable) {
  1664. imageData.rotate = degree;
  1665. this.renderImage();
  1666. }
  1667. return this;
  1668. },
  1669. /**
  1670. * Scale the image on the x-axis.
  1671. * @param {number} scaleX - The scale ratio on the x-axis.
  1672. * @returns {Viewer} this
  1673. */
  1674. scaleX: function scaleX(_scaleX) {
  1675. this.scale(_scaleX, this.imageData.scaleY);
  1676. return this;
  1677. },
  1678. /**
  1679. * Scale the image on the y-axis.
  1680. * @param {number} scaleY - The scale ratio on the y-axis.
  1681. * @returns {Viewer} this
  1682. */
  1683. scaleY: function scaleY(_scaleY) {
  1684. this.scale(this.imageData.scaleX, _scaleY);
  1685. return this;
  1686. },
  1687. /**
  1688. * Scale the image.
  1689. * @param {number} scaleX - The scale ratio on the x-axis.
  1690. * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.
  1691. * @returns {Viewer} this
  1692. */
  1693. scale: function scale(scaleX) {
  1694. var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX;
  1695. var imageData = this.imageData;
  1696. scaleX = Number(scaleX);
  1697. scaleY = Number(scaleY);
  1698. if (this.viewed && !this.played && this.options.scalable) {
  1699. var changed = false;
  1700. if (isNumber(scaleX)) {
  1701. imageData.scaleX = scaleX;
  1702. changed = true;
  1703. }
  1704. if (isNumber(scaleY)) {
  1705. imageData.scaleY = scaleY;
  1706. changed = true;
  1707. }
  1708. if (changed) {
  1709. this.renderImage();
  1710. }
  1711. }
  1712. return this;
  1713. },
  1714. /**
  1715. * Play the images
  1716. * @param {boolean} [fullscreen=false] - Indicate if request fullscreen or not.
  1717. * @returns {Viewer} this
  1718. */
  1719. play: function play() {
  1720. var _this2 = this;
  1721. var fullscreen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  1722. if (!this.isShown || this.played) {
  1723. return this;
  1724. }
  1725. var options = this.options,
  1726. player = this.player;
  1727. var onLoad = this.loadImage.bind(this);
  1728. var list = [];
  1729. var total = 0;
  1730. var index = 0;
  1731. this.played = true;
  1732. this.onLoadWhenPlay = onLoad;
  1733. if (fullscreen) {
  1734. this.requestFullscreen();
  1735. }
  1736. addClass(player, CLASS_SHOW);
  1737. forEach(this.items, function (item, i) {
  1738. var img = item.querySelector('img');
  1739. var image = document.createElement('img');
  1740. image.src = getData(img, 'originalUrl');
  1741. image.alt = img.getAttribute('alt');
  1742. total += 1;
  1743. addClass(image, CLASS_FADE);
  1744. toggleClass(image, CLASS_TRANSITION, options.transition);
  1745. if (hasClass(item, CLASS_ACTIVE)) {
  1746. addClass(image, CLASS_IN);
  1747. index = i;
  1748. }
  1749. list.push(image);
  1750. addListener(image, EVENT_LOAD, onLoad, {
  1751. once: true
  1752. });
  1753. player.appendChild(image);
  1754. });
  1755. if (isNumber(options.interval) && options.interval > 0) {
  1756. var play = function play() {
  1757. _this2.playing = setTimeout(function () {
  1758. removeClass(list[index], CLASS_IN);
  1759. index += 1;
  1760. index = index < total ? index : 0;
  1761. addClass(list[index], CLASS_IN);
  1762. play();
  1763. }, options.interval);
  1764. };
  1765. if (total > 1) {
  1766. play();
  1767. }
  1768. }
  1769. return this;
  1770. },
  1771. // Stop play
  1772. stop: function stop() {
  1773. var _this3 = this;
  1774. if (!this.played) {
  1775. return this;
  1776. }
  1777. var player = this.player;
  1778. this.played = false;
  1779. clearTimeout(this.playing);
  1780. forEach(player.getElementsByTagName('img'), function (image) {
  1781. removeListener(image, EVENT_LOAD, _this3.onLoadWhenPlay);
  1782. });
  1783. removeClass(player, CLASS_SHOW);
  1784. player.innerHTML = '';
  1785. this.exitFullscreen();
  1786. return this;
  1787. },
  1788. // Enter modal mode (only available in inline mode)
  1789. full: function full() {
  1790. var _this4 = this;
  1791. var options = this.options,
  1792. viewer = this.viewer,
  1793. image = this.image,
  1794. list = this.list;
  1795. if (!this.isShown || this.played || this.fulled || !options.inline) {
  1796. return this;
  1797. }
  1798. this.fulled = true;
  1799. this.open();
  1800. addClass(this.button, CLASS_FULLSCREEN_EXIT);
  1801. if (options.transition) {
  1802. removeClass(list, CLASS_TRANSITION);
  1803. if (this.viewed) {
  1804. removeClass(image, CLASS_TRANSITION);
  1805. }
  1806. }
  1807. addClass(viewer, CLASS_FIXED);
  1808. viewer.setAttribute('style', '');
  1809. setStyle(viewer, {
  1810. zIndex: options.zIndex
  1811. });
  1812. this.initContainer();
  1813. this.viewerData = assign({}, this.containerData);
  1814. this.renderList();
  1815. if (this.viewed) {
  1816. this.initImage(function () {
  1817. _this4.renderImage(function () {
  1818. if (options.transition) {
  1819. setTimeout(function () {
  1820. addClass(image, CLASS_TRANSITION);
  1821. addClass(list, CLASS_TRANSITION);
  1822. }, 0);
  1823. }
  1824. });
  1825. });
  1826. }
  1827. return this;
  1828. },
  1829. // Exit modal mode (only available in inline mode)
  1830. exit: function exit() {
  1831. var _this5 = this;
  1832. var options = this.options,
  1833. viewer = this.viewer,
  1834. image = this.image,
  1835. list = this.list;
  1836. if (!this.isShown || this.played || !this.fulled || !options.inline) {
  1837. return this;
  1838. }
  1839. this.fulled = false;
  1840. this.close();
  1841. removeClass(this.button, CLASS_FULLSCREEN_EXIT);
  1842. if (options.transition) {
  1843. removeClass(list, CLASS_TRANSITION);
  1844. if (this.viewed) {
  1845. removeClass(image, CLASS_TRANSITION);
  1846. }
  1847. }
  1848. removeClass(viewer, CLASS_FIXED);
  1849. setStyle(viewer, {
  1850. zIndex: options.zIndexInline
  1851. });
  1852. this.viewerData = assign({}, this.parentData);
  1853. this.renderViewer();
  1854. this.renderList();
  1855. if (this.viewed) {
  1856. this.initImage(function () {
  1857. _this5.renderImage(function () {
  1858. if (options.transition) {
  1859. setTimeout(function () {
  1860. addClass(image, CLASS_TRANSITION);
  1861. addClass(list, CLASS_TRANSITION);
  1862. }, 0);
  1863. }
  1864. });
  1865. });
  1866. }
  1867. return this;
  1868. },
  1869. // Show the current ratio of the image with percentage
  1870. tooltip: function tooltip() {
  1871. var _this6 = this;
  1872. var options = this.options,
  1873. tooltipBox = this.tooltipBox,
  1874. imageData = this.imageData;
  1875. if (!this.viewed || this.played || !options.tooltip) {
  1876. return this;
  1877. }
  1878. tooltipBox.textContent = Math.round(imageData.ratio * 100) + '%';
  1879. if (!this.tooltipping) {
  1880. if (options.transition) {
  1881. if (this.fading) {
  1882. dispatchEvent(tooltipBox, EVENT_TRANSITION_END);
  1883. }
  1884. addClass(tooltipBox, CLASS_SHOW);
  1885. addClass(tooltipBox, CLASS_FADE);
  1886. addClass(tooltipBox, CLASS_TRANSITION);
  1887. // Force reflow to enable CSS3 transition
  1888. // eslint-disable-next-line
  1889. tooltipBox.offsetWidth;
  1890. addClass(tooltipBox, CLASS_IN);
  1891. } else {
  1892. addClass(tooltipBox, CLASS_SHOW);
  1893. }
  1894. } else {
  1895. clearTimeout(this.tooltipping);
  1896. }
  1897. this.tooltipping = setTimeout(function () {
  1898. if (options.transition) {
  1899. addListener(tooltipBox, EVENT_TRANSITION_END, function () {
  1900. removeClass(tooltipBox, CLASS_SHOW);
  1901. removeClass(tooltipBox, CLASS_FADE);
  1902. removeClass(tooltipBox, CLASS_TRANSITION);
  1903. _this6.fading = false;
  1904. }, {
  1905. once: true
  1906. });
  1907. removeClass(tooltipBox, CLASS_IN);
  1908. _this6.fading = true;
  1909. } else {
  1910. removeClass(tooltipBox, CLASS_SHOW);
  1911. }
  1912. _this6.tooltipping = false;
  1913. }, 1000);
  1914. return this;
  1915. },
  1916. // Toggle the image size between its natural size and initial size
  1917. toggle: function toggle() {
  1918. if (this.imageData.ratio === 1) {
  1919. this.zoomTo(this.initialImageData.ratio, true);
  1920. } else {
  1921. this.zoomTo(1, true);
  1922. }
  1923. return this;
  1924. },
  1925. // Reset the image to its initial state
  1926. reset: function reset() {
  1927. if (this.viewed && !this.played) {
  1928. this.imageData = assign({}, this.initialImageData);
  1929. this.renderImage();
  1930. }
  1931. return this;
  1932. },
  1933. // Update viewer when images changed
  1934. update: function update() {
  1935. var element = this.element,
  1936. options = this.options,
  1937. isImg = this.isImg;
  1938. // Destroy viewer if the target image was deleted
  1939. if (isImg && !element.parentNode) {
  1940. return this.destroy();
  1941. }
  1942. var images = [];
  1943. forEach(isImg ? [element] : element.querySelectorAll('img'), function (image) {
  1944. if (options.filter) {
  1945. if (options.filter(image)) {
  1946. images.push(image);
  1947. }
  1948. } else {
  1949. images.push(image);
  1950. }
  1951. });
  1952. if (!images.length) {
  1953. return this;
  1954. }
  1955. this.images = images;
  1956. this.length = images.length;
  1957. if (this.ready) {
  1958. var indexes = [];
  1959. forEach(this.items, function (item, i) {
  1960. var img = item.querySelector('img');
  1961. var image = images[i];
  1962. if (image) {
  1963. if (image.src !== img.src) {
  1964. indexes.push(i);
  1965. }
  1966. } else {
  1967. indexes.push(i);
  1968. }
  1969. });
  1970. setStyle(this.list, {
  1971. width: 'auto'
  1972. });
  1973. this.initList();
  1974. if (this.isShown) {
  1975. if (this.length) {
  1976. if (this.viewed) {
  1977. var index = indexes.indexOf(this.index);
  1978. if (index >= 0) {
  1979. this.viewed = false;
  1980. this.view(Math.max(this.index - (index + 1), 0));
  1981. } else {
  1982. addClass(this.items[this.index], CLASS_ACTIVE);
  1983. }
  1984. }
  1985. } else {
  1986. this.image = null;
  1987. this.viewed = false;
  1988. this.index = 0;
  1989. this.imageData = null;
  1990. this.canvas.innerHTML = '';
  1991. this.title.innerHTML = '';
  1992. }
  1993. }
  1994. } else {
  1995. this.build();
  1996. }
  1997. return this;
  1998. },
  1999. // Destroy the viewer
  2000. destroy: function destroy() {
  2001. var element = this.element,
  2002. options = this.options;
  2003. if (!getData(element, NAMESPACE)) {
  2004. return this;
  2005. }
  2006. this.destroyed = true;
  2007. if (this.ready) {
  2008. if (this.played) {
  2009. this.stop();
  2010. }
  2011. if (options.inline) {
  2012. if (this.fulled) {
  2013. this.exit();
  2014. }
  2015. this.unbind();
  2016. } else if (this.isShown) {
  2017. if (this.viewing) {
  2018. if (this.imageRendering) {
  2019. this.imageRendering.abort();
  2020. } else if (this.imageInitializing) {
  2021. this.imageInitializing.abort();
  2022. }
  2023. }
  2024. if (this.hiding) {
  2025. this.transitioning.abort();
  2026. }
  2027. this.hidden();
  2028. } else if (this.showing) {
  2029. this.transitioning.abort();
  2030. this.hidden();
  2031. }
  2032. this.ready = false;
  2033. this.viewer.parentNode.removeChild(this.viewer);
  2034. } else if (options.inline) {
  2035. if (this.delaying) {
  2036. this.delaying.abort();
  2037. } else if (this.initializing) {
  2038. this.initializing.abort();
  2039. }
  2040. }
  2041. if (!options.inline) {
  2042. removeListener(element, EVENT_CLICK, this.onStart);
  2043. }
  2044. removeData(element, NAMESPACE);
  2045. return this;
  2046. }
  2047. };
  2048. var others = {
  2049. open: function open() {
  2050. var body = this.body;
  2051. addClass(body, CLASS_OPEN);
  2052. body.style.paddingRight = this.scrollbarWidth + (parseFloat(this.initialBodyPaddingRight) || 0) + 'px';
  2053. },
  2054. close: function close() {
  2055. var body = this.body;
  2056. removeClass(body, CLASS_OPEN);
  2057. body.style.paddingRight = this.initialBodyPaddingRight;
  2058. },
  2059. shown: function shown() {
  2060. var element = this.element,
  2061. options = this.options;
  2062. this.fulled = true;
  2063. this.isShown = true;
  2064. this.render();
  2065. this.bind();
  2066. this.showing = false;
  2067. if (isFunction(options.shown)) {
  2068. addListener(element, EVENT_SHOWN, options.shown, {
  2069. once: true
  2070. });
  2071. }
  2072. if (dispatchEvent(element, EVENT_SHOWN) === false) {
  2073. return;
  2074. }
  2075. if (this.ready && this.isShown && !this.hiding) {
  2076. this.view(this.index);
  2077. }
  2078. },
  2079. hidden: function hidden() {
  2080. var element = this.element,
  2081. options = this.options;
  2082. this.fulled = false;
  2083. this.viewed = false;
  2084. this.isShown = false;
  2085. this.close();
  2086. this.unbind();
  2087. addClass(this.viewer, CLASS_HIDE);
  2088. this.resetList();
  2089. this.resetImage();
  2090. this.hiding = false;
  2091. if (!this.destroyed) {
  2092. if (isFunction(options.hidden)) {
  2093. addListener(element, EVENT_HIDDEN, options.hidden, {
  2094. once: true
  2095. });
  2096. }
  2097. dispatchEvent(element, EVENT_HIDDEN);
  2098. }
  2099. },
  2100. requestFullscreen: function requestFullscreen() {
  2101. var document = this.element.ownerDocument;
  2102. if (this.fulled && !document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
  2103. var documentElement = document.documentElement;
  2104. if (documentElement.requestFullscreen) {
  2105. documentElement.requestFullscreen();
  2106. } else if (documentElement.msRequestFullscreen) {
  2107. documentElement.msRequestFullscreen();
  2108. } else if (documentElement.mozRequestFullScreen) {
  2109. documentElement.mozRequestFullScreen();
  2110. } else if (documentElement.webkitRequestFullscreen) {
  2111. documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  2112. }
  2113. }
  2114. },
  2115. exitFullscreen: function exitFullscreen() {
  2116. if (this.fulled) {
  2117. var document = this.element.ownerDocument;
  2118. if (document.exitFullscreen) {
  2119. document.exitFullscreen();
  2120. } else if (document.msExitFullscreen) {
  2121. document.msExitFullscreen();
  2122. } else if (document.mozCancelFullScreen) {
  2123. document.mozCancelFullScreen();
  2124. } else if (document.webkitExitFullscreen) {
  2125. document.webkitExitFullscreen();
  2126. }
  2127. }
  2128. },
  2129. change: function change(e) {
  2130. var options = this.options,
  2131. pointers = this.pointers;
  2132. var pointer = pointers[Object.keys(pointers)[0]];
  2133. var offsetX = pointer.endX - pointer.startX;
  2134. var offsetY = pointer.endY - pointer.startY;
  2135. switch (this.action) {
  2136. // Move the current image
  2137. case ACTION_MOVE:
  2138. this.move(offsetX, offsetY);
  2139. break;
  2140. // Zoom the current image
  2141. case ACTION_ZOOM:
  2142. this.zoom(getMaxZoomRatio(pointers), false, e);
  2143. break;
  2144. case ACTION_SWITCH:
  2145. this.action = 'switched';
  2146. // Empty `pointers` as `touchend` event will not be fired after swiped in iOS browsers.
  2147. this.pointers = {};
  2148. if (Math.abs(offsetX) > Math.abs(offsetY)) {
  2149. if (offsetX > 1) {
  2150. this.prev(options.loop);
  2151. } else if (offsetX < -1) {
  2152. this.next(options.loop);
  2153. }
  2154. }
  2155. break;
  2156. default:
  2157. }
  2158. // Override
  2159. forEach(pointers, function (p) {
  2160. p.startX = p.endX;
  2161. p.startY = p.endY;
  2162. });
  2163. },
  2164. isSwitchable: function isSwitchable() {
  2165. var imageData = this.imageData,
  2166. viewerData = this.viewerData;
  2167. return this.length > 1 && imageData.left >= 0 && imageData.top >= 0 && imageData.width <= viewerData.width && imageData.height <= viewerData.height;
  2168. }
  2169. };
  2170. var AnotherViewer = WINDOW.Viewer;
  2171. var Viewer = function () {
  2172. /**
  2173. * Create a new Viewer.
  2174. * @param {Element} element - The target element for viewing.
  2175. * @param {Object} [options={}] - The configuration options.
  2176. */
  2177. function Viewer(element) {
  2178. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  2179. classCallCheck(this, Viewer);
  2180. if (!element || element.nodeType !== 1) {
  2181. throw new Error('The first argument is required and must be an element.');
  2182. }
  2183. this.element = element;
  2184. this.options = assign({}, DEFAULTS, isPlainObject(options) && options);
  2185. this.action = false;
  2186. this.fading = false;
  2187. this.fulled = false;
  2188. this.hiding = false;
  2189. this.index = 0;
  2190. this.isImg = false;
  2191. this.length = 0;
  2192. this.played = false;
  2193. this.playing = false;
  2194. this.pointers = {};
  2195. this.ready = false;
  2196. this.showing = false;
  2197. this.timeout = false;
  2198. this.tooltipping = false;
  2199. this.viewed = false;
  2200. this.viewing = false;
  2201. this.isShown = false;
  2202. this.wheeling = false;
  2203. this.init();
  2204. }
  2205. createClass(Viewer, [{
  2206. key: 'init',
  2207. value: function init() {
  2208. var _this = this;
  2209. var element = this.element,
  2210. options = this.options;
  2211. if (getData(element, NAMESPACE)) {
  2212. return;
  2213. }
  2214. setData(element, NAMESPACE, this);
  2215. var isImg = element.tagName.toLowerCase() === 'img';
  2216. var images = [];
  2217. forEach(isImg ? [element] : element.querySelectorAll('img'), function (image) {
  2218. if (isFunction(options.filter)) {
  2219. if (options.filter.call(_this, image)) {
  2220. images.push(image);
  2221. }
  2222. } else {
  2223. images.push(image);
  2224. }
  2225. });
  2226. if (!images.length) {
  2227. return;
  2228. }
  2229. this.isImg = isImg;
  2230. this.length = images.length;
  2231. this.images = images;
  2232. this.dealOriginal=[];
  2233. var ownerDocument = element.ownerDocument;
  2234. var body = ownerDocument.body || ownerDocument.documentElement;
  2235. this.body = body;
  2236. this.scrollbarWidth = window.innerWidth - ownerDocument.documentElement.clientWidth;
  2237. this.initialBodyPaddingRight = window.getComputedStyle(body).paddingRight;
  2238. // Override `transition` option if it is not supported
  2239. if (isUndefined(document.createElement(NAMESPACE).style.transition)) {
  2240. options.transition = false;
  2241. }
  2242. if (options.inline) {
  2243. var count = 0;
  2244. var progress = function progress() {
  2245. count += 1;
  2246. if (count === _this.length) {
  2247. var timeout = void 0;
  2248. _this.initializing = false;
  2249. _this.delaying = {
  2250. abort: function abort() {
  2251. clearTimeout(timeout);
  2252. }
  2253. };
  2254. // build asynchronously to keep `this.viewer` is accessible in `ready` event handler.
  2255. timeout = setTimeout(function () {
  2256. _this.delaying = false;
  2257. _this.build();
  2258. }, 0);
  2259. }
  2260. };
  2261. this.initializing = {
  2262. abort: function abort() {
  2263. forEach(images, function (image) {
  2264. if (!image.complete) {
  2265. removeListener(image, EVENT_LOAD, progress);
  2266. }
  2267. });
  2268. }
  2269. };
  2270. forEach(images, function (image) {
  2271. if (image.complete) {
  2272. progress();
  2273. } else {
  2274. addListener(image, EVENT_LOAD, progress, {
  2275. once: true
  2276. });
  2277. }
  2278. });
  2279. } else {
  2280. addListener(element, EVENT_CLICK, this.onStart = function (_ref) {
  2281. var target = _ref.target;
  2282. if (target.tagName.toLowerCase() === 'img') {
  2283. _this.view(_this.images.indexOf(target));
  2284. }
  2285. });
  2286. }
  2287. }
  2288. }, {
  2289. key: 'build',
  2290. value: function build() {
  2291. if (this.ready) {
  2292. return;
  2293. }
  2294. var element = this.element,
  2295. options = this.options;
  2296. var parent = element.parentNode;
  2297. var template = document.createElement('div');
  2298. template.innerHTML = TEMPLATE;
  2299. var viewer = template.querySelector('.' + NAMESPACE + '-container');
  2300. var title = viewer.querySelector('.' + NAMESPACE + '-title');
  2301. var toolbar = viewer.querySelector('.' + NAMESPACE + '-toolbar');
  2302. var navbar = viewer.querySelector('.' + NAMESPACE + '-navbar');
  2303. var button = viewer.querySelector('.' + NAMESPACE + '-button');
  2304. var canvas = viewer.querySelector('.' + NAMESPACE + '-canvas');
  2305. if ($(window).width()>700)
  2306. {
  2307. toolbar.style.display = "flex";
  2308. toolbar.style.justifyContent= "center";
  2309. }
  2310. this.parent = parent;
  2311. this.viewer = viewer;
  2312. this.title = title;
  2313. this.toolbar = toolbar;
  2314. this.navbar = navbar;
  2315. this.button = button;
  2316. this.canvas = canvas;
  2317. this.footer = viewer.querySelector('.' + NAMESPACE + '-footer');
  2318. this.tooltipBox = viewer.querySelector('.' + NAMESPACE + '-tooltip');
  2319. this.player = viewer.querySelector('.' + NAMESPACE + '-player');
  2320. this.list = viewer.querySelector('.' + NAMESPACE + '-list');
  2321. addClass(title, !options.title ? CLASS_HIDE : getResponsiveClass(options.title));
  2322. addClass(navbar, !options.navbar ? CLASS_HIDE : getResponsiveClass(options.navbar));
  2323. toggleClass(button, CLASS_HIDE, !options.button);
  2324. if (options.backdrop) {
  2325. addClass(viewer, NAMESPACE + '-backdrop');
  2326. if (!options.inline && options.backdrop === true) {
  2327. setData(canvas, 'action', 'hide');
  2328. }
  2329. }
  2330. if (options.toolbar) {
  2331. var list = document.createElement('ul');
  2332. var custom = isPlainObject(options.toolbar);
  2333. var zoomButtons = BUTTONS.slice(0, 3);
  2334. var rotateButtons = BUTTONS.slice(7, 9);
  2335. var scaleButtons = BUTTONS.slice(9);
  2336. if (!custom) {
  2337. addClass(toolbar, getResponsiveClass(options.toolbar));
  2338. }
  2339. forEach(custom ? options.toolbar : BUTTONS, function (value, index) {
  2340. var deep = custom && isPlainObject(value);
  2341. var name = custom ? hyphenate(index) : value;
  2342. var show = deep && !isUndefined(value.show) ? value.show : value;
  2343. if (!show || !options.zoomable && zoomButtons.indexOf(name) !== -1 || !options.rotatable && rotateButtons.indexOf(name) !== -1 || !options.scalable && scaleButtons.indexOf(name) !== -1) {
  2344. return;
  2345. }
  2346. var size = deep && !isUndefined(value.size) ? value.size : value;
  2347. var click = deep && !isUndefined(value.click) ? value.click : value;
  2348. var item = document.createElement('li');
  2349. item.setAttribute('role', 'button');
  2350. addClass(item, NAMESPACE + '-' + name);
  2351. if (!isFunction(click)) {
  2352. setData(item, 'action', name);
  2353. }
  2354. if (isNumber(show)) {
  2355. addClass(item, getResponsiveClass(show));
  2356. }
  2357. if (['small', 'large'].indexOf(size) !== -1) {
  2358. addClass(item, NAMESPACE + '-' + size);
  2359. } else if (name === 'play') {
  2360. addClass(item, NAMESPACE + '-large');
  2361. }
  2362. if (isFunction(click)) {
  2363. addListener(item, EVENT_CLICK, click);
  2364. }
  2365. list.appendChild(item);
  2366. });
  2367. toolbar.appendChild(list);
  2368. } else {
  2369. addClass(toolbar, CLASS_HIDE);
  2370. }
  2371. if (!options.rotatable) {
  2372. var rotates = toolbar.querySelectorAll('li[class*="rotate"]');
  2373. addClass(rotates, CLASS_INVISIBLE);
  2374. forEach(rotates, function (rotate) {
  2375. toolbar.appendChild(rotate);
  2376. });
  2377. }
  2378. if (options.inline) {
  2379. addClass(button, CLASS_FULLSCREEN);
  2380. setStyle(viewer, {
  2381. zIndex: options.zIndexInline
  2382. });
  2383. if (window.getComputedStyle(parent).position === 'static') {
  2384. setStyle(parent, {
  2385. position: 'relative'
  2386. });
  2387. }
  2388. parent.insertBefore(viewer, element.nextSibling);
  2389. } else {
  2390. addClass(button, CLASS_CLOSE);
  2391. addClass(viewer, CLASS_FIXED);
  2392. addClass(viewer, CLASS_FADE);
  2393. addClass(viewer, CLASS_HIDE);
  2394. setStyle(viewer, {
  2395. zIndex: options.zIndex
  2396. });
  2397. var container = options.container;
  2398. if (isString(container)) {
  2399. container = element.ownerDocument.querySelector(container);
  2400. }
  2401. if (!container) {
  2402. container = this.body;
  2403. }
  2404. container.appendChild(viewer);
  2405. }
  2406. if (options.inline) {
  2407. this.render();
  2408. this.bind();
  2409. this.isShown = true;
  2410. }
  2411. this.ready = true;
  2412. if (isFunction(options.ready)) {
  2413. addListener(element, EVENT_READY, options.ready, {
  2414. once: true
  2415. });
  2416. }
  2417. if (dispatchEvent(element, EVENT_READY) === false) {
  2418. this.ready = false;
  2419. return;
  2420. }
  2421. if (this.ready && options.inline) {
  2422. this.view();
  2423. }
  2424. }
  2425. /**
  2426. * Get the no conflict viewer class.
  2427. * @returns {Viewer} The viewer class.
  2428. */
  2429. }], [{
  2430. key: 'noConflict',
  2431. value: function noConflict() {
  2432. window.Viewer = AnotherViewer;
  2433. return Viewer;
  2434. }
  2435. /**
  2436. * Change the default options.
  2437. * @param {Object} options - The new default options.
  2438. */
  2439. }, {
  2440. key: 'setDefaults',
  2441. value: function setDefaults(options) {
  2442. assign(DEFAULTS, isPlainObject(options) && options);
  2443. }
  2444. }]);
  2445. return Viewer;
  2446. }();
  2447. assign(Viewer.prototype, render, events, handlers, methods, others);
  2448. if ($.fn) {
  2449. var AnotherViewer$1 = $.fn.viewer;
  2450. var NAMESPACE$1 = 'viewer';
  2451. $.fn.viewer = function jQueryViewer(option) {
  2452. for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  2453. args[_key - 1] = arguments[_key];
  2454. }
  2455. var result = void 0;
  2456. this.each(function (i, element) {
  2457. var $element = $(element);
  2458. var isDestroy = option === 'destroy';
  2459. var viewer = $element.data(NAMESPACE$1);
  2460. if (!viewer) {
  2461. if (isDestroy) {
  2462. return;
  2463. }
  2464. var options = $.extend({}, $element.data(), $.isPlainObject(option) && option);
  2465. viewer = new Viewer(element, options);
  2466. $element.data(NAMESPACE$1, viewer);
  2467. }
  2468. if (typeof option === 'string') {
  2469. var fn = viewer[option];
  2470. if ($.isFunction(fn)) {
  2471. result = fn.apply(viewer, args);
  2472. if (result === viewer) {
  2473. result = undefined;
  2474. }
  2475. if (isDestroy) {
  2476. $element.removeData(NAMESPACE$1);
  2477. }
  2478. }
  2479. }
  2480. });
  2481. return result !== undefined ? result : this;
  2482. };
  2483. $.fn.viewer.Constructor = Viewer;
  2484. $.fn.viewer.setDefaults = Viewer.setDefaults;
  2485. $.fn.viewer.noConflict = function noConflict() {
  2486. $.fn.viewer = AnotherViewer$1;
  2487. return this;
  2488. };
  2489. }
  2490. })));