Browse code

Uprava svojej status spravy a statusu (on/away/dnd)

Cinan Rakosnik authored on 06/04/2013 at 23:22:37
Showing 6 changed files
... ...
@@ -53,6 +53,9 @@ this.App =
53 53
         )
54 54
       )
55 55
 
56
+    updateMyStatus: (message, state)->
57
+      App.Com.trigger(event: 'app.roster.updateMyStatus', data: {message: message, state: state})
58
+
56 59
     removeContactRemote: (contact, client) ->
57 60
       App.Com.trigger(event: 'app.roster.removeContact', data: {jid: contact, client: client})
58 61
 
... ...
@@ -1,10 +1,22 @@
1 1
 .user
2 2
   .avatar.bigger{ title: "#{@jid}" }
3
-    %img{ src: "#{@avatar || 'assets/avatar.png'}", alt: I18n.t("chat.roster.avatar_alt") }
3
+    %img{ src: "#{@avatar || 'assets/avatar.png'}", alt: I18n.t('chat.roster.avatar_alt') }
4 4
   %h1{ title: "#{@jid}"} #{@name }
5
-  %h2 #{@message || '<i>'+I18n.t('chat.roster.change_status_msg')+'</i>'}
5
+  %h2 #{@message || '<input type="text" class="js-click-edit empty" value="'+I18n.t('chat.roster.change_status_msg')+'">'}
6 6
   %h3
7
-    %span.status.icon-record{ class: "#{@status}" }
8
-    %a{ href: "#"}
9
-      #{@status}
10
-      %span.icon-arrow-down.drop-down
11 7
\ No newline at end of file
8
+    .rolldown.js-change-state
9
+      .js-state-clickable{ 'data-state': 'online' }
10
+        %span.status.icon-record.online
11
+        %a.active{ href: '#' }
12
+          Online
13
+          %br
14
+      .hidden.js-state-clickable{ 'data-state': 'away' }
15
+        %span.status.icon-record.away
16
+        %a{ href: '#' }
17
+          Away
18
+          %br
19
+      .hidden.js-state-clickable{ 'data-state': 'dnd' }
20
+        %span.status.icon-record.dnd
21
+        %a{ href: '#' }
22
+          DND
23
+    %span.icon-arrow-down.drop-down
12 24
\ No newline at end of file
... ...
@@ -4,6 +4,12 @@ class Xmpp.Views.Contacts.MeView extends Backbone.View
4 4
   template: JST["backbone/templates/contacts/me"]
5 5
   el: $('#js-me')
6 6
 
7
+  events:
8
+    'click .js-click-edit': (e) -> @editMyStatus(e)
9
+    'keypress .js-click-edit': (e) -> @confirmMyStatus(e)
10
+    'click .js-change-state': (e) -> @openChangeState(e)
11
+    'click .js-state-clickable': (e) -> @confirmChangeState(e)
12
+
7 13
   initialize: () ->
8 14
     _.bindAll(this)
9 15
 
... ...
@@ -16,4 +22,61 @@ class Xmpp.Views.Contacts.MeView extends Backbone.View
16 16
   render: ->
17 17
     contact = @model.toJSON()
18 18
     $(@el).html(@template(contact))
19
-    this
20 19
\ No newline at end of file
20
+    this
21
+
22
+  editMyStatus: (e) ->
23
+    $this = $(e.currentTarget)
24
+
25
+    if ($this.hasClass('empty'))
26
+      $this.val('')
27
+
28
+    if (! $this.hasClass('editing'))
29
+      $this.removeClass('empty')
30
+           .addClass('editing')
31
+
32
+  confirmMyStatus: (e) ->
33
+    if (e.which != 13 && e.which != 10)
34
+      return
35
+
36
+    $this = $(e.currentTarget)
37
+
38
+    if ($this.val() == '')
39
+      $this.removeClass('editing')
40
+        .addClass('empty')
41
+        .val(I18n.t('chat.roster.change_status_msg'))
42
+    else
43
+      $this.removeClass('editing')
44
+
45
+    $this.blur()
46
+    App.Com.updateMyStatus(@_getStatusMessage(), @_getState())
47
+
48
+  openChangeState: (e) ->
49
+    $this = $(e.currentTarget)
50
+
51
+    $this.addClass('editing')
52
+         .find('.hidden').removeClass('hidden')
53
+
54
+    $('.rolldown').removeClass('js-change-state')
55
+
56
+  confirmChangeState: (e) ->
57
+    $this = $(e.currentTarget)
58
+
59
+    $('.rolldown').removeClass('editing')
60
+      .addClass('js-change-state')
61
+      .children().addClass('hidden')
62
+
63
+    $('.rolldown').find('a').removeClass('active')
64
+
65
+    $this.removeClass('hidden')
66
+      .find('a').addClass('active')
67
+
68
+    App.Com.updateMyStatus(@_getStatusMessage(), @_getState())
69
+
70
+  _getStatusMessage: ->
71
+    if $('.js-click-edit').hasClass('empty')
72
+      return ''
73
+    else
74
+      $('.js-click-edit').val()
75
+
76
+  _getState: ->
77
+    $('.js-state-clickable:not(.hidden)').data('state')
... ...
@@ -41,10 +41,30 @@
41 41
   }
