draggabilly.pkgd.js 36 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502
  1. /*!
  2. * Draggabilly PACKAGED v2.2.0
  3. * Make that shiz draggable
  4. * https://draggabilly.desandro.com
  5. * MIT license
  6. */
  7. /**
  8. * Bridget makes jQuery widgets
  9. * v2.0.1
  10. * MIT license
  11. */
  12. /* jshint browser: true, strict: true, undef: true, unused: true */
  13. ( function( window, factory ) {
  14. // universal module definition
  15. /*jshint strict: false */ /* globals define, module, require */
  16. if ( typeof define == 'function' && define.amd ) {
  17. // AMD
  18. define( 'jquery-bridget/jquery-bridget',[ 'jquery' ], function( jQuery ) {
  19. return factory( window, jQuery );
  20. });
  21. } else if ( typeof module == 'object' && module.exports ) {
  22. // CommonJS
  23. module.exports = factory(
  24. window,
  25. require('jquery')
  26. );
  27. } else {
  28. // browser global
  29. window.jQueryBridget = factory(
  30. window,
  31. window.jQuery
  32. );
  33. }
  34. }( window, function factory( window, jQuery ) {
  35. 'use strict';
  36. // ----- utils ----- //
  37. var arraySlice = Array.prototype.slice;
  38. // helper function for logging errors
  39. // $.error breaks jQuery chaining
  40. var console = window.console;
  41. var logError = typeof console == 'undefined' ? function() {} :
  42. function( message ) {
  43. console.error( message );
  44. };
  45. // ----- jQueryBridget ----- //
  46. function jQueryBridget( namespace, PluginClass, $ ) {
  47. $ = $ || jQuery || window.jQuery;
  48. if ( !$ ) {
  49. return;
  50. }
  51. // add option method -> $().plugin('option', {...})
  52. if ( !PluginClass.prototype.option ) {
  53. // option setter
  54. PluginClass.prototype.option = function( opts ) {
  55. // bail out if not an object
  56. if ( !$.isPlainObject( opts ) ){
  57. return;
  58. }
  59. this.options = $.extend( true, this.options, opts );
  60. };
  61. }
  62. // make jQuery plugin
  63. $.fn[ namespace ] = function( arg0 /*, arg1 */ ) {
  64. if ( typeof arg0 == 'string' ) {
  65. // method call $().plugin( 'methodName', { options } )
  66. // shift arguments by 1
  67. var args = arraySlice.call( arguments, 1 );
  68. return methodCall( this, arg0, args );
  69. }
  70. // just $().plugin({ options })
  71. plainCall( this, arg0 );
  72. return this;
  73. };
  74. // $().plugin('methodName')
  75. function methodCall( $elems, methodName, args ) {
  76. var returnValue;
  77. var pluginMethodStr = '$().' + namespace + '("' + methodName + '")';
  78. $elems.each( function( i, elem ) {
  79. // get instance
  80. var instance = $.data( elem, namespace );
  81. if ( !instance ) {
  82. logError( namespace + ' not initialized. Cannot call methods, i.e. ' +
  83. pluginMethodStr );
  84. return;
  85. }
  86. var method = instance[ methodName ];
  87. if ( !method || methodName.charAt(0) == '_' ) {
  88. logError( pluginMethodStr + ' is not a valid method' );
  89. return;
  90. }
  91. // apply method, get return value
  92. var value = method.apply( instance, args );
  93. // set return value if value is returned, use only first value
  94. returnValue = returnValue === undefined ? value : returnValue;
  95. });
  96. return returnValue !== undefined ? returnValue : $elems;
  97. }
  98. function plainCall( $elems, options ) {
  99. $elems.each( function( i, elem ) {
  100. var instance = $.data( elem, namespace );
  101. if ( instance ) {
  102. // set options & init
  103. instance.option( options );
  104. instance._init();
  105. } else {
  106. // initialize new instance
  107. instance = new PluginClass( elem, options );
  108. $.data( elem, namespace, instance );
  109. }
  110. });
  111. }
  112. updateJQuery( $ );
  113. }
  114. // ----- updateJQuery ----- //
  115. // set $.bridget for v1 backwards compatibility
  116. function updateJQuery( $ ) {
  117. if ( !$ || ( $ && $.bridget ) ) {
  118. return;
  119. }
  120. $.bridget = jQueryBridget;
  121. }
  122. updateJQuery( jQuery || window.jQuery );
  123. // ----- ----- //
  124. return jQueryBridget;
  125. }));
  126. /*!
  127. * getSize v2.0.2
  128. * measure size of elements
  129. * MIT license
  130. */
  131. /*jshint browser: true, strict: true, undef: true, unused: true */
  132. /*global define: false, module: false, console: false */
  133. ( function( window, factory ) {
  134. 'use strict';
  135. if ( typeof define == 'function' && define.amd ) {
  136. // AMD
  137. define( 'get-size/get-size',[],function() {
  138. return factory();
  139. });
  140. } else if ( typeof module == 'object' && module.exports ) {
  141. // CommonJS
  142. module.exports = factory();
  143. } else {
  144. // browser global
  145. window.getSize = factory();
  146. }
  147. })( window, function factory() {
  148. 'use strict';
  149. // -------------------------- helpers -------------------------- //
  150. // get a number from a string, not a percentage
  151. function getStyleSize( value ) {
  152. var num = parseFloat( value );
  153. // not a percent like '100%', and a number
  154. var isValid = value.indexOf('%') == -1 && !isNaN( num );
  155. return isValid && num;
  156. }
  157. function noop() {}
  158. var logError = typeof console == 'undefined' ? noop :
  159. function( message ) {
  160. console.error( message );
  161. };
  162. // -------------------------- measurements -------------------------- //
  163. var measurements = [
  164. 'paddingLeft',
  165. 'paddingRight',
  166. 'paddingTop',
  167. 'paddingBottom',
  168. 'marginLeft',
  169. 'marginRight',
  170. 'marginTop',
  171. 'marginBottom',
  172. 'borderLeftWidth',
  173. 'borderRightWidth',
  174. 'borderTopWidth',
  175. 'borderBottomWidth'
  176. ];
  177. var measurementsLength = measurements.length;
  178. function getZeroSize() {
  179. var size = {
  180. width: 0,
  181. height: 0,
  182. innerWidth: 0,
  183. innerHeight: 0,
  184. outerWidth: 0,
  185. outerHeight: 0
  186. };
  187. for ( var i=0; i < measurementsLength; i++ ) {
  188. var measurement = measurements[i];
  189. size[ measurement ] = 0;
  190. }
  191. return size;
  192. }
  193. // -------------------------- getStyle -------------------------- //
  194. /**
  195. * getStyle, get style of element, check for Firefox bug
  196. * https://bugzilla.mozilla.org/show_bug.cgi?id=548397
  197. */
  198. function getStyle( elem ) {
  199. var style = getComputedStyle( elem );
  200. if ( !style ) {
  201. logError( 'Style returned ' + style +
  202. '. Are you running this code in a hidden iframe on Firefox? ' +
  203. 'See http://bit.ly/getsizebug1' );
  204. }
  205. return style;
  206. }
  207. // -------------------------- setup -------------------------- //
  208. var isSetup = false;
  209. var isBoxSizeOuter;
  210. /**
  211. * setup
  212. * check isBoxSizerOuter
  213. * do on first getSize() rather than on page load for Firefox bug
  214. */
  215. function setup() {
  216. // setup once
  217. if ( isSetup ) {
  218. return;
  219. }
  220. isSetup = true;
  221. // -------------------------- box sizing -------------------------- //
  222. /**
  223. * WebKit measures the outer-width on style.width on border-box elems
  224. * IE & Firefox<29 measures the inner-width
  225. */
  226. var div = document.createElement('div');
  227. div.style.width = '200px';
  228. div.style.padding = '1px 2px 3px 4px';
  229. div.style.borderStyle = 'solid';
  230. div.style.borderWidth = '1px 2px 3px 4px';
  231. div.style.boxSizing = 'border-box';
  232. var body = document.body || document.documentElement;
  233. body.appendChild( div );
  234. var style = getStyle( div );
  235. getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize( style.width ) == 200;
  236. body.removeChild( div );
  237. }
  238. // -------------------------- getSize -------------------------- //
  239. function getSize( elem ) {
  240. setup();
  241. // use querySeletor if elem is string
  242. if ( typeof elem == 'string' ) {
  243. elem = document.querySelector( elem );
  244. }
  245. // do not proceed on non-objects
  246. if ( !elem || typeof elem != 'object' || !elem.nodeType ) {
  247. return;
  248. }
  249. var style = getStyle( elem );
  250. // if hidden, everything is 0
  251. if ( style.display == 'none' ) {
  252. return getZeroSize();
  253. }
  254. var size = {};
  255. size.width = elem.offsetWidth;
  256. size.height = elem.offsetHeight;
  257. var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';
  258. // get all measurements
  259. for ( var i=0; i < measurementsLength; i++ ) {
  260. var measurement = measurements[i];
  261. var value = style[ measurement ];
  262. var num = parseFloat( value );
  263. // any 'auto', 'medium' value will be 0
  264. size[ measurement ] = !isNaN( num ) ? num : 0;
  265. }
  266. var paddingWidth = size.paddingLeft + size.paddingRight;
  267. var paddingHeight = size.paddingTop + size.paddingBottom;
  268. var marginWidth = size.marginLeft + size.marginRight;
  269. var marginHeight = size.marginTop + size.marginBottom;
  270. var borderWidth = size.borderLeftWidth + size.borderRightWidth;
  271. var borderHeight = size.borderTopWidth + size.borderBottomWidth;
  272. var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
  273. // overwrite width and height if we can get it from style
  274. var styleWidth = getStyleSize( style.width );
  275. if ( styleWidth !== false ) {
  276. size.width = styleWidth +
  277. // add padding and border unless it's already including it
  278. ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth );
  279. }
  280. var styleHeight = getStyleSize( style.height );
  281. if ( styleHeight !== false ) {
  282. size.height = styleHeight +
  283. // add padding and border unless it's already including it
  284. ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight );
  285. }
  286. size.innerWidth = size.width - ( paddingWidth + borderWidth );
  287. size.innerHeight = size.height - ( paddingHeight + borderHeight );
  288. size.outerWidth = size.width + marginWidth;
  289. size.outerHeight = size.height + marginHeight;
  290. return size;
  291. }
  292. return getSize;
  293. });
  294. /**
  295. * EvEmitter v1.1.0
  296. * Lil' event emitter
  297. * MIT License
  298. */
  299. /* jshint unused: true, undef: true, strict: true */
  300. ( function( global, factory ) {
  301. // universal module definition
  302. /* jshint strict: false */ /* globals define, module, window */
  303. if ( typeof define == 'function' && define.amd ) {
  304. // AMD - RequireJS
  305. define( 'ev-emitter/ev-emitter',factory );
  306. } else if ( typeof module == 'object' && module.exports ) {
  307. // CommonJS - Browserify, Webpack
  308. module.exports = factory();
  309. } else {
  310. // Browser globals
  311. global.EvEmitter = factory();
  312. }
  313. }( typeof window != 'undefined' ? window : this, function() {
  314. function EvEmitter() {}
  315. var proto = EvEmitter.prototype;
  316. proto.on = function( eventName, listener ) {
  317. if ( !eventName || !listener ) {
  318. return;
  319. }
  320. // set events hash
  321. var events = this._events = this._events || {};
  322. // set listeners array
  323. var listeners = events[ eventName ] = events[ eventName ] || [];
  324. // only add once
  325. if ( listeners.indexOf( listener ) == -1 ) {
  326. listeners.push( listener );
  327. }
  328. return this;
  329. };
  330. proto.once = function( eventName, listener ) {
  331. if ( !eventName || !listener ) {
  332. return;
  333. }
  334. // add event
  335. this.on( eventName, listener );
  336. // set once flag
  337. // set onceEvents hash
  338. var onceEvents = this._onceEvents = this._onceEvents || {};
  339. // set onceListeners object
  340. var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
  341. // set flag
  342. onceListeners[ listener ] = true;
  343. return this;
  344. };
  345. proto.off = function( eventName, listener ) {
  346. var listeners = this._events && this._events[ eventName ];
  347. if ( !listeners || !listeners.length ) {
  348. return;
  349. }
  350. var index = listeners.indexOf( listener );
  351. if ( index != -1 ) {
  352. listeners.splice( index, 1 );
  353. }
  354. return this;
  355. };
  356. proto.emitEvent = function( eventName, args ) {
  357. var listeners = this._events && this._events[ eventName ];
  358. if ( !listeners || !listeners.length ) {
  359. return;
  360. }
  361. // copy over to avoid interference if .off() in listener
  362. listeners = listeners.slice(0);
  363. args = args || [];
  364. // once stuff
  365. var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
  366. for ( var i=0; i < listeners.length; i++ ) {
  367. var listener = listeners[i]
  368. var isOnce = onceListeners && onceListeners[ listener ];
  369. if ( isOnce ) {
  370. // remove listener
  371. // remove before trigger to prevent recursion
  372. this.off( eventName, listener );
  373. // unset once flag
  374. delete onceListeners[ listener ];
  375. }
  376. // trigger listener
  377. listener.apply( this, args );
  378. }
  379. return this;
  380. };
  381. proto.allOff = function() {
  382. delete this._events;
  383. delete this._onceEvents;
  384. };
  385. return EvEmitter;
  386. }));
  387. /*!
  388. * Unipointer v2.3.0
  389. * base class for doing one thing with pointer event
  390. * MIT license
  391. */
  392. /*jshint browser: true, undef: true, unused: true, strict: true */
  393. ( function( window, factory ) {
  394. // universal module definition
  395. /* jshint strict: false */ /*global define, module, require */
  396. if ( typeof define == 'function' && define.amd ) {
  397. // AMD
  398. define( 'unipointer/unipointer',[
  399. 'ev-emitter/ev-emitter'
  400. ], function( EvEmitter ) {
  401. return factory( window, EvEmitter );
  402. });
  403. } else if ( typeof module == 'object' && module.exports ) {
  404. // CommonJS
  405. module.exports = factory(
  406. window,
  407. require('ev-emitter')
  408. );
  409. } else {
  410. // browser global
  411. window.Unipointer = factory(
  412. window,
  413. window.EvEmitter
  414. );
  415. }
  416. }( window, function factory( window, EvEmitter ) {
  417. function noop() {}
  418. function Unipointer() {}
  419. // inherit EvEmitter
  420. var proto = Unipointer.prototype = Object.create( EvEmitter.prototype );
  421. proto.bindStartEvent = function( elem ) {
  422. this._bindStartEvent( elem, true );
  423. };
  424. proto.unbindStartEvent = function( elem ) {
  425. this._bindStartEvent( elem, false );
  426. };
  427. /**
  428. * Add or remove start event
  429. * @param {Boolean} isAdd - remove if falsey
  430. */
  431. proto._bindStartEvent = function( elem, isAdd ) {
  432. // munge isAdd, default to true
  433. isAdd = isAdd === undefined ? true : isAdd;
  434. var bindMethod = isAdd ? 'addEventListener' : 'removeEventListener';
  435. // default to mouse events
  436. var startEvent = 'mousedown';
  437. if ( window.PointerEvent ) {
  438. // Pointer Events
  439. startEvent = 'pointerdown';
  440. } else if ( 'ontouchstart' in window ) {
  441. // Touch Events. iOS Safari
  442. startEvent = 'touchstart';
  443. }
  444. elem[ bindMethod ]( startEvent, this );
  445. };
  446. // trigger handler methods for events
  447. proto.handleEvent = function( event ) {
  448. var method = 'on' + event.type;
  449. if ( this[ method ] ) {
  450. this[ method ]( event );
  451. }
  452. };
  453. // returns the touch that we're keeping track of
  454. proto.getTouch = function( touches ) {
  455. for ( var i=0; i < touches.length; i++ ) {
  456. var touch = touches[i];
  457. if ( touch.identifier == this.pointerIdentifier ) {
  458. return touch;
  459. }
  460. }
  461. };
  462. // ----- start event ----- //
  463. proto.onmousedown = function( event ) {
  464. // dismiss clicks from right or middle buttons
  465. var button = event.button;
  466. if ( button && ( button !== 0 && button !== 1 ) ) {
  467. return;
  468. }
  469. this._pointerDown( event, event );
  470. };
  471. proto.ontouchstart = function( event ) {
  472. this._pointerDown( event, event.changedTouches[0] );
  473. };
  474. proto.onpointerdown = function( event ) {
  475. this._pointerDown( event, event );
  476. };
  477. /**
  478. * pointer start
  479. * @param {Event} event
  480. * @param {Event or Touch} pointer
  481. */
  482. proto._pointerDown = function( event, pointer ) {
  483. // dismiss right click and other pointers
  484. // button = 0 is okay, 1-4 not
  485. if ( event.button || this.isPointerDown ) {
  486. return;
  487. }
  488. this.isPointerDown = true;
  489. // save pointer identifier to match up touch events
  490. this.pointerIdentifier = pointer.pointerId !== undefined ?
  491. // pointerId for pointer events, touch.indentifier for touch events
  492. pointer.pointerId : pointer.identifier;
  493. this.pointerDown( event, pointer );
  494. };
  495. proto.pointerDown = function( event, pointer ) {
  496. this._bindPostStartEvents( event );
  497. this.emitEvent( 'pointerDown', [ event, pointer ] );
  498. };
  499. // hash of events to be bound after start event
  500. var postStartEvents = {
  501. mousedown: [ 'mousemove', 'mouseup' ],
  502. touchstart: [ 'touchmove', 'touchend', 'touchcancel' ],
  503. pointerdown: [ 'pointermove', 'pointerup', 'pointercancel' ],
  504. };
  505. proto._bindPostStartEvents = function( event ) {
  506. if ( !event ) {
  507. return;
  508. }
  509. // get proper events to match start event
  510. var events = postStartEvents[ event.type ];
  511. // bind events to node
  512. events.forEach( function( eventName ) {
  513. window.addEventListener( eventName, this );
  514. }, this );
  515. // save these arguments
  516. this._boundPointerEvents = events;
  517. };
  518. proto._unbindPostStartEvents = function() {
  519. // check for _boundEvents, in case dragEnd triggered twice (old IE8 bug)
  520. if ( !this._boundPointerEvents ) {
  521. return;
  522. }
  523. this._boundPointerEvents.forEach( function( eventName ) {
  524. window.removeEventListener( eventName, this );
  525. }, this );
  526. delete this._boundPointerEvents;
  527. };
  528. // ----- move event ----- //
  529. proto.onmousemove = function( event ) {
  530. this._pointerMove( event, event );
  531. };
  532. proto.onpointermove = function( event ) {
  533. if ( event.pointerId == this.pointerIdentifier ) {
  534. this._pointerMove( event, event );
  535. }
  536. };
  537. proto.ontouchmove = function( event ) {
  538. var touch = this.getTouch( event.changedTouches );
  539. if ( touch ) {
  540. this._pointerMove( event, touch );
  541. }
  542. };
  543. /**
  544. * pointer move
  545. * @param {Event} event
  546. * @param {Event or Touch} pointer
  547. * @private
  548. */
  549. proto._pointerMove = function( event, pointer ) {
  550. this.pointerMove( event, pointer );
  551. };
  552. // public
  553. proto.pointerMove = function( event, pointer ) {
  554. this.emitEvent( 'pointerMove', [ event, pointer ] );
  555. };
  556. // ----- end event ----- //
  557. proto.onmouseup = function( event ) {
  558. this._pointerUp( event, event );
  559. };
  560. proto.onpointerup = function( event ) {
  561. if ( event.pointerId == this.pointerIdentifier ) {
  562. this._pointerUp( event, event );
  563. }
  564. };
  565. proto.ontouchend = function( event ) {
  566. var touch = this.getTouch( event.changedTouches );
  567. if ( touch ) {
  568. this._pointerUp( event, touch );
  569. }
  570. };
  571. /**
  572. * pointer up
  573. * @param {Event} event
  574. * @param {Event or Touch} pointer
  575. * @private
  576. */
  577. proto._pointerUp = function( event, pointer ) {
  578. this._pointerDone();
  579. this.pointerUp( event, pointer );
  580. };
  581. // public
  582. proto.pointerUp = function( event, pointer ) {
  583. this.emitEvent( 'pointerUp', [ event, pointer ] );
  584. };
  585. // ----- pointer done ----- //
  586. // triggered on pointer up & pointer cancel
  587. proto._pointerDone = function() {
  588. this._pointerReset();
  589. this._unbindPostStartEvents();
  590. this.pointerDone();
  591. };
  592. proto._pointerReset = function() {
  593. // reset properties
  594. this.isPointerDown = false;
  595. delete this.pointerIdentifier;
  596. };
  597. proto.pointerDone = noop;
  598. // ----- pointer cancel ----- //
  599. proto.onpointercancel = function( event ) {
  600. if ( event.pointerId == this.pointerIdentifier ) {
  601. this._pointerCancel( event, event );
  602. }
  603. };
  604. proto.ontouchcancel = function( event ) {
  605. var touch = this.getTouch( event.changedTouches );
  606. if ( touch ) {
  607. this._pointerCancel( event, touch );
  608. }
  609. };
  610. /**
  611. * pointer cancel
  612. * @param {Event} event
  613. * @param {Event or Touch} pointer
  614. * @private
  615. */
  616. proto._pointerCancel = function( event, pointer ) {
  617. this._pointerDone();
  618. this.pointerCancel( event, pointer );
  619. };
  620. // public
  621. proto.pointerCancel = function( event, pointer ) {
  622. this.emitEvent( 'pointerCancel', [ event, pointer ] );
  623. };
  624. // ----- ----- //
  625. // utility function for getting x/y coords from event
  626. Unipointer.getPointerPoint = function( pointer ) {
  627. return {
  628. x: pointer.pageX,
  629. y: pointer.pageY
  630. };
  631. };
  632. // ----- ----- //
  633. return Unipointer;
  634. }));
  635. /*!
  636. * Unidragger v2.3.0
  637. * Draggable base class
  638. * MIT license
  639. */
  640. /*jshint browser: true, unused: true, undef: true, strict: true */
  641. ( function( window, factory ) {
  642. // universal module definition
  643. /*jshint strict: false */ /*globals define, module, require */
  644. if ( typeof define == 'function' && define.amd ) {
  645. // AMD
  646. define( 'unidragger/unidragger',[
  647. 'unipointer/unipointer'
  648. ], function( Unipointer ) {
  649. return factory( window, Unipointer );
  650. });
  651. } else if ( typeof module == 'object' && module.exports ) {
  652. // CommonJS
  653. module.exports = factory(
  654. window,
  655. require('unipointer')
  656. );
  657. } else {
  658. // browser global
  659. window.Unidragger = factory(
  660. window,
  661. window.Unipointer
  662. );
  663. }
  664. }( window, function factory( window, Unipointer ) {
  665. // -------------------------- Unidragger -------------------------- //
  666. function Unidragger() {}
  667. // inherit Unipointer & EvEmitter
  668. var proto = Unidragger.prototype = Object.create( Unipointer.prototype );
  669. // ----- bind start ----- //
  670. proto.bindHandles = function() {
  671. this._bindHandles( true );
  672. };
  673. proto.unbindHandles = function() {
  674. this._bindHandles( false );
  675. };
  676. /**
  677. * Add or remove start event
  678. * @param {Boolean} isAdd
  679. */
  680. proto._bindHandles = function( isAdd ) {
  681. // munge isAdd, default to true
  682. isAdd = isAdd === undefined ? true : isAdd;
  683. // bind each handle
  684. var bindMethod = isAdd ? 'addEventListener' : 'removeEventListener';
  685. var touchAction = isAdd ? this._touchActionValue : '';
  686. for ( var i=0; i < this.handles.length; i++ ) {
  687. var handle = this.handles[i];
  688. this._bindStartEvent( handle, isAdd );
  689. handle[ bindMethod ]( 'click', this );
  690. // touch-action: none to override browser touch gestures. metafizzy/flickity#540
  691. if ( window.PointerEvent ) {
  692. handle.style.touchAction = touchAction;
  693. }
  694. }
  695. };
  696. // prototype so it can be overwriteable by Flickity
  697. proto._touchActionValue = 'none';
  698. // ----- start event ----- //
  699. /**
  700. * pointer start
  701. * @param {Event} event
  702. * @param {Event or Touch} pointer
  703. */
  704. proto.pointerDown = function( event, pointer ) {
  705. var isOkay = this.okayPointerDown( event );
  706. if ( !isOkay ) {
  707. return;
  708. }
  709. // track start event position
  710. this.pointerDownPointer = pointer;
  711. event.preventDefault();
  712. this.pointerDownBlur();
  713. // bind move and end events
  714. this._bindPostStartEvents( event );
  715. this.emitEvent( 'pointerDown', [ event, pointer ] );
  716. };
  717. // nodes that have text fields
  718. var cursorNodes = {
  719. TEXTAREA: true,
  720. INPUT: true,
  721. SELECT: true,
  722. OPTION: true,
  723. };
  724. // input types that do not have text fields
  725. var clickTypes = {
  726. radio: true,
  727. checkbox: true,
  728. button: true,
  729. submit: true,
  730. image: true,
  731. file: true,
  732. };
  733. // dismiss inputs with text fields. flickity#403, flickity#404
  734. proto.okayPointerDown = function( event ) {
  735. var isCursorNode = cursorNodes[ event.target.nodeName ];
  736. var isClickType = clickTypes[ event.target.type ];
  737. var isOkay = !isCursorNode || isClickType;
  738. if ( !isOkay ) {
  739. this._pointerReset();
  740. }
  741. return isOkay;
  742. };
  743. // kludge to blur previously focused input
  744. proto.pointerDownBlur = function() {
  745. var focused = document.activeElement;
  746. // do not blur body for IE10, metafizzy/flickity#117
  747. var canBlur = focused && focused.blur && focused != document.body;
  748. if ( canBlur ) {
  749. focused.blur();
  750. }
  751. };
  752. // ----- move event ----- //
  753. /**
  754. * drag move
  755. * @param {Event} event
  756. * @param {Event or Touch} pointer
  757. */
  758. proto.pointerMove = function( event, pointer ) {
  759. var moveVector = this._dragPointerMove( event, pointer );
  760. this.emitEvent( 'pointerMove', [ event, pointer, moveVector ] );
  761. this._dragMove( event, pointer, moveVector );
  762. };
  763. // base pointer move logic
  764. proto._dragPointerMove = function( event, pointer ) {
  765. var moveVector = {
  766. x: pointer.pageX - this.pointerDownPointer.pageX,
  767. y: pointer.pageY - this.pointerDownPointer.pageY
  768. };
  769. // start drag if pointer has moved far enough to start drag
  770. if ( !this.isDragging && this.hasDragStarted( moveVector ) ) {
  771. this._dragStart( event, pointer );
  772. }
  773. return moveVector;
  774. };
  775. // condition if pointer has moved far enough to start drag
  776. proto.hasDragStarted = function( moveVector ) {
  777. return Math.abs( moveVector.x ) > 3 || Math.abs( moveVector.y ) > 3;
  778. };
  779. // ----- end event ----- //
  780. /**
  781. * pointer up
  782. * @param {Event} event
  783. * @param {Event or Touch} pointer
  784. */
  785. proto.pointerUp = function( event, pointer ) {
  786. this.emitEvent( 'pointerUp', [ event, pointer ] );
  787. this._dragPointerUp( event, pointer );
  788. };
  789. proto._dragPointerUp = function( event, pointer ) {
  790. if ( this.isDragging ) {
  791. this._dragEnd( event, pointer );
  792. } else {
  793. // pointer didn't move enough for drag to start
  794. this._staticClick( event, pointer );
  795. }
  796. };
  797. // -------------------------- drag -------------------------- //
  798. // dragStart
  799. proto._dragStart = function( event, pointer ) {
  800. this.isDragging = true;
  801. // prevent clicks
  802. this.isPreventingClicks = true;
  803. this.dragStart( event, pointer );
  804. };
  805. proto.dragStart = function( event, pointer ) {
  806. this.emitEvent( 'dragStart', [ event, pointer ] );
  807. };
  808. // dragMove
  809. proto._dragMove = function( event, pointer, moveVector ) {
  810. // do not drag if not dragging yet
  811. if ( !this.isDragging ) {
  812. return;
  813. }
  814. this.dragMove( event, pointer, moveVector );
  815. };
  816. proto.dragMove = function( event, pointer, moveVector ) {
  817. event.preventDefault();
  818. this.emitEvent( 'dragMove', [ event, pointer, moveVector ] );
  819. };
  820. // dragEnd
  821. proto._dragEnd = function( event, pointer ) {
  822. // set flags
  823. this.isDragging = false;
  824. // re-enable clicking async
  825. setTimeout( function() {
  826. delete this.isPreventingClicks;
  827. }.bind( this ) );
  828. this.dragEnd( event, pointer );
  829. };
  830. proto.dragEnd = function( event, pointer ) {
  831. this.emitEvent( 'dragEnd', [ event, pointer ] );
  832. };
  833. // ----- onclick ----- //
  834. // handle all clicks and prevent clicks when dragging
  835. proto.onclick = function( event ) {
  836. if ( this.isPreventingClicks ) {
  837. event.preventDefault();
  838. }
  839. };
  840. // ----- staticClick ----- //
  841. // triggered after pointer down & up with no/tiny movement
  842. proto._staticClick = function( event, pointer ) {
  843. // ignore emulated mouse up clicks
  844. if ( this.isIgnoringMouseUp && event.type == 'mouseup' ) {
  845. return;
  846. }
  847. this.staticClick( event, pointer );
  848. // set flag for emulated clicks 300ms after touchend
  849. if ( event.type != 'mouseup' ) {
  850. this.isIgnoringMouseUp = true;
  851. // reset flag after 300ms
  852. setTimeout( function() {
  853. delete this.isIgnoringMouseUp;
  854. }.bind( this ), 400 );
  855. }
  856. };
  857. proto.staticClick = function( event, pointer ) {
  858. this.emitEvent( 'staticClick', [ event, pointer ] );
  859. };
  860. // ----- utils ----- //
  861. Unidragger.getPointerPoint = Unipointer.getPointerPoint;
  862. // ----- ----- //
  863. return Unidragger;
  864. }));
  865. /*!
  866. * Draggabilly v2.2.0
  867. * Make that shiz draggable
  868. * https://draggabilly.desandro.com
  869. * MIT license
  870. */
  871. /*jshint browser: true, strict: true, undef: true, unused: true */
  872. ( function( window, factory ) {
  873. // universal module definition
  874. /* jshint strict: false */ /*globals define, module, require */
  875. if ( typeof define == 'function' && define.amd ) {
  876. // AMD
  877. define( [
  878. 'get-size/get-size',
  879. 'unidragger/unidragger'
  880. ],
  881. function( getSize, Unidragger ) {
  882. return factory( window, getSize, Unidragger );
  883. });
  884. } else if ( typeof module == 'object' && module.exports ) {
  885. // CommonJS
  886. module.exports = factory(
  887. window,
  888. require('get-size'),
  889. require('unidragger')
  890. );
  891. } else {
  892. // browser global
  893. window.Draggabilly = factory(
  894. window,
  895. window.getSize,
  896. window.Unidragger
  897. );
  898. }
  899. }( window, function factory( window, getSize, Unidragger ) {
  900. // -------------------------- helpers & variables -------------------------- //
  901. // extend objects
  902. function extend( a, b ) {
  903. for ( var prop in b ) {
  904. a[ prop ] = b[ prop ];
  905. }
  906. return a;
  907. }
  908. function noop() {}
  909. var jQuery = window.jQuery;
  910. // -------------------------- -------------------------- //
  911. function Draggabilly( element, options ) {
  912. // querySelector if string
  913. this.element = typeof element == 'string' ?
  914. document.querySelector( element ) : element;
  915. if ( jQuery ) {
  916. this.$element = jQuery( this.element );
  917. }
  918. // options
  919. this.options = extend( {}, this.constructor.defaults );
  920. this.option( options );
  921. this._create();
  922. }
  923. // inherit Unidragger methods
  924. var proto = Draggabilly.prototype = Object.create( Unidragger.prototype );
  925. Draggabilly.defaults = {
  926. };
  927. /**
  928. * set options
  929. * @param {Object} opts
  930. */
  931. proto.option = function( opts ) {
  932. extend( this.options, opts );
  933. };
  934. // css position values that don't need to be set
  935. var positionValues = {
  936. relative: true,
  937. absolute: true,
  938. fixed: true
  939. };
  940. proto._create = function() {
  941. // properties
  942. this.position = {};
  943. this._getPosition();
  944. this.startPoint = { x: 0, y: 0 };
  945. this.dragPoint = { x: 0, y: 0 };
  946. this.startPosition = extend( {}, this.position );
  947. // set relative positioning
  948. var style = getComputedStyle( this.element );
  949. if ( !positionValues[ style.position ] ) {
  950. this.element.style.position = 'relative';
  951. }
  952. // events, bridge jQuery events from vanilla
  953. this.on( 'pointerDown', this.onPointerDown );
  954. this.on( 'pointerMove', this.onPointerMove );
  955. this.on( 'pointerUp', this.onPointerUp );
  956. this.enable();
  957. this.setHandles();
  958. };
  959. /**
  960. * set this.handles and bind start events to 'em
  961. */
  962. proto.setHandles = function() {
  963. this.handles = this.options.handle ?
  964. this.element.querySelectorAll( this.options.handle ) : [ this.element ];
  965. this.bindHandles();
  966. };
  967. /**
  968. * emits events via EvEmitter and jQuery events
  969. * @param {String} type - name of event
  970. * @param {Event} event - original event
  971. * @param {Array} args - extra arguments
  972. */
  973. proto.dispatchEvent = function( type, event, args ) {
  974. var emitArgs = [ event ].concat( args );
  975. this.emitEvent( type, emitArgs );
  976. this.dispatchJQueryEvent( type, event, args );
  977. };
  978. proto.dispatchJQueryEvent = function( type, event, args ) {
  979. var jQuery = window.jQuery;
  980. // trigger jQuery event
  981. if ( !jQuery || !this.$element ) {
  982. return;
  983. }
  984. // create jQuery event
  985. var $event = jQuery.Event( event );
  986. $event.type = type;
  987. this.$element.trigger( $event, args );
  988. };
  989. // -------------------------- position -------------------------- //
  990. // get x/y position from style
  991. proto._getPosition = function() {
  992. var style = getComputedStyle( this.element );
  993. var x = this._getPositionCoord( style.left, 'width' );
  994. var y = this._getPositionCoord( style.top, 'height' );
  995. // clean up 'auto' or other non-integer values
  996. this.position.x = isNaN( x ) ? 0 : x;
  997. this.position.y = isNaN( y ) ? 0 : y;
  998. this._addTransformPosition( style );
  999. };
  1000. proto._getPositionCoord = function( styleSide, measure ) {
  1001. if ( styleSide.indexOf('%') != -1 ) {
  1002. // convert percent into pixel for Safari, #75
  1003. var parentSize = getSize( this.element.parentNode );
  1004. // prevent not-in-DOM element throwing bug, #131
  1005. return !parentSize ? 0 :
  1006. ( parseFloat( styleSide ) / 100 ) * parentSize[ measure ];
  1007. }
  1008. return parseInt( styleSide, 10 );
  1009. };
  1010. // add transform: translate( x, y ) to position
  1011. proto._addTransformPosition = function( style ) {
  1012. var transform = style.transform;
  1013. // bail out if value is 'none'
  1014. if ( transform.indexOf('matrix') !== 0 ) {
  1015. return;
  1016. }
  1017. // split matrix(1, 0, 0, 1, x, y)
  1018. var matrixValues = transform.split(',');
  1019. // translate X value is in 12th or 4th position
  1020. var xIndex = transform.indexOf('matrix3d') === 0 ? 12 : 4;
  1021. var translateX = parseInt( matrixValues[ xIndex ], 10 );
  1022. // translate Y value is in 13th or 5th position
  1023. var translateY = parseInt( matrixValues[ xIndex + 1 ], 10 );
  1024. this.position.x += translateX;
  1025. this.position.y += translateY;
  1026. };
  1027. // -------------------------- events -------------------------- //
  1028. proto.onPointerDown = function( event, pointer ) {
  1029. this.element.classList.add('is-pointer-down');
  1030. this.dispatchJQueryEvent( 'pointerDown', event, [ pointer ] );
  1031. };
  1032. /**
  1033. * drag start
  1034. * @param {Event} event
  1035. * @param {Event or Touch} pointer
  1036. */
  1037. proto.dragStart = function( event, pointer ) {
  1038. if ( !this.isEnabled ) {
  1039. return;
  1040. }
  1041. this._getPosition();
  1042. this.measureContainment();
  1043. // position _when_ drag began
  1044. this.startPosition.x = this.position.x;
  1045. this.startPosition.y = this.position.y;
  1046. // reset left/top style
  1047. this.setLeftTop();
  1048. this.dragPoint.x = 0;
  1049. this.dragPoint.y = 0;
  1050. this.element.classList.add('is-dragging');
  1051. this.dispatchEvent( 'dragStart', event, [ pointer ] );
  1052. // start animation
  1053. this.animate();
  1054. };
  1055. proto.measureContainment = function() {
  1056. var container = this.getContainer();
  1057. if ( !container ) {
  1058. return;
  1059. }
  1060. var elemSize = getSize( this.element );
  1061. var containerSize = getSize( container );
  1062. var elemRect = this.element.getBoundingClientRect();
  1063. var containerRect = container.getBoundingClientRect();
  1064. var borderSizeX = containerSize.borderLeftWidth + containerSize.borderRightWidth;
  1065. var borderSizeY = containerSize.borderTopWidth + containerSize.borderBottomWidth;
  1066. var position = this.relativeStartPosition = {
  1067. x: elemRect.left - ( containerRect.left + containerSize.borderLeftWidth ),
  1068. y: elemRect.top - ( containerRect.top + containerSize.borderTopWidth )
  1069. };
  1070. this.containSize = {
  1071. width: ( containerSize.width - borderSizeX ) - position.x - elemSize.width,
  1072. height: ( containerSize.height - borderSizeY ) - position.y - elemSize.height
  1073. };
  1074. };
  1075. proto.getContainer = function() {
  1076. var containment = this.options.containment;
  1077. if ( !containment ) {
  1078. return;
  1079. }
  1080. var isElement = containment instanceof HTMLElement;
  1081. // use as element
  1082. if ( isElement ) {
  1083. return containment;
  1084. }
  1085. // querySelector if string
  1086. if ( typeof containment == 'string' ) {
  1087. return document.querySelector( containment );
  1088. }
  1089. // fallback to parent element
  1090. return this.element.parentNode;
  1091. };
  1092. // ----- move event ----- //
  1093. proto.onPointerMove = function( event, pointer, moveVector ) {
  1094. this.dispatchJQueryEvent( 'pointerMove', event, [ pointer, moveVector ] );
  1095. };
  1096. /**
  1097. * drag move
  1098. * @param {Event} event
  1099. * @param {Event or Touch} pointer
  1100. */
  1101. proto.dragMove = function( event, pointer, moveVector ) {
  1102. if ( !this.isEnabled ) {
  1103. return;
  1104. }
  1105. var dragX = moveVector.x;
  1106. var dragY = moveVector.y;
  1107. var grid = this.options.grid;
  1108. var gridX = grid && grid[0];
  1109. var gridY = grid && grid[1];
  1110. dragX = applyGrid( dragX, gridX );
  1111. dragY = applyGrid( dragY, gridY );
  1112. dragX = this.containDrag( 'x', dragX, gridX );
  1113. dragY = this.containDrag( 'y', dragY, gridY );
  1114. // constrain to axis
  1115. dragX = this.options.axis == 'y' ? 0 : dragX;
  1116. dragY = this.options.axis == 'x' ? 0 : dragY;
  1117. this.position.x = this.startPosition.x + dragX;
  1118. this.position.y = this.startPosition.y + dragY;
  1119. // set dragPoint properties
  1120. this.dragPoint.x = dragX;
  1121. this.dragPoint.y = dragY;
  1122. this.dispatchEvent( 'dragMove', event, [ pointer, moveVector ] );
  1123. };
  1124. function applyGrid( value, grid, method ) {
  1125. method = method || 'round';
  1126. return grid ? Math[ method ]( value / grid ) * grid : value;
  1127. }
  1128. proto.containDrag = function( axis, drag, grid ) {
  1129. if ( !this.options.containment ) {
  1130. return drag;
  1131. }
  1132. var measure = axis == 'x' ? 'width' : 'height';
  1133. var rel = this.relativeStartPosition[ axis ];
  1134. var min = applyGrid( -rel, grid, 'ceil' );
  1135. var max = this.containSize[ measure ];
  1136. max = applyGrid( max, grid, 'floor' );
  1137. return Math.max( min, Math.min( max, drag ) );
  1138. };
  1139. // ----- end event ----- //
  1140. /**
  1141. * pointer up
  1142. * @param {Event} event
  1143. * @param {Event or Touch} pointer
  1144. */
  1145. proto.onPointerUp = function( event, pointer ) {
  1146. this.element.classList.remove('is-pointer-down');
  1147. this.dispatchJQueryEvent( 'pointerUp', event, [ pointer ] );
  1148. };
  1149. /**
  1150. * drag end
  1151. * @param {Event} event
  1152. * @param {Event or Touch} pointer
  1153. */
  1154. proto.dragEnd = function( event, pointer ) {
  1155. if ( !this.isEnabled ) {
  1156. return;
  1157. }
  1158. // use top left position when complete
  1159. this.element.style.transform = '';
  1160. this.setLeftTop();
  1161. this.element.classList.remove('is-dragging');
  1162. this.dispatchEvent( 'dragEnd', event, [ pointer ] );
  1163. };
  1164. // -------------------------- animation -------------------------- //
  1165. proto.animate = function() {
  1166. // only render and animate if dragging
  1167. if ( !this.isDragging ) {
  1168. return;
  1169. }
  1170. this.positionDrag();
  1171. var _this = this;
  1172. requestAnimationFrame( function animateFrame() {
  1173. _this.animate();
  1174. });
  1175. };
  1176. // left/top positioning
  1177. proto.setLeftTop = function() {
  1178. this.element.style.left = this.position.x + 'px';
  1179. this.element.style.top = this.position.y + 'px';
  1180. };
  1181. proto.positionDrag = function() {
  1182. this.element.style.transform = 'translate3d( ' + this.dragPoint.x +
  1183. 'px, ' + this.dragPoint.y + 'px, 0)';
  1184. };
  1185. // ----- staticClick ----- //
  1186. proto.staticClick = function( event, pointer ) {
  1187. this.dispatchEvent( 'staticClick', event, [ pointer ] );
  1188. };
  1189. // ----- methods ----- //
  1190. /**
  1191. * @param {Number} x
  1192. * @param {Number} y
  1193. */
  1194. proto.setPosition = function( x, y ) {
  1195. this.position.x = x;
  1196. this.position.y = y;
  1197. this.setLeftTop();
  1198. };
  1199. proto.enable = function() {
  1200. this.isEnabled = true;
  1201. };
  1202. proto.disable = function() {
  1203. this.isEnabled = false;
  1204. if ( this.isDragging ) {
  1205. this.dragEnd();
  1206. }
  1207. };
  1208. proto.destroy = function() {
  1209. this.disable();
  1210. // reset styles
  1211. this.element.style.transform = '';
  1212. this.element.style.left = '';
  1213. this.element.style.top = '';
  1214. this.element.style.position = '';
  1215. // unbind handles
  1216. this.unbindHandles();
  1217. // remove jQuery data
  1218. if ( this.$element ) {
  1219. this.$element.removeData('draggabilly');
  1220. }
  1221. };
  1222. // ----- jQuery bridget ----- //
  1223. // required for jQuery bridget
  1224. proto._init = noop;
  1225. if ( jQuery && jQuery.bridget ) {
  1226. jQuery.bridget( 'draggabilly', Draggabilly );
  1227. }
  1228. // ----- ----- //
  1229. return Draggabilly;
  1230. }));