src/widgets/expandablelist/js/jquery.mobile.tizen.expandablelist.js

   1 /**
   2  * Displays vertical multi-level list.
   3  *
   4  * To apply, add the attribute data-expandable="true" and id="parentid" to a <li> element for parent list item
   5  * and add the arrribute data-expanded-by="parentid" to a <li> element for child list item.
   6  *
   7  * HTML Attributes:
   8  *              data-expandable: Parent list item must have 'true' value for this attribute
   9  *              data-expanded-by: Child list item expanded by parent list item must have 'true' value for this attribute
  10  *              data-initial-expansion: If you want expandable list to be expanded initially, set this value as 'true'
  11  *
  12  * Example:
  13  *     <li data-expandable="true" id="exp1" data-initial-expansion="true">Parent</li>
  14  *     <li data-expanded-by="exp1">Child</li>
  15  */
  16
  17 (function ($, undefined) {
  18
  19 $.widget("todons.expandablelist", $.mobile.widget, {
  20         options: {
  21                 initSelector: ":jqmData(expandable='true')",
  22         },
  23
  24         _hide: function(e) {
  25                 $(e).removeClass('ui-li-expand-transition-show')
  26                         .addClass('ui-li-expand-transition-hide');
  27         },
  28         _show: function(e) {
  29                 $(e).removeClass('ui-li-expand-transition-hide')
  30                         .addClass('ui-li-expand-transition-show');
  31         },
  32         _hide_expand_img: function(e) {
  33                 $(e).removeClass('ui-li-expandable-hidden')
  34                         .addClass('ui-li-expandable-shown');
  35
  36                 $(e).find( ".ui-li-expand-icon" )
  37                         .addClass( "ui-li-expanded-icon" )
  38                         .removeClass( "ui-li-expand-icon" );
  39         },
  40         _show_expand_img: function(e) {
  41                 $(e).removeClass('ui-li-expandable-shown')
  42                         .addClass('ui-li-expandable-hidden');
  43
  44                 $(e).find( ".ui-li-expanded-icon" )
  45                         .addClass( "ui-li-expand-icon" )
  46                         .removeClass( "ui-li-expanded-icon" );
  47         },
  48
  49         _set_expand_arrow: function(self, e, parent_is_expanded) {
  50                         if (parent_is_expanded) {
  51                                 self._hide_expand_img(e);
  52                         } else {
  53                                 self._show_expand_img(e);
  54                         }
  55                         if($(e[0]).data("expandable") && parent_is_expanded == false) {
  56                                 var children = $(e).nextAll(":jqmData(expanded-by='"+$(e).attr('id')+"')");
  57                                 children.each(function(idx, child) {
  58                                         self._set_expand_arrow(self, child, e.is_expanded);
  59                                 });
  60                         }
  61         },
  62
  63         _toggle: function(self, e, parent_is_expanded) {
  64                 if (! parent_is_expanded) {
  65                         self._show(e);
  66                 }
  67                 else {
  68                         self._hide(e);
  69                         if($(e).data("expandable") && e.is_expanded == true) {
  70                                 var children = $(e).nextAll(":jqmData(expanded-by='"+$(e).attr('id')+"')");
  71                                 children.each(function(idx, child) {
  72                                         self._toggle(self, child, e.is_expanded);
  73                                 });
  74                                 e.is_expanded = false;
  75                         }
  76                 }
  77         },
  78         _is_hidden: function(e) {
  79                 return ( $(e).height() == 0);
  80         },
  81
  82         _create: function () {
  83
  84                 var children = $(this.element).nextAll(":jqmData(expanded-by='"+$(this.element).attr('id')+"')");
  85                 if (children.length == 0) {
  86                         return;
  87                 }
  88
  89                 var e = this.element,
  90                         self = this,
  91                         expanded = e.nextAll(":jqmData(expanded-by='" + e[0].id + "')"),
  92                         initial_expansion = e.data("initial-expansion");
  93                         is_expanded = false;
  94
  95                 if(initial_expansion == true ) {
  96                         var parent_id = e.data("expanded-by");
  97                         if(parent_id) {
  98                                 if($("#"+parent_id).is_expanded == true)  is_expanded = true;
  99                         } else {
 100                                 is_expanded = true;
 101                         }
 102                 }
 103
 104                 e[0].is_expanded = is_expanded;
 105                 if (e[0].is_expanded) {
 106                         self._hide_expand_img(e);
 107                         $(e).append("<div class='ui-li-expanded-icon'></div>");
 108                 } else {
 109                         self._show_expand_img(e);
 110                         $(e).append("<div class='ui-li-expand-icon'></div>");
 111                 }
 112
 113                 if(e[0].is_expanded) expanded.each(function(i, e) { self._show(e); });
 114                 else expanded.each(function(i, e) { self._hide(e); });
 115
 116                 expanded.addClass("ui-li-expanded");
 117
 118                 e.bind('vclick', function() {
 119                         var _is_expanded = e[0].is_expanded;
 120                         expanded.each(function(i, e) { self._toggle(self, e, _is_expanded); });
 121                         e[0].is_expanded = ! e[0].is_expanded;
 122
 123                         self._set_expand_arrow(self, e, e[0].is_expanded);
 124                 });
 125         },
 126
 127
 128 });     // end: $.widget()
 129
 130
 131 $(document).bind("pagecreate create", function (e) {
 132         $($.todons.expandablelist.prototype.options.initSelector, e.target)
 133     .not(":jqmData(role='none'), :jqmData(role='nojs')")
 134         .expandablelist();
 135 });
 136
 137 })(jQuery);