42 42
 
43 43
   h2 {
44
-    font-size: 11px;
45
-    font-weight: normal;
46
-    color: #7e8b90;
47
-    text-shadow: white 1px 1px;
44
+    input {
45
+      border: 0;
46
+      background: transparent;
47
+      width: 151px;
48
+      padding: 0;
49
+      outline: none;
50
+      margin: 0;
51
+      font-style: italic;
52
+      font-size: 11px;
53
+      font-weight: normal;
54
+      color: #7e8b90;
55
+      text-shadow: white 1px 1px;
56
+      height: 18px;
57
+
58
+      &:focus {
59
+        border: none !important;
60
+      }
61
+
62
+      &.editing {
63
+        padding: 3px 0;
64
+        font-style: normal;
65
+        text-shadow: none;
66
+      }
67
+    }
48 68
   }
49 69
 
50 70
   h3 {
... ...
@@ -52,10 +72,28 @@
52 52
     color: $status-color;
53 53
     margin-top: -3px;
54 54
 
55
+    .rolldown {
56
+      clear: both;
57
+      left: 54px;
58
+      position: relative;
59
+      top: -8px;
60
+      width: 67px;
61
+      font-weight: normal;
62
+      float: left;
63
+
64
+      &.editing {
65
+        background: white;
66
+      }
67
+
68
+      .active {
69
+        font-weight: bold;
70
+      }
71
+    }
72
+
55 73
     .drop-down {
56 74
       position: relative;
57 75
       top: 2px;
58
-      left: -2px;
76
+      left: 36px;
59 77
       font-size: 13px;
60 78
     }
61 79
   }
... ...
@@ -107,8 +145,18 @@
107 107
     }
108 108
   }
109 109
 
110
-  .user:hover {
111
-    background: #fbfbfb;
110
+  .user {
111
+    h2 {
112
+      font-size: 11px;
113
+      font-weight: normal;
114
+      color: #7e8b90;
115
+      text-shadow: white 1px 1px;
116
+    }
117
+
118
+    &:hover {
119
+      background: #fbfbfb;
120
+    }
121
+
112 122
   }
113 123
 
114 124
   .active-group {
... ...
@@ -153,6 +153,29 @@ class WsRosterController < WebsocketRails::BaseController
153 153
         trigger_success jid: jid, vcard: vcard, status: presence
154 154
     end
155 155
 
156
+    def me_update_status
157
+        status_message = message[:message]
158
+        state = message[:state]
159
+
160
+        xmpp_state = case state
161
+                     when 'away' then :away
162
+                     when 'dnd' then :dnd
163
+                     else nil
164
+        end
165
+
166
+        presence = Jabber::Presence.new
167
+        presence.show = xmpp_state
168
+        presence.status = status_message
169
+
170
+        connection_store[:clients].each do |client|
171
+            client.send(presence)
172
+        end
173
+    end
174
+
175
+    def me_update_vcard
176
+
177
+    end
178
+
156 179
     def disconnect
157 180
         connection_store[:clients] && connection_store[:clients].each do |client|
158 181
             client.close()
... ...
@@ -54,6 +54,8 @@ WebsocketRails::EventMap.describe do
54 54
             subscribe :startPolling,        to: WsRosterController, with_method: :start_polling_contacts_state
55 55
             subscribe :setPresence,         to: WsRosterController, with_method: :set_presence
56 56
             subscribe :myself,              to: WsRosterController, with_method: :myself
57
+            subscribe :updateMyStatus,      to: WsRosterController, with_method: :me_update_status
58
+            subscribe :updateMyVcard,       to: WsRosterController, with_method: :me_update_vcard
57 59
             subscribe :removeContact,       to: WsRosterController, with_method: :remove_contact
58 60
         end
59 61