From d605cb0bfec4c7e9ed8d8e598cd314d96338b407 Mon Sep 17 00:00:00 2001 From: Zack Bloom Date: Tue, 7 Jul 2015 16:12:20 -0400 Subject: [PATCH] Fix bug where transitionend class is removed too early --- bower.json | 2 +- dist/js/drop.js | 38 +++++++++++++++++++++----------------- dist/js/drop.min.js | 2 +- package.json | 2 +- src/js/drop.js | 6 +++++- 5 files changed, 29 insertions(+), 21 deletions(-) diff --git a/bower.json b/bower.json index 92e25cb..1a57f3f 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "tether-drop", - "version": "1.2.1", + "version": "1.2.2", "homepage": "https://github.com/HubSpot/drop", "authors": [ "Adam Schwartz ", diff --git a/dist/js/drop.js b/dist/js/drop.js index ad43b64..d9ef4ee 100644 --- a/dist/js/drop.js +++ b/dist/js/drop.js @@ -1,4 +1,4 @@ -/*! tether-drop 1.2.1 */ +/*! tether-drop 1.2.2 */ (function(root, factory) { if (typeof define === 'function' && define.amd) { @@ -14,13 +14,13 @@ 'use strict'; -var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); +var _bind = Function.prototype.bind; -var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; desc = parent = getter = undefined; _again = false; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; +var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })(); -var _bind = Function.prototype.bind; +var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); -function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } } +var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } @@ -147,9 +147,9 @@ function createContext() { } if (anyOpen) { - addClass(document.body, '' + drop.classPrefix + '-open'); + addClass(document.body, drop.classPrefix + '-open'); } else { - removeClass(document.body, '' + drop.classPrefix + '-open'); + removeClass(document.body, drop.classPrefix + '-open'); } }; @@ -205,7 +205,7 @@ function createContext() { } this.content = document.createElement('div'); - addClass(this.content, '' + drop.classPrefix + '-content'); + addClass(this.content, drop.classPrefix + '-content'); if (typeof this.options.content === 'function') { var generateAndSetContent = function generateAndSetContent() { @@ -369,7 +369,7 @@ function createContext() { key: 'isOpened', value: function isOpened() { if (this.drop) { - return hasClass(this.drop, '' + drop.classPrefix + '-open'); + return hasClass(this.drop, drop.classPrefix + '-open'); } } }, { @@ -398,12 +398,12 @@ function createContext() { this.tether.enable(); } - addClass(this.drop, '' + drop.classPrefix + '-open'); - addClass(this.drop, '' + drop.classPrefix + '-open-transitionend'); + addClass(this.drop, drop.classPrefix + '-open'); + addClass(this.drop, drop.classPrefix + '-open-transitionend'); setTimeout(function () { if (_this3.drop) { - addClass(_this3.drop, '' + drop.classPrefix + '-after-open'); + addClass(_this3.drop, drop.classPrefix + '-after-open'); } }); @@ -417,9 +417,13 @@ function createContext() { } }, { key: '_transitionEndHandler', - value: function _transitionEndHandler() { - if (!hasClass(this.drop, '' + drop.classPrefix + '-open')) { - removeClass(this.drop, '' + drop.classPrefix + '-open-transitionend'); + value: function _transitionEndHandler(e) { + if (e.target !== e.currentTarget) { + return; + } + + if (!hasClass(this.drop, drop.classPrefix + '-open')) { + removeClass(this.drop, drop.classPrefix + '-open-transitionend'); } this.drop.removeEventListener(transitionEndEvent, this.transitionEndHandler); } @@ -448,8 +452,8 @@ function createContext() { return; } - removeClass(this.drop, '' + drop.classPrefix + '-open'); - removeClass(this.drop, '' + drop.classPrefix + '-after-open'); + removeClass(this.drop, drop.classPrefix + '-open'); + removeClass(this.drop, drop.classPrefix + '-after-open'); this.drop.addEventListener(transitionEndEvent, this.transitionEndHandler); diff --git a/dist/js/drop.min.js b/dist/js/drop.min.js index 9b14a07..724214b 100644 --- a/dist/js/drop.min.js +++ b/dist/js/drop.min.js @@ -1 +1 @@ -!function(t,e){"function"==typeof define&&define.amd?define(["tether"],e):"object"==typeof exports?module.exports=e(require("tether")):t.Drop=e(t.Tether)}(this,function(t){"use strict";function e(t,e){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t)){var n=[],o=!0,i=!1,s=void 0;try{for(var r,a=t[Symbol.iterator]();!(o=(r=a.next()).done)&&(n.push(r.value),!e||n.length!==e);o=!0);}catch(l){i=!0,s=l}finally{try{!o&&a["return"]&&a["return"]()}finally{if(i)throw s}}return n}throw new TypeError("Invalid attempt to destructure non-iterable instance")}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(t.__proto__=e)}function i(t){var n=t.split(" "),o=e(n,2),i=o[0],s=o[1];if(["left","right"].indexOf(i)>=0){var r=[s,i];i=r[0],s=r[1]}return[i,s].join(" ")}function s(t,e){for(var n=void 0,o=[];-1!==(n=t.indexOf(e));)o.push(t.splice(n,1));return o}function r(){var e=void 0===arguments[0]?{}:arguments[0],h=function(){for(var t=arguments.length,e=Array(t),n=0;t>n;n++)e[n]=arguments[n];return new(d.apply(b,[null].concat(e)))};p(h,{createContext:r,drops:[],defaults:{}});var m={classPrefix:"drop",defaults:{position:"bottom left",openOn:"click",beforeClose:null,constrainToScrollParent:!0,constrainToWindow:!0,classes:"",remove:!1,tetherOptions:{}}};p(h,m,e),p(h.defaults,m.defaults,e.defaults),"undefined"==typeof x[h.classPrefix]&&(x[h.classPrefix]=[]),h.updateBodyClasses=function(){for(var t=!1,e=x[h.classPrefix],n=e.length,o=0;n>o;++o)if(e[o].isOpened()){t=!0;break}t?u(document.body,""+h.classPrefix+"-open"):c(document.body,""+h.classPrefix+"-open")};var b=function(e){function r(t){if(n(this,r),l(Object.getPrototypeOf(r.prototype),"constructor",this).call(this),this.options=p({},h.defaults,t),this.target=this.options.target,"undefined"==typeof this.target)throw new Error("Drop Error: You must provide a target.");this.options.classes&&this.options.addTargetClasses!==!1&&u(this.target,this.options.classes),h.drops.push(this),x[h.classPrefix].push(this),this._boundEvents=[],this.bindMethods(),this.setupElements(),this.setupEvents(),this.setupTether()}return o(r,e),a(r,[{key:"_on",value:function(t,e,n){this._boundEvents.push({element:t,event:e,handler:n}),t.addEventListener(e,n)}},{key:"bindMethods",value:function(){this.transitionEndHandler=this._transitionEndHandler.bind(this)}},{key:"setupElements",value:function(){var t=this;if(this.drop=document.createElement("div"),u(this.drop,h.classPrefix),this.options.classes&&u(this.drop,this.options.classes),this.content=document.createElement("div"),u(this.content,""+h.classPrefix+"-content"),"function"==typeof this.options.content){var e=function(){var e=t.options.content.call(t,t);if("string"==typeof e)t.content.innerHTML=e;else{if("object"!=typeof e)throw new Error("Drop Error: Content function should return a string or HTMLElement.");t.content.innerHTML="",t.content.appendChild(e)}};e(),this.on("open",e.bind(this))}else"object"==typeof this.options.content?this.content.appendChild(this.options.content):this.content.innerHTML=this.options.content;this.drop.appendChild(this.content)}},{key:"setupTether",value:function(){var e=this.options.position.split(" ");e[0]=O[e[0]],e=e.join(" ");var n=[];n.push(this.options.constrainToScrollParent?{to:"scrollParent",pin:"top, bottom",attachment:"together none"}:{to:"scrollParent"}),n.push(this.options.constrainToWindow!==!1?{to:"window",attachment:"together"}:{to:"window"});var o={element:this.drop,target:this.target,attachment:i(e),targetAttachment:i(this.options.position),classPrefix:h.classPrefix,offset:"0 0",targetOffset:"0 0",enabled:!1,constraints:n,addTargetClasses:this.options.addTargetClasses};this.options.tetherOptions!==!1&&(this.tether=new t(p({},o,this.options.tetherOptions)))}},{key:"setupEvents",value:function(){var t=this;if(this.options.openOn){if("always"===this.options.openOn)return void setTimeout(this.open.bind(this));var e=this.options.openOn.split(" ");if(e.indexOf("click")>=0)for(var n=function(e){t.toggle(e),e.preventDefault()},o=function(e){t.isOpened()&&(e.target===t.drop||t.drop.contains(e.target)||e.target===t.target||t.target.contains(e.target)||t.close(e))},i=0;i=0&&!function(){var e=!1,n=function(n){e=!0,t.open(n)},o=null,i=function(n){e=!1,"undefined"!=typeof o&&clearTimeout(o),o=setTimeout(function(){e||t.close(n),o=null},50)};t._on(t.target,"mouseover",n),t._on(t.drop,"mouseover",n),t._on(t.target,"mouseout",i),t._on(t.drop,"mouseout",i)}()}}},{key:"isOpened",value:function(){return this.drop?f(this.drop,""+h.classPrefix+"-open"):void 0}},{key:"toggle",value:function(t){this.isOpened()?this.close(t):this.open(t)}},{key:"open",value:function(t){var e=this;this.isOpened()||(this.drop.parentNode||document.body.appendChild(this.drop),"undefined"!=typeof this.tether&&this.tether.enable(),u(this.drop,""+h.classPrefix+"-open"),u(this.drop,""+h.classPrefix+"-open-transitionend"),setTimeout(function(){e.drop&&u(e.drop,""+h.classPrefix+"-after-open")}),"undefined"!=typeof this.tether&&this.tether.position(),this.trigger("open"),h.updateBodyClasses())}},{key:"_transitionEndHandler",value:function(){f(this.drop,""+h.classPrefix+"-open")||c(this.drop,""+h.classPrefix+"-open-transitionend"),this.drop.removeEventListener(g,this.transitionEndHandler)}},{key:"beforeCloseHandler",value:function(t){var e=!0;return this.isClosing||"function"!=typeof this.options.beforeClose||(this.isClosing=!0,e=this.options.beforeClose(t,this)!==!1),this.isClosing=!1,e}},{key:"close",value:function(t){this.isOpened()&&this.beforeCloseHandler(t)&&(c(this.drop,""+h.classPrefix+"-open"),c(this.drop,""+h.classPrefix+"-after-open"),this.drop.addEventListener(g,this.transitionEndHandler),this.trigger("close"),"undefined"!=typeof this.tether&&this.tether.disable(),h.updateBodyClasses(),this.options.remove&&this.remove(t))}},{key:"remove",value:function(t){this.close(t),this.drop.parentNode&&this.drop.parentNode.removeChild(this.drop)}},{key:"position",value:function(){this.isOpened()&&"undefined"!=typeof this.tether&&this.tether.position()}},{key:"destroy",value:function(){this.remove(),"undefined"!=typeof this.tether&&this.tether.destroy();for(var t=0;t=0){var s=[i,o];o=s[0],i=s[1]}return[o,i].join(" ")}function i(t,e){for(var n=void 0,o=[];-1!==(n=t.indexOf(e));)o.push(t.splice(n,1));return o}function s(){var a=void 0===arguments[0]?{}:arguments[0],u=function(){for(var t=arguments.length,e=Array(t),n=0;t>n;n++)e[n]=arguments[n];return new(r.apply(b,[null].concat(e)))};h(u,{createContext:s,drops:[],defaults:{}});var m={classPrefix:"drop",defaults:{position:"bottom left",openOn:"click",beforeClose:null,constrainToScrollParent:!0,constrainToWindow:!0,classes:"",remove:!1,tetherOptions:{}}};h(u,m,a),h(u.defaults,m.defaults,a.defaults),"undefined"==typeof x[u.classPrefix]&&(x[u.classPrefix]=[]),u.updateBodyClasses=function(){for(var t=!1,e=x[u.classPrefix],n=e.length,o=0;n>o;++o)if(e[o].isOpened()){t=!0;break}t?p(document.body,u.classPrefix+"-open"):c(document.body,u.classPrefix+"-open")};var b=function(s){function r(t){if(e(this,r),d(Object.getPrototypeOf(r.prototype),"constructor",this).call(this),this.options=h({},u.defaults,t),this.target=this.options.target,"undefined"==typeof this.target)throw new Error("Drop Error: You must provide a target.");this.options.classes&&this.options.addTargetClasses!==!1&&p(this.target,this.options.classes),u.drops.push(this),x[u.classPrefix].push(this),this._boundEvents=[],this.bindMethods(),this.setupElements(),this.setupEvents(),this.setupTether()}return n(r,s),l(r,[{key:"_on",value:function(t,e,n){this._boundEvents.push({element:t,event:e,handler:n}),t.addEventListener(e,n)}},{key:"bindMethods",value:function(){this.transitionEndHandler=this._transitionEndHandler.bind(this)}},{key:"setupElements",value:function(){var t=this;if(this.drop=document.createElement("div"),p(this.drop,u.classPrefix),this.options.classes&&p(this.drop,this.options.classes),this.content=document.createElement("div"),p(this.content,u.classPrefix+"-content"),"function"==typeof this.options.content){var e=function(){var e=t.options.content.call(t,t);if("string"==typeof e)t.content.innerHTML=e;else{if("object"!=typeof e)throw new Error("Drop Error: Content function should return a string or HTMLElement.");t.content.innerHTML="",t.content.appendChild(e)}};e(),this.on("open",e.bind(this))}else"object"==typeof this.options.content?this.content.appendChild(this.options.content):this.content.innerHTML=this.options.content;this.drop.appendChild(this.content)}},{key:"setupTether",value:function(){var e=this.options.position.split(" ");e[0]=O[e[0]],e=e.join(" ");var n=[];n.push(this.options.constrainToScrollParent?{to:"scrollParent",pin:"top, bottom",attachment:"together none"}:{to:"scrollParent"}),n.push(this.options.constrainToWindow!==!1?{to:"window",attachment:"together"}:{to:"window"});var i={element:this.drop,target:this.target,attachment:o(e),targetAttachment:o(this.options.position),classPrefix:u.classPrefix,offset:"0 0",targetOffset:"0 0",enabled:!1,constraints:n,addTargetClasses:this.options.addTargetClasses};this.options.tetherOptions!==!1&&(this.tether=new t(h({},i,this.options.tetherOptions)))}},{key:"setupEvents",value:function(){var t=this;if(this.options.openOn){if("always"===this.options.openOn)return void setTimeout(this.open.bind(this));var e=this.options.openOn.split(" ");if(e.indexOf("click")>=0)for(var n=function(e){t.toggle(e),e.preventDefault()},o=function(e){t.isOpened()&&(e.target===t.drop||t.drop.contains(e.target)||e.target===t.target||t.target.contains(e.target)||t.close(e))},i=0;i=0&&!function(){var e=!1,n=function(n){e=!0,t.open(n)},o=null,i=function(n){e=!1,"undefined"!=typeof o&&clearTimeout(o),o=setTimeout(function(){e||t.close(n),o=null},50)};t._on(t.target,"mouseover",n),t._on(t.drop,"mouseover",n),t._on(t.target,"mouseout",i),t._on(t.drop,"mouseout",i)}()}}},{key:"isOpened",value:function(){return this.drop?f(this.drop,u.classPrefix+"-open"):void 0}},{key:"toggle",value:function(t){this.isOpened()?this.close(t):this.open(t)}},{key:"open",value:function(t){var e=this;this.isOpened()||(this.drop.parentNode||document.body.appendChild(this.drop),"undefined"!=typeof this.tether&&this.tether.enable(),p(this.drop,u.classPrefix+"-open"),p(this.drop,u.classPrefix+"-open-transitionend"),setTimeout(function(){e.drop&&p(e.drop,u.classPrefix+"-after-open")}),"undefined"!=typeof this.tether&&this.tether.position(),this.trigger("open"),u.updateBodyClasses())}},{key:"_transitionEndHandler",value:function(t){t.target===t.currentTarget&&(f(this.drop,u.classPrefix+"-open")||c(this.drop,u.classPrefix+"-open-transitionend"),this.drop.removeEventListener(g,this.transitionEndHandler))}},{key:"beforeCloseHandler",value:function(t){var e=!0;return this.isClosing||"function"!=typeof this.options.beforeClose||(this.isClosing=!0,e=this.options.beforeClose(t,this)!==!1),this.isClosing=!1,e}},{key:"close",value:function(t){this.isOpened()&&this.beforeCloseHandler(t)&&(c(this.drop,u.classPrefix+"-open"),c(this.drop,u.classPrefix+"-after-open"),this.drop.addEventListener(g,this.transitionEndHandler),this.trigger("close"),"undefined"!=typeof this.tether&&this.tether.disable(),u.updateBodyClasses(),this.options.remove&&this.remove(t))}},{key:"remove",value:function(t){this.close(t),this.drop.parentNode&&this.drop.parentNode.removeChild(this.drop)}},{key:"position",value:function(){this.isOpened()&&"undefined"!=typeof this.tether&&this.tether.position()}},{key:"destroy",value:function(){this.remove(),"undefined"!=typeof this.tether&&this.tether.destroy();for(var t=0;t", diff --git a/src/js/drop.js b/src/js/drop.js index b9ec240..570a166 100644 --- a/src/js/drop.js +++ b/src/js/drop.js @@ -357,7 +357,11 @@ function createContext(options={}) { drop.updateBodyClasses(); } - _transitionEndHandler() { + _transitionEndHandler(e) { + if (e.target !== e.currentTarget){ + return; + } + if (!hasClass(this.drop, `${ drop.classPrefix }-open`)) { removeClass(this.drop, `${ drop.classPrefix }-open-transitionend`); }