HTML 5, CSS, JavaScript, jQuerry

SPS1

Jakub Nilabovič

Úvod

HTML ?

(HyperText Markup Language) je hypertextový značkový jazyk, určený na vytváranie webových stránok a iných informácií zobraziteľných vo webovom prehliadači. Jazyk HTML umožňuje vytvárať dokumenty obsahujúce text, hypertextové odkazy, multimediálny a iný obsah, formuláre, skripty a metainformácie prehliadateľné priamo vo webovom prehliadači.

Pôvodne bol určený ako veľmi zjednodušená podmnožina jazyka SGML, ktorý sa používa v organizáciách s komplexnými publikačnými požiadavkami, ale neskôr sa stal samostatným štandardom (ISO/IEC 15445:2000). Špecifikáciu jazyka HTML udržiava World Wide Web Consortium (W3C).

Čistý HTML kód používajú autori hlavne na tvorbu statických internetových stránok (web-stránka napísaná len v HTML vyzerá ako nehybný obrázok s textom). Pri vytváraní jednotlivých tagov je možné definovať ich dizajn. Pre tvorbu zložitejších stránok sa však jednotlivé tagy najčastejšie označujú ako objekty alebo triedy. Vtedy sa ich dizajn definuje v špecifickom CSS súbore. Vlastnosti takto označených tagov sa dajú upravovať taktiež aj v špecifickom JavaScriptovom súbore (napríklad pri dynamických stránkach).

Aktuálna verzia je HTML5

CSS ?

CSS je skratka anglických slov Cascading Style Sheet. Keby sme sa pozreli do histórie, zistíme, že v začiatkoch boli webové stránky písané (formátované) pomocou HTML, neskôr sa začal využívať kaskádový štýl – CSS. Dnes bez neho nefungujú asi ani jedny web-stránky.

A prečo sa mu hovorí kaskádový? Pomocou kaskádových štýlov sa vytvárajú štruktúrované dokumenty. Použitie CSS dovoľuje oddeliť štruktúru a obsah od vzhľadu dokumentu v HTML, XHTML alebo XML. Umožňuje popis vzhľadu webových stránok, farieb, usporiadania prvkov a písma. Jedným CSS súborom vie programátor ovplyvniť štýl celej webovej prezentácie. Ak si predstavíme stránku s 50 podstránkami, kde by nastavenie farby písma bolo v HTML, potom úprava na inú farbu by nám zabrala hodiny – týždne. Ak použijeme na nastavenie farby písma CSS a správne si to na začiatku rozvrhneme, potom zmena farby písma zaberie doslova pár sekúnd.

JavaScript ?

JavaScript, je skriptovací programovací jazyk. Jazyk je používaný najmä pri tvorbe webových stránok. Pôvodne ho vyvíjal Brendan Eich zo spoločnosti Netscape Communications pod názvom Mocha, neskôr pod menom LiveScript. Pred uvedením na verejnosť bol premenovaný na „JavaScript“, najmä pre vtedajšiu popularitu jazyka Java. Aj na základe jeho názvu je rozšírený názor, že syntax Javascriptu sa podobá Jave, v skutočnosti bol jeho tvorca najviac inšpirovaný jazykom Self.

Neexistuje žiadny vzťah medzi jazykmi Java a JavaScript; ich najväčšia podobnosť je v syntaxi založenej na spoločnom predkovi - jazyku C. Microsoft vyvinul jazyk s podobnou syntaxou pod názvom JScript, ktorý ale nedodržuje špecifikáciu ECMAScript. Rozdiely v implementácii majú za následok čiastočnú neprenosnosť kódu medzi webovými prehliadačmi ako je napríklad implementácia JScript (Microsoft Internet Explorer) a JavaScript (Mozilla Firefox).

JavaScript je jazyk:
interpretovaný -- nemusí sa kompilovať
objektový -- využívá objekty prehliadača a zabudovaných objektov
závislý na prehliadači -- funguje ale vo večšine prehliadačov
case sensitivný -- záleží na veľkosti písma

