Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

Stimulus IE 11 .contain() method doesn't exists #274

Closed
Szymon-dziewonski opened this issue Sep 16, 2019 · 4 comments
Closed

Stimulus IE 11 .contain() method doesn't exists #274

Szymon-dziewonski opened this issue Sep 16, 2019 · 4 comments

Comments

@Szymon-dziewonski
Copy link

Szymon-dziewonski commented Sep 16, 2019 •
edited
Loading

Hello my problem is connected with multiple targets connected with controller.
Here's example which works on every browser - besides our beloved IE 11 (I'm not looking for previous versions) example it's on my subdomain since I'd like to reproduce as much as possible from my original project so webpack build etc

index.ts

import "@stimulus/polyfills";

import { Application, Controller } from "../node_modules/stimulus";

const application = Application.start();

application.register(
  "api-index-animation",
  class extends Controller {
    static targets = [
      "upperRightDot",
      "upperLeftDot",
      "lowerRightDot",
      "lowerLeftDot",
      "centerRightDot",
      "centerLeftDot",
      "centerDot"
    ];
    private upperRightDotTarget;

    connect() {
      console.log(this.upperRightDotTarget);
    }
  }
);

index.html

<!doctype html>
<html>

<head>
    <title>Getting Started</title>
</head>

<body>

    <svg class="api-index-animation"
        data-action="mouseover-&gt;api-index-animation#restartAnimationForMouseover mouseleave-&gt;api-index-animation#resetMouseoverParameter"
        data-controller="api-index-animation" height="100px" style="margin-bottom: -3.2rem" version="1.1"
        viewBox="0 0 800 700" width="200px" xmlns="http://www.w3.org/2000/svg">
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="400" cy="300" data-start="50"
            data-target="api-index-animation.centerDot" r="55" style="fill: #31e24c"></circle>
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="660" cy="150"
            data-target="api-index-animation.upperRightDot" r="55" style="fill: #3196e2"></circle>
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="800" cy="300"
            data-target="api-index-animation.centerRightDot" r="55" style="fill: #3196e2"></circle>
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="660" cy="450"
            data-target="api-index-animation.lowerRightDot" r="55" style="fill: #3196e2"></circle>
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="140" cy="450"
            data-target="api-index-animation.lowerLeftDot" r="55" style="fill: #3196e2"></circle>
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="0" cy="300"
            data-target="api-index-animation.centerLeftDot" r="55" style="fill: #3196e2"></circle>
        <circle class="api-index-animation__dot api-index-animation__dot--hidden" cx="140" cy="150"
            data-target="api-index-animation.upperLeftDot" r="55" style="fill: #3196e2"></circle>
        <path d="M455 300 L 745 300" data-duration="80" data-start="50" id="cr_line"
            style="stroke: #D4D4D4; stroke-width: 10px; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 0">
        </path>
        <path d="M345 300 L 55 300" data-duration="80" data-start="50" id="cl_line"
            style="stroke: #D4D4D4; stroke-width: 10px; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 0">
        </path>
        <path d="M420 250 C 420 250, 420 150, 520 150 M520 150 L 520 150, 610 150" data-duration="70" data-start="50"
            fill="none" id="ur_line"
            style="stroke: #D4D4D4; stroke-width: 10px; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 0">
        </path>
        <path d="M380 250 C 380 250, 380 150, 280 150 M280 150 L 280 150, 190 150" data-duration="70" data-start="50"
            fill="none" id="ul_line"
            style="stroke: #D4D4D4; stroke-width: 10px; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 0">
        </path>
        <path d="M380 350 C 380 350, 380 450, 300 450 M300 450 L 300 450, 190 450" data-duration="70" data-start="50"
            fill="none" id="ll_line"
            style="stroke: #D4D4D4; stroke-width: 10px; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 0">
        </path>
        <path d="M420 350 C 420 350, 420 450, 520 450 M520 450 L 520 450, 610 450" data-duration="70" data-start="50"
            fill="none" id="lr_line"
            style="stroke: #D4D4D4; stroke-width: 10px; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 0">
        </path>
    </svg>


    <script src="main.js"></script>
</body>

</html>

Error: Object does not support property or method "contains"

70953722_899284557111430_2505627308522471424_n

Testing -> http://stimulus.szymondziewonski.com/project.zip
If you are not feeling comfortable to download zip
here's files needed to recreate it
dist/index.html (already included)
src/index.ts (already included)
root
webpack.config.js
tsconfig.json
package.json

install packages and run yarn build

Any help would be much appreciated
@Szymon-dziewonski Szymon-dziewonski changed the title Stimulus IE 11 .contain method doesn't exists Stimulus IE 11 .contain() method doesn't exists Sep 16, 2019
@javan
Copy link
Contributor

javan commented Sep 16, 2019

The project.zip link you provided 404s for me. I'm also unable to reproduce the issue using a bare bones Stimulus application: https://glitch.com/~classic-yellowhorn.

Screen Shot 2019-09-16 at 10 47 00 AM

@Szymon-dziewonski
Copy link
Author

Thanks for quick reply,

Glitch link is indeed working but my example didn't work.
But since you use glitch and I want you to see problem I prepared example for you on glitch.

https://recondite-flare.glitch.me/
This example has additional data-action="" on svg with mouseover and mouseleave events, svg animation is triggered at start and on mouseover restarted

@javan javan closed this as completed in aa76e25 Sep 17, 2019
@javan
Copy link
Contributor

javan commented Sep 17, 2019

Aha! My example didn't have any data-action attributes.

Until the next release is out, you can fix this by adding the code from aa76e25 to your application: https://github.com/stimulusjs/stimulus/blob/aa76e25f104ed165a8985f9c93e25c7912ed218f/packages/%40stimulus/polyfills/index.js#L12-L16

Thanks for the report!

@Szymon-dziewonski
Copy link
Author

@javan thank you for quick resolving issue, its working :)

@dependabot dependabot bot mentioned this issue Mar 17, 2021
Merged
This was referenced Jun 6, 2021
Closed
Closed
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@javan @Szymon-dziewonski