├── LICENSE
├── README.md
├── components
    └── UnlockSlider.vue
├── demo.gif
├── index.js
└── package.json


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # A NativeScript-Vue component for "Slide to unlock"
 2 | 
 3 | Slide to unlock in iOS style with animations made with NativeScript-Vue. Works on iOS and Android.
 4 | 
 5 | [![npm](https://img.shields.io/npm/v/@nativescript-community/ui-vue-unlock-slider.svg)](https://www.npmjs.com/package/@nativescript-community/ui-vue-unlock-slider)
 6 | 
 7 | <img src="https://raw.githubusercontent.com/nativescript-community/ui-vue-slide-to-unlock/master/demo.gif" width="300">
 8 | 
 9 | ## Installation
10 | 
11 | ```
12 | ns plugin add @nativescript-community/ui-vue-unlock-slider
13 | ```
14 | 
15 | ## Usage
16 | ```diff
17 | // app.js
18 | import Vue from 'nativescript-vue'
19 | ...
20 | + import UnlockSlider from '@nativescript-community/ui-vue-unlock-slider'
21 | + Vue.use(UnlockSlider)
22 | ```
23 | 
24 | ```xml
25 | <UnlockSlider ref="unlockSlider" @change="sliderChange" />
26 | ```
27 | 
28 | ```js
29 | export default {
30 |   data() {
31 |     return {
32 |       slidePercent: 0
33 |     }
34 |   },
35 |   methods: {
36 |     sliderChange(percent) {
37 |       this.slidePercent = percent;
38 |     },
39 |     reset() {
40 |       this.$refs.unlockSlider.reset();
41 |     }
42 |   }
43 | }
44 | ```
45 | 
46 | ## Properties
47 | | Name                     | Type   | Default value   |
48 | | ------------------------ | ------ | --------------- |
49 | | height                   | Number | 70              |
50 | | radius                   | Number | 70              |
51 | | containerBackgroundColor | String | lightgray       |
52 | | buttonText               | String | →               |
53 | | buttonTextSize           | Number | 20              |
54 | | buttonTextColor          | String | black           |
55 | | buttonTextFontWeight     | String | normal          |
56 | | buttonBackgroundColor    | String | white           |
57 | | infoText                 | String | Slide to unlock |
58 | | infoTextSize             | Number | 16              |
59 | | infoTextColor            | String | black           |
60 | 
61 | ## Events
62 | | Name   | Type   | Value   |
63 | | -------| ------ | ------- |
64 | | change | Number | 0.00-1.00 |
65 | 


--------------------------------------------------------------------------------
/components/UnlockSlider.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <GridLayout
  3 |     :background="containerBackgroundColor"
  4 |     width="100%"
  5 |     margin="0"
  6 |     padding="2"
  7 |     :borderRadius="radius"
  8 |     :height="buttonHeight"
  9 |   >
 10 |     <Label
 11 |       ref="infoText"
 12 |       width="100%"
 13 |       textAlignment="center"
 14 |       margin="0"
 15 |       padding="0"
 16 |       :color="infoTextColor"
 17 |       :fontSize="infoTextSize"
 18 |       :text="infoText"
 19 |       verticalAlignment="center"
 20 |       :opacity="1 - slidePercent * 1.5"
 21 |     />
 22 |     <Button
 23 |       ref="slideButton"
 24 |       class="slideButton"
 25 |       @pan="slide"
 26 |       z-index="0"
 27 |       :borderRadius="radius"
 28 |       :width="buttonHeight"
 29 |       :height="buttonHeight"
 30 |       :color="buttonTextColor"
 31 |       :fontWeight="buttonTextFontWeight"
 32 |       :backgroundColor="buttonBackgroundColor"
 33 |       margin="0"
 34 |       padding="0"
 35 |       :fontSize="buttonTextSize"
 36 |       :text="buttonText"
 37 |       horizontalAlignment="left"
 38 |     />
 39 |   </GridLayout>
 40 | </template>
 41 | 
 42 | <script>
 43 | export default {
 44 |   methods: {
 45 |     reset() {
 46 |       this.$refs.slideButton.nativeView
 47 |         .animate({
 48 |           translate: { x: 0, y: 0 },
 49 |           duration: 100,
 50 |         })
 51 |         .then(() => {
 52 |           this.slidePercent = 0;
 53 |         });
 54 |     },
 55 |     slide(args) {
 56 |       const buttonView = this.$refs.slideButton.nativeView;
 57 |       const gridViewWidth =
 58 |         buttonView.parent.getActualSize().width -
 59 |         buttonView.parent.paddingLeft -
 60 |         buttonView.parent.paddingRight;
 61 |       if (args.state === 1) {
 62 |         // Start paning
 63 |         this.prevDeltaX = 0;
 64 |         this.slidePercent = 0;
 65 |       } else if (args.state === 2) {
 66 |         // Paning
 67 |         buttonView.translateX += args.deltaX - this.prevDeltaX;
 68 |         this.prevDeltaX = args.deltaX;
 69 |         if (buttonView.translateX < 0) {
 70 |           buttonView.translateX = 0;
 71 |           this.prevDeltaX = 0;
 72 |         } else {
 73 |           const buttonPosition = this.buttonHeight + buttonView.translateX;
 74 |           if (buttonPosition > gridViewWidth) {
 75 |             buttonView.translateX = gridViewWidth - this.buttonHeight;
 76 |             this.prevDeltaX = 0;
 77 |           }
 78 |         }
 79 |         this.slidePercent =
 80 |           (this.buttonHeight + buttonView.translateX) / gridViewWidth;
 81 |       } else if (args.state === 3) {
 82 |         // Done paning
 83 |         if (gridViewWidth !== this.buttonHeight + buttonView.translateX) {
 84 |           this.reset();
 85 |         }
 86 |       }
 87 |     },
 88 |   },
 89 |   data() {
 90 |     return {
 91 |       prevDeltaX: 0,
 92 |       slidePercent: 0,
 93 |     };
 94 |   },
 95 |   watch: {
 96 |     slidePercent: function () {
 97 |       this.$emit("change", this.slidePercent);
 98 |     },
 99 |   },
100 |   computed: {
101 |     buttonHeight() {
102 |       return this.height - 2;
103 |     },
104 |   },
105 |   props: {
106 |     height: {
107 |       type: Number,
108 |       default: 70,
109 |     },
110 |     radius: {
111 |       type: Number,
112 |       default: 70,
113 |     },
114 |     containerBackgroundColor: {
115 |       type: String,
116 |       default: "lightgray",
117 |     },
118 |     buttonText: {
119 |       type: String,
120 |       default: "→",
121 |     },
122 |     buttonTextSize: {
123 |       type: Number,
124 |       default: 20,
125 |     },
126 |     buttonTextColor: {
127 |       type: String,
128 |       default: "black",
129 |     },
130 |     buttonTextFontWeight: {
131 |       type: String,
132 |       default: "normal",
133 |     },
134 |     buttonBackgroundColor: {
135 |       type: String,
136 |       default: "white",
137 |     },
138 |     infoText: {
139 |       type: String,
140 |       default: "Slide to unlock",
141 |     },
142 |     infoTextSize: {
143 |       type: Number,
144 |       default: 16,
145 |     },
146 |     infoTextColor: {
147 |       type: String,
148 |       default: "black",
149 |     },
150 |   },
151 | };
152 | </script>


--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativescript-community/ui-vue-unlock-slider/a3a604501ba84a47891885b44bfa0d677c9c1ff0/demo.gif


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import UnlockSlider from './components/UnlockSlider'
2 | 
3 | export default function install(Vue) {  
4 |   Vue.component('UnlockSlider', UnlockSlider)
5 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "@nativescript-community/ui-vue-unlock-slider",
 3 | 	"version": "1.0.0",
 4 | 	"description": "A NativeScript-Vue component for 'Slide-to-unlock'",
 5 | 	"main": "index.js",
 6 | 	"nativescript": {
 7 | 		"plugin": {
 8 | 			"vue": "true"
 9 | 		}
10 | 	},
11 | 	"files": [
12 | 		"index.js",
13 | 		"components"
14 | 	],
15 | 	"keywords": [
16 | 		"nativescript",
17 | 		"nativescript-vue",
18 | 		"unlock",
19 | 		"slider"
20 | 	],
21 | 	"author": "André Sharghi <a.sharghi.mail@gmail.com>",
22 | 	"license": "MIT",
23 | 	"homepage": "https://github.com/nativescript-community/ui-vue-unlock-slider/#readme"
24 | }


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