Skip to content

Instantly share code, notes, and snippets.

@Tug

Tug/index.html

Created May 8, 2015 20:44
Show Gist options
  • Save Tug/b1670972af632b02ed02 to your computer and use it in GitHub Desktop.
Save Tug/b1670972af632b02ed02 to your computer and use it in GitHub Desktop.
Download ZIP
Exemple de customization du chat Nirror: chat en Français
Raw
index.html
<html>
<head>
</head>
<body>
<script type="text/template" id="nirror-chat-template">
<div class="nirror-box" data-bind="visible: visible">
<div class="nirror-bubble" data-bind="visible: bubbleVisible">
<span data-bind="text: infoMessage"></span>
<span style="float: right; cursor: pointer;" data-bind="click: closeBubble">x</span>
</div>
<div class="nirror-visible-bar" data-bind="click: toggle, css: { 'nirror-notify': notify }">
<span data-bind="text: title"></span>
<div class="nirror-expand-button" data-bind="">&ndash;</div>
</div>
<div data-bind="visible: opened">
<div class="nirror-pages">
<div class="nirror-page nirror-page-identification" data-bind="visible: currentPage() === 'identification'">
<span style="font-size: 15px;" data-bind="visible: !operatorOnline(), text: offlineMessage"></span>
<form data-bind="submit: identifyUser" class="nirror-form-identify">
<div class="nirror-control-group">
<label class="nirror-label" for="nirror-chat-input-email" data-bind="text: options.locale.yourEmail || 'Your e-mail:'"></label>
<div class="nirror-controls">
<input type="text" id="nirror-chat-input-email" class="nirror-input" data-bind="value: email, attr: { placeholder: options.locale.yourEmailPlaceholder || 'Enter your e-mail here...' }">
</div>
</div>
<div class="nirror-control-group">
<label class="nirror-label" for="nirror-chat-input-message" data-bind="text: options.locale.yourMessage || 'Your messsage:'"></label>
<div class="nirror-controls">
<textarea id="nirror-chat-input-message" class="nirror-textarea" data-bind="textInput: message, attr: { placeholder: options.locale.yourMessagePlaceholder || 'Enter your message here...' }"></textarea>
</div>
</div>
<div class="nirror-control-group">
<div class="nirror-controls nirror-right nirror-actions">
<button type="submit" class="nirror-btn btn" data-bind="visible: operatorOnline, text: options.locale.startChat || 'Start chat'"></button>
<button type="submit" class="nirror-btn btn" data-bind="visible: !operatorOnline(), text: options.locale.sendMessage || 'Send message'"></button>
</div>
</div>
</form>
</div>
<div class="nirror-page nirror-page-conversation" data-bind="with: chat, visible: currentPage() === 'conversation'">
<div class="nirror-messages" data-bind="visible: groupedMessages().length === 0">
<span style="font-size: 15px;" data-bind="visible: $parent.operatorOnline, text: $parent.firstMessage"></span>
</div>
<div class="nirror-messages" data-bind="foreach: groupedMessages, event: { scroll: scrolled }, scrollFollow: { observe: groupedMessages, activate: bottom }, click: function() { focus(true); }, visible: groupedMessages().length > 0">
<div class="nirror-message" data-bind="if: $data.operator, visible: $data.operator">
<img data-bind="attr: { src: operator.avatar }" alt="Operator avatar">
<div>
<a><span data-bind="text: operator.username || $root.options.locale.operator || 'Operator'"></span></a>
<span class="nirror-pull-right" data-bind="relativeDate: date, localeData: $root.options.locale, refresh: true"></span>
<div data-bind="foreach: body">
<div data-bind="text: $data"></div>
</div>
</div>
</div>
<div class="nirror-message" data-bind="if: $data.visitor, visible: $data.visitor">
<img data-bind="attr: { src: visitor.avatar }" alt="Visitor avatar">
<div>
<a><span data-bind="text: visitor.username || $root.options.locale.me || 'Me'"></span></a>
<span class="nirror-pull-right" data-bind="relativeDate: date, localeData: $root.options.locale, refresh: true"></span>
<div data-bind="foreach: body">
<div data-bind="text: $data"></div>
</div>
</div>
</div>
</div>
<div class="nirror-inputBox">
<textarea class="nirror-inputText" data-bind="value: inputText, valueUpdate: 'input', enterkey: sendMessage, hasFocus: focus"></textarea>
</div>
</div>
<div class="nirror-options-bar">Powered by Nirror <span class="nirror-options-button" data-bind="visible: showOptions">options</span></div>
</div>
</div>
</div>
</script>
<h1>Hello world</h1>
<script>
var niTemplate = document.getElementById("nirror-chat-template").innerHTML;
var Ni = {};
var fr = {
me: 'Moi',
operator: 'Operateur',
yourName: 'Nom',
yourNamePlaceholder: 'Entrez votre nom',
yourEmail: 'E-mail',
yourMessage: 'Message',
yourEmailPlaceholder: 'Entrez votre e-mail',
yourMessagePlaceholder: 'Entrez votre message',
startChat: 'Démarrer le chat',
sendMessage: 'Envoyer',
'just_now': "à l'instant",
'a_minute_ago': 'il y a une minute',
'x_minutes_ago': 'il y a {0} minutes',
'an_hour_ago': 'il y une heure',
'x_hours_ago': 'il y a {0} heures',
'yesterday': 'hier',
'x_days_ago': 'il y a {0} jours',
'a_week_ago': 'il y a une semaine',
'x_weeks_ago': 'il y a {0} semaines',
'a_month_ago': 'il y a un mois',
'months_ago': 'il y a {0} mois',
'a_year_ago': 'il y a un an',
'years_ago': 'il y a {0} ans'
};
Ni.modules = { 'chat': { options: { template: niTemplate, locale: fr } } };
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment