JS Tricky request for confirmation

Nema na čemu i drugi put. :wink:

Pa ovde sam ti napis’o šta da uradiš.
Preduslov tj. predznanje koje ti treba da upotrijebiš ovakvo rješenje je:

  1. Znati ubaciti Swal u postojeći kod tako da se može objekt Swal koristiti bilo gdje u aplikaciji
  2. Postaviti složenu funkciju u nekakav bootstrap fajl tako da je dostupna u najvišem scope-u (i konsekventno bilo gdje u kodu)
  3. Popraviti kod kako sam napomen’o u ovom postu da vraća bool (dodati i return true; gdje treba)

Sve je napisano. Što bi prepisiv’o na treću stranu? :thinking:

Mozda ovako nekako, nisam testiro tako da ne mogu nista da garantiram :smiley:

const confirm = (message) => new Promise((resolve, reject) => {
  if (somethingAboutDialog()) {
    return resolve(true)
  }
  reject(false)
})

const myFunc = async() => {
  foo()
  bar()
  if (await !confirm('hello')) return;
  
  etc()
} 

Zavisi od aplikacije.Sta ako u pozadini imas neki WebSocket, meh ? :smiley:

Jao što vas trola ova @bozoou. :slight_smile:

Prvo sam htio reći da developer vjerovatno zna kakvu mehaniku ima u pozadini, pa prema potrebi zna jel smije ili ne blokirati thread…

Ali vidiš, tu si u pravu…jerbo ako se prave nekakve komponente za koje se nezna u kakvoj okolini će raditi, tj. tko će ih sve koristiti…onda je blokiranje threada svakako nepoželjno :wink:

Btw. fala na primjeru, baš ću se poigrati.

Imaš neku soluciju ili si samo došao trolati :smiley: :smiley:

Btw. kada sam ja prvi puta htio napraviti konfirmaciju opisanu u uvodnom postu, to je pak bilo prije jedno 12g …i mislim da tada nije bilo ovih modernih fora koje iz rukava baca belmin.

Tako da ako se nekome čisto mozga kako bi se to moglo rješiti sa malo sirovijim JS-om, nek mozga…

I što ćemo sad? https://jsfiddle.net/c41r9uqw/2/

Zašto sam gubio vrijeme da bi ti pokazao da ti code ne radi? …kada se već sam nisi udostojio elaborirati i na ikoji način me uvjeriti da bi trebao raditi?

Eto, sada barem znaš za ubuduće zašto očekujem smislenu raspravu prije nego bacim dragocjeno vrijeme.

Uletio si u temu bahato, nisi skontao niti koji su uvjeti pitanja…omašio si debelo iz prve…i ja da ti kontroliram code? Koji si očito ne znaš sam prekontrolirati?

Gle, da se razgovaraš uljudno, nebi mi bio najmanji problem razgovarati. Ali kako nisi uljudan, ja nemam nikakve obaveze prema tebi odgovarati ti. Nemam zapravo prema nikome, ali za druge imam dobru volju, ako je i oni uzvraćaju.

Vidiš, svjedno sam te pozdravio i prije nego si došao u temu. Da citiram pozdrav taj:

:smiley: :smiley: Cheers. Neka pati koga smeta…

Mozemo li mi dobiti tvoje rijesenje na uvid ? :smiley:

1 Like

Naravno da ne. :slight_smile:

  if(!custom_confirm('Što ce ti obj, kada ga ne koristiš?')) return;
  
  log("Code neće biti ovdje bez obzira što odabereš...eto zašto ne testiram tvoje žbrljotine!"); 
  log("Puno si bahat...a malo mlijeka daješ...."); 

Nece biti zato sto ti funkcija vraca undefined.Rezultat tvog if statementa ce biti true, i naravno udarit ces na return :smiley:

const custom_confirm = () => {
    return Swal.fire({...}} 
}

Uradis ovo i doci ce gdje treba doci, ali to ni dalje nije ono sto ti zelis :smiley:

1 Like

