JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
	

<div data-role="view" data-title="" id="main-report" data-init="reportView.show">
            <div id="reportType"></div>
            <div id="reportContainer" data-role="scroller">
                
                <div id="summaryDisplay" data-role="touch" data-enable-swipe="1" data-swipe="reportView.swipe">
                    
                </div>
                <div id="reportTextDisplay" style="display:none" data-role="touch" data-enable-swipe="1" data-swipe="reportView.swipe" >
                    
                    
                </div>
            </div>
        </div>

CSS

<style>
			div.contentPageHeader
			{
				color: rgb(236, 32, 40);
			}
            #reportContainer
            {
				position: absolute;
                padding: 10px;
				top: 20px;
				left: 5%;
				width: 85%;
				height: 300px;
				background-color: #5EA491;
				color: #FFFFFF;   /* rgb(0, 111, 81); */
				-moz-border-radius: 5px;
				border-radius: 5px;
            }
            .contentPageContainer
            {
                -webkit-box-sizing: border-box;
            }
		</style>

JavaScript

var reportView=function(){
    
    var thisView;
  
    var viewModel=new kendo.observable({
        
        reportText:longContent     
        
    });
  
  return {
    viewModel:viewModel,
    show: function(){
      var shortContent = "";
      shortContent += 'A rather short text which should not fill the complete dialog. Disable this line and enable the next time or vice versa';
      
      $('#summaryDisplay').html(shortContent);
      $('#reportTextDisplay').html(longContent);
    }
    ,
      swipe:function(e){
            
             
            var isSummaryVisible = $("#summaryDisplay").is(":visible");
            //thisView.scroller.reset();
            var scroller = $("#reportContainer").data("kendoMobileScroller");
          console.log($("#reportContainer").data());
     // $("#reportContainer").data().kendoMobileView.scroller.movable.moveTo({ x: 0, y: 100 });
          scroller.scrollTo(0,-100);
           // $("#reportContainer").animate({scrollTop : 100 });
           console.log('isSummaryVisible',isSummaryVisible);
            if (isSummaryVisible==true){
                if (e.direction=='left'){
                    console.log('show report',e);  
                    $("#reportTextDisplay").show();
                    $("#summaryDisplay").hide();
                   // $('#reportContainer').scrollTo('#reportTextDisplay');
                    console.log($('.km-content:visible').data('kendoMobileScroller'));
                   // $('.km-content:visible').data('kendoMobileScroller').reset();
                }
            }
            else
            {
                if (e.direction=='right'){
                    console.log('show summary',e);  
                    $("#summaryDisplay").show();
                    $("#reportTextDisplay").hide();
                    //$('#reportContainer').scrollTo('#summaryDisplay');
                    console.log($('.km-content:visible').data('kendoMobileScroller'));
                  // ...