You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
4.5 KiB
157 lines
4.5 KiB
|
|
$(document).ready(()=>{
|
|
|
|
const training = $('.training')
|
|
const phone = training.find('.phone')
|
|
const clouds = training.find('.cloud')
|
|
const input = phone.find('.input-field')
|
|
const content = phone.find('.content')
|
|
const firstChild = content.find('.cloud').first()
|
|
|
|
const delay = 1000
|
|
let timer = 0
|
|
let cloudCount = 0
|
|
|
|
const people = training.find('.people')
|
|
const luca = training.find('.people.luca')
|
|
const sarah = training.find('.people.sarah')
|
|
const fabio = training.find('.people.fabio')
|
|
const maria = training.find('.people.mariaSel')
|
|
const lucia = training.find('.people.lucia')
|
|
const paolo = training.find('.people.paoloSel')
|
|
|
|
luca.css({'top': '425px','left': '370px'}).fadeIn(400)
|
|
sarah.css({'top': '415px','left': '390px'})
|
|
fabio.css({'top': '150px','left': '110px'}).fadeIn(600)
|
|
maria.css({'top': '180px','left': '135px'})
|
|
lucia.css({'top': '345px','left': '250px'}).fadeIn(700)
|
|
paolo.css({'top': '250px','left': '390px'})
|
|
|
|
setTimeout(()=>{
|
|
clouds.each((index,elem)=>{
|
|
const el = $(elem)
|
|
timer = index*delay
|
|
|
|
if(el.hasClass('empty') || el.hasClass('hidden')){
|
|
timer -= delay
|
|
}
|
|
|
|
if(!el.hasClass('hidden')){
|
|
setTimeout(()=>{
|
|
if(!el.hasClass('empty')){
|
|
$('#notify1')[0].play()
|
|
}
|
|
el.fadeIn(500)
|
|
},timer)
|
|
}
|
|
})
|
|
|
|
|
|
maria.fadeIn().animate({'top': '195px','left': '165px'},700)
|
|
|
|
}, delay)
|
|
|
|
|
|
input.keypress((event)=> {
|
|
|
|
if(event.which == 13){
|
|
cloudCount++
|
|
let newCloud = $('<div class="cloud right">' + input.val() + '</div>')
|
|
content.append(newCloud)
|
|
newCloud.fadeIn()
|
|
$('#notify1')[0].play()
|
|
input.val("")
|
|
|
|
|
|
setTimeout(()=>{
|
|
switch(cloudCount){
|
|
case 1:
|
|
|
|
maria.animate({'top': '180px','left': '230px'},1000, ()=>{
|
|
maria.animate({'top': '225px','left': '350px'},1500)
|
|
})
|
|
|
|
newCloud = $('<div class="cloud left">Dammi informazioni sulla nazionalità.</div>')
|
|
content.append(newCloud)
|
|
newCloud.fadeIn(400,()=>{
|
|
offset = newCloud.offset().top - content.offset().top - 20
|
|
firstChild.animate({'margin-top': '-' + offset},400)
|
|
})
|
|
|
|
$('#notify1')[0].play()
|
|
|
|
$('.page-title').text('Richiesta informazioni')
|
|
|
|
break;
|
|
|
|
case 2:
|
|
newCloud = $('<div class="cloud left">Su cosa desideri informazioni?</div>')
|
|
content.append(newCloud)
|
|
|
|
newCloud.fadeIn(400,()=>{
|
|
offset = newCloud.offset().top - content.offset().top - 20
|
|
firstChild.animate({'margin-top': '-' + offset},400)
|
|
})
|
|
|
|
newCloud = $('<div class="cloud empty">' +
|
|
'<button class="button dotted" onClick="btnClick(this)">Approccio</button>' +
|
|
'<button class="button dotted" onClick="btnClick(this)">Saluti</button>' +
|
|
'<button class="button dotted" onClick="btnClick(this)">Da evitare</button>' +
|
|
'<button class="button dotted" onClick="btnClick(this)">Altro</button>' +
|
|
'</div>')
|
|
|
|
content.append(newCloud)
|
|
|
|
newCloud.fadeIn(400,()=>{
|
|
offset = newCloud.offset().top - content.offset().top - 20
|
|
firstChild.animate({'margin-top': '-' + offset},400)
|
|
})
|
|
|
|
$('#notify1')[0].play()
|
|
break;
|
|
|
|
}
|
|
},2000)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
$('.next').on('click',()=> {
|
|
window.location = 'training-push'
|
|
})
|
|
|
|
})
|
|
|
|
|
|
function btnClick(event){
|
|
|
|
const content = $('.training .phone .content')
|
|
const firstChild = content.find('.cloud').first()
|
|
|
|
newCloud = $('<div class="cloud right">' + $(event).text() + '</div>')
|
|
content.append(newCloud)
|
|
|
|
newCloud.fadeIn(400,()=>{
|
|
|
|
offset = newCloud.offset().top - content.offset().top - 20
|
|
firstChild.animate({'margin-top': '-' + offset},400)
|
|
|
|
})
|
|
|
|
$('#notify1')[0].play()
|
|
|
|
setTimeout(()=>{
|
|
|
|
newCloud = $('<div class="cloud left">Ricordati di non avvicinarti eccessivamente</div>')
|
|
content.append(newCloud)
|
|
newCloud.fadeIn(400,()=>{
|
|
offset = newCloud.offset().top - content.offset().top - 20
|
|
firstChild.animate({'margin-top': '-' + offset},400)
|
|
})
|
|
|
|
$('#notify1')[0].play()
|
|
|
|
},2000)
|
|
}
|