Ups, my bad…nisam se puno ni zagledao u code ne očekujući da radi. Isto tako sam očekivao da ga je ostavio kakvog želi, pošto je bahato stajao iza njega da radi…

Ali da, ne radi ni sada. Sada uvijek propušta prolaz procesima, što je bilo očekivano i to sam već ranije pisao da bi se trebalo dešavati:

Sada je log samo potpuniji: https://jsfiddle.net/xn1f4yt5/2/

Eh evo ti sad jos malo zanimacije, al sam skontaj zasto jos ne radi :smiley:

Pa pošto imam barem tebe kojega zanima nešto vidjeti, stavit ću. Ali neka još prilike nekome da ponudi soluciju. Ipak je ovo tema tipa “zagonetka”. :slight_smile:

Bravisima, veliko bravisima! Ti si moj čovjek :slight_smile:

Evo, uspio sam doraditi da radi: https://codesandbox.io/s/1rp9lonlkq
…ali tvoj job je ono glavno :wink:

A sada bi mogao malo ped-erski reći:

“A lako je sa tim modernim alatima” .

Hehe, šalim se. Velika vrlina je pratiti tehnologiju, naravno.

Svejedno, imaš što za mozgati ako hoćeš riješiti isti problem bez tog await sistema. Kada se to uopće pojavilo? To je dio ECMA6 , 7 ili čega? Ja uopće zaboravim svaki puta u kojem ecma razdoblju smo, haha.

Nego da još jednom konkretiziram problem koji sam postavio.
Doduše, već sam dosta razjasnio, ali i meni je naknadno palo na pamet što mi je bilo najbitnije kada sam taj problem htio rješiti.

Bilo mi je najbitnije da neku funkciju mogu samo napola (ili bilo gdje već želim) …presjeći sa snippetom code-a koji će izvršavati konfirmaciju.
Nije mi sada bilo bitno hoće li ta konfirmacija biti 20, 50 ili 100 karaktera…ali bilo mi je bitno da je mogu elegantno samo copy-paste na željenu poziciju i da ništa drugo ne moram rekonstruirati. A pristup sa callback-ovima bi uvijek tražio barem neku minimalnu rekonstrukciju…zato sam to htio izbjeći za slučaj konfirmacije što je relativno čest slučaj…pa sam ga zato u pozivu htio maksimalno pojednostaviti.

Drugi uvjet mi je bio da u tom snippetu code-a koji ću kopirati, da u njemu nemam varijabilnih stvari.
Naravno, jedna varijabilna stvar mora biti…a to je poruka koja će se prikazati korisniku kod konfirmacije. No osim te poruke nisam htio da imam još neki dio snippeta koji moram prilagođavati situaciji gdje taj snippet postavljam.

Taj drugi uvjet sam duugo imao samo djelomično ispunjen…uvijek se nešto malo motalo oko nogu u tom snippetu, ali ajd, bilo je prihvatljivo i dalje praktičnije od rekonsturiranja i prebacivanja code-a u callback.

Eto, pojašnjavam taj dio jer je ok da se shvati koja mi je bila namjera i nit vodilja kada sam krenuo sa prvom varijantom te svoje konfirm metode. Znači htio sam pure “copy-paste” snippeta…i da radi. A što se u pozadini poziva…što Bog da, haha.

Nego, sukladno ovom što napisah u prošlom postu oko želje da se izbjegne ikakvo rekonsturiranje postojećeg code-a kod ubacivanja konfirm dialoga…ovaj tvoj pristup isto to malo krši. Jer se funkcija u koju se ubacuje mora prepraviti u async funkciju ukoliko to slučajno u startu nije bila.

Nije strašno, ali je detalj…
Isto tako, teško mi je ovako napamet reći što se još remeti nakon što funkciju prepravim u async funkciju… ako unutra imam nekakve ajax pozive ili što već…

Pretpostavljam da taj async utječe samo na one funkcije unutar koje su deklarirane sa “await” ?

Evo kako je tekao tok misli prilikom traganja za custom confirm dialogom…