jQuerry ?

jQuery je ľahká cross-browser JavaScript knižnica, ktorá kladie dôraz na interakciu medzi JavaScriptom a HTML. Vydal ju v januári 2006 v BarCamp NYC vývojár John Resig. Je používaná na viac ako 34% z 1 000 000 najnavštevovanejších webstránok, jQuery je aktuálne najpoužívanejšia knižnica.

JavaScript a JQuery poznáme už pekných pár rokov. JavaScript bol vynájdený skôr ako jQuery. Obidve sú účinné a používajú sa pri vývoji webu. Používajú sa na ten istý účel, tj na interaktivitu a dynamiku webovej stránky. Inými slovami, oživujú webové stránky. Ľudia sa môžu čudovať, že ak sa používajú na rovnaký účel, tak prečo tieto dva samostatné pojmy?

Je to najpopulárnejšia knižnica JavaScriptu, ktorú vymyslel John Resign a bola vydaná v januári 2006 v BarCamp NYC. jQuery je bezplatná knižnica s otvoreným zdrojovým kódom licencovaná na základe licencie MIT. Toto má výkonnú funkciu kompatibility medzi rôznymi prehliadačmi. Môže ľahko vyriešiť problémy s rôznymi prehliadačmi, ktorým môžeme čeliť pomocou JavaScriptu. Mnoho vývojárov teda používa jQuery, aby sa vyhlo problémom s kompatibilitou medzi rôznymi prehliadačmi.

V JavaScripte musíme napísať veľa kódu pre základné operácie, zatiaľ čo s jQuery sa dajú rovnaké operácie robiť pomocou jedného riadku kódu. Preto je vývojárom jednoduchšie pracovať s jQuery ako s JavaScriptom.

Spustenie projektu

0) ...stiahnite (a rozbaľte) si "prázdny" projekt
.ZIP subor

1) Stiahnite si (napríklad) program -> Visual Studio Code

2) Po inštalácií cez "File -> Open Folder" otvorte stiahnutý projekt

3) V ľavej časti programu v sekcii "Extensions" je potrebné nájsť a nainštalovať "Live server" (doslova)
*Pre niekoho bude možno vhod aj "Prettier - Code formatter" pre formátovanie textu (niekedy vie kód pekne upratať a niekedy je na škodu)

4) Overíme, že všetko je ako má:
V ľavej časti programu v sekcii "Explorer" je rozbalíme otvorený projekt a pravým kliknutím na súbor "inde.xtml" ho spustíme pomocou "Open with Live Server"

5) Tešíme sa, že "je stránka prázdna"

Začíname s HTML

Súbor "index.html", teda obecne HTML súbor je najzákladnejšou súčasťou stránky. Teda... Stačí iba takýto súbor a stránka je hotová.

Každý HTML súbor začína dôležitým tagom "!DOCTYPE" a ďalej je celý dokument obalený tagom "html".
Najzákladnejším delením html dokumentu je ďalej "head" a "body".
V sekcii HEAD sa nachádzajú základné nastavenia a metadáta celého HTML dokumentu.
V sekcii BODY je jádro stránky a vlastne jej celý obsah + na konci sekcii sú definované odkazy pre vnútorné skriptové súbory (alebo celé knižnice)...

Prečo sú skripty definované na konci? Pretože celý HTML súbor sa načítava "zhora dolu" a je potrebné najprv definovať stránku (ako vlastne vyzerá, aké má "objekty" atď.) a až potom ju prípadne dynamicky upravovať cez vytvorené skripty. Inými slovami malej predstavivosti - ak by sa najprv načítal skript, ktorý spočíta počet riadkov na stránke, tak by vypľul výsledok 0 a až po skončení skriptu by sa stránka načítala... a už voľným okom by sme videli, že sa na stránke niečo zobrazilo.

