Commit from trunk of wp.org repo

genesis-js-no-js.php

@@ -0,0 +1,97 @@
+<?php
+/**
+ * Genesis js / no-js WordPress plugin.
+ *
+ * For child themes of the Genesis Theme.
+ * Adds a no-js body class to the front-end, and a script on genesis_before
+ * which immediately changes the class to js if JavaScript is enabled. This is
+ * how WP does things on the back-end, to allow different styles for the same
+ * elements depending if JavaScript is active or not.
+ *
+ * @package GenesisJsNoJs
+ * @author Gary Jones
+ * @license GPL3
+ *
+ * Plugin Name: Genesis js / no-js
+ * Plugin URI: http://code.garyjones.co.uk/plugins/genesis-js-no-js/
+ * Description: For child themes of the <a href="http://genesis-theme-framework.com/">Genesis Theme</a>. Adds a <code>no-js</code> body class to the front-end, and a script on <code>genesis_before</code> which immediately changes the class to <code>js</code> if JavaScript is enabled. This is how WP does things on the back-end, to allow differing styles for elements if JavaScript is active or not.
+ * Version: 1.0.1
+ * Author: Gary Jones
+ * Author URI: http://garyjones.co.uk/
+ * License: GPL3
+ */
+
+
+/**
+ * Plugin class for Genesis js / no-js
+ *
+ * @package GenesisJsNoJs
+ */
+class Genesis_Js_No_Js {
+
+	/**
+	 * Holds copy of instance, so other plugins can remove our hooks.
+	 *
+	 * @since 1.0.0
+	 * @link http://core.trac.wordpress.org/attachment/ticket/16149/query-standard-format-posts.php
+	 * @link http://twitter.com/#!/markjaquith/status/66862769030438912
+	 *
+	 * @var Genesis_Js_No_Js
+	 */
+	static $instance;
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 1.0.0
+	 */
+	public function __construct() {
+		self::$instance = $this;
+		add_action( 'init', array( &$this, 'init' ) );
+	}
+
+	/**
+	 * Add action and filter.
+	 *
+	 * @since 1.0.0
+	 */
+	public function init() {
+		add_filter( 'body_class', array( $this, 'body_class' ) );
+		add_action( 'genesis_before', array( $this, 'script' ), 1 );
+	}
+
+	/**
+	 * Add 'no-js' class to the body class values.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @param array $classes Existing classes
+	 * @return array
+	 */
+	public function body_class( $classes ) {
+		$classes[] = 'no-js';
+		return $classes;
+	}
+
+	/**
+	 * Echo out the script that changes 'no-js' class to 'js'.
+	 *
+	 * @since 1.0.0
+	 */
+	public function script() {
+		?>
+<script type="text/javascript">
+//<![CDATA[
+(function(){
+var c = document.body.className;
+c = c.replace(/no-js/, 'js');
+document.body.className = c;
+})();
+//]]>
+</script>
+		<?php
+	}
+
+}
+
+new Genesis_Js_No_Js;

readme.txt

@@ -0,0 +1,55 @@
+=== Plugin Name ===
+Contributors: GaryJ
+Donate link: http://code.garyjones.co.uk/donate/
+Tags: genesis, js-no-js
+Requires at least: 3.0
+Tested up to: 3.3
+Stable tag: 1.0.1
+
+Make front-end styling easier for child themes on the Genesis Framework based on whether JavaScript is enabled or not.
+
+== Description ==
+
+Make front-end styling easier for child themes on the <a href="http://genesis-theme-framework.com/">Genesis Framework</a> based on whether JavaScript is enabled or not.
+
+Adds a `no-js` body class to the front-end, and a script on `genesis_before` which immediately changes the class to `js` if JavaScript is enabled.
+This is how WP does things on the back-end, to allow different styles for the same elements depending if JavaScript is active or not.
+
+This plugin is only useful if you're using a child theme of the <a href="http://genesis-theme-framework.com/">Genesis Framework</a> since it needs to use the `genesis_before` hook.
+
+== Installation ==
+
+1. Unzip and upload `genesis-js-no-js` folder to the `/wp-content/plugins/` directory
+1. Activate the plugin through the 'Plugins' menu in WordPress
+
+== Frequently Asked Questions ==
+
+= What does this plugin actually do? =
+
+If you look at the source of a WordPress back-end page, you'll see it has a body class of `no-js`. Immediately after the opening `body` tag is a small script which replaces `no-js` with `js` (you can see the amended class with Firebug / Inspector).
+
+WordPress uses this to apply different styles to the same elements, depending on whether JavaScript is present or not.
+
+This plugin recreates the same effect, but for the front-end of <a href="http://genesis-theme-framework.com/">Genesis Framework</a> child themes.
+
+= Shouldn't the script be at the end of the page? =
+
+Usually, yes, but it's a fairly small script, so does not block rendering of other content for any noticeable length of time.
+
+Doing it immediately also reduces a flash of incorrectly styled content, as the page does not load with `no-js` styles, then switch to `js` once everything has finished loading.
+
+== Changelog ==
+
+= 1.0.1 =
+* Improved plugin so script is hooked in with priority 1 - avoids a theme placing anything before the script (props [Josh Stauffer](http://twitter.com/joshstauffer))
+
+= 1.0 =
+* First public version.
+
+== Upgrade Notice ==
+
+= 1.0.1 =
+Minor change to avoid potential problems with themes hooking in elements before the script.
+
+= 1.0 =
+Update from nothingness. You will feel better for it.