Izrada custom confirm dialoga, ideja no.1

Znači, prva ideja je bila sljedeća:

  • ajde da napravim u tom mom confirmation dialogu callback koji će pozivati onu funkciju unutar koje je konfirmacija ugnježdena.
  • tako da rekurzivno pozovem istu funkciju, a samo u prvom prolazu ću paliti konfirmaciju
  • u tom prvom prolazu ću uvijek abortati funkciju
  • ako korisnik klikne TRUE, onda će putem callbacka funkcija pozvati sama sebe ponovno, a za drugi prolaz ću nariktati triger da se konfirmacija ne upali, što će spriječiti i abortanje funkcije.
  • taj triger bi zakačio na jedan od parametara koji prima funkcija i stvar bi radila

Ima tu puno mana:

  1. Spomenuti prvi uvjet je bio ispunjen…snippet je zaista trebalo samo copy-paste
  2. Drugi uvjet nije baš bio idealan. u svakom snippetu je trebalo preimenovati funkciju koja se nalazi u callbacku i zadati joj iste one parametre koje je primila parent funkcija. To i nije tako strašan job, ali ipak minus.

Puno gora greška je bila u tome što se triger koji pazi da se konfirmacija ne upali u drugom prolazu, morao kačiti na jedan od parametara parent funkcije. A to već povlači za sobom moguće probleme…

Code:

function someParentFunkcion(a,b,c,f){

	//some code before confirmation

	if(!f.confirmed) {dialog({msg: "Želiš li nastaviti", onTrue:function(){f.confirmed=true,  someParentFunkcion(a,b,c,f)}}); return;}

	//some code after confirmation
}

Svejedno, ovo mi je radilo više nego zadovoljavajuće dugi niz godina :slight_smile: :slight_smile:
Nastavak slijedi…

Jbg.

Neki nikad neće[mo] naučiti.
Čovjek se muči sa špagetama 12 godina i ja k’o budala izadjem u susret da ga upoznam sa standardizacijom i progresom a on vrijedja. Jbg, neki nikad ne naučimo.
Nadjem mu rješenje za 5 minuta, a kako ne koristim JS pretjerano, frontend ga napomene na async await i riješeno. Ali ne, on k’o june

Tako da ako se nekome čisto mozga kako bi se to moglo rješiti sa malo sirovijim JS-om, nek mozga…

Pa izmozgano je, mislim se. Zar ne uočavaš?!

Ko ga ■■■■ (disclaimer: nikom konkretno/stilska figura/uzrečica, nije psovka), drugi put nek sam traži rješenje.

@belmin
Bravo, znaš znanje. Gledam i ja da se uključim u JS ali stidljivo to ide što se tiče posvećenog vremena. :expressionless:

Izrada custom confirm dialoga, ideja no.2

Ideja dva je bila nastavno na prvu ideju…htio sam se riješiti trigera “f.confirmed”, koji je bio najveći uljez.
Palo mi je na pamet da izdvojim svoj dialog koji je u službi konfirmacije u zasebnu funkciju koja je dobila ime “dialogConfirm”. Taj dialogConfirm je bio naseljen od dialoga iz prvog primjera i zapravo se ništa značajno unutra nije dešavalo, osim što je dialogConfirm unutar sebe naizmjenično dizao i spuštao jedan flag u stanja true/false …i ta stanja su predstavljala ono što je u prvom primjeru bilo:

situacija 1 (prvi prolaz): f.confirmed = false
situacija 2 (drugi prolaz): f.confirmed = true;

Znači, funkcija dialogConfirm je izgledala:

var DialogConfirmGlobalState = {confirmedStates:{}}
function dialogConfirm(uniqProcessName, poruka, onTrue){

	DialogConfirmGlobalState.confirmedStates[uniqProcessName] = DialogConfirmGlobalState.confirmedStates[uniqProcessName] || {};
	var This = This.confirmedStates[uniqProcessName]; //This je individualno vezan uz "uniqProcessName" ...kako različite konfirmacije nebi mogle doći pod konflikt


	if(!This.confirmed){

		dialog({
			msg:poruka, 
			onTrue:function(){
				This.confirmed=true;
				onTrue();
				This.confirmed=false;
			}
		});

		return false;
	}

	return true;
}

I ta funkcija možda izgleda malo smušeno, ali nebitno…jer je čučala u pozadini.
Ono što se ugrađivalo je sada izgledalo nešto jednostavnije nego u primjeru 1. Više nam nije trebao “f.confirmed”:

function someParentFunkcion(a,b,c,f){

	//some code before confirmation

	if(!dialogConfirm("someUniqNameAboutAction", "Želiš li nastaviti?", function(){someParentFunkcion(a,b,c,f)})) return;

	//some code after confirmation
}

E sad, ovo je izbacilo najgoreg uljeza…ali i dalje je kod svake konfirmacije trebalo pretipkavati parent funkciju unutar snippeta.
To je zaista simple job…ali eto…to je ostalo kao uljez…koji je konačno u zadnjem koraku izbačen…

Šta je ovo?
Izmijenili ste 2% mog koda i folirate se? lol
Ali se svelo na to da je upotrijebljeno za izvedbu samog rješenja, zar ne.

@bozoou Nemoj očekivati od mene da ti pišem baš kod.
Vidi ja tebi kad pomažem, prvenstveno to radim zbog sebe jer na taj način učim druge stvari.
Ti si mi u drugom planu pri tome. Mislim, da se ne lažemo. I naravno, u mogućnosti sam od dopuštenog mi vremena.

Ako ti ne odgovara idejno rješenje i smjer razmišljanja te ako ne namjeravaš to koristiti, da se ne trudim i ne prenosim iskustvo i znanje (ma kol’ko ga bilo).

Izrada custom confirm dialoga, ideja no.3

I zadnji korak koji me jučer razveselio, tarannn:

function someParentFunkcion(a,b,c,f){

	//some code before confirmation

	if(!dialogConfirm("Želiš li nastaviti?", arguments) return;

	//some code after confirmation
}

arguments - to je tih devet viška karaktera koje spomenuh u uvodu. Doduše, tih devet karaktera su uvijek isti kod svake konfirmacije, tako da je u potpunosti ispunjen uvjet 1 koji kaže da se u snipetu ništa ne mora mijenjati osim poruke konfirmacije.

A uvjet dva je također ispunjen, jer se snippet ubaci gdje god treba bez ikakve potrebne rekonstrukcije funkcije unutar koje se umeće.

No što je točno arguments?
arguments je nativna varijabla koja nosi informacije o funkciji unutar koje se nalazi.

Znači:
arguments.callee -> to je funkcija unutar koje se arguments pojavljuje
arguments.length -> broj parametara koji su prosljeđeni u funkciju
arguments[0] -> prvi parametar funkcije
arguments[1] -> drugi parametar funkcije
// itd.

Sada kada imamo arguments, prosljedimo ga u dialogCofirm i unutra možemo sve odraditi sa njime.
Također je ranije i “uniqProcessName” bio suvišan zato jer jedinstveno ime procesa možemo dobiti na način:
someParentFunkcion.toString()
ili u slučaju argumentsa:
arguments.callee.toString();

Tarann…to je to.

Ima još jedna cakica koju je vrijedno znati, a bila je potrebna za resolvati ovo sa arguments.

Radi se o tome, kako pozvati neku funkciju sa određenim parametrima, gdje nam nije unaprijed poznato koliko tih parametara ima. Kao što je ovdje slučaj…arguments se može pojaviti sa nula, jednim ili deset parametara.
Seljački bi bilo:

if(params.length==0) someFunkc();
else if(params.length==1) someFunkc(params[0]);
else if(params.length==2) someFunkc(params[0], params[1]);
else if(params.length==3) someFunkc(params[0], params[1], params[2]);
// seljački, ali i to bi držalo vodu..samo iteriramo do jedno 20 parametara xd.

Dobar način za napraviti isto je:
someFunkc.apply(this,params || []);