samples/web/Sample/Tizen/Web App/Modello_Multimediaplayer/project/js/carousel.js

   1 /*global Utils */
   2
   3 /**
   4  * @module MultimediaPlayerApplication
   5  */
   6
   7 /**
   8  * This class provides basic methods to operate with media content carousel (carouFredSel) like load and fill carousel with supplied audio content, scroll carousel to a given position, get current carousel position.
   9  * Media content carousel represents a playlist of audio tracks and allows user to browse tracks by swiping to left (next track) or right (previous track). Each carousel's item contains thumbnail, artist name and title.
  10  *
  11  * @class Carousel
  12  * @constructor
  13  */
  14 var Carousel = function() {
  15         "use strict";
  16         this.initializeSwipe();
  17 };
  18 /**
  19 * This property holds audio media content array that carousel is filled with.
  20 * @property callHistory {Array}
  21 * @default []
  22 */
  23 Carousel.prototype.allMediaContent = [];
  24 /**
  25 * This property holds carouFredSel object for internal use in carousel.
  26 * @property swipe {Object}
  27 * @private
  28 */
  29 Carousel.prototype.swipe = null;
  30 /**
  31 * This property holds callback function which is called after current element/position in carousel is changed.
  32 * @property indexChangeCallback {Object}
  33 * @private
  34 */
  35 Carousel.prototype.indexChangeCallback = null;
  36 /**
  37  * This method adds listener that will be called right after the carousel finished scrolling and current element/position is changed.
  38  *
  39  * @method addIndexChangeListener
  40  * @param indexChangeCallback {function()} Callback function to be invoked when current element/position of carousel is changed.
  41  */
  42 Carousel.prototype.addIndexChangeListener = function(indexChangeCallback) {
  43         "use strict";
  44
  45         this.indexChangeCallback = indexChangeCallback;
  46 };
  47
  48 /**
  49  * Initializes and configures carouFredSel 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 = $('#carouselList').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 /**
  90  * Gets the position of selected carousel item.
  91  *
  92  * @method getCurrentPosition
  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 /**
 105  * Scrolls the carousel to given index.
 106  *
 107  * @method slideTo
 108  * @param index {Integer} New position to be scrolled to.
 109  */
 110 Carousel.prototype.slideTo = function(index) {
 111         "use strict";
 112         if (!!this.swipe && index >= 0 && index < this.allMediaContent.length) {
 113                 this.swipe.trigger("slideTo", index);
 114         }
 115 };
 116 /**
 117  * This method fills carousel with audio media content and scrolls immediately the carousel to the designated position.
 118  *
 119  * @method loadMediaContent
 120  * @param  allMediaContent {Array} Audio media content array to be filled in the carousel.
 121  * @param  index {Integer} Position to be scrolled to.
 122  */
 123 Carousel.prototype.loadMediaContent = function(allMediaContent, index) {
 124         "use strict";
 125         this.removeAllItems();
 126         this.allMediaContent = allMediaContent;
 127         this.insertPagesToSwipe();
 128         if (index >= 0 && index < this.allMediaContent.length && !!this.swipe) {
 129                 this.swipe.trigger("slideTo", [ index, 0, {
 130                         duration : 0
 131                 } ]);
 132         }
 133 };
 134
 135 /**
 136  * Creates an HTML snippet representing one carousel item to be inserted into the carousel.
 137  *
 138  * @method createSwipeItem
 139  * @param  mediaItem {Object} Object representing audio media item's information.
 140  * @param  index {Integer} Position of item in carousel used to identify supplied audio media item's HTML DOM representation.
 141  * @return {Object} jQuery DOM object representation of audio media item.
 142  * @private
 143  */
 144 Carousel.prototype.createSwipeItem = function(mediaItem, index) {
 145         "use strict";
 146
 147         if (!!mediaItem) {
 148                 var carouselItem;
 149                 var thumbnail = Utils.getThumbnailPath(mediaItem);
 150                 var artist = Utils.getArtistName(mediaItem);
 151                 var album = Utils.getAlbumName(mediaItem);
 152                 var title = Utils.getMediaItemTitle(mediaItem);
 153
 154                 carouselItem = '<li><div id="item_' + index + '" class="carouselItem">';
 155                 carouselItem += '<img class="carouselImage albumThumbnail carouselImageReflect" src="' + thumbnail + '" alt="">';
 156                 carouselItem += '<div class="albumCarouselDescription">';
 157                 carouselItem += '<div class="albumCarouselDescriptionText oneLineEllipsis fontColorNormal fontSizeLarge fontWeightBold">' + artist + '</div>';
 158                 carouselItem += '<div class="albumCarouselDescriptionText twoLinesEllipsis fontColorDimmedLight fontSizeXSmall fontWeightBold">' + title + '</div>';
 159                 carouselItem += '</div>';
 160                 carouselItem += '</div></li>';
 161
 162                 carouselItem = $(carouselItem);
 163                 return carouselItem;
 164         }
 165
 166         return null;
 167 };
 168
 169 /**
 170  * Inserts new carousel item into carousel.
 171  *
 172  * @method insertPagesToSwipe
 173  * @private
 174  */
 175 Carousel.prototype.insertPagesToSwipe = function() {
 176         "use strict";
 177         var self = this;
 178         var carouselItem;
 179         var clickHandler = function() {
 180                 self.swipe.trigger("slideTo", [ $(this), -1 ]);
 181         };
 182
 183         for ( var index = this.allMediaContent.length - 1; index >= 0; --index) {
 184                 carouselItem = this.createSwipeItem(this.allMediaContent[index], index);
 185                 if (!!carouselItem && !!this.swipe) {
 186                         this.swipe.trigger("insertItem", [ carouselItem, 0 ]);
 187                         carouselItem.click(clickHandler);
 188                 }
 189         }
 190         this.addCarouselEdges();
 191 };
 192
 193 /**
 194  * Removes all items from the carousel.
 195  *
 196  * @method removeAllItems
 197  */
 198 Carousel.prototype.removeAllItems = function() {
 199         "use strict";
 200         var carouselItem;
 201
 202         if (!!this.swipe) {
 203                 for ( var index = this.allMediaContent.length + 1; index >= 0; --index) {
 204                         this.swipe.trigger("removeItem", index);
 205                 }
 206         }
 207 };
 208
 209 /**
 210  * Adds emty carousel items to the beginning and the end of the carousel
 211  * (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).
 212  * @method addCarouselEdges
 213  */
 214 Carousel.prototype.addCarouselEdges = function() {
 215         "use strict";
 216         if (!!this.swipe) {
 217                 var html = "<li><div class='carouselItem'></div></li>";
 218                 this.swipe.trigger("insertItem", [ html, 0 ]);
 219                 this.swipe.trigger("insertItem", [ html, "end", true ]);
 220         }
 221 };