Pridáme cestu (odkaz) k súborom

Vo vopred pripravenom projekte sú už vložené niektoré súbory - hlavne základné súbory .js a .css
Napríklad main.css sa nachádza v "assets -> css" a main.js v "assets -> js". Začneme tým, že cestu pre prístup k takýmto súborom musíme definovať v HTML dokumente.

Pre CSS súbory upravujúce dizajn sa cesta zadáva ako "relationship" (rel) v HEAD casti dokumetu. Pridáme teda cestu k main.css súboru:

<head>
    <title> SPS1 - prednaska 1 </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="assets/css/main.css" />
</head>

Pre JS skriptové súbory sa cesta zadáva na konci dokumetu v časti BODY. Pridáme teda cestu k main.js súboru:

<body>
	<div id="wrapper">
		<p>Stránka... je prázdna</p>
	</div>
				
	<script src="assets/js/breakpoints.min.js"></script>
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/main.js"></script>
</body>

Prečo nepokračovať odzadu

V HTML je pre zložitejšie stránky potrebné definovať (označiť si) objekty, ktoré majú pre nás väčší význam alebo patria do nejakej skupiny vlastnosťami podobných objektov. Napríklad - ak budeme chcieť povedať, že všetky tlačidlá na stránke majú mať veľkost 100x100 pixelov, tak pri každom tlačidle zadefinujeme takýto objekt ako triedu a to parametrom "class=tlacidla". Ak však budeme chcieť nejaké tlačidlo alebo celú sekciu špecificky upraviť, bude sa vyžadovať označiť taký objekt pomocou id-čka... teda parametrom "id=špeciálneTlačidlo".

V tomto prípade si vytvoríme sekciu s "id=___". Vložíme si teda do tela pätičku:
(áno, toto je oblasť komentáru <!-- --> )

<!-- Footer -->
<footer id="footer">
	<p class="copyright"><strong>SPS1</strong> &copy; Jakub Nilabovič</p>
</footer>

Základy v CSS

Kedže sme si už v HTML dokumente pridali cestu k základnému CSS súboru, ktorý upravuje dizajn objektov, môžme si všimnúť, že stránka po otvorení cez Live Server mala v pozadí obrázok. To preto, že časť "body" je už definovaná a obsahuje napríklad "background-image".

Každý prvok, ktorý je v body definovaný, bude mať zadané vlastnosti. Kedže je HTML definovaný pomocou stromovej štruktúry, tak všetky jeho deti v podstrome budú mať taktiež zadané vlastnosti. Inak povedané - ak pre "body" v main.css súbore definujeme "font" pre text na stránke, tak všetky objekty vytvorené v "body" budú mať rovnaký font (či už text v nejakých tabuľkách, na tlačidlách...) bez toho, aby sme ho museli znovu pre jednotlivé objekty definovať.

Chceme mať pätičku tam, kde má byť

Ideálne sa začína zhora dole... ale na tomto príklade si hneď všimneme, načo je CSS (teda definovanie vlastností pre objekty) dobré. Čo tak si dať pätičku na spodok stránky?

#footer{
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 3;
}

Spáchali sme to - parametrom "position" s hodnotou "absolute" sme povedali, že bez ohľadu na rodiča bude jeho pozícia absolútna. Znamená to len to, že objekt "footer" je v sekcii "body", no jeho pozícia je absolútna - teda objekt si na stránke iba tak plave... Defaultne je v ľavom hornom rohu a nevzťahuje sa na neho nejaké poradie vytvorenia prvkov ani nič podobné. Keď už máme pozíciu vyriešenú, len objektu "povieme", nech sa prilepí na dolný ľavý okraj (teda od spodku "bottom" je vzdialenosť 0 a podobne zľava cez parameter "left").
Perlička "z-index" je iba hĺbka zobrazenia. 3. osa v 3D pozícií - ak napríklad chceme, aby pätička nebola nikdy prekrytá iným objektom, musí mať hodnotu "z-index" väčšiu ako iné objekty. Kľudne aj hodnotu 500... čím vyššia hodnota, tým viac je objekt "vpredu".

