summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCarlos Killpack <carlos@citygro.com>2018-08-10 16:10:35 -0600
committerCarlos Killpack <carlos@citygro.com>2018-08-10 16:10:35 -0600
commitf4cb921abac92c4897f2a7576a52d79b5f8e009a (patch)
tree2d7dab18f79b65aa2ed8ca59e17b862939bf9ce3
parent1bcd3196da1058382825274efeeee3f9ef473094 (diff)
lookup popper ref with async
-rw-r--r--src/PopperComponent.js36
-rw-r--r--vue-popper.js89
2 files changed, 103 insertions, 22 deletions
diff --git a/src/PopperComponent.js b/src/PopperComponent.js
index f811322..749b4c7 100644
--- a/src/PopperComponent.js
+++ b/src/PopperComponent.js
@@ -30,8 +30,14 @@ export default (Vue, defaults) => Vue.component('popper', {
required: false
}
},
+ data () {
+ return {
+ findElementInterval: null
+ }
+ },
mounted () {
this.createPopper()
+ this.$nextTick(() => this.$forceUpdate())
},
updated () {
this.updatePopper()
@@ -70,8 +76,8 @@ export default (Vue, defaults) => Vue.component('popper', {
removeOnDestroy: true
}
)
- this.$nextTick(() => {
- const popper = this.$refs.popper
+ this.$nextTick(async () => {
+ const popper = await this.findElement()
const target = this.target || this.$refs.target
if (popper && target) {
try {
@@ -84,11 +90,33 @@ export default (Vue, defaults) => Vue.component('popper', {
} catch (err) {
console.error(err)
}
- } else {
- console.warn('[@citygro/vue-popper] missing content or target', {popper, target})
}
})
}
+ },
+ findElement () {
+ if (this.findElementInterval === null) {
+ this.findElementInterval = setInterval(() => {
+ const popper = this.$refs.popper
+ if (popper) {
+ clearInterval(this.findElementInterval)
+ this.findElementInterval = null
+ this.$emit('found-element', popper)
+ }
+ }, 100)
+ }
+ return new Promise((resolve) => {
+ const popper = this.$refs.popper
+ if (popper) {
+ resolve(popper)
+ } else {
+ const handler = (popper) => {
+ this.$off('found-element', handler)
+ resolve(popper)
+ }
+ this.$on('found-element', handler)
+ }
+ })
}
}
})
diff --git a/vue-popper.js b/vue-popper.js
index 781882b..7743aa5 100644
--- a/vue-popper.js
+++ b/vue-popper.js
@@ -7,6 +7,8 @@ var isEqual = _interopDefault(require('lodash/isEqual'));
var merge = _interopDefault(require('lodash/merge'));
var portalVue = require('portal-vue');
+function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
+
var PopperComponent = (function (Vue, defaults) {
return Vue.component('popper', {
render: function render() {
@@ -44,8 +46,18 @@ var PopperComponent = (function (Vue, defaults) {
required: false
}
},
+ data: function data() {
+ return {
+ findElementInterval: null
+ };
+ },
mounted: function mounted() {
+ var _this = this;
+
this.createPopper();
+ this.$nextTick(function () {
+ return _this.$forceUpdate();
+ });
},
updated: function updated() {
this.updatePopper();
@@ -68,18 +80,18 @@ var PopperComponent = (function (Vue, defaults) {
},
methods: {
updatePopper: function updatePopper() {
- var _this = this;
+ var _this2 = this;
if (this.popper) {
this.$nextTick(function () {
- return _this.popper.update();
+ return _this2.popper.update();
});
} else {
this.createPopper();
}
},
createPopper: function createPopper() {
- var _this2 = this;
+ var _this3 = this;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -88,25 +100,66 @@ var PopperComponent = (function (Vue, defaults) {
var _options = merge({}, defaults, this.options, {
removeOnDestroy: true
});
- this.$nextTick(function () {
- var popper = _this2.$refs.popper;
- var target = _this2.target || _this2.$refs.target;
- if (popper && target) {
- try {
- if (_this2.popper && replace) {
- _this2.popper.destroy();
- }
- if (!_this2.popper) {
- _this2.popper = new Popper(target, popper, _options);
+ this.$nextTick(_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+ var popper, target;
+ return regeneratorRuntime.wrap(function _callee$(_context) {
+ while (1) {
+ switch (_context.prev = _context.next) {
+ case 0:
+ _context.next = 2;
+ return _this3.findElement();
+
+ case 2:
+ popper = _context.sent;
+ target = _this3.target || _this3.$refs.target;
+
+ if (popper && target) {
+ try {
+ if (_this3.popper && replace) {
+ _this3.popper.destroy();
+ }
+ if (!_this3.popper) {
+ _this3.popper = new Popper(target, popper, _options);
+ }
+ } catch (err) {
+ console.error(err);
+ }
+ }
+
+ case 5:
+ case 'end':
+ return _context.stop();
}
- } catch (err) {
- console.error(err);
}
- } else {
- console.warn('[@citygro/vue-popper] missing content or target', { popper: popper, target: target });
+ }, _callee, _this3);
+ })));
+ }
+ },
+ findElement: function findElement() {
+ var _this4 = this;
+
+ if (this.findElementInterval === null) {
+ this.findElementInterval = setInterval(function () {
+ var popper = _this4.$refs.popper;
+ if (popper) {
+ clearInterval(_this4.findElementInterval);
+ _this4.findElementInterval = null;
+ _this4.$emit('found-element', popper);
}
- });
+ }, 100);
}
+ return new Promise(function (resolve) {
+ var popper = _this4.$refs.popper;
+ if (popper) {
+ resolve(popper);
+ } else {
+ var handler = function handler(popper) {
+ _this4.$off('found-element', handler);
+ resolve(popper);
+ };
+ _this4.$on('found-element', handler);
+ }
+ });
}
}
});