53,890
edits
Add Adobe Launch and Help Overlay
m (updated to latest version from beta before installed new landing page.) |
(Add Adobe Launch and Help Overlay) |
||
| Line 6: | Line 6: | ||
} | } | ||
/* Adobe | /* Add Adobe Launch 2020-11-12 | ||
* There is a corresponding section in override.php to load the library */ | |||
$(document).ready(function(){ | |||
// information to record | |||
var config = { | |||
}; | 'site_id': 'FamilySearch', | ||
'site_language': mw.config.get('wgContentLanguage'), // e.g. 'en' | |||
'page_channel': 'Wiki', | |||
'page_detail': document.location.pathname + document.location.search, //'Home' for the homepage or a unique page title for other pages; including querystring | |||
'page_type': 'wiki', | |||
'visitor_state': 'lo' | |||
}; | |||
// send it | |||
_satellite.track('page_view', config); | |||
console.log("recorded page view for " + config.page_detail); | |||
}); | |||
/* End Adobe Launch code */ | |||
function getCookie(name) { | function getCookie(name) { | ||
| Line 365: | Line 371: | ||
} | } | ||
/* end code for landing page*/ | /* end code for landing page*/ | ||
/** 2020/08/31 Add code for new Help Menu Overlay */ | |||
// URL for bringing in the bundle to the wiki | |||
const url = '/wiki/public_html/helptray.js'; | |||
// the selector for the Help button in the header | |||
const button = document.querySelector('#helpLink'); | |||
button.addEventListener('click', function () { | |||
// If the script that brings in the Help Overlay isn't on the page yet, we know | |||
// we need to load it in | |||
if ( typeof window.renderHelpTray === "undefined" ) { | |||
const script = document.createElement('script'); | |||
script.setAttribute('src', url); | |||
// Once the script loads, we need to do a little more set up and then actually | |||
// open the Help Overlay | |||
script.onload = function () { | |||
// This event is fired when the Help Overlay is rendered for the first time | |||
// Setting { once: true } as an option avoids the potential for multiple | |||
// times getting called. Once this event fires, we just fire the event to | |||
// let the Help Overlay it needs to open | |||
document.addEventListener('helpTrayReady', function () { | |||
document.dispatchEvent(new CustomEvent('openHelpTray')); | |||
}, { once: true }); | |||
// Here we create an element to render the Help Overlay on. Just a generic div works | |||
const renderDiv = document.createElement('div'); | |||
// We add an ID in case we need to easily reference it elsewhere | |||
renderDiv.id = 'helpOverlayRoot'; | |||
// If you go the route of creating the element programatically, be sure to add it | |||
// to the body somewhere. Here we just put at the end of the <body> | |||
document.body.appendChild(renderDiv); | |||
// This is a consistent way to get info about the size and position of the button | |||
// We can use this to determine where to set the initial position (the x being pulled | |||
// out here will be the left of the button, which is the correct x value to start the | |||
// help tray at. The y is the top of the button, which we can add the button's height | |||
// to in order to get the correct y value to start the help tray at) | |||
const rect = button.getBoundingClientRect(); | |||
const x = rect.left; | |||
const y = rect.top; | |||
const height = rect.height; | |||
// Finally, call the renderHelpTray function with the element (required) and the | |||
// initial position (optional but highly recommended) | |||
window.renderHelpTray(renderDiv, [x, y + height]); | |||
}; | |||
document.head.insertBefore(script, document.head.firstChild); | |||
} else { | |||
// If we get to this else, the script is already on the page, so we just need | |||
// to dispatch the appropriate event. At a minimum, this can just fire the | |||
// openHelpTray event, but the ideal scenario is that the button click acts as | |||
// a toggle. This example shows how to check if the Help Overlay is already open | |||
// on the page, and fires the appropriate event based on that | |||
const eventName = document.querySelector('[data-test=helpOverlayCloseButton]') ? 'closeHelpTray' : 'openHelpTray'; | |||
document.dispatchEvent(new CustomEvent(eventName)); | |||
} | |||
}); | |||