Moving Mustache templates content in separate files.
This commit is contained in:
John Livingston
parent
b5140ca994
commit
679baf024c
|
|
@ -35,10 +35,23 @@ function loadLocs() {
|
|||
return r
|
||||
}
|
||||
|
||||
function loadMustaches () {
|
||||
// Loading mustache templates, dans filling constants.
|
||||
const r = []
|
||||
r['MUSTACHE_CONFIGURATION_HOME'] = loadMustache('client/common/configuration/templates/home.mustache')
|
||||
r['MUSTACHE_CONFIGURATION_CHANNEL'] = loadMustache('client/common/configuration/templates/channel.mustache')
|
||||
return r
|
||||
}
|
||||
|
||||
function loadMustache (file) {
|
||||
const filePath = path.resolve(__dirname, file)
|
||||
return JSON.stringify(fs.readFileSync(filePath).toString())
|
||||
}
|
||||
|
||||
const define = Object.assign({
|
||||
PLUGIN_CHAT_PACKAGE_NAME: JSON.stringify(packagejson.name),
|
||||
PLUGIN_CHAT_SHORT_NAME: JSON.stringify(packagejson.name.replace(/^peertube-plugin-/, ''))
|
||||
}, loadLocs())
|
||||
}, loadLocs(), loadMustaches())
|
||||
|
||||
const configs = clientFiles.map(f => ({
|
||||
entryPoints: [ path.resolve(__dirname, 'client', f + '.ts') ],
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
declare const PLUGIN_CHAT_PACKAGE_NAME: string
|
||||
declare const PLUGIN_CHAT_SHORT_NAME: string
|
||||
|
||||
// Constants that begins with "MUSTACHE_" are mustache templates, and are built by build-client.js.
|
||||
declare const MUSTACHE_CONFIGURATION_HOME: string
|
||||
declare const MUSTACHE_CONFIGURATION_CHANNEL: string
|
||||
|
||||
// Constants that begins with "LOC_" are loaded by build-client.js, reading the english locale file.
|
||||
// See the online documentation: https://johnxlivingston.github.io/peertube-plugin-livechat/contributing/translate/
|
||||
declare const LOC_ONLINE_HELP: string
|
||||
|
|
|
|||
|
|
@ -0,0 +1,185 @@
|
|||
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-channel">
|
||||
<h1>
|
||||
{{title}}:
|
||||
<span class="peertube-plugin-livechat-configuration-channel-info">
|
||||
<span>{{channelConfiguration.channel.displayName}}</span>
|
||||
<span>{{channelConfiguration.channel.name}}</span>
|
||||
</span>
|
||||
{{{helpButton}}}
|
||||
</h1>
|
||||
<p>{{description}}</p>
|
||||
<form livechat-configuration-channel-options role="form">
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<h2>{{botOptions}}</h2>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="bot"
|
||||
id="peertube-livechat-bot"
|
||||
value="1"
|
||||
{{#channelConfiguration.configuration.bot.enabled}}
|
||||
checked="checked"
|
||||
{{/channelConfiguration.configuration.bot.enabled}}
|
||||
/>
|
||||
{{enableBot}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group" livechat-configuration-channel-options-bot-enabled>
|
||||
<label for="peertube-livechat-bot-nickname">{{botNickname}}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="bot_nickname"
|
||||
class="form-control"
|
||||
id="peertube-livechat-bot-nickname"
|
||||
value="{{channelConfiguration.configuration.bot.nickname}}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#forbiddenWordsArray}}{{! iterating on forbiddenWordsArray to display N fields }}
|
||||
<div class="row mt-5" livechat-configuration-channel-options-bot-enabled>
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<h2>{{forbiddenWords}} #{{displayNumber}}</h2>
|
||||
{{#displayHelp}}
|
||||
<p>{{forbiddenWordsDesc}} {{moreInfo}}</p>
|
||||
{{{HelpButtonForbiddenWords}}}
|
||||
{{/displayHelp}}
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<div class="form-group">
|
||||
<label for="peertube-livechat-forbidden-words-{{fieldNumber}}">{{forbiddenWords}}</label>
|
||||
{{! warning: don't add extra line break in textarea! }}
|
||||
<textarea
|
||||
name="forbidden_words_{{fieldNumber}}"
|
||||
id="peertube-livechat-forbidden-words-{{fieldNumber}}"
|
||||
class="form-control"
|
||||
>{{entries}}</textarea>
|
||||
<p class="form-group-description">{{forbiddenWordsDesc2}}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="forbidden_words_regexp_{{fieldNumber}}"
|
||||
value="1"
|
||||
{{#regexp}}
|
||||
checked="checked"
|
||||
{{/regexp}}
|
||||
/>
|
||||
{{forbiddenWordsRegexp}}
|
||||
</label>
|
||||
<p class="form-group-description">{{forbiddenWordsRegexpDesc}}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="forbidden_words_applytomoderators_{{fieldNumber}}"
|
||||
value="1"
|
||||
{{#applyToModerators}}
|
||||
checked="checked"
|
||||
{{/applyToModerators}}
|
||||
/>
|
||||
{{forbiddenWordsApplyToModerators}}
|
||||
</label>
|
||||
<p class="form-group-description">{{forbiddenWordsApplyToModeratorsDesc}}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="peertube-livechat-forbidden-words-reason-{{fieldNumber}}">{{forbiddenWordsReason}}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="forbidden_words_reason_{{fieldNumber}}"
|
||||
class="form-control"
|
||||
id="peertube-livechat-forbidden-words-reason-{{fieldNumber}}"
|
||||
value="{{reason}}"
|
||||
/>
|
||||
<p class="form-group-description">{{forbiddenWordsReasonDesc}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/forbiddenWordsArray}}
|
||||
|
||||
{{#quotesArray}}{{! iterating on quotesArray to display N fields }}
|
||||
<div class="row mt-5" livechat-configuration-channel-options-bot-enabled>
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<h2>{{quoteLabel}} #{{displayNumber}}</h2>
|
||||
{{#displayHelp}}
|
||||
<p>{{quoteDesc}} {{moreInfo}}</p>
|
||||
{{{helpButtonQuotes}}}
|
||||
{{/displayHelp}}
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<div class="form-group">
|
||||
<label for="peertube-livechat-quote-{{fieldNumber}}">{{quoteLabel}}</label>
|
||||
{{! warning: don't add extra line break in textarea! }}
|
||||
<textarea
|
||||
name="quote_{{fieldNumber}}"
|
||||
id="peertube-livechat-quote-{{fieldNumber}}"
|
||||
class="form-control"
|
||||
>{{TODO}}</textarea>
|
||||
<p class="form-group-description">{{quoteDesc2}}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="peertube-livechat-quote-delay-{{fieldNumber}}">{{quoteDelayLabel}}</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="6000"
|
||||
step="1"
|
||||
name="quote_delay_{{fieldNumber}}"
|
||||
class="form-control"
|
||||
id="peertube-livechat-quote-delay-{{fieldNumber}}"
|
||||
value="5"
|
||||
/>
|
||||
<p class="form-group-description">{{quoteDelayDesc}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/quotesArray}}
|
||||
|
||||
{{#cmdsArray}}{{! iterating on cmdsArray to display N fields }}
|
||||
<div class="row mt-5" livechat-configuration-channel-options-bot-enabled>
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<h2>{{commandLabel}} #{{displayNumber}}</h2>
|
||||
{{#displayHelp}}
|
||||
<p>{{commandDesc}} {{moreInfo}}</p>
|
||||
{{{helpButtonCommands}}}
|
||||
{{/displayHelp}}
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<div class="form-group">
|
||||
<label for="peertube-livechat-command-{{fieldNumber}}">{{commandCmdLabel}}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="command_{{fieldNumber}}"
|
||||
class="form-control"
|
||||
id="peertube-livechat-command-{{fieldNumber}}"
|
||||
value=""
|
||||
/>
|
||||
<p class="form-group-description">{{commandCmdDesc}}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="peertube-livechat-command-message-{{fieldNumber}}">{{commandMessageLabel}}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="command_message_{{fieldNumber}}"
|
||||
class="form-control"
|
||||
id="peertube-livechat-command-message-{{fieldNumber}}"
|
||||
value=""
|
||||
/>
|
||||
<p class="form-group-description">{{commandMessageDesc}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/cmdsArray}}
|
||||
<div class="form-group">
|
||||
<input type="submit" value="{{save}}" />
|
||||
<input type="reset" value="{{cancel}}" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -23,197 +23,7 @@ async function renderConfigurationChannel (
|
|||
await fillViewHelpButtons(registerClientOptions, view)
|
||||
await fillLabels(registerClientOptions, view)
|
||||
|
||||
const content = Mustache.render(`
|
||||
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-channel">
|
||||
<h1>
|
||||
{{title}}:
|
||||
<span class="peertube-plugin-livechat-configuration-channel-info">
|
||||
<span>{{channelConfiguration.channel.displayName}}</span>
|
||||
<span>{{channelConfiguration.channel.name}}</span>
|
||||
</span>
|
||||
{{{helpButton}}}
|
||||
</h1>
|
||||
<p>{{description}}</p>
|
||||
<form livechat-configuration-channel-options role="form">
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<h2>{{botOptions}}</h2>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="bot"
|
||||
id="peertube-livechat-bot"
|
||||
value="1"
|
||||
{{#channelConfiguration.configuration.bot.enabled}}
|
||||
checked="checked"
|
||||
{{/channelConfiguration.configuration.bot.enabled}}
|
||||
/>
|
||||
{{enableBot}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group" livechat-configuration-channel-options-bot-enabled>
|
||||
<label for="peertube-livechat-bot-nickname">{{botNickname}}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="bot_nickname"
|
||||
class="form-control"
|
||||
id="peertube-livechat-bot-nickname"
|
||||
value="{{channelConfiguration.configuration.bot.nickname}}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#forbiddenWordsArray}}{{! iterating on forbiddenWordsArray to display N fields }}
|
||||
<div class="row mt-5" livechat-configuration-channel-options-bot-enabled>
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<h2>{{forbiddenWords}} #{{displayNumber}}</h2>
|
||||
{{#displayHelp}}
|
||||
<p>{{forbiddenWordsDesc}} {{moreInfo}}</p>
|
||||
{{{HelpButtonForbiddenWords}}}
|
||||
{{/displayHelp}}
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<div class="form-group">
|
||||
<label for="peertube-livechat-forbidden-words-{{fieldNumber}}">{{forbiddenWords}}</label>
|
||||
{{! warning: don't add extra line break in textarea! }}
|
||||
<textarea
|
||||
name="forbidden_words_{{fieldNumber}}"
|
||||
id="peertube-livechat-forbidden-words-{{fieldNumber}}"
|
||||
class="form-control"
|
||||
>{{entries}}</textarea>
|
||||
<p class="form-group-description">{{forbiddenWordsDesc2}}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="forbidden_words_regexp_{{fieldNumber}}"
|
||||
value="1"
|
||||
{{#regexp}}
|
||||
checked="checked"
|
||||
{{/regexp}}
|
||||
/>
|
||||
{{forbiddenWordsRegexp}}
|
||||
</label>
|
||||
<p class="form-group-description">{{forbiddenWordsRegexpDesc}}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="forbidden_words_applytomoderators_{{fieldNumber}}"
|
||||
value="1"
|
||||
{{#applyToModerators}}
|
||||
checked="checked"
|
||||
{{/applyToModerators}}
|
||||
/>
|
||||
{{forbiddenWordsApplyToModerators}}
|
||||
</label>
|
||||
<p class="form-group-description">{{forbiddenWordsApplyToModeratorsDesc}}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="peertube-livechat-forbidden-words-reason-{{fieldNumber}}">{{forbiddenWordsReason}}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="forbidden_words_reason_{{fieldNumber}}"
|
||||
class="form-control"
|
||||
id="peertube-livechat-forbidden-words-reason-{{fieldNumber}}"
|
||||
value="{{reason}}"
|
||||
/>
|
||||
<p class="form-group-description">{{forbiddenWordsReasonDesc}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/forbiddenWordsArray}}
|
||||
|
||||
{{#quotesArray}}{{! iterating on quotesArray to display N fields }}
|
||||
<div class="row mt-5" livechat-configuration-channel-options-bot-enabled>
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<h2>{{quoteLabel}} #{{displayNumber}}</h2>
|
||||
{{#displayHelp}}
|
||||
<p>{{quoteDesc}} {{moreInfo}}</p>
|
||||
{{{helpButtonQuotes}}}
|
||||
{{/displayHelp}}
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<div class="form-group">
|
||||
<label for="peertube-livechat-quote-{{fieldNumber}}">{{quoteLabel}}</label>
|
||||
{{! warning: don't add extra line break in textarea! }}
|
||||
<textarea
|
||||
name="quote_{{fieldNumber}}"
|
||||
id="peertube-livechat-quote-{{fieldNumber}}"
|
||||
class="form-control"
|
||||
>{{
|
||||
#channelConfiguration.configuration.TODO
|
||||
}}{{.}}\n{{
|
||||
/channelConfiguration.configuration.TODO
|
||||
}}</textarea>
|
||||
<p class="form-group-description">{{quoteDesc2}}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="peertube-livechat-quote-delay-{{fieldNumber}}">{{quoteDelayLabel}}</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="6000"
|
||||
step="1"
|
||||
name="quote_delay_{{fieldNumber}}"
|
||||
class="form-control"
|
||||
id="peertube-livechat-quote-delay-{{fieldNumber}}"
|
||||
value="5"
|
||||
/>
|
||||
<p class="form-group-description">{{quoteDelayDesc}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/quotesArray}}
|
||||
|
||||
{{#cmdsArray}}{{! iterating on cmdsArray to display N fields }}
|
||||
<div class="row mt-5" livechat-configuration-channel-options-bot-enabled>
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<h2>{{commandLabel}} #{{displayNumber}}</h2>
|
||||
{{#displayHelp}}
|
||||
<p>{{commandDesc}} {{moreInfo}}</p>
|
||||
{{{helpButtonCommands}}}
|
||||
{{/displayHelp}}
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<div class="form-group">
|
||||
<label for="peertube-livechat-command-{{fieldNumber}}">{{commandCmdLabel}}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="command_{{fieldNumber}}"
|
||||
class="form-control"
|
||||
id="peertube-livechat-command-{{fieldNumber}}"
|
||||
value=""
|
||||
/>
|
||||
<p class="form-group-description">{{commandCmdDesc}}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="peertube-livechat-command-message-{{fieldNumber}}">{{commandMessageLabel}}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="command_message_{{fieldNumber}}"
|
||||
class="form-control"
|
||||
id="peertube-livechat-command-message-{{fieldNumber}}"
|
||||
value=""
|
||||
/>
|
||||
<p class="form-group-description">{{commandMessageDesc}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/cmdsArray}}
|
||||
<div class="form-group">
|
||||
<input type="submit" value="{{save}}" />
|
||||
<input type="reset" value="{{cancel}}" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`, view) as string
|
||||
const content = Mustache.render(MUSTACHE_CONFIGURATION_CHANNEL, view) as string
|
||||
|
||||
rootEl.innerHTML = content
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
|
||||
<h1>{{title}}</h1>
|
||||
<p>{{description}}</p>
|
||||
<p>{{please_select}}</p>
|
||||
<ul class="peertube-plugin-livechat-configuration-home-channels">
|
||||
{{#channels}}
|
||||
<li>
|
||||
<a href="{{livechatConfigurationUri}}">
|
||||
{{#avatar}}
|
||||
<img class="avatar channel" src="{{path}}">
|
||||
{{/avatar}}
|
||||
{{^avatar}}
|
||||
<div class="avatar channel initial gray"></div>
|
||||
{{/avatar}}
|
||||
</a>
|
||||
<div class="peertube-plugin-livechat-configuration-home-info">
|
||||
<a href="{{livechatConfigurationUri}}">
|
||||
<div>{{displayName}}</div>
|
||||
<div>{{name}}</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{{/channels}}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -40,33 +40,7 @@ async function renderConfigurationHome (registerClientOptions: RegisterClientOpt
|
|||
channels: channels.data
|
||||
}
|
||||
|
||||
return Mustache.render(`
|
||||
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
|
||||
<h1>{{title}}</h1>
|
||||
<p>{{description}}</p>
|
||||
<p>{{please_select}}</p>
|
||||
<ul class="peertube-plugin-livechat-configuration-home-channels">
|
||||
{{#channels}}
|
||||
<li>
|
||||
<a href="{{livechatConfigurationUri}}">
|
||||
{{#avatar}}
|
||||
<img class="avatar channel" src="{{path}}">
|
||||
{{/avatar}}
|
||||
{{^avatar}}
|
||||
<div class="avatar channel initial gray"></div>
|
||||
{{/avatar}}
|
||||
</a>
|
||||
<div class="peertube-plugin-livechat-configuration-home-info">
|
||||
<a href="{{livechatConfigurationUri}}">
|
||||
<div>{{displayName}}</div>
|
||||
<div>{{name}}</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{{/channels}}
|
||||
</ul>
|
||||
</div>
|
||||
`, view) as string
|
||||
return Mustache.render(MUSTACHE_CONFIGURATION_HOME, view) as string
|
||||
} catch (err: any) {
|
||||
peertubeHelpers.notifier.error(err.toString())
|
||||
return ''
|
||||
|
|
|
|||
Loading…
Reference in New Issue