1

Here is my timeline.min.js file which is being referenced in the index.html file. Please note that I haven't included the full code.

function timeline(e, v) {
var g = [],
    p = "Timeline:",
    t = window.innerWidth,
    i = void 0,
    o = 0,
    b = {
        forceVerticalMode: { type: "integer", defaultValue: 600 },
        horizontalStartPosition: { type: "string", acceptedValues: ["bottom", "top"], defaultValue: "top" },
        mode: { type: "string", acceptedValues: ["horizontal", "vertical"], defaultValue: "vertical" },
        moveItems: { type: "integer", defaultValue: 1 },
        rtlMode: { type: "boolean", acceptedValues: [!0, !1], defaultValue: !1 },
        startIndex: { type: "integer", defaultValue: 0 },
        verticalStartPosition: { type: "string", acceptedValues: ["left", "right"], defaultValue: "left" },
        verticalTrigger: { type: "string", defaultValue: "15%" },
        visibleItems: { type: "integer", defaultValue: 3 },
    };
function n(e, t, i) {
    t.classList.add(i), e.parentNode.insertBefore(t, e), t.appendChild(e);
}

And then at the end of the same Javascript file I have this:

window.jQuery &&
(window.jQuery.fn.timeline = function (e) {
    return timeline(this, e), this;
});

Now, in the index.html file, there's a reference to the timeline function where the timeline mode is changed to horizontal.

<script type="text/javascript" src="../src/assets/js/timeline/timeline.min.js"></script>
<script>
  timeline(document.querySelectorAll('.timeline'), {
    forceVerticalMode: 700,
    mode: 'horizontal',
    verticalStartPosition: 'left',
    visibleItems: 7
  });

  console.log($("#ble").attr("class"));
</script>
Now, I want to integrate all this inside my React Component because when I'm running the code, the timeline is being shown vertical instead of horizontal. My React Component: return(

13 Jan, 2020

F2F

......
ShridharK
  • 365
  • 2
  • 14
  • Why is my HTML code inside the return statement getting executed. I want plain HTML code but it's instead showing 13 Jan, 2020 and then FTF, etc. – ShridharK Feb 11 '21 at 10:37

1 Answers1

0

Someone asked a similar question before. You can look at the following link. Hope this might help.

https://stackoverflow.com/a/53396827/15004619

Go to you index.html file and import the scrip there

 <script type="text/javascript">
  function fun(){
    alert('Index.html is the main file to look at.');
  }
</script>

And in you component use window object.

  componentWillMount() {
  window.fun();
}
awan_u
  • 21
  • 6
  • Not only that, I want to also execute that timeline function which is inside the script tag. Also, for some reason I'm not able to paste the html code of the React component in the question that I'm asking because instead of showing the code, it shows what will show after the HTML code runs. – ShridharK Feb 11 '21 at 12:22
  • – awan_u Feb 15 '21 at 05:22
  • componentWillMount() { window.test(); } This might give you an hint – awan_u Feb 15 '21 at 05:22
  • I tried that but it still isn't working. I get an error message that there's no timeline function. Also wanted to add that the javascript file called timeline.min.js is inside my public directory itself along with my index.html file. That doesn't cause any problems right? Because we write all our React code in the src directory. – ShridharK Feb 15 '21 at 06:15
  • One more thing, did you understand this way of calling the function. There's a comma and then suddenly some parameters are passed along: timeline(document.querySelectorAll('.timeline'), { forceVerticalMode: 700, mode: 'horizontal', verticalStartPosition: 'left', visibleItems: 7 }); – ShridharK Feb 15 '21 at 06:17
  • Can you tell me what the function is actually doing. I can see that you are passing an object as a second parameter to the function but what is the timeline function using this second parameter for? Also the function n in the timeline what is its use? – awan_u Feb 16 '21 at 09:36
  • So I haven't written that javascript function and even I fully don't know what it's doing. It's part of the Inspinia layout that I got from the internet. You can make a quick search. It's a default theme that they provide which we can use in our applications. Inside that, they have used timeline which too is available on the internet. But basically, the parameters that are being passed makes the timeline horizontal instead of vertical. You can refer this: https://github.com/squarechip/timeline – ShridharK Feb 16 '21 at 10:21
  • I see. Then can you share the html markup. I can see that for timeline the class names are predefined in the timeline. Also can you see if there is an error on your console related to this function. – awan_u Feb 16 '21 at 11:43
  • The HTML file is huge but how can I share it with you? The error message is in the 4th comment of this thread. You can refer my other question where I tried something different but still wasn't working. https://stackoverflow.com/questions/66172855/adding-jquery-code-inside-react-component – ShridharK Feb 16 '21 at 12:03
  • Then can you tell me if you the component is following the same HTML Markup as in the timeline git page. From what i have seen till now, the timeline.js is specific to that Markup – awan_u Feb 16 '21 at 14:17
  • Yes, it's the same one. I basically want to reference that Javascript timeline.min.js file in my React project and then execute this code and I don't want to make any changes in the timeline.min.js file. – ShridharK Feb 16 '21 at 14:27
  • Did you validate if the timeline function is being called or not? You can put the console.log in it and that's all the change you need to make. This way you can verify if the function in itself is not being called or is there some other issue? Also can you tell what error you were getting? Because there is not enough information, it is a little difficult to actually pinpoint the exact issue that you are facing. – awan_u Feb 16 '21 at 14:41
  • I get the error message that there's no timeline function. As mentioned earlier, you can also refer the link of my other question where I tried something different and although I didn't get an error over there, it still wasn't doing anything. – ShridharK Feb 16 '21 at 15:29