Add basic API for registering callbacks on attributes

inc/class-shortcode-ui.php

@@ -96,7 +96,11 @@ public function enqueue() {
 
 		usort( $shortcodes, array( $this, 'compare_shortcodes_by_label' ) );
 
-		wp_enqueue_script( 'shortcode-ui', $this->plugin_url . 'js/build/shortcode-ui.js', array( 'jquery', 'backbone', 'mce-view' ), $this->plugin_version );
+		// Load minified version of wp-js-hooks if not debugging.
+		$wp_js_hooks_file = 'wp-js-hooks' . ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '.min' : '' ) . '.js';
+
+		wp_enqueue_script( 'shortcode-ui-js-hooks', $this->plugin_url . 'lib/wp-js-hooks/' . $wp_js_hooks_file, array(), '2015-03-19' );
+		wp_enqueue_script( 'shortcode-ui', $this->plugin_url . 'js/build/shortcode-ui.js', array( 'jquery', 'backbone', 'mce-view', 'shortcode-ui-js-hooks' ), $this->plugin_version );
 		wp_enqueue_style( 'shortcode-ui', $this->plugin_url . 'css/shortcode-ui.css', array(), $this->plugin_version );
 		wp_localize_script( 'shortcode-ui', ' shortcodeUIData', array(
 			'shortcodes'      => $shortcodes,

js-tests/build/specs.js

@@ -40,7 +40,7 @@ describe( "Shortcode Attribute Model", function() {
 		description: 'test description',
 		meta:  {
 			placeholder: 'test placeholder'
-		}
+		},
 	};
 
 	var attr = new ShortcodeAttribute( attrData );
@@ -361,7 +361,7 @@ var ShortcodeAttribute = Backbone.Model.extend({
 		description: '',
 		meta: {
 			placeholder: '',
-		}
+		},
 	},
 });
 

js-tests/src/shortcodeAttributeModelSpec.js

@@ -10,7 +10,7 @@ describe( "Shortcode Attribute Model", function() {
 		description: 'test description',
 		meta:  {
 			placeholder: 'test placeholder'
-		}
+		},
 	};
 
 	var attr = new ShortcodeAttribute( attrData );

js/build/field-attachment.js

@@ -220,7 +220,7 @@ var ShortcodeAttribute = Backbone.Model.extend({
 		description: '',
 		meta: {
 			placeholder: '',
-		}
+		},
 	},
 });
 
