web-ui-fw/0.0.2/0.0.2_Common/original/css/car/components/alphabetBookmark/alphabetBookmark.js

   1 /*global template */
   2
   3 /**
   4  * Represents alphabet UI control element (letters in column), that can be used to filter list of objects according to selected/tapped letter.
   5  * This component is required by {{#crossLink "Library"}}{{/crossLink}} class.
   6  *
   7  * Use following snippet to include component in your `index.html` file:
   8  *
   9  *     <script type="text/javascript" src='./css/car/components/alphabetBookmark/alphabetBookmark.js'></script>
  10  *     <link rel="stylesheet" href="./css/car/components/alphabetBookmark/alphabetBookmark.css" />
  11  *
  12  * and following code to initialize:
  13  *
  14  *     AlphabetBookmark.fill();
  15  *
  16  * @class AlphabetBookmark
  17  * @module CarTheme
  18  * @constructor
  19  */
  20 var AlphabetBookmark = {
  21         /**
  22          * Array of letters.
  23          * @property abModel
  24          * @type {Array}
  25          */
  26         abModel: [],
  27         /**
  28          * String of letters that will rendered.
  29          * @property abcd
  30          * @type {String}
  31          */
  32         abcd: "*ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  33         /**
  34          * Highlights the selected letter.
  35          *
  36          * @method touch
  37          * @param index {Integer} Index of the letter.
  38          */
  39         touch: function (index) {
  40             "use strict";
  41             $(".alphabetBookmarkItem").removeClass("fontColorSelected");
  42             var tabId = "#item_" + index;
  43             $(tabId).addClass("fontColorSelected");
  44             $("#alphabetBookmarkList").trigger("letterClick", this.abModel[index].text);
  45         },
  46         /**
  47          * Fills the {{#crossLink "AlphabetBookmark/abModel:property"}}{{/crossLink}} from {{#crossLink "AlphabetBookmark/abcd:property"}}{{/crossLink}} and shows the rendered default template on the screen.
  48          *
  49          * @method fill
  50          */
  51         fill: function () {
  52             "use strict";
  53
  54             this.abModel = [];
  55             var i = 0;
  56             for (i = 0; i < this.abcd.length; i++) {
  57                 this.abModel.push({ index: i, text: this.abcd.charAt(i) });
  58             }
  59             template.compile(this.abModel, "./css/car/components/alphabetBookmark/templates/alphabetBookmarkDelegate.html", "#alphabetBookmarkList");
  60         }
  61     };