js/app.ui.js

   1 /*jslint devel: true */
   2 /*global $, tizen, app, UiEvents, TemplateManager, document, window, setTimeout */
   3 /**
   4  * @class Ui
   5  */
   6
   7 function Ui(callback) {
   8         'use strict';
   9         this.init(callback);
  10 }
  11
  12 (function () { // strict mode wrapper
  13         'use strict';
  14         Ui.prototype = {
  15
  16                 templateManager: null,
  17
  18                 /**
  19                  * UI object for UI events
  20                  */
  21                 uiEvents: null,
  22
  23                 /**
  24                  * UI module initialisation
  25                  */
  26                 init: function Ui_init(callback) {
  27                         this.templateManager = new TemplateManager();
  28                         this.uiEvents = new UiEvents(this);
  29                         $.mobile.tizen.disableSelection(document);
  30
  31                         $(document).ready(this.domInit.bind(this, callback));
  32                 },
  33
  34                 /**
  35                  * When DOM is ready, initialise it (bind events)
  36                  */
  37                 domInit: function Ui_domInit(callback) {
  38                         var templates = ['keyboard_page',
  39                                          'chat_page',
  40                                          'choose_page',
  41                                          'server_row',
  42                                          'left_bubble',
  43                                          'right_bubble',
  44                                          'bye_popup',
  45                                          'visibility_popup'
  46                         ];
  47
  48                         this.templateManager.loadToCache(templates, this.initPages.bind(this, callback));
  49                 },
  50
  51                 initPages: function Ui_initPages(callback) {
  52                         var pages = [], body = $('body');
  53
  54                         body.append(this.templateManager.get('bye_popup')).append(this.templateManager.get('visibility_popup')).trigger('create');
  55
  56                         pages.push(this.templateManager.get('keyboard_page'));
  57                         pages.push(this.templateManager.get('chat_page'));
  58                         pages.push(this.templateManager.get('choose_page'));
  59                         body.append(pages.join(''));
  60
  61                         this.uiEvents.init();
  62
  63                         callback();
  64                 },
  65
  66                 setContentStartAttributes: function Ui_setContentStartAttributes(callback) {
  67                         var contentStart, contentStartHeight;
  68                         contentStart = $('#start-content');
  69                         if (contentStart.height() > $(window).height()) {
  70                                 contentStartHeight = $(window).height() - $('#start-header').height()
  71                                         - parseInt(contentStart.css('padding-top'), 10) - parseInt(contentStart.css('padding-bottom'), 10);
  72                         } else {
  73                                 contentStartHeight = contentStart.height();
  74                         }
  75                         setTimeout(function () { // workaround (setTimeout with 0 delay)
  76                                 contentStart
  77                                         .css('height', contentStartHeight  + 'px')
  78                                         .css('min-height', 'auto')
  79                                         .css('width', contentStart.width() + 'px');
  80                                 $('#start').css('min-height', 'auto');
  81                                 callback();
  82                         }, 0);
  83                 },
  84
  85                 showChatPage: function Ui_showChatPage(serverName) {
  86                         if (serverName !== undefined) {
  87                                 $('#chat').data('serverName', serverName);
  88                         }
  89                         $.mobile.changePage('#chat');
  90                 },
  91
  92                 showKeyboardPage: function Ui_showKeyboardPage() {
  93                         $.mobile.changePage('#keyboard');
  94                 },
  95
  96                 clearChatDialog: function Ui_clearChatDialog() {
  97                         $('#chat-content .ui-listview').empty();
  98                 },
  99
 100                 showPowerOnButton: function Ui_showPowerOnButton() {
 101                         $('#start-monit').hide();
 102                         $('#serverButton').hide();
 103                         $('#clientButton').hide();
 104                         $('#turnOnButton').show();
 105                 },
 106
 107                 showStartButtons: function Ui_showStartButtons() {
 108                         $('#start-monit').hide();
 109                         $('#turnOnButton').hide();
 110                         $('#serverButton').show();
 111                         $('#clientButton').show();
 112                 },
 113
 114                 hideStartButtons: function Ui_hideStartButtons() {
 115                         $('#serverButton').hide();
 116                         $('#clientButton').hide();
 117                         $('#turnOnButton').hide();
 118                         $('#start-monit').show();
 119                 },
 120
 121                 addDeviceToList: function Ui_addDeviceToList(device) {
 122                         var listElement, address, sub2, ul = $('#choose-content ul.ui-listview');
 123
 124                         listElement = this.templateManager.get('server_row', {
 125                                 'deviceAddress': device.address,
 126                                 'deviceName': device.name
 127                         });
 128
 129                         ul.append(listElement);
 130                         ul.listview('refresh');
 131                 },
 132
 133                 clearListOfServers: function Ui_clearListOfServers() {
 134                         $('#choose-content ul.ui-listview').empty();
 135                 },
 136
 137                 showByePopup: function Ui_showByePopup(name) {
 138                         var mode = app.getApplicationMode(), message = $('#byeMessage');
 139                         if (mode === 'server') {
 140                                 message.html('Client name "' + name + '" is unavailable.\nYour bluetooth device will be automatically restarted.');
 141                         } else if (mode === 'client') {
 142                                 message.html('Server name "' + name + '" is unavailable.\nYour bluetooth device will be automatically restarted.');
 143                         }
 144                         $('#byePopup').popup('open', {'positionTo': 'window'});
 145                 },
 146
 147                 hideByePopup: function Ui_hideByePopup() {
 148                         $('#byePopup').popup('close');
 149                 },
 150
 151                 showVisibilityPopup: function Ui_showVisibilityPopup() {
 152                         $('#visibilityPopup').popup('open', {'positionTo': 'window'});
 153                 },
 154
 155                 hideVisibilityPopup: function Ui_hideVisibilityPopup() {
 156                         $('#visibilityPopup').popup('close');
 157                 },
 158
 159                 displayReceivedMessage: function Ui_displayReceivedMessage(name, text, ping, bye) {
 160                         var listElement, span, ul;
 161                         text = decodeURIComponent(text);
 162                         name = decodeURIComponent(name);
 163                         if (bye) {
 164                                 this.showByePopup(name);
 165                         } else if (ping) {
 166                                 app.setConnection(true);
 167                                 $('#chat-header-type').append(' - connected with ' + name);
 168                                 this.checkSendButtonState();
 169                         } else {
 170                                 listElement = this.templateManager.get('left_bubble', {
 171                                         'text': text
 172                                 });
 173                                 ul = $('#chat-content > .ui-scrollview-view > ul');
 174                                 ul.append(listElement);
 175                                 ul.listview('refresh');
 176                         }
 177                 },
 178
 179                 enableSendButton: function Ui_enableSendButton() {
 180                         $('#ui-mySend')
 181                                 .css({'pointer-events': 'auto', 'color': '#000'})
 182                                 .removeClass('ui-disabled');
 183                 },
 184
 185                 disableSendButton: function Ui_disableSendButton() {
 186                         $('#ui-mySend')
 187                                 .css({'pointer-events': 'none', 'color': '#bbb'})
 188                                 .removeClass('ui-btn-down-s')
 189                                 .addClass('ui-disabled');
 190                 },
 191
 192                 checkSendButtonState: function Ui_checkSendButtonState() {
 193                         if (app.helpers.checkStringLength($('#text').val().trim()) && app.isConnection()) {
 194                                 this.enableSendButton();
 195                         } else {
 196                                 this.disableSendButton();
 197                         }
 198                 },
 199
 200                 moveMessagesListDown: function Ui_moveMessagesListDown(content, listHeight) {
 201                         var delta = content.height() - listHeight;
 202                         if (delta < 0) {
 203                                 content.scrollview('scrollTo', 0, delta, 500);
 204                         }
 205                 },
 206
 207                 displaySentMessage: function Ui_displaySentMessage(message) {
 208                         var listElement, span, ul, content, self = this;
 209                         message = decodeURIComponent(message);
 210                         listElement = this.templateManager.get('right_bubble', {
 211                                 'text': message
 212                         });
 213                         content = $('#chat-content');
 214                         ul = content.find('ul');
 215                         ul.append(listElement);
 216                         ul.listview('refresh');
 217                         setTimeout(function () { self.moveMessagesListDown(content, ul.height()) }, 200);
 218                 },
 219
 220                 setDiscoveringProgress: function Ui_setDiscoveringProgress(boolean) {
 221                         $('#discovering').progress('hide', !boolean).progress('running', boolean);
 222                 }
 223
 224         };
 225
 226 }());