YagoLopez/Ggebvd.markdown

## Ggebvd.markdown

      
    Raw
  

              Ggebvd.markdown
            
          
    Ggebvd

A Pen by Captain Anonymous on CodePen.
License.

  
## index.html
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic Material Design List with Loading and Modal</title>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.0.0-rc.1/css/ionic.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.0.0-rc.1/js/ionic.bundle.min.js"></script>
  </head>

  <body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
        <h1 class="title">Ionic Material Design List with Loading and Modal</h1>
    </ion-header-bar>

    <ion-content padding="true" has-header="true">

      <ion-refresher pulling-text="Pull to refresh"
         refreshing-text="Loading..."
         refreshing-icon="ion-loading-c"
         pulling-icon="ion-ios7-arrow-thin-down"
         on-refresh="doRefresh()">
         </ion-refresher>
      <ion-list on-swipe-left="openModal()"
                class="list">
        <ion-item ng-repeat="item in items">
          <h2 class="padding">Item {{ item.id }}</h2>
          <img src="http://cdn.flaticon.com/png/256/56261.png" alt="" width="40px" height="40px" />
        </ion-item>
      </ion-list>
    </ion-content>

    <script id="modal.html" type="text/ng-template">
    <div class="modal" id="modal">
      <ion-header-bar on-drag="dragDown($event)" on-release="resetPosition($event)">
        <h1 class="title">Modal view</h1>
      </ion-header-bar>
      <ion-content class="padding">
        <button class="button button-full button-positive" ng-click="closeModal()">click me to close</button>
      </ion-content>
    </div>
  </script>

  </body>
</html>

## script.js
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $timeout, $ionicLoading, $ionicModal ,$window) {

  // Setup the loader
  $ionicLoading.show({
    content: 'Loading',
    animation: 'fade-in',
    showBackdrop: true,
    maxWidth: 200,
    showDelay: 0
  });

  $timeout(function () {
    $ionicLoading.hide();
    $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 }
  ];
  }, 2000);

  $ionicModal.fromTemplateUrl('modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  })

  $scope.openModal = function() {
    $scope.modal.show()
  }

  $scope.closeModal = function() {
    return $scope.modal.hide();
  };

  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });

  $scope.doRefresh = function() {
    /* Do whatever you want here */
    $scope.$broadcast('scroll.refreshComplete');
  }

})

## style.css
body {
  background: #eee;
}
.bar.bar-positive {
  background-color: #1F3A93 !important;
  background-image: none !important;
  border: none !important;
}
.list .item {
  margin-bottom: 10px;
  border: none;
  box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.40);
}
.list .item h2 {
  float: left;
}
.list .item img {
  float: right
}
	<html ng-app="ionicApp">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Ionic Material Design List with Loading and Modal</title>

	<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.0.0-rc.1/css/ionic.min.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.0.0-rc.1/js/ionic.bundle.min.js"></script>
	</head>

	<body ng-controller="MyCtrl">

	<ion-header-bar class="bar-positive">
	<h1 class="title">Ionic Material Design List with Loading and Modal</h1>
	</ion-header-bar>

	<ion-content padding="true" has-header="true">

	<ion-refresher pulling-text="Pull to refresh"
	refreshing-text="Loading..."
	refreshing-icon="ion-loading-c"
	pulling-icon="ion-ios7-arrow-thin-down"
	on-refresh="doRefresh()">
	</ion-refresher>
	<ion-list on-swipe-left="openModal()"
	class="list">
	<ion-item ng-repeat="item in items">
	<h2 class="padding">Item {{ item.id }}</h2>
	<img src="http://cdn.flaticon.com/png/256/56261.png" alt="" width="40px" height="40px" />
	</ion-item>
	</ion-list>
	</ion-content>

	<script id="modal.html" type="text/ng-template">
	<div class="modal" id="modal">
	<ion-header-bar on-drag="dragDown($event)" on-release="resetPosition($event)">
	<h1 class="title">Modal view</h1>
	</ion-header-bar>
	<ion-content class="padding">
	<button class="button button-full button-positive" ng-click="closeModal()">click me to close</button>
	</ion-content>
	</div>
	</script>

	</body>
	</html>
	angular.module('ionicApp', ['ionic'])

	.controller('MyCtrl', function($scope, $timeout, $ionicLoading, $ionicModal ,$window) {

	// Setup the loader
	$ionicLoading.show({
	content: 'Loading',
	animation: 'fade-in',
	showBackdrop: true,
	maxWidth: 200,
	showDelay: 0
	});

	$timeout(function () {
	$ionicLoading.hide();
	$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 }
	];
	}, 2000);

	$ionicModal.fromTemplateUrl('modal.html', {
	scope: $scope,
	animation: 'slide-in-up'
	}).then(function(modal) {
	$scope.modal = modal;
	})

	$scope.openModal = function() {
	$scope.modal.show()
	}

	$scope.closeModal = function() {
	return $scope.modal.hide();
	};

	$scope.$on('$destroy', function() {
	$scope.modal.remove();
	});

	$scope.doRefresh = function() {
	/* Do whatever you want here */
	$scope.$broadcast('scroll.refreshComplete');
	}

	})
	body {
	background: #eee;
	}
	.bar.bar-positive {
	background-color: #1F3A93 !important;
	background-image: none !important;
	border: none !important;
	}
	.list .item {
	margin-bottom: 10px;
	border: none;
	box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.40);
	}
	.list .item h2 {
	float: left;
	}
	.list .item img {
	float: right
	}