Coder Social home page Coder Social logo

Comments (13)

jcklpe avatar jcklpe commented on May 3, 2024 1

Oh yeah, so the way I did it is I have a function called domLoaded that doesn't run swup until after the dom is loaded. Here's a snippet

<script>
function domReady(callback) {
	document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback);
};
domReady(function() {
	const domain = window.location.origin

const swup = new Swup({
    LINK_SELECTOR: `a[href*="${domain}"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]`,
})



	});

</script>

from swup.

gmrchk avatar gmrchk commented on May 3, 2024

Hi, no worries,

Please refer to this - class attribute must start with "a-". The default value for this options is going to change in the future, as is stated here.

swup assumes that the structure of all pages is the same, but you could even wrap the whole content and just replace all of it. Anything that differs from page to page should be replaced.

And I think I understand the targeting of everything but I'm also not entirely sure. So swup targets the piece that is swapped out, while the classes "a-*" target how those sub parts are animated out? And the link selector settings in options tells swup how to target and find those classes correct?

Yes, swup has two options, one for defining replaced content and one for detecting the animation. Those two are not related to each other in any way.

from swup.

jcklpe avatar jcklpe commented on May 3, 2024

The class attribute I'm using does start with "a-" though. I'm using the class attribute "a-fade" and I've defined that class transition information in my css as per the instructions in the readme.

But if the structure differs, as in I have

<body>
   <main id="swup">
      <div class="content a-fade> 
      </div>
   </main>
</body>

And then on my single.php page I have

<body>
   <hero image> </hero image>
   <main id="swup">
      <div class="content a-fade> 
      </div>
   </main>
</body>

Then I should do something more like this? :

<body>
  <wrap id="swup">
   <main>
      <div class="content a-fade> 
      </div>
   </main>
  </wrap>
</body>

And then on my single.php page I have

<body>
  <wrap id="swup">
   <hero image> </hero image>
   <main>
      <div class="content a-fade> 
      </div>
   </main>
  </wrap>
</body>

So that both swup ids are identical?

Would it be possible to even just put id="swup" on the <body>? There wouldn't have the advantage avoiding reloading the header/footer, but that would work for the animation right?

from swup.

MikeHarrison avatar MikeHarrison commented on May 3, 2024

This may just be a typo on what you have posted here, but you have:

<div class="content a-fade>

and are not closing the class declaration. So should be:

<div class="content a-fade">

from swup.

jcklpe avatar jcklpe commented on May 3, 2024

from swup.

MikeHarrison avatar MikeHarrison commented on May 3, 2024

Ah no worries, thought that was probably the case!

from swup.

gmrchk avatar gmrchk commented on May 3, 2024

content a-fade is your class attribute. Please, read my answer carefully.

from swup.

jcklpe avatar jcklpe commented on May 3, 2024

from swup.

jcklpe avatar jcklpe commented on May 3, 2024

@gmrchk I just checked my code after getting home from work, and the element is <div class-"a-fade content">. Which makes me think that swup is only intended to work with a single class on an element? It's not possible to have multiple classes on an element?

relevant piece of code here:

<main id="swup" class="site-content-contain">
	<div id="content" class="a-fade site-content">
	<div class="case-study wrap">
     </div>
  </div>
</main>

And then page two is:

<main id="swup" class="site-content-contain">
	<div id="content" class="a-fade site-content">
		<main class="wrap">
			<div id="primary" class="content-area">
          </div>
      </div>
   </div>
</main>

I'm now going to try and reformat the two pages so that their html/php structure mirrors each other more closely, though I'm still not clear on the limitations of how similar they need to be etc.

from swup.

jcklpe avatar jcklpe commented on May 3, 2024

Hurray! Got it working.

I started writing out another comment after not being able to get stuff to work. But through the process of writing stuff out I was able to figure out what additional avenues I should check, and I got it working! Woohoo!

I'm leaving the below comment I started writing as documentation in case anyone else runs into similar issues.

Okay I've checked and double checked and as far as I can tell the structures between my index.php and my single.php page are identical. Still wasn't working so I thought maybe I was missing something. But I noticed this error in console:

Element #swup is not found in cached page.
uncaught exception: /wordpress/wp-admin/post.php?post=21&action=edit

