js/app.ui.js

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