Re-organised and migrated id to class

Instead of IDs being used this has been changed to HTML classes to allow for multiple items to arise from the same property.
Along side this CasparCG.js now checks if the entity is an img tag and replace src as opposed to innerHTML.
This commit is contained in:
2021-02-24 00:29:38 +00:00
parent 744b52541e
commit fdb9ff8992
9 changed files with 144 additions and 59 deletions

View File

@@ -0,0 +1,87 @@
/*
* Usage:
* insert a script reference in the HTML header.
* ex: <script type="text/javascript" src="CasparCG.js"></script>
* Make sure that the class that you refer to is the innermost tag.
* Either the item will have it's content replace or src updated if an image
*
* Items with classes 'CasparCG-XXX' will be replaced
* So f0 would have the class 'CasparCG-f0'
*
* put together by Tomas Linden
* modified by Mark Rapson
*/
// Global variable for data from CasparCG
var dataCaspar = {};
// Replace characters that could become a problem if left as is
function escapeHtml(unsafe) {
return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
}
// Parse templateData into an XML object
function parseCaspar(str) {
var xmlDoc;
if (window.DOMParser) {
parser = new DOMParser();
xmlDoc = parser.parseFromString(str, "text/xml");
}
dataCaspar = XML2JSON(xmlDoc.documentElement.childNodes);
}
// Make the XML templateData message into a more simple key:value object
function XML2JSON(node) {
var data = {}; // resulting object
for (k = 0; k < node.length; k++) {
var idCaspar = node[k].getAttribute("id");
var valCaspar = node[k].childNodes[0].getAttribute("value");
if (idCaspar != undefined && valCaspar != undefined) {
data[idCaspar] = valCaspar;
};
}
return data;
}
// Main function to insert data
function dataInsert(dataCaspar) {
for (var idCaspar in dataCaspar) {
var applicableElements = document.getElementsByClassName('CasparCG-' + idCaspar);
if (applicableElements) {
// Loop through Applicable DIVs
[].slice.call(applicableElements).forEach(function(currentElement) {
console.log(currentElement.tagName);
if (currentElement.tagName == 'img') {
//Set Image if img item
currentElement.src = dataCaspar[idCaspar];
} else {
//Set InnerHTML otherwise
currentElement.innerHTML = escapeHtml(dataCaspar[idCaspar]);
}
})
}
}
}
// Call for a update of data from CasparCG client
function update(str) {
parseCaspar(str); // Parse templateData into an XML object
dataInsert(dataCaspar); // Insert data
}
// insert data from CasparCg client when activated
function play(str) {
parseCaspar(str); // Parse templateData into an XML object
dataInsert(dataCaspar); // Insert data
}
// Call for a next from CasparCG client
function next() {
gwd.actions.timeline.play('document.body');
}
// Call for a stop from CasparCG client
function stop() {
gwd.actions.timeline.gotoAndPlay('document.body', 'stop');
}

View File

@@ -0,0 +1,87 @@
/*
* Usage:
* insert a script reference in the HTML header.
* ex: <script type="text/javascript" src="CasparCG.js"></script>
* Make sure that the class that you refer to is the innermost tag.
* Either the item will have it's content replace or src updated if an image
*
* Items with classes 'CasparCG-XXX' will be replaced
* So f0 would have the class 'CasparCG-f0'
*
* put together by Tomas Linden
* modified by Mark Rapson
*/
// Global variable for data from CasparCG
var dataCaspar = {};
// Replace characters that could become a problem if left as is
function escapeHtml(unsafe) {
return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
}
// Parse templateData into an XML object
function parseCaspar(str) {
var xmlDoc;
if (window.DOMParser) {
parser = new DOMParser();
xmlDoc = parser.parseFromString(str, "text/xml");
}
dataCaspar = XML2JSON(xmlDoc.documentElement.childNodes);
}
// Make the XML templateData message into a more simple key:value object
function XML2JSON(node) {
var data = {}; // resulting object
for (k = 0; k < node.length; k++) {
var idCaspar = node[k].getAttribute("id");
var valCaspar = node[k].childNodes[0].getAttribute("value");
if (idCaspar != undefined && valCaspar != undefined) {
data[idCaspar] = valCaspar;
};
}
return data;
}
// Main function to insert data
function dataInsert(dataCaspar) {
for (var idCaspar in dataCaspar) {
var applicableElements = document.getElementsByClassName('CasparCG-' + idCaspar);
if (applicableElements) {
// Loop through Applicable DIVs
[].slice.call(applicableElements).forEach(function(currentElement) {
console.log(currentElement.tagName);
if (currentElement.tagName == 'img') {
//Set Image if img item
currentElement.src = dataCaspar[idCaspar];
} else {
//Set InnerHTML otherwise
currentElement.innerHTML = escapeHtml(dataCaspar[idCaspar]);
}
})
}
}
}
// Call for a update of data from CasparCG client
function update(str) {
parseCaspar(str); // Parse templateData into an XML object
dataInsert(dataCaspar); // Insert data
}
// insert data from CasparCg client when activated
function play(str) {
parseCaspar(str); // Parse templateData into an XML object
dataInsert(dataCaspar); // Insert data
}
// Call for a next from CasparCG client
function next() {
gwd.actions.timeline.play('document.body');
}
// Call for a stop from CasparCG client
function stop() {
gwd.actions.timeline.gotoAndPlay('document.body', 'stop');
}

