How to use ZIndex method in storybook-root
Best JavaScript code snippet using storybook-root
app.js
Source:app.js 
1// show windows on click2var startAbout = document.querySelector(".start-about")3var startGoodbye = document.querySelector(".start-goodbye")4var startHelpBox = document.querySelector(".start-help")5// desktop icons6//var iconAbout = document.querySelector(".icon-about")7var iconImages = document.querySelector(".icon-images")8var iconTrash = document.querySelector(".icon-trash")9var iconDocuments = document.querySelector(".icon-documents")10var iconEmails = document.querySelector(".icon-emails")11// desktop windows12var allWindows = document.querySelector(".hidden")13var windowAbout = document.querySelector(".about")14var windowImages = document.querySelector(".images")15var windowTrash = document.querySelector(".trash")16var windowMood = document.querySelector(".mood")17var windowDocuments = document.querySelector(".documents")18var windowEmails = document.querySelector(".emails")19var boxGoodbye = document.querySelector(".goodbye")20var boxEmailAna = document.querySelector("section.help")21var desktopIcon = document.querySelector(".desktop-icon")22var windowClose = document.querySelectorAll(".window-close")23var desktopWindow = document.querySelectorAll(".hidden")24function showWindow() {25 startAbout.addEventListener("click", function(){26 windowAbout.classList.toggle("show-window");27 windowAbout.classList.toggle("hide-window");28 windowMood.style.zIndex = 2;29 windowAbout.style.zIndex = 3;30 windowDocuments.style.zIndex = 2;31 windowImages.style.zIndex = 2;32 windowTrash.style.zIndex = 2;33 windowEmails.style.zIndex = 2;34 boxEmailAna.style.zIndex = 2;35 boxGoodbye.style.zIndex = 2;36 })37 // iconAbout.addEventListener("click", function(){38 // windowAbout.classList.toggle("show-window");39 // windowAbout.classList.toggle("hide-window");40 // windowAbout.style.zIndex = 3;41 //windowProjects.style.zIndex = 2;42 //windowTrash.style.zIndex = 2;43 44 45 // })46 iconImages.addEventListener("click", function(){47 windowImages.classList.toggle("show-window");48 windowImages.classList.toggle("hide-window");49 windowMood.style.zIndex = 2;50 windowAbout.style.zIndex = 2;51 windowDocuments.style.zIndex = 2;52 windowImages.style.zIndex = 3;53 windowTrash.style.zIndex = 2;54 windowEmails.style.zIndex = 2;55 boxEmailAna.style.zIndex = 2;56 boxGoodbye.style.zIndex = 2;57 58 })59 iconTrash.addEventListener("click", function(){60 windowTrash.classList.toggle("show-window");61 windowTrash.classList.toggle("hide-window");62 windowMood.style.zIndex = 2;63 windowAbout.style.zIndex = 2;64 windowDocuments.style.zIndex = 2;65 windowImages.style.zIndex = 2;66 windowTrash.style.zIndex = 3;67 windowEmails.style.zIndex = 2;68 boxEmailAna.style.zIndex = 2;69 boxGoodbye.style.zIndex = 2;70 71 })72 iconDocuments.addEventListener("click", function(){73 windowDocuments.classList.toggle("show-window");74 windowDocuments.classList.toggle("hide-window");75 windowMood.style.zIndex = 2;76 windowAbout.style.zIndex = 2;77 windowDocuments.style.zIndex = 3;78 windowImages.style.zIndex = 2;79 windowTrash.style.zIndex = 2;80 windowEmails.style.zIndex = 2;81 boxEmailAna.style.zIndex = 2;82 boxGoodbye.style.zIndex = 2;83 84 })85 iconEmails.addEventListener("click", function(){86 windowEmails.classList.toggle("show-window");87 windowEmails.classList.toggle("hide-window");88 windowMood.style.zIndex = 2;89 windowAbout.style.zIndex = 2;90 windowDocuments.style.zIndex = 2;91 windowImages.style.zIndex = 2;92 windowTrash.style.zIndex = 2;93 windowEmails.style.zIndex = 3;94 boxEmailAna.style.zIndex = 2;95 boxGoodbye.style.zIndex = 2;96 })97 startGoodbye.addEventListener("click", function(){98 windowMood.style.zIndex = 2;99 windowAbout.style.zIndex = 2;100 windowDocuments.style.zIndex = 2;101 windowImages.style.zIndex = 2;102 windowTrash.style.zIndex = 2;103 windowEmails.style.zIndex = 2;104 boxEmailAna.style.zIndex = 2;105 boxGoodbye.style.zIndex = 3;106 })107 startHelpBox.addEventListener("click", function(){108 windowMood.style.zIndex = 2;109 windowAbout.style.zIndex = 2;110 windowDocuments.style.zIndex = 2;111 windowImages.style.zIndex = 2;112 windowTrash.style.zIndex = 2;113 windowEmails.style.zIndex = 2;114 boxEmailAna.style.zIndex = 3;115 boxGoodbye.style.zIndex = 2;116 })117 118}119showWindow();120// hide window on x button121var aboutX = document.querySelector(".about .window-close")122var moodX = document.querySelector(".mood .window-close")123var imagesX = document.querySelector(".images .window-close")124var trashX = document.querySelector(".trash .window-close")125var documentsX = document.querySelector(".documents .window-close")126var emailsX = document.querySelector(".emails .window-close")127var helpX = document.querySelector(".help .window-close")128var goodbyeX = document.querySelector(".goodbye .window-close")129function exitAbout() {130 aboutX.addEventListener("click", function(){131 windowAbout.classList.remove("show-window");132 windowAbout.classList.add("hide-window");133 })134}135function exitDocuments() {136 documentsX.addEventListener("click", function(){137 windowDocuments.classList.remove("show-window");138 windowDocuments.classList.add("hide-window");139 })140}141function exitImages() {142 imagesX.addEventListener("click", function(){143 windowImages.classList.remove("show-window");144 windowImages.classList.add("hide-window");145 })146}147function exitTrash() {148 trashX.addEventListener("click", function(){149 windowTrash.classList.remove("show-window");150 windowTrash.classList.add("hide-window");151 })152}153function exitMood() {154 moodX.addEventListener("click", function(){155 windowMood.classList.remove("show-window");156 windowMood.classList.add("hide-window");157 })158}159function exitHelp() {160 helpX.addEventListener("click", function(){161 boxEmailAna.style.display = "none";162 })163}164function exitGoodbye() {165 goodbyeX.addEventListener("click", function(){166 boxGoodbye.style.display = "none";167 })168}169function exitEmails() {170 emailsX.addEventListener("click", function(){171 windowEmails.classList.remove("show-window");172 windowEmails.classList.add("hide-window");173 })174}175exitAbout()176exitImages()177exitDocuments()178exitTrash()179exitMood()180exitEmails()181exitHelp()182exitGoodbye()183// draggable windows184var container = document.querySelector(".windows");185var activeItem = null;186var active = false;187var currentX;188var currentY;189var initialX;190var initialY;191var xOffset = 0;192var yOffset = 0;193container.addEventListener("touchstart", dragStart, false);194container.addEventListener("touchend", dragEnd, false);195container.addEventListener("touchmove", drag, false);196container.addEventListener("mousedown", dragStart, false);197container.addEventListener("mouseup", dragEnd, false);198container.addEventListener("mousemove", drag, false);199function dragStart(e) {200 if (e.target !== e.currentTarget) {201 active = true;202 // this is the item we are interacting with203 activeItem = e.target;204 if (activeItem !== null) {205 if (!activeItem.xOffset) {206 activeItem.xOffset = 0;207 }208 if (!activeItem.yOffset) {209 activeItem.yOffset = 0;210 }211 if (e.type === "touchstart") {212 activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;213 activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;214 } else {215 216 activeItem.initialX = e.clientX - activeItem.xOffset;217 activeItem.initialY = e.clientY - activeItem.yOffset;218 }219 }220 }221 }222 function dragEnd(e) {223 if (activeItem !== null) {224 activeItem.initialX = activeItem.currentX;225 activeItem.initialY = activeItem.currentY;226 }227 active = false;228 activeItem = null;229 }230 function drag(e) {231 if (active) {232 if (e.type === "touchmove") {233 e.preventDefault();234 activeItem.currentX = e.touches[0].clientX - activeItem.initialX;235 activeItem.currentY = e.touches[0].clientY - activeItem.initialY;236 } else {237 activeItem.currentX = e.clientX - activeItem.initialX;238 activeItem.currentY = e.clientY - activeItem.initialY;239 }240 activeItem.xOffset = activeItem.currentX;241 activeItem.yOffset = activeItem.currentY;242 setTranslate(activeItem.currentX, activeItem.currentY, activeItem);243 }244 }245 function setTranslate(xPos, yPos, el) {246 el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";247 }248 // show start menu on click249 var startMenu = document.querySelector(".start")250 var startLogo = document.querySelector(".logo")251 252function classToggle() {253 startMenu.classList.add("show-start");254 startMenu.classList.remove("hide-start");255}256function removeToggle() {257 startMenu.classList.remove("show-start");258 startMenu.classList.add("hide-start");259}260function menuToggle() {261 startLogo.addEventListener("mouseenter", function(){262 classToggle()263 startSettingsMenu.classList.remove("show-start")264 startSettingsMenu.classList.add("hide-start")265 startRecentMenu.classList.remove("show-start");266 startRecentMenu.classList.add("hide-start");267 })268 startMenu.addEventListener("mouseleave", function(){269 removeToggle()270 startSettingsMenu.classList.remove("show-start")271 startSettingsMenu.classList.add("hide-start")272 startRecentMenu.classList.remove("show-start");273 startRecentMenu.classList.add("hide-start");274 })275}276menuToggle()277// show settings start menu on click 278var startSettingsMenu = document.querySelector(".start-settings-menu")279var startSettingsLogo = document.querySelector(".start-settings")280var startRecentMenu = document.querySelector(".start-recent-menu")281var startRecentLogo = document.querySelector(".start-recent")282var startHelpBox = document.querySelector(".start-help")283var startGoodbye = document.querySelector(".start-goodbye")284function settingsClassToggle() {285 startSettingsMenu.classList.add("show-start");286 startSettingsMenu.classList.remove("hide-start");287 288 289}290function settingsMenuToggle() {291 startSettingsLogo.addEventListener("mouseenter", function(){292 settingsClassToggle();293 startRecentMenu.classList.remove("show-start");294 startRecentMenu.classList.add("hide-start");295 296 })297 298}299settingsMenuToggle()300function recentClassToggle() {301 startRecentMenu.classList.add("show-start");302 startRecentMenu.classList.remove("hide-start");303 304}305function recentMenuToggle() {306 startRecentLogo.addEventListener("mouseenter", function(){307 recentClassToggle();308 startSettingsMenu.classList.remove("show-start")309 startSettingsMenu.classList.add("hide-start")310 311 } )312 313}314recentMenuToggle()315function recentMenuShow() {316 startSettingsMenu.addEventListener("mouseenter", function(){317 startMenu.classList.add("show-start")318 startMenu.classList.remove("hide-start")319 })320}321recentMenuShow()322function openHelpBox() {323 startHelpBox.addEventListener("click", function(){324 boxEmailAna.style.display = "block";325 })326}327openHelpBox();328function openGoodbye() {329 startGoodbye.addEventListener("click", function(){330 boxGoodbye.style.display = "block";331 })332}333openGoodbye();334// open windows from minimized menu bar335var menuAbout = document.querySelector(".min-about")336var menuDocuments = document.querySelector(".min-documents")337var menuImages = document.querySelector(".min-images")338function openMinimized() {339 menuAbout.addEventListener("click", function(){340 windowAbout.classList.add("show-window");341 windowAbout.style.zIndex = 3;342 windowDocuments.style.zIndex = 2;343 windowImages.style.zIndex = 2;344 windowTrash.style.zIndex = 2;345 windowMood.style.zIndex = 2;346 windowEmails.style.zIndex = 2;347 348 })349 menuDocuments.addEventListener("click", function(){350 windowDocuments.classList.add("show-window");351 windowAbout.style.zIndex = 2;352 windowDocuments.style.zIndex = 3;353 windowImages.style.zIndex = 2;354 windowTrash.style.zIndex = 2;355 windowMood.style.zIndex = 2;356 windowEmails.style.zIndex = 2;357 358 359 })360 menuImages.addEventListener("click", function(){361 windowImages.classList.add("show-window");362 windowAbout.style.zIndex = 2;363 windowDocuments.style.zIndex = 2;364 windowImages.style.zIndex = 3;365 windowTrash.style.zIndex = 2;366 windowMood.style.zIndex = 2;367 windowEmails.style.zIndex = 2;368 369 })370}371openMinimized()372// toggle open windows closed if clicked again373function openAndCloseAbout() {374 windowAbout.classList.toggle("show-window");375 windowAbout.classList.toggle("hide-window");376 }377function openAndCloseDocuments() {378 379 windowDocuments.classList.toggle("show-window");380 windowDocuments.classList.toggle("hide-window");381 }382function openAndCloseImages() {383 windowImages.classList.toggle("show-window");384 windowImages.classList.toggle("hide-window");385 }386function minToggle() {387 menuAbout.addEventListener("click", openAndCloseAbout)388 menuDocuments.addEventListener("click", openAndCloseDocuments)389 menuImages.addEventListener("click", openAndCloseImages)390 }391minToggle()392// maximize background393var makeThisBig = document.querySelector("div.max-bg span.ok")394var closeMakeThisBig = document.querySelector("div.max-bg span.cancel")395var boxMakeThisBig = document.querySelector("div.max-bg")396var bodyBg = document.querySelector("body")397function makeBgBig() {398 makeThisBig.addEventListener("click", function(){399 bodyBg.style.backgroundImage = "url('images/anawang-default.gif')";400 bodyBg.style.backgroundSize = "cover";401 windowMood.classList.remove("show-window");402 windowMood.classList.add("hide-window");403 })404}405function closeBigBox() {406 closeMakeThisBig.addEventListener("click", function(){407 boxMakeThisBig.style.display = "none";408 })409}410makeBgBig();411closeBigBox();412// Help alert413var emailAna = document.querySelector("section.help span.ok")414var closeEmailAna = document.querySelector("section.help span.cancel")415var boxEmailAna = document.querySelector("section.help")416function letsEmailAna() {417 emailAna.addEventListener("click", function(){418 window.open('mailto:ana@anawang.com?subject=Hello');419 })420}421function closeEmailAnaBox() {422 closeEmailAna.addEventListener("click", function(){423 boxEmailAna.style.display = "none";424 })425}426letsEmailAna();427closeEmailAnaBox();428// Goodbye alert429// bring active window to front430function aboutToFront(){windowAbout.addEventListener("mousedown", function(){431 windowImages.style.zIndex = "2";432 windowDocuments.style.zIndex = "2";433 windowEmails.style.zIndex = "2";434 windowMood.style.zIndex = "2";435 windowTrash.style.zIndex = "2";436 windowAbout.style.zIndex = "3";437 boxGoodbye.style.zIndex = "2";438 boxEmailAna.style.zIndex = "2";439 440})441}442function documentsToFront(){windowDocuments.addEventListener("mousedown", function(){443 windowImages.style.zIndex = "2";444 windowDocuments.style.zIndex = "3";445 windowEmails.style.zIndex = "2";446 windowMood.style.zIndex = "2";447 windowTrash.style.zIndex = "2";448 windowAbout.style.zIndex = "2";449 boxGoodbye.style.zIndex = "2";450 boxEmailAna.style.zIndex = "2";451})452}453function imagesToFront(){windowImages.addEventListener("mousedown", function(){454 windowImages.style.zIndex = "3";455 windowDocuments.style.zIndex = "2";456 windowEmails.style.zIndex = "2";457 windowMood.style.zIndex = "2";458 windowTrash.style.zIndex = "2";459 windowAbout.style.zIndex = "2";460 boxGoodbye.style.zIndex = "2";461 boxEmailAna.style.zIndex = "2";462})463}464function moodToFront(){windowMood.addEventListener("mousedown", function(){465 windowImages.style.zIndex = "2";466 windowDocuments.style.zIndex = "2";467 windowEmails.style.zIndex = "2";468 windowMood.style.zIndex = "3";469 windowTrash.style.zIndex = "2";470 windowAbout.style.zIndex = "2";471 boxGoodbye.style.zIndex = "2";472 boxEmailAna.style.zIndex = "2";473})474}475function emailsToFront(){windowEmails.addEventListener("mousedown", function(){476 windowImages.style.zIndex = "2";477 windowDocuments.style.zIndex = "2";478 windowEmails.style.zIndex = "3";479 windowMood.style.zIndex = "2";480 windowTrash.style.zIndex = "2";481 windowAbout.style.zIndex = "2";482 boxGoodbye.style.zIndex = "2";483 boxEmailAna.style.zIndex = "2";484})485}486function trashToFront(){windowTrash.addEventListener("mousedown", function(){487 windowImages.style.zIndex = "2";488 windowDocuments.style.zIndex = "2";489 windowEmails.style.zIndex = "2";490 windowMood.style.zIndex = "2";491 windowTrash.style.zIndex = "3";492 windowAbout.style.zIndex = "2";493 boxGoodbye.style.zIndex = "2";494 boxEmailAna.style.zIndex = "2";495})496}497function goodbyeToFront(){boxGoodbye.addEventListener("mousedown", function(){498 windowImages.style.zIndex = "2";499 windowDocuments.style.zIndex = "2";500 windowEmails.style.zIndex = "2";501 windowMood.style.zIndex = "2";502 windowTrash.style.zIndex = "2";503 windowAbout.style.zIndex = "2";504 boxGoodbye.style.zIndex = "3";505 boxEmailAna.style.zIndex = "2";506})507}508function helpToFront(){boxEmailAna.addEventListener("mousedown", function(){509 windowImages.style.zIndex = "2";510 windowDocuments.style.zIndex = "2";511 windowEmails.style.zIndex = "2";512 windowMood.style.zIndex = "2";513 windowTrash.style.zIndex = "2";514 windowAbout.style.zIndex = "2";515 boxGoodbye.style.zIndex = "2";516 boxEmailAna.style.zIndex = "3";517})518}519aboutToFront()520documentsToFront()521imagesToFront()522moodToFront()523emailsToFront()524trashToFront()525goodbyeToFront()526helpToFront()527//background start effect on hover528var startImage = document.querySelector(".logo img")529function bgStart() {530 startImage.addEventListener("mouseover", function(){531 532 bodyBg.style.backgroundImage = 'url(images/start.svg)';533 bodyBg.style.backgroundSize = 'contain';534 bodyBg.style.backgroundPosition = 'center';535 })536 startImage.addEventListener("mouseout", function(){537 538 bodyBg.style.backgroundImage = 'none';539 })540}541bgStart()542// background effect on images hover543// emails544var emailsChanel = document.querySelector(".chanel")545function chanelMood() {546 emailsChanel.addEventListener("mouseover", function(){547 windowMood.style.backgroundImage = 'url(https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fcfef5bb8-c435-4ace-bfc1-61b7c2f65952_599x800.jpeg)';548 windowMood.style.backgroundSize = 'cover';549 windowMood.style.backgroundPosition = 'center';550 551 })552 emailsChanel.addEventListener("mouseout", function(){553 554 windowMood.style.backgroundImage = '';555 windowMood.innerHTML = '';556 })557}...
main.js
Source:main.js
1const menuItems = document.querySelectorAll('a')2const scrollSpySections = document.querySelectorAll('.section')34const handleScrollSpy = () => {5 if (document.body.classList.contains('main-page')) {6 const sections = []78 scrollSpySections.forEach(section => {9 // console.log(window.scrollY);10 // wartoÅÄ scrolla11 // console.log(section.offsetTop);12 // odlegÅoÅc danej sekcji od górnej krawÄdzi przeglÄ
darki13 // console.log(section.offsetHeight);14 // wysokoÅÄ każdej z sekcji1516 if (window.scrollY <= section.offsetTop + section.offsetHeight - 103) {17 sections.push(section)1819 const activeSection = document.querySelector(`[href*="${sections[0].id}"]`)2021 menuItems.forEach(item => item.classList.remove('active'))2223 activeSection.classList.add('active')24 }25 })26 }27}2829window.addEventListener('scroll', handleScrollSpy)3031const text = document.querySelector('.textanima')32let inputValue = 'Z nami stworzysz coÅ wyjÄ
tkowego'33let timeout34let index = 135let speed = 703637const writingAnimation = () => {38 text.innerHTML = inputValue.slice(0, index)3940 index++4142 if (index > text.length) return4344 timeout = setTimeout(writingAnimation, speed)45}4647writingAnimation()4849const textphonee = document.querySelector('.textphone')50let inputValuePhone = 'Z nami stworzysz coÅ wyjÄ
tkowego'51let timeoutPhone52let indexPhone = 153let speedPhone = 805455const writingAnimationForPhone = () => {56 textphonee.innerHTML = inputValuePhone.slice(0, indexPhone)5758 indexPhone++5960 if (indexPhone > textphonee.length) return6162 timeoutPhone = setTimeout(writingAnimationForPhone, speedPhone)63}6465writingAnimationForPhone()6667const mediumtextphonee = document.querySelector('.mediumtextphone')68let inputValuePhonee = 'Z nami stworzysz coÅ wyjÄ
tkowego'69let timeoutPhonee70let indexPhonee = 171let speedPhonee = 807273const writingAnimationForPhonee = () => {74 mediumtextphonee.innerHTML = inputValuePhonee.slice(0, indexPhonee)7576 indexPhonee++7778 if (indexPhonee > mediumtextphonee.length) return7980 timeoutPhonee = setTimeout(writingAnimationForPhonee, speedPhonee)81}8283writingAnimationForPhonee()8485const textmess = document.querySelector('.mess')86let inputValuemess =87 'CHCESZ DOWIEDZIEÄ SIÄ WIÄCEJ NA TEMAT NASZYCH USÅUG? JESTEÅMY DO TWOJEJ DYSPOZYCJI! SKONTAKTUJ SIÄ Z NAMI ZA POMOCÄ FORMULARZA KONTAKTOWEGO.'88let timeoutmess89let indexmess = 190let speedmess = 809192const writingAnimationmess = () => {93 textmess.innerHTML = inputValuemess.slice(0, indexmess)9495 indexmess++9697 if (indexmess > textmess.length) return9899 timeoutmess = setTimeout(writingAnimationmess, speedmess)100}101102writingAnimationmess()103104const nav = document.querySelector('.nav')105const navBtn = document.querySelector('.burger-btn')106const allNavItems = document.querySelectorAll('.nav__item')107const navLink = document.querySelectorAll('.nav a')108const menu = document.querySelector('.nav__menu')109const navBtnBars = document.querySelector('.burger-btn__bars')110111const handleNav = () => {112 nav.classList.toggle('nav--activ')113114 navBtnBars.classList.remove('black-bars-color')115116 navLink.forEach(item => {117 item.addEventListener('click', () => {118 nav.classList.remove('nav--activ')119 })120 })121122 handleNavItemsAnimation()123}124125const handleNavItemsAnimation = () => {126 let delayTime = 0127128 allNavItems.forEach(item => {129 item.classList.toggle('nav-items-animation')130 item.style.animationDelay = '.' + delayTime + 's'131 delayTime++132 })133}134135navBtn.addEventListener('click', handleNav)136137const navi = document.querySelector('.newnav')138139const changeStyleNav = () => {140 navi.classList.toggle('shrink', window.scrollY > 400)141}142143window.addEventListener('scroll', changeStyleNav)144145const accordion = document.querySelector('.accordion')146const accordionBtns = document.querySelectorAll('.accordion-btn')147148function openAccordionItems() {149 this.nextElementSibling.classList.toggle('showoffer')150}151152// const closeAccordionItems = () => {153// const allActiveItems = document.querySelectorAll('.accordion-info');154// };155156accordionBtns.forEach(btn => btn.addEventListener('click', openAccordionItems))157158var acc = document.getElementsByClassName('accordion')159var i160161for (i = 0; i < acc.length; i++) {162 acc[i].addEventListener('click', function () {163 /* Toggle between adding and removing the "active" class,164 to highlight the button that controls the panel */165 this.classList.toggle('active')166167 /* Toggle between hiding and showing the active panel */168 var panel = this.nextElementSibling169 if (panel.style.display === 'block') {170 panel.style.display = 'none'171 } else {172 panel.style.display = 'block'173 }174 })175}176177const buttonprice = document.querySelector('.openprice')178const modalShadow = document.querySelector('.modal-shadow')179const butoffer = document.querySelector('.butoffer')180const butoffertwo = document.querySelector('.butoffer2')181const butofferthree = document.querySelector('.butoffer3')182// const a1 = document.querySelector('.a1')183// const a2 = document.querySelector('.a2')184const sentbutton = document.querySelector('.border')185const closeformdesk = document.querySelector('.closefordesk')186const faildesk = document.getElementById('fail')187188const showModal = () => {189 if (!(modalShadow.style.display === 'flex')) {190 modalShadow.style.display = 'flex'191 butoffer.style.zIndex = '-1'192 butoffertwo.style.zIndex = '-1'193 butofferthree.style.zIndex = '-1'194 sentbutton.style.zIndex = '-1'195 } else {196 modalShadow.style.display = 'none'197 butoffer.style.zIndex = '0'198 butoffertwo.style.zIndex = '0'199 butofferthree.style.zIndex = '0'200 sentbutton.style.zIndex = '0'201 }202}203204buttonprice.addEventListener('click', showModal)205window.addEventListener('click', e => (e.target === modalShadow ? showModal() : false))206closeformdesk.addEventListener('click', () => {207 modalShadow.style.display = 'none'208 butoffer.style.zIndex = '0'209 butoffertwo.style.zIndex = '0'210 butofferthree.style.zIndex = '0'211 sentbutton.style.zIndex = '0'212 faildesk.textContent = ''213})214215const buttonpricemobile = document.querySelector('.openpricemobile')216const modalShadowmobile = document.querySelector('.modal-shadowmobile')217const downarrow = document.querySelector('.down__arrow')218const aboutusshadow = document.querySelector('.aboutusshadow')219const aboutustext = document.querySelector('.aboutustext')220const portfoliophoto = document.querySelector('.portfoliophoto')221const portfolioshadow = document.querySelector('.portfolioshadow')222const dimg = document.querySelector('.img1')223const dimgtwo = document.querySelector('.img2')224const dimgthree = document.querySelector('.img3')225const mobilenaviga = document.querySelector('.mobilenav')226const burgerbtns = document.querySelector('.burger-btn')227const closemob = document.querySelector('.closeformmob')228const faillmob = document.getElementById('failmob')229const fb = document.getElementById('fb-customer-chat')230const fbtwo = document.querySelector('.fb-customerchat')231const fbthree = document.getElementById('fb-root')232const iconsociale = document.querySelector('.socialemedie')233234const showModalmobile = () => {235 if (!(modalShadowmobile.style.display === 'flex')) {236 modalShadowmobile.style.display = 'flex'237 butoffer.style.zIndex = '-1'238 butoffertwo.style.zIndex = '-1'239 butofferthree.style.zIndex = '-1'240 sentbutton.style.zIndex = '-1'241 textphonee.style.zIndex = '-1'242 downarrow.style.zIndex = '-1'243 aboutusshadow.style.zIndex = '-1'244 aboutustext.style.zIndex = '-1'245 portfoliophoto.style.zIndex = '-1'246 portfolioshadow.style.zIndex = '-1'247 dimg.style.zIndex = '-1'248 dimgtwo.style.zIndex = '-1'249 dimgthree.style.zIndex = '-1'250 mobilenaviga.style.zIndex = '-1'251 burgerbtns.style.zIndex = '-1'252 fb.style.zIndex = '-1'253 fbtwo.style.zIndex = '-1'254 fbthree.style.zIndex = '-1'255 iconsociale.style.zIndex = '-1'256 } else {257 modalShadowmobile.style.display = 'none'258 butoffer.style.zIndex = '0'259 butoffertwo.style.zIndex = '0'260 butofferthree.style.zIndex = '0'261 sentbutton.style.zIndex = '0'262 downarrow.style.zIndex = ''263 mobilenaviga.style.zIndex = ''264 burgerbtns.style.zIndex = ''265 fb.style.zIndex = ''266 fbtwo.style.zIndex = ''267 fbthree.style.zIndex = ''268 iconsociale.style.zIndex = ''269 }270}271272buttonpricemobile.addEventListener('click', showModalmobile)273window.addEventListener('click', e => (e.target === modalShadowmobile ? showModalmobile() : false))274closemob.addEventListener('click', () => {275 modalShadowmobile.style.display = 'none'276 butoffer.style.zIndex = '0'277 butoffertwo.style.zIndex = '0'278 butofferthree.style.zIndex = '0'279 sentbutton.style.zIndex = '0'280 downarrow.style.zIndex = ''281 mobilenaviga.style.zIndex = ''282 burgerbtns.style.zIndex = ''283 faillmob.textContent = ''284 fb.style.zIndex = ''285 fbtwo.style.zIndex = ''286 fbthree.style.zIndex = ''287 iconsociale.style.zIndex = ''
...
slideshow-animations.js
Source:slideshow-animations.js
1import Animations, {scale3d, translate, translated} from '../../mixin/internal/slideshow-animations';2import {assign, css} from 'uikit-util';3export default assign({}, Animations, {4 fade: {5 show() {6 return [7 {opacity: 0, zIndex: 0},8 {zIndex: -1}9 ];10 },11 percent(current) {12 return 1 - css(current, 'opacity');13 },14 translate(percent) {15 return [16 {opacity: 1 - percent, zIndex: 0},17 {zIndex: -1}18 ];19 }20 },21 scale: {22 show() {23 return [24 {opacity: 0, transform: scale3d(1 + .5), zIndex: 0},25 {zIndex: -1}26 ];27 },28 percent(current) {29 return 1 - css(current, 'opacity');30 },31 translate(percent) {32 return [33 {opacity: 1 - percent, transform: scale3d(1 + .5 * percent), zIndex: 0},34 {zIndex: -1}35 ];36 }37 },38 pull: {39 show(dir) {40 return dir < 041 ? [42 {transform: translate(30), zIndex: -1},43 {transform: translate(), zIndex: 0}44 ]45 : [46 {transform: translate(-100), zIndex: 0},47 {transform: translate(), zIndex: -1}48 ];49 },50 percent(current, next, dir) {51 return dir < 052 ? 1 - translated(next)53 : translated(current);54 },55 translate(percent, dir) {56 return dir < 057 ? [58 {transform: translate(30 * percent), zIndex: -1},59 {transform: translate(-100 * (1 - percent)), zIndex: 0}60 ]61 : [62 {transform: translate(-percent * 100), zIndex: 0},63 {transform: translate(30 * (1 - percent)), zIndex: -1}64 ];65 }66 },67 push: {68 show(dir) {69 return dir < 070 ? [71 {transform: translate(100), zIndex: 0},72 {transform: translate(), zIndex: -1}73 ]74 : [75 {transform: translate(-30), zIndex: -1},76 {transform: translate(), zIndex: 0}77 ];78 },79 percent(current, next, dir) {80 return dir > 081 ? 1 - translated(next)82 : translated(current);83 },84 translate(percent, dir) {85 return dir < 086 ? [87 {transform: translate(percent * 100), zIndex: 0},88 {transform: translate(-30 * (1 - percent)), zIndex: -1}89 ]90 : [91 {transform: translate(-30 * percent), zIndex: -1},92 {transform: translate(100 * (1 - percent)), zIndex: 0}93 ];94 }95 }...
Using AI Code Generation
1import React from "react";2import { storiesOf } from "@storybook/react";3import { withInfo } from "@storybook/addon-info";4import { withKnobs, text } from "@storybook/addon-knobs";5import { withA11y } from "@storybook/addon-a11y";6import { withReadme } from "storybook-readme";7import { withTests } from "@storybook/addon-jest";8import { withBackgrounds } from "@storybook/addon-backgrounds";9import { withOptions } from "@storybook/addon-options";10import results from "../.jest-test-results.json";11import readme from "./readme.md";12import { Button } from "./index";13const stories = storiesOf("Button", module);14stories.addDecorator(withKnobs);15stories.addDecorator(withA11y);16stories.addDecorator(withReadme(readme));17stories.addDecorator(withTests({ results }));18stories.addDecorator(19 withOptions({
Using AI Code Generation
1import { withZIndex } from 'storybook-addon-root';2export default withZIndex({3})(() => <div>My Story</div>);4import { configure } from '@storybook/react';5configure(require.context('../src', true, /\.stories\.js$/), module);6import { addDecorator } from '@storybook/react';7import withRoot from './withRoot';8addDecorator(withRoot);9import React from 'react';10import { withZIndex } from 'storybook-addon-root';11export default withZIndex({12})(() => <div>My Story</div>);13import { addons } from '@storybook/addons';14import { themes } from '@storybook/theming';15import { create } from '@storybook/theming/create';16addons.setConfig({17 theme: create({18 }),19});20module.exports = ({ config, mode }) => {21 config.module.rules.push({22 test: /\.(ts|tsx)$/,23 loader: require.resolve('ts-loader'),24 options: {25 },26 });27 config.resolve.extensions.push('.ts', '.tsx');28 return config;29};30{31 "dependencies": {32 },33 "devDependencies": {
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
