demos/tizen-gray/init.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         $('#notification-demo').bind('vmouseup', function ( e ) {
  71                 $('#notification').notification('show');
  72         });
  73
  74         $('#notification-demo').bind('tapped', function ( e, m ) {
  75                 /* DO SOMETHING */
  76                 alert('notification is tapped\nparameter:"' + m + '"');
  77         });
  78
  79         $('#imageslider-add').bind('vmouseup', function ( e ) {
  80                 $('#imageslider').imageslider('add', './test/10.jpg');
  81                 $('#imageslider').imageslider('add', './test/11.jpg');
  82                 $('#imageslider').imageslider('refresh');
  83         });
  84
  85         $('#imageslider-del').bind('vmouseup', function ( e ) {
  86                 $('#imageslider').imageslider('del');
  87         });
  88
  89         $('#selectioninfo-demo').bind('vmouseup', function ( e ) {
  90                 $('#smallpopup_selectioninfo').attr("data-text1",
  91                         $("#dayselector1").find(".ui-checkbox-on").length + " items are selected");
  92                 $('#smallpopup_selectioninfo').notification('show');
  93         });
  94
  95         $('#groupindex-demo').bind('pageshow', function () {
  96                 $('#groupindex').scrolllistview();
  97         });
  98
  99         $("#showVolumeButton").bind("vclick", function ( e ) {
 100                 $("#myVolumeControl").volumecontrol("open");
 101         });
 102
 103         $("#volumecontrol_setBasicTone").bind("change", function ( e ) {
 104                 var basicTone = !($("#volumecontrol_setBasicTone").next('label')
 105                                 .find(".ui-icon").hasClass("ui-icon-checkbox-on"));
 106
 107                 if ( basicTone ) {
 108                         $("#myVolumeControl").volumecontrol( "option", "basicTone", true );
 109                         $("#myVolumeControl").volumecontrol( "option", "title", "Basic Tone" );
 110                 } else {
 111                         $("#myVolumeControl").volumecontrol( "option", "basicTone", false );
 112                         $("#myVolumeControl").volumecontrol( "option", "title", "Volume" );
 113                 }
 114         });
 115
 116         $("#myoptionheader").bind('collapse', function () {
 117                 console.log('option header was collapsed');
 118         });
 119
 120         $("#myoptionheader").bind('expand', function () {
 121                 console.log('option header was expanded');
 122         });
 123
 124         //day-selector codes...
 125         $("#day-selector-check-all").live('vclick', function () {
 126                 $("#dayselector1").dayselector('selectAll');
 127         });
 128
 129         $("#day-selector-get-days").live('vclick', function () {
 130                 var valuesStr = $("#dayselector1").dayselector('value').join(', ');
 131                 $(".selectedDay").text( valuesStr );
 132         });
 133
 134         /* Gen list : Dummy DB load */
 135         $(".virtuallist_demo_page").live("pagecreate", function () {
 136                 /* ?_=ts code for no cache mechanism */
 137                 $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
 138                         $("ul").filter( function () {
 139                                 return $( this ).data("role") == "virtuallistview";
 140                         }).addClass("vlLoadSuccess");
 141
 142                         $(".virtuallist_demo_page").die();
 143                         $("ul.ui-virtual-list-container").virtuallistview("create");
 144                 });
 145         });
 146
 147         /*Expandable list : Dummy DB load*/
 148         $("#genlist_extendable_page").live("pagecreate", function () {
 149                 /*?_=ts code for no cache mechanism*/
 150                 $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
 151                         $("ul").filter( function () {
 152                                 return $( this ).data("role") == "extendablelist";
 153                         }).addClass("vlLoadSuccess");
 154
 155                         $("#genlist-extendable-page").die();
 156                         $("ul.ui-extendable-list-container").extendablelist("create");
 157                 });
 158         });
 159
 160         /* Color widget demo */
 161         var clrWidgetsAreInit = false;
 162         $("#colorwidgets-demo").bind("pageshow", function () {
 163                 if ( clrWidgetsAreInit ) {
 164                         return;
 165                 }
 166
 167                 $("#colorpicker").bind("colorchanged", function ( e, clr ) {
 168                         $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
 169                         $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
 170                         $("#hsvpicker").hsvpicker( "option", "color", clr );
 171                         $("#colortitle").colortitle( "option", "color", clr );
 172                         $("#colorpalette").colorpalette( "option", "color", clr );
 173                 });
 174
 175                 $("#colorpickerbutton").bind("colorchanged", function ( e, clr ) {
 176                         $("#colorpicker").colorpicker( "option", "color", clr );
 177                         $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
 178                         $("#hsvpicker").hsvpicker( "option", "color", clr );
 179                         $("#colortitle").colortitle( "option", "color", clr );
 180                         $("#colorpalette").colorpalette( "option", "color", clr );
 181                 });
 182
 183                 $("#colorpickerbutton-noform").bind("colorchanged", function ( e, clr ) {
 184                         $("#colorpicker").colorpicker( "option", "color", clr );
 185                         $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
 186                         $("#hsvpicker").hsvpicker( "option", "color", clr );
 187                         $("#colortitle").colortitle( "option", "color", clr );
 188                         $("#colorpalette").colorpalette( "option", "color", clr );
 189                 });
 190
 191                 $("#hsvpicker").bind("colorchanged", function ( e, clr ) {
 192                         $("#colorpicker").colorpicker( "option", "color", clr );
 193                         $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
 194                         $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
 195                         $("#colortitle").colortitle( "option", "color", clr );
 196                         $("#colorpalette").colorpalette( "option", "color", clr );
 197                 });
 198
 199                 $("#colortitle").bind("colorchanged", function ( e, clr ) {
 200                         $("#colorpicker").colorpicker( "option", "color", clr );
 201                         $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
 202                         $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
 203                         $("#hsvpicker").hsvpicker( "option", "color", clr );
 204                         $("#colorpalette").colorpalette( "option", "color", clr );
 205                 });
 206
 207                 $("#colorpalette").bind("colorchanged", function ( e, clr ) {
 208                         $("#colorpicker").colorpicker( "option", "color", clr );
 209                         $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
 210                         $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
 211                         $("#hsvpicker").hsvpicker( "option", "color", clr );
 212                         $("#colortitle").colortitle( "option", "color", clr );
 213                 });
 214
 215                 $("#colorpalette").colorpalette("option", "color", "#45cc98");
 216
 217                 clrWidgetsAreInit = true;
 218         });
 219 });
 220
 221 $( document ).bind("pagecreate", function () {
 222         var button = $('#calendarbutton');
 223
 224         button.bind('vclick', function ( e ) {
 225                 button.calendarpicker('open');
 226                 button.unbind('selectedDate').bind('selectedDate', function ( e,val ) {
 227                         $('#selectedCalendarDate').attr('value',val);
 228                 });
 229         });
 230 });
 231
 232 domReady( function () {
 233         // add current datetime with browser language format
 234         // NOTE: Globalize.* functions must be run after domReady.
 235         $('#current_date').html(Globalize.culture().name + " -- " +
 236                                 Globalize.format( new Date(), "F" ));
 237 });