mirror of
				https://github.com/KevinMidboe/vue-js-modal.git
				synced 2025-10-29 18:00:20 +00:00 
			
		
		
		
	Added reset flag that resets position/size before opening modal, cleaned code.
This commit is contained in:
		
							
								
								
									
										55
									
								
								dist/index.js
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										55
									
								
								dist/index.js
									
									
									
									
										vendored
									
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							
							
								
								
									
										55
									
								
								dist/ssr.index.js
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										55
									
								
								dist/ssr.index.js
									
									
									
									
										vendored
									
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							| @@ -55,6 +55,10 @@ | |||||||
|         type: [Boolean, String], |         type: [Boolean, String], | ||||||
|         default: false |         default: false | ||||||
|       }, |       }, | ||||||
|  |       reset: { | ||||||
|  |         type: Boolean, | ||||||
|  |         default: false | ||||||
|  |       }, | ||||||
|       transition: { |       transition: { | ||||||
|         type: String |         type: String | ||||||
|       }, |       }, | ||||||
| @@ -121,9 +125,6 @@ | |||||||
|       Resizer |       Resizer | ||||||
|     }, |     }, | ||||||
|     data () { |     data () { | ||||||
|       let width = parseNumber(this.width) |  | ||||||
|       let height = parseNumber(this.height) |  | ||||||
|  |  | ||||||
|       return { |       return { | ||||||
|         visible: false, |         visible: false, | ||||||
|  |  | ||||||
| @@ -138,13 +139,10 @@ | |||||||
|         }, |         }, | ||||||
|  |  | ||||||
|         modal: { |         modal: { | ||||||
|           widthInit: 0, |           width: 0, | ||||||
|           width: width.value, |           widthType: 'px', | ||||||
|           widthType: width.type, |           height: 0, | ||||||
|  |           heightType: 'px' | ||||||
|           heightInit: 0, |  | ||||||
|           height: height.value, |  | ||||||
|           heightType: height.type |  | ||||||
|         }, |         }, | ||||||
|  |  | ||||||
|         window: { |         window: { | ||||||
| @@ -177,6 +175,9 @@ | |||||||
|         } |         } | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|  |     created () { | ||||||
|  |       this.setInitialSize() | ||||||
|  |     }, | ||||||
|     beforeMount () { |     beforeMount () { | ||||||
|       Modal.event.$on('toggle', (name, state, params) => { |       Modal.event.$on('toggle', (name, state, params) => { | ||||||
|         if (name === this.name) { |         if (name === this.name) { | ||||||
| @@ -248,6 +249,17 @@ | |||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|     methods: { |     methods: { | ||||||
|  |       setInitialSize () { | ||||||
|  |         let { modal } = this | ||||||
|  |         let width = parseNumber(this.width) | ||||||
|  |         let height = parseNumber(this.height) | ||||||
|  |  | ||||||
|  |         modal.width = width.value | ||||||
|  |         modal.widthType = width.type | ||||||
|  |         modal.height = height.value | ||||||
|  |         modal.heightType = height.type | ||||||
|  |       }, | ||||||
|  |  | ||||||
|       onWindowResize () { |       onWindowResize () { | ||||||
|         this.window.width = window.innerWidth |         this.window.width = window.innerWidth | ||||||
|         this.window.height = window.innerHeight |         this.window.height = window.innerHeight | ||||||
| @@ -267,16 +279,7 @@ | |||||||
|  |  | ||||||
|         return Vue.util.extend(data, params || {}); |         return Vue.util.extend(data, params || {}); | ||||||
|       }, |       }, | ||||||
|     /*  |  | ||||||
|       adaptSize () { |  | ||||||
|        if (this.adaptive) { |  | ||||||
|           this.modal.width = inRange(this.minWidth, this.window.width, |  | ||||||
|             this.trueModalWidth) |  | ||||||
|           this.modal.height = inRange(this.minHeight, this.window.height, |  | ||||||
|             this.trueModalHeight) |  | ||||||
|         } |  | ||||||
|       }, |  | ||||||
|     */ |  | ||||||
|       onModalResize (event) { |       onModalResize (event) { | ||||||
|         this.modal.widthType = 'px' |         this.modal.widthType = 'px' | ||||||
|         this.modal.width = event.size.width |         this.modal.width = event.size.width | ||||||
| @@ -287,18 +290,31 @@ | |||||||
|         const { size } = this.modal |         const { size } = this.modal | ||||||
|         const resizeEvent = this.genEventObject({ size }); |         const resizeEvent = this.genEventObject({ size }); | ||||||
|  |  | ||||||
|         console.log(resizeEvent) |  | ||||||
|  |  | ||||||
|         this.$emit('resize', resizeEvent) |         this.$emit('resize', resizeEvent) | ||||||
|       }, |       }, | ||||||
|  |  | ||||||
|       toggle (state, params) { |       toggle (state, params) { | ||||||
|         const beforeEventName = this.visible ? 'before-close' : 'before-open' |         const { reset, visible } = this | ||||||
|         const afterEventName = this.visible ? 'closed' : 'opened' |  | ||||||
|  |         const beforeEventName = visible  | ||||||
|  |           ? 'before-close'  | ||||||
|  |           : 'before-open' | ||||||
|  |            | ||||||
|  |         const afterEventName = visible  | ||||||
|  |           ? 'closed'  | ||||||
|  |           : 'opened' | ||||||
|  |  | ||||||
|  |         if (beforeEventName === 'before-open' && reset) { | ||||||
|  |           this.setInitialSize() | ||||||
|  |           this.shift.left = 0 | ||||||
|  |           this.shift.top = 0 | ||||||
|  |         } | ||||||
|  |  | ||||||
|         let stopEventExecution = false |         let stopEventExecution = false | ||||||
|  |  | ||||||
|         const stop = () => { stopEventExecution = true } |         const stop = () => { | ||||||
|  |           stopEventExecution = true | ||||||
|  |         } | ||||||
|         const beforeEvent = this.genEventObject({ stop, state, params }) |         const beforeEvent = this.genEventObject({ stop, state, params }) | ||||||
|  |  | ||||||
|         this.$emit(beforeEventName, beforeEvent) |         this.$emit(beforeEventName, beforeEvent) | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user