| 1 |
import {Slide} from "./Slide"; |
| 2 |
declare let rnJQuery:JQueryStatic; |
| 3 |
export class SmartTutorial{ |
| 4 |
private $background:JQuery; |
| 5 |
private $transparentBackground:JQuery; |
| 6 |
private slides:Slide[]=[]; |
| 7 |
public ZIndex=1000; |
| 8 |
public currentSlideIndex=-1; |
| 9 |
public currentSlide:Slide; |
| 10 |
public $nextButton:JQuery; |
| 11 |
private FinishAction: () => void=null; |
| 12 |
|
| 13 |
constructor(){ |
| 14 |
|
| 15 |
} |
| 16 |
|
| 17 |
Start() { |
| 18 |
this.$background=rnJQuery('<div style="background:black;opacity:.5;position:fixed;top:0;bottom:0;right:0;left:0;z-index: '+this.ZIndex+';"></div>'); |
| 19 |
this.$transparentBackground=rnJQuery('<div class="bootstrap-wrapper" style="background:transparent;position:fixed;top:0;bottom:0;right:0;left:0;z-index: '+(this.ZIndex+2000)+';"></div>'); |
| 20 |
this.$nextButton=rnJQuery(`<span style="position:absolute;bottom:20px;right:20px;font-size: 30px;vertical-align: middle;color:white;cursor: pointer;" > |
| 21 |
<span style="vertical-align: middle;" class="glyphicon glyphicon-hand-right"></span> |
| 22 |
<span style="vertical-align: middle;margin-left:1px;" >Next</span> |
| 23 |
</span>`); |
| 24 |
this.$transparentBackground.append(this.$nextButton); |
| 25 |
|
| 26 |
this.$nextButton.click(()=>{ |
| 27 |
this.ExecuteNextSlide(); |
| 28 |
}); |
| 29 |
rnJQuery('body').append(this.$background); |
| 30 |
rnJQuery('body').append(this.$transparentBackground); |
| 31 |
this.currentSlideIndex=-1; |
| 32 |
this.ExecuteNextSlide(); |
| 33 |
|
| 34 |
} |
| 35 |
|
| 36 |
public AddSlide(slide:Slide) |
| 37 |
{ |
| 38 |
slide.tutorial=this; |
| 39 |
this.slides.push(slide); |
| 40 |
} |
| 41 |
|
| 42 |
|
| 43 |
public async ExecuteNextSlide() |
| 44 |
{ |
| 45 |
this.currentSlideIndex++; |
| 46 |
if (this.currentSlide != null) { |
| 47 |
this.currentSlide.Clear(this.currentSlideIndex < this.slides.length ? this.slides[this.currentSlideIndex] : null); |
| 48 |
} |
| 49 |
if(this.currentSlideIndex==this.slides.length){ |
| 50 |
this.Finish(); |
| 51 |
} |
| 52 |
this.currentSlide = this.slides[this.currentSlideIndex]; |
| 53 |
this.currentSlide.Execute(); |
| 54 |
|
| 55 |
if(this.currentSlideIndex+1==this.slides.length) |
| 56 |
{ |
| 57 |
await this.$nextButton.velocityAsync({opacity:0},200,"easeOutExp"); |
| 58 |
this.$nextButton.empty(); |
| 59 |
this.$nextButton.append(`<span style="vertical-align: middle;" class="glyphicon glyphicon-remove"></span> |
| 60 |
<span style="vertical-align: middle;margin-left:1px;" >Close Tutorial</span>`) |
| 61 |
this.$nextButton.velocity({opacity:1},200,"easeInExp"); |
| 62 |
} |
| 63 |
|
| 64 |
|
| 65 |
} |
| 66 |
|
| 67 |
public OnFinish(action:()=>void) |
| 68 |
{ |
| 69 |
this.FinishAction=action; |
| 70 |
} |
| 71 |
|
| 72 |
private async Finish() { |
| 73 |
this.$background.velocity({opacity:0},200,"easeOutExp",()=>{this.$background.remove();}); |
| 74 |
await this.$transparentBackground.velocityAsync({opacity:0},200,"easeOutExp"); |
| 75 |
this.$transparentBackground.remove(); |
| 76 |
if(this.FinishAction!=null) |
| 77 |
this.FinishAction(); |
| 78 |
} |
| 79 |
} |
