viewer.js 98 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108
  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 (this.hiding || this.played || index < 0 || index >= this.length) {
  1395. return this;
  1396. }
  1397. if (!mandatory)
  1398. {
  1399. if (this.viewed && index === this.index) {
  1400. return this;
  1401. }
  1402. }
  1403. if (this.viewing) {
  1404. this.viewing.abort();
  1405. }
  1406. var element = this.element,
  1407. options = this.options,
  1408. title = this.title,
  1409. canvas = this.canvas;
  1410. var item = this.items[index];
  1411. var img = item.querySelector('img');
  1412. var url = getData(img, 'originalUrl');
  1413. var alt = img.getAttribute('alt');
  1414. var image = document.createElement('img');
  1415. image.src = url;
  1416. image.alt = alt;
  1417. image.style.display='none';
  1418. if (isFunction(options.view)) {
  1419. addListener(element, EVENT_VIEW, options.view, {
  1420. once: true
  1421. });
  1422. }
  1423. if (dispatchEvent(element, EVENT_VIEW, {
  1424. originalImage: this.images[index],
  1425. index: index,
  1426. image: image
  1427. }) === false || !this.isShown || this.hiding || this.played) {
  1428. return this;
  1429. }
  1430. this.image = image;
  1431. removeClass(this.items[this.index], CLASS_ACTIVE);
  1432. addClass(item, CLASS_ACTIVE);
  1433. this.viewed = false;
  1434. this.index = index;
  1435. this.imageData = {};
  1436. addClass(image, CLASS_INVISIBLE);
  1437. if (options.loading) {
  1438. addClass(canvas, CLASS_LOADING);
  1439. }
  1440. canvas.innerHTML = '';
  1441. canvas.appendChild(image);
  1442. // Center current item
  1443. this.renderList();
  1444. // Clear title
  1445. // title.innerHTML = '';
  1446. title.textContent = (_this.index+1)+'/'+_this.images.length;
  1447. // Generate title after viewed
  1448. var onViewed = function onViewed() {
  1449. // var imageData = _this.imageData;
  1450. image.style.display='block';
  1451. // title.textContent = alt + ' (' + imageData.naturalWidth + ' \xD7 ' + imageData.naturalHeight + ')';
  1452. };
  1453. var icon_url='url('+document.getElementById("icon_url").innerHTML + ')';
  1454. if (this.dealOriginal.indexOf(url)>-1)
  1455. {
  1456. icon_url=icon_url + ' -530px -12px no-repeat';
  1457. this.toolbar.querySelector(".viewer-one-to-ones").style.background=icon_url;
  1458. }else {
  1459. icon_url=icon_url + ' -471px -12px no-repeat';
  1460. this.toolbar.querySelector(".viewer-one-to-ones").style.background=icon_url;
  1461. }
  1462. this.toolbar.querySelector(".viewer-one-to-ones").style.transform='scale(0.7)';
  1463. var onLoad = void 0;
  1464. addListener(element, EVENT_VIEWED, onViewed, {
  1465. once: true
  1466. });
  1467. this.viewing = {
  1468. abort: function abort() {
  1469. removeListener(element, EVENT_VIEWED, onViewed);
  1470. if (image.complete) {
  1471. if (this.imageRendering) {
  1472. this.imageRendering.abort();
  1473. } else if (this.imageInitializing) {
  1474. this.imageInitializing.abort();
  1475. }
  1476. } else {
  1477. removeListener(image, EVENT_LOAD, onLoad);
  1478. if (this.timeout) {
  1479. clearTimeout(this.timeout);
  1480. }
  1481. }
  1482. }
  1483. };
  1484. if (image.complete) {
  1485. this.load();
  1486. } else {
  1487. addListener(image, EVENT_LOAD, onLoad = this.load.bind(this), {
  1488. once: true
  1489. });
  1490. if (this.timeout) {
  1491. clearTimeout(this.timeout);
  1492. }
  1493. // Make the image visible if it fails to load within 1s
  1494. this.timeout = setTimeout(function () {
  1495. removeClass(image, CLASS_INVISIBLE);
  1496. _this.timeout = false;
  1497. }, 1000);
  1498. }
  1499. return this;
  1500. },
  1501. /**
  1502. * View the previous image
  1503. * @param {boolean} [loop=false] - Indicate if view the last one
  1504. * when it is the first one at present.
  1505. * @returns {Viewer} this
  1506. */
  1507. prev: function prev() {
  1508. var loop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  1509. var index = this.index - 1;
  1510. if (index < 0) {
  1511. index = loop ? this.length - 1 : 0;
  1512. }
  1513. this.view(index);
  1514. return this;
  1515. },
  1516. /**
  1517. * View the next image
  1518. * @param {boolean} [loop=false] - Indicate if view the first one
  1519. * when it is the last one at present.
  1520. * @returns {Viewer} this
  1521. */
  1522. next: function next() {
  1523. var loop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  1524. var maxIndex = this.length - 1;
  1525. var index = this.index + 1;
  1526. if (index > maxIndex) {
  1527. index = loop ? 0 : maxIndex;
  1528. }
  1529. this.view(index);
  1530. return this;
  1531. },
  1532. normal: function normal() {
  1533. var index = this.index;
  1534. var item = this.items[index];
  1535. var img = item.querySelector('img');
  1536. var dealUrl = getData(img, 'dealUrl');
  1537. if (this.dealOriginal.indexOf(dealUrl)>-1)
  1538. {
  1539. return this;
  1540. }
  1541. this.dealOriginal.push(dealUrl);
  1542. setData(img,'originalUrl',dealUrl);
  1543. this.view(index,true);
  1544. return this;
  1545. },
  1546. /**
  1547. * Move the image with relative offsets.
  1548. * @param {number} offsetX - The relative offset distance on the x-axis.
  1549. * @param {number} offsetY - The relative offset distance on the y-axis.
  1550. * @returns {Viewer} this
  1551. */
  1552. move: function move(offsetX, offsetY) {
  1553. var imageData = this.imageData;
  1554. this.moveTo(isUndefined(offsetX) ? offsetX : imageData.left + Number(offsetX), isUndefined(offsetY) ? offsetY : imageData.top + Number(offsetY));
  1555. return this;
  1556. },
  1557. /**
  1558. * Move the image to an absolute point.
  1559. * @param {number} x - The x-axis coordinate.
  1560. * @param {number} [y=x] - The y-axis coordinate.
  1561. * @returns {Viewer} this
  1562. */
  1563. moveTo: function moveTo(x) {
  1564. var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
  1565. var imageData = this.imageData;
  1566. x = Number(x);
  1567. y = Number(y);
  1568. if (this.viewed && !this.played && this.options.movable) {
  1569. var changed = false;
  1570. if (isNumber(x)) {
  1571. imageData.left = x;
  1572. changed = true;
  1573. }
  1574. if (isNumber(y)) {
  1575. imageData.top = y;
  1576. changed = true;
  1577. }
  1578. if (changed) {
  1579. this.renderImage();
  1580. }
  1581. }
  1582. return this;
  1583. },
  1584. /**
  1585. * Zoom the image with a relative ratio.
  1586. * @param {number} ratio - The target ratio.
  1587. * @param {boolean} [hasTooltip=false] - Indicates if it has a tooltip or not.
  1588. * @param {Event} [_originalEvent=null] - The original event if any.
  1589. * @returns {Viewer} this
  1590. */
  1591. zoom: function zoom(ratio) {
  1592. var hasTooltip = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  1593. var _originalEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
  1594. var imageData = this.imageData;
  1595. ratio = Number(ratio);
  1596. if (ratio < 0) {
  1597. ratio = 1 / (1 - ratio);
  1598. } else {
  1599. ratio = 1 + ratio;
  1600. }
  1601. this.zoomTo(imageData.width * ratio / imageData.naturalWidth, hasTooltip, _originalEvent);
  1602. return this;
  1603. },
  1604. /**
  1605. * Zoom the image to an absolute ratio.
  1606. * @param {number} ratio - The target ratio.
  1607. * @param {boolean} [hasTooltip=false] - Indicates if it has a tooltip or not.
  1608. * @param {Event} [_originalEvent=null] - The original event if any.
  1609. * @param {Event} [_zoomable=false] - Indicates if the current zoom is available or not.
  1610. * @returns {Viewer} this
  1611. */
  1612. zoomTo: function zoomTo(ratio) {
  1613. var hasTooltip = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  1614. var _originalEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
  1615. var _zoomable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  1616. var options = this.options,
  1617. pointers = this.pointers,
  1618. imageData = this.imageData;
  1619. ratio = Math.max(0, ratio);
  1620. if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
  1621. if (!_zoomable) {
  1622. var minZoomRatio = Math.max(0.01, options.minZoomRatio);
  1623. var maxZoomRatio = Math.min(100, options.maxZoomRatio);
  1624. ratio = Math.min(Math.max(ratio, minZoomRatio), maxZoomRatio);
  1625. }
  1626. if (_originalEvent && ratio > 0.95 && ratio < 1.05) {
  1627. ratio = 1;
  1628. }
  1629. var newWidth = imageData.naturalWidth * ratio;
  1630. var newHeight = imageData.naturalHeight * ratio;
  1631. if (_originalEvent) {
  1632. var offset = getOffset(this.viewer);
  1633. var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : {
  1634. pageX: _originalEvent.pageX,
  1635. pageY: _originalEvent.pageY
  1636. };
  1637. // Zoom from the triggering point of the event
  1638. imageData.left -= (newWidth - imageData.width) * ((center.pageX - offset.left - imageData.left) / imageData.width);
  1639. imageData.top -= (newHeight - imageData.height) * ((center.pageY - offset.top - imageData.top) / imageData.height);
  1640. } else {
  1641. // Zoom from the center of the image
  1642. imageData.left -= (newWidth - imageData.width) / 2;
  1643. imageData.top -= (newHeight - imageData.height) / 2;
  1644. }
  1645. imageData.width = newWidth;
  1646. imageData.height = newHeight;
  1647. imageData.ratio = ratio;
  1648. this.renderImage();
  1649. if (hasTooltip) {
  1650. this.tooltip();
  1651. }
  1652. }
  1653. return this;
  1654. },
  1655. /**
  1656. * Rotate the image with a relative degree.
  1657. * @param {number} degree - The rotate degree.
  1658. * @returns {Viewer} this
  1659. */
  1660. rotate: function rotate(degree) {
  1661. this.rotateTo((this.imageData.rotate || 0) + Number(degree));
  1662. return this;
  1663. },
  1664. /**
  1665. * Rotate the image to an absolute degree.
  1666. * @param {number} degree - The rotate degree.
  1667. * @returns {Viewer} this
  1668. */
  1669. rotateTo: function rotateTo(degree) {
  1670. var imageData = this.imageData;
  1671. degree = Number(degree);
  1672. if (isNumber(degree) && this.viewed && !this.played && this.options.rotatable) {
  1673. imageData.rotate = degree;
  1674. this.renderImage();
  1675. }
  1676. return this;
  1677. },
  1678. /**
  1679. * Scale the image on the x-axis.
  1680. * @param {number} scaleX - The scale ratio on the x-axis.
  1681. * @returns {Viewer} this
  1682. */
  1683. scaleX: function scaleX(_scaleX) {
  1684. this.scale(_scaleX, this.imageData.scaleY);
  1685. return this;
  1686. },
  1687. /**
  1688. * Scale the image on the y-axis.
  1689. * @param {number} scaleY - The scale ratio on the y-axis.
  1690. * @returns {Viewer} this
  1691. */
  1692. scaleY: function scaleY(_scaleY) {
  1693. this.scale(this.imageData.scaleX, _scaleY);
  1694. return this;
  1695. },
  1696. /**
  1697. * Scale the image.
  1698. * @param {number} scaleX - The scale ratio on the x-axis.
  1699. * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.
  1700. * @returns {Viewer} this
  1701. */
  1702. scale: function scale(scaleX) {
  1703. var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX;
  1704. var imageData = this.imageData;
  1705. scaleX = Number(scaleX);
  1706. scaleY = Number(scaleY);
  1707. if (this.viewed && !this.played && this.options.scalable) {
  1708. var changed = false;
  1709. if (isNumber(scaleX)) {
  1710. imageData.scaleX = scaleX;
  1711. changed = true;
  1712. }
  1713. if (isNumber(scaleY)) {
  1714. imageData.scaleY = scaleY;
  1715. changed = true;
  1716. }
  1717. if (changed) {
  1718. this.renderImage();
  1719. }
  1720. }
  1721. return this;
  1722. },
  1723. /**
  1724. * Play the images
  1725. * @param {boolean} [fullscreen=false] - Indicate if request fullscreen or not.
  1726. * @returns {Viewer} this
  1727. */
  1728. play: function play() {
  1729. var _this2 = this;
  1730. var fullscreen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  1731. if (!this.isShown || this.played) {
  1732. return this;
  1733. }
  1734. var options = this.options,
  1735. player = this.player;
  1736. var onLoad = this.loadImage.bind(this);
  1737. var list = [];
  1738. var total = 0;
  1739. var index = 0;
  1740. this.played = true;
  1741. this.onLoadWhenPlay = onLoad;
  1742. if (fullscreen) {
  1743. this.requestFullscreen();
  1744. }
  1745. addClass(player, CLASS_SHOW);
  1746. forEach(this.items, function (item, i) {
  1747. var img = item.querySelector('img');
  1748. var image = document.createElement('img');
  1749. image.src = getData(img, 'originalUrl');
  1750. image.alt = img.getAttribute('alt');
  1751. total += 1;
  1752. addClass(image, CLASS_FADE);
  1753. toggleClass(image, CLASS_TRANSITION, options.transition);
  1754. if (hasClass(item, CLASS_ACTIVE)) {
  1755. addClass(image, CLASS_IN);
  1756. index = i;
  1757. }
  1758. list.push(image);
  1759. addListener(image, EVENT_LOAD, onLoad, {
  1760. once: true
  1761. });
  1762. player.appendChild(image);
  1763. });
  1764. if (isNumber(options.interval) && options.interval > 0) {
  1765. var play = function play() {
  1766. _this2.playing = setTimeout(function () {
  1767. removeClass(list[index], CLASS_IN);
  1768. index += 1;
  1769. index = index < total ? index : 0;
  1770. addClass(list[index], CLASS_IN);
  1771. play();
  1772. }, options.interval);
  1773. };
  1774. if (total > 1) {
  1775. play();
  1776. }
  1777. }
  1778. return this;
  1779. },
  1780. // Stop play
  1781. stop: function stop() {
  1782. var _this3 = this;
  1783. if (!this.played) {
  1784. return this;
  1785. }
  1786. var player = this.player;
  1787. this.played = false;
  1788. clearTimeout(this.playing);
  1789. forEach(player.getElementsByTagName('img'), function (image) {
  1790. removeListener(image, EVENT_LOAD, _this3.onLoadWhenPlay);
  1791. });
  1792. removeClass(player, CLASS_SHOW);
  1793. player.innerHTML = '';
  1794. this.exitFullscreen();
  1795. return this;
  1796. },
  1797. // Enter modal mode (only available in inline mode)
  1798. full: function full() {
  1799. var _this4 = this;
  1800. var options = this.options,
  1801. viewer = this.viewer,
  1802. image = this.image,
  1803. list = this.list;
  1804. if (!this.isShown || this.played || this.fulled || !options.inline) {
  1805. return this;
  1806. }
  1807. this.fulled = true;
  1808. this.open();
  1809. addClass(this.button, CLASS_FULLSCREEN_EXIT);
  1810. if (options.transition) {
  1811. removeClass(list, CLASS_TRANSITION);
  1812. if (this.viewed) {
  1813. removeClass(image, CLASS_TRANSITION);
  1814. }
  1815. }
  1816. addClass(viewer, CLASS_FIXED);
  1817. viewer.setAttribute('style', '');
  1818. setStyle(viewer, {
  1819. zIndex: options.zIndex
  1820. });
  1821. this.initContainer();
  1822. this.viewerData = assign({}, this.containerData);
  1823. this.renderList();
  1824. if (this.viewed) {
  1825. this.initImage(function () {
  1826. _this4.renderImage(function () {
  1827. if (options.transition) {
  1828. setTimeout(function () {
  1829. addClass(image, CLASS_TRANSITION);
  1830. addClass(list, CLASS_TRANSITION);
  1831. }, 0);
  1832. }
  1833. });
  1834. });
  1835. }
  1836. return this;
  1837. },
  1838. // Exit modal mode (only available in inline mode)
  1839. exit: function exit() {
  1840. var _this5 = this;
  1841. var options = this.options,
  1842. viewer = this.viewer,
  1843. image = this.image,
  1844. list = this.list;
  1845. if (!this.isShown || this.played || !this.fulled || !options.inline) {
  1846. return this;
  1847. }
  1848. this.fulled = false;
  1849. this.close();
  1850. removeClass(this.button, CLASS_FULLSCREEN_EXIT);
  1851. if (options.transition) {
  1852. removeClass(list, CLASS_TRANSITION);
  1853. if (this.viewed) {
  1854. removeClass(image, CLASS_TRANSITION);
  1855. }
  1856. }
  1857. removeClass(viewer, CLASS_FIXED);
  1858. setStyle(viewer, {
  1859. zIndex: options.zIndexInline
  1860. });
  1861. this.viewerData = assign({}, this.parentData);
  1862. this.renderViewer();
  1863. this.renderList();
  1864. if (this.viewed) {
  1865. this.initImage(function () {
  1866. _this5.renderImage(function () {
  1867. if (options.transition) {
  1868. setTimeout(function () {
  1869. addClass(image, CLASS_TRANSITION);
  1870. addClass(list, CLASS_TRANSITION);
  1871. }, 0);
  1872. }
  1873. });
  1874. });
  1875. }
  1876. return this;
  1877. },
  1878. // Show the current ratio of the image with percentage
  1879. tooltip: function tooltip() {
  1880. var _this6 = this;
  1881. var options = this.options,
  1882. tooltipBox = this.tooltipBox,
  1883. imageData = this.imageData;
  1884. if (!this.viewed || this.played || !options.tooltip) {
  1885. return this;
  1886. }
  1887. tooltipBox.textContent = Math.round(imageData.ratio * 100) + '%';
  1888. if (!this.tooltipping) {
  1889. if (options.transition) {
  1890. if (this.fading) {
  1891. dispatchEvent(tooltipBox, EVENT_TRANSITION_END);
  1892. }
  1893. addClass(tooltipBox, CLASS_SHOW);
  1894. addClass(tooltipBox, CLASS_FADE);
  1895. addClass(tooltipBox, CLASS_TRANSITION);
  1896. // Force reflow to enable CSS3 transition
  1897. // eslint-disable-next-line
  1898. tooltipBox.offsetWidth;
  1899. addClass(tooltipBox, CLASS_IN);
  1900. } else {
  1901. addClass(tooltipBox, CLASS_SHOW);
  1902. }
  1903. } else {
  1904. clearTimeout(this.tooltipping);
  1905. }
  1906. this.tooltipping = setTimeout(function () {
  1907. if (options.transition) {
  1908. addListener(tooltipBox, EVENT_TRANSITION_END, function () {
  1909. removeClass(tooltipBox, CLASS_SHOW);
  1910. removeClass(tooltipBox, CLASS_FADE);
  1911. removeClass(tooltipBox, CLASS_TRANSITION);
  1912. _this6.fading = false;
  1913. }, {
  1914. once: true
  1915. });
  1916. removeClass(tooltipBox, CLASS_IN);
  1917. _this6.fading = true;
  1918. } else {
  1919. removeClass(tooltipBox, CLASS_SHOW);
  1920. }
  1921. _this6.tooltipping = false;
  1922. }, 1000);
  1923. return this;
  1924. },
  1925. // Toggle the image size between its natural size and initial size
  1926. toggle: function toggle() {
  1927. if (this.imageData.ratio === 1) {
  1928. this.zoomTo(this.initialImageData.ratio, true);
  1929. } else {
  1930. this.zoomTo(1, true);
  1931. }
  1932. return this;
  1933. },
  1934. // Reset the image to its initial state
  1935. reset: function reset() {
  1936. if (this.viewed && !this.played) {
  1937. this.imageData = assign({}, this.initialImageData);
  1938. this.renderImage();
  1939. }
  1940. return this;
  1941. },
  1942. // Update viewer when images changed
  1943. update: function update() {
  1944. var element = this.element,
  1945. options = this.options,
  1946. isImg = this.isImg;
  1947. // Destroy viewer if the target image was deleted
  1948. if (isImg && !element.parentNode) {
  1949. return this.destroy();
  1950. }
  1951. var images = [];
  1952. forEach(isImg ? [element] : element.querySelectorAll('img'), function (image) {
  1953. if (options.filter) {
  1954. if (options.filter(image)) {
  1955. images.push(image);
  1956. }
  1957. } else {
  1958. images.push(image);
  1959. }
  1960. });
  1961. if (!images.length) {
  1962. return this;
  1963. }
  1964. this.images = images;
  1965. this.length = images.length;
  1966. if (this.ready) {
  1967. var indexes = [];
  1968. forEach(this.items, function (item, i) {
  1969. var img = item.querySelector('img');
  1970. var image = images[i];
  1971. if (image) {
  1972. if (image.src !== img.src) {
  1973. indexes.push(i);
  1974. }
  1975. } else {
  1976. indexes.push(i);
  1977. }
  1978. });
  1979. setStyle(this.list, {
  1980. width: 'auto'
  1981. });
  1982. this.initList();
  1983. if (this.isShown) {
  1984. if (this.length) {
  1985. if (this.viewed) {
  1986. var index = indexes.indexOf(this.index);
  1987. if (index >= 0) {
  1988. this.viewed = false;
  1989. this.view(Math.max(this.index - (index + 1), 0));
  1990. } else {
  1991. addClass(this.items[this.index], CLASS_ACTIVE);
  1992. }
  1993. }
  1994. } else {
  1995. this.image = null;
  1996. this.viewed = false;
  1997. this.index = 0;
  1998. this.imageData = null;
  1999. this.canvas.innerHTML = '';
  2000. this.title.innerHTML = '';
  2001. }
  2002. }
  2003. } else {
  2004. this.build();
  2005. }
  2006. return this;
  2007. },
  2008. // Destroy the viewer
  2009. destroy: function destroy() {
  2010. var element = this.element,
  2011. options = this.options;
  2012. if (!getData(element, NAMESPACE)) {
  2013. return this;
  2014. }
  2015. this.destroyed = true;
  2016. if (this.ready) {
  2017. if (this.played) {
  2018. this.stop();
  2019. }
  2020. if (options.inline) {
  2021. if (this.fulled) {
  2022. this.exit();
  2023. }
  2024. this.unbind();
  2025. } else if (this.isShown) {
  2026. if (this.viewing) {
  2027. if (this.imageRendering) {
  2028. this.imageRendering.abort();
  2029. } else if (this.imageInitializing) {
  2030. this.imageInitializing.abort();
  2031. }
  2032. }
  2033. if (this.hiding) {
  2034. this.transitioning.abort();
  2035. }
  2036. this.hidden();
  2037. } else if (this.showing) {
  2038. this.transitioning.abort();
  2039. this.hidden();
  2040. }
  2041. this.ready = false;
  2042. this.viewer.parentNode.removeChild(this.viewer);
  2043. } else if (options.inline) {
  2044. if (this.delaying) {
  2045. this.delaying.abort();
  2046. } else if (this.initializing) {
  2047. this.initializing.abort();
  2048. }
  2049. }
  2050. if (!options.inline) {
  2051. removeListener(element, EVENT_CLICK, this.onStart);
  2052. }
  2053. removeData(element, NAMESPACE);
  2054. return this;
  2055. }
  2056. };
  2057. var others = {
  2058. open: function open() {
  2059. var body = this.body;
  2060. addClass(body, CLASS_OPEN);
  2061. body.style.paddingRight = this.scrollbarWidth + (parseFloat(this.initialBodyPaddingRight) || 0) + 'px';
  2062. },
  2063. close: function close() {
  2064. var body = this.body;
  2065. removeClass(body, CLASS_OPEN);
  2066. body.style.paddingRight = this.initialBodyPaddingRight;
  2067. },
  2068. shown: function shown() {
  2069. var element = this.element,
  2070. options = this.options;
  2071. this.fulled = true;
  2072. this.isShown = true;
  2073. this.render();
  2074. this.bind();
  2075. this.showing = false;
  2076. if (isFunction(options.shown)) {
  2077. addListener(element, EVENT_SHOWN, options.shown, {
  2078. once: true
  2079. });
  2080. }
  2081. if (dispatchEvent(element, EVENT_SHOWN) === false) {
  2082. return;
  2083. }
  2084. if (this.ready && this.isShown && !this.hiding) {
  2085. this.view(this.index);
  2086. }
  2087. },
  2088. hidden: function hidden() {
  2089. var element = this.element,
  2090. options = this.options;
  2091. this.fulled = false;
  2092. this.viewed = false;
  2093. this.isShown = false;
  2094. this.close();
  2095. this.unbind();
  2096. addClass(this.viewer, CLASS_HIDE);
  2097. this.resetList();
  2098. this.resetImage();
  2099. this.hiding = false;
  2100. if (!this.destroyed) {
  2101. if (isFunction(options.hidden)) {
  2102. addListener(element, EVENT_HIDDEN, options.hidden, {
  2103. once: true
  2104. });
  2105. }
  2106. dispatchEvent(element, EVENT_HIDDEN);
  2107. }
  2108. },
  2109. requestFullscreen: function requestFullscreen() {
  2110. var document = this.element.ownerDocument;
  2111. if (this.fulled && !document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
  2112. var documentElement = document.documentElement;
  2113. if (documentElement.requestFullscreen) {
  2114. documentElement.requestFullscreen();
  2115. } else if (documentElement.msRequestFullscreen) {
  2116. documentElement.msRequestFullscreen();
  2117. } else if (documentElement.mozRequestFullScreen) {
  2118. documentElement.mozRequestFullScreen();
  2119. } else if (documentElement.webkitRequestFullscreen) {
  2120. documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  2121. }
  2122. }
  2123. },
  2124. exitFullscreen: function exitFullscreen() {
  2125. if (this.fulled) {
  2126. var document = this.element.ownerDocument;
  2127. if (document.exitFullscreen) {
  2128. document.exitFullscreen();
  2129. } else if (document.msExitFullscreen) {
  2130. document.msExitFullscreen();
  2131. } else if (document.mozCancelFullScreen) {
  2132. document.mozCancelFullScreen();
  2133. } else if (document.webkitExitFullscreen) {
  2134. document.webkitExitFullscreen();
  2135. }
  2136. }
  2137. },
  2138. change: function change(e) {
  2139. var options = this.options,
  2140. pointers = this.pointers;
  2141. var pointer = pointers[Object.keys(pointers)[0]];
  2142. var offsetX = pointer.endX - pointer.startX;
  2143. var offsetY = pointer.endY - pointer.startY;
  2144. switch (this.action) {
  2145. // Move the current image
  2146. case ACTION_MOVE:
  2147. this.move(offsetX, offsetY);
  2148. break;
  2149. // Zoom the current image
  2150. case ACTION_ZOOM:
  2151. this.zoom(getMaxZoomRatio(pointers), false, e);
  2152. break;
  2153. case ACTION_SWITCH:
  2154. this.action = 'switched';
  2155. // Empty `pointers` as `touchend` event will not be fired after swiped in iOS browsers.
  2156. this.pointers = {};
  2157. if (Math.abs(offsetX) > Math.abs(offsetY)) {
  2158. if (offsetX > 1) {
  2159. this.prev(options.loop);
  2160. } else if (offsetX < -1) {
  2161. this.next(options.loop);
  2162. }
  2163. }
  2164. break;
  2165. default:
  2166. }
  2167. // Override
  2168. forEach(pointers, function (p) {
  2169. p.startX = p.endX;
  2170. p.startY = p.endY;
  2171. });
  2172. },
  2173. isSwitchable: function isSwitchable() {
  2174. var imageData = this.imageData,
  2175. viewerData = this.viewerData;
  2176. return this.length > 1 && imageData.left >= 0 && imageData.top >= 0 && imageData.width <= viewerData.width && imageData.height <= viewerData.height;
  2177. }
  2178. };
  2179. var AnotherViewer = WINDOW.Viewer;
  2180. var Viewer = function () {
  2181. /**
  2182. * Create a new Viewer.
  2183. * @param {Element} element - The target element for viewing.
  2184. * @param {Object} [options={}] - The configuration options.
  2185. */
  2186. function Viewer(element) {
  2187. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  2188. classCallCheck(this, Viewer);
  2189. if (!element || element.nodeType !== 1) {
  2190. throw new Error('The first argument is required and must be an element.');
  2191. }
  2192. this.element = element;
  2193. this.options = assign({}, DEFAULTS, isPlainObject(options) && options);
  2194. this.action = false;
  2195. this.fading = false;
  2196. this.fulled = false;
  2197. this.hiding = false;
  2198. this.index = 0;
  2199. this.isImg = false;
  2200. this.length = 0;
  2201. this.played = false;
  2202. this.playing = false;
  2203. this.pointers = {};
  2204. this.ready = false;
  2205. this.showing = false;
  2206. this.timeout = false;
  2207. this.tooltipping = false;
  2208. this.viewed = false;
  2209. this.viewing = false;
  2210. this.isShown = false;
  2211. this.wheeling = false;
  2212. this.init();
  2213. }
  2214. createClass(Viewer, [{
  2215. key: 'init',
  2216. value: function init() {
  2217. var _this = this;
  2218. var element = this.element,
  2219. options = this.options;
  2220. if (getData(element, NAMESPACE)) {
  2221. return;
  2222. }
  2223. setData(element, NAMESPACE, this);
  2224. var isImg = element.tagName.toLowerCase() === 'img';
  2225. var images = [];
  2226. forEach(isImg ? [element] : element.querySelectorAll('img'), function (image) {
  2227. if (isFunction(options.filter)) {
  2228. if (options.filter.call(_this, image)) {
  2229. images.push(image);
  2230. }
  2231. } else {
  2232. images.push(image);
  2233. }
  2234. });
  2235. if (!images.length) {
  2236. return;
  2237. }
  2238. this.isImg = isImg;
  2239. this.length = images.length;
  2240. this.images = images;
  2241. this.dealOriginal=[];
  2242. var ownerDocument = element.ownerDocument;
  2243. var body = ownerDocument.body || ownerDocument.documentElement;
  2244. this.body = body;
  2245. this.scrollbarWidth = window.innerWidth - ownerDocument.documentElement.clientWidth;
  2246. this.initialBodyPaddingRight = window.getComputedStyle(body).paddingRight;
  2247. // Override `transition` option if it is not supported
  2248. if (isUndefined(document.createElement(NAMESPACE).style.transition)) {
  2249. options.transition = false;
  2250. }
  2251. if (options.inline) {
  2252. var count = 0;
  2253. var progress = function progress() {
  2254. count += 1;
  2255. if (count === _this.length) {
  2256. var timeout = void 0;
  2257. _this.initializing = false;
  2258. _this.delaying = {
  2259. abort: function abort() {
  2260. clearTimeout(timeout);
  2261. }
  2262. };
  2263. // build asynchronously to keep `this.viewer` is accessible in `ready` event handler.
  2264. timeout = setTimeout(function () {
  2265. _this.delaying = false;
  2266. _this.build();
  2267. }, 0);
  2268. }
  2269. };
  2270. this.initializing = {
  2271. abort: function abort() {
  2272. forEach(images, function (image) {
  2273. if (!image.complete) {
  2274. removeListener(image, EVENT_LOAD, progress);
  2275. }
  2276. });
  2277. }
  2278. };
  2279. forEach(images, function (image) {
  2280. if (image.complete) {
  2281. progress();
  2282. } else {
  2283. addListener(image, EVENT_LOAD, progress, {
  2284. once: true
  2285. });
  2286. }
  2287. });
  2288. } else {
  2289. addListener(element, EVENT_CLICK, this.onStart = function (_ref) {
  2290. var target = _ref.target;
  2291. if (target.tagName.toLowerCase() === 'img') {
  2292. _this.view(_this.images.indexOf(target));
  2293. }
  2294. });
  2295. }
  2296. }
  2297. }, {
  2298. key: 'build',
  2299. value: function build() {
  2300. if (this.ready) {
  2301. return;
  2302. }
  2303. var element = this.element,
  2304. options = this.options;
  2305. var parent = element.parentNode;
  2306. var template = document.createElement('div');
  2307. template.innerHTML = TEMPLATE;
  2308. var viewer = template.querySelector('.' + NAMESPACE + '-container');
  2309. var title = viewer.querySelector('.' + NAMESPACE + '-title');
  2310. var toolbar = viewer.querySelector('.' + NAMESPACE + '-toolbar');
  2311. var navbar = viewer.querySelector('.' + NAMESPACE + '-navbar');
  2312. var button = viewer.querySelector('.' + NAMESPACE + '-button');
  2313. var canvas = viewer.querySelector('.' + NAMESPACE + '-canvas');
  2314. if ($(window).width()>700)
  2315. {
  2316. toolbar.style.display = "flex";
  2317. toolbar.style.justifyContent= "center";
  2318. }
  2319. this.parent = parent;
  2320. this.viewer = viewer;
  2321. this.title = title;
  2322. this.toolbar = toolbar;
  2323. this.navbar = navbar;
  2324. this.button = button;
  2325. this.canvas = canvas;
  2326. this.footer = viewer.querySelector('.' + NAMESPACE + '-footer');
  2327. this.tooltipBox = viewer.querySelector('.' + NAMESPACE + '-tooltip');
  2328. this.player = viewer.querySelector('.' + NAMESPACE + '-player');
  2329. this.list = viewer.querySelector('.' + NAMESPACE + '-list');
  2330. addClass(title, !options.title ? CLASS_HIDE : getResponsiveClass(options.title));
  2331. addClass(navbar, !options.navbar ? CLASS_HIDE : getResponsiveClass(options.navbar));
  2332. toggleClass(button, CLASS_HIDE, !options.button);
  2333. if (options.backdrop) {
  2334. addClass(viewer, NAMESPACE + '-backdrop');
  2335. if (!options.inline && options.backdrop === true) {
  2336. setData(canvas, 'action', 'hide');
  2337. }
  2338. }
  2339. if (options.toolbar) {
  2340. var list = document.createElement('ul');
  2341. var custom = isPlainObject(options.toolbar);
  2342. var zoomButtons = BUTTONS.slice(0, 3);
  2343. var rotateButtons = BUTTONS.slice(7, 9);
  2344. var scaleButtons = BUTTONS.slice(9);
  2345. if (!custom) {
  2346. addClass(toolbar, getResponsiveClass(options.toolbar));
  2347. }
  2348. forEach(custom ? options.toolbar : BUTTONS, function (value, index) {
  2349. var deep = custom && isPlainObject(value);
  2350. var name = custom ? hyphenate(index) : value;
  2351. var show = deep && !isUndefined(value.show) ? value.show : value;
  2352. if (!show || !options.zoomable && zoomButtons.indexOf(name) !== -1 || !options.rotatable && rotateButtons.indexOf(name) !== -1 || !options.scalable && scaleButtons.indexOf(name) !== -1) {
  2353. return;
  2354. }
  2355. var size = deep && !isUndefined(value.size) ? value.size : value;
  2356. var click = deep && !isUndefined(value.click) ? value.click : value;
  2357. var item = document.createElement('li');
  2358. item.setAttribute('role', 'button');
  2359. addClass(item, NAMESPACE + '-' + name);
  2360. if (!isFunction(click)) {
  2361. setData(item, 'action', name);
  2362. }
  2363. if (isNumber(show)) {
  2364. addClass(item, getResponsiveClass(show));
  2365. }
  2366. if (['small', 'large'].indexOf(size) !== -1) {
  2367. addClass(item, NAMESPACE + '-' + size);
  2368. } else if (name === 'play') {
  2369. addClass(item, NAMESPACE + '-large');
  2370. }
  2371. if (isFunction(click)) {
  2372. addListener(item, EVENT_CLICK, click);
  2373. }
  2374. list.appendChild(item);
  2375. });
  2376. toolbar.appendChild(list);
  2377. } else {
  2378. addClass(toolbar, CLASS_HIDE);
  2379. }
  2380. if (!options.rotatable) {
  2381. var rotates = toolbar.querySelectorAll('li[class*="rotate"]');
  2382. addClass(rotates, CLASS_INVISIBLE);
  2383. forEach(rotates, function (rotate) {
  2384. toolbar.appendChild(rotate);
  2385. });
  2386. }
  2387. if (options.inline) {
  2388. addClass(button, CLASS_FULLSCREEN);
  2389. setStyle(viewer, {
  2390. zIndex: options.zIndexInline
  2391. });
  2392. if (window.getComputedStyle(parent).position === 'static') {
  2393. setStyle(parent, {
  2394. position: 'relative'
  2395. });
  2396. }
  2397. parent.insertBefore(viewer, element.nextSibling);
  2398. } else {
  2399. addClass(button, CLASS_CLOSE);
  2400. addClass(viewer, CLASS_FIXED);
  2401. addClass(viewer, CLASS_FADE);
  2402. addClass(viewer, CLASS_HIDE);
  2403. setStyle(viewer, {
  2404. zIndex: options.zIndex
  2405. });
  2406. var container = options.container;
  2407. if (isString(container)) {
  2408. container = element.ownerDocument.querySelector(container);
  2409. }
  2410. if (!container) {
  2411. container = this.body;
  2412. }
  2413. container.appendChild(viewer);
  2414. }
  2415. if (options.inline) {
  2416. this.render();
  2417. this.bind();
  2418. this.isShown = true;
  2419. }
  2420. this.ready = true;
  2421. if (isFunction(options.ready)) {
  2422. addListener(element, EVENT_READY, options.ready, {
  2423. once: true
  2424. });
  2425. }
  2426. if (dispatchEvent(element, EVENT_READY) === false) {
  2427. this.ready = false;
  2428. return;
  2429. }
  2430. if (this.ready && options.inline) {
  2431. this.view();
  2432. }
  2433. }
  2434. /**
  2435. * Get the no conflict viewer class.
  2436. * @returns {Viewer} The viewer class.
  2437. */
  2438. }], [{
  2439. key: 'noConflict',
  2440. value: function noConflict() {
  2441. window.Viewer = AnotherViewer;
  2442. return Viewer;
  2443. }
  2444. /**
  2445. * Change the default options.
  2446. * @param {Object} options - The new default options.
  2447. */
  2448. }, {
  2449. key: 'setDefaults',
  2450. value: function setDefaults(options) {
  2451. assign(DEFAULTS, isPlainObject(options) && options);
  2452. }
  2453. }]);
  2454. return Viewer;
  2455. }();
  2456. assign(Viewer.prototype, render, events, handlers, methods, others);
  2457. if ($.fn) {
  2458. var AnotherViewer$1 = $.fn.viewer;
  2459. var NAMESPACE$1 = 'viewer';
  2460. $.fn.viewer = function jQueryViewer(option) {
  2461. for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  2462. args[_key - 1] = arguments[_key];
  2463. }
  2464. var result = void 0;
  2465. this.each(function (i, element) {
  2466. var $element = $(element);
  2467. var isDestroy = option === 'destroy';
  2468. var viewer = $element.data(NAMESPACE$1);
  2469. if (!viewer) {
  2470. if (isDestroy) {
  2471. return;
  2472. }
  2473. var options = $.extend({}, $element.data(), $.isPlainObject(option) && option);
  2474. viewer = new Viewer(element, options);
  2475. $element.data(NAMESPACE$1, viewer);
  2476. }
  2477. if (typeof option === 'string') {
  2478. var fn = viewer[option];
  2479. if ($.isFunction(fn)) {
  2480. result = fn.apply(viewer, args);
  2481. if (result === viewer) {
  2482. result = undefined;
  2483. }
  2484. if (isDestroy) {
  2485. $element.removeData(NAMESPACE$1);
  2486. }
  2487. }
  2488. }
  2489. });
  2490. return result !== undefined ? result : this;
  2491. };
  2492. $.fn.viewer.Constructor = Viewer;
  2493. $.fn.viewer.setDefaults = Viewer.setDefaults;
  2494. $.fn.viewer.noConflict = function noConflict() {
  2495. $.fn.viewer = AnotherViewer$1;
  2496. return this;
  2497. };
  2498. }
  2499. })));