# Presentation Documentation

Step 1:- Setup for file strucutre for presentaion
* Received JSON/SVG/Animation files from designside/team
* In order to load the files need to create structure via "XHR"
* Made "src" Folder and the folder contain "XHR" request js/files (files names are aboutus.js, accolades.js,contactUs.js, customer.js, customerSecond.js, personalNote.js, profile.js, service.js, welcome.js) also they have global variable to store response.
* XHR files are define into frame.html using script tag. Once frame.html load all files are loaded
* Adding Reveal,Lottie,Google Fonts into the frame.html

Setp 2:- Setup for presentation container
* For resizing purposes we have made the height & width of the .container to 100% of its parent
* Maintaining 16/9 ratio as per requirement and creating function which name as "resizeTheIframe" with "100%" hight & width into the index.html file
* When resizing the window the event function (resizeTheIframe()) will calculate the respective height & weight based on the current height width of the window & specify the values for height & width on the ".main" so that the .container automatically gets the height & width of ".main"
* Resizing the function: How it works is? The logic:
i. when the ratio of current windows (w/h) is greater than 16/9, we are going to make the container's height as windows height and container's width will be adjusted as per the current height of the window (remember as we are fixing the height, we have to calculate the width based on the height) to maintain the aspect ratio.
ii. when the ratio of current windows (w/h) is not greater than 16/9, we are going to make the
container's width as windows width and container's height will be adjusted as per the current width of
the window (remember as we are fixing the width, we have to calculate the height based on the width) to
maintain the aspect ratio.
* Using window innerWidth, innerHeight and using DOM method(getElementById) to get container
to maintain aspectRatio.
* Wrapper "main" class to maintain svg into frame and it's also help to resizing window(aspectRatio).
* Into the index.html we are also include using script tag which is frame.html with wrapper class container and frame.html is define all presentation stuff
* iframe is making DOM for "frame.html".

Step 3. frame.html
* Defining library/files "style.css(local)",
"revealjs(https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.9.2/css/reveal.min.css - cdnjs link)",
"lottie js(https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.13/lottie.min.js)" and
"Google Fonts(https://fonts.googleapis.com/css2?
family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,
400;1,500;1,600;1,700;1,800;1,900&display=swap)"
* Now, Making hamburger menu using css (into the style.css line no.385 to 404) and to open and close hamburger menu defining DOM method which is "let menu = document.getElementById('menu')" with onclick event and the onclick event add and remove class "change".
* Into the Hamburger menu it's showing slides names and each slide name have onclick event with Reveal
Method to redirect to the corresponding slide.And the menu items are "Personal Note"(Reveal.slide(1, 0, 0)),"About Us(Reveal.slide(3, 0, 0))","Reviews(Reveal.slide(4, 0, 0))","Services(Reveal.slide(6, 0, 0))","Accolades(Reveal.slide(9, 0, 0))", "Contact Us(Reveal.slide(10, 0, 0))"
* Reveal Presentation start with "reveal" and "slides" classes as we have seen in line no.38 and 39.
* For, Navigation we have customize reveal buttons which is define into the "aside" tag with reveal inbuilt class "controls". left and right (arrows) we have overwrite Reveal css as per requirement which is defining into style.css (line no.408 to 443).
* Each slide are define into <"section"> tag.
* slide 1: welcome
- first "div" tag contain ".video-overlay" class is control opacity of background video. and class is come through the style.css(line no. 577 to 583).
- using the reveal js stream concept defining background video stream.
- for slide animation and to control slide using html id "slide_1_lottie". and "slide_1_lottie" is container for svg's.
* slide 2: personal note for realtor
- As mention before. html>div>id is represent own container for svg's to animate into particular ".main" container.
-"profile_greenSlide","profile_greenBox","profile_whiteBox","profile_logo","profile_text","profile_sub_text","profile_sign","profile_photo","profile_email_icon" these are the id's to use for this slide.
* slide 3: personal note for realtor with video
- As mention before. html>div>id is represent own container for svg's to animate into particular ".main"
container.
-"personalNoteBG","personalText","personalLogo","personalMail","personalPhone","personalSign","personalEmailIcon","personalPhoneIcon","personalImageIn","personalPlayIcon" these are the id's to use for this slide.
- On these slide we have video modal view. it will perform by click on play svg and play icon have DOM event/method to open modal(line no.394 to 402) and also we are creating modal css with their animation which is defining into "style.css" (line no.468 to 567)
- Using "personalModel" html id applying style(display), class ".show .modal-open" to open modal and class ".hide .modal-open" to close modal with their animation which is defining into script.js(open modal refer line no. 900 to 903 and close modal refer line no. 907 to 912). and once the play button animation completed after the whole event/method defining between script.js line no.898 to 913. into the modal we have video tag.
* slide 4: about us
- As mention before. html>div>id is represent own container for svg's to animate into particular ".main"
container.
- "personalImageOut","slide_lottie_about_us","about_us_logo","about_us_icons","about_us_what_we_stand","about_us_content","about_us_upArrow","about_us_downArrow" these are the id's to use for this slide.
- about us slide have 6 more icons and text content with there own svg's. we are not using Reveal Fragment concept the reason behind is we have to animate just center icons and text content not all thing like logo, title, arrow icons, and we are using lottie js. thus, lottie needs container. we tried for same thing but every time we needs new html id(container) and as well as we need to clear pervious fragments and one more thing if we change fragment animation not performing it will come static without animation.
* slide 5: customer review
- As mention before. html>div>id is represent own container for svg's to animate into particular ".main" container.
-"customer_footer","customer_title","customer_text","customer_review","customer_dot" these are the id's to use for this slide.
- customer review slide is different compare to sample video because Designing team have some problem to export svg/file/JSON file.
- Challenge:- Right now, we have 3 types of review or we can say that we have 3 customer reviews. In future we are making dynamically then review count is random for us. In this case by using fragment concept every time you need to define new html div tag with id and we need to clear old one.we can't define tags dynamically.
* slide 6: customer review (video):
- As mention before. html>div>id is represent own container for svg's to animate into particular ".main" container.
-"customer_second_footer","customer_second_logo","customer_img_in","customer_play_icon","customer_second_image","customer_second_title","customer_second_sub_title","customer_second_text","customer_second_review","customer_second_sub_text","customer_second_leftArrow","customer_second_rightArrow" these are the id's to use for this slide.
- Refer slide 3 points. to understand modal open and close event by using "myModel" div>id.
- minor changes for modal to Refer script.js line no. 393 to 407.

