├── .github
    └── dependabot.yml
├── .gitignore
├── LICENSE
├── README.md
├── components
    └── MultiDrawer.vue
├── index.js
├── multi-drawer-demo.gif
└── package.json


/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: npm
4 |   directory: "/"
5 |   schedule:
6 |     interval: daily
7 |   open-pull-requests-limit: 10
8 |   versioning-strategy: lockfile-only
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 NativeScript-Vue
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NativeScript-Vue Multi Drawer
 2 | 
 3 | A plugin which provides a drawer component that supports multiple drawers.
 4 | 
 5 | <img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-multi-drawer/master/multi-drawer-demo.gif" width="350">
 6 | 
 7 | All drawers are optional, and can be configured individually.
 8 | 
 9 | Features:
10 |  * drawers on left, right, top and bottom
11 |  * swipe to open
12 |  * swipe to close
13 |  * tap outside to close
14 |  * progressively dim main content as the drawer is opened
15 |  
16 |  ## Quick Start
17 |  
18 |  ```bash
19 | $ npm i --save nativescript-vue-multi-drawer
20 |  ```
21 |  
22 | 
23 | ```diff
24 | // main.js
25 | import Vue from 'nativescript-vue'
26 | ...
27 | + import MultiDrawer from 'nativescript-vue-multi-drawer'
28 | + Vue.use(MultiDrawer)
29 | ```
30 | 
31 | Optionally set default options by passing `options` when installing the plugin:
32 | ```js
33 | Vue.use(MultiDrawer, { 
34 |   // override any option here
35 |   // for example enable debug mode
36 |   debug: true
37 | })
38 | ```
39 | 
40 | For the available options check [the source of defaultOptions](https://github.com/nativescript-vue/nativescript-vue-multi-drawer/blob/98df9f4d342ebae12c761e45f4f23f68c15fb094/index.js#L5-L76)
41 | 
42 | ```xml
43 | <MultiDrawer>
44 |   <StackLayout slot="left">
45 |     <Label text="Im in the left drawer" />  
46 |   </StackLayout>
47 |   <StackLayout slot="right">
48 |     <Label text="Im in the right drawer" />  
49 |   </StackLayout>
50 |   <StackLayout slot="top">
51 |     <Label text="Im in the top drawer" />  
52 |   </StackLayout>
53 |   <StackLayout slot="bottom">
54 |     <Label text="Im in the bottom drawer" />  
55 |   </StackLayout>
56 |   
57 |   <Frame /> <!-- main content goes into the default slot -->
58 | </MultiDrawer>
59 | ```
60 | 
61 | The component will only enable drawers that have contents in them, so if you only need a left and a right side drawer, you can just remove the top and bottom slots and it will work as expected.
62 | 
63 | ### Opening a drawer from code
64 | 
65 | Assign a ref to the Drawer component
66 | ```xml
67 | <MultiDrawer ref="drawer" />
68 | ```
69 | 
70 | And use `this.$refs.drawer.open(side)` where `side` is a string: `left`, `right`, `top` or `bottom`.
71 | 
72 | ### Using v-model to toggle the drawer
73 | 
74 | The drawer can be opened through v-model. This is useful as it allows controlling the drawer state with Vue's reactivity system. For example, the value of v-model could easily come from a vuex store.
75 | 
76 | ```xml
77 | <MultiDrawer v-model="drawerState" />
78 | ```
79 | 
80 | ```js
81 | export default {
82 |   data() {
83 |     return {
84 |       drawerState: false // closed
85 |     }
86 |   },
87 |   
88 |   methods: {
89 |     doStuff() {
90 |       // do stuff
91 |       this.drawerState = 'left' // this will open the left drawer
92 |     }
93 |   }
94 | }
95 | ```
96 | 


--------------------------------------------------------------------------------
/components/MultiDrawer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <GridLayout iosOverflowSafeArea="true">
  3 |         <!-- Main Content (default slot) -->
  4 |         <slot/>
  5 | 
  6 |         <Label v-show="backdropVisible"
  7 |                ref="backDrop"
  8 |                iosOverflowSafeArea="true"
  9 |                opacity="0"
 10 |                :backgroundColor="optionsInternal.backdropColor"
 11 |                @pan="onBackDropPan"
 12 |                @tap="close()"/>
 13 | 
 14 |         <template v-for="side in computedSidesEnabled">
 15 |             <!-- Drawer Content -->
 16 |             <GridLayout @layoutChanged="onDrawerLayoutChange(side)"
 17 |                         @tap="noop"
 18 |                         @pan="onDrawerPan(side, $event)"
 19 |                         :ref="`${side}Drawer`"
 20 |                         :style="computedDrawerStyle(side)">
 21 |                 <slot :name="side"/>
 22 |             </GridLayout>
 23 |             <!-- Open Trigger -->
 24 |             <Label v-show="computedShowSwipeOpenTrigger(side)"
 25 |                    v-bind="computedSwipeOpenTriggerProperties(side)"
 26 |                    @pan="onOpenTriggerPan(side, $event)"/>
 27 |         </template>
 28 |     </GridLayout>
 29 | </template>
 30 | 
 31 | <script>
 32 |   import {Utils} from "@nativescript/core"
 33 |   import mergeOptions from 'merge-options'
 34 |   import {defaultOptions} from "../index";
 35 | 
 36 |   export default {
 37 |     model: {
 38 |       prop: 'state',
 39 |       event: 'stateChange',
 40 |     },
 41 |     props: {
 42 |       enabled: {
 43 |         type: Boolean,
 44 |         default: true,
 45 |       },
 46 |       options: {
 47 |         type: Object,
 48 |         required: false,
 49 |       },
 50 |       state: {
 51 |         type: [String, Boolean],
 52 |         default: false,
 53 |       },
 54 |     },
 55 |     watch: {
 56 |       async state(side) {
 57 |         if (this.computedOpenSide !== side) {
 58 |           await this.close()
 59 |         }
 60 |         if (side) {
 61 |           this.open(side)
 62 |         }
 63 |       },
 64 |       options: {
 65 |         handler(options) {
 66 |           this.optionsInternal = mergeOptions(defaultOptions, options)
 67 |         },
 68 |         immediate: true,
 69 |         deep: true,
 70 |       },
 71 |     },
 72 |     data() {
 73 |       return {
 74 |         // handled by the watcher
 75 |         optionsInternal: {},
 76 |         sides: {
 77 |           left: {
 78 |             open: false,
 79 |             translationOffset: 0,
 80 |           },
 81 |           right: {
 82 |             open: false,
 83 |             translationOffset: 0,
 84 |           },
 85 |           top: {
 86 |             open: false,
 87 |             translationOffset: 0,
 88 |           },
 89 |           bottom: {
 90 |             open: false,
 91 |             translationOffset: 0,
 92 |           },
 93 |         },
 94 |         backdropVisible: false,
 95 |         isAnimating: false,
 96 |         isPanning: false,
 97 |       }
 98 |     },
 99 |     computed: {
100 |       computedSidesEnabled() {
101 |         const validSides = Object.keys(this.sides)
102 |         return Object.keys(this.$slots).filter(slotName =>
103 |           validSides.includes(slotName)
104 |         )
105 |       },
106 |       computedDrawerStyle() {
107 |         return side => ({
108 |           transform: `translate${this.optionsInternal[side].axis}(${
109 |             this.sides[side].open ? 0 : this.sides[side].translationOffset
110 |             })`,
111 |           ...(this.optionsInternal[side].width
112 |             ? {width: this.optionsInternal[side].width}
113 |             : {}),
114 |           ...(this.optionsInternal[side].height
115 |             ? {height: this.optionsInternal[side].height}
116 |             : {}),
117 |           backgroundColor: this.optionsInternal[side].backgroundColor,
118 |           [this.optionsInternal[side].axis === 'X'
119 |             ? 'horizontalAlignment'
120 |             : 'verticalAlignment']: side,
121 |         })
122 |       },
123 |       computedSwipeOpenTriggerProperties() {
124 |         return side => ({
125 |           ...(this.optionsInternal[side].swipeOpenTriggerWidth
126 |             ? {width: this.optionsInternal[side].swipeOpenTriggerWidth}
127 |             : {}),
128 |           ...(this.optionsInternal[side].swipeOpenTriggerHeight
129 |             ? {height: this.optionsInternal[side].swipeOpenTriggerHeight}
130 |             : {}),
131 |           [this.optionsInternal[side].axis === 'X'
132 |             ? 'horizontalAlignment'
133 |             : 'verticalAlignment']: side,
134 |           ...(this.optionsInternal.debug
135 |             ? {backgroundColor: 'rgba(0, 255, 0, 0.3)'}
136 |             : {}),
137 |           ...this.optionsInternal[side].swipeOpenTriggerProperties,
138 |         })
139 |       },
140 |       computedShowSwipeOpenTrigger() {
141 |         return side => {
142 |           if (!this.optionsInternal[side].canSwipeOpen) {
143 |             return false
144 |           }
145 |           return !(this.computedOpenSide || this.isPanning || this.isAnimating)
146 |         }
147 |       },
148 |       computedOpenSide() {
149 |         return (
150 |           this.computedSidesEnabled.find(side => this.sides[side].open) || false
151 |         )
152 |       },
153 |     },
154 |     methods: {
155 |       noop() {
156 |         // helper for catching events that we don't want to pass through.
157 |       },
158 |       async open(side = null) {
159 |         if (!side) {
160 |           if (!this.computedSidesEnabled.length) {
161 |             throw new Error(
162 |               'No sides are enabled, at least one side must be enabled to open the drawer'
163 |             )
164 |           }
165 |           side = this.computedSidesEnabled[0]
166 |         }
167 | 
168 |         if (!this.computedSidesEnabled.includes(side)) {
169 |           return
170 |         }
171 | 
172 |         if (this.isPanning || this.isAnimating) {
173 |           return
174 |         }
175 | 
176 |         this.isPanning = false
177 |         this.isAnimating = true
178 |         this.backdropVisible = true
179 | 
180 |         const duration = this.optionsInternal[side].animation.openDuration
181 | 
182 |         this.$refs.backDrop.nativeView.animate({
183 |           opacity: 1,
184 |           duration,
185 |         })
186 |         await this.$refs[`${side}Drawer`][0].nativeView.animate({
187 |           translate: {
188 |             x: 0,
189 |             y: 0,
190 |           },
191 |           duration,
192 |         })
193 | 
194 |         this.sides[side].open = true
195 |         this.isAnimating = false
196 |         this.$emit('stateChange', side)
197 |       },
198 |       async close(side = null) {
199 |         if (this.isAnimating) {
200 |           return
201 |         }
202 |         if (!side) {
203 |           side = this.computedOpenSide
204 |         }
205 |         if (!side) {
206 |           return
207 |         }
208 | 
209 |         this.isPanning = false
210 |         this.isAnimating = true
211 | 
212 |         const duration = this.optionsInternal[side].animation.closeDuration
213 | 
214 |         this.$refs[`${side}Drawer`][0].nativeView.animate({
215 |           translate: {
216 |             ...(this.optionsInternal[side].axis === 'X'
217 |               ? {x: this.sides[side].translationOffset}
218 |               : {x: 0}),
219 |             ...(this.optionsInternal[side].axis === 'Y'
220 |               ? {y: this.sides[side].translationOffset}
221 |               : {y: 0}),
222 |           },
223 |           duration,
224 |         })
225 |         await this.$refs.backDrop.nativeView.animate({
226 |           opacity: 0,
227 |           duration,
228 |         })
229 | 
230 |         this.sides[side].open = false
231 |         this.backdropVisible = false
232 |         this.isAnimating = false
233 |         this.$emit('stateChange', false)
234 |       },
235 |       onDrawerLayoutChange(side) {
236 |         const view = this.$refs[`${side}Drawer`][0].nativeView
237 |         this.sides[side].translationOffset =
238 |           this.optionsInternal[side].translationOffsetMultiplier *
239 |           Utils.layout.toDeviceIndependentPixels(
240 |             this.optionsInternal[side].axis === 'X'
241 |               ? view.getMeasuredWidth()
242 |               : view.getMeasuredHeight()
243 |           )
244 |       },
245 |       onBackDropPan(args) {
246 |         this.onDrawerPan(this.computedOpenSide, args)
247 |       },
248 |       onOpenTriggerPan(side, args) {
249 |         this.onDrawerPan(side, args)
250 |       },
251 |       onDrawerPan(side, args) {
252 |         if ((this.isPanning && this.isPanning !== side) || this.isAnimating) {
253 |           return
254 |         }
255 |         if (!side) {
256 |           return
257 |         }
258 |         const view = this.$refs[`${side}Drawer`][0].nativeView
259 |         let panProgress = 0
260 | 
261 |         if (args.state === 1) {
262 |           // down
263 |           this.isPanning = side
264 | 
265 |           if (!this.sides[side].open) {
266 |             this.$refs.backDrop.nativeView.opacity = 0
267 |             this.backdropVisible = true
268 |           }
269 | 
270 |           this.prevDeltaX = 0
271 |           this.prevDeltaY = 0
272 |         } else if (args.state === 2) {
273 |           // panning
274 | 
275 |           if (this.optionsInternal[side].axis === 'X') {
276 |             this.constrainX(
277 |               view,
278 |               side,
279 |               view.translateX + (args.deltaX - this.prevDeltaX)
280 |             )
281 |             panProgress =
282 |               Math.abs(view.translateX) /
283 |               Math.abs(this.sides[side].translationOffset)
284 |           } else {
285 |             this.constrainY(
286 |               view,
287 |               side,
288 |               view.translateY + (args.deltaY - this.prevDeltaY)
289 |             )
290 |             panProgress =
291 |               Math.abs(view.translateY) /
292 |               Math.abs(this.sides[side].translationOffset)
293 |           }
294 | 
295 |           this.prevDeltaX = args.deltaX
296 |           this.prevDeltaY = args.deltaY
297 | 
298 |           this.$refs.backDrop.nativeView.opacity = 1 - panProgress
299 |         } else if (args.state === 3) {
300 |           // up
301 |           this.isPanning = false
302 | 
303 |           if (this.computedOpenSide === side) {
304 |             // already open
305 |             let distanceFromFullyOpen = 0
306 |             if (this.optionsInternal[side].axis === 'X') {
307 |               distanceFromFullyOpen = Math.abs(view.translateX)
308 |             } else {
309 |               distanceFromFullyOpen = Math.abs(view.translateY)
310 |             }
311 |             if (
312 |               distanceFromFullyOpen >
313 |               this.optionsInternal[side].swipeCloseTriggerMinDrag
314 |             ) {
315 |               this.close(side)
316 |             } else {
317 |               this.open(side)
318 |             }
319 |           } else {
320 |             const offsetAbs = Math.abs(this.sides[side].translationOffset)
321 |             const multiplier = this.optionsInternal[side]
322 |               .translationOffsetMultiplier
323 |             let distanceFromEdge = 0
324 |             if (this.optionsInternal[side].axis === 'X') {
325 |               distanceFromEdge = offsetAbs - multiplier * view.translateX
326 |             } else {
327 |               distanceFromEdge = offsetAbs - multiplier * view.translateY
328 |             }
329 | 
330 |             if (
331 |               distanceFromEdge <
332 |               this.optionsInternal[side].swipeOpenTriggerMinDrag
333 |             ) {
334 |               this.close(side)
335 |             } else {
336 |               this.open(side)
337 |             }
338 |           }
339 | 
340 |           this.prevDeltaX = 0
341 |           this.prevDeltaY = 0
342 |         }
343 |       },
344 |       constrainX(view, side, x) {
345 |         const offset = this.sides[side].translationOffset
346 |         if (offset < 0) {
347 |           if (x > 0) {
348 |             view.translateX = 0
349 |           } else if (this.sides[side].open && x < offset) {
350 |             view.translateX = offset
351 |           } else {
352 |             view.translateX = x
353 |           }
354 |         } else {
355 |           if (x < 0) {
356 |             view.translateX = 0
357 |           } else if (this.sides[side].open && x > offset) {
358 |             view.translateX = offset
359 |           } else {
360 |             view.translateX = x
361 |           }
362 |         }
363 |       },
364 |       constrainY(view, side, y) {
365 |         const offset = this.sides[side].translationOffset
366 |         if (offset < 0) {
367 |           if (y > 0) {
368 |             view.translateY = 0
369 |           } else if (this.sides[side].open && y < offset) {
370 |             view.translateY = offset
371 |           } else {
372 |             view.translateY = y
373 |           }
374 |         } else {
375 |           if (y < 0) {
376 |             view.translateY = 0
377 |           } else if (this.sides[side].open && y > offset) {
378 |             view.translateY = offset
379 |           } else {
380 |             view.translateY = y
381 |           }
382 |         }
383 |       },
384 |     },
385 |   }
386 | </script>
387 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import mergeOptions from 'merge-options'
 2 | 
 3 | import MultiDrawer from './components/MultiDrawer'
 4 | 
 5 | export let defaultOptions = {
 6 |   debug: false,
 7 |   backdropColor: 'rgba(0, 0, 0, 0.7)',
 8 |   left: {
 9 |     width: '70%',
10 |     height: null,
11 |     backgroundColor: '#ffffff',
12 |     canSwipeOpen: true,
13 |     swipeOpenTriggerWidth: 30,
14 |     swipeOpenTriggerHeight: null,
15 |     swipeOpenTriggerMinDrag: 50,
16 |     swipeCloseTriggerMinDrag: 50,
17 |     swipeOpenTriggerProperties: {},
18 |     animation: {
19 |       openDuration: 300,
20 |       closeDuration: 300,
21 |     },
22 |     translationOffsetMultiplier: -1,
23 |     axis: 'X',
24 |   },
25 |   right: {
26 |     width: '70%',
27 |     height: null,
28 |     backgroundColor: '#ffffff',
29 |     canSwipeOpen: true,
30 |     swipeOpenTriggerWidth: 30,
31 |     swipeOpenTriggerHeight: null,
32 |     swipeOpenTriggerMinDrag: 50,
33 |     swipeCloseTriggerMinDrag: 50,
34 |     swipeOpenTriggerProperties: {},
35 |     animation: {
36 |       openDuration: 300,
37 |       closeDuration: 300,
38 |     },
39 |     translationOffsetMultiplier: 1,
40 |     axis: 'X',
41 |   },
42 |   top: {
43 |     width: null,
44 |     height: '40%',
45 |     backgroundColor: '#ffffff',
46 |     canSwipeOpen: true,
47 |     swipeOpenTriggerWidth: null,
48 |     swipeOpenTriggerHeight: 50,
49 |     swipeOpenTriggerMinDrag: 50,
50 |     swipeCloseTriggerMinDrag: 50,
51 |     swipeOpenTriggerProperties: {},
52 |     animation: {
53 |       openDuration: 300,
54 |       closeDuration: 300,
55 |     },
56 |     translationOffsetMultiplier: -1,
57 |     axis: 'Y',
58 |   },
59 |   bottom: {
60 |     width: null,
61 |     height: '40%',
62 |     backgroundColor: '#ffffff',
63 |     canSwipeOpen: true,
64 |     swipeOpenTriggerWidth: null,
65 |     swipeOpenTriggerHeight: 30,
66 |     swipeOpenTriggerMinDrag: 50,
67 |     swipeCloseTriggerMinDrag: 50,
68 |     swipeOpenTriggerProperties: {},
69 |     animation: {
70 |       openDuration: 300,
71 |       closeDuration: 300,
72 |     },
73 |     translationOffsetMultiplier: 1,
74 |     axis: 'Y',
75 |   },
76 | }
77 | 
78 | export default function install(Vue, options) {
79 |   if(options) {
80 |     defaultOptions = mergeOptions(defaultOptions, options)
81 |   }
82 | 
83 |   Vue.component('MultiDrawer', MultiDrawer)
84 | }
85 | 


--------------------------------------------------------------------------------
/multi-drawer-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-multi-drawer/2e0647e66b6481cc97f7ed3129fe8f49e1922488/multi-drawer-demo.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nativescript-vue-multi-drawer",
 3 |   "version": "0.0.4",
 4 |   "description": "A NativeScript-Vue component for creating multiple side drawers",
 5 |   "main": "index.js",
 6 |   "nativescript": {
 7 |     "plugin": {
 8 |       "vue": "true"
 9 |     }
10 |   },
11 |   "files": [
12 |     "index.js",
13 |     "components"
14 |   ],
15 |   "scripts": {
16 |     "test": "echo \"Error: no test specified\" && exit 1"
17 |   },
18 |   "keywords": [
19 |     "nativescript",
20 |     "nativescript-vue",
21 |     "drawer",
22 |     "sidedrawer",
23 |     "multi",
24 |     "multiple"
25 |   ],
26 |   "author": "Igor Randjelovic",
27 |   "license": "MIT",
28 |   "dependencies": {
29 |     "merge-options": "^2.0.0"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------