Feature/customizer enhance (#242) Fixes #238

* move customizer.php into new /customizer dir

* add selective refresh support

* move scripts to new assets dir

* change location of script

* create a settings.php file

* create editor.php

* add support for multiple TinyMCE fields

* create sections.php

* create panels.php

* create settings.php

* register Site Options panel

* create sections

* include panels and move settings out to partial

* create new scripts

* require customizer files last

* clean up customizer.php and get things working

* enable multiple tinymce editors

* add actual settings

* words

functions.php

@@ -68,6 +68,8 @@ function _s_setup() {
 			'default-image' => '',
 		) ) );
 
+		// Add theme support for selective refresh for widgets.
+		add_theme_support( 'customize-selective-refresh-widgets' );
 	}
 endif; // _s_setup
 add_action( 'after_setup_theme', '_s_setup' );
@@ -129,11 +131,6 @@ function _s_widgets_init() {
  */
 require get_template_directory() . '/inc/extras.php';
 
-/**
- * Customizer additions.
- */
-require get_template_directory() . '/inc/customizer.php';
-
 /**
  * Load Jetpack compatibility file.
  */
@@ -158,3 +155,8 @@ function _s_widgets_init() {
  * Load custom queries.
  */
 require get_template_directory() . '/inc/queries.php';
+
+/**
+ * Customizer additions.
+ */
+require get_template_directory() . '/inc/customizer/customizer.php';

inc/customizer/assets/scripts/livepreview.js

@@ -0,0 +1,60 @@
+/**
+ * File livepreview.js.
+ *
+ * Deal with real time changes asynchronously.
+ */
+
+( function( $ ) {
+
+	// Hook into the API.
+	var api = wp.customize;
+
+	// Site title.
+	api( 'blogname', function( value ) {
+		value.bind( function( to ) {
+			$( '.site-title a' ).text( to );
+		});
+	});
+
+	// Site description.
+	api( 'blogdescription', function( value ) {
+		value.bind( function( to ) {
+			$( '.site-description' ).text( to );
+		});
+	});
+
+	// Header text color.
+	api( 'header_textcolor', function( value ) {
+		value.bind( function( to ) {
+			if ( 'blank' === to ) {
+				$( '.site-title a, .site-description' ).css({
+					'clip': 'rect(1px, 1px, 1px, 1px)',
+					'position': 'absolute'
+				});
+			} else {
+				$( '.site-title a, .site-description' ).css({
+					'clip': 'auto',
+					'position': 'relative'
+				});
+				$( '.site-title a, .site-description' ).css({
+					'color': to
+				});
+			}
+		});
+	});
+
+	// Background image.
+	api( 'background_image', function( value ) {
+		value.bind( function( to ) {
+			$( 'body' ).toggleClass( 'custom-background-image', '' !== to );
+		});
+	});
+
+	// Copyright text.
+	api( '_s_copyright_text', function( value ) {
+		value.bind( function( to ) {
+			$( '.site-info' ).text( to );
+		});
+	});
+
+})( jQuery );

inc/customizer/assets/scripts/tinymce.js

@@ -0,0 +1,119 @@
+/**
+ * File editor.js.
+ *
+ * Theme Customizer editor enhancements for a better user experience.
+ */
+
+window.wdsAdditionalTinyMCE = window.wdsAdditionalTinyMCE || {};
+( function( window, document, $, app, undefined ) {
+	'use strict';
+
+	/**
+	 * Config from WP localization
+	 * @type object
+	 */
+	app.l10n = window.wdsAdditionalTinyMCE || {};
+
+	/**
+	 * Caches elements
+	 *
+	 * @return void
+	 */
+	app.cache = function() {
+		app.$ = {};
+
+		app.api = wp.customize;
+	};
+
+	/**
+	 * Initialization function
+	 *
+	 * @return  void
+	 */
+	app.init = function() {
+
+		// Build cached elements.
+		app.cache();
+
+		// Bail early if requirements aren't met.
+		if ( ! app.MeetsRequirements() ) {
+			return;
+		}
+
+		// Rebind editors when a control section is clicked.
+		$( '.control-section' ).on( 'click', app.bindEditors );
+
+		// Update customizer option when tinymce is changed.
+		$( '.wds-customize-text-editor' ).find( 'textarea' ).on( 'change keyup', app.editorUpdated );
+	};
+
+	/**
+	 * Make sure the editor updates the customize option when changed in visual mode.
+	 *
+	 * @return void
+	 */
+	app.bindEditors = function() {
+
+		// Was needed a timeout since RTE is not initialized when this code run.
+		setTimeout( function() {
+			for ( var i = 0; i < tinymce.editors.length; i++ ) {
+
+				tinymce.editors[i].onChange.add( function ( ed, e ) {
+
+					// Update HTML view textarea (that is the one used to send the data to server).
+					ed.save();
+
+					// Update the customize option.
+					wp.customize( ed.id, function ( obj ) {
+						obj.set( ed.getContent() );
+					});
+                });
+            }
+        }, 1000 );
+	};
+
+	/**
+	 * Fires when the editor is changed.
+	 *
+	 * @param  obj evt 	JS event object.
+	 * @return void
+	 */
+	app.editorUpdated = function( evt ) {
+		var $me = $( this );
+
+		// Update the customize option.
+		wp.customize( this.id, function ( obj ) {
+			obj.set( $me.val() );
+		});
+	};
+
+	/**
+	 * Determine if requirements are met for JS bindings.
+	 *
+	 * @return bool True if requirements are met, false otherwise.
+	 */
+	app.MeetsRequirements = function() {
+		return $( '.wds-customize-text-editor' ).length;
+	};
+
+	/**
+	 * Safely log to the console
+	 * @param  mixed str var to log
+	 * @return void
+	 */
+	app.log = function( str ) {
+
+		// Bail early if no console.
+		if ( ! window.console ) {
+			return;
+		}
+
+		window.console.log( str );
+	};
+
+	// Fire init on document.ready.
+	$( document ).ready( app.init );
+
+	return app;
+
+})( window, document, jQuery, window.wdsAdditionalTinyMCE );