samples/web/Sample/Tizen/Web App/Modello_Phone/project/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 hystoryEntry = $(this).data("callhistory");
 203                         var contactEntry = $(this).data("contact");
 204                         var contact = {
 205                                 name : {
 206                                         displayName : contactEntry.name.displayName,
 207                                         firstName : contactEntry.name.firstName,
 208                                         lastName : contactEntry.name.lastName
 209                                 },
 210                                 photoURI : contactEntry.photoURI,
 211                                 phoneNumbers : [ {
 212                                         number : hystoryEntry.remoteParties[0].personId
 213                                 } ]
 214
 215                         };
 216                         callContactCarousel(contact);
 217                 });
 218                 return carouselItem;
 219         }
 220
 221         return null;
 222 };
 223 /**
 224  * This method inserts pages whit carousel elements to swipe.
 225  *
 226  * @method insertPagesToSwipe
 227  * @private
 228  */
 229 Carousel.prototype.insertPagesToSwipe = function() {
 230         "use strict";
 231         var self = this;
 232         var carouselItem;
 233         for ( var index = this.callHistory.length - 1; index >= 0; --index) {
 234                 carouselItem = this.createSwipeItem(this.callHistory[index], index);
 235                 if (!!carouselItem && !!this.swipe) {
 236                         this.swipe.trigger("insertItem", [ carouselItem, 0 ]);
 237                 }
 238         }
 239         this.addCarouselEdges();
 240 };
 241 /**
 242  * This method removes all item from carousel.
 243  *
 244  * @method removeAllItems
 245  */
 246 Carousel.prototype.removeAllItems = function() {
 247         "use strict";
 248         var carouselItem;
 249
 250         if (!!this.swipe) {
 251                 for ( var index = this.callHistory.length + 1; index >= 0; --index) {
 252                         this.swipe.trigger("removeItem", index);
 253                 }
 254         }
 255 };
 256 /**
 257  * This method adds emty carousel items to the beginning and the end of the carousel
 258  * (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).
 259  * @method addCarouselEdges
 260  */
 261 Carousel.prototype.addCarouselEdges = function() {
 262         "use strict";
 263         if (!!this.swipe) {
 264                 var html = "<li><div class='carouselEdgeBox'></div></li>";
 265                 this.swipe.trigger("insertItem", [ html, 0 ]);
 266                 this.swipe.trigger("insertItem", [ html, "end", true ]);
 267         }
 268 };