wip
This commit is contained in:
		
							parent
							
								
									43ee5267c2
								
							
						
					
					
						commit
						2a54802efa
					
				
					 1 changed files with 11 additions and 0 deletions
				
			
		| 
						 | 
					@ -1,3 +1,7 @@
 | 
				
			||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * マウスオーバーするとユーザーがプレビューされる要素を設定します
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
 | 
					
 | 
				
			||||||
import MkUserPreview from '../components/user-preview.vue';
 | 
					import MkUserPreview from '../components/user-preview.vue';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
| 
						 | 
					@ -19,25 +23,31 @@ export default {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		const show = () => {
 | 
							const show = () => {
 | 
				
			||||||
			if (tag) return;
 | 
								if (tag) return;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			tag = new MkUserPreview({
 | 
								tag = new MkUserPreview({
 | 
				
			||||||
				parent: vn.context,
 | 
									parent: vn.context,
 | 
				
			||||||
				propsData: {
 | 
									propsData: {
 | 
				
			||||||
					user: self.user
 | 
										user: self.user
 | 
				
			||||||
				}
 | 
									}
 | 
				
			||||||
			}).$mount();
 | 
								}).$mount();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			const preview = tag.$el;
 | 
								const preview = tag.$el;
 | 
				
			||||||
			const rect = el.getBoundingClientRect();
 | 
								const rect = el.getBoundingClientRect();
 | 
				
			||||||
			const x = rect.left + el.offsetWidth + window.pageXOffset;
 | 
								const x = rect.left + el.offsetWidth + window.pageXOffset;
 | 
				
			||||||
			const y = rect.top + window.pageYOffset;
 | 
								const y = rect.top + window.pageYOffset;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			preview.style.top = y + 'px';
 | 
								preview.style.top = y + 'px';
 | 
				
			||||||
			preview.style.left = x + 'px';
 | 
								preview.style.left = x + 'px';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			preview.addEventListener('mouseover', () => {
 | 
								preview.addEventListener('mouseover', () => {
 | 
				
			||||||
				clearTimeout(self.hideTimer);
 | 
									clearTimeout(self.hideTimer);
 | 
				
			||||||
			});
 | 
								});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			preview.addEventListener('mouseleave', () => {
 | 
								preview.addEventListener('mouseleave', () => {
 | 
				
			||||||
				clearTimeout(self.showTimer);
 | 
									clearTimeout(self.showTimer);
 | 
				
			||||||
				self.hideTimer = setTimeout(self.close, 500);
 | 
									self.hideTimer = setTimeout(self.close, 500);
 | 
				
			||||||
			});
 | 
								});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			document.body.appendChild(preview);
 | 
								document.body.appendChild(preview);
 | 
				
			||||||
		};
 | 
							};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -53,6 +63,7 @@ export default {
 | 
				
			||||||
			self.hideTimer = setTimeout(self.close, 500);
 | 
								self.hideTimer = setTimeout(self.close, 500);
 | 
				
			||||||
		});
 | 
							});
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	unbind(el, binding, vn) {
 | 
						unbind(el, binding, vn) {
 | 
				
			||||||
		const self = vn.context._userPreviewDirective_;
 | 
							const self = vn.context._userPreviewDirective_;
 | 
				
			||||||
		clearTimeout(self.showTimer);
 | 
							clearTimeout(self.showTimer);
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue