ionic

by Christian Bonato

HTML

<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0/css/ionic.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js"></script>
<div>       
    <div ng-app="sampleApp" ng-controller="MainCtrl">
         <ion-content style="display:block" delegate-handle="mainScroll">
             <ion-list>
                 <ion-item 
                 ng-repeat="item in items" 
                 id="{{item.id}}"  
                 ng-click="toggleStretchedMode(item.id)"
                 >
                     I am item {{item.id}}
                 </ion-item>
             </ion-list>
        </ion-content>
    </div>     
</div>

CSS

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

.item-complex .item-content, .item-radio .item-content{
  background-color: none;
}

.item{
  -webkit-transition: all 1s ease-in-out;                  
    -moz-transition: all 1s ease-in-out;                 
    -o-transition: all 1s ease-in-out;   
    -ms-transition: all 1s ease-in-out;          
    transition: all 1s ease-in-out;
    
    height:3.5rem;
}

.stretched{
    background:orange;
    height: 100vh;
}

JavaScript

var SampleApp;
(function (SampleApp) {

    var app = angular.module('sampleApp', ['ionic']);    
    
    app.controller('MainCtrl', function (
        $scope, 
        $ionicScrollDelegate,
        $location
        ) {
        
        
        $scope.toggleStretchedMode = function(itemID) {
        
				$scope.stretched = $scope.stretched === false ? true: false;

        
        if(!$scope.stretched){
            $('ion-item').removeClass('stretched');
                         $ionicScrollDelegate.freezeAllScrolls(false);

        }
          else
        {
            $location.hash(itemID);
            $ionicScrollDelegate.$getByHandle('mainScroll').anchorScroll(true);
            $ionicScrollDelegate.freezeAllScrolls(true);
            $('#'+itemID).addClass('stretched');
            ;
         };
        
        
        
      }
        
        
         $scope.items = [
    { id: 0 },
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9 },
    { id: 10 },
    { id: 11 },
    { id: 12 },
    { id: 13 },
    { id: 14 },
    { id: 15 },
    { id: 16 },
    { id: 17 },
    { id: 18 },
    { id: 19 },
    { id: 20 },
    { id: 21 },
    { id: 22 },
    { id: 23 },
    { id: 24 },
    { id: 25 },
    { id: 26 },
    { id: 27 },
    { id: 28 },
    { id: 29 },
    { id: 30 },
    { id: 31 },
    { id: 32 },
    { id: 33 },
    { id: 34 },
    { id: 35 },
    { id: 36 },
    { id: 37 },
    { id: 38 },
    { id: 39 },
    { id: 40 },
    { id: 41 },
    { id: 42 },
    { id: 43 },
    { id: 44 },
    { id: 45 },
    { id: 46 },
    { id: 47 },
    { id: 48 },
    { id: 49 },
    { id: 50 }
  ];
        
        
        
    });

})(SampleApp || (SampleApp = {}));