1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
// delivery options modal
// -----------------------------------------------------------------------------
// html
var some_modal__inner_html = `
<div class="wrapper">
<div class="sectionTitle">
<div class="sectionTitle__main">
<h2>Πώς επιθυμείτε να πραγματοποιήσετε τις online αγορές σας;</h2>
<p>Επιλέξτε μια υπηρεσία για να δείτε την διαθέσιμη ποικιλία προϊόντων!</p>
</div>
</div>
<div class="radio-cards">
<div class="radio-cards--container outputsRow">
<label class="radio-card output output--init">
<input class="state" type="radio" value="1" name="output" />
<div class="output__inner">
<p class="output__banner output--delivery"></p>
<p class="output__title">Lorem Ipsum</p>
<ul class="hide--under-M">
<li>Vivamus nunc justo, scelerisque ut erat et, sagittis fermentum sem.</b>.</li>
</ul>
</div>
</label>
<label class="radio-card output output--init">
<input class="state" type="radio" value="2" name="output" />
<div class="output__inner">
<p class="output__banner output--pickup"></p>
<p class="output__title">Nunc eleifend</p>
<ul class="hide--under-M">
<li>Fusce arcu urna, pharetra nec nisi id, congue iaculis mauris.</b></li>
</ul>
</div>
</label>
</div>
</div>
<hr />
<p>
Donec arcu magna, pretium a arcu et, tristique malesuada dolor.
In fermentum ante ut dignissim laoreet.
Morbi sodales ex sem, non commodo ex hendrerit eu.
</p>
<div class="btnWrap btnWrap--hCenter">
<button data-qa="form_back" class="button button--border">επιστροφή</button>
<button id="registration_submit" data-qa="form_submit" class="button widthAuto" type="submit">Επόμενο</button>
</div>
</div>`;
// the modal object ------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////
var delivery_options_modal = {
classes : [ 'modal--l' ],
html : () => { return delivery_options__inner_html; },
init : function() {
// if cokie exist, mark slection
console.log('set values from cookie');
},
events : {
'input[name="output"]' : {
change : function () {
v = document.querySelector('input[name="output"]:checked').value;
// setup cookie; keep the selected value;
// + set reset timeslot )in case selection is aproved
console.log(v);
}
},
'.go-back' : {
click: function () {
console.log('close modal');
}
},
'#registration_submit': {
click: function() { window._Modals_.use('some_other_modal'); }
}
}
}
// attach to _Modals_
// -----------------------------------------------------------------------------
window._Modals_.attach('delivery-options', delivery_options_modal);
|