@@ -342,9 +342,9 @@ module.exports = window.Shortcode_UI;
 
 },{"./../collections/shortcodes.js":2}],8:[function(require,module,exports){
 (function (global){
-var Backbone = (typeof window !== "undefined" ? window.Backbone : typeof global !== "undefined" ? global.Backbone : null),
-sui = require('./../utils/sui.js'),
-$ = (typeof window !== "undefined" ? window.jQuery : typeof global !== "undefined" ? global.jQuery : null);
+var Backbone     = (typeof window !== "undefined" ? window.Backbone : typeof global !== "undefined" ? global.Backbone : null),
+	sui          = require('./../utils/sui.js'),
+	$            = (typeof window !== "undefined" ? window.jQuery : typeof global !== "undefined" ? global.jQuery : null);
 
 var editAttributeField = Backbone.View.extend( {
 
@@ -391,6 +391,7 @@ var editAttributeField = Backbone.View.extend( {
 		data.meta = _meta.join( ' ' );
 
 		this.$el.html( this.template( data ) );
+		this.updateValue();
 
 		return this
 	},
@@ -399,7 +400,8 @@ var editAttributeField = Backbone.View.extend( {
 	 * Input Changed Update Callback.
 	 *
 	 * If the input field that has changed is for content or a valid attribute,
-	 * then it should update the model.
+	 * then it should update the model. If a callback function is registered
+	 * for this attribute, it should be called as well.
 	 */
 	updateValue: function( e ) {
 
@@ -416,7 +418,30 @@ var editAttributeField = Backbone.View.extend( {
 		} else {
 			this.model.set( 'value', $el.val() );
 		}
-	},
+
+		var shortcodeName = this.shortcode.attributes.shortcode_tag,
+			attributeName = this.model.get( 'attr' ),
+			hookName      = [ shortcodeName, attributeName ].join( '.' ),
+			changed       = this.model.changed,
+			collection    = _.flatten( _.values( this.views.parent.views._views ) ),
+			shortcode     = this.shortcode;
+
+		/*
+		 * Action run when an attribute value changes on a shortcode
+		 *
+		 * Called as `{shortcodeName}.{attributeName}`.
+		 *
+		 * @param changed (object)
+		 *           The update, ie. { "changed": "newValue" }
+		 * @param viewModels (array)
+		 *           The collections of views (editAttributeFields)
+		 *                         which make up this shortcode UI form
+		 * @param shortcode (object)
+		 *           Reference to the shortcode model which this attribute belongs to.
+		 */
+		wp.shortcake.hooks.doAction( hookName, changed, collection, shortcode );
+
+	}
 
 } );
 

js/build/field-color.js

@@ -87,7 +87,7 @@ var ShortcodeAttribute = Backbone.Model.extend({
 		description: '',
 		meta: {
 			placeholder: '',
-		}
+		},
 	},
 });
 
@@ -209,9 +209,9 @@ module.exports = window.Shortcode_UI;
 
 },{"./../collections/shortcodes.js":2}],8:[function(require,module,exports){
 (function (global){
-var Backbone = (typeof window !== "undefined" ? window.Backbone : typeof global !== "undefined" ? global.Backbone : null),
-sui = require('./../utils/sui.js'),
-$ = (typeof window !== "undefined" ? window.jQuery : typeof global !== "undefined" ? global.jQuery : null);
+var Backbone     = (typeof window !== "undefined" ? window.Backbone : typeof global !== "undefined" ? global.Backbone : null),
+	sui          = require('./../utils/sui.js'),
+	$            = (typeof window !== "undefined" ? window.jQuery : typeof global !== "undefined" ? global.jQuery : null);
 
 var editAttributeField = Backbone.View.extend( {
 
@@ -258,6 +258,7 @@ var editAttributeField = Backbone.View.extend( {
 		data.meta = _meta.join( ' ' );
 
 		this.$el.html( this.template( data ) );
+		this.updateValue();
 
 		return this
 	},
@@ -266,7 +267,8 @@ var editAttributeField = Backbone.View.extend( {
 	 * Input Changed Update Callback.
 	 *
 	 * If the input field that has changed is for content or a valid attribute,
-	 * then it should update the model.
+	 * then it should update the model. If a callback function is registered
+	 * for this attribute, it should be called as well.
 	 */
 	updateValue: function( e ) {
 
@@ -283,7 +285,30 @@ var editAttributeField = Backbone.View.extend( {
 		} else {
 			this.model.set( 'value', $el.val() );
 		}
-	},
+
+		var shortcodeName = this.shortcode.attributes.shortcode_tag,
+			attributeName = this.model.get( 'attr' ),
+			hookName      = [ shortcodeName, attributeName ].join( '.' ),
+			changed       = this.model.changed,
+			collection    = _.flatten( _.values( this.views.parent.views._views ) ),
+			shortcode     = this.shortcode;
+
+		/*
+		 * Action run when an attribute value changes on a shortcode
+		 *
+		 * Called as `{shortcodeName}.{attributeName}`.
+		 *
+		 * @param changed (object)
+		 *           The update, ie. { "changed": "newValue" }
+		 * @param viewModels (array)
+		 *           The collections of views (editAttributeFields)
+		 *                         which make up this shortcode UI form
+		 * @param shortcode (object)
+		 *           Reference to the shortcode model which this attribute belongs to.
+		 */
+		wp.shortcake.hooks.doAction( hookName, changed, collection, shortcode );
+
+	}
 
 } );
 

js/build/shortcode-ui.js

@@ -120,7 +120,7 @@ var ShortcodeAttribute = Backbone.Model.extend({
 		description: '',
 		meta: {
 			placeholder: '',
-		}
+		},
 	},
 });
 
@@ -586,9 +586,9 @@ module.exports = window.Shortcode_UI;
 
 },{"./../collections/shortcodes.js":2}],10:[function(require,module,exports){
 (function (global){
-var Backbone = (typeof window !== "undefined" ? window.Backbone : typeof global !== "undefined" ? global.Backbone : null),
-sui = require('./../utils/sui.js'),
-$ = (typeof window !== "undefined" ? window.jQuery : typeof global !== "undefined" ? global.jQuery : null);
+var Backbone     = (typeof window !== "undefined" ? window.Backbone : typeof global !== "undefined" ? global.Backbone : null),
+	sui          = require('./../utils/sui.js'),
+	$            = (typeof window !== "undefined" ? window.jQuery : typeof global !== "undefined" ? global.jQuery : null);
 
 var editAttributeField = Backbone.View.extend( {
 
@@ -635,6 +635,7 @@ var editAttributeField = Backbone.View.extend( {
 		data.meta = _meta.join( ' ' );
 
 		this.$el.html( this.template( data ) );
+		this.updateValue();
 
 		return this
 	},
@@ -643,7 +644,8 @@ var editAttributeField = Backbone.View.extend( {
 	 * Input Changed Update Callback.
 	 *
 	 * If the input field that has changed is for content or a valid attribute,
-	 * then it should update the model.
+	 * then it should update the model. If a callback function is registered
+	 * for this attribute, it should be called as well.
 	 */
 	updateValue: function( e ) {
 
@@ -660,7 +662,30 @@ var editAttributeField = Backbone.View.extend( {
 		} else {
 			this.model.set( 'value', $el.val() );
 		}
-	},
+
+		var shortcodeName = this.shortcode.attributes.shortcode_tag,
+			attributeName = this.model.get( 'attr' ),
+			hookName      = [ shortcodeName, attributeName ].join( '.' ),
+			changed       = this.model.changed,
+			collection    = _.flatten( _.values( this.views.parent.views._views ) ),
+			shortcode     = this.shortcode;
+
+		/*
+		 * Action run when an attribute value changes on a shortcode
+		 *
+		 * Called as `{shortcodeName}.{attributeName}`.
+		 *
+		 * @param changed (object)
+		 *           The update, ie. { "changed": "newValue" }
+		 * @param viewModels (array)
+		 *           The collections of views (editAttributeFields)
+		 *                         which make up this shortcode UI form
+		 * @param shortcode (object)
+		 *           Reference to the shortcode model which this attribute belongs to.
+		 */
+		wp.shortcake.hooks.doAction( hookName, changed, collection, shortcode );
+
+	}
 
 } );
 

js/src/models/shortcode-attribute.js

@@ -9,7 +9,7 @@ var ShortcodeAttribute = Backbone.Model.extend({
 		description: '',
 		meta: {
 			placeholder: '',
-		}
+		},
 	},
 });
 

js/src/views/edit-attribute-field.js

@@ -1,6 +1,6 @@
-var Backbone = require('backbone'),
-sui = require('sui-utils/sui'),
-$ = require('jquery');
+var Backbone     = require('backbone'),
+	sui          = require('sui-utils/sui'),
+	$            = require('jquery');
 
 var editAttributeField = Backbone.View.extend( {
 
@@ -47,6 +47,7 @@ var editAttributeField = Backbone.View.extend( {
 		data.meta = _meta.join( ' ' );
 
 		this.$el.html( this.template( data ) );
+		this.updateValue();
 
 		return this
 	},
@@ -55,7 +56,8 @@ var editAttributeField = Backbone.View.extend( {
 	 * Input Changed Update Callback.
 	 *
 	 * If the input field that has changed is for content or a valid attribute,
-	 * then it should update the model.
+	 * then it should update the model. If a callback function is registered
+	 * for this attribute, it should be called as well.
 	 */
 	updateValue: function( e ) {
 
@@ -72,7 +74,30 @@ var editAttributeField = Backbone.View.extend( {
 		} else {
 			this.model.set( 'value', $el.val() );
 		}
-	},
+
+		var shortcodeName = this.shortcode.attributes.shortcode_tag,
+			attributeName = this.model.get( 'attr' ),
+			hookName      = [ shortcodeName, attributeName ].join( '.' ),
+			changed       = this.model.changed,
+			collection    = _.flatten( _.values( this.views.parent.views._views ) ),
+			shortcode     = this.shortcode;
+
+		/*
+		 * Action run when an attribute value changes on a shortcode
+		 *
+		 * Called as `{shortcodeName}.{attributeName}`.
+		 *
+		 * @param changed (object)
+		 *           The update, ie. { "changed": "newValue" }
+		 * @param viewModels (array)
+		 *           The collections of views (editAttributeFields)
+		 *                         which make up this shortcode UI form
+		 * @param shortcode (object)
+		 *           Reference to the shortcode model which this attribute belongs to.
+		 */
+		wp.shortcake.hooks.doAction( hookName, changed, collection, shortcode );
+
+	}
 
 } );