Enabling CSS for HTML targets with Stimulus-CodePudding

The following importmap had to have the entry for stimulus commented out

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
# pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "trix"
pin "@rails/actiontext", to: "actiontext.js"

in order to run the following HTML behaviour with CSS using a link target

<div >
  <a href="#img1">
    <img src="https://unsplash.it/800/400?image=17" >
  </a>
  <a href="#img2">
    <img src="https://unsplash.it/800/400?image=13" >
  </a>
  <a href="#img3">
    <img src="https://unsplash.it/800/400?image=3" >
  </a>
</div>

<!-- lightbox container hidden with CSS -->
<a href="#"  id="img1">
  <img src="https://unsplash.it/800/400?image=17">
</a>
<a href="#"  id="img2">
  <img src="https://unsplash.it/800/400?image=13">
</a>
<a href="#"  id="img3">
  <img src="https://unsplash.it/800/400?image=2">
</a>

stylesheet

.thumbnail_lb {
  max-width: 80px;
  margin: 1em;
  float: left;
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

.lightbox img {
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}

.lightbox:target {
  outline: none;
  display: block;
}

.thumb-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

with stimulus enabled, the browser inspector shows the hidden container being highlighted as its source wrapper is clicked upon, but nothing happens in the browser. Reloading the browser with say #img3 generates the overlay,but clicking on it does not return to the page overlay-less.

stimulus is entirely geared around targetting. I have not found documentation indicating that CSS-targetting HTML would be impeded by the presence of this library, although I may have missed it.

How can CSS-driveng taargetting co-exist with stimulus?

CodePudding user response：

I don't know about stimulus, but turbo intercepts click events and does it's own url fetching, and it looks like it doesn't play well with # urls.

You can disable turbo around the lightbox links:

<div data-turbo="false">
  <!-- lightbox code -->
</div>

https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms

or you can bypass turbo navigation by catching click events first:

// for any clicks
document.addEventListener("click", e => {
  const target = e.target.closest("a[href^='#']")
  if (target) {
    // this is what Turbo does, normally, which doesn't work.
    // Turbo.visit(target.href)

    window.location = target.href // bypass Turbo navigation
    e.preventDefault();
  }
})

// for link clicks
document.addEventListener("turbo:click", e => {
  if (e.target.matches("a[href^='#']")) {
    e.preventDefault();
  }
})

https://turbo.hotwired.dev/reference/events