V iných prípadoch môže byť pozícia aj relatívna - ak vytvoríme nejakú tabuľku a do nej pridáme nejaký prvok, tak ak by by sme chceli povedať, nech daný prvok má "bottom: 0px" a "left: 0px", tak sa objekt prilepí na ľavý dolný roh práve danej tabuľky, nie celej stránky ako v prípade našej pätičky, kde jej pozícia je absolútna.

Dynamika s JavaScriptom (jQuerry)

Od začiatku budeme využívať viac funkcie jQuerry ako čistý JavaScript kvôli jednoduchosti písania kódu a kompatibilite s viacerými prehliadačmi, ako som to popisoval v úvode o jQuerry. Internet je plný rozdielov medzi JS a jQuerry, tak príklady dávať nebudem.

Ukážeme si však nejaký ľahký príklad toho, ako urobiť so statickej stránky mierne dynamickú stránku.
Do zoznamu jQuerry funkcii v súbore main.js vložíme:

$("#footer").on("click",function(){
	$(this).hide();
});

Pomocou jQuerry zápisu môžeme (oproti JavaScripte) skrátene zavolať objekt s konkrétnym id-čkom tak, že ho zavoláme pomocou " $("ID") ". Na objekte zavoláme "on click" funciu, ktorá vytvorí nad objektom novú funciu medzi "{ }" zátvorkami. Využijeme volanie objektu "tohto objektu", teda nemusí to byť znova id footer, ale doslova " $(this) " a na tomto objekte použijeme už implementovanú funciu " .hide() ". Teda... objekt sa schová.

Zhrnutie, lebo ide do tuhého

Základ dynamickej stránky za pomoci technológii HTML tvoria 3 súbory (.html .css .js).

HTML súbor popisuje štruktúru stránky. Definuje (vytvára) jednotlivé objekty zhora nadol postupne. Rovnako sa v ňom definujú odkazy na skripty, súbory upravujúce dizajn alebo iné súbory.

CSS súbor je dôležitý pre pohodlnejšie definovanie vlastností objektov na stránke. Najčastejším príkladom použitia je nastavenie pre triedu objektov, ktoré budú mať rovnaké vlastnosti. Príklad - všetkým tlačidlám triedy "button" nastavíme v CSS súbore dvoma riadkami ich veľkosť pomocou "width=100px" a "height=100px". Druhý zaujímavý príklad je ten, že v CSS súbore je možné vytvoriť podmienku napríklad "ak je okno prehliadača väčšie ako 1920 pixelov, tak písmo na stránke zmenšíme o 10%".

JavaScriptový súbor určuje dynamiku objektov. Pridáva možnosti akcií nad objektami/triedami a v hlavnej funcii je to predsa programovací jazyk - môžeme teda vytvárať rôzne výpočty, načítavania súborov a iné komplexnejšie veci.

Komplexnejší HTML súbor

Princíp už poznáme... v tejto časti si ukážeme, čo všetko je vo výsledku hotovej stránky vzhľadom na HTML súbor.

