Mibew/i18n
1
0
Fork 0
mirror of https://github.com/Mibew/i18n.git synced 2025-11-01 01:36:57 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Create chat layout in Chat JavaScript application

Browse Source
This commit is contained in:
Dmitriy Simushev 2013-02-15 09:59:14 +00:00
parent f3ea7d790b
commit dc25058a05
12 changed files with 129 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/messenger/webim/js/compiled/chat/app.js
View File

@ -5,9 +5,9 @@
Copyright (c) 2005-2011 Mibew Messenger Community
License: http://mibew.org/license.php
*/
(function(a,j){var f=a.Application;f.addRegions({controlsRegion:"#controls-region",avatarRegion:"#avatar-region",messagesRegion:a.Regions.Messages,statusRegion:"#status-region",messageFormRegion:"#message-form-region",soundRegion:"#sound-region"});f.addInitializer(function(d){var g=a.Objects,c=a.Objects.Models,b=a.Objects.Models.Controls,h=a.Objects.Models.Status;g.server=new a.Server(j.extend({interactionType:MibewAPIChatInteraction},d.server));c.thread=new a.Models.Thread(d.thread);c.user=new a.Models.ChatUser(d.user);
c.page=new a.Models.Page(d.page);var e=new a.Collections.Controls;c.user.get("isAgent")||(b.userName=new a.Models.UserNameControl({weight:220}),e.add(b.userName),b.sendMail=new a.Models.SendMailControl({weight:200,link:d.links.mailLink}),e.add(b.sendMail));c.user.get("isAgent")&&(b.redirect=new a.Models.RedirectControl({weight:200,link:d.links.redirectLink}),e.add(b.redirect),b.history=new a.Models.HistoryControl({weight:180,link:d.links.historyLink}),e.add(b.history));b.sound=new a.Models.SoundControl({weight:160});
e.add(b.sound);b.refresh=new a.Models.RefreshControl({weight:140});e.add(b.refresh);d.links.sslLink&&(b.secureMode=new a.Models.SecureModeControl({weight:120,link:d.links.sslLink}),e.add(b.secureMode));b.close=new a.Models.CloseControl({weight:100});e.add(b.close);g.Collections.controls=e;f.controlsRegion.show(new a.Views.ControlsCollection({collection:e}));h.message=new a.Models.StatusMessage({hideTimeout:5E3});h.typing=new a.Models.StatusTyping({hideTimeout:5E3});g.Collections.status=new a.Collections.Status([h.message,
h.typing]);f.statusRegion.show(new a.Views.StatusCollection({collection:g.Collections.status}));c.user.get("isAgent")||(c.avatar=new a.Models.Avatar,f.avatarRegion.show(new a.Views.Avatar({model:c.avatar})));g.Collections.messages=new a.Collections.Messages;c.messageForm=new a.Models.MessageForm(d.messageForm);f.messageFormRegion.show(new a.Views.MessageForm({model:c.messageForm}));f.messagesRegion.show(new a.Views.MessagesCollection({collection:g.Collections.messages}));c.sound=new a.Models.Sound;
(function(a,k){var h=a.Application;h.addRegions({mainRegion:"#main-region"});h.addInitializer(function(d){var g=a.Objects,c=a.Objects.Models,b=a.Objects.Models.Controls,j=a.Objects.Models.Status,f=new a.Layouts.Chat({model:new Backbone.Model(d.layoutsData.chat||{})});a.Objects.chatLayout=f;h.mainRegion.show(f);g.server=new a.Server(k.extend({interactionType:MibewAPIChatInteraction},d.server));c.thread=new a.Models.Thread(d.thread);c.user=new a.Models.ChatUser(d.user);c.page=new a.Models.Page(d.page);
var e=new a.Collections.Controls;c.user.get("isAgent")||(b.userName=new a.Models.UserNameControl({weight:220}),e.add(b.userName),b.sendMail=new a.Models.SendMailControl({weight:200,link:d.links.mailLink}),e.add(b.sendMail));c.user.get("isAgent")&&(b.redirect=new a.Models.RedirectControl({weight:200,link:d.links.redirectLink}),e.add(b.redirect),b.history=new a.Models.HistoryControl({weight:180,link:d.links.historyLink}),e.add(b.history));b.sound=new a.Models.SoundControl({weight:160});e.add(b.sound);
b.refresh=new a.Models.RefreshControl({weight:140});e.add(b.refresh);d.links.sslLink&&(b.secureMode=new a.Models.SecureModeControl({weight:120,link:d.links.sslLink}),e.add(b.secureMode));b.close=new a.Models.CloseControl({weight:100});e.add(b.close);g.Collections.controls=e;f.controlsRegion.show(new a.Views.ControlsCollection({collection:e}));j.message=new a.Models.StatusMessage({hideTimeout:5E3});j.typing=new a.Models.StatusTyping({hideTimeout:5E3});g.Collections.status=new a.Collections.Status([j.message,
j.typing]);f.statusRegion.show(new a.Views.StatusCollection({collection:g.Collections.status}));c.user.get("isAgent")||(c.avatar=new a.Models.Avatar,f.avatarRegion.show(new a.Views.Avatar({model:c.avatar})));g.Collections.messages=new a.Collections.Messages;c.messageForm=new a.Models.MessageForm(d.messageForm);f.messageFormRegion.show(new a.Views.MessageForm({model:c.messageForm}));f.messagesRegion.show(new a.Views.MessagesCollection({collection:g.Collections.messages}));c.sound=new a.Models.Sound;
f.soundRegion.show(new a.Views.Sound({model:c.sound}));g.server.callFunctionsPeriodically(function(){var b=a.Objects.Models.thread,c=a.Objects.Models.user;return[{"function":"update",arguments:{"return":{typing:"typing",canPost:"canPost"},references:{},threadId:b.get("id"),token:b.get("token"),lastId:b.get("lastId"),typed:c.get("typing"),user:!c.get("isAgent")}}]},function(b){b.errorCode?a.Objects.Models.Status.message.setMessage(b.errorMessage||"refresh failed"):(b.typing&&a.Objects.Models.Status.typing.show(),
a.Objects.Models.user.set({canPost:b.canPost||!1}))})});f.on("start",function(){a.Objects.server.runUpdater()})})(Mibew,_);
a.Objects.Models.user.set({canPost:b.canPost||!1}))})});h.on("start",function(){a.Objects.server.runUpdater()})})(Mibew,_);

