Widget

by George Y

HTML

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Widgets</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
  <link rel="preload" href="https://assets.hellasdirect.gr/common/assets/5.11.85/images/widgets/lnkv01/car_selected.svg" as="image">
    <link rel="preload" href="https://assets.hellasdirect.gr/common/assets/5.11.85/images/widgets/lnkv01/bike_selected.svg" as="image">
      <link rel="preload" href="https://assets.hellasdirect.gr/common/assets/5.11.85/images/widgets/lnkv01/property_selected.svg" as="image">
  <!--   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/base-min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/grids-min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/grids-responsive-min.css"> -->
</head>

<body>
  <div class="main-c">
    <div class="pure-g hd">
      <div class="pure-u-1-2">
        <h5 class="hd-top h4">Πάρε μια προσφορά</h5>
        <h6 class="hd-bt">σε μόνο 5 λεπτά</h6>
      </div>
      <div class="pure-u-1-2 logo-wrap">
        <span class="logo"></span>
      </div>
    </div>

    <div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
  <ul class="pure-menu-list">
        <li class="pure-menu-item">
          <a href="#" class="car pure-menu-link active">Αυτοκίνητο</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="bike pure-menu-link">Μηχανή</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="property pure-menu-link">Σπίτι</a>
        </li>
      </ul>
    </div>
    <div class="pure-g">
      <div class="pure-u-1">
        <form...

CSS

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.logo-wrap {
  display: flex !important;
  justify-content: flex-end;
}

.main-c {
  padding: 1rem;

}

.hd-bt {
  font-weight: 400;
}

.hd-top,
.hd-bt {
  margin: 0;
}

.logo {
  background: transparent url(https://www.hellasdirect.gr/user/pages/assets/common/logo/[email protected]) no-repeat 0 0;
  background-size: 83px 35px;
  width: 83px;
  height: 35px;
  display: flex;
}


.pure-menu.pure-menu-horizontal.pure-menu-scrollable {
  border-bottom: 1px solid #cccccc;
  padding: 0;
  margin-top: 1rem;
}

.pure-menu-item {
  border-bottom: 2px solid transparent;
}


.pure-menu-link:focus,
.pure-menu-link:hover {
  background-color: transparent !important;
  border-bottom: 2px solid #c5c5c5;

}

.pure-menu-link.active {
  background-color: transparent !important;
  border-bottom: 2px solid #006fea !important;
}

.pure-menu-link {

}

.pure-menu-link {
  display: flex !important;
  align-items: center !important;
  margin-bottom: -2px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #000000 !important;
  border-bottom: 2px solid transparent;
  font-size: 0.85rem;
  font-weight: 700;
  color: #000000 !important;
}



input {
  width: 100%;
  border: 1px solid #cfcfcf;
  box-shadow: none !important;
  border-radius: 110px !important;
  outline-width: 0;
  height: 40px;
  border-radius: 110px;
  outline-width: 0;
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 54px;
  padding-right: 136px;
}

.form-input-wrapper {
  display: flex;
  flex-grow: 1;
}

.form-data {
  width: 100%;
}

form.property .hd-carreg-icons{
    display: none;
}


form.property .prd-input{
    padding-left: 12px;
}

.hd-carreg-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: none;
  position: relative;
  float: left;
  border-top-left-radius: 110px;
  border-bottom-left-radius: 110px;
 ...

JavaScript

if(typeof(hd360) == 'undefined') {
    hd360 = {};
};

hd360.widget = {};
hd360.widget.eventListeners = {};
hd360.widget.eventListeners.add = {};
hd360.widget.eventListeners.add.linkMenu = {};
hd360.widget.eventListeners.add.cta = {};
hd360.widget.eventListeners.add.input = {};
hd360.widget.utils = {};
hd360.widget.clickTag = null;


window.addEventListener('load', function () {
	hd360.widget.init();
});

hd360.widget.init = function () {
	hd360.widget.clickTag = hd360.widget.utils.getIframeUrlParam('ctag');
	hd360.widget.eventListeners.add.initAll();
}
hd360.widget.eventListeners.add.initAll = function () {
	hd360.widget.eventListeners.add.linkMenu.onClick();
  hd360.widget.eventListeners.add.cta.onClick();
};

hd360.widget.eventListeners.add.linkMenu.onClick = function () {
	
  const linkMenusElem = document.querySelectorAll('a.pure-menu-link');
  
  linkMenusElem.forEach((link) => {
  
    link.addEventListener('click', (event) => {
    
      linkMenusElem.forEach((_link) => {
        _link.classList.remove('active');
      });
      
      let formElement = document.querySelector('form.insurance-form');
      let inputElement = formElement.querySelector('.prd-input');
      let selectedProduct = event.target.classList.value.replace('pure-menu-link','').replaceAll(' ','');
      hd360.widget.utils.setSelectedProductAttrToForm(selectedProduct);
      let isPropertySelected = selectedProduct == 'property';
			
      if(isPropertySelected) {
        inputElement.placeholder = inputElement.getAttribute('data-plc-prop');
      } else {
        inputElement.placeholder = inputElement.getAttribute('data-plc-motor');
      }
      
      event.target.classList.add('active');
    });
  });
};

hd360.widget.eventListeners.add.cta.onClick = function () {
	const ctaBtnElem = document.querySelector('button');
  
  ctaBtnElem.addEventListener('click', (event) => {
    event.preventDefault();
    let formElement = document.querySelector('form.insurance-form');	
    let...