<!DOCTYPE HTML>
	<html>
	
	<head>
		<title>SPS1 - Nilabovic</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<link rel="stylesheet" href="assets/openlayers/ol.css" />
		<link rel="stylesheet" href="assets/css/sweetalert2.css" />
		<link rel="stylesheet" href="assets/css/jquery.carousel-3d.default.css" />
	</head>
	
	<body>
		<div id="wrapper">
			<!-- Header -->
	
			<div id="introText">
				<h1>HTML-5, JavaScript, Jquerry, CSS</h1>
			</div>
	
			<button id="nextSection">Ďalšia sekcia</button>
	
			<!-- Map -->
			<!-- https://www.youtube.com/watch?v=SFiNibl0F5U&list=PLSWT7gmk_6LrvfkAFzfBpNckEsaF7S2GB&index=1 -->
			<div id="map" class="showedSection">
				<button id="myPos"></button>
			</div>
	
			<div id="interests" class="showedSection">
				<div id="interestGroup1" class="interestGroup">
					<button id="choseInterestBtn"></button>
					<div id="interestGroup1Carousel" data-carousel-3d>
						<img src="https://www.upjs.sk/images/resized/23497/banner_malyopatrenia-2.jpg"/>
						<img src="https://www.upjs.sk/images/resized/23416/nature-index-ranking.jpg"/>
						<img src="https://www.upjs.sk/images/resized/23411/statnytajomnikMS140720a.jpg"/>
						<img src="https://www.upjs.sk/images/resized/23412/novi-prof-2020.jpg"/>
						<img src="https://www.upjs.sk/images/resized/23369/logo-V7-baner.jpg"/>
						<img src="https://www.upjs.sk/images/resized/23280/HRS4R-baner-logo.jpg"/>
					</div>
				</div>
			</div>
	
			<!-- Footer -->
			<footer id="footer">
				<p class="copyright"><strong>SPS1</strong> &copy; Jakub Nilabovič</p>
			</footer>
		</div>
	
		<!-- Scripts -->
		<!-- <script>document.getElementById("footer").innerHTML = "Zmena...";</script> -->
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/breakpoints.min.js"></script>
		<script src="assets/openlayers/ol.js"></script>
		<script src="assets/js/sweetalert2.js"></script>
		<script src="assets/bower_components/jquery.js"></script>
		<script src="assets/bower_components/jquery.resize.js"></script>
		<script src="assets/bower_components/jquery.waitforimages.js"></script>
		<script src="assets/bower_components/modernizr.js"></script>
		<script src="assets/js/jquery.carousel-3d.js"></script>
		<script src="assets/js/util.js"></script>
		<script src="assets/js/main.js"></script>
	
	
	</body>
	
	</html>

Komplexnejší CSS súbor

body {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	margin: 0;
  }
  
  body {
	font-family: "Source Sans Pro", sans-serif;
	background-image: url("../../images/bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff;
  }
  
  #wrapper {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
  }
  
  button,
  .button {
	background-color: transparent;
	border-radius: 7px;
	box-shadow: inset 0 0 0 1px #ffffff;
	color: #ffffff !important;
	cursor: pointer;
	display: inline-block;
	font-size: 90%;
	font-weight: 300;
	height: 2.75rem;
	letter-spacing: 0.2rem;
	outline: 0;
	padding: 0 1.25rem 0 1.35rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
  }
  
  button:hover,
  .button:hover {
	background-color: rgba(255, 255, 255, 0.075);
  }
  
  button:active,
  .button:active {
	background-color: rgba(255, 255, 255, 0.175);
  }
  
  h1 {
	font-size: 1.0rem;
	letter-spacing: 0.5rem;
  }
  
  #introText {
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 100%;
	height: 5%;
	position: relative;
	text-transform: uppercase;
	top: 0;
	margin-top: 2pt;
	margin-bottom: 5pt;
	z-index: 1;
  }
  
  #nextSection{
	position: absolute;
	top: 1px;
	right: 5px;
	z-index: 3;
  }
  
  .showedSection{
	display: flex;
	flex-direction: column;
	text-align: center;
	max-width: 100%;
	height: 85%;
	position: relative;
	z-index: 2;
	border: ridge;
  }
  
  #map {
	display: flex;
  }
  
  #interests {
	display: none;
  }
  
  #choseInterestBtn {
	height: 100%;
	width: 40%;
	position: absolute;
	cursor: pointer;
	z-index: 10;
	left: 30%;
	opacity: 0;
  }
  
  #myPos {
	background-color: transparent;
	background-image: url(../../images/icons/artboard.png);
	background-size: cover;
	background-position: center;
	display: inline-block;
	position: absolute;
	text-align: center;
	top: 0;
	left: 0;
	outline: none;
	outline-width: 0;
	cursor: pointer;
	z-index: 3;
  }
  
  .table-wrapper {
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
  }
  
  table {
	width: 100%;
  }
  
  table tbody tr {
	border: solid 1px #ffffff;
	border-left: 0;
	border-right: 0;
  }
  
  table td {
	padding: 0.75em 0.75em;
  }
  
  table th {
	color: #ffffff;
	font-size: 0.9em;
	font-weight: 600;
	padding: 0 0.75em 0.75em 0.75em;
	text-align: left;
  }
  
  table thead {
	border-bottom: solid 2px #ffffff;
  }
  
  table tfoot {
	border-top: solid 2px #ffffff;
  }
  
  #footer{
	  position: absolute;
	  bottom: 0px;
	  left: 0px;
	  z-index: 3;
  }
  
  @media only screen and (max-width: 1930px) {
	#wrapper {
	  padding: 0;
	}
	#banner {
	  display: none;
	}
  }
  
  @media screen and (max-width: 1680px) {
	#wrapper {
	  padding: 0;
	}
  }
  

