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

   1 /* ***************************************************************************
   2  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
   3  *
   4  * Permission is hereby granted, free of charge, to any person obtaining a
   5  * copy of this software and associated documentation files (the "Software"),
   6  * to deal in the Software without restriction, including without limitation
   7  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
   8  * and/or sell copies of the Software, and to permit persons to whom the
   9  * Software is furnished to do so, subject to the following conditions:
  10  *
  11  * The above copyright notice and this permission notice shall be included in
  12  * all copies or substantial portions of the Software.
  13  *
  14  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  19  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  20  * DEALINGS IN THE SOFTWARE.
  21  * ***************************************************************************
  22  */
  23 /**
  24  * Displays vertical multi-level list.
  25  *
  26  * To apply, add the attribute data-expandable="true" and id="parentid" to a <li> element for parent list item
  27  * and add the arrribute data-expanded-by="parentid" to a <li> element for child list item.
  28  *
  29  * HTML Attributes:
  30  *              data-expandable: Parent list item must have 'true' value for this attribute
  31  *              data-expanded-by: Child list item expanded by parent list item must have 'true' value for this attribute
  32  *              data-initial-expansion: If you want expandable list to be expanded initially, set this value as 'true'
  33  *
  34  * Example:
  35  *     <li data-expandable="true" id="exp1" data-initial-expansion="true">Parent</li>
  36  *     <li data-expanded-by="exp1">Child</li>
  37  */
  38
  39 ( function ( $, undefined ) {
  40
  41         $.widget( "tizen.expandablelist", $.mobile.widget, {
  42                 options: {
  43                         initSelector: ":jqmData(expandable='true')"
  44                 },
  45
  46                 _hide: function ( e ) {
  47                         $( e ).removeClass( 'ui-li-expand-transition-show' )
  48                                 .addClass( 'ui-li-expand-transition-hide' );
  49                 },
  50                 _show: function ( e ) {
  51                         $( e ).removeClass( 'ui-li-expand-transition-hide' )
  52                                 .addClass( 'ui-li-expand-transition-show' );
  53                 },
  54                 _hide_expand_img: function ( e ) {
  55                         $( e ).removeClass( 'ui-li-expandable-hidden' )
  56                                 .addClass( 'ui-li-expandable-shown' );
  57
  58                         $( e ).find( ".ui-li-expand-icon" )
  59                                 .addClass( "ui-li-expanded-icon" )
  60                                 .removeClass( "ui-li-expand-icon" );
  61                 },
  62                 _show_expand_img: function ( e ) {
  63                         $( e ).removeClass( 'ui-li-expandable-shown' )
  64                                 .addClass( 'ui-li-expandable-hidden' );
  65
  66                         $( e ).find( ".ui-li-expanded-icon" )
  67                                 .addClass( "ui-li-expand-icon" )
  68                                 .removeClass( "ui-li-expanded-icon" );
  69                 },
  70
  71                 _set_expand_arrow: function ( self, e, parent_is_expanded ) {
  72                         if ( parent_is_expanded ) {
  73                                 self._hide_expand_img( e );
  74                         } else {
  75                                 self._show_expand_img( e );
  76                         }
  77                         if ( $( e[0] ).data( "expandable" ) && parent_is_expanded == false ) {
  78                                 var children = $( e ).nextAll( ":jqmData(expanded-by='" + $( e ).attr( 'id' ) + "')" );
  79                                 children.each( function ( idx, child ) {
  80                                         self._set_expand_arrow( self, child, e.is_expanded );
  81                                 } );
  82                         }
  83                 },
  84
  85                 _toggle: function ( self, e, parent_is_expanded ) {
  86                         if ( ! parent_is_expanded ) {
  87                                 self._show( e );
  88                         } else {
  89                                 self._hide( e );
  90                                 if ( $( e ).data( "expandable" ) && e.is_expanded == true ) {
  91                                         var children = $( e ).nextAll( ":jqmData(expanded-by='" + $( e ).attr( 'id' ) + "')" );
  92                                         children.each( function ( idx, child ) {
  93                                                 self._toggle( self, child, e.is_expanded );
  94                                         } );
  95                                         e.is_expanded = false;
  96                                 }
  97                         }
  98                 },
  99                 _is_hidden: function ( e ) {
 100                         return ( $( e ).height( ) == 0);
 101                 },
 102
 103                 _create: function ( ) {
 104
 105                         var children = $( this.element ).nextAll( ":jqmData(expanded-by='" + $( this.element ).attr( 'id' ) + "')" ),
 106                                 e = this.element,
 107                                 self = this,
 108                                 expanded = e.nextAll( ":jqmData(expanded-by='" + e[0].id + "')" ),
 109                                 initial_expansion = e.data( "initial-expansion" ),
 110                                 is_expanded = false,
 111                                 parent_id = null;
 112
 113                         if ( children.length == 0 ) {
 114                                 return;
 115                         }
 116
 117                         if ( initial_expansion == true ) {
 118                                 parent_id = e.data( "expanded-by" );
 119                                 if ( parent_id ) {
 120                                         if ( $( "#" + parent_id ).is_expanded == true) {
 121                                                 is_expanded = true;
 122                                         }
 123                                 } else {
 124                                         is_expanded = true;
 125                                 }
 126                         }
 127
 128                         e[0].is_expanded = is_expanded;
 129                         if ( e[0].is_expanded ) {
 130                                 self._hide_expand_img( e );
 131                                 $(e).append( "<div class='ui-li-expanded-icon'></div>" );
 132                         } else {
 133                                 self._show_expand_img( e );
 134                                 $(e).append( "<div class='ui-li-expand-icon'></div>" );
 135                         }
 136
 137                         if ( e[0].is_expanded ) {
 138                                 expanded.each( function ( i, e ) { self._show( e ); } );
 139                         } else {
 140                                 expanded.each( function ( i, e ) { self._hide( e ); } );
 141                         }
 142
 143                         expanded.addClass( "ui-li-expanded" );
 144
 145                         e.bind( 'vclick', function ( ) {
 146                                 var _is_expanded = e[0].is_expanded;
 147                                 expanded.each( function ( i, e ) { self._toggle( self, e, _is_expanded ); } );
 148                                 e[0].is_expanded = ! e[0].is_expanded;
 149
 150                                 self._set_expand_arrow( self, e, e[0].is_expanded );
 151                         });
 152                 }
 153
 154
 155         });     // end: $.widget()
 156
 157
 158         $( document ).bind( "pagecreate create", function ( e ) {
 159                 $( $.tizen.expandablelist.prototype.options.initSelector, e.target )
 160                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 161                         .expandablelist( );
 162         });
 163
 164 } ( jQuery ) );