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         $("#checkHideInput").bind("change", function (e) {
  18         $("#colorpickerbutton").colorpickerbutton("option", "hideInput", $("#checkHideInput").is(":checked"));
  19     });
  20
  21         $('#scroller-demo').bind('pageshow', function ( e ) {
  22                 $page = $( e.target );
  23                 /*
  24                  * many options cannot be set without subclassing since they're
  25                  * used in the _create method - it seems as if these are for
  26                  * internal use only and scrollDuration is only changable by
  27                  * chance.
  28                  */
  29                 var $scroller2List = $('#scroller2').find('ul');
  30                 $scroller2List.scrollview( 'option','scrollDuration','10000' );
  31
  32                 // only works by manipulating css
  33                 // the only other way is to use attribute 'scroll-method="scroll"' in html
  34                 $('#scroller2 .ui-scrollbar').css( 'visibility','hidden' );
  35
  36                 /*
  37                  * make toggle button switch scroll bars on and off
  38                  */
  39                 var scrollBarVisible = $('#scroller2').find('.ui-scrollbar').css('visibility') === "visible";
  40
  41                 var $toggleScrollBars = $('#toggleScrollBars');
  42                 $toggleScrollBars.attr( "checked", scrollBarVisible ).checkboxradio("refresh");
  43
  44                 /* the 'label' is the thing that is clicked, not the input element */
  45                 var $label = $toggleScrollBars.siblings('label').attr( 'for', '#toggleScrollBars' );
  46                 $label.bind("click", function () {
  47                         var $scrollBar = $('#scroller2').find('.ui-scrollbar');
  48                         var scrollBarVisible = $scrollBar.css('visibility') === "visible";
  49                         var newVisibility = scrollBarVisible ? "hidden" : "visible";
  50                         $scrollBar.css( 'visibility', scrollBarVisible ? "hidden" : "visible" );
  51                 });
  52         });
  53
  54         $("#demo-date").bind("date-changed", function ( e, newDate ) {
  55                 $("#selected-date1").text( newDate.toString() );
  56         });
  57
  58         $("#demo-date2").bind("date-changed", function ( e, newDate ) {
  59                 $("#selected-date2").text( newDate.toString() );
  60         });
  61
  62         $("#demo-date3").bind("date-changed", function ( e, newDate ) {
  63                 $("#selected-date3").text( newDate.toString() );
  64         });
  65
  66         $("#demo-date4").bind("date-changed", function ( e, newDate ) {
  67                 $("#selected-date4").text( newDate.toString() );
  68         });
  69
  70         $('#noti-demo').bind('vmouseup', function ( e ) {
  71                 $('#notification').notification('open');
  72         });
  73
  74         $('#noti-icon1').bind('vclick', function ( e ) {
  75                 $('#notification').notification('icon', './test/icon02.png');
  76         });
  77
  78         $('#noti-icon2').bind('vclick', function ( e ) {
  79                 $('#notification').notification('icon', './test/icon01.png');
  80         });
  81
  82         $('#imageslider-add').bind('vmouseup', function ( e ) {
  83                 $('#imageslider').imageslider('add', './test/10.jpg');
  84                 $('#imageslider').imageslider('add', './test/11.jpg');
  85                 $('#imageslider').imageslider('refresh');
  86         });
  87
  88         $('#imageslider-del').bind('vmouseup', function ( e ) {
  89                 $('#imageslider').imageslider('remove');
  90         });
  91
  92         $('#selectioninfo-demo').bind('vmouseup', function ( e ) {
  93                 $('#smallpopup_selectioninfo').notification( "text",
  94                         $("#dayselector1").find(".ui-checkbox-on").length + " items are selected" );
  95                 $('#smallpopup_selectioninfo').notification('open');
  96         });
  97
  98         $('#groupindex-demo').bind('pageshow', function () {
  99                 $('#groupindex').scrolllistview();
 100         });
 101
 102         $("#showVolumeButton").bind("vclick", function ( e ) {
 103                 $("#myVolumeControl").volumecontrol("open");
 104         });
 105
 106         $("#volumecontrol_setBasicTone").bind("change", function ( e ) {
 107                 var basicTone = !($("#volumecontrol_setBasicTone").next('label')
 108                                 .find(".ui-icon").hasClass("ui-icon-checkbox-on"));
 109
 110                 if ( basicTone ) {
 111                         $("#myVolumeControl").volumecontrol( "option", "basicTone", true );
 112                         $("#myVolumeControl").volumecontrol( "option", "title", "Basic Tone" );
 113                 } else {
 114                         $("#myVolumeControl").volumecontrol( "option", "basicTone", false );
 115                         $("#myVolumeControl").volumecontrol( "option", "title", "Volume" );
 116                 }
 117         });
 118
 119         $("#myoptionheader").bind('collapse', function () {
 120                 console.log('option header was collapsed');
 121         });
 122
 123         $("#myoptionheader").bind('expand', function () {
 124                 console.log('option header was expanded');
 125         });
 126
 127         //day-selector codes...
 128         $("#day-selector-check-all").live('vclick', function () {
 129                 $("#dayselector1").dayselector('selectAll');
 130         });
 131
 132         $("#day-selector-get-days").live('vclick', function () {
 133                 var valuesStr = $("#dayselector1").dayselector('value').join(', ');
 134                 $(".selectedDay").text( valuesStr );
 135         });
 136
 137         /* Gen list : Dummy DB load */
 138         $(".virtuallist_demo_page").live("pagecreate", function () {
 139                 /* ?_=ts code for no cache mechanism */
 140                 $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
 141                         $("ul").filter( function () {
 142                                 return $( this ).data("role") == "virtuallistview";
 143                         }).addClass("vlLoadSuccess");
 144
 145                         $(".virtuallist_demo_page").die();
 146                         $("ul.ui-virtual-list-container").virtuallistview("create");
 147                 });
 148         });
 149
 150         /*Expandable list : Dummy DB load*/
 151         $("#genlist_extendable_page").live("pagecreate", function ( el ) {
 152                 /*?_=ts code for no cache mechanism*/
 153                 $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
 154                         $("ul").filter( function () {
 155                                 return $( this ).data("role") == "extendablelist";
 156                         }).addClass("elLoadSuccess");
 157
 158                         $("#genlist-extendable-page").die();
 159                         $("ul.ui-extendable-list-container").extendablelist("create");
 160                         // TODO: 'create' is called twice!!
 161                 });
 162         });
 163
 164         /* Color widget demo */
 165         var clrWidgetsAreInit = false;
 166         $("#colorwidgets-demo").bind("pageshow", function () {
 167                 if ( clrWidgetsAreInit ) {
 168                         return;
 169                 }
 170
 171                 $("#colorpicker").bind("colorchanged", function ( e, clr ) {
 172                         $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
 173                         $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
 174                         $("#hsvpicker").hsvpicker( "option", "color", clr );
 175                         $("#colortitle").colortitle( "option", "color", clr );
 176                         $("#colorpalette").colorpalette( "option", "color", clr );
 177                 });
 178
 179                 $("#colorpickerbutton").bind("colorchanged", function ( e, clr ) {
 180                         $("#colorpicker").colorpicker( "option", "color", clr );
 181                         $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
 182                         $("#hsvpicker").hsvpicker( "option", "color", clr );
 183                         $("#colortitle").colortitle( "option", "color", clr );
 184                         $("#colorpalette").colorpalette( "option", "color", clr );
 185                 });
 186
 187                 $("#colorpickerbutton-noform").bind("colorchanged", function ( e, clr ) {
 188                         $("#colorpicker").colorpicker( "option", "color", clr );
 189                         $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
 190                         $("#hsvpicker").hsvpicker( "option", "color", clr );
 191                         $("#colortitle").colortitle( "option", "color", clr );
 192                         $("#colorpalette").colorpalette( "option", "color", clr );
 193                 });
 194
 195                 $("#hsvpicker").bind("colorchanged", function ( e, clr ) {
 196                         $("#colorpicker").colorpicker( "option", "color", clr );
 197                         $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
 198                         $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
 199                         $("#colortitle").colortitle( "option", "color", clr );
 200                         $("#colorpalette").colorpalette( "option", "color", clr );
 201                 });
 202
 203                 $("#colortitle").bind("colorchanged", function ( e, clr ) {
 204                         $("#colorpicker").colorpicker( "option", "color", clr );
 205                         $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
 206                         $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
 207                         $("#hsvpicker").hsvpicker( "option", "color", clr );
 208                         $("#colorpalette").colorpalette( "option", "color", clr );
 209                 });
 210
 211                 $("#colorpalette").bind("colorchanged", function ( e, clr ) {
 212                         $("#colorpicker").colorpicker( "option", "color", clr );
 213                         $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
 214                         $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
 215                         $("#hsvpicker").hsvpicker( "option", "color", clr );
 216                         $("#colortitle").colortitle( "option", "color", clr );
 217                 });
 218
 219                 $("#colorpalette").colorpalette("option", "color", "#45cc98");
 220
 221                 clrWidgetsAreInit = true;
 222         });
 223 });
 224
 225 $(document).ready( function () {
 226         // add current datetime with browser language format
 227         // NOTE: Globalize.* functions must be run after docoument ready.
 228         $('#current_date').html(Globalize.culture().name + " -- " +
 229                                 Globalize.format( new Date(), "F" ));
 230         $('#html_font_size').html('html font size:' + $('html').css('font-size'));
 231 });