* slide 7: Service (slide 1):
- As mention before. html>div>id is represent own container for svg's to animate into particular ".main" container.
-"service_bg","service_logo","service_main_text","service_text","service_text_photo", "service_image_in" these are the id's to use for this slide.
* slide 8: Service (slide 2):
- As mention before. html>div>id is represent own container for svg's to animate into particular ".main" container.
-"service_bg_2","service_logo_2","service_main_text_2","service_text_2","service_text_photo_2" these are the id's to use for this slide.
- In these slide video represent on center by using Reveal js Streaming concept.
* slide 9: Service (slide 3):
- As mention before. html>div>id is represent own container for svg's to animate into particular ".main" container.
-"service_bg_3","service_mobile_3","service_logo_3","service_main_text_3","service_text_3","service_text_photo_3" these are the id's to use for this slide.
* slide 10: Accolades
- As mention before. html>div>id is represent own container for svg's to animate into particular ".main" container.
- "accolades_logo","accolades_fragment" these are the id's to use for this slide.
* slide 11: Contact Us
- As mention before. html>div>id is represent own container for svg's to animate into particular ".main" container.
-"contact_thanks_subtext","contact_map","contact_green_icon","contact_details","contact_social_icon","contact_middleBar" these are the id's to use for this slide.
- We have background video and we are using Reveal js Streaming concept. and for designing ".contact-video .opacity-9" class is define into style.css line no. 568 to 575
* Defining all files of JSON(with their animationData) using script tags to use their variable globally and
Also defining "getPresentation File" which is providing backend api response to change content,colors,video
and image dynamically.
step 4: Setup to fetch/load AnimationData of LottieJSON files/JSON files
- We need to load Animation Lottie files/JSON files with there using of XHR request (fetch -XHR)
- Using Promise all fetch the all requests then after storing Response to their respective global variables.
- Creating "src" folder to maintain all JSON files/lottie files as per slide name. these are the respective files name "welcome.js(slide 1)","profie.js(slide 2)","personalNote.js(slide 3)","aboutUs.js(slide 4)","customer.js(slide 5)","customerSecond.js(slide 6)","service.js(slide 7,8,9)","accolades.js(slide 10)","contactUs.js(slide 11)".
- In these files defining method "checkResponse" it's check backend api response come or not also we have maintain this thing using flag which is "responseFlag". Once "responseFlag" is true "checkResponse"funcation was break and start loading data to the variable. We are following these functionality because JavaScript is synchronous so we have to wait once server responded
- Solution: JavaScript is synchronous we have to make asynchronous and by using "settimeout()" to hold to load data to their global variable and by using "checkResponse" method, flag "responseFlag" we will make it asynchronous thing.
- All slides have comman producer/steps/methods.
- For, Change content dynamically we have defing "{{}}" into the JSON file. then we are filtering layers and using foreach to replace content/element etc.
For example: `welcomeAnimationData.layers.filter(l => l.nm == '{{CUSTOMER_TEXT}}').forEach(l => {
l.t.d.k[0].s.t = slideData.customerText;
});` . Here slideData is come through the server side. It's replacing text.
- Also we have definig "replaceBgColor" to replace/change whole slides backgroudColor/color which is defining into the "getPresentation.js" line no.119 to 121.

