mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
9 years ago
committed by
GitHub
GitHub
52 changed files with 621 additions and 241 deletions
@ -0,0 +1,19 @@ |
|||
<div *sqxModalView="tooltipModal;onRoot:true" closeAlways="true" @fade> |
|||
|
|||
<div class="onboarding-rect" [sqxModalTarget]="for" [offset]="4" [autoPosition]="false" position="full"></div> |
|||
<div class="onboarding-help" [sqxModalTarget]="for" [offset]="4" [autoPosition]="false" [position]="position"> |
|||
<div class="onboarding-text"> |
|||
<ng-content></ng-content> |
|||
</div> |
|||
|
|||
<div class="onboarding-buttons clearfix"> |
|||
<button (click)="hideAll()" class="btn btn-link btn-primary btn-sm float-left"> |
|||
Stop Tour |
|||
</button> |
|||
|
|||
<button (click)="hideThis()" class="btn btn-link btn-success btn-sm float-right"> |
|||
Got It |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,28 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
$color: #1a2129; |
|||
|
|||
.onboarding { |
|||
&-help { |
|||
@include border-radius; |
|||
background: $color; |
|||
border: 0; |
|||
max-width: 20rem; |
|||
padding: .75rem; |
|||
} |
|||
|
|||
&-text { |
|||
font-size: .9rem; |
|||
font-weight: normal; |
|||
color: $color-dark-foreground; |
|||
} |
|||
|
|||
&-buttons { |
|||
margin: .8rem -.5rem 0; |
|||
} |
|||
|
|||
&-rect { |
|||
@include box-shadow-raw(0 0 0 9999px rgba(0, 0, 0, .5)); |
|||
} |
|||
} |
|||
@ -0,0 +1,95 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Component, Input, OnDestroy, OnInit, Renderer } from '@angular/core'; |
|||
|
|||
import { ModalView } from './../utils/modal-view'; |
|||
|
|||
import { OnboardingService } from './../services/onboarding.service'; |
|||
|
|||
import { fadeAnimation } from './animations'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-onboarding-tooltip', |
|||
styleUrls: ['./onboarding-tooltip.component.scss'], |
|||
templateUrl: './onboarding-tooltip.component.html', |
|||
animations: [ |
|||
fadeAnimation |
|||
] |
|||
}) |
|||
export class OnboardingTooltipComponent implements OnDestroy, OnInit { |
|||
private showTimer: any; |
|||
private closeTimer: any; |
|||
private forMouseDownListener: Function; |
|||
|
|||
public tooltipModal = new ModalView(); |
|||
|
|||
@Input() |
|||
public for: any; |
|||
|
|||
@Input() |
|||
public id: string; |
|||
|
|||
@Input() |
|||
public after = 1000; |
|||
|
|||
@Input() |
|||
public position = 'left'; |
|||
|
|||
constructor( |
|||
private readonly onboardingService: OnboardingService, |
|||
private readonly renderer: Renderer |
|||
) { |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
clearTimeout(this.showTimer); |
|||
clearTimeout(this.closeTimer); |
|||
|
|||
this.tooltipModal.hide(); |
|||
|
|||
if (this.forMouseDownListener) { |
|||
this.forMouseDownListener(); |
|||
this.forMouseDownListener = null; |
|||
} |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
if (this.for && this.id) { |
|||
this.showTimer = setTimeout(() => { |
|||
if (this.onboardingService.shouldShow(this.id)) { |
|||
this.tooltipModal.show(); |
|||
|
|||
this.closeTimer = setTimeout(() => { |
|||
this.hideThis(); |
|||
}, 10000); |
|||
|
|||
this.onboardingService.disable(this.id); |
|||
} |
|||
}, this.after); |
|||
|
|||
this.forMouseDownListener = |
|||
this.renderer.listen(this.for, 'mousedown', () => { |
|||
this.onboardingService.disable(this.id); |
|||
|
|||
this.hideThis(); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
public hideThis() { |
|||
this.onboardingService.disable(this.id); |
|||
|
|||
this.ngOnDestroy(); |
|||
} |
|||
|
|||
public hideAll() { |
|||
this.onboardingService.disableAll(); |
|||
|
|||
this.ngOnDestroy(); |
|||
} |
|||
} |
|||
@ -0,0 +1,41 @@ |
|||
|
|||
|
|||
|
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Injectable } from '@angular/core'; |
|||
|
|||
import { LocalStoreService } from './local-store.service'; |
|||
|
|||
export const OnboardingServiceFactory = (localStore: LocalStoreService) => { |
|||
return new OnboardingService(localStore); |
|||
}; |
|||
|
|||
@Injectable() |
|||
export class OnboardingService { |
|||
constructor( |
|||
private readonly localStore: LocalStoreService |
|||
) { |
|||
} |
|||
|
|||
public disableAll() { |
|||
this.disable('all'); |
|||
} |
|||
|
|||
public disable(key: string) { |
|||
this.localStore.set(`squidex.onboarding.disable.${key}`, '1'); |
|||
} |
|||
|
|||
public shouldShow(key: string) { |
|||
return this.shouldShowKey(key) && this.shouldShowKey('all'); |
|||
} |
|||
|
|||
private shouldShowKey(key: string) { |
|||
return this.localStore.get(`squidex.onboarding.disable.${key}`) !== '1'; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue