RoleModel Confirm

Drop-in upgrade for rails data-turbo-confirm to support custom HTML dialogs and multiple content slots.

Installation

npm install @rolemodel/confirm

or

yarn add @rolemodel/confirm

Usage

In your applications JavaScript entrypoint file. (e.g. app/javascript/application.js)

import {Turbo} from "@hotwired/turbo-rails"
import RoleModelConfirm from "@rolemodel/confirm"

Turbo.setConfirmMethod(RoleModelConfirm.confirm)

RoleModelConfirm.init()

Configuration

RoleModel confirm is entirely configurable. Override default configuration by passing an object into init().

(e.g. app/javascript/application.js)

/* ... */

const contentSlots = {
  title: {
    contentAttribute: 'confirm-title',
    slotSelector: '.title'
  },
  subtitle: {
    contentAttribute: 'confirm-subtitle',
    slotSelector: '.subtitle'
  },
  note: {
    contentAttribute: 'confirm-note',
    slotSelector: '#confirm-body'
  }
}

RoleModelConfirm.init({contentSlots})

default configuration

{
    dialogSelector: '#confirm',
    activeClass: 'modal--active',
    acceptSelector: '#confirm-accept',
    denySelector: '.confirm-cancel',
    animationDuration: 300,
    contentSlots: {
      title: {
        contentAttribute: 'turbo-confirm',
        slotSelector: '#confirm-title'
      },
      body: {
        contentAttribute: 'confirm-details',
        slotSelector: '#confirm-body'
      }
    }
  }