-/*\r
+/* ***************************************************************************\r
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.\r
+ *\r
+ * Permission is hereby granted, free of charge, to any person obtaining a\r
+ * copy of this software and associated documentation files (the "Software"),\r
+ * to deal in the Software without restriction, including without limitation\r
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,\r
+ * and/or sell copies of the Software, and to permit persons to whom the\r
+ * Software is furnished to do so, subject to the following conditions:\r
+ *\r
+ * The above copyright notice and this permission notice shall be included in\r
+ * all copies or substantial portions of the Software.\r
+ *\r
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\r
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\r
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\r
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\r
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER\r
+ * DEALINGS IN THE SOFTWARE.\r
+ * ***************************************************************************\r
+ *\r
* Author: Wongi Lee <wongi11.lee@samsung.com>\r
*/\r
\r
/**\r
- * Extendable List Widget for unlimited data.\r
- * To support more then 1,000 items, special list widget developed. \r
- * Fast initialize and append some element into the DOM tree repeatedly.\r
- * DB connection and works like DB cursor. \r
- * \r
+ * Extendable List Widget for unlimited data.\r
+ * To support more then 1,000 items, special list widget developed.\r
+ * Fast initialize and append some element into the DOM tree repeatedly.\r
+ * DB connection and works like DB cursor.\r
+ *\r
* HTML Attributes:\r
*\r
* data-role: extendablelist\r
- * data-template : jQuery.template ID that populate into extendable list. A button : a <DIV> element with "data-role : button" should be included on data-template. \r
+ * data-template : jQuery.template ID that populate into extendable list. A button : a <DIV> element with "data-role : button" should be included on data-template.\r
* data-dbtable : DB Table name. It used as window[DB NAME]. Loaded data should be converted as window object.\r
- * data-extenditems : Number of elements to extend at once. \r
+ * data-extenditems : Number of elements to extend at once.\r
* \r
* ID : <UL> element that has "data-role=extendablelist" must have ID attribute.\r
* Class : <UL> element that has "data-role=extendablelist" should have "vlLoadSuccess" class to guaranty DB loading is completed.\r
- * tmp_load_more : Template ID for "load more" message and button. \r
+ * tmp_load_more : Template ID for "load more" message and button.\r
*\r
*\r
- * APIs:\r
+ *APIs:\r
*\r
* create ( void )\r
* : API to call _create method. API for AJAX or DB loading callback.\r
*\r
* recreate ( Array )\r
- * : Update extendable list with new data array. For example, update with search result. \r
+ * : Update extendable list with new data array. For example, update with search result.\r
+ *\r
+ *Examples:\r
*\r
- * Examples:\r
- * \r
- * <script id="tmp-3-1-1" type="text/x-jquery-tmpl">\r
+ * <script id="tmp-3-1-1" type="text/x-jquery-tmpl">\r
* <li class="ui-li-3-1-1"><span class="ui-li-text-main">${NAME}</span></li>\r
* </script>\r
- * \r
+ *\r
* <script id="tmp_load_more" type="text/x-jquery-tmpl"> \r
- * <li class="ui-li-3-1-1" style="text-align:center; margin:0 auto">\r
- * <div data-role="button">Load ${NUM_MORE_ITEMS} more items</div>\r
- * </li>\r
- * </script>\r
- * \r
- * <ul id = "extendable_list_main" data-role="extendablelist" data-extenditems="50" data-template="tmp-3-1-1" data-dbtable="JSON_DATA">\r
- * </ul>\r
- * \r
+ * <li class="ui-li-3-1-1" style="text-align:center; margin:0 auto">\r
+ * <div data-role="button">Load ${NUM_MORE_ITEMS} more items</div>\r
+ * </li>\r
+ * </script>\r
+ * \r
+ * <ul id = "extendable_list_main" data-role="extendablelist" data-extenditems="50" data-template="tmp-3-1-1" data-dbtable="JSON_DATA">\r
+ * </ul>\r
+ *\r
*/\r
\r
\r
-(function( $, undefined ) {\r
-\r
-//Keeps track of the number of lists per page UID\r
-//This allows support for multiple nested list in the same page\r
-//https://github.com/jquery/jquery-mobile/issues/1617\r
-var listCountPerPage = {};\r
-\r
-var TOTAL_ITEMS = 0;\r
-\r
-var i =0;\r
-var last_index = 0;\r
-\r
-$.widget( "tizen.extendablelist", $.mobile.widget, {\r
- options: {\r
- theme: "s",\r
- countTheme: "c",\r
- headerTheme: "b",\r
- dividerTheme: "b",\r
- splitIcon: "arrow-r",\r
- splitTheme: "b",\r
- inset: false,\r
- id: "", /* Extendable list UL elemet's ID */\r
- extenditems: 50, /* Number of append items */ \r
- childSelector: " li", /* To support swipe list */\r
- dbtable: "",\r
- template : "", /* Template for each list item */\r
- loadmore : "tmp_load_more", /* Template for "Load more" message */\r
- scrollview: false,\r
- initSelector: ":jqmData(role='extendablelist')"\r
- },\r
-\r
- _stylerMouseUp: function() {\r
- $( this ).addClass( "ui-btn-up-s" );\r
- $( this ).removeClass( "ui-btn-down-s" );\r
- },\r
-\r
- _stylerMouseDown: function() {\r
- $( this ).addClass( "ui-btn-down-s" );\r
- $( this ).removeClass( "ui-btn-up-s" );\r
- },\r
- \r
- _stylerMouseOver: function() {\r
- $( this ).toggleClass( "ui-btn-hover-s" ); \r
- },\r
- \r
- _stylerMouseOut: function() {\r
- $( this ).toggleClass( "ui-btn-hover-s" );\r
- },\r
-\r
- _pushData: function ( template, data ) {\r
- var o = this.options;\r
- \r
- var dataTable = data;\r
- \r
- var myTemplate = $( "#" + template );\r
- \r
- var loadMoreItems = ( o.extenditems > data.length - last_index ? data.length - last_index : o.extenditems); \r
- \r
- for (i = 0; i < loadMoreItems; i++ ) \r
- {\r
- var htmlData = myTemplate.tmpl( dataTable[ i ]);\r
- $( o.id ).append( $( htmlData ).attr( 'id', 'li_'+i ) );\r
- last_index++;\r
- }\r
- \r
- /* After push data, re-style extendable list widget */\r
- $( o.id ).trigger( "create" );\r
- },\r
- \r
- _loadmore: function( event ){\r
- var t = this;\r
- var o = event.data;\r
- \r
- /* Remove load more message */\r
- $( "#load_more_message" ).remove();\r
-\r
- /* Append items */\r
- var dataTable = window[ o.dbtable ];\r
- var myTemplate = $( "#" + o.template );\r
- \r
- var loadMoreItems = ( o.extenditems > dataTable.length - last_index ? dataTable.length - last_index : o.extenditems ); \r
- \r
- for ( i = 0; i < loadMoreItems; i++ ) \r
- {\r
- last_index++;\r
- var htmlData = myTemplate.tmpl( dataTable[ last_index ] );\r
- $( o.id ).append( $( htmlData ).attr( 'id', 'li_' + last_index ) );\r
- }\r
- \r
- /* Append "Load more" message on the last of list */\r
- if ( TOTAL_ITEMS > last_index ) {\r
- var myTemplate = $( "#" + o.loadmore );\r
- var more_items_to_load = TOTAL_ITEMS - last_index;\r
- var num_next_load_items = ( o.extenditems <= more_items_to_load ) ? o.extenditems : more_items_to_load;\r
- var htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );\r
- \r
- $( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );\r
- }\r
- \r
- $( o.id ).trigger( "create" );\r
- $( o.id ).extendablelist( "refresh" );\r
- },\r
- \r
- recreate: function( newArray ) {\r
- var t = this;\r
- var o = this.options;\r
- \r
- $( o.id ).empty();\r
- \r
- TOTAL_ITEMS = newArray.length;\r
- \r
- t._pushData( ( o.template), newArray );\r
- \r
- if ( o.childSelector == " ul" ) {\r
- $( o.id + " ul" ).swipelist(); \r
- }\r
- \r
- $( o.id ).extendablelist();\r
- \r
- t.refresh( true );\r
- },\r
-\r
- _initList: function(){\r
- var t = this;\r
- var o = this.options;\r
- \r
- /* After AJAX loading success */\r
- o.dbtable = t.element.data( "dbtable" );\r
- \r
- TOTAL_ITEMS = $( window[ o.dbtable ] ).size();\r
- \r
- /* Make Gen list by template */\r
- if ( last_index <= 0 ) {\r
- t._pushData( ( o.template ), window[ o.dbtable ] );\r
-\r
- /* Append "Load more" message on the last of list */\r
- if ( TOTAL_ITEMS > last_index ) {\r
- var myTemplate = $( "#" + o.loadmore );\r
- var more_items_to_load = TOTAL_ITEMS - last_index;\r
- var num_next_load_items = ( o.extenditems <= more_items_to_load) ? o.extenditems : more_items_to_load;\r
- var htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );\r
- \r
- $( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );\r
- \r
- $( "#load_more_message" ).live( "click", t.options, t._loadmore );\r
- }\r
- else {\r
- /* No more items to load */\r
- $( "#load_more_message" ).die();\r
- $( "#load_more_message" ).remove();\r
- }\r
- }\r
+( function ( $, undefined ) {\r
+\r
+ //Keeps track of the number of lists per page UID\r
+ //This allows support for multiple nested list in the same page\r
+ //https://github.com/jquery/jquery-mobile/issues/1617\r
+ var listCountPerPage = {},\r
+ TOTAL_ITEMS = 0,\r
+ last_index = 0;\r
+\r
+ $.widget( "tizen.extendablelist", $.mobile.widget, {\r
+ options: {\r
+ theme: "s",\r
+ countTheme: "c",\r
+ headerTheme: "b",\r
+ dividerTheme: "b",\r
+ splitIcon: "arrow-r",\r
+ splitTheme: "b",\r
+ inset: false,\r
+ id: "", /* Extendable list UL elemet's ID */\r
+ extenditems: 50, /* Number of append items */\r
+ childSelector: " li", /* To support swipe list */\r
+ dbtable: "",\r
+ template : "", /* Template for each list item */\r
+ loadmore : "tmp_load_more", /* Template for "Load more" message */\r
+ scrollview: false,\r
+ initSelector: ":jqmData(role='extendablelist')"\r
+ },\r
+\r
+ _stylerMouseUp: function () {\r
+ $( this ).addClass( "ui-btn-up-s" );\r
+ $( this ).removeClass( "ui-btn-down-s" );\r
+ },\r
+\r
+ _stylerMouseDown: function () {\r
+ $( this ).addClass( "ui-btn-down-s" );\r
+ $( this ).removeClass( "ui-btn-up-s" );\r
+ },\r
+\r
+ _stylerMouseOver: function () {\r
+ $( this ).toggleClass( "ui-btn-hover-s" );\r
+ },\r
+\r
+ _stylerMouseOut: function () {\r
+ $( this ).toggleClass( "ui-btn-hover-s" );\r
+ },\r
+\r
+ _pushData: function ( template, data ) {\r
+ var o = this.options,\r
+ i = 0,\r
+ dataTable = data,\r
+ myTemplate = $( "#" + template ),\r
+ loadMoreItems = ( o.extenditems > data.length - last_index ? data.length - last_index : o.extenditems ),\r
+ htmlData;\r
+\r
+ for (i = 0; i < loadMoreItems; i++ ) {\r
+ htmlData = myTemplate.tmpl( dataTable[ i ] );\r
+ $( o.id ).append( $( htmlData ).attr( 'id', 'li_' + i ) );\r
+ last_index++;\r
+ }\r
+\r
+ /* After push data, re-style extendable list widget */\r
+ $( o.id ).trigger( "create" );\r
+ },\r
+\r
+ _loadmore: function ( event ) {\r
+ var t = this,\r
+ o = event.data,\r
+ i = 0,\r
+ dataTable = window[ o.dbtable ],\r
+ myTemplate = $( "#" + o.template ),\r
+ loadMoreItems = ( o.extenditems > dataTable.length - last_index ? dataTable.length - last_index : o.extenditems ),\r
+ htmlData,\r
+ more_items_to_load,\r
+ num_next_load_items;\r
+\r
+ /* Remove load more message */\r
+ $( "#load_more_message" ).remove();\r
+\r
+ /* Append More Items */\r
+ for ( i = 0; i < loadMoreItems; i++ ) {\r
+ htmlData = myTemplate.tmpl( dataTable[ last_index ] );\r
+ $( o.id ).append( $( htmlData ).attr( 'id', 'li_' + last_index ) );\r
+ last_index++;\r
+ }\r
+\r
+ /* Append "Load more" message on the last of list */\r
+ if ( TOTAL_ITEMS > last_index ) {\r
+ myTemplate = $( "#" + o.loadmore );\r
+ more_items_to_load = TOTAL_ITEMS - last_index;\r
+ num_next_load_items = ( o.extenditems <= more_items_to_load ) ? o.extenditems : more_items_to_load;\r
+ htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );\r
+\r
+ $( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );\r
+ }\r
+\r
+ $( o.id ).trigger( "create" );\r
+ $( o.id ).extendablelist( "refresh" );\r
+ },\r
+\r
+ recreate: function ( newArray ) {\r
+ var t = this,\r
+ o = this.options;\r
\r
- if ( o.childSelector == " ul" ) {\r
- $( o.id + " ul" ).swipelist();\r
- }\r
- \r
- $( o.id ).trigger( "create" );\r
- \r
- t.refresh( true );\r
- },\r
- \r
- \r
- \r
- create: function() {\r
- var o = this.options;\r
-\r
- /* external API for AJAX callback */\r
- this._create( "create" );\r
- },\r
- \r
- _create: function( event ) {\r
- var t = this;\r
- var o = this.options; \r
- \r
- // create listview markup\r
- t.element.addClass( function( i, orig ) {\r
- return orig + " ui-listview ui-extendable-list-container" + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" );\r
- });\r
-\r
- var $el = this.element;\r
- \r
- o.id = "#" + $el.attr( "id" );\r
- \r
- if ( $el.data( "extenditems" ) ) {\r
- o.extenditems = parseInt( $el.data( "extenditems" ) );\r
- }\r
- \r
- $( o.id ).bind( "pagehide", function(e){\r
$( o.id ).empty();\r
- });\r
- \r
- /* Scroll view */\r
- ( $( ".ui-scrollview-clip" ).size() > 0) ? o.scrollview = true : o.scrollview = false;\r
-\r
- /* After DB Load complete, Init Vritual list */\r
- if ( $( o.id ).hasClass( "vlLoadSuccess" ) ) {\r
- if ( $el.data( "template" ) ) {\r
- o.template = $el.data( "template" );\r
- \r
- /* to support swipe list, <li> or <ul> can be main node of extendable list. */\r
- if ( $el.data( "swipelist" ) == true ) {\r
- o.childSelector = " ul";\r
- }\r
- else {\r
- o.shildSelector = " li";\r
+\r
+ TOTAL_ITEMS = newArray.length;\r
+\r
+ t._pushData( ( o.template), newArray );\r
+\r
+ if ( o.childSelector == " ul" ) {\r
+ $( o.id + " ul" ).swipelist();\r
+ }\r
+\r
+ $( o.id ).extendablelist();\r
+\r
+ t.refresh( true );\r
+ },\r
+\r
+ _initList: function () {\r
+ var t = this,\r
+ o = this.options,\r
+ myTemplate,\r
+ more_items_to_load,\r
+ num_next_load_items,\r
+ htmlData;\r
+\r
+ /* After AJAX loading success */\r
+ o.dbtable = t.element.data( "dbtable" );\r
+\r
+ TOTAL_ITEMS = $( window[ o.dbtable ] ).size();\r
+\r
+ /* Make Gen list by template */\r
+ if ( last_index <= 0 ) {\r
+ t._pushData( ( o.template ), window[ o.dbtable ] );\r
+\r
+ /* Append "Load more" message on the last of list */\r
+ if ( TOTAL_ITEMS > last_index ) {\r
+ myTemplate = $( "#" + o.loadmore );\r
+ more_items_to_load = TOTAL_ITEMS - last_index;\r
+ num_next_load_items = ( o.extenditems <= more_items_to_load) ? o.extenditems : more_items_to_load;\r
+ htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );\r
+\r
+ $( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );\r
+\r
+ $( "#load_more_message" ).live( "click", t.options, t._loadmore );\r
+ } else {\r
+ /* No more items to load */\r
+ $( "#load_more_message" ).die();\r
+ $( "#load_more_message" ).remove();\r
}\r
}\r
- \r
- t._initList();\r
- }\r
- },\r
- \r
- destroy : function(){\r
- var o = this.options;\r
- \r
- $( o.id ).empty();\r
- \r
- TOTAL_ITEMS = 0;\r
- i =0;\r
- last_index = 0;\r
- \r
- $( "#load_more_message" ).die();\r
- },\r
- \r
- _itemApply: function( $list, item ) {\r
- var $countli = item.find( ".ui-li-count" );\r
- \r
- if ( $countli.length ) {\r
- item.addClass( "ui-li-has-count" );\r
- }\r
- \r
- $countli.addClass( "ui-btn-up-" + ( $list.jqmData( "counttheme" ) || this.options.countTheme ) + " ui-btn-corner-all" );\r
-\r
- // TODO class has to be defined in markup\r
- item.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" ).end()\r
- .find( "p, dl" ).addClass( "ui-li-desc" ).end()\r
- .find( ">img:eq(0), .ui-link-inherit>img:eq(0)" ).addClass( "ui-li-thumb" ).each(function() {\r
- item.addClass( $( this ).is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );\r
- }).end()\r
- .find( ".ui-li-aside" ).each(function() {\r
- var $this = $( this );\r
- $this.prependTo( $this.parent() ); //shift aside to front for css float\r
+\r
+ if ( o.childSelector == " ul" ) {\r
+ $( o.id + " ul" ).swipelist();\r
+ }\r
+\r
+ $( o.id ).trigger( "create" );\r
+\r
+ t.refresh( true );\r
+ },\r
+\r
+ create: function () {\r
+ var o = this.options;\r
+\r
+ /* external API for AJAX callback */\r
+ this._create( "create" );\r
+ },\r
+\r
+ _create: function ( event ) {\r
+ var t = this,\r
+ o = this.options,\r
+ $el = this.element;\r
+\r
+ // create listview markup\r
+ t.element.addClass( function ( i, orig ) {\r
+ return orig + " ui-listview ui-extendable-list-container" + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" );\r
});\r
- },\r
\r
- _removeCorners: function( li, which ) {\r
- var top = "ui-corner-top ui-corner-tr ui-corner-tl",\r
- bot = "ui-corner-bottom ui-corner-br ui-corner-bl";\r
+ o.id = "#" + $el.attr( "id" );\r
+\r
+ if ( $el.data( "extenditems" ) ) {\r
+ o.extenditems = parseInt( $el.data( "extenditems" ), 10 );\r
+ }\r
\r
- li = li.add( li.find( ".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb" ) );\r
+ $( o.id ).bind( "pagehide", function (e) {\r
+ $( o.id ).empty();\r
+ });\r
\r
- if ( which === "top" ) {\r
- li.removeClass( top );\r
- } else if ( which === "bottom" ) {\r
- li.removeClass( bot );\r
- } else {\r
- li.removeClass( top + " " + bot );\r
- }\r
- },\r
-\r
- _refreshCorners: function( create ) {\r
- var $li,\r
- $visibleli,\r
- $topli,\r
- $bottomli;\r
-\r
- if ( this.options.inset ) {\r
- $li = this.element.children( "li" );\r
- // at create time the li are not visible yet so we need to rely on .ui-screen-hidden\r
- $visibleli = create?$li.not( ".ui-screen-hidden" ):$li.filter( ":visible" );\r
-\r
- this._removeCorners( $li );\r
-\r
- // Select the first visible li element\r
- $topli = $visibleli.first()\r
- .addClass( "ui-corner-top" );\r
-\r
- $topli.add( $topli.find( ".ui-btn-inner" ) )\r
- .find( ".ui-li-link-alt" )\r
- .addClass( "ui-corner-tr" )\r
- .end()\r
- .find( ".ui-li-thumb" )\r
- .not( ".ui-li-icon" )\r
- .addClass( "ui-corner-tl" );\r
-\r
- // Select the last visible li element\r
- $bottomli = $visibleli.last()\r
- .addClass( "ui-corner-bottom" );\r
-\r
- $bottomli.add( $bottomli.find( ".ui-btn-inner" ) )\r
- .find( ".ui-li-link-alt" )\r
- .addClass( "ui-corner-br" )\r
- .end()\r
- .find( ".ui-li-thumb" )\r
- .not( ".ui-li-icon" )\r
- .addClass( "ui-corner-bl" );\r
- }\r
- },\r
-\r
- refresh: function( create ) {\r
- this.parentPage = this.element.closest( ".ui-page" );\r
- this._createSubPages();\r
-\r
- var o = this.options,\r
- $list = this.element,\r
- self = this,\r
- dividertheme = $list.jqmData( "dividertheme" ) || o.dividerTheme,\r
- listsplittheme = $list.jqmData( "splittheme" ),\r
- listspliticon = $list.jqmData( "spliticon" ),\r
- li = $list.children( "li" ),\r
- counter = $.support.cssPseudoElement || !$.nodeName( $list[ 0 ], "ol" ) ? 0 : 1,\r
- item, itemClass, itemTheme,\r
- a, last, splittheme, countParent, icon;\r
-\r
- if ( counter ) {\r
- $list.find( ".ui-li-dec" ).remove();\r
- }\r
+ /* Scroll view */\r
+ if ( $( ".ui-scrollview-clip" ).size() > 0) {\r
+ o.scrollview = true;\r
+ } else {\r
+ o.scrollview = false;\r
+ }\r
\r
- for ( var pos = 0, numli = li.length; pos < numli; pos++ ) {\r
- item = li.eq( pos );\r
- itemClass = "ui-li";\r
-\r
- // If we're creating the element, we update it regardless\r
- if ( create || !item.hasClass( "ui-li" ) ) {\r
- itemTheme = item.jqmData( "theme" ) || o.theme;\r
- a = item.children( "a" );\r
-\r
- if ( a.length ) {\r
- icon = item.jqmData( "icon" );\r
-\r
- item.buttonMarkup({\r
- wrapperEls: "div",\r
- shadow: false,\r
- corners: false,\r
- iconpos: "right",\r
- /* icon: a.length > 1 || icon === false ? false : icon || "arrow-r",*/\r
- icon: false, /* Remove unnecessary arrow icon */\r
- theme: itemTheme\r
- });\r
-\r
- if ( ( icon != false ) && ( a.length == 1 ) ) {\r
- item.addClass( "ui-li-has-arrow" );\r
+ /* After DB Load complete, Init Extendable list */\r
+ if ( $( o.id ).hasClass( "elLoadSuccess" ) ) {\r
+ if ( !$( o.id ).hasClass( "elInitComplete" ) ) {\r
+ if ( $el.data( "template" ) ) {\r
+ o.template = $el.data( "template" );\r
+\r
+ /* to support swipe list, <li> or <ul> can be main node of extendable list. */\r
+ if ( $el.data( "swipelist" ) == true ) {\r
+ o.childSelector = " ul";\r
+ } else {\r
+ o.shildSelector = " li";\r
+ }\r
}\r
\r
- a.first().addClass( "ui-link-inherit" );\r
-\r
- if ( a.length > 1 ) {\r
- itemClass += " ui-li-has-alt";\r
-\r
- last = a.last();\r
- splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;\r
-\r
- last.appendTo(item)\r
- .attr( "title", last.getEncodedText() )\r
- .addClass( "ui-li-link-alt" )\r
- .empty()\r
- .buttonMarkup({\r
- shadow: false,\r
- corners: false,\r
- theme: itemTheme,\r
- icon: false,\r
- iconpos: false\r
- })\r
- .find( ".ui-btn-inner" )\r
+ $( o.id ).addClass( "elInitComplete" );\r
+ }\r
+\r
+ t._initList();\r
+ }\r
+ },\r
+\r
+ destroy : function () {\r
+ var o = this.options;\r
+\r
+ $( o.id ).empty();\r
+\r
+ TOTAL_ITEMS = 0;\r
+ last_index = 0;\r
+\r
+ $( "#load_more_message" ).die();\r
+ },\r
+\r
+ _itemApply: function ( $list, item ) {\r
+ var $countli = item.find( ".ui-li-count" );\r
+\r
+ if ( $countli.length ) {\r
+ item.addClass( "ui-li-has-count" );\r
+ }\r
+\r
+ $countli.addClass( "ui-btn-up-" + ( $list.jqmData( "counttheme" ) || this.options.countTheme ) + " ui-btn-corner-all" );\r
+\r
+ // TODO class has to be defined in markup\r
+ item.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" ).end()\r
+ .find( "p, dl" ).addClass( "ui-li-desc" ).end()\r
+ .find( ">img:eq(0), .ui-link-inherit>img:eq(0)" ).addClass( "ui-li-thumb" ).each(function () {\r
+ item.addClass( $( this ).is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );\r
+ }).end()\r
+ .find( ".ui-li-aside" ).each(function () {\r
+ var $this = $( this );\r
+ $this.prependTo( $this.parent() ); //shift aside to front for css float\r
+ });\r
+ },\r
+\r
+ _removeCorners: function ( li, which ) {\r
+ var top = "ui-corner-top ui-corner-tr ui-corner-tl",\r
+ bot = "ui-corner-bottom ui-corner-br ui-corner-bl";\r
+\r
+ li = li.add( li.find( ".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb" ) );\r
+\r
+ if ( which === "top" ) {\r
+ li.removeClass( top );\r
+ } else if ( which === "bottom" ) {\r
+ li.removeClass( bot );\r
+ } else {\r
+ li.removeClass( top + " " + bot );\r
+ }\r
+ },\r
+\r
+ _refreshCorners: function ( create ) {\r
+ var $li,\r
+ $visibleli,\r
+ $topli,\r
+ $bottomli;\r
+\r
+ if ( this.options.inset ) {\r
+ $li = this.element.children( "li" );\r
+ // at create time the li are not visible yet so we need to rely on .ui-screen-hidden\r
+ $visibleli = create ? $li.not( ".ui-screen-hidden" ) : $li.filter( ":visible" );\r
+\r
+ this._removeCorners( $li );\r
+\r
+ // Select the first visible li element\r
+ $topli = $visibleli.first()\r
+ .addClass( "ui-corner-top" );\r
+\r
+ $topli.add( $topli.find( ".ui-btn-inner" ) )\r
+ .find( ".ui-li-link-alt" )\r
+ .addClass( "ui-corner-tr" )\r
+ .end()\r
+ .find( ".ui-li-thumb" )\r
+ .not( ".ui-li-icon" )\r
+ .addClass( "ui-corner-tl" );\r
+\r
+ // Select the last visible li element\r
+ $bottomli = $visibleli.last()\r
+ .addClass( "ui-corner-bottom" );\r
+\r
+ $bottomli.add( $bottomli.find( ".ui-btn-inner" ) )\r
+ .find( ".ui-li-link-alt" )\r
+ .addClass( "ui-corner-br" )\r
+ .end()\r
+ .find( ".ui-li-thumb" )\r
+ .not( ".ui-li-icon" )\r
+ .addClass( "ui-corner-bl" );\r
+ }\r
+ },\r
+\r
+ refresh: function ( create ) {\r
+ this.parentPage = this.element.closest( ".ui-page" );\r
+ this._createSubPages();\r
+\r
+ var o = this.options,\r
+ $list = this.element,\r
+ self = this,\r
+ dividertheme = $list.jqmData( "dividertheme" ) || o.dividerTheme,\r
+ listsplittheme = $list.jqmData( "splittheme" ),\r
+ listspliticon = $list.jqmData( "spliticon" ),\r
+ li = $list.children( "li" ),\r
+ counter = $.support.cssPseudoElement || !$.nodeName( $list[ 0 ], "ol" ) ? 0 : 1,\r
+ item,\r
+ itemClass,\r
+ itemTheme,\r
+ a,\r
+ last,\r
+ splittheme,\r
+ countParent,\r
+ icon,\r
+ pos,\r
+ numli;\r
+\r
+ if ( counter ) {\r
+ $list.find( ".ui-li-dec" ).remove();\r
+ }\r
+\r
+ for ( pos = 0, numli = li.length; pos < numli; pos++ ) {\r
+ item = li.eq( pos );\r
+ itemClass = "ui-li";\r
+\r
+ // If we're creating the element, we update it regardless\r
+ if ( create || !item.hasClass( "ui-li" ) ) {\r
+ itemTheme = item.jqmData( "theme" ) || o.theme;\r
+ a = item.children( "a" );\r
+\r
+ if ( a.length ) {\r
+ icon = item.jqmData( "icon" );\r
+\r
+ item.buttonMarkup({\r
+ wrapperEls: "div",\r
+ shadow: false,\r
+ corners: false,\r
+ iconpos: "right",\r
+ /* icon: a.length > 1 || icon === false ? false : icon || "arrow-r",*/\r
+ icon: false, /* Remove unnecessary arrow icon */\r
+ theme: itemTheme\r
+ });\r
+\r
+ if ( ( icon != false ) && ( a.length == 1 ) ) {\r
+ item.addClass( "ui-li-has-arrow" );\r
+ }\r
+\r
+ a.first().addClass( "ui-link-inherit" );\r
+\r
+ if ( a.length > 1 ) {\r
+ itemClass += " ui-li-has-alt";\r
+\r
+ last = a.last();\r
+ splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;\r
+\r
+ last.appendTo(item)\r
+ .attr( "title", last.getEncodedText() )\r
+ .addClass( "ui-li-link-alt" )\r
+ .empty()\r
+ .buttonMarkup({\r
+ shadow: false,\r
+ corners: false,\r
+ theme: itemTheme,\r
+ icon: false,\r
+ iconpos: false\r
+ })\r
+ .find( ".ui-btn-inner" )\r
.append(\r
- $( "<span />" ).buttonMarkup({\r
- shadow: true,\r
- corners: true,\r
- theme: splittheme,\r
- iconpos: "notext",\r
- icon: listspliticon || last.jqmData( "icon" ) || o.splitIcon\r
+ $( "<span />" ).buttonMarkup( {\r
+ shadow : true,\r
+ corners : true,\r
+ theme : splittheme,\r
+ iconpos : "notext",\r
+ icon : listspliticon || last.jqmData( "icon" ) || o.splitIcon\r
})\r
);\r
- }\r
- } else if ( item.jqmData( "role" ) === "list-divider" ) {\r
+ }\r
+ } else if ( item.jqmData( "role" ) === "list-divider" ) {\r
\r
- itemClass += " ui-li-divider ui-btn ui-bar-" + dividertheme;\r
- item.attr( "role", "heading" );\r
+ itemClass += " ui-li-divider ui-btn ui-bar-" + dividertheme;\r
+ item.attr( "role", "heading" );\r
\r
- //reset counter when a divider heading is encountered\r
- if ( counter ) {\r
- counter = 1;\r
- }\r
+ //reset counter when a divider heading is encountered\r
+ if ( counter ) {\r
+ counter = 1;\r
+ }\r
\r
- } else {\r
- itemClass += " ui-li-static ui-body-" + itemTheme;\r
+ } else {\r
+ itemClass += " ui-li-static ui-body-" + itemTheme;\r
+ }\r
}\r
- }\r
\r
- if ( counter && itemClass.indexOf( "ui-li-divider" ) < 0 ) {\r
- countParent = item.is( ".ui-li-static:first" ) ? item : item.find( ".ui-link-inherit" );\r
+ if ( counter && itemClass.indexOf( "ui-li-divider" ) < 0 ) {\r
+ countParent = item.is( ".ui-li-static:first" ) ? item : item.find( ".ui-link-inherit" );\r
\r
- countParent.addClass( "ui-li-jsnumbering" )\r
- .prepend( "<span class='ui-li-dec'>" + (counter++) + ". </span>" );\r
- }\r
+ countParent.addClass( "ui-li-jsnumbering" )\r
+ .prepend( "<span class='ui-li-dec'>" + (counter++) + ". </span>" );\r
+ }\r
\r
- item.add( item.children( ".ui-btn-inner" ) ).addClass( itemClass );\r
+ item.add( item.children( ".ui-btn-inner" ) ).addClass( itemClass );\r
\r
- self._itemApply( $list, item );\r
- }\r
+ self._itemApply( $list, item );\r
+ }\r
\r
- this._refreshCorners( create );\r
- },\r
-\r
- //create a string for ID/subpage url creation\r
- _idStringEscape: function( str ) {\r
- return str.replace(/[^a-zA-Z0-9]/g, '-');\r
- },\r
-\r
- _createSubPages: function() {\r
- var parentList = this.element,\r
- parentPage = parentList.closest( ".ui-page" ),\r
- parentUrl = parentPage.jqmData( "url" ),\r
- parentId = parentUrl || parentPage[ 0 ][ $.expando ],\r
- parentListId = parentList.attr( "id" ),\r
- o = this.options,\r
- dns = "data-" + $.mobile.ns,\r
- self = this,\r
- persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" ),\r
- hasSubPages;\r
-\r
- if ( typeof listCountPerPage[ parentId ] === "undefined" ) {\r
- listCountPerPage[ parentId ] = -1;\r
- }\r
+ this._refreshCorners( create );\r
+ },\r
+\r
+ //create a string for ID/subpage url creation\r
+ _idStringEscape: function ( str ) {\r
+ return str.replace(/\W/g , "-");\r
+\r
+ },\r
+\r
+ _createSubPages: function () {\r
+ var parentList = this.element,\r
+ parentPage = parentList.closest( ".ui-page" ),\r
+ parentUrl = parentPage.jqmData( "url" ),\r
+ parentId = parentUrl || parentPage[ 0 ][ $.expando ],\r
+ parentListId = parentList.attr( "id" ),\r
+ o = this.options,\r
+ dns = "data-" + $.mobile.ns,\r
+ self = this,\r
+ persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" ),\r
+ hasSubPages,\r
+ newRemove;\r
+\r
+ if ( typeof listCountPerPage[ parentId ] === "undefined" ) {\r
+ listCountPerPage[ parentId ] = -1;\r
+ }\r
\r
- parentListId = parentListId || ++listCountPerPage[ parentId ];\r
-\r
- $( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function( i ) {\r
- var self = this,\r
- list = $( this ),\r
- listId = list.attr( "id" ) || parentListId + "-" + i,\r
- parent = list.parent(),\r
- nodeEls = $( list.prevAll().toArray().reverse() ),\r
- nodeEls = nodeEls.length ? nodeEls : $( "<span>" + $.trim(parent.contents()[ 0 ].nodeValue) + "</span>" ),\r
- title = nodeEls.first().getEncodedText(),//url limits to first 30 chars of text\r
- id = ( parentUrl || "" ) + "&" + $.mobile.subPageUrlKey + "=" + listId,\r
- theme = list.jqmData( "theme" ) || o.theme,\r
- countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme,\r
- newPage, anchor;\r
-\r
- //define hasSubPages for use in later removal\r
- hasSubPages = true;\r
-\r
- newPage = list.detach()\r
- .wrap( "<div " + dns + "role='page' " + dns + "url='" + id + "' " + dns + "theme='" + theme + "' " + dns + "count-theme='" + countTheme + "'><div " + dns + "role='content'></div></div>" )\r
- .parent()\r
- .before( "<div " + dns + "role='header' " + dns + "theme='" + o.headerTheme + "'><div class='ui-title'>" + title + "</div></div>" )\r
- .after( persistentFooterID ? $( "<div " + dns + "role='footer' " + dns + "id='"+ persistentFooterID +"'>" ) : "" )\r
+ parentListId = parentListId || ++listCountPerPage[ parentId ];\r
+\r
+ $( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function ( i ) {\r
+ var self = this,\r
+ list = $( this ),\r
+ listId = list.attr( "id" ) || parentListId + "-" + i,\r
+ parent = list.parent(),\r
+ nodeEls,\r
+ title = nodeEls.first().getEncodedText(),//url limits to first 30 chars of text\r
+ id = ( parentUrl || "" ) + "&" + $.mobile.subPageUrlKey + "=" + listId,\r
+ theme = list.jqmData( "theme" ) || o.theme,\r
+ countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme,\r
+ newPage,\r
+ anchor;\r
+\r
+ nodeEls = $( list.prevAll().toArray().reverse() );\r
+ nodeEls = nodeEls.length ? nodeEls : $( "<span>" + $.trim(parent.contents()[ 0 ].nodeValue) + "</span>" );\r
+\r
+ //define hasSubPages for use in later removal\r
+ hasSubPages = true;\r
+\r
+ newPage = list.detach()\r
+ .wrap( "<div " + dns + "role='page' " + dns + "url='" + id + "' " + dns + "theme='" + theme + "' " + dns + "count-theme='" + countTheme + "'><div " + dns + "role='content'></div></div>" )\r
.parent()\r
- .appendTo( $.mobile.pageContainer );\r
+ .before( "<div " + dns + "role='header' " + dns + "theme='" + o.headerTheme + "'><div class='ui-title'>" + title + "</div></div>" )\r
+ .after( persistentFooterID ? $( "<div " + dns + "role='footer' " + dns + "id='" + persistentFooterID + "'>" ) : "" )\r
+ .parent()\r
+ .appendTo( $.mobile.pageContainer );\r
\r
- newPage.page();\r
+ newPage.page();\r
\r
- anchor = parent.find('a:first');\r
+ anchor = parent.find('a:first');\r
\r
- if ( !anchor.length ) {\r
- anchor = $( "<a/>" ).html( nodeEls || title ).prependTo( parent.empty() );\r
- }\r
+ if ( !anchor.length ) {\r
+
anchor = $( "<a/>" ).html( nodeEls || title ).prependTo( parent.empty() );
\r+ }\r
\r
- anchor.attr( "href", "#" + id );\r
+ anchor.attr( "href", "#" + id );\r
\r
- }).extendablelist();\r
+ }).extendablelist();\r
\r
- // on pagehide, remove any nested pages along with the parent page, as long as they aren't active\r
- // and aren't embedded\r
- if( hasSubPages &&\r
- parentPage.is( ":jqmData(external-page='true')" ) &&\r
- parentPage.data( "page" ).options.domCache === false ) {\r
+ // on pagehide, remove any nested pages along with the parent page, as long as they aren't active\r
+ // and aren't embedded\r
+ if ( hasSubPages &&\r
+ parentPage.is( ":jqmData(external-page='true')" ) &&\r
+ parentPage.data( "page" ).options.domCache === false ) {\r
\r
- var newRemove = function( e, ui ){\r
- var nextPage = ui.nextPage, npURL;\r
+ newRemove = function ( e, ui ) {\r
+ var nextPage = ui.nextPage, npURL;\r
\r
- if( ui.nextPage ){\r
- npURL = nextPage.jqmData( "url" );\r
- if( npURL.indexOf( parentUrl + "&" + $.mobile.subPageUrlKey ) !== 0 ){\r
- self.childPages().remove();\r
- parentPage.remove();\r
+ if ( ui.nextPage ) {\r
+ npURL = nextPage.jqmData( "url" );\r
+ if ( npURL.indexOf( parentUrl + "&" + $.mobile.subPageUrlKey ) !== 0 ) {\r
+ self.childPages().remove();\r
+ parentPage.remove();\r
+ }\r
}\r
- }\r
- };\r
+ };\r
\r
- // unbind the original page remove and replace with our specialized version\r
- parentPage\r
- .unbind( "pagehide.remove" )\r
- .bind( "pagehide.remove", newRemove);\r
- }\r
- },\r
+ // unbind the original page remove and replace with our specialized version\r
+ parentPage\r
+ .unbind( "pagehide.remove" )\r
+ .bind( "pagehide.remove", newRemove);\r
+ }\r
+ },\r
\r
- // TODO sort out a better way to track sub pages of the extendable listview this is brittle\r
- childPages: function(){\r
- var parentUrl = this.parentPage.jqmData( "url" );\r
+ // TODO sort out a better way to track sub pages of the extendable listview this is brittle\r
+ childPages: function () {\r
+ var parentUrl = this.parentPage.jqmData( "url" );\r
\r
- return $( ":jqmData(url^='"+ parentUrl + "&" + $.mobile.subPageUrlKey +"')" );\r
- }\r
-});\r
+ return $( ":jqmData(url^='" + parentUrl + "&" + $.mobile.subPageUrlKey + "')" );\r
+ }\r
+ });\r
\r
-//auto self-init widgets\r
-$( document ).bind( "pagecreate create", function( e ){\r
- $( $.tizen.extendablelist.prototype.options.initSelector, e.target ).extendablelist();\r
-});\r
+ //auto self-init widgets\r
+ $( document ).bind( "pagecreate create", function ( e ) {\r
+ $( $.tizen.extendablelist.prototype.options.initSelector, e.target ).extendablelist();\r
+ });\r
\r
-})( jQuery );\r
+}( jQuery ));\r
projects / framework / web / web-ui-fw.git / blobdiff