View File

@@ -0,0 +1,287 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nytest</title>
<meta name="generator" content="Google Web Designer 4.1.0.0711">
<style type="text/css" id="gwd-text-style">
p {
margin: 0px;
}
h1 {
margin: 0px;
}
h2 {
margin: 0px;
}
h3 {
margin: 0px;
}
</style>
<style type="text/css">
html, body {
width: 1920px;
height: 1080px;
margin: 0px;
}
body {
background-color: transparent;
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-style: preserve-3d;
}
.gwd-rect-157e {
position: absolute;
box-sizing: border-box;
border-width: 0px;
left: 0px;
top: 830px;
width: 1920px;
height: 0px;
background-image: none;
background-color: rgb(255, 0, 0);
}
@keyframes gwd-gen-lz8mgwdanimation_gwd-keyframes {
0% {
height: 0px;
opacity: 1;
background-color: rgb(255, 0, 0);
top: 930px;
animation-timing-function: linear;
}
10% {
height: 0px;
animation-timing-function: linear;
}
20% {
height: 80px;
opacity: 1;
animation-timing-function: linear;
}
30% {
height: 80px;
background-color: rgb(255, 0, 0);
animation-timing-function: linear;
}
40% {
height: 80px;
opacity: 1;
background-color: rgb(0, 255, 0);
top: 930px;
animation-timing-function: linear;
}
50% {
height: 80px;
opacity: 1;
background-color: rgb(0, 0, 255);
top: 930px;
animation-timing-function: linear;
}
60% {
height: 80px;
opacity: 1;
background-color: rgb(255, 0, 0);
top: 930px;
animation-timing-function: linear;
}
90% {
height: 80px;
opacity: 1;
animation-timing-function: linear;
}
100% {
height: 80px;
opacity: 0;
background-color: rgb(255, 0, 0);
top: 930px;
animation-timing-function: linear;
}
}
.htmlNoPages .gwd-gen-lz8mgwdanimation {
animation: gwd-gen-lz8mgwdanimation_gwd-keyframes 5s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-eb0kgwdanimation_gwd-keyframes {
0% {
height: 0px;
background-color: rgb(255, 0, 0);
opacity: 1;
animation-timing-function: linear;
}
10% {
height: 80px;
background-color: rgb(255, 0, 0);
opacity: 1;
animation-timing-function: linear;
}
30% {
background-color: rgb(255, 0, 0);
opacity: 1;
animation-timing-function: linear;
}
40% {
background-color: rgb(0, 255, 0);
opacity: 1;
animation-timing-function: linear;
}
50% {
height: 80px;
background-color: rgb(0, 0, 255);
opacity: 1;
animation-timing-function: linear;
}
60% {
height: 80px;
background-color: rgb(255, 0, 0);
opacity: 1;
animation-timing-function: linear;
}
90% {
height: 80px;
opacity: 1;
animation-timing-function: linear;
}
100% {
height: 80px;
background-color: rgb(255, 0, 0);
opacity: 0;
animation-timing-function: linear;
}
}
.htmlNoPages .gwd-gen-eb0kgwdanimation {
animation: gwd-gen-eb0kgwdanimation_gwd-keyframes 5s linear 0s 1 normal forwards;
}
.gwd-svg-40l0 {
top: 930px;
height: 0px;
opacity: 1;
}
.gwd-p-hxjo {
position: absolute;
height: 79.9761px;
font-family: Tahoma;
font-size: 48px;
left: 0px;
width: 1920px;
margin: 0px 0px 0px 40px;
top: 840px;
color: rgba(255, 255, 255, 0);
}
@keyframes gwd-gen-1hvogwdanimation_gwd-keyframes {
0% {
opacity: 0;
animation-timing-function: linear;
}
10% {
opacity: 0;
animation-timing-function: linear;
}
20% {
opacity: 1;
animation-timing-function: linear;
}
90% {
opacity: 1;
animation-timing-function: linear;
}
100% {
opacity: 0;
animation-timing-function: linear;
}
}
.htmlNoPages .gwd-gen-1hvogwdanimation {
animation: gwd-gen-1hvogwdanimation_gwd-keyframes 5s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-1gmrgwdanimation_gwd-keyframes {
0% {
opacity: 0;
animation-timing-function: linear;
}
20% {
opacity: 0;
animation-timing-function: linear;
}
30% {
opacity: 1;
animation-timing-function: linear;
}
90% {
opacity: 1;
animation-timing-function: linear;
}
100% {
opacity: 0;
animation-timing-function: linear;
}
}
.htmlNoPages .gwd-gen-1gmrgwdanimation {
animation: gwd-gen-1gmrgwdanimation_gwd-keyframes 5s linear 0s 1 normal forwards;
}
.gwd-p-1i4z {
top: 940px;
color: rgb(255, 255, 255);
opacity: 0;
width: 1880px;
}
.gwd-p-1hcy {
color: rgb(255, 255, 255);
opacity: 0;
width: 1880px;
}
.gwd-rect-ptf0 {
opacity: 1;
}
</style>
<script type="text/javascript" gwd-events="support" src="gwd-events-support.1.0.js"></script>
<script type="text/javascript" gwd-events="handlers">
gwd.auto_BodyEvent_1 = function(event) {
// GWD Predefined Function
gwd.actions.timeline.pause('document.body');
};
gwd.auto_BodyEvent_2 = function(event) {
// GWD Predefined Function
gwd.actions.timeline.pause('document.body');
};
gwd.auto_BodyEvent_3 = function(event) {
// GWD Predefined Function
gwd.actions.timeline.pause('document.body');
};
gwd.auto_BodyEvent_4 = function(event) {
// GWD Predefined Function
gwd.actions.timeline.pause('document.body');
};
</script>
<script type="text/javascript" gwd-events="registration">
// Support code for event handling in Google Web Designer
// This script block is auto-generated. Please do not edit!
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('document.body', 'event-1', gwd.auto_BodyEvent_1, false);
gwd.actions.events.addHandler('document.body', 'event-2', gwd.auto_BodyEvent_2, false);
gwd.actions.events.addHandler('document.body', 'event-3', gwd.auto_BodyEvent_3, false);
gwd.actions.events.addHandler('document.body', 'event-4', gwd.auto_BodyEvent_4, false);
gwd.actions.timeline.captureAnimationEnd(document.body);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('document.body', 'event-1', gwd.auto_BodyEvent_1, false);
gwd.actions.events.removeHandler('document.body', 'event-2', gwd.auto_BodyEvent_2, false);
gwd.actions.events.removeHandler('document.body', 'event-3', gwd.auto_BodyEvent_3, false);
gwd.actions.events.removeHandler('document.body', 'event-4', gwd.auto_BodyEvent_4, false);
gwd.actions.timeline.releaseAnimationEnd(document.body);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>
<script type="text/javascript" charset="utf-8" src="CasparCG.js"></script>
</head>
<body class="htmlNoPages" data-gwd-animation-labels="stop,4500">
<svg data-gwd-shape="rectangle" class="gwd-rect-157e gwd-gen-lz8mgwdanimation gwd-svg-40l0"></svg>
<svg data-gwd-shape="rectangle" class="gwd-rect-157e gwd-gen-eb0kgwdanimation gwd-rect-ptf0"></svg>
<p class="gwd-p-hxjo gwd-gen-1hvogwdanimation gwd-p-1hcy CasparCG-f0">This is f0</p>
<p class="gwd-p-hxjo gwd-gen-1gmrgwdanimation gwd-p-1i4z CasparCG-f1">This is f1</p>
<div class="gwd-animation-event event-1-animation" data-event-name="event-1" data-event-time="1500"></div>
<div class="gwd-animation-event event-2-animation" data-event-name="event-2" data-event-time="2000"></div>
<div class="gwd-animation-event event-3-animation" data-event-name="event-3" data-event-time="2500"></div>
<div class="gwd-animation-event event-4-animation" data-event-name="event-4" data-event-time="3000"></div>
</body>
</html>

View File

@@ -0,0 +1 @@
<html><!--THIS FILE IS AUTOMATICALLY GENERATED BY GOOGLE WEB DESIGNER. DO NOT EDIT MANUALLY.--><head></head><body></body></html>

View File

@@ -0,0 +1 @@
var gwd=gwd||{};gwd.actions=gwd.actions||{};gwd.actions.events=gwd.actions.events||{};gwd.actions.events.getElementById=function(id){var element=document.getElementById(id);if(!element){var pageDeck=document.querySelector("gwd-pagedeck")||document.querySelector("[is=gwd-pagedeck]");if(pageDeck){if(typeof pageDeck.getElementById==="function"){element=pageDeck.getElementById(id)}}}if(!element){switch(id){case"document.body":element=document.body;break;case"document":element=document;break;case"window":element=window;break;default:break}}return element};gwd.actions.events.addHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.addEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.removeHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.removeEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.setInlineStyle=function(id,styles){var element=gwd.actions.events.getElementById(id);if(!element||!styles){return}var transitionProperty=element.style.transition!==undefined?"transition":"-webkit-transition";var prevTransition=element.style[transitionProperty];var splitStyles=styles.split(/\s*;\s*/);var nameValue;splitStyles.forEach(function(splitStyle){if(splitStyle){var regex=new RegExp("[:](?![/]{2})");nameValue=splitStyle.split(regex);nameValue[1]=nameValue[1]?nameValue[1].trim():null;if(!(nameValue[0]&&nameValue[1])){return}element.style.setProperty(nameValue[0],nameValue[1])}});function restoreTransition(event){var el=event.target;el.style.transition=prevTransition;el.removeEventListener(event.type,restoreTransition,false)}element.addEventListener("transitionend",restoreTransition,false);element.addEventListener("webkitTransitionEnd",restoreTransition,false)};gwd.actions.timeline=gwd.actions.timeline||{};gwd.actions.timeline.dispatchTimedEvent=function(event){var customEventTarget=event.target;if(customEventTarget){var customEventName=customEventTarget.getAttribute("data-event-name");if(customEventName){event.stopPropagation();var event=document.createEvent("CustomEvent");event.initCustomEvent(customEventName,true,true,null);customEventTarget.dispatchEvent(event)}}};gwd.actions.timeline.captureAnimationEnd=function(element){if(!element){return}var animationEndEvents=["animationend","webkitAnimationEnd"];for(var i=0;i<animationEndEvents.length;i++){element.addEventListener(animationEndEvents[i],gwd.actions.timeline.dispatchTimedEvent,true)}};gwd.actions.timeline.releaseAnimationEnd=function(element){if(!element){return}var animationEndEvents=["animationend","webkitAnimationEnd"];for(var i=0;i<animationEndEvents.length;i++){element.removeEventListener(animationEndEvents[i],gwd.actions.timeline.dispatchTimedEvent,true)}};gwd.actions.timeline.pauseAnimationClassName="gwd-pause-animation";gwd.actions.timeline.CURRENT_LABEL_ANIMATION="data-gwd-current-label";gwd.actions.timeline.reflow=function(el){el.offsetWidth=el.offsetWidth};gwd.actions.timeline.pause=function(id){var el=gwd.actions.events.getElementById(id);el&&el.classList&&el.classList.add(gwd.actions.timeline.pauseAnimationClassName)};gwd.actions.timeline.play=function(id){var el=gwd.actions.events.getElementById(id);el&&el.classList&&el.classList.remove(gwd.actions.timeline.pauseAnimationClassName)};gwd.actions.timeline.togglePlay=function(id){var el=gwd.actions.events.getElementById(id);el&&el.classList&&el.classList.toggle(gwd.actions.timeline.pauseAnimationClassName)};gwd.actions.timeline.gotoAndPlay=function(id,animClass){var el=gwd.actions.events.getElementById(id);if(!(el&&el.classList&&id&&animClass)){return false}var currentLabelAnimClass=el.getAttribute(gwd.actions.timeline.CURRENT_LABEL_ANIMATION);if(currentLabelAnimClass){el.classList.remove(currentLabelAnimClass);el.removeAttribute(gwd.actions.timeline.CURRENT_LABEL_ANIMATION)}gwd.actions.timeline.play(id);if(currentLabelAnimClass==animClass){gwd.actions.timeline.reflow(el)}el.classList.add(animClass);el.setAttribute(gwd.actions.timeline.CURRENT_LABEL_ANIMATION,animClass);return true};gwd.actions.timeline.gotoAndPause=function(id,animClass){var el=gwd.actions.events.getElementById(id);if(!(el&&el.classList)){return false}if(gwd.actions.timeline.gotoAndPlay(id,animClass)){var timeoutId=window.setTimeout(function(){el.classList.add(gwd.actions.timeline.pauseAnimationClassName)},40)}return!!timeoutId};gwd.actions.timeline.gotoAndPlayNTimes=function(id,animClass,count,eventName){var el=gwd.actions.events.getElementById(id);el.gwdGotoCounters=el.gwdGotoCounters||{};var counters=el.gwdGotoCounters;var counterName=eventName+"_"+animClass+"_counter";if(typeof counters[counterName]=="undefined"){counters[counterName]=0}if(counters[counterName]<count){gwd.actions.timeline.gotoAndPlay(id,animClass)}counters[counterName]++}

View File

@@ -0,0 +1 @@
{"scope.version":"2","timeline.animationMode":"proMode","viewport.width":1203,"viewport.height":681,"library.openDirectories":[],"library.GroupsPath":{},"library.downloadedAssets":{},"publish.local.flatten":true,"publish.local.minify":false,"publish.local.inlineFiles":false,"publish.local.createZip":false,"publish.local.politeLoad":false,"publish.local.exportMozilla":true,"publish.local.exportWebkit":true,"publish.local.unpackGroups":true,"publish.local.addBorder":false,"publish.local.useLightBorder":false,"publish.local.borderColor":"rgba(0,0,0,1)","publish.drive.flatten":true,"publish.drive.minify":true,"publish.drive.inlineFiles":false,"publish.drive.createZip":true,"publish.drive.politeLoad":false,"publish.drive.exportMozilla":true,"publish.drive.exportWebkit":true,"publish.drive.unpackGroups":true,"publish.drive.addBorder":false,"publish.drive.useLightBorder":false,"publish.drive.borderColor":"rgba(0,0,0,1)","publish.studio.flatten":true,"publish.studio.minify":true,"publish.studio.inlineFiles":false,"publish.studio.createZip":true,"publish.studio.politeLoad":false,"publish.studio.exportMozilla":true,"publish.studio.exportWebkit":true,"publish.studio.unpackGroups":true,"publish.studio.addBorder":false,"publish.studio.useLightBorder":false,"publish.studio.borderColor":"rgba(0,0,0,1)","publish.dbm.flatten":true,"publish.dbm.minify":true,"publish.dbm.inlineFiles":false,"publish.dbm.createZip":true,"publish.dbm.politeLoad":false,"publish.dbm.exportMozilla":true,"publish.dbm.exportWebkit":true,"publish.dbm.unpackGroups":true,"publish.dbm.addBorder":false,"publish.dbm.useLightBorder":false,"publish.dbm.borderColor":"rgba(0,0,0,1)","publish.local.location":"C:\\CasparCG\\server_NRK\\template","publish.local.name":"GWD_CCG_example"}