ReactTypingComponent/TypingEffectScript.js at master · DJolley12/ReactTypingComponent · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
function TypingEffectScript(props) {
    let {
      wordNumberForIntro,
      wordNumberForText,
      intros,
      descriptions,
      currentPhraseSelection,
      introText,
      descriptionsText,
      slicedWord,
      index,
      subtractIndex,
      typingContentElementId,
    } = returnVariables(props);

    (function typeDescriptions() {
      let timeOutNumber = 50;

      if (
        wordNumberForText === descriptions.length &&
        wordNumberForIntro === intros.length
      ) {
        wordNumberForIntro = 0;
        wordNumberForText = 0;

        return;
      }

      if (wordNumberForIntro !== intros.length) {
        currentPhraseSelection = intros[wordNumberForIntro];
        slicedWord = currentPhraseSelection.slice(0, ++index);

        if (checkElementNotMounted(typingContentElementId)) {
          return;
        }
        document.getElementById(typingContentElementId).textContent =
          introText + slicedWord;

        if (slicedWord.length === currentPhraseSelection.length) {
          wordNumberForIntro++;
          index = 0;
          timeOutNumber = 200;
          introText += slicedWord;
          if (checkElementNotMounted(typingContentElementId)) {
            return;
          }
          document.getElementById(typingContentElementId).textContent = introText;
        }
      } else if (wordNumberForIntro === intros.length) {
        timeOutNumber = 25;
        subtractIndex = introText.length;

        introText = introText.slice(0, --subtractIndex);
        if (checkElementNotMounted(typingContentElementId)) {
          return;
        }
        document.getElementById(typingContentElementId).textContent = introText;

        if (introText.length === 0) {
          timeOutNumber = 130;
          currentPhraseSelection = descriptions[wordNumberForText];
          slicedWord = currentPhraseSelection.slice(0, ++index);

          if (checkElementNotMounted(typingContentElementId)) {
            return;
          }
          document.getElementById(typingContentElementId).textContent =
            descriptionsText + slicedWord;

          if (slicedWord.length === currentPhraseSelection.length) {
            wordNumberForText++;
            index = 0;
            timeOutNumber = 130;
            descriptionsText += slicedWord;
            if (checkElementNotMounted(typingContentElementId)) {
              return;
            }
            document.getElementById(
              typingContentElementId
            ).textContent = descriptionsText;
          }
        }
      }
      setTimeout(typeDescriptions, timeOutNumber);
    })();
  }

  function checkElementNotMounted(elementId) {
    if (document.getElementById(elementId) === null) {
      return true;
    }
    return false;
  }

  function returnVariables(props) {
    let intros = props.text1;
    let descriptions = "";
    if (props.text2 !== undefined) {
      descriptions = props.text2;
    }
    let wordNumberForIntro = 0;
    let wordNumberForText = 0;
    let index = 0;
    let subtractIndex = 0;
    let currentPhraseSelection = "";
    let introText = "";
    let descriptionsText = "";
    let slicedWord = "";
    let typingContentElementId = props.typingContentElementId;
    return {
      wordNumberForIntro,
      wordNumberForText,
      intros,
      descriptions,
      currentPhraseSelection,
      introText,
      descriptionsText,
      slicedWord,
      index,
      subtractIndex,
      typingContentElementId,
    };
  }

  export default TypingEffectScript;