modalWindowJS/index.js at master · ayanhan/modalWindowJS · GitHub

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
let fruits = [
    {id: 1, title: 'Apple', price: 10, img: 'http://agromehrgan.com/en/images/stories/virtuemart/product/apple-16.jpg'},
    {id: 2, title: 'Cabbage', price: 20, img: 'http://agromehrgan.com/en/images/stories/virtuemart/product/%D8%A8%D8%B1%DA%AF%20%DA%A9%D9%84%D9%85.jpg'},
    {id: 3, title: 'Tangerine', price: 30, img: 'http://agromehrgan.com/en/images/stories/virtuemart/product/%D9%86%D8%AA%D8%A7.jpg'}
]

const toHTML = fruit => `
        <div class="col">
            <div class="card">
                <img style="height: 300px;" src="${fruit.img}" class="card-img-top" alt="${fruit.title}">
                <div class="card-body">
                    <h5 class="card-title">${fruit.title}</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary" data-btn="price" data-id="${fruit.id}">Price</a>
                    <a href="#" class="btn btn-danger" data-btn="remove" data-id="${fruit.id}">Delete</a>
                </div>
            </div>
        </div>
`


function render() {
    const html = fruits.map(fruit => {
       return toHTML(fruit)
    }).join('')
   document.querySelector('#fruits').innerHTML = html

}
render()


const priceModal = $.modal({
    title: 'Price',
    closable: 'true',
    width: '400px',
    footerButtons: [
        {text: 'Close', type: 'primary', handler() {
            console.log('Primaary btn clicked')
                priceModal.close()
            }}
    ]
})


document.addEventListener('click', event => {
    event.preventDefault()
    const id = +event.target.dataset.id
    const btnType = event.target.dataset.btn
    const fruit = fruits.find(f => f.id === id)

    if (btnType === 'price') {

        priceModal.setContent(`
          <p>Price for ${fruit.title}: <strong>${fruit.price}$</strong></p>
        `)

        priceModal.open()
    } else if (btnType === 'remove') {
        $.confirm({
            title: 'Are you sure?',
            content: `<p>You are going to delete fruit: <strong>${fruit.title}</strong></p>`
        }).then(() => {
            fruits = fruits.filter(f => f.id !== id)
            render()
        }).catch(() => {

        })

    }
})