2
src/messenger/webim/js/compiled/chat/init.js
View File

@ -5,4 +5,4 @@
Copyright (c) 2005-2011 Mibew Messenger Community
License: http://mibew.org/license.php
*/
(function(a){a.Regions={};a.Objects.Models.Controls={};a.Objects.Models.Status={};a.Application=new Backbone.Marionette.Application})(Mibew);
(function(a){a.Regions={};a.Layouts={};a.Objects.Models.Controls={};a.Objects.Models.Status={};a.Application=new Backbone.Marionette.Application})(Mibew);

8
src/messenger/webim/js/compiled/chat/layouts/chat.js Normal file
View File

@ -0,0 +1,8 @@
/*
This file is part of Mibew Messenger project.
http://mibew.org
Copyright (c) 2005-2011 Mibew Messenger Community
License: http://mibew.org/license.php
*/
(function(a,b){a.Layouts.Chat=b.Marionette.Layout.extend({template:Handlebars.templates.chat_layout,regions:{controlsRegion:"#controls-region",avatarRegion:"#avatar-region",messagesRegion:{selector:"#messages-region",regionType:a.Regions.Messages},statusRegion:"#status-region",messageFormRegion:"#message-form-region",soundRegion:"#sound-region"}})})(Mibew,Backbone);

2
src/messenger/webim/js/compiled/chat/regions/messages.js
View File

