tether-drop
Advanced tools
Comparing version 1.0.5 to 1.0.6
{ | ||
"name": "tether-drop", | ||
"version": "1.0.5", | ||
"version": "1.0.6", | ||
"homepage": "https://github.com/HubSpot/drop", | ||
@@ -5,0 +5,0 @@ "authors": [ |
@@ -0,1 +1,7 @@ | ||
## v1.0.5 | ||
- Remove `bower install` post-install script | ||
## v1.0.3 | ||
- Remove Compass and Ruby dependencies | ||
## v1.0.0 | ||
@@ -2,0 +8,0 @@ - Add proper UMD to `Drop` |
@@ -19,3 +19,3 @@ # Contributing Guide | ||
5. Assuming everything went well, you should now have a `dist` directory that | ||
matches the one you moved in step 4. | ||
matches the one you moved in step 4 | ||
@@ -26,3 +26,3 @@ | ||
We use `gulp` to facilitate things like transpilation, minification, etc. so | ||
can focus on writing relevant code. If there is a fix or feature you would like | ||
can you focus on writing relevant code. If there is a fix or feature you would like | ||
to contribute, we ask that you take the following steps: | ||
@@ -29,0 +29,0 @@ |
@@ -13,12 +13,12 @@ /*! tether-drop 1.0.5 */ | ||
/* global Tether */ | ||
'use strict'; | ||
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; }; })(); | ||
var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x2, | ||
property = _x3, | ||
receiver = _x4; 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 _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 _bind = Function.prototype.bind; | ||
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'); } } | ||
@@ -30,4 +30,2 @@ | ||
/* global Tether */ | ||
var _Tether$Utils = Tether.Utils; | ||
@@ -49,6 +47,5 @@ var extend = _Tether$Utils.extend; | ||
if (['left', 'right'].indexOf(first) >= 0) { | ||
var _temp = [second, first]; | ||
first = _temp[0]; | ||
second = _temp[1]; | ||
_temp; | ||
var _ref = [second, first]; | ||
first = _ref[0]; | ||
second = _ref[1]; | ||
} | ||
@@ -197,3 +194,3 @@ return [first, second].join(' '); | ||
value: function setupElements() { | ||
var _this2 = this; | ||
var _this = this; | ||
@@ -213,9 +210,9 @@ this.drop = document.createElement('div'); | ||
// content function might return a string or an element | ||
var contentElementOrHTML = _this2.options.content.call(_this2, _this2); | ||
var contentElementOrHTML = _this.options.content.call(_this, _this); | ||
if (typeof contentElementOrHTML === 'string') { | ||
_this2.content.innerHTML = contentElementOrHTML; | ||
_this.content.innerHTML = contentElementOrHTML; | ||
} else if (typeof contentElementOrHTML === 'object') { | ||
_this2.content.innerHTML = ''; | ||
_this2.content.appendChild(contentElementOrHTML); | ||
_this.content.innerHTML = ''; | ||
_this.content.appendChild(contentElementOrHTML); | ||
} else { | ||
@@ -293,3 +290,3 @@ throw new Error('Drop Error: Content function should return a string or HTMLElement.'); | ||
value: function setupEvents() { | ||
var _this3 = this; | ||
var _this2 = this; | ||
@@ -309,3 +306,3 @@ if (!this.options.openOn) { | ||
var openHandler = function openHandler(event) { | ||
_this3.toggle(); | ||
_this2.toggle(); | ||
event.preventDefault(); | ||
@@ -315,3 +312,3 @@ }; | ||
var closeHandler = function closeHandler(event) { | ||
if (!_this3.isOpened()) { | ||
if (!_this2.isOpened()) { | ||
return; | ||
@@ -321,3 +318,3 @@ } | ||
// Clicking inside dropdown | ||
if (event.target === _this3.drop || _this3.drop.contains(event.target)) { | ||
if (event.target === _this2.drop || _this2.drop.contains(event.target)) { | ||
return; | ||
@@ -327,7 +324,7 @@ } | ||
// Clicking target | ||
if (event.target === _this3.target || _this3.target.contains(event.target)) { | ||
if (event.target === _this2.target || _this2.target.contains(event.target)) { | ||
return; | ||
} | ||
_this3.close(); | ||
_this2.close(); | ||
}; | ||
@@ -348,3 +345,3 @@ | ||
onUs = true; | ||
_this3.open(); | ||
_this2.open(); | ||
}; | ||
@@ -362,3 +359,3 @@ | ||
if (!onUs) { | ||
_this3.close(); | ||
_this2.close(); | ||
} | ||
@@ -369,6 +366,6 @@ outTimeout = null; | ||
_this3._on(_this3.target, 'mouseover', over); | ||
_this3._on(_this3.drop, 'mouseover', over); | ||
_this3._on(_this3.target, 'mouseout', out); | ||
_this3._on(_this3.drop, 'mouseout', out); | ||
_this2._on(_this2.target, 'mouseover', over); | ||
_this2._on(_this2.drop, 'mouseover', over); | ||
_this2._on(_this2.target, 'mouseout', out); | ||
_this2._on(_this2.drop, 'mouseout', out); | ||
})(); | ||
@@ -396,3 +393,3 @@ } | ||
value: function open() { | ||
var _this4 = this; | ||
var _this3 = this; | ||
@@ -415,3 +412,5 @@ if (this.isOpened()) { | ||
setTimeout(function () { | ||
addClass(_this4.drop, '' + drop.classPrefix + '-after-open'); | ||
if (_this3.drop) { | ||
addClass(_this3.drop, '' + drop.classPrefix + '-after-open'); | ||
} | ||
}); | ||
@@ -430,3 +429,3 @@ | ||
value: function close() { | ||
var _this5 = this; | ||
var _this4 = this; | ||
@@ -441,6 +440,6 @@ if (!this.isOpened()) { | ||
var handler = function handler() { | ||
if (!hasClass(_this5.drop, '' + drop.classPrefix + '-open')) { | ||
removeClass(_this5.drop, '' + drop.classPrefix + '-open-transitionend'); | ||
if (!hasClass(_this4.drop, '' + drop.classPrefix + '-open')) { | ||
removeClass(_this4.drop, '' + drop.classPrefix + '-open-transitionend'); | ||
} | ||
_this5.drop.removeEventListener(transitionEndEvent, handler); | ||
_this4.drop.removeEventListener(transitionEndEvent, handler); | ||
}; | ||
@@ -447,0 +446,0 @@ |
@@ -1,1 +0,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,r=void 0;try{for(var s,a=t[Symbol.iterator]();!(o=(s=a.next()).done)&&(n.push(s.value),!e||n.length!==e);o=!0);}catch(p){i=!0,r=p}finally{try{!o&&a["return"]&&a["return"]()}finally{if(i)throw r}}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],r=o[1];if(["left","right"].indexOf(i)>=0){var s=[r,i];i=s[0],r=s[1]}return[i,r].join(" ")}function r(t,e){for(var n=void 0,o=[];-1!==(n=t.indexOf(e));)o.push(t.splice(n,1));return o}function s(){var e=void 0===arguments[0]?{}:arguments[0],l=function(){for(var t=arguments.length,e=Array(t),n=0;t>n;n++)e[n]=arguments[n];return new(a.apply(b,[null].concat(e)))};d(l,{createContext:s,drops:[],defaults:{}});var m={classPrefix:"drop",defaults:{position:"bottom left",openOn:"click",constrainToScrollParent:!0,constrainToWindow:!0,classes:"",remove:!1,tetherOptions:{}}};d(l,m,e),d(l.defaults,m.defaults,e.defaults),"undefined"==typeof P[l.classPrefix]&&(P[l.classPrefix]=[]),l.updateBodyClasses=function(){for(var t=!1,e=P[l.classPrefix],n=e.length,o=0;n>o;++o)if(e[o].isOpened()){t=!0;break}t?h(document.body,""+l.classPrefix+"-open"):c(document.body,""+l.classPrefix+"-open")};var b=function(e){function s(t){if(n(this,s),u(Object.getPrototypeOf(s.prototype),"constructor",this).call(this),this.options=d({},l.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&&h(this.target,this.options.classes),l.drops.push(this),P[l.classPrefix].push(this),this._boundEvents=[],this.setupElements(),this.setupEvents(),this.setupTether()}return o(s,e),p(s,[{key:"_on",value:function(t,e,n){this._boundEvents.push({element:t,event:e,handler:n}),t.addEventListener(e,n)}},{key:"setupElements",value:function(){var t=this;if(this.drop=document.createElement("div"),h(this.drop,l.classPrefix),this.options.classes&&h(this.drop,this.options.classes),this.content=document.createElement("div"),h(this.content,""+l.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]=x[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:l.classPrefix,offset:"0 0",targetOffset:"0 0",enabled:!1,constraints:n,addTargetClasses:this.options.addTargetClasses};this.options.tetherOptions!==!1&&(this.tether=new t(d({},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.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())},i=0;i<y.length;++i){var r=y[i];this._on(this.target,r,n),this._on(document,r,o)}e.indexOf("hover")>=0&&!function(){var e=!1,n=function(){e=!0,t.open()},o=null,i=function(){e=!1,"undefined"!=typeof o&&clearTimeout(o),o=setTimeout(function(){e||t.close(),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,""+l.classPrefix+"-open"):void 0}},{key:"toggle",value:function(){this.isOpened()?this.close():this.open()}},{key:"open",value:function(){var t=this;this.isOpened()||(this.drop.parentNode||document.body.appendChild(this.drop),"undefined"!=typeof this.tether&&this.tether.enable(),h(this.drop,""+l.classPrefix+"-open"),h(this.drop,""+l.classPrefix+"-open-transitionend"),setTimeout(function(){h(t.drop,""+l.classPrefix+"-after-open")}),"undefined"!=typeof this.tether&&this.tether.position(),this.trigger("open"),l.updateBodyClasses())}},{key:"close",value:function(){var t=this;if(this.isOpened()){c(this.drop,""+l.classPrefix+"-open"),c(this.drop,""+l.classPrefix+"-after-open");var e=function n(){f(t.drop,""+l.classPrefix+"-open")||c(t.drop,""+l.classPrefix+"-open-transitionend"),t.drop.removeEventListener(g,n)};this.drop.addEventListener(g,e),this.trigger("close"),"undefined"!=typeof this.tether&&this.tether.disable(),l.updateBodyClasses(),this.options.remove&&this.remove()}}},{key:"remove",value:function(){this.close(),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<this._boundEvents.length;++t){var e=this._boundEvents[t],n=e.element,o=e.event,i=e.handler;n.removeEventListener(o,i)}this._boundEvents=[],this.tether=null,this.drop=null,this.content=null,this.target=null,r(P[l.classPrefix],this),r(l.drops,this)}}]),s}(v);return l}var a=Function.prototype.bind,p=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),u=function(t,e,n){for(var o=!0;o;){a=u=p=void 0,o=!1;var i=t,r=e,s=n,a=Object.getOwnPropertyDescriptor(i,r);if(void 0!==a){if("value"in a)return a.value;var p=a.get;return void 0===p?void 0:p.call(s)}var u=Object.getPrototypeOf(i);if(null===u)return void 0;t=u,e=r,n=s,o=!0}},l=t.Utils,d=l.extend,h=l.addClass,c=l.removeClass,f=l.hasClass,v=l.Evented,y=["click"];"ontouchstart"in document.documentElement&&y.push("touchstart");var m={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",transition:"transitionend"},g="";for(var b in m)if({}.hasOwnProperty.call(m,b)){var O=document.createElement("p");"undefined"!==O.style[b]&&(g=m[b])}var x={left:"right",right:"left",top:"bottom",bottom:"top",middle:"middle",center:"center"},P={},E=s();return document.addEventListener("DOMContentLoaded",function(){E.updateBodyClasses()}),E}); | ||
!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,r=void 0;try{for(var s,a=t[Symbol.iterator]();!(o=(s=a.next()).done)&&(n.push(s.value),!e||n.length!==e);o=!0);}catch(p){i=!0,r=p}finally{try{!o&&a["return"]&&a["return"]()}finally{if(i)throw r}}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],r=o[1];if(["left","right"].indexOf(i)>=0){var s=[r,i];i=s[0],r=s[1]}return[i,r].join(" ")}function r(t,e){for(var n=void 0,o=[];-1!==(n=t.indexOf(e));)o.push(t.splice(n,1));return o}function s(){var e=void 0===arguments[0]?{}:arguments[0],d=function(){for(var t=arguments.length,e=Array(t),n=0;t>n;n++)e[n]=arguments[n];return new(u.apply(b,[null].concat(e)))};l(d,{createContext:s,drops:[],defaults:{}});var m={classPrefix:"drop",defaults:{position:"bottom left",openOn:"click",constrainToScrollParent:!0,constrainToWindow:!0,classes:"",remove:!1,tetherOptions:{}}};l(d,m,e),l(d.defaults,m.defaults,e.defaults),"undefined"==typeof P[d.classPrefix]&&(P[d.classPrefix]=[]),d.updateBodyClasses=function(){for(var t=!1,e=P[d.classPrefix],n=e.length,o=0;n>o;++o)if(e[o].isOpened()){t=!0;break}t?h(document.body,""+d.classPrefix+"-open"):c(document.body,""+d.classPrefix+"-open")};var b=function(e){function s(t){if(n(this,s),p(Object.getPrototypeOf(s.prototype),"constructor",this).call(this),this.options=l({},d.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&&h(this.target,this.options.classes),d.drops.push(this),P[d.classPrefix].push(this),this._boundEvents=[],this.setupElements(),this.setupEvents(),this.setupTether()}return o(s,e),a(s,[{key:"_on",value:function(t,e,n){this._boundEvents.push({element:t,event:e,handler:n}),t.addEventListener(e,n)}},{key:"setupElements",value:function(){var t=this;if(this.drop=document.createElement("div"),h(this.drop,d.classPrefix),this.options.classes&&h(this.drop,this.options.classes),this.content=document.createElement("div"),h(this.content,""+d.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]=x[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:d.classPrefix,offset:"0 0",targetOffset:"0 0",enabled:!1,constraints:n,addTargetClasses:this.options.addTargetClasses};this.options.tetherOptions!==!1&&(this.tether=new t(l({},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.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())},i=0;i<y.length;++i){var r=y[i];this._on(this.target,r,n),this._on(document,r,o)}e.indexOf("hover")>=0&&!function(){var e=!1,n=function(){e=!0,t.open()},o=null,i=function(){e=!1,"undefined"!=typeof o&&clearTimeout(o),o=setTimeout(function(){e||t.close(),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,""+d.classPrefix+"-open"):void 0}},{key:"toggle",value:function(){this.isOpened()?this.close():this.open()}},{key:"open",value:function(){var t=this;this.isOpened()||(this.drop.parentNode||document.body.appendChild(this.drop),"undefined"!=typeof this.tether&&this.tether.enable(),h(this.drop,""+d.classPrefix+"-open"),h(this.drop,""+d.classPrefix+"-open-transitionend"),setTimeout(function(){t.drop&&h(t.drop,""+d.classPrefix+"-after-open")}),"undefined"!=typeof this.tether&&this.tether.position(),this.trigger("open"),d.updateBodyClasses())}},{key:"close",value:function(){var t=this;if(this.isOpened()){c(this.drop,""+d.classPrefix+"-open"),c(this.drop,""+d.classPrefix+"-after-open");var e=function n(){f(t.drop,""+d.classPrefix+"-open")||c(t.drop,""+d.classPrefix+"-open-transitionend"),t.drop.removeEventListener(g,n)};this.drop.addEventListener(g,e),this.trigger("close"),"undefined"!=typeof this.tether&&this.tether.disable(),d.updateBodyClasses(),this.options.remove&&this.remove()}}},{key:"remove",value:function(){this.close(),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<this._boundEvents.length;++t){var e=this._boundEvents[t],n=e.element,o=e.event,i=e.handler;n.removeEventListener(o,i)}this._boundEvents=[],this.tether=null,this.drop=null,this.content=null,this.target=null,r(P[d.classPrefix],this),r(d.drops,this)}}]),s}(v);return d}var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),p=function(t,e,n){for(var o=!0;o;){var i=t,r=e,s=n;a=u=p=void 0,o=!1;var a=Object.getOwnPropertyDescriptor(i,r);if(void 0!==a){if("value"in a)return a.value;var p=a.get;return void 0===p?void 0:p.call(s)}var u=Object.getPrototypeOf(i);if(null===u)return void 0;t=u,e=r,n=s,o=!0}},u=Function.prototype.bind,d=t.Utils,l=d.extend,h=d.addClass,c=d.removeClass,f=d.hasClass,v=d.Evented,y=["click"];"ontouchstart"in document.documentElement&&y.push("touchstart");var m={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",transition:"transitionend"},g="";for(var b in m)if({}.hasOwnProperty.call(m,b)){var O=document.createElement("p");"undefined"!==O.style[b]&&(g=m[b])}var x={left:"right",right:"left",top:"bottom",bottom:"top",middle:"middle",center:"center"},P={},E=s();return document.addEventListener("DOMContentLoaded",function(){E.updateBodyClasses()}),E}); |
@@ -24,5 +24,5 @@ <link rel="stylesheet" href="/drop/css/drop-theme-basic.css" /> | ||
Drop is a Javascript and CSS library for creating dropdowns and other popups attached to elements on the page. Drop uses [Tether.js](http://github.hubspot.com/tether) to efficiently position its elements. | ||
Drop is a JavaScript and CSS library for creating dropdowns and other popups attached to elements on the page. Drop uses [Tether.js](http://github.hubspot.com/tether) to efficiently position its elements. | ||
Thank you for considering Drop, we believe it's the best way of creating dropdown-style elements available right now. | ||
Thank you for considering Drop. We believe it's the best way of creating dropdown-style elements available right now. | ||
@@ -38,7 +38,7 @@ ### Features | ||
- Drops can be configured to open when the user clicks or hovers. | ||
- A development team at [HubSpot](http://github.hubspot.com) who care about making it do everything you need. | ||
- Drop is maintained by developers at [HubSpot](http://github.hubspot.com) who care about making it do everything you need. | ||
### Dependencies | ||
None! | ||
Tether | ||
@@ -87,7 +87,7 @@ ### Browser Support | ||
Reposition the drop. Call if you change the content of the drop or the position of the element its attached to. | ||
Reposition the drop. Call if you change the content of the drop or the position of the element it's attached to. | ||
#### `destroy()` | ||
Remove the drop along with all of it's event bindings. Calling any method after `destroy` is undefined. | ||
Remove the drop along with all of its event bindings. Calling any method after `destroy` is undefined. | ||
@@ -100,8 +100,8 @@ ### Options | ||
The element (or a selector for an element) the Drop should stay adjacent to on the page. An action on this element like | ||
a click or hover can be set to open the drop. | ||
The element (or a selector for an element) the Drop should stay adjacent to on the page. An action on this element, such as | ||
a click or hover, can be set to open the drop. | ||
#### `content` | ||
The content which should be rendered into the Drop. Can be: | ||
The content that should be rendered into the Drop. Can be: | ||
@@ -135,3 +135,3 @@ - A DOM element | ||
Specifies what event on the target opens the drop. If you set this to `undefined` or `null` you will need to manually call `.open()`/`.close()` on the `drop` instance. | ||
Specifies what event on the target opens the drop. If you set this to `undefined` or `null` you will need to manually call `.open()` and `.close()` on the `drop` instance. | ||
`'always'` will open the drop immediately when it's rendered and leave it open. | ||
@@ -156,3 +156,3 @@ | ||
Similar to `constrainToWindow` but for the target element's first scroll parent, that is the first parent which has `overflow: auto` or `overflow: scroll` set, or the body, whichever comes first. | ||
Similar to `constrainToWindow` but for the target element's first scroll parent: the first parent that has `overflow: auto` or `overflow: scroll` set, or the body, whichever comes first. | ||
@@ -165,3 +165,3 @@ #### `classes` | ||
Set to `true` if you'd like the drop element to be removed from the DOM when the drop is closed, and recreated when it's opened. | ||
Set to `true` if you'd like the drop element to be removed from the DOM when the drop is closed and recreated when it's opened. | ||
@@ -175,3 +175,3 @@ ```coffeescript | ||
Additional options can be passed to customize Drop even further. These will get passed to the underlying Tether instance used to position the drop. See the the [Tether documentation](http://tether.io) for more information. Set to `false` to disable tether. | ||
Additional options can be passed to customize Drop even further. These will get passed to the underlying Tether instance used to position the drop. See the the [Tether documentation](http://tether.io) for more information. Set to `false` to disable Tether. | ||
@@ -212,3 +212,2 @@ #### Defaults | ||
Drop adds a class to the body whenever a drop is open. It defaults to `drop-open`, see | ||
the Embedding doc for more details. | ||
Drop adds a class to the body whenever a drop is open. It defaults to `drop-open`. See the [Embedding documentation](http://github.hubspot.com/drop/overview/embedding_drop/) for more details. |
## Embedding Drop in Other Libraries | ||
Drop is designed to be embeddable in other javascript libraries. For example, our | ||
Drop is designed to be embeddable in other JavaScript libraries. For example, our | ||
[tooltip library](/tooltip) includes an embedded copy of Drop. | ||
@@ -8,6 +8,6 @@ | ||
You probably want to change the classes to use your libraries name to prefix it's classes, | ||
rather than `'drop-`'. Drop also adds a class to the body whenever any drop is opened, | ||
by changing the prefix you are ensuring that your libraries classes don't conflict with | ||
another usage of drop on the page. | ||
You probably want to change the classes to use your library's name to prefix its classes, | ||
rather than using `'drop-`'. Drop also adds a class to the body whenever any drop is opened; | ||
by changing the prefix you are ensuring that your library's classes don't conflict with | ||
another usage of Drop on the page. | ||
@@ -14,0 +14,0 @@ To do this, call the `Drop.createContext` method. It will return you a context-aware |
## Drop vs Tether | ||
Drop is a library built on the Tether positioning engine. Tether is intentionally | ||
designed to only handle positioning. You give it an element and a target, | ||
and it keeps the element where you want it relative to the target. | ||
Drop is a library built on the [Tether](http://github.hubspot.com/tether) positioning engine. | ||
Tether is intentionally designed to only handle positioning. You give it an element and a | ||
target, and it keeps the element where you want it relative to the target. | ||
Quickly it became clear that while that simplicity allowed Tether to be more powerful, | ||
many of it's use cases required a few more concepts. Specifically, Drop adds the following | ||
many of its use cases required a few more concepts. Specifically, Drop adds the following | ||
on top of Tether: | ||
@@ -13,3 +13,3 @@ | ||
to the opening and closing. | ||
- Drop creates the actual element for you, and adds a 'drop-content' element inside of it | ||
- Element creation handled for you by Drop. Drop adds a 'drop-content' element inside of it | ||
to make styling easier. | ||
@@ -22,3 +22,3 @@ - A simpler attachment syntax that assumes you always want to place the drop in one | ||
It's very possible that a sufficiently complex application will eventually outgrow | ||
Drop and decide to move to using Tether directly. You can always pass `tetherOptions` | ||
to your Drop instance if you need to more explicit control of Tether's behavior. | ||
Drop and move to using Tether directly. You can always pass `tetherOptions` | ||
to your Drop instance if you need more explicit control of Tether's behavior. |
@@ -20,10 +20,10 @@ ## Stying Drops | ||
To facilitate animation, Drop stratigically adds and removes three classes | ||
when a Drop is opened. | ||
when a drop is opened: | ||
- `drop-open` is added when the drop is opened and removed when it should be hidden, | ||
use `drop-open` if you don't need animation. | ||
- `drop-after-open` is added in the next event loop tick after the drop is opened, | ||
start your CSS transitions when `drop-after-open` appears. | ||
- `drop-open` is added when the drop is opened and removed when it should be hidden. | ||
Use `drop-open` if you don't need animation. | ||
- `drop-after-open` is added in the next event loop tick after the drop is opened. | ||
Start your CSS transitions when `drop-after-open` appears. | ||
- `drop-open-transitionend` is added immediately, but not removed until the `transitionend` | ||
event fires on the drop. Use `drop-open-transitionend` to control the showing and hiding | ||
event fires on the drop. Use `drop-open-transitionend` to control the showing and hiding | ||
of your element when using an animation. | ||
@@ -58,6 +58,6 @@ | ||
Drop ships with two animated themes and one nonanimated one. They are available in the | ||
Drop ships with two animated themes and one non-animated one. They are available in the | ||
sass and css directories of the project. | ||
If you look at the sass, you'll notice that we make use of mixins which allow you to configure | ||
If you look at the Sass, you'll notice that we make use of mixins which allow you to configure | ||
many elements of the theme to make it suit your application. |
@@ -38,3 +38,3 @@ var del = require('del'); | ||
// Javascript | ||
gulp.task('js', ['clean'], function() { | ||
gulp.task('js', function() { | ||
gulp.src('./src/js/drop.js') | ||
@@ -41,0 +41,0 @@ .pipe(babel()) |
{ | ||
"name": "tether-drop", | ||
"version": "1.0.5", | ||
"version": "1.0.6", | ||
"description": "Client-side library for creating dropdowns", | ||
@@ -5,0 +5,0 @@ "authors": [ |
@@ -340,3 +340,5 @@ /* global Tether */ | ||
setTimeout(() => { | ||
addClass(this.drop, `${ drop.classPrefix }-after-open`); | ||
if (this.drop) { | ||
addClass(this.drop, `${ drop.classPrefix }-after-open`); | ||
} | ||
}) | ||
@@ -343,0 +345,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
700191
10457