jsonLoad.js

var jsonObj = {
    "userName": "Association Zaouia",
    "photoLink": "https://res.cloudinary.com/hork5h8x1/image/upload/c_fill,g_center,h_225,q_85,w_300/v1583145974/seller67_ilkseller_rank0_time1583145969.jpg",
    "description": "Association Zaouia was created for the purpose of social development in the community. This effort was led by the women of Ssi Youssef, in November of 2011. Their goal is to lift other women in the community and push them to accomplish greater things in life. ",
    "userShopLink": "https://www.theanou.com/store/67-association-zaouia-morocco",
    "icons": [
        {
            "title": "first icon title",
            "icon": "icon link",
            "function": "function code"
        },
        {
            "title": "second icon title",
            "icon": "icon link",
            "function": "function code"
        }
    ],
    "photos": [
        {
            "title": "Beni-Ourain - By Imani Rabia",
            "link": "/images/user1.png",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 7ft 4in x 4ft or 2m 23cm x 1m 23cm",
            "shopLink": "https://www.theanou.com/product/11626-black-white-beni-ourain"
        },
        {
            "title": "Beni-Ourain - By Imani Nazha",
            "link": "/images/user2.png",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 7ft 3in x 4ft x 1in or 2m 21cm x 1m 21cm x 3cm",
            "shopLink": "https://www.theanou.com/product/11224-brown-black-beni-ourain"
        },
        {
            "title": "Beni-Ourain - By Imani Nahza",
            "link": "/images/user3.jpg",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 7ft 5in x 4ft 6in x 1in or 2m 25cm x 1m 37cm x 3cm",
            "shopLink": "https://www.theanou.com/product/9878-black-white-beni-ourain"
        },
        {
            "title": "Beni-Ourain - By Fatima Ait Haddou",
            "link": "/images/user4.jpg",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 6ft 2in x 3ft 2in x 1in or 2m 89cm x 97cm x 3cm",
            "shopLink": "https://www.theanou.com/product/10527-black-white-beni-ourain"
        },
        {
            "title": "Beni-Ourain - By Imani Nahza",
            "link": "/images/user5.jpg",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 6ft 5in x 4ft 8in x 1in or 2m 96cm x 1m 41cm x 3cm",
            "shopLink": "https://www.theanou.com/product/10526-brown-black-beni-ourain"
        },
        {
            "title": "Beni-Ourain - By Fatima Ait Haddou",
            "link": "/images/user6.jpg",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 10ft x 3ft 8in x 1in or 3m 5cm x 1m 12cm x 3cm",
            "shopLink": "https://www.theanou.com/store/67-association-zaouia-morocco"
        },
        {
            "title": "Beni-Ourain - By Fatima Ait Haddou",
            "link": "/images/user7.jpg",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 7ft 3in x 3ft 3in x 1in or 2m 22cm x 1m x 3cm",
            "shopLink": "https://www.theanou.com/product/10162-black-white-beni-ourain"
        },
        {
            "title": "Beni-Ourain - By Fatima Elmekkaoui",
            "link": "/images/user8.jpg",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 7ft x 5ft x 1in or 2m 13cm x 2m 53cm x 3cm",
            "shopLink": "https://www.theanou.com/product/10322-brown-black-beni-ourain"
        },
        {
            "title": "Beni-Ourain - By Fatima Ait Haddou",
            "link": "/images/user9.jpg",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 5ft 10in x 4ft 2in x 1in or 2m 79cm x 1m 27cm x 3cm",
            "shopLink": "https://www.theanou.com/product/10525-brown-white-beni-ourain"
        },
        {
            "title": "Handira - By Fatima Mamouh",
            "link": "/images/user10.jpg",
            "description": "Handira rugs were considered to be a piece of clothing that would be worn outside. They are now used for decoration and gifted to young women about to be wed. Approx. Size 6ft 1in x 3ft 5in x 1in or 2m 86cm x 1m 5cm x 1cm",
            "shopLink": "https://www.theanou.com/product/7729-colored-handira"
        },
        {
            "title": "Handira - By Fatima Ait El Hajj",
            "link": "/images/user11.jpg",
            "description": "Handira rugs were considered to be a piece of clothing that would be worn outside. They are now used for decoration and gifted to young women about to be wed. Approx. Size 6ft 3in x 3ft 10in x 1in or 2m 90cm x 1m 17cm x 1cm",
            "shopLink": "https://www.theanou.com/product/7733-red-yellow-handira"
        },
        {
            "title": "Handira - By Meryam Achaoui",
            "link": "/images/user12.jpg",
            "description": "Handira rugs were considered to be a piece of clothing that would be worn outside. They are now used for decoration and gifted to young women about to be wed. Approx. Size 5ft 4in x 3ft or 2m 63cm x 91cm",
            "shopLink": "https://www.theanou.com/product/9697-white-handira"
        },
        {
            "title": "Handira - By Fatima Mamouh",
            "link": "/images/user13.jpg",
            "description": "Handira rugs were considered to be a piece of clothing that would be worn outside. They are now used for decoration and gifted to young women about to be wed. Approx. Size 6ft 5in x 3ft 7in x 1in or 2m 95cm x 1m 10cm x 1cm",
            "shopLink": "https://www.theanou.com/product/6448-white-handira"
        },
        {
            "title": "Handira - By Fatima Mamouh",
            "link": "/images/user14.jpg",
            "description": "Handira rugs were considered to be a piece of clothing that would be worn outside. They are now used for decoration and gifted to young women about to be wed. Approx. Size 6ft 7in x 3ft 10in x 1in or 2m x 1m 17cm x 1cm",
            "shopLink": "https://www.theanou.com/product/6447-colored-handira"
        },
        {
            "title": "Beni-Ourain - By Imani Rabia",
            "link": "/images/user15.jpg",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 6ft 2in x 3ft 6in x 1in or 2m 87cm x 1m 7cm x 3cm",
            "shopLink": "https://www.theanou.com/product/10056-black-white-beni-ourain"
        },
        {
            "title": "Beni-Ourain - By Imani Nazha",
            "link": "/images/user16.jpg",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 6ft 10in x 4ft 1in x 1in or 2m 8cm x 1m 25cm x 3cm",
            "shopLink": "https://www.theanou.com/product/9879-colored-beni-ourain"
        },
        {
            "title": "Beni-Ourain - By Fatima Mamouh",
            "link": "/images/user17.jpg",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 4ft 4in x 3ft 2in x 1in or 1m 33cm x 97cm x 3cm",
            "shopLink": "https://www.theanou.com/product/9927-black-white-beni-ourain"
        },
        {
            "title": "Beni-Ourain - By Naima Elmaskine",
            "link": "/images/user18.jpg",
            "description": "The Beni-Ourain rug is used daily in the lives of local Morcoans. Approx. Size 4ft 4in x 3ft 7in x 1in or 1m 32cm x 1m 9cm x 3cm",
            "shopLink": "https://www.theanou.com/product/9902-black-white-beni-ourain"
        },
    ]
}

