Extending JavaScript
Properly extending JavaScript components allows you to modify existing functionality with the lowest impact to the skin.
About this task
Procedure
- Legacy Content Delivery provides an empty JavaScript file specifically for custom modifications. Create or modify ContentDelivery_home/db/LiveContent/ui/skins/<your skin>/js/extensions.js.
If you have additional JavaScript files, you can add these to the HTML templates after the other
<script>elements. - Identify the JavaScript component that you need to extend. The Legacy Content Delivery JavaScript functionality is organized around components, which are JavaScript prototypes containing variables and functions related to a specific part of the application. For example, the
lcContentcomponent is located in the lcContent.js file and specifically deals with the loading, rendering, and filtering of content (TOC, indexes, topics). - Modify skin/<your skin>/js/extensions.js.
- Add an extension prototype for each JavaScript component you need to modify. You must add both a properly named function and prototype. The name of the extension class is the name of the original component with an
_extensionappended, such aslcContent_extension.function lcContent_extension() { // initialize flags or variables here }; lcContent_extension.prototype = { extensionInit: function() { // this function is execute on page load - adding a simple alert here to confirm the extension is being loaded. alert("I am lcContent_extension and I am in my init routine"); } }; - Modify your new extension class to provide the required JavaScript functionality. You can create new functionality, or override existing functionality in the parent JavaScript component. For example, the
lcContentincludes a functionloadDocwhich is responsible for loading HTML documents in the viewing pane. If you created thelcContent_extensionand added aloadDocfunction, this override function would be executed in place of the parent component's function.function lcContent_extension() { // initialize flags or variables here }; lcContent_extension.prototype = { extensionInit: function() { // this function is execute on page load }, loadDoc: function(event, obj) { // instead of loading a document as normal, I will post a JavaScript alert alert("I am alerting instead of loading a document!"); } }; - In order to minimize the amount of JavaScript customization required, you can use the parent component's
prototypeto get access to the parent's original functions. This allows you to easily create custom JavaScript which is executed before and after the core function, instead of completely overriding the core function. By using the standard JavaScriptprototype, you can execute custom code before and after the function call as shown below.Note: Many core functions are built around asynchronous JavaScript requests (AJAX) to the Legacy Content Delivery server to retrieve HTML, XML, or JSON. In this case, the code after theprototypecall may execute before the asynchronous request completes.function lcContent_extension() { // initialize flags or variables here }; lcContent_extension.prototype = { extensionInit: function() { // this function is execute on page load }, loadDoc: function(event, obj) { alert("pre super function"); lcContent.prototype.loadDoc.call(this, event, obj); alert("post super function"); } }; - Upload the new skin customization into the database.
- You can upload the resources using the web UI, as described by Adding a Skin and Resources.
- You can also update the skins via the command line using the loaddb tool. Copy the updated skin resources from the source code repository to ContentDelivery_home/db/LiveContent/ui/skins/<your_skin>/.
- On Windows, to load the most recent changes into the database run this command:
loaddb.bat UPGRADE
- On Linux, run this command:
loaddb.sh UPGRADE
- On Windows, to load the most recent changes into the database run this command: