Skip to content

Instantly share code, notes, and snippets.

@four2theizz0

four2theizz0/Slide-Box-with-Side-Menu.markdown

Created October 2, 2014 07:03
Show Gist options
  • Save four2theizz0/c725405a4abff1a8b762 to your computer and use it in GitHub Desktop.
Save four2theizz0/c725405a4abff1a8b762 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Matt Flinn.
Raw
index.html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Side Menus</title>
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
<link href="http://raw.githubusercontent.com/amegan/jquery-flip/master/jquery.mobile.flip.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<script src="http://raw.githubusercontent.com/amegan/jquery-flip/master/jquery.mobile.flip.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<ion-nav-view></ion-nav-view>
</div>
<script id="event-menu.html" type="text/ng-template">
<ion-side-menus>
<ion-side-menu-content drag-content="false">
<ion-nav-bar class="bar-light">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button>
</ion-nav-buttons>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-light">
<h1 class="title">Table Of Contents</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<ion-item ng-repeat="slide in slides"
item="item"
can-swipe="false"
option-buttons="itemButtons" ng-click="goToSlide($index)"> {{slide.title}}
</ion-item>
<!-- <a href="#/event/check-in" class="item">Check-in</a>
<a href="#/event/attendees" class="item">Attendees</a>-->
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Annual Report">
<ion-content padding="false">
<ion-slide-box on-slide-changed="slideChanged(index)" does-continue="false" delegate-handle="{{collection.id}}" disable-scroll="true" show-pager="false">
<ion-slide ng-repeat="slide in slides" ng-click="check()">
<div class="slide"><img src="{{slide.src}}" alt="" /></div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
</script>
<script id="check-in.html" type="text/ng-template">
<ion-view title="Event Check-in">
<ion-content>
<form class="list" ng-show="showForm">
<div class="item item-divider">
Attendee Info
</div>
<label class="item item-input">
<input type="text" placeholder="First Name" ng-model="attendee.firstname">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name" ng-model="attendee.lastname">
</label>
<div class="item item-divider">
Shirt Size
</div>
<ion-radio ng-repeat="shirtSize in shirtSizes"
ng-value="shirtSize.value"
ng-model="attendee.shirtSize">
{{ shirtSize.text }}
</ion-radio>
<div class="item item-divider">
Lunch
</div>
<ion-toggle ng-model="attendee.vegetarian">
Vegetarian
</ion-toggle>
<div class="padding">
<button class="button button-block" ng-click="submit()">Checkin</button>
</div>
</form>
<div ng-hide="showForm">
<pre ng-bind="attendee | json"></pre>
<a href="#/event/attendees">View attendees</a>
</div>
</ion-content>
</ion-view>
</script>
<script id="attendees.html" type="text/ng-template">
<ion-view title="Event Attendees" left-buttons="leftButtons">
<ion-content>
<div class="list">
<ion-toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
ng-model="attendee.arrived"
ng-change="arrivedChange(attendee)">
{{ attendee.firstname }}
{{ attendee.lastname }}
</ion-toggle>
<div class="item item-divider">
Activity
</div>
<div class="item" ng-repeat="msg in activity">
{{ msg }}
</div>
</div>
</ion-content>
</ion-view>
</script>
<script id="modal1.html" type="text/ng-template">
<div class="modal">
<ion-header-bar class="bar bar-header bar-light">
<h1 class="title">George Feldenkreis</h1>
<button class="button button-clear button-primary" ng-click="closevideoModal()"><span class="icon ion-ios7-close-outline"></span></button>
</ion-header-bar>
<ion-content has-header="true" has-footer="false">
<div class="row">
<div class="col"><img style="display:inline-block;" src="../images/gf.jpg" alt=""></div>
<div class="col col-75"><p style="text-align:justify;">George Feldenkreis, Chairman and CEO, is the visionary who leads Perry Ellis International. Born in Havana, Cuba, to Russian immigrants, Feldenkreis moved to Miami in 1961 and founded Supreme International, importing school uniforms and Guayaberas, a 4-pocket tropical-inspired shirt. Supreme International went public in 1993 and became Perry Ellis International (PEI) after acquiring the powerhouse brand in 1999.<br/><br/> Mr. Feldenkreis currently sits on the Board of Trustees for the University of Miami, the Simon Wiesenthal Center, and the Greater Miami Jewish Federation and is a benefactor of numerous medical, educational, social and philanthropic organizations including the United Way, Mount Sinai Medical Center, the Memorial Sloan-Kettering Cancer Center, the Jewish Community Center and the Stanford Ziff Jewish Museum, among others. He also endowed the George Feldenkreis Program in Judaic Studies at the University of Miami and the George Feldenkreis Program to Foster Academic Excellence at the Technion Israel Institute of Technology.<br/><br/> He has been honored numerous times, including the Lincoln-Marti Award for his role in the Cuban Refugee Program, the David Ben Gurion Award by the Cuban Hebrew Bond Committee, the Silver Medallion for Service to Humanity by the National Conference for Community and Justice, and the Man of the Year award from the American Apparel and Footwear Association. He has been inducted into the South Florida Business Hall of Fame, has received the Ernst and Young Entrepreneur of the Year Award, was named Father of the Year by the National Father’s Day Council, Outstanding CEO by the Greater Miami Chamber of Commerce, and the Nova Southeastern University Wayne Huizenga School of Business and Entrepreneurship Hall of Fame. <br/> </p></div>
</div>
</ion-content>
</div>
</script>
</body>
</html>
Raw
script.js
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eventmenu', {
url: "/event",
abstract: true,
templateUrl: "event-menu.html"
})
.state('eventmenu.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "home.html"
}
}
})
.state('eventmenu.checkin', {
url: "/check-in",
views: {
'menuContent' :{
templateUrl: "check-in.html",
controller: "CheckinCtrl"
}
}
})
.state('eventmenu.attendees', {
url: "/attendees",
views: {
'menuContent' :{
templateUrl: "attendees.html",
controller: "AttendeesCtrl"
}
}
})
$urlRouterProvider.otherwise("/event/home");
})
.controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $ionicSlideBoxDelegate, $ionicModal, $ionicGesture,$document) {
$scope.slides = [
{ src: 'http://lorempixel.com/1024/655/sports/1/', title: '1' },
{ src: 'http://lorempixel.com/1024/655/sports/2/', title: '2' },
{ src: 'http://lorempixel.com/1024/655/sports/3/', title: '3' },
{ src: 'http://lorempixel.com/1024/655/sports/4/', title: '4' },
{ src: 'http://lorempixel.com/1024/655/sports/5/', title: '5' },
{ src: 'http://lorempixel.com/1024/655/sports/6/', title: '6' },
{ src: 'http://lorempixel.com/1024/655/sports/7/', title: '7' },
{ src: 'http://lorempixel.com/1024/655/sports/8/', title: '8' },
{ src: 'http://lorempixel.com/1024/655/sports/9/', title: '9' }
];
$scope.firstSlide= function(){
var current= $ionicSlideBoxDelegate.currentIndex();
if(current == 1) {
// over picture of CEO
$scope.openvideoModal();
}
};
// modal for video
$ionicModal.fromTemplateUrl('modal1.html', function(modal) {
$scope.videoModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// open video modal
$scope.openvideoModal = function() {
$scope.videoModal.show();
};
// close video modal
$scope.closevideoModal = function() {
$scope.videoModal.hide();
};
//Cleanup the video modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.videoModal.remove();
});
$scope.check= function(){
$ionicGesture.on('tap', function(e) {
var current = $ionicSlideBoxDelegate.currentIndex();
var x1 = e.gesture.touches[0].pageX;
var y1 = e.gesture.touches[0].pageY;
if(x1 <640 && current == 3) {
// over picture of CEO
$scope.openvideoModal();
}
if(x1 > 600 && x1 < 900 && y1 > 60 && y1< 400 && current == 5) {
$scope.openceoBio();
}
}, $document);
};
$scope.goToSlide = function(index){
$ionicSideMenuDelegate.toggleLeft();
$ionicSlideBoxDelegate.slide(index,200);
};
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('CheckinCtrl', function($scope) {
$scope.showForm = true;
$scope.shirtSizes = [
{ text: 'Large', value: 'L' },
{ text: 'Medium', value: 'M' },
{ text: 'Small', value: 'S' }
];
$scope.attendee = {};
$scope.submit = function() {
if(!$scope.attendee.firstname) {
alert('Info required');
return;
}
$scope.showForm = false;
$scope.attendees.push($scope.attendee);
};
})
.controller('AttendeesCtrl', function($scope) {
$scope.activity = [];
$scope.arrivedChange = function(attendee) {
var msg = attendee.firstname + ' ' + attendee.lastname;
msg += (!attendee.arrived ? ' has arrived, ' : ' just left, ');
msg += new Date().getMilliseconds();
$scope.activity.push(msg);
if($scope.activity.length > 3) {
$scope.activity.splice(0, 1);
}
};
});
Raw
Slide-Box-with-Side-Menu.markdown
Raw
style.css
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.slide{
height:100%;
width:100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment