540 lines
26 KiB
Handlebars
540 lines
26 KiB
Handlebars
<!DOCTYPE html>
|
|
{{>copyright }}
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="/js/axios.min.js"></script>
|
|
<script src="/js/fontawesome.all.min.js"></script>
|
|
<script src="/js/Sortable.min.js"></script>
|
|
<script src="/js/anime.min.js"></script>
|
|
<script src="/js/socket.io.js"></script>
|
|
<script src="/js/spx_gc.js"></script>
|
|
<script src="/js/spx_showConfig.js"></script>
|
|
<title>SPX | {{lang 'pagetitle.configshow'}}</title>
|
|
<link rel="icon" type="image/png" href="/img/spx-gc.ico">
|
|
<link rel="stylesheet" type="text/css" href="/css/spx_fonts.css">
|
|
<link rel="stylesheet" type="text/css" href="/css/spx_layout.css">
|
|
<link rel="stylesheet" type="text/css" href="/css/spx_forms.css">
|
|
<link rel="stylesheet" type="text/css" href="/css/spx_colors.css">
|
|
<link rel="stylesheet" type="text/css" href="/css/spx_accents.css">
|
|
<link rel="stylesheet" type="text/css" href="/css/spx_modal.css">
|
|
</head>
|
|
|
|
<body onload="pageInit();" class="bg_body" onmouseover="tip('');">
|
|
|
|
<input type="hidden" id="treedata" value="{{TemplateFiles}}">
|
|
<input type="hidden" id="showfolder" value="{{folder}}">
|
|
<input type="hidden" id="templateroot" value="{{TemplateRootFolder}}">
|
|
<input type="hidden" id="templaterootmassage" value="{{lang 'error.preventBrowseUp'}}">
|
|
<input type="hidden" id="projectFormat" value="{{showconfig.projectFormat}}">
|
|
|
|
|
|
{{!-- <h1>format: {{showconfig.projectFormat}}</h1> --}}
|
|
|
|
|
|
{{>partial-templatebrowsermodal}}
|
|
{{>partial-showextrabrowsermodal}}
|
|
|
|
|
|
<div class="wrapper">
|
|
|
|
|
|
<div class="header">
|
|
{{>header page="showconfig"}}
|
|
</div><!-- header ended -->
|
|
|
|
|
|
<div class="content">
|
|
<div class="centerColumn pM wrapper">
|
|
<div id="itemList" class="content pM scroller" style="border: 0px solid yellow;">
|
|
|
|
{{#if messageCode}}
|
|
<div class="message">{{messageCode}}</div>
|
|
{{/if}}
|
|
|
|
{{#if errorCode}}
|
|
<div class="messagerror"><B>{{errorCode}}</B><BR><BR>{{lang errorCode}}</div>
|
|
{{/if}}
|
|
<div style="display: flex;">
|
|
<div style="flex-grow: 1" class="vmidTD tableheaderText">{{lang 'config.templates'}}</div>
|
|
<div class="tableheaderHelp">
|
|
{{#ifValue showconfig.projectFormat 'OGRAF'}}
|
|
<a onClick="help('ograf');" onmouseover="tip('What is OGraf?');">
|
|
<img src="/img/ograf-logo-mono-white.svg" style="width: 5vw;">
|
|
</a>
|
|
{{/ifValue}}
|
|
|
|
</div>
|
|
<div class="tableheaderHelp"><a title="{{lang 'general.help'}}" onClick="help('projecttemplates');"
|
|
onmouseover="tip('{{lang 'hover.help'}}');">
|
|
<i class="far fa-question-circle"></i>
|
|
</a></div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Move this nag to documentation instead...
|
|
<span style="display: block; padding: 0.6em 1.7em; background: #0000004b; color:#ffffff; font-size:0.7em; border-radius:9px; margin_5px; text-align:center;">
|
|
{{lang 'warning.showprofilebackup'}}
|
|
</span><BR>
|
|
-->
|
|
|
|
|
|
{{!-- <table class="wide" border=0>
|
|
<TR>
|
|
<td class="vmid tableheaderText">{{lang 'config.templates'}}</td>
|
|
|
|
<td class="vmid tableheaderHelp aright" title="{{lang 'general.help'}}" onClick="help('projecttemplates');" onmouseover="tip('{{lang 'hover.help'}}');"><i class="far fa-question-circle"></i> </td>
|
|
</TR>
|
|
</table> --}}
|
|
|
|
|
|
|
|
<hr class="h2hr"><!-- =========================================== -->
|
|
|
|
<!-- iterate all templates from showconfig ========================================================================= -->
|
|
|
|
{{#each showconfig.templates}}
|
|
|
|
<div id="template{{@index}}">
|
|
<button class="collapsible bg_grey15 row_accent{{uicolor}}" type="button" onmouseover="tip('{{lang 'hover.confitem'}}');">
|
|
{{{nameFromTemplatePath relpath }}}
|
|
<SPAN style="background: #fff; padding: 0.1em 0.5em; border-radius: 0.5em; border: 0px solid yellow; float:right; opacity:0.3; color: #000">{{playlayer}} | {{{max5 webplayout}}}</SPAN>
|
|
</button>
|
|
<div class="collapsiblecontent spxConfigHead" >
|
|
<form name="config{{@index}}" id="config{{@index}}" method="post" action="config/saveTemplate">
|
|
<input type="hidden" name="showFolder" value="{{../folder}}">
|
|
<input type="hidden" name="TemplIndex" value="{{@index}}">
|
|
<input type="hidden" name="templateData[DataFields]" value="{{{DataToJSONString DataFields}}}">
|
|
<table class="wide" style="border: 0px solid pink; border-spacing: 10px; border-collapse: separate;" border="0">
|
|
<tr>
|
|
<td><span class="spxConfigHead">{{lang 'config.templatefile'}}</span></td>
|
|
<td><input type="text" class="wide bg_grey15 cfg" id="templateIndex{{@index}}" placeholder="Template file" name="templateData[relpath]" value="{{relpath}}" onmouseover="tip('{{lang 'hover.templatepath'}}');"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="spxConfigHead">{{lang 'config.description'}}</span></td>
|
|
<td><input type="text" class="wide bg_grey15 cfg" placeholder="Description" name="templateData[description]" value="{{description}}" onmouseover="tip('{{lang 'hover.templatedescr'}}');"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="spxConfigHead">{{lang 'config.inputfields'}}</span></td>
|
|
<td onmouseover="tip('{{lang 'hover.fields'}}');">
|
|
<span class="spxConfigHead">
|
|
{{DataFields.length}} {{lang 'general.pcs'}}
|
|
<!-- removed in 1.0.14
|
|
{{#each DataFields}}
|
|
{{title}}
|
|
{{/each}}
|
|
-->
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="40%"><span class="spxConfigHead">{{lang 'config.ccgplayout'}}</span></td>
|
|
<td>
|
|
<div class="" style="width: 100%; border: 0px solid blue;">
|
|
<select style="width: 50%;" class="drop bg_grey15" name="templateData[playserver]" onmouseover="tip('{{lang 'hover.ccgserver'}}');">
|
|
{{{generateCasparCgPlayoutOptions playserver}}}
|
|
</select>
|
|
<input style="width: 23%;" type="text" class="bg_grey15 cfg" onmouseover="tip('{{lang 'hover.ccgchannel'}}');" placeholder="Channel" name="templateData[playchannel]" value="{{playchannel}}">
|
|
<input style="width: 23%;" type="text" class="bg_grey15 cfg" onmouseover="tip('{{lang 'hover.ccglayer'}}');" placeholder="Layer" name="templateData[playlayer]" value="{{playlayer}}">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="40%"><span class="spxConfigHead">{{lang 'config.dataformat'}}</span></td>
|
|
<td>
|
|
<select class="wide drop bg_grey15" name="templateData[dataformat]" onmouseover="tip('{{lang 'hover.dataformat'}}');">
|
|
{{{generateDataFormatOptions dataformat}}}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="40%"><span class="spxConfigHead">{{lang 'config.webplayout'}}</span></td>
|
|
<td>
|
|
<select class="wide drop bg_grey15" name="templateData[webplayout]" onmouseover="tip('{{lang 'hover.weblayer'}}');">
|
|
{{{generateWebPlayoutOptions webplayout}}}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="40%"><span class="spxConfigHead">{{lang 'config.stopmode'}}</span></td>
|
|
<td>
|
|
<select class="wide drop bg_grey15" name="templateData[out]" onmouseover="tip('{{lang 'hover.outmode'}}');">
|
|
{{{generateOutOptions out}}}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
<td width="40%"><span class="spxConfigHead">{{lang 'config.coloraccent'}}</span></td>
|
|
<td onmouseover="tip('{{lang 'hover.accent'}}');">
|
|
{{{generateColorAccents uicolor @index}}}
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
{{#if imported}}
|
|
<tr>
|
|
<td width="40%"><span class="spxConfigHead">{{lang 'config.updated'}}</span></td>
|
|
<td onmouseover="tip('{{lang 'hover.updated'}}');">
|
|
<span class="spxConfigHead">
|
|
{{{generateTimestamp imported}}}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{{/if}}
|
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
|
|
<table class="wide" style="padding: 10px; margin-bottom:10px;">
|
|
<tr>
|
|
<td width="25%">
|
|
<button type="button"
|
|
class="wide spxFlexItem btnsmall bg_grey10 ripple black"
|
|
onclick="removeTemplateIndex({{@index}});"
|
|
onmouseover="tip('{{lang 'hover.removetemplate'}}');"
|
|
>{{lang 'button.deletetemplate'}}</button>
|
|
</td>
|
|
<td width="25%">
|
|
<button type="button"
|
|
class="wide spxFlexItem btnsmall bg_grey10 ripple black"
|
|
onclick="reimportTemplateIndex({{@index}});"
|
|
onmouseover="tip('{{lang 'hover.replacetemplate'}}');"
|
|
>{{lang 'button.replacetemplate'}}</button>
|
|
</td>
|
|
<td> </td>
|
|
<td width="25%" class="aright">
|
|
<button type="submit"
|
|
class="wide spxFlexItem btnsmall bg_grey10 ripple black"
|
|
onmouseover="tip('{{lang 'hover.saveprofile'}}');"
|
|
>{{lang 'button.save'}}</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
|
|
</div><!--ended item -->
|
|
|
|
</div><!-- index ended -->
|
|
{{/each}}
|
|
<!-- templates ended from showconfig ========================================================================= -->
|
|
|
|
|
|
<div class="wide" style="text-align: center; padding:0.5rem;">
|
|
{{#if showconfig.templates}}
|
|
<!-- templates above -->
|
|
{{else}}
|
|
<span style="display: inline-block; margin: 10px;padding: 0.6em 1.7em; background: #0000001c; color:#ffffff; font-size:0.7em; border-radius:2em; margin_5px; text-align:center;">
|
|
{{lang 'config.addfirsttemplate'}}
|
|
</span><BR>
|
|
{{/if}}
|
|
|
|
<button type="button" class="addbtn bg_blue ripple" onClick="ModalOn('fileoverlay');" onmouseover="tip('{{lang 'hover.browsetemplate'}}');">+</button>
|
|
</div>
|
|
|
|
<BR><BR>
|
|
<table class="wide" border=0>
|
|
<TR>
|
|
<td class="vmid tableheaderText">{{lang 'config.general'}}</td>
|
|
<td class="vmid tableheaderHelp aright" title="{{lang 'general.help'}}" onClick="help('projectgeneral');" onmouseover="tip('{{lang 'hover.help'}}');"><i class="far fa-question-circle"></i> </td>
|
|
</TR>
|
|
</table>
|
|
<hr class="h2hr"><!-- =========================================== -->
|
|
<div class="configGeneralContent spxConfigHead" >
|
|
<form name="configGeneral" id="configGeneral" method="post" action="config/saveGeneralSettings">
|
|
<input type="hidden" name="showFolder" value="{{folder}}">
|
|
|
|
<!-- background option -->
|
|
<table class="wide" style="border: 0px solid pink; border-spacing: 10px; border-collapse: separate;" border="0">
|
|
<tr>
|
|
<td width="50%"><span class="spxConfigHead">{{lang 'config.backgroundImage'}}</span></td>
|
|
<td width="30%">
|
|
<select style="width: 100%; color:#white; background-color: #656E7A;" class="drop" name="background" onmouseover="tip('Choose an image');">
|
|
<option value="">{{lang 'general.none'}} ({{lang 'color.transparent'}})</option>
|
|
<option class="generalSettingDropdown" disabled></option>
|
|
<option class="generalSettingDropdown" disabled>{{lang 'config.optionalBgImage'}}:</option>
|
|
<option class="generalSettingDropdown" disabled>ASSETS/media/images/hd</option>
|
|
<option class="generalSettingDropdown" disabled></option>
|
|
{{{ PopulateFilelistOptions 'media/images/hd' 'png' showconfig.general.background }}}
|
|
</select>
|
|
</td>
|
|
<td width="20%">
|
|
<button type="submit" onmouseover="tip('{{lang 'hover.cancelconfig'}}');" class="wide btn bg_grey10 ripple">SET</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</div>
|
|
<BR><BR>
|
|
|
|
|
|
|
|
<!-- Project Variables are not used right now
|
|
<table class="wide" border=0>
|
|
<TR>
|
|
<td class="vmid tableheaderText">{{lang 'config.projectvariables'}}</td>
|
|
<td class="vmid tableheaderHelp aright" title="{{lang 'general.help'}}" onClick="help('projectvariables');" onmouseover="tip('{{lang 'hover.help'}}');"><i class="far fa-question-circle"></i> </td>
|
|
</TR>
|
|
</table>
|
|
<hr class="h2hr">
|
|
<div class="configGeneralContent" >
|
|
<table class="wide" style="border: 0px solid pink; border-spacing: 10px; border-collapse: separate;" border="0">
|
|
<tr>
|
|
<td width="25%" class="spxTableHeadsmall">Variable description</td>
|
|
<td width="25%" class="spxTableHeadsmall" align="right">Name: pcs </td>
|
|
<td width="50%" class="spxTableHeadsmall"> Value</td>
|
|
</tr>
|
|
{{#each showconfig.variables}}
|
|
<tr>
|
|
<td width="25%"><span class="spxConfigHead">{{title}}</span></span></td>
|
|
<td width="25%"><span class="spxConfigHead"><span class="prvar">{{prvar}}: {{{itemCount users}}}</span></span></td>
|
|
<td width="50%"><input type="text" class="wide bg_grey15 cfg" id="templateIndex{{@index}}" name="templateData[relpath]" value="{{value}}" onmouseover="tip('{{lang 'hover.templatepath'}}');"></td>
|
|
</tr>
|
|
{{/each}}
|
|
</table>
|
|
</div>
|
|
<BR><BR>
|
|
-->
|
|
|
|
|
|
|
|
|
|
<table class="wide" border=0>
|
|
<TR>
|
|
<td class="vmid tableheaderText">{{lang 'config.showextras'}}</td>
|
|
<td class="vmid tableheaderHelp aright" title="{{lang 'general.help'}}" onClick="help('projectextras');" onmouseover="tip('{{lang 'hover.help'}}');"><i class="far fa-question-circle"></i> </td>
|
|
</TR>
|
|
</table>
|
|
<hr class="h2hr"><!-- =========================================== -->
|
|
|
|
<!-- script linker -->
|
|
<div id="scriptLinker">
|
|
<button class="collapsible bg_grey15 row_accentExtras" type="button">{{lang 'config.functionlibrary'}}</button>
|
|
<div class="collapsiblecontent spxConfigHead" >
|
|
<form name="extrascript" id="extrascript" method="post" action="config/saveExtraScript">
|
|
<table class="wide" style="border: 0px solid pink; border-spacing: 10px; border-collapse: separate;" border="0">
|
|
<tr>
|
|
<td><span class="spxConfigHead">{{lang 'config.javascriptfile'}}</span></td>
|
|
<td>
|
|
<input type="text" class="wide bg_grey15 cfg" placeholder="ExtraFunctions/myExtraFunctions.js" id="customscript" name="customscript"
|
|
{{#if showconfig.showExtras.customscript}}
|
|
value="{{showconfig.showExtras.customscript}}"
|
|
{{else}}
|
|
value="ExtraFunctions/demoFunctions.js"
|
|
{{/if}}
|
|
onmouseover="tip('{{lang 'hover.showjsfile'}}');">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td> </td>
|
|
<td><button type="button" class="wide spxFlexItem btnsmall bg_grey10 ripple black" onClick="addShowScript();" onmouseover="tip('{{lang 'hover.saveprofile'}}');">{{lang 'button.save'}}</button></td>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
|
|
</div><!--ended extra item -->
|
|
</div><!-- extra index ended -->
|
|
<!-- //script linker -->
|
|
|
|
|
|
{{#each showconfig.showExtras.CustomControls}}
|
|
<!-- each extra button -->
|
|
<div id="extra{{@index}}">
|
|
<button class="collapsible bg_grey15 row_accentExtras" type="button">{{description}}</button>
|
|
<div class="collapsiblecontent spxConfigHead" >
|
|
<form name="extra{{@index}}" id="extra{{@index}}" method="post" action="config/saveExtra">
|
|
<input type="hidden" name="ExtraIndex" value="{{@index}}">
|
|
<input type="hidden" name="showFolder" value="{{../folder}}">
|
|
<input type="hidden" name="extraData[ftype]" value="{{ftype}}">
|
|
<table class="wide" style="border: 0px solid pink; border-spacing: 10px; border-collapse: separate;" border="0">
|
|
<tr onmouseover="tip('{{lang 'hover.buttontype'}}');">
|
|
<td><span class="spxConfigHead">{{lang 'config.buttontype'}}</span></td>
|
|
<td><span class="spxConfigHead">{{ftype}}</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="spxConfigHead">{{lang 'config.functiondescription'}}</span></td>
|
|
<td><input type="text" class="wide bg_grey15 cfg" placeholder="Description" name="extraData[description]" value="{{description}}" onmouseover="tip('{{lang 'hover.extradescr'}}');"></td>
|
|
</tr>
|
|
<tr onmouseover="tip('{{lang 'hover.colors'}}');">
|
|
<td width="40%"><span class="spxConfigHead">{{lang 'config.buttoncolor'}}</span></td>
|
|
<td>
|
|
<select class="wide drop bg_grey15" name="extraData[bgclass]">
|
|
{{{generateButtonColorClasses bgclass}}}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
{{#ifValue ftype "button"}}
|
|
<tr onmouseover="tip('{{lang 'hover.text'}}');">
|
|
<td><span class="spxConfigHead">{{lang 'config.buttontext'}}</span></td>
|
|
<td>
|
|
<input type="text" class="wide bg_grey15 cfg" placeholder="Caption" name="extraData[text]" value="{{text}}" >
|
|
</td>
|
|
</tr>
|
|
|
|
<tr onmouseover="tip('{{lang 'hover.fcall'}}');">
|
|
<td><span class="spxConfigHead">{{lang 'config.functionhandler'}}</span></td>
|
|
<td><input type="text" class="wide bg_grey15 cfg" placeholder="clickHandler" name="extraData[fcall]" value="{{fcall}}" ></td>
|
|
</tr>
|
|
{{/ifValue}}
|
|
|
|
|
|
{{#ifValue ftype "togglebutton"}}
|
|
<tr>
|
|
<td><span class="spxConfigHead">{{lang 'config.buttontexts'}}</span></td>
|
|
<td>
|
|
<input type="text" style="width: 49%;" class="bg_grey15 cfg" placeholder="ON" name="extraData[text0]" value="{{text0}}" onmouseover="tip('{{lang 'hover.text'}}');">
|
|
<input type="text" style="width: 49%;" class="bg_grey15 cfg" placeholder="OFF" name="extraData[text1]" value="{{text1}}" onmouseover="tip('{{lang 'hover.text1'}}');">
|
|
</td>
|
|
</tr>
|
|
|
|
<tr onmouseover="tip('{{lang 'hover.fcall'}}');">
|
|
<td><span class="spxConfigHead">{{lang 'config.functionhandler'}}</span></td>
|
|
<td><input type="text" class="wide bg_grey15 cfg" placeholder="toggleHandler" name="extraData[fcall]" value="{{fcall}}" ></td>
|
|
</tr>
|
|
{{/ifValue}}
|
|
|
|
|
|
{{#ifValue ftype "selectbutton"}}
|
|
<input type="hidden" name="value" value="{{value}}">
|
|
<tr onmouseover="tip('{{lang 'hover.text'}}');">
|
|
<td><span class="spxConfigHead">{{lang 'config.buttontext'}}</span></td>
|
|
<td><input type="text" class="wide bg_grey15 cfg" placeholder="Caption" name="extraData[text]" value="{{text}}" ></td>
|
|
</tr>
|
|
|
|
<tr onmouseover="tip('{{lang 'hover.fcall'}}');">
|
|
<td><span class="spxConfigHead">{{lang 'config.functionhandler'}}</span></td>
|
|
<td><input type="text" class="wide bg_grey15 cfg" placeholder="toggleHandler" name="extraData[fcall]" value="{{fcall}}" ></td>
|
|
</tr>
|
|
|
|
<tr onmouseover="tip('{{lang 'hover.defaultvalue'}}');">
|
|
<td><span class="spxConfigHead">{{lang 'config.defaultvalue'}}</span></td>
|
|
<td><input type="text" class="wide bg_grey15 cfg" placeholder="" name="extraData[value]" value="{{value}}" ></td>
|
|
</tr>
|
|
|
|
<tr onmouseover="tip('{{lang 'hover.options'}}');">
|
|
<td><span class="spxConfigHead vtop">{{lang 'config.options'}}</span></td>
|
|
<td>
|
|
{{#each items}}
|
|
<input type="text" class="w50 bg_grey15 cfg" placeholder="{{lang 'config.text'}}" name="extraData[items][{{@index}}][text]" value="{{text}}" >
|
|
<input type="text" class="w50 bg_grey15 cfg" placeholder="{{lang 'config.value'}}" name="extraData[items][{{@index}}][value]" value="{{value}}" ><BR>
|
|
<!-- name="casparcg[servers][{{@index}}][name]" -->
|
|
{{/each}}
|
|
<input type="text" class="w50 bg_grey15 cfg" placeholder="{{lang 'config.text'}}" name="newTXT" value="" >
|
|
<input type="text" class="w50 bg_grey15 cfg" placeholder="{{lang 'config.value'}}" name="newVAL" value="" ><BR>
|
|
<span style="display:block; font-size: 0.7em; text-align:center;">{{lang 'config.addnewtip'}}</span>
|
|
</td>
|
|
|
|
</tr>
|
|
{{/ifValue}}
|
|
|
|
</table>
|
|
<table class="wide" style="padding: 10px; margin-bottom:10px;">
|
|
<tr >
|
|
<td width="25%" onmouseover="tip('{{lang 'hover.removetemplate'}}');">
|
|
<button type="button" class="wide spxFlexItem btnsmall bg_grey10 ripple black" onclick="removeExtraIndex({{@index}});" >{{lang 'button.deletebutton'}}</button>
|
|
</td>
|
|
<td> </td>
|
|
<td width="25%" class="aright" onmouseover="tip('{{lang 'hover.saveprofile'}}');">
|
|
<button type="submit" class="wide spxFlexItem btnsmall bg_grey10 ripple black" >{{lang 'button.save'}}</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
|
|
</div><!--ended extra item -->
|
|
</div><!-- extra index ended -->
|
|
|
|
|
|
|
|
<!-- //each extra button -->
|
|
{{/each}}
|
|
<div class="wide" style="text-align: center; padding:0.5rem;">
|
|
{{#if showconfig.showExtras.CustomControls}}
|
|
<!-- templates above -->
|
|
{{else}}
|
|
<span style="display: inline-block; margin: 10px;padding: 0.6em 1.7em; background: #0000001c; color:#ffffff; font-size:0.7em; border-radius:2em; margin_5px; text-align:center;">
|
|
{{lang 'config.addfirstextra'}}
|
|
</span><BR>
|
|
{{/if}}
|
|
<button type="button" class="addbtn bg_blue ripple" onClick="ModalOn('extraoverlay');" onmouseover="tip('{{lang 'hover.browseextras'}}');">+</button>
|
|
</div>
|
|
|
|
</div><!-- itemlist ended -->
|
|
</div><!-- center wrapper ended -->
|
|
</div><!-- content ended -->
|
|
|
|
|
|
{{>footer}}
|
|
|
|
|
|
</div><!-- MAINwrapper ended -->
|
|
|
|
|
|
<script>
|
|
// See spx_gc.js
|
|
function pageInit(){
|
|
RenderFolder(JSON.parse(document.getElementById('treedata').value));
|
|
|
|
// COLLAPSIPLE HANDLERS
|
|
var coll = document.getElementsByClassName("collapsible");
|
|
var i;
|
|
for (i = 0; i < coll.length; i++) {
|
|
coll[i].addEventListener("click", function() {
|
|
this.classList.toggle("active");
|
|
var content = this.nextElementSibling;
|
|
if (content.style.maxHeight){
|
|
content.style.maxHeight = null;
|
|
} else {
|
|
content.style.maxHeight = content.scrollHeight + "px";
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// TREE HANDLERS
|
|
// https://www.w3schools.com/howto/howto_js_treeview.asp
|
|
var toggler = document.getElementsByClassName("caret");
|
|
var z;
|
|
for (z = 0; z < toggler.length; z++) {
|
|
toggler[z].addEventListener("click", function() {
|
|
this.parentElement.querySelector(".nested").classList.toggle("opened");
|
|
this.classList.toggle("caret-down");
|
|
});
|
|
}
|
|
|
|
spxInit('');
|
|
heartbeat(206); // page identifier (was missing in 1.1.0)
|
|
AppState("EDITING");
|
|
}
|
|
|
|
|
|
function AddTemplatesTab(tabNro) {
|
|
let tabs = [1, 2, 3, 4]
|
|
tabs.forEach((tab) => {
|
|
let thisBtn = document.getElementById('tabBtn' + tab);
|
|
thisBtn.classList.remove('tabSelected')
|
|
let thisTab = document.getElementById('tab' + tab);
|
|
thisTab.style.display = "none";
|
|
if (thisBtn.id === 'tabBtn' + tabNro) {
|
|
document.getElementById('tabBtn' + tabNro).classList.add('tabSelected')
|
|
document.getElementById('tab' + tabNro).style.display = "flex";
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |