swup - npm Package Compare versions

Comparing version 0.1.0 to 0.1.2

index.js

		@@ -159,2 +159,7 @@ import enquire from 'enquire.js'
		}
		// custom class fro dynamic pages
		var swupClass = event.delegateTarget.dataset.swupClass
		if (swupClass != null) {
		document.documentElement.classList.add(`to-${swupClass}`)
		}
		this.loadPage(link.getPath(), false)
		@@ -161,0 +166,0 @@ }

modules/renderPage.js

		@@ -5,4 +5,8 @@ const { forEach } = Array.prototype;
		document.documentElement.classList.remove('is-leaving')
		document.documentElement.classList.add('is-rendering')

		// only add for non-popstate transitions
		if (!popstate) {
		document.documentElement.classList.add('is-rendering')
		}

		// replace blocks
		@@ -55,5 +59,10 @@ for (var i = 0; i < page.blocks.length; i++) {
		this.triggerEvent('animationInDone')
		// remove "to-{page}" classes
		document.documentElement.classList.forEach(classItem => {
		if (classItem.startsWith('to-')) {
		document.documentElement.classList.remove(classItem)
		}
		})
		document.documentElement.classList.remove('is-changing')
		document.documentElement.classList.remove('is-rendering')
		document.documentElement.classList.remove('to-' + this.classify(page.url))
		})
		@@ -60,0 +69,0 @@

package.json

		{
		"name": "swup",
		"version": "0.1.0",
		"version": "0.1.2",
		"description": "Css animating between website pages.",
		@@ -5,0 +5,0 @@ "main": "index.js",

readme.md

		@@ -74,2 +74,4 @@ # swup

		Animation to dynamic pages with unknown routes (blog posts, etc.) can be animated to using data attribute `data-swup-class` set on link element. Swup takes the content of the attribute of clicked link and adds class name on html tag in a format `to-{content of the attribute}`, and also removes it after the whole process of routing is done. So for blog posts, you would want to add `data-swup-class="blog-post"`, which would be added to html tag as `to-blog-post`.

		Lets assume we want our header to be blue on homepage (/), but yellow in about (/about) page.
		@@ -76,0 +78,0 @@ ```css

New alerts