djcowan djcowan

Demo: Different page transitions based on clicked anchor with smoothState.js

This demo shows how to switch transitions based on initiating link with smoothState.js. This solution has been inspired by @pudgereyem's comment on smoothState.js #143.

You can view the demo here.

The demo implements a crude idea of viewports that are horizontally aligned to determine the needed animation: every anchor has a numeric data-target paramter that represents the needed viewport while every scene element provides a numeric data-viewport parameter that reprents the current viewport. If the viewport requested for the clicked target is larger then the current viewport, the scene element is moved to the left, else to the right.

The logic to determine the wanted ani

	<?php

	// original source: http://kuwamoto.org/2007/12/17/improved-pluralizing-in-php-actionscript-and-ror/

	/*
	The MIT License (MIT)

	Copyright (c) 2015

	Permission is hereby granted, free of charge, to any person obtaining a copy

	/**
	* Replace jQuery's $.fn.ready() function with a mod exec
	*
	* Sites that make heavy use of the $(document).ready function
	* are generally incompatable with asynchrounous content. The
	* the $.fn.ready function only runs once. This script replaces
	* the ready function with a module execution controller that
	* let's us register functions and execute all of the functions
	* as we need them. This is useful after HTML gets injected on the
	* page and we want to rebind functionally to the new content.

	INITIALISATION
	==============

	load wp-config.php
	set up default constants
	load wp-content/advanced-cache.php if it exists
	load wp-content/db.php if it exists
	connect to mysql, select db
	load object cache (object-cache.php if it exists, or wp-include/cache.php if not)
	load wp-content/sunrise.php if it exists (multisite only)

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<title>Site Title</title>

	<link rel="stylesheet" href="/assets/css/style.min.css">

	<?php

	/**
	* Shop/archives: wrap the product image/thumbnail in a div.
	*
	* The product image itself is hooked in at priority 10 using woocommerce_template_loop_product_thumbnail(),
	* so priority 9 and 11 are used to open and close the div.
	*/
	add_action( 'woocommerce_before_shop_loop_item_title', function(){
	echo '<div class="imagewrapper">';

	// First Register the Tab by hooking into the 'woocommerce_product_data_tabs' filter
	add_filter( 'woocommerce_product_data_tabs', 'add_my_custom_product_data_tab' );
	function add_my_custom_product_data_tab( $product_data_tabs ) {
	$product_data_tabs['my-custom-tab'] = array(
	'label' => __( 'My Custom Tab', 'my_text_domain' ),
	'target' => 'my_custom_product_data',
	);
	return $product_data_tabs;
	}

	<?php

	add_action('admin_init', function () {
	// Redirect any user trying to access comments page
	global $pagenow;

	if ($pagenow === 'edit-comments.php') {
	wp_redirect(admin_url());
	exit;
	}

	<?php
	/**
	* Export Data to CSV file
	* Could be used in WordPress plugin or theme
	*/

	// A sample link to Download CSV, could be placed somewhere in plugin settings page
	?>
	<a href="<?php echo admin_url( 'admin.php?page=myplugin-settings-page' ) ?>&action=download_csv&_wpnonce=<?php echo wp_create_nonce( 'download_csv' )?>" class="page-title-action"><?php _e('Export to CSV','my-plugin-slug');?></a>

	<?php

	abstract class WordPressSettings {
	/**
	* ID of the settings
	* @var string
	*/
	public $settings_id = '';
	/**
	* Tabs for the settings page