<!DOCTYPE html>
<html>
<head>
<link data-require="ionic@1.0.0-rc.2" data-semver="1.0.0-rc.2" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-rc.2/css/ionic.css" />
<script data-require="ionic@1.0.0-rc.2" data-semver="1.0.0-rc.2" src="http://code.ionicframework.com/1.0.0-rc.2/js/ionic.js"></script>
<script data-require="ionic.bundle@*" data-semver="1.0.0-rc.2" src="http://code.ionicframework.com/1.0.0-rc.2/js/ionic.bundle.js"></script>
<!-- my components css -->
<link href="flipBookStyle.css" rel="stylesheet" />
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<!--<script src="lib/ionic/js/ionic.bundle.js"></script> -->
<!-- cordova script (this will be a 404 during development) -->
<!--<script src="cordova.js"></script>-->
<!-- your app's js -->
<script src="app.js"></script>
<script src="flipBook.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="flipBookDemo">
<ion-pane>
<!--<ion-header-bar class="bar-stable">
<h1 class="title">FlipBook Demo</h1>
</ion-header-bar>-->
<ion-content ng-controller="demoCtrl" scroll="false">
<div class="list" style="margin-bottom: 0">
<div class="item range range-positive">
<i class="icon ion-ios-copy-outline"></i>
<input type="range" name="pageSelector" min="0" max="{{pages.length}}" ng-model="rangeValue" />
<i class="icon ion-ios-copy"></i>
<button class="button button-stable" ng-click="goToPage()"> Go to page {{ rangeValue }} </button>
</div>
</div>
<flip-book page-number="pageNumber" page-width="450px" page-height="600px" animation-duration="1000" show-page-nums="false" first-page="right" set-page="injectedFun">
<div ng-repeat="p in pages" ng-include="p"></div>
</flip-book>
</ion-content>
</ion-pane>
</body>
</html>
// Code goes here
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('flipBookDemo', ['ionic', 'flipBook'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
ionic.Platform.setGrade('c');
});
})
.controller('demoCtrl', function($scope){
$scope.pages = [
"page00.html",
"page01.html",
"page02.html",
"page03.html",
"page04.html",
"page05.html",
"page06.html",
"page07.html",
"page08.html",
"page09.html"
];
$scope.rangeValue = 0;
$scope.pageNumber = 0;
$scope.injectedFun = { invoke: function() {} };
$scope.goToPage = function() {
$scope.pageNumber = $scope.rangeValue;
$scope.injectedFun.invoke($scope.pageNumber);
console.log("pageNumber: " + $scope.pageNumber);
};
// $scope.$watch($scope.pageNumber, function(v) {
// $scope.rangeValue = $scope.pageNumber;
// });
});
/* Styles go here */
/* Empty. Add your own CSS if you like */
@import url(https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700|Crimson+Text:400,600);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400);
body {
font-size: 100%;
color: #444;
}
h1 {
font-family: 'Old Standard TT', serif;
font-size: 1.8em;
color: #444;
text-align: center;
}
h2 {
font-family: 'Crimson Text', serif;
font-size: 1.4em;
font-weight: 600;
line-height: 1.8em;
color: #444;
padding-top:3px;
margin-top: 13px;
margin-bottom: 40px;
margin-left: 10px;
}
h3 {
font-family: 'Crimson Text', serif;
font-size: 1.2em;
/*text-transform: uppercase;*/
font-weight: 700;
color: #444;
}
.chapter-num {
font-family: 'Crimson Text', serif;
font-size: 1.1em;
font-variant: small-caps;
color: #444;
}
p, ul, ol, li, i,
.list-name {
font-family: 'Old Standard TT', serif;
font-size: 1em;
line-height: 1.6em;
color: #333;
}
i {
font-style: italic;
}
.subtitle {
font-size: 0.8em;
line-height: 1.6em;
}
.author {
font-size: 0.5em;
font-style: italic;
}
.author.name {
font-size: 0.6em;
}
.author.img {
display: inline-block;
width: 70px;
height: 70px;
background: url('../img/me.jpg');
background-size: 70px 70px;
border-radius: 100px;
margin: 10px;
}
.page {
background-color: #fefefe;
width: 100%; height: 100%;
padding: 15% 10%;
overflow: hidden;
text-align: justify;
}
.chapter::first-letter {
display: block;
float: left;
font-size: 4em;
line-height: 0.8em;
color: #333;
margin-right: 5px;
}
.chapter-num {
margin-right: 20px;
font-size: 1.1em;
}
.code {
font-family: 'Source Code Pro', monospace;
font-weight: 400;
font-size: 0.85em;
color: slategray;
}
img {
width: 100%;
border: 1px dotted #ddd;
}
.image {
text-align: center;
width: 100%;
margin: 30px 0 0 0;
}
.image-num {
font-weight: 600;
margin-right: 10px;
}
.caption {
font-family: 'Crimson Text', serif;
font-weight: 400;
font-size: 0.8em;
line-height: 0.6em;
margin-top: 10px;
}
/*p::first-line {
text-indent: 20px;
}*/
ul {
list-style-type: circle;
margin-left: 20px;
}
ol {
list-style-type: decimal;
margin-left: 20px;
}
li {
padding-bottom: 10px;
}
.list-name {
font-style: italic;
font-size: 1.1em;
}
.back,
.front {
font-family: 'Old Standard TT', serif;
font-size: 1.6em;
text-align: center;
}
.content {
font-family: 'Old Standard TT', serif;
}
.page-number {
font-family: 'Old Standard TT', serif;
font-size: 16px;
}
/* Insert here flip book style */
.main-container {
text-align: center;
padding: 10px 20px;
margin: 1% auto;
display: flex;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
border-radius: 5px;
background: #cecece url('./img/black_paper.png') repeat;
background-blend-mode: screen;
position: relative;
}
.book-binding {
width: 46px;
background: #666 url('./img/dark_stripes.png') repeat;
background-blend-mode: screen;
position: absolute;
/*margin: auto auto;*/
margin-top: -10px;
margin-left: -23px;
left: 50%;
z-index: 0;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.9) inset;
}
.book-container {
width: auto;
text-align: left;
margin: auto auto;
position: relative;
-webkit-box-shadow: 0 0 10px -4px rgba(0,0,0,1);
box-shadow: 0 0 10px -4px rgba(0,0,0,1);
}
.page-container {
overflow: hidden;
display: inline-block;
padding: 0;
background: #fff;
}
.page-number {
position: absolute;
bottom: 0;
padding: 10px 0;
height: 10%;
text-align: center;
opacity: 0.5;
}
.page-number.left-page {
right: 0;
}
.inner-container {
white-space: normal;
-webkit-user-select: text;
user-select: text;
/*-webkit-transform: scale3d(1,1,1) !important;
transform: scale3d(1,1,1) !important;*/
}
/*.animating.top-page .inner-container {
transition: all 600ms linear;
-webkit-transform: scale3d(2,1,1) !important;
transform: scale3d(2,1,1) !important;
}*/
.inner-container.left-page {
float: right;
}
.inner-container.right-page {
float: left;
}
.back-page {
width: 0;
/*-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);*/
}
.back-page.left-page {
position: absolute;
left: 0;
z-index: 1000;
transform-origin: left center;
}
.back-page.right-page {
position: absolute;
right: 0;
z-index: 1000;
transform-origin: right center;
}
.left-page.top-page {
position: absolute;
top: 0;
right: 50%;
}
.left-page.bottom-page.front-page,
.shadow-container-left {
position: absolute;
top: 0;
left: 0;
}
.right-page.top-page,
.left-page.top-page {
z-index: 20;
}
.right-page.top-page,
.right-page.bottom-page.front-page,
.shadow-container-right {
position: absolute;
top: 0;
left: 50%;
}
.shadow-container-left,
.shadow-container-right {
z-index: 25;
pointer-events: none;
}
.right-shadow-page,
.left-shadow-page {
width: 15%;
pointer-events: none;
}
.left-shadow-page {
-webkit-box-shadow: 3px 0 5px -5px #000;
box-shadow: 3px 0 5px -5px #000;
}
.right-shadow-page {
background: -webkit-linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);
background: linear-gradient(to right, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);
pointer-events: none;
}
.left-shadow-page {
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 100%);
pointer-events: none;
}
.turning-page-shadow-right {
position: absolute;
top: 0;
right: 0;
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 50%,rgba(0,0,0,0.15) 90%,rgba(0,0,0,0) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 50%,rgba(0,0,0,0.15) 90%,rgba(0,0,0,0) 100%);
pointer-events: none;
z-index: 2000;
}
.turning-page-shadow-left {
position: absolute;
top: 0;
left: 0;
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 10%,rgba(0,0,0,0) 50%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 10%,rgba(0,0,0,0) 50%);
pointer-events: none;
z-index: 2000;
}
.under-turning-shadow-left {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.25) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.25) 100%);
pointer-events: none;
}
.under-turning-shadow-right {
position: absolute;
top: 0;
right: 0;
z-index: 10;
background: -webkit-linear-gradient(left, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 100%);
background: linear-gradient(to right, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 100%);
pointer-events: none;
}
.left-page.bottom-page.front-page,
.right-page.bottom-page.front-page {
z-index: 1;
}
.floating-left {
float: left;
}
.floating-right {
float: right;
}
.underlying-shadow {
z-index: 0;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
pointer-events: none;
}
.page-turning-shadow-right {
position: absolute;
right: 0;
float: right;
left: initial;
pointer-events: none;
}
.page-container.right-page.top-page,
.page-container.left-page.top-page {
width: 450px;
}
.page-container.right-page.top-page.animating {
width: 0;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/*-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
transform-origin:left 50%;*/
-webkit-transition: all 600ms linear;
transition: all 600ms linear;
}
.page-container.left-page.top-page.animating {
width: 0;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/*-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
transform-origin:right 50%;
*/
right: 50%;
-webkit-transition: all 600ms linear;
transition: all 600ms linear;
}
/*.page-container.left-page.bottom-page.back-page,
.page-container.right-page.bottom-page.back-page {
width: 0;
}*/
.page-container.right-page.bottom-page.back-page.animating {
width: 450px;
-webkit-transform: translate3d(-450px, 0, 0);
transform: translate3d(-450px, 0, 0);
/*-webkit-transform: translate3d(-450px, 0, 0) scale3d(1,1,1);
transform: translate3d(-450px, 0, 0) scale3d(1,1,1);
transform-origin: right center;*/
/*-webkit-box-shadow: 0 0 50px 0 rgba(150,150,150,1);
box-shadow: 0 0 50px 0 rgba(150,150,150,1);*/
-webkit-transition: all 600ms linear;
transition: all 600ms linear;
}
.page-container.left-page.bottom-page.back-page.animating {
width: 450px;
-webkit-transform: translate3d(450px, 0, 0);
transform: translate3d(450px, 0, 0);
/*-webkit-transform: translate3d(450px, 0, 0) scale3d(1,1,1);
transform: translate3d(450px, 0, 0) scale3d(1,1,1);
transform-origin: left center;*/
/*-webkit-box-shadow: 0 0 50px 0 rgba(150,150,150,1);
box-shadow: 0 0 50px 0 rgba(150,150,150,1);*/
-webkit-transition: all 600ms linear;
transition: all 600ms linear;
}
.turning-page-shadow-left,
.turning-page-shadow-right,
.under-turning-shadow-left,
.under-turning-shadow-right {
width: 0;
opacity: 1;
}
.turning-page-shadow-left.animating {
width: 450px;
opacity: 0;
-webkit-transform: translate3d(-450px, 0, 0);
transform: translate3d(450px, 0, 0);
-webkit-box-shadow: 0 0 50px 0 rgba(150,150,150,1);
box-shadow: 0 0 50px 0 rgba(150,150,150,1);
-webkit-transition: all 600ms linear;
transition: all 600ms linear;
}
.turning-page-shadow-right.animating {
width: 450px;
opacity: 0;
-webkit-transform: translate3d(-450px, 0, 0);
transform: translate3d(-450px, 0, 0);
-webkit-box-shadow: 0 0 50px 0 rgba(150,150,150,1);
box-shadow: 0 0 50px 0 rgba(150,150,150,1);
-webkit-transition: all 600ms linear;
transition: all 600ms linear;
}
.under-turning-shadow-left.animating,
.under-turning-shadow-right.animating {
width: 450px;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 600ms linear;
transition: all 600ms linear;
}
angular.module('flipBook', [])
.directive('flipBook', [ '$ionicGesture', '$timeout',
function($ionicGesture, $timeout) {
var link = function(scope, el, attrs, ctrl, transclude) {
/*---------- Local funs and vars ------------*/
// page width will be set by user
var pageWidth = 0;
if(!scope.pageWidth || !scope.pageHeight) {
pageWidth = 400;
scope.pageWidth = '400px';
scope.pageHeight = '500px';
}
else
pageWidth = parseInt(scope.pageWidth);
// fixed graphic parameters
var shadowDim = 0;
var shadowParam = ' 0px 50px 0px rgba(150,150,150,';
var isAnimating = false;
var pendingPages = [];
// starting page index
var pageIndex = scope.pageNumber ? parseInt(scope.pageNumber) : 0;
// set it on pages
var content = [];
scope.length = 0;
scope.selectedPage = {};
scope.pageNumRef = {};
scope.animateLeft = false;
scope.animateRight = false;
scope.pageNumRef = pageIndex + 1;
var firstPage = scope.firstPage ? scope.firstPage : 'right';
// get content from content manager (when dom is ready)
$timeout(function() {
content = angular.element(document.querySelector('.content-manager')).children().clone();
angular.element(document.querySelector('.content-manager')).remove();
scope.length = content.length;
changePage(scope.pageNumber);
}, 1000);
var setPagesStruct = function(page) {
var pg = parseInt(page);
if(pg < -1 || pg > scope.length)
return;
if(firstPage == 'left')
pg = (pg % 2 === 0) ? pg : pg + 1;
else
pg = (pg % 2 === 0) ? pg - 1 : pg;
// selected page binding
scope.selectedPage = { backLeft: pg - 1, left: pg, right: pg + 1, backRight: pg + 2 };
return pg;
}
// set page (translate to left page index)
var changePage = function(page) {
var pg = setPagesStruct(page);
scope.pageNumRef = scope.selectedPage;
// page number binding (with external controller)
scope.pageNumber = scope.selectedPage.right;
for(var i = 0; i <= 5; i++) {
var changePage = angular.element(document.querySelector('#page-' + i));
var cnt = content[pg - 2 + i];
changePage.empty();
if(cnt)
changePage.append(cnt);
}
};
var isNumber = function(n) {
return typeof n == 'number' && !isNaN(n) && isFinite(n);
}
// update status function
var update = function(animation, page) {
//var dir = (page.indexOf('right') >= 0) ? -1 : 1;
// check not apply or digest running and set changes
if(scope.$root.$$phase != '$apply' && scope.$root.$$phase != '$digest') {
scope.$apply(function() {
if(page === 'leftPage')
scope.animateLeft = animation;
else
scope.animateRight = animation;
});
}
else {
if(page === 'leftPage')
scope.animateLeft = animation;
else
scope.animateRight = animation;
}
}
var updateShadow = function(val, page) {
var dir = (page.indexOf('right') >= 0) ? -1 : 1;
// check not apply or digest running and set changes
if(scope.$root.$$phase != '$apply' && scope.$root.$$phase != '$digest') {
scope.$apply(function() {
scope.animData[page].backShadow = dir * shadowDim + 'px' + shadowParam + val + ')';
});
}
else {
scope.animData[page].backShadow = dir * shadowDim + 'px' + shadowParam + val + ')';
}
}
// animation function
var animate = function(direction) {
var page = (direction === 'right') ? 'leftPage' : 'rightPage';
// calculate time (sec), acceleration (pixel/sec^2) and velocity (pixel/sec)
var time_tot = scope.animationDuration ? parseInt(scope.animationDuration) / 1000 : 0.7;
$timeout(function() {
update(true, page);
}, 0, true);
// do updating with browser refresh
$timeout(function() {
updateShadow(1, page);
update(false, page);
changePage(pageIndex);
isAnimating = false;
}, time_tot * 1000, true);
$timeout(function() {
updateShadow(0, page);
}, time_tot * 500, true);
}
var setBackPages = function(dir) {
var pageBack, pageBottom, cntBack, cntBottom;
if(dir == 'left') {
// get pages to edit
pageBack = angular.element(document.querySelector('#page-1'));
pageBottom = angular.element(document.querySelector("#page-0"));
// get content to set
cntBack = content[pageIndex + 1];
cntBottom = content[pageIndex];
scope.pageNumRef.backLeft = pageIndex + 1;
}
else {
pageBack = angular.element(document.querySelector('#page-4'));
pageBottom = angular.element(document.querySelector("#page-5"));
cntBack = content[pageIndex];
cntBottom = content[pageIndex + 1];
scope.pageNumRef.backRight = pageIndex;
}
// empty pages
pageBack.empty();
pageBottom.empty();
// set content (if not undefined)
if(cntBack)
pageBack.append(cntBack);
if(cntBottom)
pageBottom.append(cntBottom);
}
var goToPage = function(page) {
if(scope.length === 0)
return;
// pageNum is now array index
var pageNum;
if(firstPage == 'left')
pageNum = (page % 2 === 0) ? page : page - 1;
else
pageNum = (page % 2 === 0) ? page - 1 : page - 2;
console.log("GOTOPAGE: " + pageNum);
// if non-valid page number exit
if(!isNumber(pageNum) || pageNum < -1 || pageNum >= scope.length)
return;
if(scope.selectedPage && (pageNum == scope.selectedPage.left || pageNum == scope.selectedPage.right))
return;
// if next page call gesture event (right or left)
if(scope.selectedPage && pageNum == scope.selectedPage.backLeft) {
gestureCall('right');
return;
}
if(scope.selectedPage && pageNum == scope.selectedPage.backRight) {
gestureCall('left');
return;
}
// if(isAnimating) {
// pendingPages.push(page);
// return;
// }
setPagesStruct(pageNum);
var animateSide = 'left';
var setSide = 'right';
// swap set back pages and animate vars
if(pageNum < pageIndex) {
animateSide = 'right';
setSide = 'left';
}
if(!isAnimating) {
pageIndex = pageNum;
setBackPages(setSide);
isAnimating = true;
animate(animateSide);
}
else
pendingPages.push(page);
};
// gesture event manager
var gestureCall = function(dir) {
var pg;
var changed = false;
// check if not animating and call animation
if(dir == 'left' && scope.selectedPage.backRight < scope.length) {
pg = pageIndex + 2;
changed = true;
}
if(dir == 'right' && scope.selectedPage.backLeft > - 1) {
pg = pageIndex - 2;
changed = true;
}
if(!scope.length || !changed || !isNumber(pg))
return;
setPagesStruct(pg);
if(!isAnimating) {
pageIndex = pg;
animate(dir);
isAnimating = true;
}
else {
if(firstPage == 'left')
pendingPages.push(pg);
else
pendingPages.push(pg + 1);
}
};
/*---------- Scope var and fun definition ---------*/
// some graphic parameters
scope.bookWidth = pageWidth * 2 + 'px';
scope.coverWidth = (pageWidth * 2 + 40) + 'px';
scope.coverHeight = (parseInt(scope.pageHeight) + 20) + 'px';
scope.bindingLeft = pageWidth + 20 + 'px';
// initial animation data for left and right pages
scope.animData = {
leftPage: {
translation: 'translate3D(0, 0, 0)',
frontWidth: pageWidth + 'px',
backWidth: '0px',
// frontScale: 'scale3d(1,1,1)',
// backScale: 'scale3d(0,1,1)',
backShadow: shadowDim +'px' + shadowParam + '0)',
shadowOpacity: '1',
// shadowWidth: '0',
transition: 'all 0ms ease-out'
},
rightPage: {
translation: 'translate3D(0, 0, 0)',
frontWidth: pageWidth + 'px',
backWidth: '0px',
// frontScale: 'scale3d(1,1,1)',
// backScale: 'scale3d(0,1,1)',
backShadow: (-shadowDim) + 'px' + shadowParam + '0)',
shadowOpacity: '1',
// shadowWidth: '0',
transition: 'all 0ms ease-out'
}
};
scope.$watch('setPage', function (value) {
/*Checking if the given value is not undefined*/
if(value){
scope.setPage = value;
/*Injecting the Method*/
scope.setPage.invoke = function(v){
// console.log("WATCH METHOD CALLED GOTOPAGE");
goToPage(v);
}
}
});
/*------------- Events listeners -----------*/
if(scope.swipe !== false)
$ionicGesture.on('swipeleft', function(ev) {
gestureCall('left');
}, el);
if(scope.swipe !== false)
$ionicGesture.on('swiperight', function(ev) {
gestureCall('right');
}, el);
if(scope.doubleTap !== false)
$ionicGesture.on('doubletap', function(ev) {
var pgx = parseInt(ev.gesture.center.pageX);
if(pgx) {
var left = parseInt(this.children[0].offsetLeft);
console.log("page x = " + (pgx - left));
if(pgx - left <= pageWidth + 20)
gestureCall('right');
else
gestureCall('left');
}
else
console.log("NO CENTER COORDINATES");
}, el);
};
/*--------- End of link function ----------*/
return {
// directive type is 'Element'
restrict: 'E',
scope: {
// creates a data-items attribute which contains pages list
//pages: "=",
// create an attribute select starting page
pageNumber: "=",
// page size
pageWidth: "@",
pageHeight: "@",
// show or hide page numbers (boolean)
showPageNums: "=",
// animation time (millis)
animationDuration: "=",
//gesture enabling
doubleTap:"=",
swipe:"=",
// first page (left or right)
firstPage: "@",
// invoke method
setPage: '='
},
// link to template
templateUrl: 'flipBookTemplate.html',
// enable transclusion
transclude: true,
// link function which allow to edit DOM
link: link
};
}])
<div class="main-container" ng-style="{ 'width': coverWidth }">
<div class="book-binding" ng-style="{ 'height': coverHeight, 'left': bindingLeft }"></div>
<!-- IT WILL CONTAIN ALL BOOK PAGES!!! -->
<div class="content-manager" style="display: none" ng-transclude></div>
<div class="book-container" ng-style="{ 'width': bookWidth, 'height': pageHeight }">
<div class="page-container left-page bottom-page front-page"
ng-style="{ 'width': pageWidth, 'height': pageHeight, 'background-color': '#fff' }">
</div>
<div class="page-container right-page bottom-page front-page"
ng-style="{ 'width': pageWidth, 'height': pageHeight, 'background-color': '#fff' }">
</div>
<!-- back pages front -->
<div class="page-container left-page bottom-page front-page" ng-style="{ 'width': pageWidth, 'height': pageHeight }">
<div id="page-0" class="inner-container left-page"
ng-style="{ 'width': pageWidth, 'height': pageHeight }">
</div>
<!-- left page number -->
<div class="page-number" ng-style="{ 'width': pageWidth }">
<span ng-if="showPageNums && pageNumRef.backLeft - 1 >= 0">
{{ pageNumRef.backLeft }}
</span>
</div>
</div>
<div class="page-container right-page bottom-page front-page" ng-style="{ 'width': pageWidth, 'height': pageHeight }">
<div id="page-5" class="inner-container right-page"
ng-style="{ 'width': pageWidth, 'height': pageHeight }">
</div>
<!-- right page number -->
<div class="page-number" ng-style="{ 'width': pageWidth }">
<span ng-if="showPageNums && pageNumRef.backRight + 1 < length">
{{ pageNumRef.backRight + 2 }}
</span>
</div>
</div>
<!-- top pages -->
<!--'width': pageWidth, 'transform': animData.leftPage.frontScale,-->
<div class="page-container left-page top-page"
ng-class="{ animating: animateLeft }">
<!-- ng-include="pages[selectedPage.left]" -->
<div id="page-2" class="inner-container left-page"
ng-style="{ 'width': pageWidth, 'height': pageHeight }">
</div>
<!-- left page number -->
<div class="page-number left-page" ng-style="{ 'width': pageWidth }">
<span ng-if="showPageNums && pageNumRef.left >= 0">
{{ pageNumRef.left + 1 }}
</span>
</div>
</div>
<!-- 'width': pageWidth, 'transform': animData.rightPage.frontScale, -->
<div class="page-container right-page top-page"
ng-class="{ animating: animateRight }">
<div id="page-3" class="inner-container right-page"
ng-style="{ 'width': pageWidth, 'height': pageHeight }">
</div>
<!-- right page number -->
<div class="page-number" ng-style="{ 'width': pageWidth }">
<span ng-if="showPageNums && pageNumRef.right < length">
{{ pageNumRef.right + 1 }}
</span>
</div>
</div>
<!-- top pages internal shadows -->
<div class="shadow-container-left" ng-style="{ 'width': pageWidth, 'height': pageHeight }">
<div class="left-shadow-page floating-right" ng-style="{ 'height': pageHeight }"></div>
</div>
<div class="shadow-container-right" ng-style="{ 'width': pageWidth, 'height': pageHeight }">
<div class="right-shadow-page floating-left" ng-style="{ 'height': pageHeight }"></div>
</div>
<!-- top pages back -->
<!-- 'width': pageWidth, 'transform': animData.leftPage.backScale,
ng-style=" { '-webkit-box-shadow': animData.left.backShadow, 'box-shadow': animData.right.backShadow } " -->
<div id="leftPage-target" class="page-container left-page bottom-page back-page"
ng-class="{ animating: animateLeft }" >
<div class="shadow-container-right page-turning-shadow-right" ng-style="{ 'width': pageWidth, 'height': pageHeight }">
<div class="right-shadow-page floating-left" ng-style="{ 'height': pageHeight }"></div>
</div>
<!-- left back page content -->
<div id="page-1" class="inner-container floating-right"
ng-style="{ 'width': pageWidth, 'height': pageHeight }">
</div>
<!-- left back page number -->
<div class="page-number left-page" ng-style="{ 'width': pageWidth }">
<span ng-if="showPageNums && pageNumRef.backLeft >= 0">
{{ pageNumRef.backLeft + 1 }}
</span>
</div>
</div>
<!-- 'width': pageWidth, 'transform': animData.rightPage.backScale, -->
<div id="rightPpage-target" class="page-container right-page bottom-page back-page"
ng-class="{ animating: animateRight }">
<div class="shadow-container-left" ng-style="{ 'width': pageWidth, 'height': pageHeight }">
<div class="left-shadow-page floating-right" ng-style="{ 'height': pageHeight }"></div>
</div>
<!-- right back page content -->
<div id="page-4" class="inner-container floating-left"
ng-style="{ 'width': pageWidth, 'height': pageHeight }">
</div>
<!-- right back page number -->
<div class="page-number" ng-style="{ 'width': pageWidth }">
<span ng-if="showPageNums && pageNumRef.backRight < length">
{{ pageNumRef.backRight + 1 }}
</span>
</div>
</div>
<!-- turning page shadows -->
<!-- 'width': pageWidth, 'transform': animData.leftPage.backScale, -->
<div class="turning-page-shadow-left" ng-style="{ 'height': pageHeight }"
ng-class="{ animating: animateLeft }">
</div>-->
<!-- 'width': pageWidth, 'transform': animData.rightPage.backScale, -->
<div class="turning-page-shadow-right" ng-style="{ 'height': pageHeight }"
ng-class="{ animating: animateRight }">
</div>
<!-- under turning page shadows -->
<div class="under-turning-shadow-left" ng-style="{ 'height': pageHeight }"
ng-class="{ animating: animateLeft }">
</div>
<div class="under-turning-shadow-right" ng-style="{ 'height': pageHeight }"
ng-class="{ animating: animateRight }">
</div>
</div> <!--end book container-->
</div> <!-- end main container -->
<div class="page front"> <br>
<h1>Flip Book</h1>
<br><br>
<span class="subtitle">A sightly book style<br>AngularJS based Ionic widget</span>
<br><br><br><br>
<span class="author">Created by</span><br>
<div class="author img"></div><br>
<span class="author name">Niccolò Taddei</span>
</div>
<div class="page content">
<br><br>
<h2><span class="chapter-num">1.</span> Introduction</h2>
<div class="chapter">
<p>
Flip Book is a graphic component, thought and designed for Ionic Framework. </p><p>
Programming language is JavaScript, powered by <i>AngularJS</i> framework. AngularJS include a JavaScript
Lite version, but it's designed to untie programmer from DOM manipulation and MVC structuring.
</p>
<p>
Flip Book primary function is to be an information slideshow (text, images, everything is representable in HTML code)
in a graceful book style. <br>
It improves the Ionic marketplace plugin collection.
</p>
</div>
</div>
<div class="page content">
<h3><span class="chapter-num">1.1</span>Description</h3>
<p>
The component is an AngularJS custom directive, set as element. It means that in HTLM5 you can declare a tag named
<span class="code">flip-book</span>, with all his relative attributes.
</p>
<p>Attributes list:</p>
<ul>
<li><span class="code">pages</span>: requires an array of strings representing the page template URL.
</li>
<li><span class="code">page-number</span>: requires a bind variable containing the selected page number.
It can be set from the controller to animate Flip Book and change multiple pages.
</li>
<li><span class="code">page-width</span>, <span class="code">page-height</span>: requires a string which represent
respectively pages width and height in pixel (ready to use in code).
</li>
</ul>
</div>
<div class="page content">
<ul>
<li><span class="code">show-page-nums</span>: requires a boolean variable. If true page numbers are shown,
otherwise they are hide.
</li>
<li><span class="code">animation-duration</span>: requires an integer variable representing the duration time
of the turning page animation (in milliseconds).
</li>
<li><span class="code">swipe</span>, <span class="code">double-tap</span>: requires a boolean variable to enable or
disable relative gesture event listener (both <span class="code">true</span> by default).
</li>
<li><span class="code">first-page</span>: requires a string to set first page at left or right.
</li>
<li><span class="code">set-page</span>: requires a injection object which will contain an <i>invoke</i> method,
to change a page from an external controller.
</ul>
</div>
<div class="page content">
<p>
Template URL and link function complete directive definition.
In order to understand component structure, style and internal behavior, just keep reading following chapters.
</p>
<div class="image">
<img src="../img/flipbook-usage.png">
<div class="caption">
<span class="image-num">Image 1.1</span>Flip Book directive usage in a Ionic html page.
</div>
</div>
</div>
<div class="page content">
<br><br>
<h2><span class="chapter-num">2.</span> Component structure</h2>
<div class="chapter">
<p>
In this chapter, we'll see how the directive template is structured,
which elements compose it and how positioned are them respect each others.
</p>
<p>
Also we'll get a look to css file, because it contains all the basic styles to understand elements positioning.
All parameters used for animations are written inline (HTML) instead, using AngularJS attributes
(tipically <span class="code">ng-style</span> and <span class="code">ng-class</span>).
AngularJS automatically retrieve values from JS code.
</p>
</div>
</div>
<div class="page content">
<h3><span class="chapter-num">2.1</span>HTML</h3>
<p>
The template is sided in a separate file called <span class="code">flipBookTemplate.html</span> and is structured
in overlaid layers (<span class="code">div</span> HTML elements) representing the pages that are always shown or
necessary.
</p>
<p>
Those pages are:
</p>
<ol class="nums">
<li>Two top pages (front-face), always shown in every book state. They may contain templates given by user or be blank.
One of them gets animated when a swipe event has been fired.
</li>
<li>Back-face of top pages, staying hide until book went animate (<span class="code">width: 0px</span>).
They went shown when turning page animation went fired (width raise from 0 to page width).
</li>
</ol>
</p>
</div>
<div class="page content"><p>
<ol class="nums" start="3">
<li>Front-face of bottom pages, staying under top pages and naturally shown when animation begins
(right one or left one, it depends from the animation direction).
</li>
</ol>
<p>Two main containers nested wrap those containers. Innermost contains the book graphic.
</p>
<p>Once the animation has ended HTML elements are restored to their original position and in JS code the the pages are
switched at runtime. In those few instruction nobody can see what happens in realtime because everything last just for a
while. We'll see in detail how the effect works in next chapters.
</p>
</div>
<div class="page content">
<h3><span class="chapter-num">2.2</span>CSS</h3>
<p>Due to lightweight component structure, relative style sheet is quite simple. </p>
<p> There are two main definitions, excluding book style graphic design:</p>
<ol class="alpha">
<li>Containers static position, typically absolute position and left or right offset.
</li>
<li>Static shadow effects (gradients, box-shadows).
</li>
</div>
<div class="page content"><p>
It was at this moment that Fyodor Pavlovitch played his last prank. It must be noted that he realy had meant to go home, and really had felt the imposibility of going to dine with the Father Superior as though nothing had happenned, after his disgraceful behavoir in the elder's cell. Not that he was so very much ashamed of himself -- quite the contrary perhaps. But still he felt it would be unseemly to go to dinner. Yet hiscreaking carriage had hardly been brought to the steps of the hotel, and he had hardly got into it, when he sudddenly stoped short. He longed to revenge himself on everone for his own unseemliness.
</p>
</div>