js/callhistorycarousel.js

   1 /*global Phone, callContactCarousel*/
   2
   3 /**
   4  */
   5  /**
   6  * This class provides methods to operate with call history carousel. It wrapps handling CarouFredSel object and provides
   7  * following operations:
   8  *
   9  * * Show placed, received and missed phone calls ordered by date of phone call
  10  * * For each call displays phone number, contact name, date and time of phone call
  11  *
  12  * @module PhoneApplication
  13  * @class Carousel
  14  * @constructor
  15  */
  16 var Carousel = function() {
  17         "use strict";
  18         this.initializeSwipe();
  19 };
  20 /**
  21 * This property holds call history data array for show in html.
  22 * @property callHistory {Array}
  23 */
  24 Carousel.prototype.callHistory = [];
  25 /**
  26 * This property holds swipe object for internal use in carousel.
  27 * @property swipe {Object}
  28 * @private
  29 */
  30 Carousel.prototype.swipe = null;
  31 /**
  32 * This property holds callback function which is called after current element in carousel is changed.
  33 * @property indexChangeCallback {Object}
  34 * @private
  35 */
  36 Carousel.prototype.indexChangeCallback = null;
  37 /**
  38  * This method adds listener for current carousel element change.
  39  *
  40  * @method addIndexChangeListener
  41  * @param indexChangeCallback {function()} Callback function called after current carousel element changed.
  42  */
  43 Carousel.prototype.addIndexChangeListener = function(indexChangeCallback) {
  44         "use strict";
  45
  46         this.indexChangeCallback = indexChangeCallback;
  47 };
  48 /**
  49  * This method initializes and configures carousel object
  50  *
  51  * @method initializeSwipe
  52  * @private
  53  */
  54 Carousel.prototype.initializeSwipe = function() {
  55         "use strict";
  56
  57         var self = this;
  58         if (!this.swipe) {
  59                 this.swipe = $('#contactsCarousel').carouFredSel({
  60                         auto : false,
  61                         circular : false,
  62                         infinite : false,
  63                         width : 765,
  64                         items : {
  65                                 visible : 3
  66                         },
  67                         swipe : {
  68                                 items : 1,
  69                                 duration : 150,
  70                                 onMouse : true,
  71                                 onTouch : true
  72                         },
  73                         scroll : {
  74                                 items : 1,
  75                                 duration : 150,
  76                                 onAfter : function(data) {
  77                                         if (!!self.indexChangeCallback) {
  78                                                 self.indexChangeCallback(self.getCurrentPosition());
  79                                         }
  80                                 }
  81                         }
  82                 });
  83                 if (!this.swipe.length) {
  84                         this.swipe = null;
  85                 }
  86         }
  87 };
  88 /**
  89  * This method provides the index of current selected item of the carousel.
  90  *
  91  * @method getCurrentPosition
  92  * @return Current {Integer} index position in carousel.
  93  */
  94 Carousel.prototype.getCurrentPosition = function() {
  95         "use strict";
  96         var self = this;
  97         if (!!self.swipe) {
  98                 var pos = parseInt(self.swipe.triggerHandler("currentPosition"), 10);
  99                 return pos;
 100         }
 101         return null;
 102 };
 103 /**
 104  * This method moves current position of the carousel to the given index.
 105  *
 106  * @method slideTo
 107  * @param index {Integer}  New index position in carousel
 108  */
 109 Carousel.prototype.slideTo = function(index) {
 110         "use strict";
 111         if (!!this.swipe && index >= 0 && index < this.callHistory.length) {
 112                 this.swipe.trigger("slideTo", index);
 113         }
 114 };
 115 /**
 116  * This method fills carousel with call history data and resets its current position to start.
 117  *
 118  * @method loadCallHistory
 119  * @param  callHistory {Array} Call history array.
 120  * @param  index {Integer} New index position in carousel.
 121  */
 122 Carousel.prototype.loadCallHistory = function(callHistory, index) {
 123         "use strict";
 124         this.removeAllItems();
 125         this.callHistory = callHistory;
 126         this.insertPagesToSwipe();
 127         if (index >= 0 && index < this.callHistory.length && !!this.swipe) {
 128                 this.swipe.trigger("slideTo", [ index, 0, {
 129                         duration : 0
 130                 } ]);
 131         }
 132 };
 133 /**
 134  * This method creates one carousel item for swipe.
 135  *
 136  * @method createSwipeItem
 137  * @param  callHistory {Array} Call history array.
 138  * @param  index {Integer} Carousel item index it is use as div id in html.
 139  * @return {String} New carousel item as html string.
 140  * @private
 141  */
 142 Carousel.prototype.createSwipeItem = function(callHistoryEntry, index) {
 143         "use strict";
 144         var self = this;
 145
 146         if (!!callHistoryEntry) {
 147                 var carouselItem;
 148
 149                 var contact = null;
 150                 if (!!callHistoryEntry.remoteParties && callHistoryEntry.remoteParties.length) {
 151                         contact = Phone.getContactByPersonId(callHistoryEntry.remoteParties[0].personId);
 152                 }
 153
 154                 var id = "";
 155                 var name = "";
 156                 var photoURI = "";
 157                 var phoneNumber = "";
 158                 var startTime = callHistoryEntry.startTime || "";
 159                 var direction = callHistoryEntry.direction || "";
 160
 161                 if (!!callHistoryEntry.remoteParties && callHistoryEntry.remoteParties.length) {
 162                         // personId = phoneNumber
 163                         phoneNumber = callHistoryEntry.remoteParties[0].personId;
 164                 }
 165
 166                 if (!!contact) {
 167                         if (!!contact.id) {
 168                                 id = contact.id;
 169                         }
 170                         if (!!contact.photoURI) {
 171                                 photoURI = contact.photoURI;
 172                         }
 173                         if (phoneNumber === "" && !!contact.phoneNumbers && contact.phoneNumbers.length) {
 174                                 phoneNumber = contact.phoneNumbers[0].number;
 175                         }
 176                         name = Phone.getDisplayNameStr(contact);
 177                 }
 178
 179                 if (name === "") {
 180                         name = "Unknown";
 181                 }
 182
 183                 carouselItem = '<li>';
 184                 carouselItem += '<div id="carouselBox_' + index + '" class="carouselBox borderColorTheme" data-id="' + id + '">';
 185                 carouselItem += '<div class="carouselPhotoArea borderColorTheme">';
 186                 carouselItem += '<div class="carouselPhotoBox noContactPhoto">';
 187                 carouselItem += '<img class="carouselPhoto" src="' + photoURI + '" /></div></div>';
 188                 carouselItem += '<div class="carouselInfoBox carouselName fontSizeLarger fontWeightBold fontColorNormal">' + name + '</div>';
 189                 carouselItem += '<div class="carouselInfoBox carouselNumber fontSizeSmall fontWeightBold fontColorTheme">' + phoneNumber + '</div>';
 190                 carouselItem += '<div class="callHistoryElement borderColorTheme">';
 191                 carouselItem += '<div class="missedNewCallIcon callHistoryIcon callHistoryIconGen"></div>';
 192                 carouselItem += '<div class="callHistoryDetails">';
 193                 carouselItem += '<div class="fontSizeXXSmall fontColorNormal">' + startTime + '</div>';
 194                 carouselItem += '<div class="fontSizeXXSmall fontWeightBold fontColorTheme">' + direction + '</div></div></div></div>';
 195                 carouselItem += '</li>';
 196
 197                 carouselItem = $(carouselItem);
 198                 carouselItem.data("callhistory", callHistoryEntry);
 199                 carouselItem.data("contact", contact);
 200                 carouselItem.click(function() {
 201                         self.swipe.trigger("slideTo", [ $(this), -1 ]);
 202                         var historyEntry = $(this).data("callhistory");
 203                         var contactEntry = $(this).data("contact");
 204                         if (!contactEntry) {
 205                                 contactEntry = {
 206                                         name : {
 207                                                 displayName : historyEntry.remoteParties[0].personId,
 208                                                 firstName : "",
 209                                                 lastName : ""
 210                                         }
 211                                 };
 212                         }
 213                         var contact = {
 214                                 name : {
 215                                         displayName : contactEntry.name.displayName,
 216                                         firstName : contactEntry.name.firstName,
 217                                         lastName : contactEntry.name.lastName
 218                                 },
 219                                 photoURI : contactEntry.photoURI,
 220                                 phoneNumbers : [ {
 221                                         number : historyEntry.remoteParties[0].personId
 222                                 } ]
 223
 224                         };
 225                         callContactCarousel(contact);
 226                 });
 227                 return carouselItem;
 228         }
 229
 230         return null;
 231 };
 232 /**
 233  * This method inserts pages whit carousel elements to swipe.
 234  *
 235  * @method insertPagesToSwipe
 236  * @private
 237  */
 238 Carousel.prototype.insertPagesToSwipe = function() {
 239         "use strict";
 240         var self = this;
 241         var carouselItem;
 242         for ( var index = this.callHistory.length - 1; index >= 0; --index) {
 243                 carouselItem = this.createSwipeItem(this.callHistory[index], index);
 244                 if (!!carouselItem && !!this.swipe) {
 245                         this.swipe.trigger("insertItem", [ carouselItem, 0 ]);
 246                 }
 247         }
 248         this.addCarouselEdges();
 249 };
 250 /**
 251  * This method removes all item from carousel.
 252  *
 253  * @method removeAllItems
 254  */
 255 Carousel.prototype.removeAllItems = function() {
 256         "use strict";
 257         var carouselItem;
 258
 259         if (!!this.swipe) {
 260                 for ( var index = this.callHistory.length + 1; index >= 0; --index) {
 261                         this.swipe.trigger("removeItem", index);
 262                 }
 263         }
 264 };
 265 /**
 266  * This method adds emty carousel items to the beginning and the end of the carousel
 267  * (to make sure first and last visible items appear in the middle of screen instead of at the edges when swiped to edges of carousel).
 268  * @method addCarouselEdges
 269  */
 270 Carousel.prototype.addCarouselEdges = function() {
 271         "use strict";
 272         if (!!this.swipe) {
 273                 var html = "<li><div class='carouselEdgeBox'></div></li>";
 274                 this.swipe.trigger("insertItem", [ html, 0 ]);
 275                 this.swipe.trigger("insertItem", [ html, "end", true ]);
 276         }
 277 };