Skip to main content
<p class="mt-script-comment">Page summary display</p>
<pre class="script">
template('MindTouch/Controls/PageOverview');</pre>
<h2>Lead Routing Updates</h2>
<p>Details on Lead Routing Updates</p>
<h3>Associated Content</h3>
<ul id="associated-content-ul">
<li><a href="https://service.projectplace.com/#project/1312988953/documents/410215665/1659146954" title="https://service.projectplace.com/#project/1312988953/documents/410215665/1659146954">Lead Routing Standardization Process August 2020 v1</a></li>
<li><a href="https://service.projectplace.com/#project/1312988953/documents/410215665/1659142508" title="https://service.projectplace.com/#project/1312988953/documents/410215665/1659142508">Lead Routing Updates - Live_August 2020</a></li>
</ul>
<p> </p>
<div class="comment">
<div class="mt-comment-meta">
<div class="mt-comment-author">Scotty Scott</div>
<time class="mt-comment-datetime" datetime="2021-07-20T20:55:21.679Z">Jul 20, 2021, 3:55 PM</time></div>
<div class="mt-comment-content">
<h4><span class="mt-color-c0392b"><u><strong>=> PLEASE DO NOT EDIT BELOW HERE <=</strong></u></span></h4>
</div>
</div>
<div class="modal" id="vidyard-video-modal">
<div class="modal-content">
<div class="modal-header"><span class="close"> </span>
<h3 id="vidyard-video-title"> </h3>
</div>
<div class="modal-body">
<div id="vidyard-video-player"> </div>
</div>
</div>
</div>
<pre class="script-css">
/* updated MindTouch elemnts for the video modal */
.elm-header-global-nav.elm-nav.lower-z-index,
.elm-header-global-nav.elm-nav.elm-fixed-header.lower-z-index,
.elm-header-notice.lower-z-index,
.elm-header-notice.fixed.lower-z-index,
.elm-header-user-nav.lower-z-index,
.elm-header-user-nav.elm-nav.lower-z-index,
.elm-nav.elm-header-notice.elm-draft-notice.lower-z-index,
.elm-nav.elm-header-notice.elm-draft-notice.fixed.lower-z-index { z-index: 1 !important; }
body.no-scrollbars { position: static; overflow: hidden; }
/* Vidyard video modal styles */
#vidyard-video-section {
display: none;
width: 80%;
margin: auto !important;
}
.vidyard-player-container, .vidyard-player-embed {
width: auto !important;
max-width: 1920px !important;
}
#vidyard-video-modal {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 9999 !important;
background: rgba(26, 27, 47, 0.96);
opacity: 1;
text-align: center;
}
.modal-content {
display: block;
margin-left: auto;
margin-right: auto;
width: 96%;
}
.modal-header {
padding: 2px 16px;
color: white;
text-align: right
}
.modal-header .close {
padding: 5px 5px 5px 10px;
color: rgba(255, 255, 255, 0.72);
font-size: 24px;
font-weight: bold;
cursor: pointer;
float: right;
}
.modal-header h3#vidyard-video-title {
display: block;
margin-top: 10px;
text-align: left;
color: #ffffff;
}
@media (min-width: 769px) {
.modal-content {
width: 80%;
}
}
/* do not display Related Articles */
footer.elm-content-footer div.elm-related-articles-container {
display: none !important;
}
/* only display file attachments to admins */
.elm-attachments {
display: none !important;
}
.columbia-draft .elm-attachments,
.columbia-live.page-mode-editor .elm-attachments,
.columbia-draft.page-mode-editor .elm-attachments {
display: block !important;
}</pre>
<pre class="script-jem">
window.onload = function() {
prepareVidyardVideoForStreaming();
removeTitleTags();
}
//- we only need to search through the associated content links
const associatedContentUlElement = document.getElementById("associated-content-ul");
const associatedContentAnchorTags = associatedContentUlElement.getElementsByTagName("a");
//- get the modal
const modal = document.getElementById("vidyard-video-modal");
// Get the <span> element that closes the modal
const closeButton = document.getElementsByClassName("close")[0];
function prepareVidyardVideoForStreaming() {
let containsVidyardVideoLink = false;
var vidyardVideoLinks;
var vidyardUuid;
if (associatedContentAnchorTags) {
//- search for video links in the associated content list
for (let i = 0; i < associatedContentAnchorTags.length; i++) {
var str = associatedContentAnchorTags[i].getAttribute("href");
if (str.indexOf("play.vidyard.com") > 0) {
containsVidyardVideoLink = true;
vidyardUuid = str.substring(25, str.lastIndexOf("."));
associatedContentAnchorTags[i].setAttribute("id", vidyardUuid);
associatedContentAnchorTags[i].setAttribute("data-uuid", vidyardUuid);
}
}
}
if (containsVidyardVideoLink) {
//- add click event listener to video links in associated content list
vidyardVideoLinks = associatedContentUlElement.querySelectorAll('a[data-uuid]');
for (let i = 0; i < vidyardVideoLinks.length; i++) {
vidyardVideoLinks[i].addEventListener("click", openVidyardVideoModal, false);
};
}
}
function openVidyardVideoModal(e) {
e.preventDefault();
this.blur(); //- prevent link text from displaying focus view
let theVidyardUuid = this.id; //- get and set clicked element ID
//- set video title
document.getElementById("vidyard-video-title").innerHTML = document.getElementById(theVidyardUuid).textContent;
//- set modal close button value
//- we don't set this in the HTML, because the "x" (in the modal code) is visible on the edit page, which can be confusing
closeButton.innerHTML = "x";
//- set video player content ready for viewing
document.getElementById("vidyard-video-player").innerHTML = '<div class="vidyard-player-container" uuid="' + theVidyardUuid + '" style="margin: auto; width: 100%; height: auto; overflow: hidden; display: block;"><div class="vidyard-div-' + theVidyardUuid + '" role="none" aria-label="Vidyard media player" style="position: relative; padding-bottom: 56.25%; height: 0px; overflow: hidden; max-width: 100%; background-color: transparent;"><div class="vidyard-inner-container-' + theVidyardUuid + '" style="position: absolute;height: 100%; width: 100%; " data-pl="false"> <iframe allow="autoplay; fullscreen; picture-in-picture; camera; microphone; display-capture" allowfullscreen="" allowtransparency="true" referrerpolicy="no-referrer-when-downgrade" aria-label="Vidyard video player" class="vidyard-iframe-' + theVidyardUuid + '" frameborder="0" height="100%" width="100%" scrolling="no" src="https://play.vidyard.com/' + theVidyardUuid + '?disable_popouts=1&amp;type=inline&amp;v=4.2.30" title="Vidyard video player" style="opacity: 1; background-color: transparent; position: absolute; top: 0px; left: 0px;"></iframe></div></div></div>';
//- lower these z-indexes when the modal is open
let lowerZindexes = addLowerZindexClass();
//- open the modal
modal.style.display = "block";
}
//- when the user clicks on the <span> (x), close the modal
closeButton.onclick = function() {
modal.style.display = "none";
document.getElementById("vidyard-video-player").innerHTML = "";
//- return these z-indexes to their previous state when the modal is closed
let removeLowerZindexes = removeLowerZindexClass();
}
//- when the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
document.getElementById("vidyard-video-player").innerHTML = "";
//- return these z-indexes to their previous state when the modal is closed
let removeLowerZindexes = removeLowerZindexClass();
}
}
//- we want to remove scrollbars when the modal is open
const body = document.body;
//- these elemnts display on top of the modal by default, so we want to lower their z-index when the modal is displayed
const elementsToUpdateZindex01 = document.getElementsByClassName("elm-header-global-nav elm-nav");
const elementsToUpdateZindex02 = document.getElementsByClassName("elm-header-global-nav elm-nav elm-fixed-header");
const elementsToUpdateZindex03 = document.getElementsByClassName("elm-header-notice");
const elementsToUpdateZindex04 = document.getElementsByClassName("elm-header-notice fixed");
const elementsToUpdateZindex05 = document.getElementsByClassName("elm-header-user-nav");
const elementsToUpdateZindex06 = document.getElementsByClassName("elm-header-user-nav elm-nav");
const elementsToUpdateZindex07 = document.getElementsByClassName("elm-nav elm-header-notice elm-draft-notice");
const elementsToUpdateZindex08 = document.getElementsByClassName("elm-nav elm-header-notice elm-draft-notice fixed");
const elementsToUpdateZindex = [elementsToUpdateZindex01, elementsToUpdateZindex02, elementsToUpdateZindex03, elementsToUpdateZindex04, elementsToUpdateZindex05, elementsToUpdateZindex06, elementsToUpdateZindex07, elementsToUpdateZindex08];
function addLowerZindexClass() {
for (let i = 0; i < elementsToUpdateZindex.length; i++) {
if (elementsToUpdateZindex[i]) {
for (let x = 0; x < elementsToUpdateZindex[i].length; x++) {
elementsToUpdateZindex[i][x].classList.add("lower-z-index");
}
}
}
//- we also want to remove scrollbars when the modal is open
body.classList.add("no-scrollbars");
}
function removeLowerZindexClass() {
for (let i = 0; i < elementsToUpdateZindex.length; i++) {
if (elementsToUpdateZindex[i]) {
for (let x = 0; x < elementsToUpdateZindex[i].length; x++) {
elementsToUpdateZindex[i][x].classList.remove("lower-z-index");
}
}
}
//- we also want to add scrollbars back when the modal is closed
body.classList.remove("no-scrollbars");
}
//- we want to remove all title tags (tool tips) from anchor links within the main content area
//- MindTouch doesn't update the title tag when a link is updated, which is bad for usability
function removeTitleTags() {
//- we only need to search through the main content area links
let mainContentElement = document.getElementById("elm-main-content");
let mainContentAnchorTags = mainContentElement.getElementsByTagName("a");
for(var i = 0; i < mainContentAnchorTags.length; i++) {
mainContentAnchorTags[i].removeAttribute("title");
}
}</pre>
<p> </p>