@ -5,4 +5,4 @@
Copyright (c) 2005-2011 Mibew Messenger Community
License: http://mibew.org/license.php
*/
(function(a,b){a.Regions.Messages=b.Marionette.Region.extend({el:"#messages-region",onShow:function(a){a.on("after:item:added",this.scrollToBottom,this)},scrollToBottom:function(){this.$el.scrollTop(this.$el.prop("scrollHeight"))}})})(Mibew,Backbone);
(function(a,b){a.Regions.Messages=b.Marionette.Region.extend({onShow:function(a){a.on("after:item:added",this.scrollToBottom,this)},scrollToBottom:function(){this.$el.scrollTop(this.$el.prop("scrollHeight"))}})})(Mibew,Backbone);

21
src/messenger/webim/js/compiled/chat_app.js
View File

@ -4,7 +4,7 @@
Copyright (c) 2005-2011 Mibew Messenger Community
License: http://mibew.org/license.php
*/
(function(a){a.Regions={};a.Objects.Models.Controls={};a.Objects.Models.Status={};a.Application=new Backbone.Marionette.Application})(Mibew);
(function(a){a.Regions={};a.Layouts={};a.Objects.Models.Controls={};a.Objects.Models.Status={};a.Application=new Backbone.Marionette.Application})(Mibew);
/*
This file is part of Mibew Messenger project.
http://mibew.org
@ -242,16 +242,23 @@ c=""!=this.ui.message.val();c!=a.get("typing")&&a.set({typing:c})},setFocus:func
Copyright (c) 2005-2011 Mibew Messenger Community
License: http://mibew.org/license.php
*/
(function(a,b){a.Regions.Messages=b.Marionette.Region.extend({el:"#messages-region",onShow:function(a){a.on("after:item:added",this.scrollToBottom,this)},scrollToBottom:function(){this.$el.scrollTop(this.$el.prop("scrollHeight"))}})})(Mibew,Backbone);
(function(a,b){a.Regions.Messages=b.Marionette.Region.extend({onShow:function(a){a.on("after:item:added",this.scrollToBottom,this)},scrollToBottom:function(){this.$el.scrollTop(this.$el.prop("scrollHeight"))}})})(Mibew,Backbone);
/*
This file is part of Mibew Messenger project.
http://mibew.org
Copyright (c) 2005-2011 Mibew Messenger Community
License: http://mibew.org/license.php
*/
(function(a,j){var f=a.Application;f.addRegions({controlsRegion:"#controls-region",avatarRegion:"#avatar-region",messagesRegion:a.Regions.Messages,statusRegion:"#status-region",messageFormRegion:"#message-form-region",soundRegion:"#sound-region"});f.addInitializer(function(d){var g=a.Objects,c=a.Objects.Models,b=a.Objects.Models.Controls,h=a.Objects.Models.Status;g.server=new a.Server(j.extend({interactionType:MibewAPIChatInteraction},d.server));c.thread=new a.Models.Thread(d.thread);c.user=new a.Models.ChatUser(d.user);
c.page=new a.Models.Page(d.page);var e=new a.Collections.Controls;c.user.get("isAgent")||(b.userName=new a.Models.UserNameControl({weight:220}),e.add(b.userName),b.sendMail=new a.Models.SendMailControl({weight:200,link:d.links.mailLink}),e.add(b.sendMail));c.user.get("isAgent")&&(b.redirect=new a.Models.RedirectControl({weight:200,link:d.links.redirectLink}),e.add(b.redirect),b.history=new a.Models.HistoryControl({weight:180,link:d.links.historyLink}),e.add(b.history));b.sound=new a.Models.SoundControl({weight:160});
e.add(b.sound);b.refresh=new a.Models.RefreshControl({weight:140});e.add(b.refresh);d.links.sslLink&&(b.secureMode=new a.Models.SecureModeControl({weight:120,link:d.links.sslLink}),e.add(b.secureMode));b.close=new a.Models.CloseControl({weight:100});e.add(b.close);g.Collections.controls=e;f.controlsRegion.show(new a.Views.ControlsCollection({collection:e}));h.message=new a.Models.StatusMessage({hideTimeout:5E3});h.typing=new a.Models.StatusTyping({hideTimeout:5E3});g.Collections.status=new a.Collections.Status([h.message,
h.typing]);f.statusRegion.show(new a.Views.StatusCollection({collection:g.Collections.status}));c.user.get("isAgent")||(c.avatar=new a.Models.Avatar,f.avatarRegion.show(new a.Views.Avatar({model:c.avatar})));g.Collections.messages=new a.Collections.Messages;c.messageForm=new a.Models.MessageForm(d.messageForm);f.messageFormRegion.show(new a.Views.MessageForm({model:c.messageForm}));f.messagesRegion.show(new a.Views.MessagesCollection({collection:g.Collections.messages}));c.sound=new a.Models.Sound;
(function(a,b){a.Layouts.Chat=b.Marionette.Layout.extend({template:Handlebars.templates.chat_layout,regions:{controlsRegion:"#controls-region",avatarRegion:"#avatar-region",messagesRegion:{selector:"#messages-region",regionType:a.Regions.Messages},statusRegion:"#status-region",messageFormRegion:"#message-form-region",soundRegion:"#sound-region"}})})(Mibew,Backbone);
/*
This file is part of Mibew Messenger project.
http://mibew.org
Copyright (c) 2005-2011 Mibew Messenger Community
License: http://mibew.org/license.php
*/
(function(a,k){var h=a.Application;h.addRegions({mainRegion:"#main-region"});h.addInitializer(function(d){var g=a.Objects,c=a.Objects.Models,b=a.Objects.Models.Controls,j=a.Objects.Models.Status,f=new a.Layouts.Chat({model:new Backbone.Model(d.layoutsData.chat||{})});a.Objects.chatLayout=f;h.mainRegion.show(f);g.server=new a.Server(k.extend({interactionType:MibewAPIChatInteraction},d.server));c.thread=new a.Models.Thread(d.thread);c.user=new a.Models.ChatUser(d.user);c.page=new a.Models.Page(d.page);
var e=new a.Collections.Controls;c.user.get("isAgent")||(b.userName=new a.Models.UserNameControl({weight:220}),e.add(b.userName),b.sendMail=new a.Models.SendMailControl({weight:200,link:d.links.mailLink}),e.add(b.sendMail));c.user.get("isAgent")&&(b.redirect=new a.Models.RedirectControl({weight:200,link:d.links.redirectLink}),e.add(b.redirect),b.history=new a.Models.HistoryControl({weight:180,link:d.links.historyLink}),e.add(b.history));b.sound=new a.Models.SoundControl({weight:160});e.add(b.sound);
b.refresh=new a.Models.RefreshControl({weight:140});e.add(b.refresh);d.links.sslLink&&(b.secureMode=new a.Models.SecureModeControl({weight:120,link:d.links.sslLink}),e.add(b.secureMode));b.close=new a.Models.CloseControl({weight:100});e.add(b.close);g.Collections.controls=e;f.controlsRegion.show(new a.Views.ControlsCollection({collection:e}));j.message=new a.Models.StatusMessage({hideTimeout:5E3});j.typing=new a.Models.StatusTyping({hideTimeout:5E3});g.Collections.status=new a.Collections.Status([j.message,
j.typing]);f.statusRegion.show(new a.Views.StatusCollection({collection:g.Collections.status}));c.user.get("isAgent")||(c.avatar=new a.Models.Avatar,f.avatarRegion.show(new a.Views.Avatar({model:c.avatar})));g.Collections.messages=new a.Collections.Messages;c.messageForm=new a.Models.MessageForm(d.messageForm);f.messageFormRegion.show(new a.Views.MessageForm({model:c.messageForm}));f.messagesRegion.show(new a.Views.MessagesCollection({collection:g.Collections.messages}));c.sound=new a.Models.Sound;
f.soundRegion.show(new a.Views.Sound({model:c.sound}));g.server.callFunctionsPeriodically(function(){var b=a.Objects.Models.thread,c=a.Objects.Models.user;return[{"function":"update",arguments:{"return":{typing:"typing",canPost:"canPost"},references:{},threadId:b.get("id"),token:b.get("token"),lastId:b.get("lastId"),typed:c.get("typing"),user:!c.get("isAgent")}}]},function(b){b.errorCode?a.Objects.Models.Status.message.setMessage(b.errorMessage||"refresh failed"):(b.typing&&a.Objects.Models.Status.typing.show(),
a.Objects.Models.user.set({canPost:b.canPost||!1}))})});f.on("start",function(){a.Objects.server.runUpdater()})})(Mibew,_);
a.Objects.Models.user.set({canPost:b.canPost||!1}))})});h.on("start",function(){a.Objects.server.runUpdater()})})(Mibew,_);

