hovering-fnc-old.js

//Hero Icons script .......................................................................................
const data = {
  php: [
    "PHP development",
    "PHP is one of the most popular development languages for web applications and is one of the core technologies we utilize at Guaranteed Software. Furthermore, we support development in legacy 5.x code bases, popular 7.x versions, as well as modern 8.x endeavors.",
  ],
  laravel: [
    "Laravel development",
    "Laravel is fairly new but already a widely popular PHP framework used to create dynamic and high-performing web applications. Laravel has a well-versed set of tools that allow us to simplify the development process and improve the speed and quality of the designed program.",
  ],
  magento: [
    "Magento development",
    "Magento is one of the market leaders of the e-Commerce platform segment, having been acquired by Adobe in June 2018 for 1.6bn dollars. Its increased popularity is due to several reasons, such as a free plan suitable for most e-Commerce stores, a high degree of flexibility, and a long market presence.",
  ],
  android: [
    "Android development",
    "Android is definitely one of the most popular operating systems in mobile technology as it has been around for over ten years. It’s an open-source mobile operating system running on almost 80% of smartphones worldwide.",
  ],
  css3: [
    "CSS3 development",
    "HTML5 and CSS3 are the cornerstones of front-end development. CSS stands for Cascading Style Sheets, and its primary function is to define the layout of the content made with HTML. Basically, it helps style the web page.",
  ],
  angular: [
    "Angular development",
    "Angular.JS is one of the most powerful open-source front-end development frameworks, which allows us to create powerful web portals and applications with outstanding UI.",
  ],
  ios: [
    "IOS development",
    "iOS is a particularly popular operating system running across Apple mobile devices with a broad audience worldwide. iOS is designed to be a unique and highly secure system that provides multiple benefits to its users.",
  ],
  symfony: [
    "Symfony development",
    "Symfony is one of the most popular and widely used PHP frameworks. It comprises a set of valuable components for the development of websites, portals, and web applications.",
  ],
  wordpress: [
    "WordPress development",
    "WordPress is by far the most popular platform for website development. Its popularity is mainly due to the high degree of flexibility it offers to developers and the stellar user experience it provides to non-technical people.",
  ],
  woo: [
    "Woocommerce development",
    "WooCommerce is a free WordPress plugin designed for selling products and services. Today, WooCommerce is one of the most popular WordPress plugins and the most used e-commerce tool across websites, with about 42% of online stores powered by it.",
  ],
  mysql: [
    "MySQL development",
    "MySQL is an open-source database management system, and it’s the most popular solution used with PHP. Having such widespread use, MySQL is used in millions of websites throughout the web.",
  ],
  html5: [
    "HTML5 development",
    "HTML5 and CSS3 are the cornerstones of front-end development. HTML is a markup language used to structure content on web pages and, in one way or another, is used by every webpage in existence.",
  ],
  python: [
    "Python development",
    "Python is a highly flexible programming language designed for multiple purposes. It can be used to create web or mobile apps, CMS, or even video games. Being a practical solution on any scale, Python is widely popular, and it’s used to power all sorts of applications such as Instagram, for example.",
  ],
  java: [
    "Java development",
    "Java is one of the most popular programming languages widely used for creating web and mobile applications, web portals, customized and enterprise software, games, etc. The immense advantage of Java is that it's platform-independent.",
  ],
  nodejs: [
    "NodeJS development",
    "Node.js is a run-time cross-platform environment designed to create applications using JavaScript on the server-side. While JavaScript is a front-end development language that operates on the client-side basically, in your browser, Node.js allows you to implement it on the back-end of your product.",
  ],
  mongodb: [
    "MongoDB development",
    "MongoDB is an open-source object-oriented NoSQL database. It is simple, scalable, and provides high performance as well as it is easy to implement and use.",
  ],
  webflow: [
    "Webflow development",
    "Webflow is a highly efficient and advanced web development tool. The main three features of Webflow include the designer, CMS, and hosting platform.",
  ],
  react: [
    "React development",
    "React is a popular front-end development tool that was initially created for Facebook. It is a JavaScript library designed to simplify the development process and improve the user experience.",
  ],
};

let resetHeroIconsTimoutHandle;
let mouseOutTimeout;
const heroTextSection = document.querySelector(".hero-text-section");

let currentlyHoveredTech, preventHover = false, unlockTimeout;
const iconHover = (tech) => {
  currentlyHoveredTech = tech;
  if (preventHover) {
    return;
  }
  preventHover = true;
  
  clearTimeout(resetHeroIconsTimoutHandle);
  clearTimeout(mouseOutTimeout);

  document.querySelector(".hero-text-section").style.opacity = "0";

  setTimeout(() => {
    document.getElementById("homepage-hero-title-text").innerHTML = data[tech][0];
    document.getElementById("homepage-hero-subtext").innerHTML = data[tech][1];
    const techicons = document.querySelectorAll(".hero-tech-icon");
    document.querySelector(".hero-text-section").style.opacity = "1";

    for (let i = 0; i < techicons.length; i++) {
      techicons[i].style.opacity = 0.4;
    }

    document.getElementById(`${tech}-hero-icon`).style.opacity = "1";
  }, 200);

};

/**
 * Hides the hero text section through opacity, then after 200 ms (to simulate transition):
 * 1. reset title and subtext to the default values
 * 2. set every icon opacity to 1 (fully visible)
 * 3. reveal hero text section through opacity
 */
function resetHeroIcons () {
    document.querySelector('.hero-text-section').style.opacity = '0';
    resetHeroIconsTimoutHandle = setTimeout(() => {
        document.getElementById('homepage-hero-title-text').innerHTML =
            'Custom Software Development at World Class Standards';

        document.getElementById('homepage-hero-subtext').innerHTML =
            'Custom Solutions  |  Web Development  |  Mobile Development  |  Cloud Solutions  |  Blockchain  |  IOT';

        const techicons = document.querySelectorAll('.hero-tech-icon');

        for (let i = 0; i < techicons.length; i++) {
            techicons[i].style.opacity = 1;
        }

        document.querySelector('.hero-text-section').style.opacity = '1';

    }, 200); //simulates transition
}

/**
 * Schedules the return of control to hero icon hovering logic to happen after 0.5 seconds,
 * that was temporarily paused to allow users to click on Start a project button
 * Places the timeout/schedule handle into {@see unlockTimeout} to be cleared on text section hover
 */
function scheduleIconUnlock () {
    unlockTimeout = setTimeout(function () {
        preventHover = false;
        unlockTimeout = null;
        if (currentlyHoveredTech) {
            iconHover(currentlyHoveredTech);
        } else {
            resetHeroIcons();
        }
    }, 500);
}

document.querySelectorAll('.hero-tech-icon').forEach((element) => {
  element.addEventListener('mouseover', () => iconHover(element.dataset.tech));
  element.addEventListener('mouseout', () => heroTechIconsMouseout());
});

/**
 * Event handler of onMouseOut event for tech hero icons, identified by hero-tech-icon class
 */
const heroTechIconsMouseout = () => {
    currentlyHoveredTech = null;
    if (preventHover) {
        if (!unlockTimeout) {
            scheduleIconUnlock();
        }
        return;
    }

    mouseOutTimeout = setTimeout(resetHeroIcons, 800);
};

document.querySelector('.hero-text-section').addEventListener('mouseenter', function () {
    clearTimeout(unlockTimeout);
});
document.querySelector('.hero-text-section').addEventListener('mouseleave', scheduleIconUnlock);