/ var / www / html / cai / assets / js / [ HOME SHELL ]

Name	Size	Permission	Action
app.js	7.86 KB	-rwxr-x--x
main.js	1.71 MB	-rwxr-x--x

Code Editor : app.js

"use scrict";

//desktop expanded menu
let expbtn = document.querySelector('.app-expanednav-btn');
let exparea = document.querySelector(".app-expanednav-area");
if (expbtn) {
    expbtn.addEventListener('click', () => {
        if (exparea.classList.contains('app-expanednav-area--active')) {
            expbtn.classList.remove('app-expanednav-btn--active');
            exparea.classList.remove('app-expanednav-area--active');
        } else {
            expbtn.classList.add('app-expanednav-btn--active');
            exparea.classList.add('app-expanednav-area--active');
        }
    });
}
//search bar

if (closebar) {
    closebar.addEventListener('click', () => {
        srcharea.classList.remove('app-header__search-area--active');
    });
}

// $('.has-dropdown').on("click", function () {
//     $(this).addClass('has-dropdown--active').siblings('.has-dropdown--active').removeClass('has-dropdown--active');
// });

// drop down

const toDropdownMenu = document.querySelectorAll('.has-dropdown');
if (toDropdownMenu) {
    toDropdownMenu.forEach(dropdown => {
        const dropdownMenu = dropdown.querySelector('.dropdown-menu');

dropdown.addEventListener('mouseenter', () => {
            dropdown.classList.add('open');
            dropdownMenu.style.display = 'block';
            setTimeout(() => {
                dropdownMenu.style.opacity = 1;
                dropdownMenu.style.visibility = 'visible';
            }, 10);
        });

dropdown.addEventListener('mouseleave', () => {
            dropdown.classList.remove('open');
            dropdownMenu.style.opacity = 0;
            dropdownMenu.style.visibility = 'hidden';
            setTimeout(() => {
                dropdownMenu.style.display = 'none';
            }, 200);
        });
    });
}

// Get all the dropdown items
var dropdownItems = document.querySelectorAll('.dropdown-item');

// Loop through each item and add an event listener
dropdownItems.forEach(function (item) {
    item.addEventListener('click', function () {
        // Get the parent item and add the "active" class
        var parentItem = item.closest('.has-dropdown');
        parentItem.classList.add('active');
    });
});

// expanded menu
const menuItems = document.querySelectorAll('.menu > li.has-expand-dropdown');

menuItems.forEach(item => {
    const submenu = item.querySelector('.submenu');
    const menuItemLink = item.querySelector('span.nav-link');

menuItemLink.addEventListener('click', (event) => {
        event.preventDefault();
        item.classList.toggle('open');
        if (submenu) {
            submenu.classList.toggle('active');
        }
    });

// Close submenu when clicking outside of it
    document.addEventListener('click', (event) => {
        const isClickInsideSubmenu = submenu.contains(event.target);
        const isClickOnMenuItemLink = menuItemLink.contains(event.target);

if (!isClickInsideSubmenu && !isClickOnMenuItemLink) {
            item.classList.remove('open');
            submenu.classList.remove('active');
        }
    });
});

// inner page filter 
let filter = document.querySelector(".landing-subnav--filters");
if (filter) {
    filter.addEventListener('click', () => {
        filter.classList.toggle('active');
    });
}

// cosult directory
let cfilter = document.querySelector(".consultant-directory__filters");
let cnav = document.querySelector(".consultant-directory__mobile-nav");
let cnav_close = document.querySelector(".consultant-directory__mobile-nav-close");
let cnav_filteritem = document.querySelectorAll(".consultant-directory__mobile-nav__item");
if (cfilter) {
    cfilter.addEventListener('click', () => {
        cnav.style.cssText = `
        width: 100%;
        opacity: 1;
        z-index: 9991;
        `;
        cnav_close.style.cssText = `
        visibility: visible;
        opacity: 1;`;

[].forEach.call(cnav_filteritem, function (filteritem) {
            // do whatever
            filteritem.style.cssText = `
            transform: translate(0px, 0px);
            opacity: 1;`;
        });
    });
}

if (cnav_close) {
    cnav_close.addEventListener('click', () => {
        cnav.style.cssText = `
        width: 0;
        opacity: 0;
        z-index: inherit;
        `;
        cnav_close.style.cssText = `
        visibility: hidden;
        opacity: 0;`;
        [].forEach.call(cnav_filteritem, function (filteritem) {
            // do whatever
            filteritem.style.cssText = `
            transform: translate(0px, 2rem);
            opacity: 0;`;
        });
    });
}

if (cnav_filteritem) {
    [].forEach.call(cnav_filteritem, function (filteritem) {
        filteritem.addEventListener('click', () => {
            filteritem.classList.toggle('active');
        });
    });
}

// filter left panel

let cdirectoryfilter = document.querySelectorAll(".filter");

if (cdirectoryfilter) {
    [].forEach.call(cdirectoryfilter, function (item) {
        item.addEventListener('click', () => {
            item.classList.toggle('active');
        });
    });
}

// Publications filter
// const fdropdowns = document.querySelectorAll('.c_page_filter__dropdown');

// fdropdowns.forEach((dropdown) => {
//   dropdown.addEventListener('click', (event) => {
//     event.stopPropagation(); // prevent event from bubbling up to document
//     dropdown.classList.toggle('active');
//   });
// });

// document.addEventListener('click', (event) => {
//   fdropdowns.forEach((dropdown) => {
//     if (!dropdown.contains(event.target)) {
//       dropdown.classList.remove('active');
//     }
//   });
// });

const dropdowns = Array.from(document.querySelectorAll('.c_page_filter__dropdown'));

document.addEventListener('click', (event) => {
  const clickedElement = event.target;
  const clickedDropdown = clickedElement.closest('.c_page_filter__dropdown');

if (clickedDropdown) {
    dropdowns.forEach((dropdown) => {
      if (dropdown !== clickedDropdown) {
        dropdown.classList.remove('active');
      }
    });

clickedDropdown.classList.toggle('active');
  } else {
    const dropdownIsActive = dropdowns.some((dropdown) => {
      return dropdown.classList.contains('active');
    });

if (dropdownIsActive) {
      dropdowns.forEach((dropdown) => {
        dropdown.classList.remove('active');
      });
    }
  }
});

// remove all .active classes when clicked anywhere
// dropDownMenuHide = true;
// $('body').on("click", function () {
//     if (dropDownMenuHide) $('.has-dropdown').removeClass('has-dropdown--active');
//     dropDownMenuHide = true;
// });

// // add and remove .active
// $('body').on('click', '.has-dropdown', function () {
//     var self = $(this);
//     if (self.hasClass('has-dropdown--active')) {
//         $('.has-dropdown').removeClass('has-dropdown--active');
//         return false;
//     }
//     $('.has-dropdown').removeClass('has-dropdown--active');
//     self.toggleClass('has-dropdown--active');
//     dropDownMenuHide = false;
// });

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.

${this.title}

Code Editor : app.js

Urban Research Lab