building a custom javascript recipe for contentdm
TRANSCRIPT
![Page 1: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/1.jpg)
Ask the Experts – March 4, 2020
Building a custom JavaScript recipe for CONTENTdm
Shane HuddlestonProduct Manager, OCLC
![Page 2: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/2.jpg)
• Some background resources
• Anatomy of a JavaScript recipe
• Let’s building a recipe!
• Questions
The plan for today
![Page 4: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/4.jpg)
Resourceshelp.oclc.org
(search for “website customization”)
CONTENTdm Cookbook
Demo sitecdmdemo.contentdm.oclc.org
![Page 5: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/5.jpg)
• Function wrapper(IIFE: Immediately Invoked Function Expression)
• Doing the thing you want to do
• Timing the action within the page lifecycle
Anatomy of a JS recipe
![Page 6: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/6.jpg)
(function() {
// do stuff here
})();
![Page 7: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/7.jpg)
(function() {
function logger(text) {console.log("msg: ", text);}
})();
![Page 8: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/8.jpg)
CONTENTdm event lifecyclestartup / load JS file(s)
cdm-app:ready
cdm-page:enter
cdm-page:ready
cdm-page:leave
![Page 9: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/9.jpg)
The “update” eventstartup / load JS file(s)
cdm-app:ready
cdm-page:enter
cdm-page:ready
cdm-page:leave
cdm-page:update
![Page 10: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/10.jpg)
(function() {
function logger(text) {console.log('msg: ', text);}
document.addEventListener('cdm-app:ready', function() {
logger('hello, world');
});})();
![Page 11: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/11.jpg)
• Insert “Follow” button in page footers
• Adhere to Twitter’s development guide
• Use Twitter’s helper library
• Make sure button doesn’t get duplicated
Build Twitter “Follow” button
![Page 13: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/13.jpg)
• Load Twitter’s official helper script
• Insert HTML button into page footer
• Event lifecycle timing is crucial
How the recipe works
![Page 14: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/14.jpg)
• Website Configuration Tool
• Global > Custom > Custom Scripts
• Browse to twitter-follow-button.js file
• Save & Publish
Loading the recipe
![Page 15: Building a custom JavaScript recipe for CONTENTdm](https://reader030.vdocuments.us/reader030/viewer/2022032314/6230b1c42d8fac71a55cd4eb/html5/thumbnails/15.jpg)
Questions?