Documentation 2.x and 3.x

Docs | Widgets

Catch Javascript events

Do some action on widget modification or deletion

Confirm widget

This event is thrown immediately after the system gets a new HTML code after a widget has been confirmed or canceled.

Please note that this event is also called when a new widget has been added.

Paste following code anywhere in your website (eg. ip_themes/lt_pagan/site.js):

$('.ipBlock').bind('reinitRequired.ipWidget', function(event) {
    $block = $(event.currentTarget);
    //your code
});

$block is jQuery variable pointing to the whole content block and not the particular widget that has been edited.

Delete widget

deleteWidget.ipBlock event is thrown every time when widget has been deleted. This event returns instanceId variable. See the code below for implementation.

$('.ipBlock').bind('deleteWidget.ipBlock', function(event, instanceId) {
    $block = $(event.currentTarget);
    //your code
});

Full example

Use the code below to catch all modifications to the widgets. It alerts you this information:

  • Event - modified or deleted;
  • Block - id attribute;
  • Widget - id attribute;
  • State - admin or preview;
  • Type - widget codename, eg. IpTitle, YourExample, etc.

Instead of alert you can do any action you need. Filter by each variable to do exactly what you need.

There's one catch. No event is triggered on newly added widget when "Cancel" button is clicked. In such event widget is removed, but "delete" event isn't fired.

    // global variable to keep states of all widgets
    var widgetsState = new Array();

    // defining default state of all widgets
    $('.ipBlock').each(function(){
        $(this).find('.ipWidget').each(function(){
            var $widget = $(this);
            widgetsState[$widget.attr('id')] = $widget.hasClass('ipAdminWidget') ? 'admin' : 'preview';
        });
    });

    // widget confirmed/canceled (new or edited)
    $('.ipBlock').bind('reinitRequired.ipWidget', function(event) {
        var $block = $(event.currentTarget);
        $block.find('.ipWidget').each(function(){
            var $widget = $(this),
                widgetId = $widget.attr('id'),
                state = $widget.hasClass('ipAdminWidget') ? 'admin' : 'preview',
                regexp = /ip(Admin|)Widget\-(.*)\s+/g,
                found = regexp.exec($widget.attr('class')),
                type = found[2];
            if (state != widgetsState[widgetId]) { // state has been changed
                //console.log('Event: modified; Block: #'+$block.attr('id')+'; Widget: #'+widgetId+'; State: '+state+'; Type: '+type);
                alert('Event: modified; Block: #'+$block.attr('id')+'; Widget: #'+widgetId+'; State: '+state+'; Type: '+type);
                widgetsState[widgetId] = state; // declaring new state
            }
        });
    });

    // widget deleted
    $('.ipBlock').bind('deleteWidget.ipBlock', function(event, instanceId) {
        var $block = $(event.currentTarget),
            widgetId = 'ipWidget-'+instanceId;
            $widget = $('#'+widgetId),
            state = $widget.hasClass('ipAdminWidget') ? 'admin' : 'preview',
            regexp = /ip(Admin|)Widget\-(.*)\s+/g,
            found = regexp.exec($widget.attr('class')),
            type = found[2];
        //console.log('Event: deleted; Block: #'+$block.attr('id')+'; Widget: #'+widgetId+'; State: '+state+'; Type: '+type);
        alert('Event: deleted; Block: #'+$block.attr('id')+'; Widget: #'+widgetId+'; State: '+state+'; Type: '+type);
    });

Missing some event? Please comment. We will implement it if possible.

Comments (2)

Raimondas

Raimondas

What about catching an event when widget is moved? I know it triggers the same reinitRequired.ipWidget event, but the state doesn't change(or am I missing something here?). How does one check if the widget has been moved?

Mangirdas

Mangirdas

widget events are not complete. And all events including "moving" should be triggered at some point. But at the moment I'm curious how would you use those events? Why do you need widget moved in particular?

Write a comment

You must be logged in to comment.