window.onload = function main() {
    var numPhotos = jsonObj.photos.length
    var rem = numPhotos % 3
    var rows = Math.floor(numPhotos/3)
    rem > 0 ? rows++ : 0

    //Debug
    //console.log("Photos: " + numPhotos)
    //console.log("Rows: " + rows)

    var photoDiv = document.getElementById("Photos")
    var userImg = document.getElementById("userImg")
    userImg.style.backgroundImage = 'url("' + jsonObj.photoLink + '")'

    var containerStr = ""
    var photoStr = ""
    var id = 0;
    for (let r = 0; r < rows; r++) {
        //for each row, make UP TO 3
        //columns
        containerStr += '<div class="row">'
        for (let c = 0; c < 3; c++) {
            containerStr += '<div class="column">'
            if (numPhotos > 0) {
                photoStr = '<img class="image" id="' + r + c +
                '" img src="' + jsonObj.photos[id].link + 
                '" alt="' + jsonObj.photos[id].title + 
                '" data-content="' + jsonObj.photos[id].description + 
                '" data-shopLink="' + jsonObj.photos[id].shopLink +
                '" style="width:100%;"></div>'
            } else {
                //if empty, add empty 'img' for scaling
                photoStr = '<img src ="/images/empty.png" alt="empty" style="width:100%;"></div>'
            }
            
            containerStr += photoStr
            id++
            numPhotos--
        }
        containerStr += '</div>'
    }
    photoDiv.innerHTML = containerStr

    var allPhotos = document.getElementsByClassName("image")
    
    var modal = document.getElementById("myModal")
    var span = document.getElementsByClassName("close")[0]

    var userText = document.getElementById("userText")
    userText.textContent = jsonObj.description

    var userName = document.getElementById("user_name")
    userName.textContent = jsonObj.userName

    var userLink = document.getElementById("userLink")
    userLink.innerHTML = '<a href="' + jsonObj.userShopLink + '">Browse Store</a>'

    span.addEventListener("click", function() {
        modal.style.display = "none"
        //turn back on scroll bar
        document.documentElement.style.overflow = 'auto';
    })

    Array.from(allPhotos).forEach(photo => {
        photo.addEventListener("click", function() {
            //get clicked photo data
            var element = document.getElementById(photo.id)
            var src = element.src
            var title = element.alt
            var link = element.getAttribute("data-shopLink")
            var content = element.getAttribute("data-content")
            
            //set modal window here!
            modal.style.display = "block"
            
            //set content
            var userStr = '<div id="userDiv">' + 
                '<div id="icon"></div>' +
                 '<div id="userName">' + jsonObj.userName + '</div>' + '</div>'
            var imgStr = '<img id="mImg" src="' + src + '">'
            var titleStr = '<div id="title"><p id="tFormat">' + title + '</p></div>'
            var contentStr = '<div id="content"><div id="cFormat">' +  content + '</div></div>'
            var linkStr = '<div id="link"><div id="lFormat"><a href="' + link + '">Purchase</a></div></div>'

            //Check media sizes
            var modalWin = document.getElementById("mpDiv")
            var small = window.matchMedia("(max-width: 999px")
            var medium;
            var large = window.matchMedia("(min-width: 1000px)")
            if (small.matches) {
                //if medium:
                // [icon] Username
                //   Title
                //  +------+
                //  |      | 
                //  |      | 
                //  +------+ 
                //   Content
                //    Link
                modalWin.innerHTML = userStr + titleStr + imgStr + contentStr + linkStr
            }

            if (large.matches) {
                //if large:
                //+---------+ [icon] Username
                //|         | Title 
                //|         | Content
                //|         | Hashtags (maybe)
                //+---------+  Link
                modalWin.innerHTML = imgStr + '<div id="mContain">' + userStr + titleStr + contentStr + linkStr + '</div>'
            }

            //turn off window scroll bar
            document.documentElement.style.overflow = 'hidden'
        })
    })

}

//Hamburger Menu for small screens

var menuIcon = document.getElementById('hamburgerBtn');
menuIcon.onclick = toggleMenu;



//toggle hamburger menu open & closed

function toggleMenu() {
    document.getElementById("hamburgerBtn").classList.toggle('open')
    document.getElementById("primaryNav").classList.toggle('open');
}