step 5: script.js
- Start with"getPresentation","welcomePromise","aboutUsPromise","accoladesPromise" Promises which are help
to make asynchronous things. Because JavaScript is compile line by line execution. However we are using promises to wait once all JSON files are ready/ all global variable are non-empty then next code/line which is Reveal.initialize executed.
- Reveal.initialize is one kind of constructor/method to initialize presentation/slides with their properties. we are using some of them which is:
`Reveal.initialize({
center: false,
embedded: true,
width: '100%',
height: '100%',
keyboard: {
37: () => { slideFragmentPrev() },
39: () => { slideFragmentNext() },
},
controls: false,
autoPlayMedia: true,
});`
- Now, We are using mainly two funcation "slideFragmentPrev" and "slideFragmentNext" for keyboard event which and two DOM click event/method "document.getElementById('nav-left')" and "document.getElementById('nav-right')" to navigate slides/fragments.
- Challenges:
1. We have 11 slides and their inner Fragments like "text"/"icons"/"content" etc. if we are using Reveal js builtin navigation we have to create/define all fragments with their html>div>id container to perform lottie animation. and when we go to load new fragment we have to clear old one.
2. For, Making dynamic content and slides by using backend data. If we are using fragments some of fragments are empty or user may not selected some of the fragments/slides to their presentation. In this case fragments are blank but The functionality of reveal is still navigate blank fragments.
- Solution:
1. To reduce this verious dependency we have created navigation funcations and created "lottieLoadAnimation" global funcation to clear fragments/JSON and load new animation.Also we are using Reveal.js change slide event "Reveal.addEventListener('slidechanged',e)" and ready event "Reveal.addEventListener('ready',e)". And It's 110% same as Reveal Js Works.

2.We are defining one into html>div>id for each dynamic/changeable content/text for example:
Go To About us slide(frame.html):
- html>div>id = "about_us_content" we are defining one id for 6 fragments/content and we are just replacing fragments data/content by using "lottieLoadAnimation" funcation.
- And we can able to skip/remove empty fragments as per dynamical user requirements.
- Now, when we change slide Reveal.addEventListener('slidechanged',event) event is fired it will give current slide number. and we are storing into the "slideIndex" variable `slideIndex = event.indexh`.
- for "slideFragmentPrev()" funcation perform pervious slide with all fragments/content and give conditional rendering for fragments slides. In These funcation defining "upArrowKey()" funcation it will maintain previous slides/fragments to load/unload animations.
- Similarly, defining "downArrowKey()" funcation into the "slideFragmentNext()" to change next slides/fragments to load/unload their animations.
- `function lottieLoadAnimation(animationData,slideName) {
document.getElementById(slideName).innerHTML = '';
return lottie.loadAnimation({
container: document.getElementById(slideName),
renderer: 'svg',
autoplay: true,
loop: false,
animationData: animationData,
rendererSettings: {
context: 'canvasContext',
clearCanvas: true,
}
});
}` these funcation is handle dynamic loading animation into the DOM/Slide/Presentation with clearing
previous content/fragment and load next contents/fragments with their id/container(DOM).
- We are loading animation by synchronously and asynchronously way.
for example(synchronously):
- Refer line no. 324 "defaultFragment()" In these method we are giving parameter/type to setdefault fragment
or slide animation it will perform synchronously.
and for asynchronously example:
- Refer line 211 to 238 welcome slide divided into 3 parts and Using the asynchronously way we can hold next animation and once current animation compeleted after it will start. In these way we are storing lottie animation fragment into the variable so we can use their own events/keys/methods.
-example: fragment.onComplete = welComefragmentLottie2 by Completed current lottieanimation after onComplete event is perform it will perform next animation and using these way we can divided animation into more parts.
- "defaulFragment()" funcation helpful to load default animationdata in their container.
- Now, defining click event into svg's. for example: "emailInbox" refer these funcaion
- we need to find using DOM event into their elements like
`let emailID = document.getElementById('profile_photo').getElementsByTagName('g');` and storing into variable then next step is adding class and click event Listener using DOM methods/funcations like `emailID[9].classList.add('pointerClass');
const emailTo = emailID[9].getAttribute('aria-label');
emailID[9].addEventListener('click',(event)=>{
....
});`
- Now, defining mouse/hover listener by moving mouse on the screen it will prioritize z-index svg. And we are doing these because we are usign svg with their full height and width. svg's become overlap to each other. so we need to prioritize svg for click/hover events for particular part
for example: Refer "aboutUsArrowListener" funcation
- In this funcation we are defining both arrows variables which is "downArrowTag","upArrowTag" and using DOM method getElemenetById to perform onmousemove event.
- we are calculate by hovering mouse on which part will be prioritize SVG with using of z-index.
`if((event.clientY / window.outerHeight) 0.5)` these condition works to prioritize "upArrowTag" and reverse condition works to prioritize "downArrowTag".
- As well as for contact us we are using these same concept to divided into parts and prioritize z-index for click event.

