Skip to content

Add basic API for registering callbacks on attributes #336

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielbachhuber merged 8 commits into from
Jun 2, 2015
Merged

Add basic API for registering callbacks on attributes #336

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
496d1ff
Add basic API for registering callbacks on attributes
goldenapples May 27, 2015
c575c65
Replace callback registration with WP-style hooks
goldenapples May 31, 2015
4b8e9c6
Merge remote-tracking branch 'origin/master' into 316-attribute-updat…
goldenapples Jun 1, 2015
dbb686e
A few updates in response to code review
goldenapples Jun 1, 2015
c23311d
Remove wp-hooks from browserified output
goldenapples Jun 1, 2015
d8ef980
Remove reference to `callback` in specs at defaults
goldenapples Jun 1, 2015
7ebf6bd
Enqueue WP-JS-Hooks as "shortcode-ui-js-hooks"
goldenapples Jun 1, 2015
c67dfb7
Update WP-JS-Hooks to version in Github repo
goldenapples Jun 1, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion inc/class-shortcode-ui.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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( 'wp-js-hooks', $this->plugin_url . 'lib/wp-js-hooks/' . $wp_js_hooks_file, array(), '1433195267' );
Copy link
Contributor

@danielbachhuber danielbachhuber Jun 1, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we enqueue as shortcode-ui-js-hooks to avoid collisions?

Copy link
Contributor

@danielbachhuber danielbachhuber Jun 1, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And what is that version?

Copy link
Contributor Author

@goldenapples goldenapples Jun 1, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we enqueue as shortcode-ui-js-hooks to avoid collisions?

Yeah, makes more sense. I'll update.

And what is that version?

The datetime I added that line. I guess that doesn't clear anything up at all - the chance that someone who updated the file would also remember to update the version number here is slim to none. Maybe better to just use the plugin version number like aberything else does?

Copy link
Contributor

@danielbachhuber danielbachhuber Jun 1, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we just use 2015-03-19 to more clearly indicate it's a date?

Copy link
Contributor Author

@goldenapples goldenapples Jun 1, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure. What date does that refer to? The patch file I was building off of is from 2014-03-08.

Copy link
Contributor

@danielbachhuber danielbachhuber Jun 1, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should use the latest from the repo: https://github.com/carldanley/WP-JS-Hooks

Copy link
Contributor Author

@goldenapples goldenapples Jun 1, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, yeah, that makes sense. I've updated that, and clarified in the file header comments.

wp_enqueue_script( 'shortcode-ui', $this->plugin_url . 'js/build/shortcode-ui.js', array( 'jquery', 'backbone', 'mce-view', 'wp-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,
Expand Down
6 changes: 4 additions & 2 deletions js-tests/build/specs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ describe( "Shortcode Attribute Model", function() {
description: 'test description',
meta: {
placeholder: 'test placeholder'
}
},
callback: 'callbackFunc'
Copy link
Contributor

@danielbachhuber danielbachhuber Jun 1, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't these instances of callback be removed?

};

var attr = new ShortcodeAttribute( attrData );
Expand Down Expand Up @@ -361,7 +362,8 @@ var ShortcodeAttribute = Backbone.Model.extend({
description: '',
meta: {
placeholder: '',
}
},
callback: '',
},
});

Expand Down
3 changes: 2 additions & 1 deletion js-tests/src/shortcodeAttributeModelSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ describe( "Shortcode Attribute Model", function() {
description: 'test description',
meta: {
placeholder: 'test placeholder'
}
},
callback: 'callbackFunc'
};

var attr = new ShortcodeAttribute( attrData );
Expand Down
38 changes: 32 additions & 6 deletions js/build/field-attachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,8 @@ var ShortcodeAttribute = Backbone.Model.extend({
description: '',
meta: {
placeholder: '',
}
},
callback: '',
},
});

Expand Down Expand Up @@ -342,9 +343,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( {

Expand Down Expand Up @@ -391,6 +392,7 @@ var editAttributeField = Backbone.View.extend( {
data.meta = _meta.join( ' ' );

this.$el.html( this.template( data ) );
this.updateValue();

return this
},
Expand All @@ -399,7 +401,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 ) {

Expand All @@ -416,7 +419,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 );

}

} );

Expand Down
38 changes: 32 additions & 6 deletions js/build/field-color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,8 @@ var ShortcodeAttribute = Backbone.Model.extend({
description: '',
meta: {
placeholder: '',
}
},
callback: '',
},
});

Expand Down Expand Up @@ -209,9 +210,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( {

Expand Down Expand Up @@ -258,6 +259,7 @@ var editAttributeField = Backbone.View.extend( {
data.meta = _meta.join( ' ' );

this.$el.html( this.template( data ) );
this.updateValue();

return this
},
Expand All @@ -266,7 +268,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 ) {

Expand All @@ -283,7 +286,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 );

}

} );

Expand Down
38 changes: 32 additions & 6 deletions js/build/shortcode-ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,8 @@ var ShortcodeAttribute = Backbone.Model.extend({
description: '',
meta: {
placeholder: '',
}
},
callback: '',
},
});

Expand Down Expand Up @@ -586,9 +587,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( {

Expand Down Expand Up @@ -635,6 +636,7 @@ var editAttributeField = Backbone.View.extend( {
data.meta = _meta.join( ' ' );

this.$el.html( this.template( data ) );
this.updateValue();

return this
},
Expand All @@ -643,7 +645,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 ) {

Expand All @@ -660,7 +663,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 );

}

} );

Expand Down
3 changes: 2 additions & 1 deletion js/src/models/shortcode-attribute.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ var ShortcodeAttribute = Backbone.Model.extend({
description: '',
meta: {
placeholder: '',
}
},
callback: '',
},
});

Expand Down
35 changes: 30 additions & 5 deletions js/src/views/edit-attribute-field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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( {

Expand Down Expand Up @@ -47,6 +47,7 @@ var editAttributeField = Backbone.View.extend( {
data.meta = _meta.join( ' ' );

this.$el.html( this.template( data ) );
this.updateValue();

return this
},
Expand All @@ -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 ) {

Expand All @@ -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 );

}

} );

Expand Down
Loading