29
src/messenger/webim/js/source/chat/app.js
View File

@ -13,12 +13,7 @@
// Define regions
App.addRegions({
controlsRegion: '#controls-region',
avatarRegion: '#avatar-region',
messagesRegion: Mibew.Regions.Messages,
statusRegion: '#status-region',
messageFormRegion: '#message-form-region',
soundRegion: '#sound-region'
mainRegion: '#main-region'
});
// Initialize application
@ -29,6 +24,15 @@
var controls = Mibew.Objects.Models.Controls;
var status = Mibew.Objects.Models.Status;
// Create instance of the chat layout
// Use undocumented feature of layouts: passing model to layout
var layout = new Mibew.Layouts.Chat({
model: new Backbone.Model(options.layoutsData.chat || {})
});
Mibew.Objects.chatLayout = layout;
// Show layout at page
App.mainRegion.show(layout);
// Initialize Server, Thread and User
objs.server = new Mibew.Server(_.extend(
@ -109,7 +113,7 @@
objs.Collections.controls = ctrlsCollection;
// Display controls
App.controlsRegion.show(new Mibew.Views.ControlsCollection({
layout.controlsRegion.show(new Mibew.Views.ControlsCollection({
collection: ctrlsCollection
}));
@ -128,7 +132,7 @@
]);
// Display status bar
App.statusRegion.show(new Mibew.Views.StatusCollection({
layout.statusRegion.show(new Mibew.Views.StatusCollection({
collection: objs.Collections.status
}));
@ -136,7 +140,7 @@
// Initialize avatar only for user
if (! models.user.get('isAgent')) {
models.avatar = new Mibew.Models.Avatar();
App.avatarRegion.show(new Mibew.Views.Avatar({
layout.avatarRegion.show(new Mibew.Views.Avatar({
model: models.avatar
}));
}
@ -152,23 +156,22 @@
);
// Display message processor
App.messageFormRegion.show(new Mibew.Views.MessageForm({
layout.messageFormRegion.show(new Mibew.Views.MessageForm({
model: models.messageForm
}));
// Display messages
App.messagesRegion.show(new Mibew.Views.MessagesCollection({
layout.messagesRegion.show(new Mibew.Views.MessagesCollection({
collection: objs.Collections.messages
}));
// Initialize sounds
models.sound = new Mibew.Models.Sound();
App.soundRegion.show(new Mibew.Views.Sound({
layout.soundRegion.show(new Mibew.Views.Sound({
model: models.sound
}));
// TODO: May be move it somewhere else
// Periodically call update function at the server side
objs.server.callFunctionsPeriodically(

5
src/messenger/webim/js/source/chat/init.js
View File

@ -13,6 +13,11 @@
*/
Mibew.Regions = {};
/**
* @namespace Holds application layouts constructors
*/
Mibew.Layouts = {};
/**
* @namespace Holds instances of control models
*/

41
src/messenger/webim/js/source/chat/layouts/chat.js Normal file
View File

@ -0,0 +1,41 @@
/**
* @preserve This file is part of Mibew Messenger project.
* http://mibew.org
*
* Copyright (c) 2005-2011 Mibew Messenger Community
* License: http://mibew.org/license.php
*/
(function(Mibew, Backbone){
/**
* Represents chat layout
*/
Mibew.Layouts.Chat = Backbone.Marionette.Layout.extend(
/** @lends Mibew.Layouts.Chat.prototype */
{
/**
* Template function
* @type Function
*/
template: Handlebars.templates.chat_layout,
/**
* Regions list
* @type Object
*/
regions: {
controlsRegion: '#controls-region',
avatarRegion: '#avatar-region',
messagesRegion: {
selector: '#messages-region',
regionType: Mibew.Regions.Messages
},
statusRegion: '#status-region',
messageFormRegion: '#message-form-region',
soundRegion: '#sound-region'
}
}
);
})(Mibew, Backbone);

6
src/messenger/webim/js/source/chat/regions/messages.js
View File

@ -14,12 +14,6 @@
Mibew.Regions.Messages = Backbone.Marionette.Region.extend(
/** @lends Mibew.Regions.Message */
{
/**
* DOM element for the region
* @type String
*/
el: '#messages-region',
/**
* Show view event handler. Register handler to view's
* 'after:item:added' event.

29
src/messenger/webim/styles/dialogs/default/handlebars_templates/chat_layout.handlebars Normal file
View File

@ -0,0 +1,29 @@
{{! Chat header}}
<div id="chat-header">
<div class="bgc"><div class="bgl"><div class="bgr">
{{! Chat controls region}}
<div id="controls-region"></div>
</div></div></div>
</div>
{{! Chat region}}
<div id="chat">
<div class="bgl"><div class="bgr"><div class="sdwbgc"><div class="sdwbgl"><div class="sdwbgr">
{{#if user}}
<div id="avatar-region"></div>
{{/if}}
{{! Chat messages region}}
<div id="messages-region"></div>
{{! Chat status region}}
<div id="status-region"></div>
</div></div></div></div></div>
</div>
{{! Message form region}}
<div id="message-form-region"></div>
{{! Footer links}}
<div id="footer">{{L10n "chat.window.poweredby"}} <a id="poweredByLink" href="http://mibew.org" title="Mibew Community" target="_blank">mibew.org</a></div>
{{! Hidden region for some sound element}}
<div id="sound-region"></div>

2
src/messenger/webim/styles/dialogs/default/js/compiled/templates.js
View File

File diff suppressed because one or more lines are too long

39
src/messenger/webim/styles/dialogs/default/templates/chat.tpl
View File

@ -45,7 +45,8 @@
'chat.client.name': "${msg:chat.client.name}",
'chat.client.changename': "${msg:chat.client.changename}",
'chat.window.toolbar.turn_off_sound': "${msg:chat.window.toolbar.turn_off_sound}",
'chat.window.toolbar.turn_on_sound': "${msg:chat.window.toolbar.turn_on_sound}"
'chat.window.toolbar.turn_on_sound': "${msg:chat.window.toolbar.turn_on_sound}",
'chat.window.poweredby': "${msg:chat.window.poweredby}"
});
//--></script>
@ -90,6 +91,11 @@
mailWindowParams: "${page:chatStyles.mailWindowParams}",
historyWindowParams: "${page:coreStyles.historyWindowParams}"
},
layoutsData: {
chat: {
user: ${if:user}true${else:user}false${endif:user}
}
},
plugins: ${page:js_plugin_options}
});
});
@ -124,35 +130,6 @@
</div>
</div>
<!-- Chat header -->
<div id="chat-header">
<div class="bgc"><div class="bgl"><div class="bgr">
<!-- Chat controls region -->
<div id="controls-region"></div>
</div></div></div>
</div>
<!-- Chat region -->
<div id="chat">
<div class="bgl"><div class="bgr"><div class="sdwbgc"><div class="sdwbgl"><div class="sdwbgr">
${if:user}
<div id="avatar-region"></div>
${endif:user}
<!-- Chat messages region -->
<div id="messages-region"></div>
<!-- Chat status region -->
<div id="status-region"></div>
</div></div></div></div></div>
</div>
<!-- Message form region -->
<div id="message-form-region"></div>
<!-- Footer links -->
<div id="footer">${msg:chat.window.poweredby} <a id="poweredByLink" href="http://mibew.org" title="Mibew Community" target="_blank">mibew.org</a></div>
<!-- Hidden region for some sound element -->
<div id="sound-region"></div>
<div id="main-region"></div>
</body>
</html>