* Dev Notes:
- To load new animation to clear innerHtml everytime. Because sometimes it has load but lottie animation is performing as per exception. this issue occur because html tag innervalue is already assign and whenever we go to the visited slide tag value is all ready their.
- lottie.loadAnimation is need DOM id container. and we are using renderer 'SVG' option because svg is auto resizable as per screen aspect ratio.
- Applying click event on SVG's it's very difficult we need to find inner tag to apply event.
- We are included "assest" folder to store "fonts" files, "images" and "video" files and JSON(jsonFiles) files.

## CSS Portion
## style CSS

`.reveal .slides>section,
.reveal .slides>section>section {
padding: 0px;
}`
- applying 0 padding for reveal section and overwrite ".slides " (Reveal class). It will remove Reveal padding.

`.reveal.slide section {
width: 100vw;
height: 100vh;
}`
- applying height(100vh) and width(100vw) made full screen

`object {
width: 100vw;
height: 100vh;
}`
- applying height(100vh) and width(100vw) on "object" tag to maintain their size without margin and padding.

`body {
font-family: 'Poppins', sans-serif !important;
margin: 0px;
}`
- applying font-family "Poppins" and margin set to 0.

`.reveal .slides {
margin: 0px !important;
height: 100vh !important;
}`
- applying on .reveal and .slides class with 100vh height and 0 margin. it will make svg with full size without margin.

