<template>
	<div class="pre-loader">
		<logo id="preLoadserLogo"/>
		<loading id="loadingCircle"/>
		<p id="preLoaderTxt">Arak Rail Co.</p>
	</div>
</template>


<script>
   export default {
      mounted() {
         ////////////////////////////////// text split
         function amirTxtSplit(txtID) {
            var line = txtID.html(); // get the sentence
            var parts = line.split(' ');
            var word = '';
            var letterSpans = '';
            var wordSpans = '';
            var i = '';
            var j = '';
            for (i = 0; i < parts.length; i++) {  // how many words
               letterSpans = "";
               word = parts[i];

               for (j = 0; j < word.length; j++) { // how many letters in each words
                  letterSpans += '<span class="tsLetters">' + word[j] + '</span>'   // creat a span for each letter
               }
               wordSpans += '<span class="tsWords">' + letterSpans + ' </span>'
            }

            txtID.html(wordSpans) // render the sentence
         }

         amirTxtSplit($('#preLoaderTxt'))

         ////////////////////////////////// animation
         this.$gsap.timeline({delay: 3})
            .set($('#preLoaderTxt'), {opacity: 1})
            .to($('#loadingCircle'), {autoAlpha: 0, duration: 0.4})
            .fromTo($('#preLoadserLogo'), {scaleX: 0.7, opacity: 0}, {scaleX: 1, opacity: 1, duration: 0.3}, '+=0.2')
            .fromTo($('#preLoaderTxt .tsLetters'), {x: 10, opacity: 0}, {x: 0, opacity: 1, duration: 0.5, stagger: 0.05})
            .to($('#preLoadserLogo,#preLoaderTxt'), {opacity: 0, scale: 0.5, duration: 0.1}, '+=0.2')
            .to($('.pre-loader'), {autoAlpha: 0, duration: 0.3})
      }
   }
</script>
