The scrollstart event is fired when the user starts scrolling through the grid:
<div data-role="virtualgrid" data-scroll="y" data-template="tizen-demo-namecard"></div>
- // Option 01
- $(".selector").virtualgrid
- ({
- scrollstart: function(event, ui)
- {
- // Handle the scrollstart event
- }
- });
- // Option 02
- $(".selector").bind("scrollstart", function(event, ui)
+ $(".selector").on("scrollstart", function(event, ui)
{
// Handle the scrollstart event
});
The scrollupdate event is fired when the user moves the scroll bar in the grid:
<div data-role="virtualgrid" data-scroll="y" data-template="tizen-demo-namecard"></div>
- // Option 01
- $(".selector").virtualgrid
- ({
- scrollupdate: function(event, ui)
- {
- // Handle the scrollupdate event
- }
- });
- // Option 02
- $(".selector").bind("scrollupdate", function(event, ui)
+ $(".selector").on("scrollupdate", function(event, ui)
{
// Handle the scrollupdate event
});
The scrollstop event is fired when the user stops scrolling:
<div data-role="virtualgrid" data-scroll="y" data-template="tizen-demo-namecard"></div>
- // Option 01
- $(".selector").virtualgrid
- ({
- scrollstop: function(event, ui)
- {
- // Handle the scrollstop event
- }
- });
- // Option 02
- $(".selector").bind("scrollstop", function(event, ui)
+ $(".selector").on("scrollstop", function(event, ui)
{
// Handle the scrollstop event
});
The select event is fired when a virtual grid cell is selected:
<div data-role="virtualgrid" data-scroll="y" data-template="tizen-demo-namecard"></div>
- // Option 01
- $(".selector").virtualgrid
- ({
- select: function(event, ui)
- {
- // Handle the select event
- }
- });
- // Option 02
- $(".selector").bind("select", function(event, ui)
+ $(".selector").on("select", function(event, ui)
{
// Handle the select event
});
},
_initScrollView : function () {
- var self = this;
+ var self = this,
+ oldDirection = self.options.direction;
$.extend( self.options, self._scrollView.options );
+ self.options.direction = oldDirection;
self.options.moveThreshold = 10;
self.options.showScrollBars = false;
self._getScrollHierarchy = self._scrollView._getScrollHierarchy;
<html>
<head>
<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
- <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
data-framework-theme="tizen-white"
data-framework-viewport-scale=false>
</script>
-
<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.2.0/external/qunit.css" />
<script src="../../../libs/js/jquery-mobile-1.2.0/external/qunit.js"></script>
<script src="virtualgrid-tests.js"></script>
</div>
<div data-role="content">
<script id="tizen-demo-namecard" type="text/x-jquery-tmpl">
- <div class="ui-demo-namecard">
+ <div class="ui-demo-namecard ${ID}" style="width:50px">
<div class="ui-demo-namecard-pic">
</div>
<div class="ui-demo-namecard-contents">
</div>
</div>
</script>
- <div id="virtualgrid-test" data-direction="y" data-role="virtualgrid" data-rotation="true" data-template="tizen-demo-namecard" data-dbtable="JSON_DATA" style="width: 500px;height:600px;"></div>
+ <div id="virtualgrid-test" data-direction="y" data-role="virtualgrid" data-rotation="true" data-template="tizen-demo-namecard" data-dbtable="JSON_DATA" style="width:600px; height:500px;"></div>
<script>
$( ".virtualgrid_demo_page" ).live( "pagecreate", function() {
console.log("pagecreate...");
- $.getScript( "../../../demos/tizen-winsets/widgets/grid/js/virtualgrid-db-demo.js", function( data, textStatus ) {
+ $.getScript( "../../../demos/tizen-winsets/widgets/grid/virtualgrid-db-demo.js", function( data, textStatus ) {
$(document).trigger("dataloaded");
});
});
/*jslint browser: true*/
/*global $, jQuery, test, equal, ok, JSON_DATA, notEqual*/
( function ( $ ) {
- module("Virtualgrid" );
+ module( "Virtualgrid" );
- var unit_virtualgrid = function ( widget, type ) {
- var virtualGrid,
+ var startVirtualGridTest = function ( virtualGrid ) {
+ var $vgView,
+ $vgScrollView,
+ $vgWrapBlocks,
+ $vgTmplElement,
+ vgOptions = $( "#virtualgrid-test" ).virtualgrid( "option" ),
+ vgHeight,
idx,
- index = 0,
- $items,
- $item;
+ index = -1,
+ $item,
+ prevColCnt = 0;
- /* Create */
- virtualGrid = widget.virtualgrid( "create" , {
- itemData : function ( idx ) {
- return JSON_DATA[ idx ];
- },
- numItemData : JSON_DATA.length,
- cacheItemData : function ( minIdx, maxIdx ) { }
- } );
- ok( virtualGrid, "Create" );
+ $vgView = $( ".ui-virtualgrid-view" );
+ $vgScrollView = $vgView.find( ".ui-scrollview-view" );
+ $vgWrapBlocks = $vgView.find( ".ui-virtualgrid-wrapblock-y" );
+ $vgTmplElement = $vgWrapBlocks.find( ".ui-demo-namecard-pic" );
+ vgHeight = $vgView.css( "height" ),
- $(".virtualgrid_demo_page" ).bind("select", function ( event ) {
- ok( true, "Event : select" );
- } );
+ test( "Virtualgrid", function () {
+ $vgView.on( "select", function ( event ) {
+ ok( true, "Event : select" );
+ });
- $(".virtualgrid_demo_page" ).bind("test.resize", function ( event ) {
- var prevColCnt = 0 ;
- $item = $(".ui-virtualgrid-wrapblock-y:first" );
- prevColCnt = $item.children( ).length;
- $("#virtualgrid-test" ).css("width", "1500px" );
- widget.virtualgrid("resize" );
- $item = $(".ui-virtualgrid-wrapblock-y:first" );
- notEqual( $item.children( ).length, prevColCnt, "Event : resize" );
- } );
+ ok( $vgView, "Markup : View element" );
+ ok( parseInt( vgHeight, 10 ) > 100, "Markup : The height of a view element");
+ ok( $vgScrollView.length, "Markup : A Scrollview inside VirtualGrid" );
+ ok( $vgWrapBlocks.length > 10, "Markup : Wrap block" );
+ ok( $vgWrapBlocks.first().children().length > 1, "Markup : Children nodes of a wrap block");
+ ok( $vgTmplElement.length, "Markup : A div element created via template");
- $( $(".virtualgrid_demo_page" ).find(".ui-scrollview-view" ) ).find(".ui-virtualgrid-wrapblock-y:first" ).addClass("center" );
- widget.virtualgrid("centerTo", "center" );
- $items = $( $(".virtualgrid_demo_page" ).find(".ui-scrollview-view" ) ).find(".ui-virtualgrid-wrapblock-y" );
- for ( idx = 0 ; idx < $items.length ; idx += 1 ) {
- if ( $( $items[idx] ).hasClass("center" ) ) {
- index = idx;
- break;
- }
- }
+ equal( vgOptions.template, "tizen-demo-namecard", "Option : template" );
+ equal( vgOptions.direction, "y", "Option : direction" );
+ equal( vgOptions.rotation, true, "Option : rotation" );
+ equal( virtualGrid.jqmData("dbtable"), "JSON_DATA", "jqmData : dbtable" );
- notEqual( index, 0, "API : centerTo" );
+ $( "#virtualgrid-test" ).virtualgrid( "centerTo", "card_0009" );
+ for ( idx = 0 ; idx < $vgWrapBlocks.length ; ++idx ) {
+ if ( $( $vgWrapBlocks[idx] ).hasClass( "card_0000" ) ) {
+ index = idx;
+ break;
+ }
+ }
- $item = $( $(".ui-virtualgrid-wrapblock-y:first" ).children( )[0] );
- $item.trigger("click" );
- $item.trigger("test.resize" );
+ ok( virtualGrid, "Method : create" );
+ notEqual( index, 0, "Method : centerTo" );
- /*jqmData*/
- equal( widget.jqmData('direction'), 'y', "jqmData : direction" ) ;
- equal( widget.jqmData('rotation'), true, "jqmData : rotation" ) ;
- equal( widget.jqmData('template'), 'tizen-demo-namecard', "jqmData : template" ) ;
- equal( widget.jqmData('dbtable'), 'JSON_DATA', "jqmData : dbtable" ) ;
+ $item = $vgWrapBlocks.first();
+ prevColCnt = $item.children().length;
+ $( "#virtualgrid-test" ).width( 250 );
+ $( "#virtualgrid-test" ).virtualgrid( "resize" );
+ console.log( "resize : " + $item.children().length + ", " + prevColCnt );
+ notEqual( $item.children().length, prevColCnt, "Method : resize" );
+ $item = $( $vgWrapBlocks.first().children()[0] );
+ $item.trigger( "click" );
+ });
};
- $( document ).bind("dataloaded" , function ( ) {
- test( "Virtualgrid", function ( ) {
- unit_virtualgrid( $("#virtualgrid-test" ), "virtualgrid" );
- } );
- } );
-} ( jQuery ) );
+ $( document ).bind( "dataloaded" , function () {
+ var virtualGrid = $( "#virtualgrid-test" ).virtualgrid( "create" , {
+ itemData: function ( idx ) {
+ return JSON_DATA[ idx ];
+ },
+ numItemData: JSON_DATA.length,
+ cacheItemData: function ( minIdx, maxIdx ) { }
+ });
+
+ startVirtualGridTest( virtualGrid );
+ });
+}( jQuery ));
</div>
<div data-role="content">
<script id="tizen-demo-namecard" type="text/x-jquery-tmpl">
- <div class="ui-demo-namecard">
+ <div class="ui-demo-namecard ${ID}" style="width:50px">
<div class="ui-demo-namecard-pic">
</div>
<div class="ui-demo-namecard-contents">
</div>
</div>
</script>
- <div id="virtualgrid-test" data-direction="y" data-role="virtualgrid" data-rotation="true" data-template="tizen-demo-namecard" data-dbtable="JSON_DATA" style="width: 500px;height:600px;"></div>
+ <div id="virtualgrid-test" data-direction="y" data-role="virtualgrid" data-rotation="true" data-template="tizen-demo-namecard" data-dbtable="JSON_DATA" style="width:600px; height:500px;"></div>
<script>
$( ".virtualgrid_demo_page" ).live( "pagecreate", function() {
console.log("pagecreate...");
- $.getScript( "../../../demos/tizen-winsets/widgets/grid/js/virtualgrid-db-demo.js", function( data, textStatus ) {
+ $.getScript( "../../../demos/tizen-winsets/widgets/grid/virtualgrid-db-demo.js", function( data, textStatus ) {
$(document).trigger("dataloaded");
});
});
* Unit Test: virtual grid
*
* Kangsik Kim <kangsik81.kim@samsung.com>
+ * Woosung Sohn <woosungim.sohn@samsung.com>
*/
-(function ($) {
- module("Virtualgrid");
+( function ( $ ) {
+ module( "Virtualgrid" );
- var unit_virtualgrid = function ( widget, type ) {
- var virtualGrid,
+ var startVirtualGridTest = function ( virtualGrid ) {
+ var $vgView,
+ $vgScrollView,
+ $vgWrapBlocks,
+ $vgTmplElement,
+ vgOptions = $( "#virtualgrid-test" ).virtualgrid( "option" ),
+ vgHeight,
idx,
- index = 0,
- $items,
- $item;
+ index = -1,
+ $item,
+ prevColCnt = 0;
- /* Create */
- virtualGrid = widget.virtualgrid("create" , {
- itemData: function ( idx ) {
- return JSON_DATA[ idx ];
- },
- numItemData: JSON_DATA.length,
- cacheItemData: function ( minIdx, maxIdx ) { }
- });
- ok(virtualGrid, "Create");
+ $vgView = $( ".ui-virtualgrid-view" );
+ $vgScrollView = $vgView.find( ".ui-scrollview-view" );
+ $vgWrapBlocks = $vgView.find( ".ui-virtualgrid-wrapblock-y" );
+ $vgTmplElement = $vgWrapBlocks.find( ".ui-demo-namecard-pic" );
+ vgHeight = $vgView.css( "height" ),
- $(".virtualgrid_demo_page").bind("select", function ( event ) {
- ok(true, "Event : select");
- });
+ test( "Virtualgrid", function () {
+ $vgView.on( "select", function ( event ) {
+ ok( true, "Event : select" );
+ });
- $(".virtualgrid_demo_page").bind("test.resize", function ( event ) {
- var prevColCnt = 0;
+ ok( $vgView, "Markup : View element" );
+ ok( parseInt( vgHeight, 10 ) > 100, "Markup : The height of a view element");
+ ok( $vgScrollView.length, "Markup : A Scrollview inside VirtualGrid" );
+ ok( $vgWrapBlocks.length > 10, "Markup : Wrap block" );
+ ok( $vgWrapBlocks.first().children().length > 1, "Markup : Children nodes of a wrap block");
+ ok( $vgTmplElement.length, "Markup : A div element created via template");
- $item = $(".ui-virtualgrid-wrapblock-y:first");
- prevColCnt = $item.children().length;
- $("#virtualgrid-test").css("width", "1500px");
- widget.virtualgrid("resize");
- $item = $(".ui-virtualgrid-wrapblock-y:first");
- notEqual( $item.children().length, prevColCnt, "Event : resize");
- });
+ equal( vgOptions.template, "tizen-demo-namecard", "Option : template" );
+ equal( vgOptions.direction, "y", "Option : direction" );
+ equal( vgOptions.rotation, true, "Option : rotation" );
- $($(".virtualgrid_demo_page").find(".ui-scrollview-view")).find(".ui-virtualgrid-wrapblock-y:first").addClass("center");
- widget.virtualgrid("centerTo", "center");
- $items = $($(".virtualgrid_demo_page").find(".ui-scrollview-view")).find(".ui-virtualgrid-wrapblock-y");
- for ( idx = 0 ; idx < $items.length ; idx += 1 ) {
- if ( $($items[idx]).hasClass("center") ) {
- index = idx;
- break;
+ $( "#virtualgrid-test" ).virtualgrid( "centerTo", "card_0009" );
+ for ( idx = 0 ; idx < $vgWrapBlocks.length ; ++idx ) {
+ if ( $( $vgWrapBlocks[idx] ).hasClass( "card_0000" ) ) {
+ index = idx;
+ break;
+ }
}
- }
- notEqual( index, 0, "API : centerTo");
+ ok( virtualGrid, "Method : create" );
+ notEqual( index, 0, "Method : centerTo" );
- $item = $($(".ui-virtualgrid-wrapblock-y:first").children()[0]);
- $item.trigger("click");
- $item.trigger("test.resize");
+ $item = $vgWrapBlocks.first();
+ prevColCnt = $item.children().length;
+ $( "#virtualgrid-test" ).width( 250 );
+ $( "#virtualgrid-test" ).virtualgrid( "resize" );
+ console.log( "resize : " + $item.children().length + ", " + prevColCnt );
+ notEqual( $item.children().length, prevColCnt, "Method : resize" );
+
+ $item = $( $vgWrapBlocks.first().children()[0] );
+ $item.trigger( "click" );
+ });
};
- $(document).bind("dataloaded" , function () {
- test( "Virtualgrid", function () {
- unit_virtualgrid( $("#virtualgrid-test"), "virtualgrid" );
+ $( document ).bind( "dataloaded" , function () {
+ var virtualGrid = $( "#virtualgrid-test" ).virtualgrid( "create" , {
+ itemData: function ( idx ) {
+ return JSON_DATA[ idx ];
+ },
+ numItemData: JSON_DATA.length,
+ cacheItemData: function ( minIdx, maxIdx ) { }
});
+
+ startVirtualGridTest( virtualGrid );
});
}( jQuery ));
projects / platform / framework / web / web-ui-fw.git / commitdiff