Komplexnejší JavaScriptový súbor

(function($) {
	$("#footer").on("click",function(){
	  $(this).hide();
	});
  
  
	// GLOBAL VARIABLES
	var $window = $(window),
	  $body = $("body"),
	  $map = $("#map"),
	  $search = $("#search"),
	  $interests = $("#interests"),
	  $choosenSection = $map;
  
	// MAP VARIABLES
	var rektoratPos = [2365671.384809496, 6227410.980672717];
	var pfPos = [2365382.021800575, 6228999.329131128];
	var map = null;
	var mapView = new ol.View({
	  center: ol.proj.fromLonLat([21.25131, 48.71955]),
	  zoom: 17,
	  maxZoom: 20,
	  minZoom: 12,
	  enableRotation: false
	});
	var actualZoom = mapView.getZoom();
	var isViewFlying = false;
	var flyDuration = 4000;
  
	// BREAKPOINTS
	breakpoints({
	  xlarge: ["1281px", "1680px"],
	  large: ["981px", "1280px"],
	  medium: ["737px", "980px"],
	  small: ["481px", "736px"],
	  xsmall: ["361px", "480px"],
	  xxsmall: [null, "360px"]
	});
  
	/*____________________________________________________________________*/
	// MAP FUNCTIONS
	/*____________________________________________________________________*/
	function mapInit() {
	  map = new ol.Map({
		view: mapView,
		layers: [
		  new ol.layer.Tile({
			source: new ol.source.OSM({
			  url: "http://map.ciakt.upjs.sk/map/tiles/{z}/{x}/{y}.png"
			})
		  })
		],
		target: "map"
	  });
  
	  /* Mercator suradnicovy system */
	  map.on("click", function(e) {
		console.log("coord: " + e.coordinate);
		var clickedCoord = e.coordinate;
		/* mapView.animate({zoom: actualZoom-2}, {center: clickedCoord}); */
		mapView.animate({
		  center: clickedCoord,
		  duration: 1000
		});
		map.forEachFeatureAtPixel(e.pixel, function(feature, layer){
		  console.log(feature);
		  var clickedFeatureName = feature.get('buldingName');
		  var clickedFeaturePhoto = feature.get('photo');
		  Swal.fire({
			title: clickedFeatureName,
			imageUrl: clickedFeaturePhoto,
			confirmButtonText: "ZAVRIEŤ"
		  });
		});
	  });
  
	  actualZoom = map.getView().getZoom();
	  map.on("moveend", function(e) {
		var newZoom = map.getView().getZoom();
		if (actualZoom != newZoom) {
		  actualZoom = newZoom;
		  /*
		// if rotation is enabled, uncomment this section
		mapView.animate({
			enableRotation: "true"
		  });
		if(currZoom >= 18){
		  console.log("Zoom > 18, roration...");
		  mapView.animate({
			rotation: 0.2,
			duration: 500
		  });
		  console.log("Rotated on: " + mapView.getRotation());
		} else {
		  mapView.animate({
			rotation: 0,
			duration: 500
		  });
		}
		*/
		  console.log("Actual Zoom: " + mapView.getZoom());
		}
	  });
  
	  const fillStyle = new ol.style.Fill({
		color: [0, 0, 255, 0.4]
	  });
  
	  const arealyGeoJson = new ol.layer.VectorImage({
		source: new ol.source.Vector({
		  url: 'assets/openlayers/map.geojson',
		  format: new ol.format.GeoJSON()
		}),
		visible: true,
		title: 'arealyUPJS',
		style: new ol.style.Style({
		  fill: fillStyle
		})
	  })
	  map.addLayer(arealyGeoJson);
	}
  
	$("#myPos").on("click", function(e) {
	  if (isViewFlying == false) {
		console.log("Getting to 'Rektorát UPJŠ'");
		isViewFlying = true;
		flyTo(rektoratPos, function() {});
		setTimeout(function() {
		  isViewFlying = false;
		}, flyDuration);
	  }
	});
  
  
	function flyTo(location, done) {
	  var zoom = 18;
	  var parts = 2;
	  var called = false;
	  function callback(complete) {
		--parts;
		if (called) {
		  return;
		}
		if (parts === 0 || !complete) {
		  called = true;
		  done(complete);
		}
	  }
	  mapView.animate(
		{
		  center: location,
		  rotation: 0,
		  duration: flyDuration
		},
		callback
	  );
	  mapView.animate(
		{
		  zoom: zoom - 2,
		  duration: flyDuration / 2
		},
		{
		  zoom: zoom,
		  duration: flyDuration / 2
		},
		callback
	  );
	}
  
	/*____________________________________________________________________*/
	// NAVIGATION FUNCTIONS
	/*____________________________________________________________________*/
	
	var clicked = true;
	$("#nextSection").on("click", function(e) {
	  console.log("nextSection clicked");
	  if(clicked){
		$("#map").css({
		  display: "none"
		});
		$("#interests").css({
		  display: "flex"
		});
		clicked = false;
	  } else {
		$("#interests").css({
		  display: "none"
		});
		$("#map").css({
		  display: "flex"
		});
		clicked = true;
	  }
	});
  
	
  
	/*____________________________________________________________________*/
	// CAROUSEL FUNCTIONS
	/*____________________________________________________________________*/
	var carousel1index = 0;
	$("#interestGroup1Carousel").on("select", function(evt, index) {
	  carousel1index = index;
	  console.log(carousel1index);
	});
  
	$("#choseInterestBtn").on("click", function(e) {
	  $.getJSON("assets/upjssk_content.php", function(result){
		console.log(result);
		$.each(result, function(group, groupObject) {
		  console.log(group + " " + groupObject);
		  $.each(groupObject, function(groupContentId, groupContentObject) {
			console.log();
			$.each(groupContentObject, function(articleId, articleObject) {
			  console.log();
			  if (carousel1index == articleId) {
				Swal.fire({
				  title: articleObject.title,
				  html: articleObject.description,
				  imageUrl: articleObject.img,
				  confirmButtonText: "ZAVRIEŤ"
				});
			  }
			});
		  });
		});
	  });
  
	  console.log("interestGroup1Carousel clicked");
	});
  
	/*____________________________________________________________________*/
	/*____________________________________________________________________*/
	// OnLOAD important main function
	/*___***************_________________________________________________________________*/
	/*____________________________________________________________________*/
	$window.on("load", function() {
	  console.log("Window loaded");
	  mapInit();
	  $body
		.attr("unselectable", "on")
		.css("user-select", "none")
		.on("selectstart dragstart", false);
	});
  
  })(jQuery);