concrete5 v8 provides multiple methods for creating dialog modals, confirm modals, and notifications.

The dialog() and confirm() methods are concrete5 wrappers for jQuery UI. The concrete5 notifications use PNotify.js and can be created using the ConcreteAlert JavaScript object, the PNotify JavaScript object, and the PHP UserInterface service (helper/concrete/ui).

The ConcreteAlert object is created in alert.js and is combined with PNotify and other scripts as app.js (concrete/js/app.js). When logged in, app.js is loaded by the concrete5 interface, with the script added near the closing body tag. To make sure app.js has been loaded before using it, use jQuery .ready(), or a similar method, to make sure ConcreteAlert and PNotify are available. When using the UserInterface service notify() method, it will return a script tag with a PNotify object and options wrapped in a jQuery .ready() shorthand method.

Translatable strings in JavaScript should be wrapped in json_encode() and t() and t() in PHP. The json_encode() method will escape quotes and t() is used for core translation.

PNotify
https://github.com/sciactive/pnotify

The full list of PNotify options can be found here (some options are only available when using PNotify directly or the UserInterface service).
https://github.com/sciactive/pnotify#configuration-defaults--options

Dialog Modals

dialog()

dialog(title, message, onCloseFn)
concrete/js/build/core/app/alert.js

  • title - the title for the dialog modal
  • message - the dialog modal message (plain text or HTML)
  • onCloseFn - an optional inline function or named function, called when the dialog modal is closed

Example:

ConcreteAlert.dialog(
    <?php echo json_encode(t('My Dialog Modal Title')); ?>,
    <?php echo json_encode(t('My dialog modal message.')); ?>
);

Example: inline on close function

ConcreteAlert.dialog(
    <?php echo json_encode(t('My Dialog Modal Title')); ?>,
    <?php echo json_encode(t('My dialog modal message.')); ?>,
    function() {
        // do this when the modal is closed
    }
);

Example: named on close function

function myOnCloseFunction() {
    // do this when the modal is closed
}
ConcreteAlert.dialog(
    <?php echo json_encode(t('My Dialog Modal Title')); ?>,
    <?php echo json_encode(t('My dialog modal message.')); ?>,
    myOnCloseFunction
);

Confirm Modals

confirm()

confirm(message, onConfirmation, btnClass, btnText)
concrete/js/build/core/app/alert.js

  • message - the confirm modal message (plain text or HTML)
  • onConfirmation - an inline function or named function, called when the modal confirm button is clicked
  • btnClass - the confirmation button class (the default class is "btn-primary")
    • available Bootstrap 3 button classes
      • btn-default
      • btn-primary
      • btn-success
      • btn-info
      • btn-warning
      • btn-danger
  • btnText - the confirmation button text (the default button text is "Go")

Example: inline on close function

ConcreteAlert.confirm(
    <?php echo json_encode(t('My confirm message.')); ?>,
    function() {
        // do this when the modal is confirmed
    }
);

Example: named on close function

function myOnConfirmationFunction() {
    // do this when the modal is confirmed
}
ConcreteAlert.confirm(
    <?php echo json_encode(t('My confirm message.')); ?>,
    myOnConfirmationFunction
);

Example: button class

function myOnConfirmationFunction() {
    // do this when the modal is confirmed
}
ConcreteAlert.confirm(
    <?php echo json_encode(t('My confirm message.')); ?>,
    myOnConfirmationFunction,
    'btn-warning'
);

Example: button class and button text

function myOnConfirmationFunction() {
    // do this when the modal is confirmed
}
ConcreteAlert.confirm(
    <?php echo json_encode(t('My confirm message.')); ?>,
    myOnConfirmationFunction,
    'btn-danger',
    <?php echo json_encode(t('Delete')); ?>
);

Notifications

info()

info(defaults)
concrete/js/build/core/app/alert.js

  • defaults
    • type - info
    • icon - Font Awesome question icon minus the "fa-" prefix
  • title - the notification title (plain text or HTML) displayed as an h4 element
  • message - the notification message (plain text or HTML)

Example:

