Actual mobile devices - scripts seems not runing

[weilinzung]

I tested on IOS iphone6, seems the script is not running.

http://i.imgur.com/7roBDYT.png

thanks!

[weilinzung]

any news on this? also tested on Android is not woking too.

[ines]

Sorry for the late reply! Could you share more of your code? It's hard to debug this from the screenshot alone, and it's unlikely this is specifically related to mobile devices. From the screenshot you posted, it mostly look like it doesn't parse the script correctly.

Are you using termynal.js or termynal.min.js? The minified version is compiled with Babel, the unminified version is the raw source written in JavaScript ES6. So if you're using an older, non ES6-compatible browser, this might be the problem.

[weilinzung]

I did the same thing like your demo: https://codepen.io/ines/full/MoaRYM/
And I did a test on your demo which on mobile devices are also not working.

Because of the termynal is not working on mobile that create an error message on my main.js where only has var termynal = new Termynal('.terminal-content', {startDelay: 1200,});.

here are the error codes on the demo:
[Error] SyntaxError: Unexpected keyword 'function'. Expected '}' to end an object literal.
(anonymous function) (termynal.min.js:9)
[Error] ReferenceError: Can't find variable: Termynal
Global Code (MoaRYM:171)

update: test the termynal.min.js with latest IOS Safari and Android Chrome, same errors like the demo.

• animation is not running each line
• progress bar are gone

Thanks!

[ines]

Thanks for providing more details!

Based on the error, it looks like the problem here may actually be the async / await and the respective browser support. As it says in the README, it's pretty much widely supported now, but still new:

I just tested it on iOS and it works in all latest versions – the pre-10.3.3 Safari on iOS wouldn't render the animation, but after updating to the latest version, it all worked as expected. This is always a problem with using new technologies – if you absolutely need animation to be supported across old browsers, I'd recommend not using Termynal in production just yet, or writing your own adaptation that replaces async and await with the traditional setTimeout() approach.

If the animation can't run (either if the browser is too old, or JavaScript is disabled), Termynal will render the original content and still show the user all important information. This is intentional, as it also ensures accessibility and allows the content to be interpreted by screen readers, because it doesn't rely on JS to render it in the first place.

The only part that isn't translated 1:1 is the progress bar, which is composed via JS (to allow the "loading" animation plus the incrementing percentage). If it's important to you that the bar is shown, even if JS isn't run, you'd have to do without the percentage and mock it up as a regular input instead:

<span data-ty>Installing something...</span>
<span data-ty="input">▋▋▋▋▋▋▋▋▋▋▋▋▋▋▋▋▋▋▋▋▋</span>
<span data-ty>Successfully installed something.</span>

[weilinzung]

sure. I may disable all the animations on mobile for now.
I think it is important for all the websites which should support at least two older versions of the browser.

Anyway, I think your answer is good for me to keep moving with other solutions to fix.

thanks so much!

[ines]

No worries!

And I agree! My main focus for Termynal was to keep it as lightweight and modern as possible, while still keeping it customisable – and making sure as little information as possible is lost if JS is disabled.
(I was thinking about adding an alternative, "legacy" animation style using setTimeout, but this would have gone against the whole concept of the mini library.)

I also believe that the best way to move new web technologies forward is to start using them and building things with them – even if it means they're not production-ready yet or need workarounds and polyfills at first. (CSS grid and custom properties are good examples of that.)

Btw, you might also want to check out some of the available async/await polyfills. I'm not sure how good they are and whether they're useful here – but it might be worth a try.

[weilinzung]

would it possible add to Bower or Npm?

thanks!