js/app.ui.js

   1 /*jslint devel: true*/
   2 /*global $, tizen, App, app */
   3
   4 App.Ui = null;
   5
   6 (function () { // strict mode wrapper
   7         'use strict';
   8
   9         var prepareCallerName = function prepareCallerName(contact) {
  10                 var callerName, firstName, lastName;
  11                 callerName = '';
  12                 firstName = contact.name.firstName;
  13                 lastName = contact.name.lastName;
  14                 if (firstName !== '' && firstName !== null) {
  15                         callerName = firstName;
  16                 }
  17                 if (lastName !== '' && lastName !== null) {
  18                         if (callerName === '') {
  19                                 callerName += lastName;
  20                         } else {
  21                                 callerName += ' ';
  22                                 callerName += lastName;
  23                         }
  24                 }
  25                 if (callerName === '') {
  26                         callerName = 'no name';
  27                 }
  28                 return callerName;
  29         };
  30
  31         App.Ui = function App_Ui(app) {
  32                 this.app = app;
  33         };
  34
  35         App.Ui.prototype = {
  36                 popup: null,
  37
  38                 showPopup: function showPopup(message, page) {
  39                         this.popup = $('<div id="popup" data-role="popupwindow" data-style="center_basic_1btn"><p data-role="text">' + message + '</p><div data-role="button-bg"><a href="#" data-role="button" data-inline="true" onclick="closePopup();">OK</a></div></div>');
  40                         this.page.append(this.popup);
  41                         this.page.trigger('create');
  42                         this.popup.data('page', page);
  43                         this.popup.popupwindow('open');
  44                 },
  45
  46                 closePopup: function closePopup() {
  47                         var page = this.popup.data('page');
  48                         page.data('monit', '');
  49                         this.popup.popupwindow('close');
  50                         this.popup.remove();
  51                         this.popup = null;
  52                 },
  53
  54                 disableAccept: function disableAccept() {
  55                         $('#accept-choose').css('pointer-events', 'none').addClass('ui-disabled');
  56                 },
  57
  58                 enableAccept: function enableAccept() {
  59                         $('#accept-choose').css('pointer-events', 'auto').removeClass('ui-disabled');
  60                 },
  61
  62                 createListRecord: function createListRecord(contacts) {
  63                         $.mobile.changePage('#choose');
  64                 },
  65
  66                 prepareWaitingPage: function prepareWaitingPage(title, text) {
  67                         var waitingBox, waitingContent,
  68                                 contentTransfer = $('#content-transfer');
  69                         waitingBox = $('<div class="box" id="waitingBox"></div>');
  70                         waitingContent = $('<p class="defaultVeryBigText">' + text + '</p><p class="defaultCounterText" id="counter"></p>');
  71                         $('#header-transfer H1').text(title);
  72                         contentTransfer.empty();
  73                         waitingBox.append(waitingContent);
  74                         contentTransfer.append(waitingBox);
  75                         $('#content-start').trigger('create');
  76
  77                         this.app.countDown(10, $('#counter'));
  78                 },
  79
  80                 loadTemporaryContent: function loadTemporaryContent() {
  81                         var temporaryBox, temporaryContent, temporaryButton, contentStart;
  82
  83                         temporaryBox = $('<div class="box" id="temporaryBox"></div>');
  84                         temporaryContent = $('<p class="defaultText">Default card hasn\'t defined yet!<br>Do you want to define it now?</p>');
  85                         temporaryButton = $('<div data-role="button" class="ui-btn-create">Create default card</div>');
  86                         contentStart = $('#content-start');
  87
  88                         temporaryButton.on('tap', function (event) {
  89                                 event.preventDefault();
  90                                 $.mobile.changePage('#choose');
  91                         });
  92
  93                         contentStart.empty();
  94                         temporaryBox.append(temporaryContent).append(temporaryButton);
  95
  96                         contentStart.append(temporaryBox);
  97                         contentStart.trigger('create');
  98                 },
  99
 100                 loadStartContent: function loadStartContent() {
 101                         var startBox, contentStart, gap, comment, changeContact, readFromCard, writeToCard, communicateWithOtherDevice;
 102                         contentStart = $('#content-start');
 103                         startBox = $('<div class="box" id="startBox"></div>');
 104                         gap = $('<div class="gap"></div>');
 105                         comment = $('<div id="comment"><p class="comment">Your default contact</p><p class="comment" id="comment-name">' + (localStorage.firstName || '') + ' ' + (localStorage.lastName || '') + '</p></div>');
 106                         changeContact = $('<div data-role="button" class="ui-btn-create">Change your default contact</div>');
 107                         changeContact.on('tap', function (event) {
 108                                 event.preventDefault();
 109                                 $.mobile.changePage('#choose');
 110                         });
 111                         readFromCard = $('<div data-role="button" class="ui-btn-create">Read from card</div>');
 112                         readFromCard.on('tap', function (event) {
 113                                 event.preventDefault();
 114                                 $('#transfer').data('option', 'read');
 115                                 $.mobile.changePage('#transfer');
 116                         });
 117                         writeToCard = $('<div data-role="button" class="ui-btn-create">Write to card</div>');
 118                         writeToCard.on('tap', function (event) {
 119                                 event.preventDefault();
 120                                 $('#transfer').data('option', 'write');
 121                                 $.mobile.changePage('#transfer');
 122                         });
 123                         communicateWithOtherDevice = $('<div data-role="button" class="ui-btn-create">Communicate with other device</div>');
 124                         communicateWithOtherDevice.on('tap', function (event) {
 125                                 event.preventDefault();
 126                                 $('#transfer').data('option', 'communicate');
 127                                 $.mobile.changePage('#transfer');
 128                         });
 129
 130                         contentStart.empty();
 131                         startBox.append(changeContact).append(gap.clone()).append(readFromCard).append(gap.clone()).append(writeToCard).append(gap.clone()).append(communicateWithOtherDevice).prepend(comment);
 132
 133                         contentStart.append(startBox);
 134                         contentStart.trigger('create');
 135                 },
 136
 137                 loadStartPage: function loadStartPage() {
 138                         if (localStorage.started === undefined) {
 139
 140                                 this.loadTemporaryContent();
 141                         } else {
 142
 143                                 this.loadStartContent();
 144                         }
 145                 },
 146
 147                 prepareContactsTemplate: function prepareContactsTemplate(phone, first, last) {
 148                         var ul;
 149
 150                         ul = $('<ul data-role="listview" id="contacts-data"></ul>');
 151                         $('#contact > #content-contact > .ui-scrollview-view').empty().append(ul);
 152
 153                         ul.append($('<li class="ui-li-multiline"><a href="#">' + ((first === '' || first === 'null') ? '...' : first) + '<span class="ui-li-text-sub">First Name</span></a></li>'));
 154                         ul.append($('<li class="ui-li-multiline"><a href="#">' + ((last === '' || last === 'null') ? '...' : last) + '<span class="ui-li-text-sub">Last Name</span></a></li>'));
 155                         ul.append($('<li class="ui-li-multiline"><a href="#">' + ((phone === '' || phone === 'null') ? '...' : phone) + '<span class="ui-li-text-sub">Phone Number</span></a></li>'));
 156
 157                         $('#contact > #content-contact').trigger('create');
 158                 },
 159
 160                 showContactsList: function showContactsList(contacts) {
 161                         var self = this,
 162                                 ul = $('<ul data-role="listview" id="list-choose"></ul>'),
 163                                 listElementTap,
 164                                 sortedContactList = [],
 165                                 i,
 166                                 j,
 167                                 len,
 168                                 length,
 169                                 firstName = '',
 170                                 lastName = '',
 171                                 phoneNumber = '',
 172                                 id,
 173                                 vCard,
 174                                 listElement;
 175
 176                         $('#choose > #content-choose > .ui-scrollview-view').empty().append(ul);
 177
 178                         listElementTap = function (event) {
 179                                 event.preventDefault();
 180
 181                                 self.enableAccept();
 182
 183                                 $(this).parent().find('li').css('background-color', 'inherit').removeClass('selected');
 184                                 $(this).css('background-color', '#ccc').addClass('selected');
 185                         };
 186
 187                         for (i = 0, len = contacts.length; i < len; i += 1) {
 188                                 firstName = '';
 189                                 lastName = '';
 190                                 phoneNumber = '';
 191                                 id = contacts[i].id;
 192                                 vCard = contacts[i].convertToString('VCARD_30');
 193                                 if (contacts[i].name.firstName !== null) {
 194                                         firstName = contacts[i].name.firstName;
 195                                 }
 196                                 if (contacts[i].name.lastName !== null) {
 197                                         lastName = contacts[i].name.lastName;
 198                                 }
 199                                 if (contacts[i].phoneNumbers[0] !== undefined) {
 200                                         phoneNumber = contacts[i].phoneNumbers[0].number;
 201                                 }
 202                                 sortedContactList.push({caller: prepareCallerName(contacts[i]), firstName: firstName, lastName: lastName, phoneNumber: phoneNumber, id: id, vCard: vCard, contact: contacts[i]});
 203                         }
 204
 205                         sortedContactList.sort(function (a, b) {
 206                                 if (a.caller < b.caller) {
 207                                         return -1;
 208                                 }
 209                                 if (a.caller > b.caller) {
 210                                         return 1;
 211                                 }
 212                                 return 0;
 213                         });
 214
 215                         for (j = 0, length = sortedContactList.length; j < length; j += 1) {
 216                                 listElement = $('<li class="ui-li-multiline" firstName="' + sortedContactList[j].firstName + '" lastName="' + sortedContactList[j].lastName + '" phoneNumber="' + sortedContactList[j].phoneNumber + '" id="' + sortedContactList[j].id + '" vCard="' + sortedContactList[j].vCard + '"><a href="#">' + sortedContactList[j].caller + '<span class="ui-li-text-sub">' + sortedContactList[j].phoneNumber + '</span></a></li>');
 217                                 if (localStorage.id === listElement.attr('id')) {
 218                                         listElement.css('background-color', '#ccc');
 219                                 }
 220                                 listElement.on('tap', listElementTap);
 221                                 ul.append(listElement);
 222                         }
 223
 224                         $('#choose > #content-choose').trigger('create');
 225                 },
 226
 227                 moveToStartPage: function moveToStartPage(monit) {
 228                         $('#start').data('monit', monit || '');
 229                         $.mobile.changePage('#start');
 230                 },
 231
 232                 moveToContactPage: function moveToContactPage(obj) {
 233                         $('#start').data('monit', '');
 234                         $('#contact').data('contactsData', obj);
 235                         $.mobile.changePage('#contact');
 236                 },
 237
 238                 disableSelections: function disableSelections() {
 239                         $.mobile.tizen.disableSelection(document);
 240                 },
 241
 242                 defineEvents: function defineEvents() {
 243                         var self = this;
 244
 245                         $('#header-start .ui-btn-back').on('tap', function (event) {
 246                                 event.preventDefault();
 247                                 self.app.nfc.stopNFC();
 248                         });
 249
 250                         $('#footer-transfer').on('tap', '.ui-btn-back', function (event) {
 251                                 event.preventDefault();
 252                                 self.app.nfc.timeExpired();
 253                         });
 254
 255                         $('#footer-contact').on('tap', '.ui-btn-back', function (event) {
 256                                 event.preventDefault();
 257                                 $.mobile.changePage('#start');
 258                         });
 259
 260                         $('#choose').on('pagebeforeshow', function () {
 261                                 self.disableAccept();
 262                         });
 263
 264                         $('#choose').on('pageshow', function (event) {
 265                                 self.app.loadContacts();
 266                         });
 267
 268                         $('#contact').on('pageshow', function (event) {
 269                                 var phone, first, last;
 270                                 phone = $(this).data('contactsData').phone;
 271                                 first = $(this).data('contactsData').first;
 272                                 last = $(this).data('contactsData').last;
 273                                 self.prepareContactsTemplate(phone, first, last);
 274                         });
 275
 276                         $('#accept-choose').on('tap', function (event) {
 277                                 event.preventDefault();
 278                                 self.app.saveDefaultCard();
 279                         });
 280
 281                         $('#save-contact').on('tap', function (event) {
 282                                 event.preventDefault();
 283                                 self.app.saveContact();
 284                         });
 285
 286                         $('#start').on('pagebeforeshow', function () {
 287                                 if (self.app.started) {
 288                                         self.loadStartPage();
 289                                 }
 290                         });
 291
 292                         $('#start').on('pageshow', function () {
 293                                 var monit, obj, contentStart;
 294                                 obj = $(this);
 295                                 monit = obj.data('monit');
 296                                 if (monit !== '' && monit !== undefined) {
 297                                         self.showPopup(obj.data('monit'), obj);
 298                                 }
 299                                 contentStart = $('#content-start');
 300                                 contentStart.css('height', contentStart.height() + 'px').css('width', contentStart.width() + 'px');
 301                         });
 302
 303                         $('#transfer').on('pageshow', function () {
 304                                 var contentTransfer = $('#content-transfer');
 305                                 contentTransfer.css('width', contentTransfer.width() + 'px');
 306                                 setTimeout(function () { // workaround (setTimeout with 0 delay)
 307                                         contentTransfer.css('height', contentTransfer.css('min-height'));
 308                                 }, 0);
 309                         });
 310
 311                         $('#transfer').on('pageshow', function () {
 312                                 var option = $(this).data('option');
 313                                 if (option === 'read') {
 314                                         self.prepareWaitingPage('Card to Device', 'PUT WIRELESS TAG<br>CLOSE TO<br>YOUR DEVICE');
 315                                         try {
 316                                                 self.app.nfc.card.setTagDetectRead();
 317                                         } catch (err) {
 318                                                 console.error(err.message);
 319                                         }
 320                                 } else if (option === 'write') {
 321                                         self.prepareWaitingPage('Device to Card', 'PUT WIRELESS TAG<br>CLOSE TO<br>YOUR DEVICE');
 322                                         try {
 323                                                 self.app.nfc.card.setTagDetectWrite();
 324                                         } catch (er) {
 325                                                 console.error(er.message);
 326                                         }
 327                                 } else {
 328                                         self.prepareWaitingPage('Device to Device', 'PUT YOUR DEVICE<br>CLOSE TO<br>OTHER DEVICE');
 329                                         try {
 330                                                 self.app.nfc.peer.setTargetDetect();
 331                                         } catch (e) {
 332                                                 console.error(e.message);
 333                                         }
 334                                 }
 335                         });
 336                 }
 337
 338         };
 339
 340 }());