I don't know if the first error is related to the first, but from the first I think I can gather that it is saying that it can't find a swup element on the page that it thinks it should be cacheing and preparing for animation. I don't see how that's possible. Because there is a swup on both pages.

Here's a straight copy paste of index.php:

get_header(); ?>
<main id="swup" class="site-content-contain">
	<div id="content" class="a-fade site-content">
		<div class="case-study wrap">
			<?php if ( have_posts() ) :
				/* Start the Loop */
				while ( have_posts() ) : the_post();?>
					<section class="case-study-box">
						<a class="text-container" href="
						<?php the_permalink(); ?>">
							<h2 class="case-study-title">
								<span><?php echo get_the_title(); ?></span>
							</h2>

							<h3 class="case-study-subheading">
								<span><?php echo get_field( "case_study_subheading" ); ?></span>
							</h3>

						</a>

						<div  class="overlay" style="<?php echo get_field( "overlay_background_grad" ); ?>"></div>

						<img src="<?php $imageLocation = get_the_post_thumbnail_url(get_the_ID(),'large'); echo $imageLocation; ?>">

					</section>
				<?php endwhile;

				else : ?>
					<p>There are no posts</p>
			<?php endif; ?>
		</div>
		<!-- case -study-wrap-->
	</div>
	<!--site content-->
</main>
<!-- main swup-->

<?php get_footer();

And here is a straight paste of single.php

get_header(); ?>
<main id="swup" class="site-content-contain">
	<div id="content" class="a-fade site-content">
		<div class="wrap">
			<div id="primary" class="content-area">
				<div id="main" class="site-main" role="main">

					<?php
						/* Start the Loop */
						while ( have_posts() ) : the_post();
							get_template_part( 'template-parts/post/content', get_post_format() );
							// post navigation template part
						endwhile; // End of the loop.?>
				</div>
				<!-- site-main-->
			</div>
			<!-- primary-->
		</div>
		<!-- wrap-->
	</div>
	<!--site- content-->
</main>
<!-- main swup-->

<?php get_footer();

As you can see they both have a <main id="swup"> and those tags with the swup ids are in identical places in the hiearchy of the page. And I can confirm this also in relation to their place with the body and head tags too etc, as you can see here:

image

image

I'm thinking the issue is that it's not properly able to guess what pages it should cache because it's not selecting the links correctly, perhaps?

But I replaced the default link selector in the swup.js file so not sure why that's not working.

FIXED: WOO! Okay so I decided to double check the link selector stuff and I found that if I just used this following solution it fixed the issue for me! 😄

const domain = window.location.origin

const swup = new Swup({
    LINK_SELECTOR: `a[href*="${domain}"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]`,
})

from swup.

andre94 avatar andre94 commented on May 3, 2024

Hi @jcklpe, I noticed that you are using wordpress with swup.
Please, tell us how you intercept the whole JavaScript code and get it re-executed to let it works properly. Also with other plugin installed.
Please refer to issue #41
Thanks,

from swup.

andre94 avatar andre94 commented on May 3, 2024

@jcklpe Thanks, I will try!
So you don’t have any inline script inside the content replaced? All your javascript is inside a unique file? Are you checking if the class or id are in the page before execute tje script?
Sorry for the many question, but i want to understand the logic behind :)

from swup.

jcklpe avatar jcklpe commented on May 3, 2024

@andre94 yes all the swup stuff is inside an external file, from the dist directory of the loaded node module. It's enqueded in the theme functions.php. I wanted to directly bundle it with the rest of my app.js stuff using webpack and then just enque app.js but for some reason it was failing to properly import due to a weird type error issue.

As for the reason for using the domLoaded() function it's a utility function I share between projects. I wrote it inline because I was having trouble getting it to properly load through webpack also. I'm very new to using webpack so I did a quick hacky inline include because I knew that would work and figured I could figure out the webpack stuff once I had other stuff working properly.

I used it because I noticed from the console that the swup code was getting imported correctly but for some reason it wasn't loading until after the page loaded, unlike the function call for swup in the page, so it was resulting in the swup not properly calling like it should. I've had similar issues in the past with imported libraries using jQuery so I decided to just use the same solution. I'm sure there's a more proper "WP way" to do things but I don't really know it 🤷‍♂️

from swup.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.