github.com/manicqin/nomad@v0.9.5/ui/app/components/two-step-button.js (about) 1 import Component from '@ember/component'; 2 import { next } from '@ember/runloop'; 3 import { equal } from '@ember/object/computed'; 4 import { task, waitForEvent } from 'ember-concurrency'; 5 import RSVP from 'rsvp'; 6 7 export default Component.extend({ 8 classNames: ['two-step-button'], 9 10 idleText: '', 11 cancelText: '', 12 confirmText: '', 13 confirmationMessage: '', 14 awaitingConfirmation: false, 15 disabled: false, 16 onConfirm() {}, 17 onCancel() {}, 18 19 state: 'idle', 20 isIdle: equal('state', 'idle'), 21 isPendingConfirmation: equal('state', 'prompt'), 22 23 cancelOnClickOutside: task(function*() { 24 while (true) { 25 let ev = yield waitForEvent(document.body, 'click'); 26 if (!this.element.contains(ev.target) && !this.awaitingConfirmation) { 27 this.send('setToIdle'); 28 } 29 } 30 }), 31 32 actions: { 33 setToIdle() { 34 this.set('state', 'idle'); 35 this.cancelOnClickOutside.cancelAll(); 36 }, 37 promptForConfirmation() { 38 this.set('state', 'prompt'); 39 next(() => { 40 this.cancelOnClickOutside.perform(); 41 }); 42 }, 43 confirm() { 44 RSVP.resolve(this.onConfirm()).then(() => { 45 this.send('setToIdle'); 46 }); 47 }, 48 }, 49 });