ConcreteAlert.info({
    title: <?php echo json_encode(t('My Notification Title')); ?>,
    message: <?php echo json_encode(t('My notification message.')); ?>
});

error()

error(defaults)
concrete/js/build/core/app/alert.js

  • defaults
    • type - error
    • icon - Font Awesome exclamation-circle icon minus the "fa-" prefix
  • title - the notification title (plain text or HTML) displayed as an h4 element
  • message - the notification message (plain text or HTML)

Example:

ConcreteAlert.error({
    title: <?php echo json_encode(t('My Notification Title')); ?>,
    message: <?php echo json_encode(t('My notification message.')); ?>
});

notify()

notify(defaults)
concrete/js/build/core/app/alert.js

  • defaults
    • type - success
    • icon - Font Awesome check icon minus the "fa-" prefix
    • delay - 2000 (milliseconds)
  • title - the notification title (plain text or HTML) displayed as an h4 element
  • message - the notification message (plain text or HTML)
  • callback - an optional inline function or named function, called when the notification is closed or hidden after a delay

Example:

ConcreteAlert.notify({
    title: <?php echo json_encode(t('My Notification Title')); ?>,
    message: <?php echo json_encode(t('My notification message.')); ?>
});

Example: inline function callback

ConcreteAlert.notify({
    title: <?php echo json_encode(t('My Notification Title')); ?>,
    message: <?php echo json_encode(t('My notification message.')); ?>,
    callback: function() {
        // do this when the notification is closed or hidden
    }
});

Example: named function callback

function myNotificationCallbackFunction() {
    // do this when the notification is closed or hidden
}
ConcreteAlert.notify({
    title: <?php echo json_encode(t('My Notification Title')); ?>,
    message: <?php echo json_encode(t('My notification message.')); ?>,
    callback: myNotificationCallbackFunction
});

Example: type, icon, title, message, and hide options

ConcreteAlert.notify({
   type: 'info',
   icon: 'internet-explorer',
   title: <?php echo json_encode(t('Old Browser Alert')); ?>,
   message: <?php echo json_encode(t('Ewwww you are using an old version of Internet Explorer!')); ?>,
   hide: false
});

Using PNotify Directly

PNotify()

Example:

new PNotify({
    type: 'success',
    icon: 'fa fa-thumbs-up',
    title: <?php echo json_encode(t('Page Errors')); ?>,
    text: <?php echo json_encode(t('Your page has no errors.')); ?>,
    hide: false
});

UserInterface "helper/concrete/ui" Service

notify()

notify($arguments)
concrete/src/Application/Service/UserInterface.php

  • defaults
    • type - success
    • icon - fa fa-check-mark
    • hide - false
    • addclass - ccm-notification-page-alert
    • form - false
  • title - the notification title (plain text or HTML) displayed as an h4 element
  • text - the notification message (plain text or HTML)
  • buttons - an optional array() of one or more notification buttons

Example:

echo Core::make('helper/concrete/ui')->notify(
    [
        'type' => 'error',
        'icon' => 'fa fa-user',
        'title' => t('Editor Permissions Disabled'),
        'text' => t('Please contact the site administrator.')
    ]
);

Example: display a notification with a button

echo Core::make('helper/concrete/ui')->notify(
    [
        'type' => 'info',
        'icon' => 'fa fa-question',
        'title' => t('Member Survey'),
        'text' => t('Please take a moment to fill out the yearly member survey.'),
        'buttons' => [
            sprintf('<a href="%s" class="btn btn-primary">%s</a>', \URL::to('/survey'), t('Click Here'))
        ]
    ]
);

Example: display a notification with two buttons

echo Core::make('helper/concrete/ui')->notify(
    [
        'type' => 'info',
        'icon' => 'fa fa-hourglass',
        'title' => t('Site Task Reminder'),
        'text' => t('You have site task maintenance to perform.'),
        'buttons' => [
            sprintf('<a href="%s">%s</a>', \URL::to('/go-to-tasks'), t('Go to tasks')),
            sprintf('<a href="%s">%s</a>', \URL::to('/remind-me-later'), t('Remind me later'))
        ]
    ]
);
Loading Conversation