How to use @pluginjs/pop-dialog - 9 common examples
To help you get started, we’ve selected a few @pluginjs/pop-dialog examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
pluginjs / pluginjs / modules / gradient-selector / src / trigger.js View on Github 
buildPop() {
const that = this
// init popDialog
this.CLEARPOP = PopDialog.of(
query(`.${this.classes.REMOVE}`, this.$triggerAction),
{
content: that.instance.translate('deleteTitle'),
placement: 'bottom',
buttons: [
{
action: 'cancel',
label: that.instance.translate('cancel')
},
{
action: 'delete',
label: that.instance.translate('delete'),
color: 'danger',
fn(resolve) {
that.instance.clear()
resolve()this.$wrap = parseHTML(
template.compile(this.options.template())({
classes: this.classes,
placeholder: this.translate('placeholder')
})
)
insertAfter(this.$wrap, this.element)
this.$empty = query(`.${this.classes.EMPTY}`, this.$wrap)
this.$image = query(`.${this.classes.FILLIMAGE}`, this.$wrap)
this.$remove = query(`.${this.classes.REMOVE}`, this.$wrap)
this.$reselect = query(`.${this.classes.RESELECT}`, this.$wrap)
// init popDialog
this.pop = PopDialog.of(this.$remove, {
placement: 'bottom',
content: this.translate('deleteTitle'),
buttons: [
{
action: 'cancel',
label: this.translate('cancel')
},
{
action: 'delete',
label: this.translate('delete'),
color: 'danger',
fn(resolve) {
const $fill = that.$remove.matches(`.${that.classes.FILL}`)
? that.$remove
: parentWith(hasClass(that.classes.FILL), that.$remove)
addClass(`${that.classes.FADEOUT}`, $fill)query('.pj-linkPicker-external', this.$dropdown)
)
}
if (this.value.type === 'external') {
addClass(
`${this.classes.TYPESHOW}`,
query('.pj-linkPicker-external', this.$dropdown)
)
removeClass(
`${this.classes.TYPESHOW}`,
query('.pj-linkPicker-internal', this.$dropdown)
)
}
// this.buildTypes()
// create pop
this.pop = PopDialog.of(
query(`.${this.classes.ACTIONREMOVE}`, this.$action),
{
content: 'Are you sure you want to delete?',
placement: 'bottom',
buttons: [
{
action: 'cancel',
label: 'Cancel'
},
{
action: 'delete',
label: 'Delete',
color: 'danger',
fn(resolve) {
that.clear(true)
resolve()this.$infoImageName = hideElement(
query(`.${this.classes.IMAGENAMEINFO}`, this.$info)
)
this.$infoImage = query(`.${this.classes.INFOIMAGE}`, this.$info)
this.$remove = query(`.${this.classes.REMOVE}`, this.$info)
this.$edit = query(`.${this.classes.EDIT}`, this.$info)
this.$expandPanel = query(`.${this.classes.EXPANDPANEL}`, this.$wrap)
this.$control = query(`.${this.classes.CONTROL}`, this.$expandPanel)
this.$cancel = query(`.${this.classes.CANCEL}`, this.$control)
this.$save = query(`.${this.classes.SAVE}`, this.$control)
this.$imageWrap = query(`.${this.classes.IMAGEWRAP}`, this.$expandPanel)
this.$image = query(`.${this.classes.IMAGE}`, this.$expandPanel)
// init pop
this.pop = new PopDialog(this.$remove, {
placement: 'bottom',
content: 'Are you sure you want to delete?',
buttons: {
cancel: { label: 'Cancel' },
delete: {
label: 'Delete',
color: 'danger',
fn: resolve => {
// this.$remove.closest(`.${this.classes.INFO}`).fadeOut(100, () => {
// this.clear()
// this.$remove.fadeIn()
// })
resolve()
}
}bulidPop() {
const that = this
// init pop
this.CLEARPOP = new PopDialog(this.$remove, {
placement: 'bottom',
content: 'Are you sure you want to delete?',
buttons: [
{
action: 'cancel',
label: 'Cancel'
},
{
action: 'delete',
label: 'Delete',
color: 'danger',
fn: resolve => {
that.instance.clear()
resolve()
}
}buildPop() {
const that = this
this.CLEARPOP = PopDialog.of(
query(`.${this.classes.REMOVE}`, this.$triggerAction),
{
content: that.instance.translate('deleteTitle'),
placement: 'bottom',
buttons: [
{
action: 'cancel',
label: that.instance.translate('cancel')
},
{
action: 'delete',
label: that.instance.translate('delete'),
color: 'danger',
fn(resolve) {
that.instance.clear()
resolve()import { query } from '@pluginjs/dom'
import popDialog from '@pluginjs/pop-dialog'
const root = query('#contents')
const tableElement = query('[data-toggle="pop-dialog-table"]', root)
const largeContentElement = query(
'[data-toggle="pop-dialog-largeContent"]',
root
)
const iframeElement = query('[data-toggle="pop-dialog-iframe"]', root)
popDialog.of(tableElement, {
content() {
return `<table class="popover-table popover-table-bordered">
<thead>
<tr>
<th>Rank</th>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td></tr></tbody></table>buildPop() {
const that = this
this.DELETEPOP = PopDialog.of(this.$remove, {
placement: 'bottom',
content: that.instance.translate('deleteTitle'),
buttons: [
{
action: 'cancel',
label: that.instance.translate('cancel')
},
{
action: 'delete',
label: that.instance.translate('delete'),
color: 'danger',
fn(resolve) {
that.instance.clear()
resolve()
}buildPop() {
const that = this
this.DELETEPOP = PopDialog.of(
query(`.${this.classes.REMOVE}`, this.$triggerAction),
{
content: this.instance.translate('deleteTitle'),
placement: 'bottom',
buttons: [
{
action: 'cancel',
label: this.instance.translate('cancel')
},
{
action: 'delete',
label: this.instance.translate('delete'),
color: 'danger',
fn: resolve => {
removeClass(that.classes.SHOW, that.instance.$wrap)
that.instance.removeVideo()@pluginjs/pop-dialog
A flexible modern pop-dialog js plugin.
