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.
-
Update object. Update the id of the object.
-
Remove object. Remove an object from the list.
-
Add item to object. Add an item to an object.
-
Update item from object. Update an item from an object.
-
Remove item from object. Remove an item from an object.
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%; } }