Skip to content
This repository was archived by the owner on May 27, 2021. It is now read-only.

Updates drawer to work from both sides and adds background transitioning #14

Open
brybott wants to merge 27 commits into
base: master
Choose a base branch
from
Open

Updates drawer to work from both sides and adds background transitioning #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
92ad160
Improvements
vitalyrotari Feb 19, 2015
6007fcb
Add toggleDrawer method
vitalyrotari Feb 19, 2015
40541b7
Fix drawerState update
vitalyrotari Feb 19, 2015
c228822
Cleanup code
vitalyrotari Feb 19, 2015
8f47a86
Add drawer overlay
vitalyrotari Feb 19, 2015
235d3e4
Add drawer-overlay styles
vitalyrotari Feb 19, 2015
fc231b8
Optimise drawer transition
vitalyrotari Feb 19, 2015
2c133c6
Fix drag when drawer is opened
vitalyrotari Feb 19, 2015
fb73dd6
HardwareBackButton support
vitalyrotari Feb 19, 2015
e6878e5
remove semi-colon from "drawer" directive
vitalyrotari Feb 19, 2015
55dd45a
Remove bracket from "isTarget" method
vitalyrotari Feb 19, 2015
abb17d8
Improve dragging
vitalyrotari Feb 19, 2015
34b485c
Fix demo
vitalyrotari Feb 20, 2015
c55039f
Drag improvements and debug mode
vitalyrotari Feb 20, 2015
9f64239
Fix stopImmediatePropagation
vitalyrotari Feb 20, 2015
f242bdb
Optimise "isClose" method
vitalyrotari Feb 20, 2015
12248c4
Add support for fast swipe
vitalyrotari Feb 20, 2015
fe9fd33
Cleanup code, remove console.log spams (use Developers Tools for debug)
vitalyrotari Feb 20, 2015
407479d
Remove debug attribute
vitalyrotari Feb 20, 2015
24814dd
Fix drawer overlay
vitalyrotari Feb 20, 2015
9d95d67
update drawer to work on right side
brybott May 1, 2015
007337d
updated README.md
brybott May 1, 2015
ad58e77
fixed closing from wrong side of screen
brybott May 2, 2015
0145d63
Also drag menu when drag is started from the overlay and reaches target
henritoivar Jul 23, 2015
8c7d3f7
Update ionic.contrib.drawer.js
Jastkast Oct 5, 2015
cc22579
Merge pull request #2 from Jastkast/patch-1
brybott Oct 12, 2015
f837154
Merge pull request #1 from henritoivar/master
brybott Oct 12, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
.*.sw*
/.idea
56 changes: 56 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,59 @@ ionic-contrib-drawer
====================

A side menu drawer for Ionic apps

#####Setting up:

Clone the ionic-ion-drawer repo into the lib folder in your ionic project so it looks like:

*yourProjectName/www/lib/ionic-ion-drawer*

Add the ionic-contrib-drawer.js and ionic-contrib-drawer.css files to your index file

<link href="lib/ionic-ion-drawer/ionic.contrib.drawer.css" rel="stylesheet">
<script src="lib/ionic-ion-drawer/ionic.contrib.drawer.js"></script>

Add ionic.contrib.drawer to your Angular app:

angular.module('App', [
'ionic',
'ionic.contrib.drawer'
])

#####Usage:

Add the `<drawer>` directive to your ionic templates or index.html files.

#####Example:

<ion-view>
<ion-content>
<div class="bar bar-header bar-dark">
<h1 class="title">Example</h1>
</div>
</ion-content>
<drawer side="right">
<ion-content>
<h2>Menu</h2>
<button ng-click="closeDrawer()">Close</button>
<ion-list>
<ion-item>Friends</ion-item>
<ion-item>Favorites</ion-item>
<ion-item>Search</ion-item>
</ion-list>
</ion-content>
</drawer>
</ion-view>



Change the 'side' attribute of the `<drawer>` to either "right" or "left" to switch the side the drawer opens from.

#####Credits:

driftyco: https://github.com/driftyco (original build)

vitalyrotari: https://github.com/vitalyrotari (bug fixes, improved performance, background fading
transition)

brybott: https://github.com/brybott (right side functionality)
10 changes: 2 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,10 @@
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Seed App</title>

<!-- ionic css -->
<!--<link href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet">-->
<link href="../ionic/dist/css/ionic.css" rel="stylesheet">
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="ionic.contrib.drawer.css">

<!-- angularjs scripts -->
<script src="../ionic/dist/js/ionic.bundle.js"></script>

<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
<script src="ionic.contrib.drawer.js"></script>
<style>
drawer {
Expand All @@ -36,7 +31,6 @@
}
</style>
</head>

<!--
'starter' is the name of this angular module (js/app.js)
-->
Expand Down
23 changes: 21 additions & 2 deletions ionic.contrib.drawer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,38 @@ drawer {
}

drawer.animate {
-webkit-transition: 0.4s all ease-in-out;
transition: 0.4s all ease-in-out;
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}

drawer.left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
box-shadow: 1px 0px 10px rgba(0,0,0,0.3);
}

drawer.right {
right: 0;
top: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
box-shadow: -1px 0px 10px rgba(0,0,0,0.3);
}

.drawer-overlay {
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}

.drawer-overlay.animate {
-webkit-transition: 0.4s opacity ease-in-out;
transition: 0.4s opacity ease-in-out;
}
Loading