demos/tizen-winsets/main.js

   1 $( document ).bind("pagecreate", function () {
   2         /* Color widget demo */
   3         $("input[type='checkbox'][data-widget-type-list]").bind("change", function() {
   4                 var ls = $( this ).attr("data-widget-type-list").split(","),
   5                         page = $( this ).closest(":jqmData(role='page')"),
   6                         disabled = $( this ).is(":checked");
   7
   8                 $.each(ls, function( idx, widgetType ) {
   9                         var ar = widgetType.split("-");
  10
  11                         if ( ar.length === 2 ) {
  12                                 page.find(":" + widgetType)[ar[1]]( "option", "disabled", disabled );
  13                         }
  14                 });
  15         });
  16
  17         $('#scroller-demo').bind('pageshow', function ( e ) {
  18                 $page = $( e.target );
  19                 /*
  20                  * many options cannot be set without subclassing since they're
  21                  * used in the _create method - it seems as if these are for
  22                  * internal use only and scrollDuration is only changable by
  23                  * chance.
  24                  */
  25                 var $scroller2List = $('#scroller2').find('ul');
  26                 $scroller2List.scrollview( 'option','scrollDuration','10000' );
  27
  28                 // only works by manipulating css
  29                 // the only other way is to use attribute 'scroll-method="scroll"' in html
  30                 $('#scroller2 .ui-scrollbar').css( 'visibility','hidden' );
  31
  32                 /*
  33                  * make toggle button switch scroll bars on and off
  34                  */
  35                 var scrollBarVisible = $('#scroller2').find('.ui-scrollbar').css('visibility') === "visible";
  36
  37                 var $toggleScrollBars = $('#toggleScrollBars');
  38                 $toggleScrollBars.attr( "checked", scrollBarVisible ).checkboxradio("refresh");
  39
  40                 /* the 'label' is the thing that is clicked, not the input element */
  41                 var $label = $toggleScrollBars.siblings('label').attr( 'for', '#toggleScrollBars' );
  42                 $label.bind("click", function () {
  43                         var $scrollBar = $('#scroller2').find('.ui-scrollbar');
  44                         var scrollBarVisible = $scrollBar.css('visibility') === "visible";
  45                         var newVisibility = scrollBarVisible ? "hidden" : "visible";
  46                         $scrollBar.css( 'visibility', scrollBarVisible ? "hidden" : "visible" );
  47                 });
  48         });
  49
  50         $("#demo-date").bind("date-changed", function ( e, newDate ) {
  51                 $("#selected-date1").text( newDate.toString() );
  52         });
  53
  54         $("#demo-date2").bind("date-changed", function ( e, newDate ) {
  55                 $("#selected-date2").text( newDate.toString() );
  56         });
  57
  58         $("#demo-date3").bind("date-changed", function ( e, newDate ) {
  59                 $("#selected-date3").text( newDate.toString() );
  60         });
  61
  62         $("#demo-date4").bind("date-changed", function ( e, newDate ) {
  63                 $("#selected-date4").text( newDate.toString() );
  64         });
  65
  66         $('#noti-demo').bind('vmouseup', function ( e ) {
  67                 $('#notification').notification('open');
  68         });
  69
  70         $('#noti-icon1').bind('vclick', function ( e ) {
  71                 $('#notification').notification('icon', './test/icon02.png');
  72         });
  73
  74         $('#noti-icon2').bind('vclick', function ( e ) {
  75                 $('#notification').notification('icon', './test/icon01.png');
  76         });
  77
  78         $('#imageslider-add').bind('vmouseup', function ( e ) {
  79                 $('#imageslider').imageslider('add', './test/10.jpg');
  80                 $('#imageslider').imageslider('add', './test/11.jpg');
  81                 $('#imageslider').imageslider('refresh');
  82         });
  83
  84         $('#imageslider-del').bind('vmouseup', function ( e ) {
  85                 $('#imageslider').imageslider('remove');
  86         });
  87
  88         $('#selectioninfo-demo').bind('vmouseup', function ( e ) {
  89                 $('#smallpopup_selectioninfo').notification( "text",
  90                         $("#dayselector1").find(".ui-checkbox-on").length + " items are selected" );
  91                 $('#smallpopup_selectioninfo').notification('open');
  92         });
  93
  94         $('#groupindex-demo').bind('pageshow', function () {
  95                 $('#groupindex').scrolllistview();
  96         });
  97
  98         $("#showVolumeButton").bind("vclick", function ( e ) {
  99                 $("#myVolumeControl").volumecontrol("open");
 100         });
 101
 102         $("#volumecontrol_setBasicTone").bind("change", function ( e ) {
 103                 var basicTone = !($("#volumecontrol_setBasicTone").next('label')
 104                                 .find(".ui-icon").hasClass("ui-icon-checkbox-on"));
 105
 106                 if ( basicTone ) {
 107                         $("#myVolumeControl").volumecontrol( "option", "basicTone", true );
 108                         $("#myVolumeControl").volumecontrol( "option", "title", "Basic Tone" );
 109                 } else {
 110                         $("#myVolumeControl").volumecontrol( "option", "basicTone", false );
 111                         $("#myVolumeControl").volumecontrol( "option", "title", "Volume" );
 112                 }
 113         });
 114
 115         $("#myoptionheader").bind('collapse', function () {
 116                 console.log('option header was collapsed');
 117         });
 118
 119         $("#myoptionheader").bind('expand', function () {
 120                 console.log('option header was expanded');
 121         });
 122
 123         //day-selector codes...
 124         $("#day-selector-check-all").live('vclick', function () {
 125                 $("#dayselector1").dayselector('selectAll');
 126         });
 127
 128         $("#day-selector-get-days").live('vclick', function () {
 129                 var valuesStr = $("#dayselector1").dayselector('value').join(', ');
 130                 $(".selectedDay").text( valuesStr );
 131         });
 132
 133         /* Gen list : Dummy DB load */
 134         $(".virtuallist_demo_page").live("pagecreate", function () {
 135                 /* ?_=ts code for no cache mechanism */
 136                 $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
 137                         $("ul").filter( function () {
 138                                 return $( this ).data("role") == "virtuallistview";
 139                         }).addClass("vlLoadSuccess");
 140
 141                         $(".virtuallist_demo_page").die();
 142                         $("ul.ui-virtual-list-container").virtuallistview("create");
 143                 });
 144         });
 145
 146         /*Expandable list : Dummy DB load*/
 147         $("#genlist_extendable_page").live("pagecreate", function ( el ) {
 148                 /*?_=ts code for no cache mechanism*/
 149                 $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
 150                         $("ul").filter( function () {
 151                                 return $( this ).data("role") == "extendablelist";
 152                         }).addClass("elLoadSuccess");
 153
 154                         $("#genlist-extendable-page").die();
 155                         $("ul.ui-extendable-list-container").extendablelist("create");
 156                         // TODO: 'create' is called twice!!
 157                 });
 158         });
 159 });
 160
 161 $(document).ready( function () {
 162         // add current datetime with browser language format
 163         // NOTE: Globalize.* functions must be run after docoument ready.
 164         $('#current_date').html(Globalize.culture().name + " -- " +
 165                                 Globalize.format( new Date(), "F" ));
 166         $('#html_font_size').html('html font size:' + $('html').css('font-size'));
 167 });