Initail
This commit is contained in:
o3jvind
commit
da774da7b5
88
GWD_CCG_project/CasparCG.js
Normal file
88
GWD_CCG_project/CasparCG.js
Normal file
@ -0,0 +1,88 @@
|
||||
/*
|
||||
* Data sent from CasparCG Client as templateData
|
||||
* is pushed into corresponding HTML id element
|
||||
*
|
||||
* Usage:
|
||||
* insert a script reference in the HTML template header.
|
||||
* ex: <script type="text/javascript" src="CasparCG.js"></script>
|
||||
* Make sure that the id that you refer to is the innermost tag.
|
||||
* Everything within that tag id will be replaced by the value sent from CasparCG
|
||||
*
|
||||
* put together by Tomas Linden
|
||||
* modified by Øjvind Søgaard Andersen
|
||||
*
|
||||
Structure of data sent from CasparCG:
|
||||
<templateData>
|
||||
<componentData id="#idCaspar#">
|
||||
<data id="text" value="#valCaspar#" />
|
||||
</componentData>
|
||||
:
|
||||
:
|
||||
<componentData id="#idCaspar#">
|
||||
<data id="text" value="#valCaspar#" />
|
||||
</componentData>
|
||||
</templateData>
|
||||
*/
|
||||
// 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, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
||||
}
|
||||
|
||||
// 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 idTemplate = document.getElementById(idCaspar);
|
||||
if (idTemplate != undefined) {
|
||||
idTemplate.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');
|
||||
}
|
||||
284
GWD_CCG_project/GWD_CCG_example.html
Normal file
284
GWD_CCG_project/GWD_CCG_example.html
Normal file
@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>nytest</title>
|
||||
<meta name="generator" content="Google Web Designer 4.0.1.0625">
|
||||
<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: 90px;
|
||||
opacity: 1;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
30% {
|
||||
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;
|
||||
}
|
||||
.gwd-p-1hcy {
|
||||
color: rgb(255, 255, 255);
|
||||
opacity: 0;
|
||||
}
|
||||
.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>
|
||||
</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" id="f0">This is f0</p>
|
||||
<p class="gwd-p-hxjo gwd-gen-1gmrgwdanimation gwd-p-1i4z" id="f1">This is f1</p>
|
||||
<div class="gwd-animation-event event-1-animation" data-event-name="event-1" data-event-time="1500"></div>
|
||||
<script type="text/javascript" charset="utf-8" src="CasparCG.js"></script>
|
||||
<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>
|
||||
1
GWD_CCG_project/GWD_CCG_example_groups_archive
Normal file
1
GWD_CCG_project/GWD_CCG_example_groups_archive
Normal file
@ -0,0 +1 @@
|
||||
<html><!--THIS FILE IS AUTOMATICALLY GENERATED BY GOOGLE WEB DESIGNER. DO NOT EDIT MANUALLY.--><head></head><body></body></html>
|
||||
1
GWD_CCG_project/gwd-events-support.1.0.js
Normal file
1
GWD_CCG_project/gwd-events-support.1.0.js
Normal 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]++}
|
||||
1
GWD_CCG_project/gwd_workspace.json
Normal file
1
GWD_CCG_project/gwd_workspace.json
Normal 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_template"}
|
||||
88
GWD_CCG_template/CasparCG.js
Normal file
88
GWD_CCG_template/CasparCG.js
Normal file
@ -0,0 +1,88 @@
|
||||
/*
|
||||
* Data sent from CasparCG Client as templateData
|
||||
* is pushed into corresponding HTML id element
|
||||
*
|
||||
* Usage:
|
||||
* insert a script reference in the HTML template header.
|
||||
* ex: <script type="text/javascript" src="CasparCG.js"></script>
|
||||
* Make sure that the id that you refer to is the innermost tag.
|
||||
* Everything within that tag id will be replaced by the value sent from CasparCG
|
||||
*
|
||||
* put together by Tomas Linden
|
||||
* modified by Øjvind Søgaard Andersen
|
||||
*
|
||||
Structure of data sent from CasparCG:
|
||||
<templateData>
|
||||
<componentData id="#idCaspar#">
|
||||
<data id="text" value="#valCaspar#" />
|
||||
</componentData>
|
||||
:
|
||||
:
|
||||
<componentData id="#idCaspar#">
|
||||
<data id="text" value="#valCaspar#" />
|
||||
</componentData>
|
||||
</templateData>
|
||||
*/
|
||||
// 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, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
||||
}
|
||||
|
||||
// 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 idTemplate = document.getElementById(idCaspar);
|
||||
if (idTemplate != undefined) {
|
||||
idTemplate.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');
|
||||
}
|
||||
1
GWD_CCG_template/gwd-events-support.1.0.js
Normal file
1
GWD_CCG_template/gwd-events-support.1.0.js
Normal 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]++}
|
||||
1255
GWD_CCG_template/index.html
Normal file
1255
GWD_CCG_template/index.html
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user