`.slides {
width: 100vw !important;
}
- it will make slide size with their full width.

* above classes is defining in frame.html line no.38 to 39

`#about_us_downArrow svg path {
cursor: pointer;
position: relative;
z-index: 99;
}`
- applied on about_us_downArrow id. it will make "arrow" SVG into to first layer.

`#about_us_upArrow svg path {
cursor: pointer;
position: relative;
z-index: 99;
}`
- applied on about_us_upArrow id svg path. it will make "arrow" SVG into to first layer.

* we are prioritize z-index by using function which is defining into script.js
refer line no. 928 > aboutUsArrowListener()

* style.css refer line no. 203 to 305 and 401 to 428. We are overwrite Reveal js navigation button css as per sample video.
- ".reveal .controls .controls-arrow ,.reveal .controls .nav-arrow" this are classes are making background color white of the navigation arrow, height, width and radius for button and also applying border white for button.
- ".reveal:not(.has-vertical-slides) .controls .nav-left" it has display bottom of screen navigate controls.
- "reveal .controls .controls-arrow:after, .reveal .controls .controls-arrow:before,.reveal .controls .nav-arrow:after, .reveal .controls .nav-arrow:before,.reveal .controls .nav-arrow:after, .reveal .controls .nav-arrow:before,.reveal .controls .nav-arrow:after, .reveal .controls .nav-arrow:before" reveal js default navigation arrow are overwrite with custom css arrow as per sample video.
- ".reveal .controls .controls-arrow:after,.reveal .controls .nav-arrow:after" it has create custom arrow button as per requirement.
- ".reveal .controls .controls-arrow,.reveal .controls .nav-arrow" it has made center "<<" and ">>" arrow with their color,border and background.
- ".reveal .controls .nav-right .controls-arrow,.reveal .controls .nav-right .nav-arrow" and ".reveal .controls .nav-left .controls-arrow,.reveal .controls .nav-left .nav-arrow" Reveal js default arrow on transform is not proper as per design so we have added new transform
into overwrite this class.
- ".reveal .controls .controls-arrow:after,.reveal .controls .nav-arrow:after" and ".reveal .controls .controls-arrow:hover:after,.reveal .controls .nav-arrow:hover:after" we don't need hover design so, we are overwrite reveal css to make non-hover.
- "reveal .controls .controls-arrow.is-inverse, .reveal .controls .nav-arrow.is-inverse" this
are classes define for inverse button of navigation arrow,it will display with white background and green color.
-"reveal .controls button" - this css is for bottom navigation arrow which is display in one line

* refer line no.306 to 351 and 381 to 397. we are made css for hamburger menu
- ".menu-wrapper" in this class we are added text color "#889f21", position "absolute",
"right" 40px and "top" 30px to align right side, background is "#fff"(white), applying menu shadow
"box-shadow"(1px 1px 10px #0000002b), menu box "border-radius" 3px which makes corner rounded,
font-size for text is "font-size" 30px, menu "height" and "width" is 50% for both, maintain alignment
using "display" flex, "align-items":center, "justify-content":center, to float top layer added "z-index" 99, for mouse cursor using "cursor":pointer and applying transition to animate menu.
- ".menu-toggle" in this class we are added "width" 50px, "position": absolute and "right" 0px. which is make box for close and bars icons.
- ".menu" it's use to maintain slides names into the center of the menu. applying "display",
"align-items": center, "position": absolute,"right": 50px,"top":0px,"bottom": 0px to maintain center text, "font-size" 15px for text size, "transition": all .3s ease-in-out for animate menu.
- ".menu a" applying style on ".menu" after <a> tag. it will make slide name text "color" #333, "margin" between two slide name is 0px 10px, text font-size is 14px.
- ".change" in this class we are applied "width" 580 px for menu when it's open
- ".bar1, .bar2, .bar3" this are class defining for hamburger menu 3 lines into box when menu is close.
- ".change .bar1, .change .bar2, .change .bar3" when menu is open these are the classes are apply on 3 bar to make close icon by using "-webkit-transform": rotate(-45deg) translate(-5px, 5px), "transform": rotate(-45deg) translate(-5px, 5px) for left and for right "-webkit-transform": rotate(45deg) translate(-8px, -8px),"transform": rotate(45deg) translate(-8px, -8px).
- ".menu a:hover" this is for top navigation menu when hover on link color will be change into black to green

`video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
filter:grayscale(1);
opacity: 1;
}`
- applying styles on video tag. which is "object-fit": cover, "width": 100vw, "height": 100vh, position
: fixed, "top": 0, "left": 0 which is make full video in their section. and "filter":grayscale(1), "opacity": 1 which is for background and transparencies.

`.align-center{
display: flex;
align-items: center;
justify-content: center;
}
.align-center #customer_play_icon{
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}`
- this are classes use for to maintain center "image/svg/content" in their section/container. using "display":flex,"align-items":center, "justify-content": center. As we can see #customer_play_icon is id of play svg in customer slide. And ".align-center #customer_play_icon" is maintain play icon on photo.

* style.css refer line no. 464 to 563. we are created two modal/popup/video modal of css/style and their animation when it's open and close.
- ".video-modal" in this class we added "position": fixed, "left": 0px,"right": 0px,"top": 0px,"bottom": 0px,"background": #00000091,"z-index": 9999999,"display": flex,"align"-items: center,"justify-content": center. this class is make container with background transparent black it's like overlay.
1. customer review modal:
- ".video-wrapper" this class is main class for modal it's height,width,alignment,display,scale to make modal box.
- "@keyframes" is use for modal animation when it's open and close(reverse).
- ".show .video-wrapper-video" this class define to animate linear way modal when it's open and ".hide .video-wrapper-video" this class define to animate linear way modal when it's close. it has use keyframes
to perform their animation.
- ".modal-open .video-wrapper" and ".video-wrapper video" this are define to set border and radius of modal.
2. personal note modal:
- ".video-wrapper-video" this class is main class for modal it's height,width,alignment,display,scale to make modal box.
- "modal-open .video-wrapper-video" added 100 max-width for modal video. when modal is open
- "#personalModel" and "#personalModel video" this are define to set border and radius of modal.
-".close-video" it's define for close icon of modal.
`.contact-video{
height: 50vh;
z-index: -1;
}
.opacity-9{
opacity:.9;
z-index: 0;
}`
- this are two classes define for contact us background video. And we are set opacity and height to make green as per sample video.
* ".video-overlay" and ".video-overlay::before" this are two class define for welcome slide which is make background video with their opacity, position as per sample video.

* ".service-img" and ".service-img img" this two class is define for center image of drone into service slide. these are the class maintain image into center section with using max-width,display,margin.

* ".personal-img-wrapper" and ".personal-img-wrapper img" this are two class we are define for personal note(2) slide center image. applying border around the image which is "border":12px solid #fff.