#1 add prompt

src/app/app.component.ts

@@ -166,11 +166,15 @@ export class AppComponent implements OnInit {
 
   onPrompt() {
     this.setGlobal();
-    this.snotifyService.bare(this.title, this.body, {
+    this.snotifyService.prompt(this.title, this.body, {
       timeout: this.timeout,
       showProgressBar: this.progressBar,
       closeOnClick: this.closeClick,
-      pauseOnHover: this.pauseHover
+      pauseOnHover: this.pauseHover,
+      buttons: {
+        'OK': (text) => console.log('User said: ' + text),
+        'NO': () => console.log('Click: No! Never!'),
+      }
     });
   }
 

src/app/snotify/snotify-config.ts

@@ -61,5 +61,5 @@ export interface SnotifyAsync {
 }
 
 export interface SnotifyButtons  {
-  [param: string]: () => void;
+  [param: string]: (yes?: string) => void;
 }

src/app/snotify/snotify.service.ts

@@ -165,7 +165,7 @@ export class SnotifyService {
       config: Object.assign({}, config)
     });
   }
-
+  // TODO: Apply defaults if button not set
   confirm(title: string, body: string, config: SnotifyConfig): number {
     const buttonKeys = Object.keys(config.buttons);
     const resultButtons = {
@@ -181,7 +181,26 @@ export class SnotifyService {
     return this.create({
       title: title,
       body: body,
-      config: Object.assign({}, config, {type: SnotifyType.CONFIRM}, {buttons: resultButtons})
+      config: Object.assign({}, config, {type: SnotifyType.CONFIRM}, {buttons: resultButtons, closeOnClick: false})
+    });
+  }
+  // TODO: Apply defaults if button not set
+  prompt(title: string, body: string, config: SnotifyConfig): number {
+    const buttonKeys = Object.keys(config.buttons);
+    const resultButtons = {
+      yes: {
+        text: buttonKeys[0],
+        action: config.buttons[buttonKeys[0]]
+      },
+      no: {
+        text: buttonKeys[1],
+        action: config.buttons[buttonKeys[1]]
+      }
+    };
+    return this.create({
+      title: title,
+      body: body,
+      config: Object.assign({}, config, {type: SnotifyType.PROMPT}, {buttons: resultButtons, timeout: 0, closeOnClick: false})
     });
   }
 

src/app/snotify/toast/toast.component.css

@@ -155,6 +155,22 @@
   color: #e0f2f1;
 }
 
+/*Confirm*/
+.snotify-prompt {
+  background-color: #009688;
+}
+
+.snotify-prompt .snotify-toast__inner {
+  padding: 10px 15px;
+}
+
+.snotify-prompt .snotify-title {
+  margin-bottom: 0;
+}
+
+.snotify-prompt .snotify-body {
+  color: #e0f2f1;
+}
 
 /* Buttons */
 
@@ -195,3 +211,143 @@
   background-color: rgba(0,0,0,.1);
 }
 
+/* input */
+
+.input {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  margin: 0;
+  width: 100%;
+  vertical-align: top;
+  transition: all .5s;
+  transition-delay: .3s;
+  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+
+}
+
+.input__field {
+  position: relative;
+  display: block;
+  float: right;
+  padding: 0.85em 0.5em;
+  width: 100%;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: #333;
+  font-weight: bold;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  -webkit-appearance: none; /* for box shadows to show on iOS */
+  opacity: 0;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+
+.input__field:focus {
+  outline: none;
+}
+
+.input__label {
+  display: inline-block;
+  float: right;
+  padding: 0 0.85em;
+  width: 100%;
+  color: #e0f2f1;
+  font-weight: bold;
+  font-size: 70.25%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  position: absolute;
+  left: 0;
+  height: 100%;
+  text-align: left;
+  pointer-events: none;
+}
+
+.input__label::before,
+.input__label::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+}
+
+.input__label::before {
+  border-top: 2px solid #fff;
+  -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
+  transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
+  -webkit-transition-delay: 0.3s;
+  transition-delay: 0.3s;
+}
+.input__label::after {
+  z-index: -1;
+  background: #b2dfdb;
+  -webkit-transform: scale3d(1, 0, 1);
+  transform: scale3d(1, 0, 1);
+  -webkit-transform-origin: 50% 0%;
+  transform-origin: 50% 0%;
+}
+
+.input__label-content {
+  position: relative;
+  display: block;
+  padding: 1.6em 0;
+  width: 100%;
+
+  -webkit-transition: -webkit-transform 0.3s 0.3s;
+  transition: transform 0.3s 0.3s;
+}
+
+.input--filled {
+  margin-top: 1.5em;
+}
+
+.input__field:focus,
+.input--filled .input__field {
+  opacity: 1;
+  -webkit-transition-delay: 0.3s;
+  transition-delay: 0.3s;
+}
+
+.input__field:focus + .input__label .input__label-content,
+.input--filled .input__label-content {
+  -webkit-transform: translate3d(0, -80%, 0);
+  transform: translate3d(0, -80%, 0);
+  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+}
+
+.input__field:focus + .input__label::before,
+.input--filled .input__label::before {
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+}
+
+.input__field:focus + .input__label::before,
+.input--filled .input__label::before {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.input__field:focus + .input__label::after,
+.input--filled .input__label::after {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  -webkit-transition-delay: 0.3s;
+  transition-delay: 0.3s;
+  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+}

src/app/snotify/toast/toast.component.html

@@ -6,19 +6,27 @@
     'snotify-info': types.info,
     'snotify-error': types.error,
     'snotify-bare': types.bare,
-    'snotify-confirm': types.confirm
+    'snotify-confirm': types.confirm,
+    'snotify-prompt': types.prompt
   }"
      (click)="onClick()" (mouseenter)="onEnter()" (mouseleave)="onLeave()" #wrapper>
   <div class="snotify-toast__inner">
     <div class="snotify-progress-bar" *ngIf="toast.config.showProgressBar">
       <span class="snotify-progress-bar__line" #progress></span>
     </div>
     <div class="snotify-title">{{toast.title}}</div>
-    <div class="snotify-body">{{toast.body}}</div>
+    <div *ngIf="!types.prompt" class="snotify-body">{{toast.body}}</div>
+    <span *ngIf="types.prompt" class="input input--jiro" [ngClass]="{'input--filled': promptActive}" (mouseenter)="onPromptEnter()" (mouseleave)="onPromptLeave()">
+        <input #input class="input__field" type="text" id="input-11" (focus)="isPromptFocused = true" (blur)="isPromptFocused = false"/>
+        <label class="input__label" for="input-11" >
+          <span class="input__label-content">{{toast.body}}</span>
+        </label>
+      </span>
     <app-icon class="snotify-icon" [types]="types"></app-icon>
   </div>
   <div *ngIf="toast.config.buttons" class="snotify-buttons">
-    <button (click)="toast.config.buttons.yes.action()">{{toast.config.buttons.yes.text}}</button>
+    <button *ngIf="!types.prompt"(click)="toast.config.buttons.yes.action()">{{toast.config.buttons.yes.text}}</button>
+    <button *ngIf="types.prompt"(click)="toast.config.buttons.yes.action(input.nativeElement.value)" >{{toast.config.buttons.yes.text}}</button>
     <button (click)="toast.config.buttons.no.action()">{{toast.config.buttons.no.text}}</button>
   </div>
 </div>

src/app/snotify/toast/toast.component.ts

@@ -15,6 +15,9 @@ export class ToastComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() toast: SnotifyToast;
   @ViewChild('wrapper') wrapper: ElementRef;
   @ViewChild('progress') progressBar: ElementRef;
+  @ViewChild('input') input: ElementRef;
+  promptActive = false;
+  isPromptFocused = false;
 
   frameRate = 10;
 
@@ -146,6 +149,15 @@ export class ToastComponent implements OnInit, AfterViewInit, OnDestroy {
 
   }
 
+  onPromptEnter() {
+    this.promptActive = true;
+  }
+
+  onPromptLeave() {
+    if (!this.input.nativeElement.value.length && !this.isPromptFocused) {
+      this.promptActive = false;
+    }
+  }
 
   startTimeout(currentProgress: number) {
     this.progress = currentProgress;