GIF89a;
| Direktori : /home/serb/public_html/livechat/js/app/view/ |
| Current File : /home/serb/public_html/livechat/js/app/view/MessageView.js |
//==============================================================================
//
// Message view
//
//==============================================================================
(function(app, config, $)
{
var URL_EXP = /(\w+:\/\/)?([\da-z\.\-@]+)\.([a-z\.]{2,})([?&=%#;\/\w\.-]*)*\/?/g;
var MessageView = app.MessageView = Backbone.View.extend({
initialize : function()
{
// Initialize models
this.settings = app.model.settings;
// Handle rendering
this.listenTo(this.model, 'change', this.render);
// Initialize the content
this.render();
// Fade in
this.$el.hide();
this.$el.fadeIn('fast');
},
render : function()
{
// Clear the view
this.$el.html($(app.template.message));
// Cache elements
this.$time = this.$('.customer-chat-content-message-time');
// Fill the element with data
var body = this.model.get('body').split('<').join('<').split('>').join('>');
body = this.prepareMessage(body);
this.$('.customer-chat-content-message-author').html(this.model.getReadableName() || this.model.get('author'));
this.$('.customer-chat-content-message-body') .html(body);
this.updateTime(true);
// Personalize based on the user type
if(this.model.get('authorType') == 'operator')
{
this.$('.customer-chat-content-message').removeClass('customer-chat-content-message').addClass('customer-chat-content-message-operator');
this.$('.customer-chat-content-message-avatar').removeClass('customer-chat-content-message-avatar').addClass('customer-chat-content-message-avatar-operator');
}
if(this.model.fromUser && this.model.fromUser.image) this.$('.avatar').css('background-image', 'url("' + this.model.fromUser.image + '")');
// Initialize user info popover
if(app.UserInfoPopoverView)
{
new app.UserInfoPopoverView({ model : this.model, button : this.$('.customer-chat-content-message-author')[0] });
}
},
prepareMessage : function(body)
{
// Create link elements
body = body.replace(URL_EXP, function(full, protocol)
{
if(full.indexOf('@') !== -1) return full; // Skip e-mail addresses
if(full.indexOf('..') !== -1) return full; // Skip URLs with empty subdomains
return MessageView.createLinkElement(full, (protocol ? '' : 'http://') + full);
});
// Fill message's body with emoticons
if(this.settings.get('emots'))
{
for(var emoticon in MessageView.EMOTICONS)
{
body = body.split(emoticon).join(
MessageView.createEmotElement(MessageView.EMOTICONS[emoticon])
);
}
}
return body;
},
updateTime : function(reschedule)
{
// Update the time field
var seconds = this.model.getAge();
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
var weeks = Math.floor(days / 7);
var time = this.model.get('time');
var fullDate = (time.getDate() < 10 ? '0' : '') + time.getDate() + '.' + ((time.getMonth() + 1) < 10 ? '0' : '') + (time.getMonth() + 1) + '.' + time.getFullYear();
var fullTime = (time.getHours() < 10 ? '0' : '') + time.getHours() + ':' + (time.getMinutes() < 10 ? '0' : '') + time.getMinutes() + ':' + (time.getSeconds() < 10 ? '0' : '') + time.getSeconds();
var fullDateTime = fullDate + ' ' + fullTime;
// Always display the full date, if desired
if(this.options.fullDate)
{
this.$time.html(fullDateTime);
return;
}
var text =
weeks > 0 ? fullDateTime :
days > 0 ? days + ' ' + config.ui.timeDaysAgo :
hours > 0 ? hours + ' ' + config.ui.timeHoursAgo :
minutes > 0 ? minutes + ' ' + config.ui.timeMinutesAgo :
Math.max((seconds - seconds % 5), 1) + ' ' + config.ui.timeSecondsAgo
;
this.$time.html(text);
// Reschedule the update
if(reschedule)
{
var nextTimeout =
days > 0 ? -1 :
hours > 0 ? (60 - minutes % 60) * 60 * 60 :
minutes > 5 ? (5 - minutes % 5) * 60 :
minutes > 0 ? 60 :
10 - seconds % 10
;
if(nextTimeout == -1)
{
return;
}
// -----
var self = this;
this.timerId = setTimeout(function()
{
self.updateTime(true);
}, nextTimeout * 1000);
}
},
clean : function()
{
// Stop update timer
if(this.timerId) clearTimeout(this.timerId);
return this;
}
},
{
EMOTICONS : {
'>:|' : config.rootPath + 'img/emots/emot-9.png',
'>:D' : config.rootPath + 'img/emots/emot-10.png',
'o_O' : config.rootPath + 'img/emots/emot-11.png',
':-D' : config.rootPath + 'img/emots/emot-18.png',
';-D' : config.rootPath + 'img/emots/emot-19.png',
'*-D' : config.rootPath + 'img/emots/emot-20.png',
':)' : config.rootPath + 'img/emots/emot-1.png',
';)' : config.rootPath + 'img/emots/emot-2.png',
':(' : config.rootPath + 'img/emots/emot-3.png',
':D' : config.rootPath + 'img/emots/emot-4.png',
':P' : config.rootPath + 'img/emots/emot-5.png',
'=)' : config.rootPath + 'img/emots/emot-6.png',
':|' : config.rootPath + 'img/emots/emot-7.png',
'=|' : config.rootPath + 'img/emots/emot-8.png',
'=O' : config.rootPath + 'img/emots/emot-12.png',
'<3' : config.rootPath + 'img/emots/emot-13.png',
':S' : config.rootPath + 'img/emots/emot-14.png',
':*' : config.rootPath + 'img/emots/emot-15.png',
':$' : config.rootPath + 'img/emots/emot-16.png',
'=B' : config.rootPath + 'img/emots/emot-17.png'
},
createEmotElement : function(url)
{
return '<img src="' + url + '" />';
},
createLinkElement : function(text, url)
{
// Break lines if necessary
if(text.length > 40)
{
}
return '<a href="' + url + '" target="_blank">' + text + '</a>';
}
});
})(window.Application, window.chatConfig, jQuery);