Updating example

Now we are going to view ZPT-JS in action!

Managing the list of objects

This example shows dictionary actions using CSS animations. Use the next form to manage the list of objects:

Add object. Add an object to the list.
Object id:
Update object. Update the id of the object.
Current object id: New object id:
Remove object. Remove an object from the list.
Object id:
Add item to object. Add an item to an object.
Object id: Item:
Update item from object. Update an item from an object.
Object id: Current item: New item:
Remove item from object. Remove an item from an object.
Object id: Item:

List of objects

Object id: An object id
- An item

How does it work?

To build the initial list of objects:

// Init dictionary
var dictionary = {
    objects: [
        {
            id: 'object1',
            items: [ 'item1', 'item2', 'item3' ]
        },
        {
            id: 'object2',
            items: [ 'item1', 'item2', 'item3' ]
        }
    ]
};

// Invoke ZPT
zpt.run(
    {
        command: 'preload',
        root: document.body,
        dictionary: dictionary,
        declaredRemotePageUrls: [ 'templates.html' ],
        maxFolderDictionaries: 5,
        callback: function(){
            zpt.run();
            
            // Here is the event listeners code, it will be explained hereunder!
    }

When the Add object button is clicked:

document.getElementById( 'addObjectButton' ).addEventListener( 'click', function(){

    var objectId = document.getElementById( 'objectIdToAdd' ).value;
    if ( ! objectId ){
        alert( 'Please, type an object id!' );
        return;
    }

    zpt.run({
        command: 'update',
        dictionaryActions: [
            {
                id: 'objects',
                action: 'createArray',
                index: '_last_',
                newElement: {
                    id: objectId,
                    items: []
                },
                animation: 'createKeyframes 1s 3'
            }
        ]
    });
});

When the Update object button is clicked:

document.getElementById( 'updateObjectButton' ).addEventListener( 'click', function(){

    var currentObjectId = document.getElementById( 'currentObjectIdToUpdate' ).value;
    if ( ! currentObjectId ){
        alert( 'Please, type a current object id!' );
        return;
    }
    var newObjectId = document.getElementById( 'newObjectIdToUpdate' ).value;
    if ( ! newObjectId ){
        alert( 'Please, type a new current object id!' );
        return;
    }

    zpt.run({
        command: 'update',
        dictionaryActions: [
            {
                search: [
                    'objects',
                    {
                        id: currentObjectId
                    }
                ],
                action: 'updateObject',
                property: 'id',
                newElement: newObjectId,
                animation: 'updateKeyframes 1s 3'
            }
        ]
    });
});

When the Remove object button is clicked:

document.getElementById( 'removeObjectButton' ).addEventListener( 'click', function(){

    var objectId = document.getElementById( 'objectIdToRemove' ).value;
    if ( ! objectId ){
        alert( 'Please, type an object id!' );
        return;
    }

    zpt.run({
        command: 'update',
        dictionaryActions: [
            {
                id: 'objects',
                action: 'deleteArray',
                currentElement: {
                    id: objectId
                },
                animation: 'deleteKeyframes 1s 3'
            }
        ]
    });
});

When the Add item button is clicked:

document.getElementById( 'addItemButton' ).addEventListener( 'click', function(){

    var objectId = document.getElementById( 'objectFromItemToAdd' ).value;
    if ( ! objectId ){
        alert( 'Please, type an object id!' );
        return;
    }

    var item = document.getElementById( 'itemToAdd' ).value;
    if ( ! item ){
        alert( 'Please, type an item!' );
        return;
    }

    zpt.run({
        command: 'update',
        dictionaryActions: [
            {
                search: [
                    'objects',
                    {
                        id: objectId
                    },
                    'items'
                ],
                action: 'createArray',
                index: '_last_',
                newElement: item,
                animation: 'createKeyframes 1s 3'
            }
        ]
    });
});

When the Update item button is clicked:

document.getElementById( 'updateItemButton' ).addEventListener( 'click', function(){

    var objectId = document.getElementById( 'objectFromItemToUpdate' ).value;
    if ( ! objectId ){
        alert( 'Please, type an object id!' );
        return;
    }

    var currentItem = document.getElementById( 'currentItemToUpdate' ).value;
    if ( ! currentItem ){
        alert( 'Please, type a current item!' );
        return;
    }

    var newItem = document.getElementById( 'newItemToUpdate' ).value;
    if ( ! newItem ){
        alert( 'Please, type a new item!' );
        return;
    }

    zpt.run({
        command: 'update',
        dictionaryActions: [
            {
                search: [
                    'objects',
                    {
                        id: objectId
                    },
                    'items'
                ],
                action: 'updateArray',
                currentElement: currentItem,
                newElement: newItem,
                animation: 'updateKeyframes 1s 3'
            }
        ]
    });
});

When the Remove item button is clicked:

document.getElementById( 'removeItemButton' ).addEventListener( 'click', function(){

    var objectId = document.getElementById( 'objectFromItemToRemove' ).value;
    if ( ! objectId ){
        alert( 'Please, type an object id!' );
        return;
    }

    var item = document.getElementById( 'itemToRemove' ).value;
    if ( ! item ){
        alert( 'Please, type an item!' );
        return;
    }

    zpt.run({
        command: 'update',
        dictionaryActions: [
            {
                search: [
                    'objects',
                    {
                        id: objectId
                    },
                    'items'
                ],
                action: 'deleteArray',
                currentElement: item,
                animation: 'deleteKeyframes 1s 3'
            }
        ]
    });
});

The keyframes styles of animation elements are embedded in the HTML header:

@keyframes createKeyframes {
    0% { 
        color: black;
    }
    100% { 
        color: blue;
        font-size: 150%;
    }
}
@keyframes updateKeyframes {
    0% { 
        color: black;
    }
    100% { 
        color: orange;
        font-size: 150%;
    }
}
@keyframes deleteKeyframes {
    0% { 
        color: black;
    }
    100% { 
        color: red;
        font-size: 150%;
    }
}

ZPT-JS tutorial - Updating example

Managing the list of objects

List of objects

How does it work?