Skip to content

Commit

Permalink
0.1.0 - added slots to use html for content and close button; moved c…
Browse files Browse the repository at this point in the history 
…omponent from .js to .vue
  • Loading branch information
@antongorodezkiy
antongorodezkiy committed Feb 3, 2017
1 parent d9e8608 commit c63643e
Show file tree
Hide file tree
Showing 10 changed files with 1,469 additions and 561 deletions.
49 changes: 39 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ vue-popper-component

Simple Vue.js component for [Popper.js](https://popper.js.org/) plugin.

### Demos:

https://antongorodezkiy.github.io/vue-popper-component/

### Dependencies:

- Vue 1.*
Expand All @@ -20,23 +24,48 @@ new Vue({

components: {
'popper': VuePopper
},

data: {
showPopperParentVar: true
}
});
```

```html
<popper
inline-template="true"
:show-popper="true"
content='<h4>Header</h4>
<p>Lorem ipsum</p>
<a target="_blank" href="/">Go to page</a>'
:show-popper.sync="showPopperParentVar"
content="Some plain text message here"
placement="right"
close-button="fa fa-times">
<span @click.prevent="showPopper = !showPopper">
?
</span>
close-button="Close me!">

<span @click.prevent="showPopperParentVar = !showPopperParentVar">
?
</span>

</popper>
```

For other demos please check [`demo`](./demo) folder.
### Usage with html in slots:

```html
<popper
:show-popper.sync="showPopperParentVar"
content="Lorem ipsum dolor"
placement="top"
close-button="1">

<div slot="close-button">
<i class="glyphicon glyphicon-remove"></i>
</div>

<div slot="content">
<h2><i class="glyphicon glyphicon-star"></i> <b>us</b> <i>on</i> <u>github</u>!</h2>
<a @click.prevent="showPopperParentVar = false" href="#">Close this popover from the content!</a>
</div>

<button class="btn btn-default" @click.prevent="showPopperParentVar = !showPopperParentVar">
Click to open popover on the bottom
</button>
</popper>
```
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"authors": [
"antongorodezkiy <[email protected]>"
],
"version": "0.0.4",
"version": "0.1.0",
"dependencies": {
"vue": "1.*",
"popper.js": "1.*"
Expand Down
209 changes: 93 additions & 116 deletions dist/vue-popper.bundle.js → dist/vue-popper+popperjs.js
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,4 @@
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

/**
* Vue.js directive for Popper.js
* By antongorodezkiy
*/

var Popper = require('popper.js');

var VuePopper = {

props: {
showPopper: {
type: Boolean,
required: false,
default: false
},
placement: {
type: String,
required: false,
default: 'top'
},
content: {
type: String,
required: false,
default: ''
},
closeButton: {
type: Boolean,
required: false,
default: false
}
},

data: function data() {
return {
popperId: null,
popper: null
};
},
ready: function ready() {
var _this = this;

Vue.nextTick(function () {
if (_this.showPopper) {
_this.initPopper();
}
});
},

watch: {
showPopper: function showPopper(val, oldVal) {
var _this2 = this;

if (!!this.showPopper) {
this.destroyPopper();
Vue.nextTick(function () {
_this2.initPopper();
});
} else if (this.popper) {
this.destroyPopper();
}
}
},

destroyed: function destroyed() {
this.destroyPopper();
},

methods: {
initPopper: function initPopper() {
var _this3 = this;

this.popperId = this.uuid4();
this.popper = new Popper(this.$el, {
content: this.content + (this.closeButton ? '<button\n data-uuid="' + this.popperId + '"\n type="button"\n class="js-popper-close popper-close">\n <i class="fa fa-times"></i>\n </button>' : '') || '',
contentType: 'html',
classNames: ['vue-popper-component']
}, {
placement: this.placement || 'bottom',
removeOnDestroy: true
});

$('body').on('click', '.js-popper-close', function (e) {
if (_this3.popperId == $(e.currentTarget).data('uuid')) {
_this3.showPopper = false;
}
});
},
destroyPopper: function destroyPopper() {
if (this.popper) {
this.popper.destroy();
this.popper = null;
}
},
uuid4: function uuid4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c === 'x' ? r : r & 0x3 | 0x8;
return v.toString(16);
});
}
}
};

/*
* Install Vue Directive if Vue is available
*/

if (typeof Vue !== "undefined") {
Vue.component('popper', VuePopper);
}

},{"popper.js":2}],2:[function(require,module,exports){
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.VuePopper = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
/**!
* @fileOverview Kickass library to create and place poppers near their reference elements.
* @version 1.0.1
Expand Down Expand Up @@ -2104,4 +1990,95 @@ return Popper;
})));


},{}]},{},[1]);
},{}],2:[function(require,module,exports){
'use strict';

var Popper = require('popper.js');

module.exports = {

props: {
showPopper: {
type: Boolean,
required: false,
default: false
},
placement: {
type: String,
required: false,
default: 'top'
},
content: {
type: String,
required: false,
default: ''
},
closeButton: {
type: String,
required: false,
default: null
}
},

data: function data() {
return {
popperId: null,
popper: null
};
},
ready: function ready() {
var _this = this;

this.$nextTick(function () {
if (_this.showPopper) {
_this.initPopper();
}
});
},


watch: {
showPopper: function showPopper(val, oldVal) {
var _this2 = this;

if (!!this.showPopper) {
this.$nextTick(function () {
_this2.initPopper();
});
}
}
},

destroyed: function destroyed() {
this.destroyPopper();
},


methods: {
initPopper: function initPopper() {
this.popperId = this.uuid4();
this.popper = new Popper(this.$el, this.$el.querySelector('.vue-popper-component'), {
placement: this.placement || 'bottom',
removeOnDestroy: true
});
},
destroyPopper: function destroyPopper() {
if (this.popper) {
this.popper.destroy();
this.popper = null;
}
},
uuid4: function uuid4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c === 'x' ? r : r & 0x3 | 0x8;
return v.toString(16);
});
}
}
};
if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "<div><slot></slot><div v-if=showPopper :id=\"'vue-popper-'+popperId\" class=vue-popper-component><button v-if=closeButton @click=\"showPopper = false\" :id=\"'vue-popper-'+popperId+'-close'\" type=button class=\"js-popper-close popper-close\"><slot name=close-button>{{ closeButton }}</slot></button><slot name=content>{{ content }}</slot><div class=popper__arrow x-arrow=\"\"></div></div></div>"

},{"popper.js":1}]},{},[2])(2)
});
33 changes: 8 additions & 25 deletions dist/vue-popper.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.VuePopper = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

/**
* Vue.js component for Popper.js
* By antongorodezkiy
*/

var Popper = require('popper.js');

module.exports = {
Expand Down Expand Up @@ -54,12 +50,9 @@ module.exports = {
var _this2 = this;

if (!!this.showPopper) {
this.destroyPopper();
this.$nextTick(function () {
_this2.initPopper();
});
} else if (this.popper) {
this.destroyPopper();
}
}
},
Expand All @@ -71,26 +64,11 @@ module.exports = {

methods: {
initPopper: function initPopper() {
var _this3 = this;

this.popperId = this.uuid4();

var popperElement = document.createElement('div');
popperElement.className = 'vue-popper-component';
popperElement.innerHTML = this.content + (this.closeButton ? '<button\n id="' + this.popperId + '-close"\n type="button"\n class="js-popper-close popper-close">\n ' + this.closeButton + '\n </button>' : '') + '<div class="popper__arrow" x-arrow></div>';

document.getElementsByTagName('body')[0].appendChild(popperElement);

this.popper = new Popper(this.$el, popperElement, {
this.popper = new Popper(this.$el, this.$el.querySelector('.vue-popper-component'), {
placement: this.placement || 'bottom',
removeOnDestroy: true
});

if (document.getElementById(this.popperId + '-close')) {
document.getElementById(this.popperId + '-close').onclick = function () {
_this3.showPopper = false;
};
}
},
destroyPopper: function destroyPopper() {
if (this.popper) {
Expand All @@ -106,4 +84,9 @@ module.exports = {
});
}
}
};
};
if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "<div><slot></slot><div v-if=showPopper :id=\"'vue-popper-'+popperId\" class=vue-popper-component><button v-if=closeButton @click=\"showPopper = false\" :id=\"'vue-popper-'+popperId+'-close'\" type=button class=\"js-popper-close popper-close\"><slot name=close-button>{{ closeButton }}</slot></button><slot name=content>{{ content }}</slot><div class=popper__arrow x-arrow=\"\"></div></div></div>"

},{"popper.js":"popper.js"}]},{},[1])(1)
});
Loading

0 comments on commit c63643e

Please sign in to comment.