2 /*global tizen, document, $, app, UiPanel, UiContact, TemplateManager, window, Helpers */
8 function Ui(contacts) {
13 (function () { // strict mode wrapper
23 * @type {TemplateManager}
25 templateManager: null,
30 init: function Ui_init() {
31 console.log('Ui_init');
32 this.templateManager = new TemplateManager();
33 this.helpers = new Helpers();
34 $(document).ready(this.domInit.bind(this));
38 * When DOM is ready, initialise it (bind events)
40 domInit: function Ui_domInit() {
41 console.log('Ui_domInit');
42 this.templateManager.loadToCache(['callView', 'callerHistory', 'callItemRow', 'callerCallItemRow', 'messageWindow', 'dateRow'], this.initPages.bind(this));
46 * UI pages initializer
48 initPages: function Ui_initPages() {
49 console.log('Ui_initPages');
52 $('#callView').append($(this.templateManager.get('callView')).children()).trigger('pagecreate');
54 pages.push(this.templateManager.get('callerHistory'));
55 $('body').append(pages.join(''));
56 this.removeSearchBarToHeader();
59 app.showCallHistory();
65 addEvents: function Ui_addEvents() {
66 console.log('Ui_addEvents');
69 $('#callView .ui-btn-back').on('tap', app.exit.bind(app));
71 $('#callView').on('pagebeforeshow', function () {
72 app.showCallHistory();
75 $('#historyForCallerView').on('pagebeforeshow', function () {
76 self.hideCheckboxes();
77 $('#historyForCallerView .ui-content')
78 .scrollview('scrollTo', 0, 0);
79 $('#historyForCallerView .ui-content .ui-scrollview-view')
80 .css('-webkit-transform', 'translate3d(0px, 0px, 0px)');
81 $('#selectAllDetails').on('change', function () {
82 self.selectAllDetails();
86 $('#historyForCallerView').on('pageshow', function () {
87 console.log('(event) #historyForCallerView:pageshow');
88 $('#content').css('top', '160px');
89 $('#header').css('height', '160px');
90 $('#delete-toolbar').css('width', '70px');
93 $(window).on('resize', function () {
94 $('#delete-toolbar').css('width', '70px');
97 $('.selectAllBox').on('tap', function () {
99 self.selectAllDetailsEach();
102 $('#calllogList').on('tap', '.date', function (event) {
103 event.stopPropagation();
106 $('#calllogList').on('click', '.call', function onCalllogEntryClick(event) {
107 console.log('onclick', $(this).data('entries'));
108 app.showHistoryForCaller($(this).data('entries')[0].remoteParties[0].remoteParty);
109 $.mobile.changePage('#historyForCallerView');
112 $('#smsActionBtn').on('tap', function () {
113 self.hideCheckboxes();
114 app.sendSms($('#forCallerList').data('remoteParty'));
117 $('#callActionBtn').on('tap', function () {
118 self.hideCheckboxes();
119 app.makeCall($('#forCallerList').data('remoteParty'));
122 $('#deleteActionBtn').on('tap', function () {
123 self.changeDetailsToRemoveState();
126 $('#forCallerList').on('tap', 'li', function () {
127 console.log('handle click', this.removeMode);
128 var checkbox = $(this).find(':checkbox');
129 if (self.removeMode === true) {
130 if (checkbox.attr('checked')) {
131 checkbox.attr('checked', false)
132 .data('checkboxradio')
135 checkbox.attr('checked', true)
136 .data('checkboxradio')
139 self.setSelectAllDetails();
144 addEventsForCallerListCheckboxes: function Ui_addEventsForCallerListCheckboxes() {
145 console.log('Ui_addEventsForCallerListCheckboxes');
147 $('#forCallerList :checkbox').on('change', function (event) {
148 if ($(this).attr('checked')) {
149 $(this).attr('checked', true);
151 $(this).attr('checked', false);
153 console.log('#forCallerList :checkbox', 'onchange');
154 self.setSelectAllDetails();
158 selectAll: function Ui_selectAll() {
159 console.log('Ui_selectAll');
160 if ($('#selectAllDetails').attr('checked')) {
161 $('#selectAllDetails')
162 .attr('checked', false)
163 .data('checkboxradio')
166 $('#selectAllDetails')
167 .attr('checked', true)
168 .data('checkboxradio')
173 selectAllDetails: function Ui_selectAllDetails() {
174 console.log('Ui_selectAllDetails');
175 if ($('#selectAllDetails').attr('checked')) {
176 $('#selectAllDetails').attr('checked', true);
178 $('#selectAllDetails').attr('checked', false);
180 this.selectAllDetailsEach();
184 * Returns number of selected call logs
185 * @return {number} length
187 getCountSelectedLogEntries: function Ui_getCountSelectedLogEntries() {
188 console.log('Ui_getCountSelectedLogEntries');
189 return $('#forCallerList li .toRemove label.ui-checkbox-on').length;
192 selectAllDetailsEach: function Ui_selectAllDetailsEach() {
193 $('#forCallerList').find('input').each(function () {
194 if ($('#selectAllDetails').attr('checked')) {
195 $(this).attr('checked', true)
196 .data('checkboxradio')
199 $(this).attr('checked', false)
200 .data('checkboxradio')
209 hideCheckboxes: function Ui_hideCheckboxes() {
210 console.log('Ui_hideCheckboxes');
211 $('#selectAllDetails')
212 .attr('checked', false)
213 .data('checkboxradio')
216 $('#forCallerList').find('input').each(function () {
217 $(this).attr('checked', false)
218 .data('checkboxradio')
221 this.changeDetailsToRemoveState('hide');
225 * Returns css classes for specified entry
227 * @param {CallHistoryEntry} entry
230 cssClassesForEntry: function Ui_cssClassesForEntry(entry) {
231 console.log('Ui_cssClassesForEntry', entry);
232 return 'call dir_' + entry.direction.toLowerCase() + ' type_' + entry.type.replace('.', '-').toLowerCase();
235 setSelectAllDetails: function Ui_setSelectAllDetails() {
236 console.log('Ui_setSelectAllDetails');
237 if ($('#forCallerList input[type="checkbox"]').length === $('#forCallerList input[checked="checked"]').length) {
238 $('#selectAllDetails')
239 .attr('checked', true)
240 .data('checkboxradio')
243 $('#selectAllDetails')
244 .attr('checked', false)
245 .data('checkboxradio')
251 * Shows popup with specified message
252 * @param {string} message
254 showPopup: function Ui_showPopup(message) {
255 console.log('Ui_showPopup', message);
257 .append(this.templateManager.get('messageWindow'))
259 $('#popupMessage').html(message);
262 .on('tap', '#popupCancelActionBtn', this.closePopup.bind(this))
263 .on('tap', '#popupSubmitActionBtn', this.deleteCheckedLogs.bind(this));
265 $('#popup').popupwindow('open');
271 closePopup: function Ui_closePopup() {
272 console.log('Ui_closePopup');
274 .popupwindow('close')
279 * Deletes checked log entries
281 deleteCheckedLogs: function Ui_deleteCheckedLogs() {
282 console.log('Ui_deleteCheckedLogs');
286 $('#selectAllDetails')
287 .attr('checked', false)
288 .data('checkboxradio')
291 $('#forCallerList li.call').each(function () {
292 if ($(this).find('form label').hasClass('ui-checkbox-on')) {
293 app.deleteLog($(this).data('entries')[0]);
298 if ($('#forCallerList li.call').length > 0) {
299 $('.number').html('(' + $('#forCallerList li').length + ')');
301 $.mobile.changePage('#callView');
305 changeDetailsToRemoveState: function changeDetailsToRemoveState(set) {
306 console.log('changeDetailsToRemoveState', set);
307 var counter = this.getCountSelectedLogEntries();
309 if (set !== undefined) {
310 this.removeMode = false;
311 } else if (counter === 0) {
312 this.removeMode = !this.removeMode;
316 if (this.removeMode) {
317 $('#historyForCallerView .toRemove').removeClass('hidden');
318 $('#historyForCallerView .selectAllBox').removeClass('hidden');
320 $('#historyForCallerView .toRemove').addClass('hidden');
321 $('#historyForCallerView .selectAllBox').addClass('hidden');
323 } else if (counter > 1) {
324 this.showPopup('Are you sure you want to delete selected logs?');
326 this.showPopup('Are you sure you want to delete selected log?');
328 this.refreshScrollView();
332 * Renders call history list
334 * @param {CallHistoryEntry[]} callEntries
336 showCallHistory: function Ui_showCallHistory(callEntries) {
337 console.log('Ui_showCallHistory', callEntries);
339 pdate = '', // previous date
341 elements = [], // list elements
342 len = callEntries.length, // entries length
344 current, // current entry object
345 next, // next entry object
346 today = this.helpers.getShortDate(new Date()), // today short date
349 $('.selectedCount').hide();
351 for (i = 0; i < len; i = i + 1) {
353 current = callEntries[i];
354 date = current.startTime.toLocaleDateString();
355 entryShortDate = this.helpers.getShortDate(callEntries[i].startTime);
356 next = callEntries[i + 1];
358 // if date is changed render new header
359 if (date !== pdate) {
360 elements.push($(this.templateManager.get('dateRow', {
361 'date': today === entryShortDate ? 'Today' : date
365 if (date !== pdate || next === undefined
366 || current.remoteParties[0].remoteParty !== next.remoteParties[0].remoteParty) {
367 elements.push(this.getCallItemRow(current, counter));
368 counter = 0; // reset counter after render
371 if (date !== pdate) {
382 * Returns HTML for single log entry
384 * @param {CallHistoryEntry} entry
385 * @param {number} counter
386 * @returns {HTMLPartial}
388 getCallItemRow: function Ui_getCallItemRow(entry, counter) {
389 console.log('Ui_getCallItemRow', entry, counter);
390 var party = entry.remoteParties[0],
391 name = party.displayName || party.remoteParty,
395 name += ' (' + counter + ')';
398 tpl = this.templateManager.get('callItemRow', {
400 'callTime': entry.startTime.toLocaleTimeString(),
401 'cssClasses': this.cssClassesForEntry(entry)
405 .data('remoteParty', entry.remoteParties[0].remoteParty)
406 .data('entries', [entry])
407 .get(0); // return clean DOM element so array of those could be appended at once*/
411 * Returns HTML for single caller log entry
413 * @param {CallHistoryEntry} entry
416 getCallerCallLogRow: function Ui_getCallerCallLogRow(entry) {
417 console.log('Ui_getCallerCallLogRow', entry);
419 return $(this.templateManager.get('callerCallItemRow', {
420 'cssClass': this.cssClassesForEntry(entry),
421 'callTime': entry.startTime.toLocaleTimeString(),
422 'callDuration': this.helpers.secondsToHours(entry.duration)
423 })).data('entries', [entry]).get(0);
427 * Renders call log list for specified caller
429 * @param {string} remoteParty
430 * @param {CallHistoryEntry[]} entries
432 showHistoryForCaller: function Ui_showHistoryForCaller(remoteParty, entries) {
433 console.log('Ui_showHistoryForCaller', entries);
437 len = entries.length,
441 this.updateCallerHeader(entries[0], entries.length);
445 .data('remoteParty', remoteParty)
446 .data('modified', false)
449 // group caller log entries by date
450 for (i = 0; i < len; i = i + 1) {
451 date = entries[i].startTime.toLocaleDateString();
453 // if date is changed render new header
454 if (date !== pdate) {
455 elements.push($(this.templateManager.get('dateRow', {'date': date})).get(0));
458 elements.push(this.getCallerCallLogRow(entries[i]));
465 if (elements.length > 0) {
466 $('li#delete > a').addClass('ui-btn-active');
468 $('li#delete > a').removeClass('ui-btn-active');
471 $('#forCallerList').trigger('create');
473 this.addEventsForCallerListCheckboxes();
477 * Updates caller main info
478 * @param {CallHistoryEntry} entry
479 * @param {number} numberOfEntries
481 updateCallerHeader: function Ui_updateCallerHeader(entry, numberOfEntries) {
482 console.log('Ui_updateCallerHeader', entry, numberOfEntries);
485 photoURIdefault = '../images/no_photo.png',
489 $('.contact > .infoContainer > .photo').css('background-image', photoURIdefault);
491 if (entry.remoteParties !== null) {
492 party = entry.remoteParties[0];
493 name = party.displayName || party.remoteParty;
494 if (party.displayName) {
495 num = party.remoteParty + ' (' + numberOfEntries + ')';
497 num = ' (' + numberOfEntries + ')';
500 if (party.contactRef) {
501 imgPath = app.getPhotoURIForContact(party.contactRef.addressBookId, party.contactRef.contactId);
502 if (imgPath !== false) {
503 $('.contact > .infoContainer > .photo').css('background-image', imgPath);
506 } else if (entry.contactId !== null) {
507 name = entry.accountId;
508 num = entry.accountId + ' (' + numberOfEntries + ')';
510 name = entry.accountId;
511 num = ' (' + numberOfEntries + ')';
513 $('.contact > .infoContainer > .name').html(name);
514 $('.contact > .infoContainer > .number').html(num);
518 * Remove search filter from content and appends it to header
520 removeSearchBarToHeader: function () {
521 $('#page-content').css('top', '102px');
523 .css('height', '102px')
524 .append($('#callView .ui-listview-filter'));
525 $.mobile.activePage.page('refresh');
526 $('.ui-input-cancel').remove(); // patch for WebUI bug;
531 * Patch for UI, bad refresh scrollView
533 refreshScrollView: function () {
534 var scrollView = $('.ui-scrollview-view'),