first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,875 @@
|
||||
window.butterbean = window.butterbean || {};
|
||||
|
||||
( function() {
|
||||
|
||||
// Bail if we don't have the JSON, which is passed in via `wp_localize_script()`.
|
||||
if ( _.isUndefined( butterbean_data ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Our global object. The `butterbean` object is just a wrapper to house everything
|
||||
* in a single namespace.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @var object
|
||||
*/
|
||||
var api = butterbean = {
|
||||
|
||||
/**
|
||||
* Houses the manager, section, and control views based on the `type`.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @var object
|
||||
*/
|
||||
views : { managers : {}, sections : {}, controls : {} },
|
||||
|
||||
/**
|
||||
* Houses the manager, section, and control templates based on the `type`.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @var object
|
||||
*/
|
||||
templates : { managers : {}, sections : {}, controls : {} }
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a new manager view.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @param object $args
|
||||
* @return void
|
||||
*/
|
||||
api.views.register_manager = function( type, args ) {
|
||||
|
||||
if ( 'default' !== type )
|
||||
this.managers[ type ] = this.managers.default.extend( args );
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a manager view.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return object
|
||||
*/
|
||||
api.views.get_manager = function( type ) {
|
||||
|
||||
if ( this.manager_exists( type ) )
|
||||
return this.managers[ type ];
|
||||
|
||||
return this.managers.default;
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes a manager view.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return void
|
||||
*/
|
||||
api.views.unregister_manager = function( type ) {
|
||||
|
||||
if ( 'default' !== type && this.manager_exists( type ) )
|
||||
delete this.managers[ type ];
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if a manager view exists.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return bool
|
||||
*/
|
||||
api.views.manager_exists = function( type ) {
|
||||
|
||||
return this.managers.hasOwnProperty( type );
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a new section view.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @param object $args
|
||||
* @return void
|
||||
*/
|
||||
api.views.register_section = function( type, args ) {
|
||||
|
||||
if ( 'default' !== type )
|
||||
this.sections[ type ] = this.sections.default.extend( args );
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a section view.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return object
|
||||
*/
|
||||
api.views.get_section = function( type ) {
|
||||
|
||||
if ( this.section_exists( type ) )
|
||||
return this.sections[ type ];
|
||||
|
||||
return this.sections.default;
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes a section view.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return void
|
||||
*/
|
||||
api.views.unregister_section = function( type ) {
|
||||
|
||||
if ( 'default' !== type && this.section_exists( type ) )
|
||||
delete this.sections[ type ];
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if a section view exists.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return bool
|
||||
*/
|
||||
api.views.section_exists = function( type ) {
|
||||
|
||||
return this.sections.hasOwnProperty( type );
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a new control view.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @param object $args
|
||||
* @return void
|
||||
*/
|
||||
api.views.register_control = function( type, args ) {
|
||||
|
||||
if ( 'default' !== type )
|
||||
this.controls[ type ] = this.controls.default.extend( args );
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a control view.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return object
|
||||
*/
|
||||
api.views.get_control = function( type ) {
|
||||
|
||||
if ( this.control_exists( type ) )
|
||||
return this.controls[ type ];
|
||||
|
||||
return this.controls.default;
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes a control view.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return void
|
||||
*/
|
||||
api.views.unregister_control = function( type ) {
|
||||
|
||||
if ( 'default' !== type && this.control_exists( type ) )
|
||||
delete this.controls[ type ];
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if a control view exists.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return bool
|
||||
*/
|
||||
api.views.control_exists = function( type ) {
|
||||
|
||||
return this.controls.hasOwnProperty( type );
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a new manager template.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @param object $args
|
||||
* @return void
|
||||
*/
|
||||
api.templates.register_manager = function( type ) {
|
||||
|
||||
this.managers[ type ] = wp.template( 'butterbean-manager-' + type );
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a manager template.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return function
|
||||
*/
|
||||
api.templates.get_manager = function( type ) {
|
||||
|
||||
return this.manager_exists( type ) ? this.managers[ type ] : false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes a manager template.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return void
|
||||
*/
|
||||
api.templates.unregister_manager = function( type ) {
|
||||
|
||||
if ( this.manager_exists( type ) )
|
||||
delete this.managers[ type ];
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if a manager template exists.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return bool
|
||||
*/
|
||||
api.templates.manager_exists = function( type ) {
|
||||
|
||||
return this.managers.hasOwnProperty( type );
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a new section template.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @param object $args
|
||||
* @return void
|
||||
*/
|
||||
api.templates.register_section = function( type ) {
|
||||
|
||||
this.sections[ type ] = wp.template( 'butterbean-section-' + type );
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a section template.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return function
|
||||
*/
|
||||
api.templates.get_section = function( type ) {
|
||||
|
||||
return this.section_exists( type ) ? this.sections[ type ] : false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes a section template.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return void
|
||||
*/
|
||||
api.templates.unregister_section = function( type ) {
|
||||
|
||||
if ( this.section_exists( type ) )
|
||||
delete this.sections[ type ];
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if a section template exists.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return bool
|
||||
*/
|
||||
api.templates.section_exists = function( type ) {
|
||||
|
||||
return this.sections.hasOwnProperty( type );
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a new control template.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @param object $args
|
||||
* @return void
|
||||
*/
|
||||
api.templates.register_control = function( type ) {
|
||||
|
||||
this.controls[ type ] = wp.template( 'butterbean-control-' + type );
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a control template.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return function
|
||||
*/
|
||||
api.templates.get_control = function( type ) {
|
||||
|
||||
return this.control_exists( type ) ? this.controls[ type ] : false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes a control template.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return void
|
||||
*/
|
||||
api.templates.unregister_control = function( type ) {
|
||||
|
||||
if ( this.control_exists( type ) )
|
||||
delete this.controls[ type ];
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if a control template exists.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @param string $type
|
||||
* @return bool
|
||||
*/
|
||||
api.templates.control_exists = function( type ) {
|
||||
|
||||
return this.controls.hasOwnProperty( type );
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders our managers, sections, and controls.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access private
|
||||
* @return void
|
||||
*/
|
||||
api.render = function() {
|
||||
|
||||
// Loop through each of the managers and render their api.views.
|
||||
_.each( butterbean_data.managers, function( data ) {
|
||||
|
||||
// Create a new manager model with the JSON data for the manager.
|
||||
var manager = new Manager( data );
|
||||
|
||||
// Get the manager view callback.
|
||||
var callback = api.views.get_manager( data.type );
|
||||
|
||||
// Create a new manager view.
|
||||
var view = new callback( { model : manager } );
|
||||
|
||||
// Get the meta box element.
|
||||
var metabox = document.getElementById( 'butterbean-ui-' + manager.get( 'name' ) );
|
||||
|
||||
// Add the `.butterbean-ui` class to the meta box.
|
||||
metabox.className += ' butterbean-ui';
|
||||
|
||||
// Render the manager view.
|
||||
metabox.querySelector( '.inside' ).appendChild( view.render().el );
|
||||
|
||||
// Render the manager subviews.
|
||||
view.subview_render();
|
||||
|
||||
// Call the view's ready method.
|
||||
view.ready();
|
||||
} );
|
||||
};
|
||||
|
||||
/* === Templates === */
|
||||
|
||||
// Nav template.
|
||||
var nav_template = wp.template( 'butterbean-nav' );
|
||||
|
||||
/* === Models === */
|
||||
|
||||
// Manager model (each manager is housed within a meta box).
|
||||
var Manager = Backbone.Model.extend( {
|
||||
defaults : {
|
||||
name : '',
|
||||
type : '',
|
||||
sections : {},
|
||||
controls : {}
|
||||
}
|
||||
} );
|
||||
|
||||
// Section model (each section belongs to a manager).
|
||||
var Section = Backbone.Model.extend( {
|
||||
defaults : {
|
||||
name : '',
|
||||
type : '',
|
||||
label : '',
|
||||
description : '',
|
||||
icon : '',
|
||||
manager : '',
|
||||
active : '',
|
||||
selected : false
|
||||
}
|
||||
} );
|
||||
|
||||
// Control model (each control belongs to a manager and section).
|
||||
var Control = Backbone.Model.extend( {
|
||||
defaults : {
|
||||
name : '',
|
||||
type : '',
|
||||
label : '',
|
||||
description : '',
|
||||
icon : '',
|
||||
value : '',
|
||||
choices : {},
|
||||
attr : '',
|
||||
active : '',
|
||||
manager : '',
|
||||
section : '',
|
||||
setting : ''
|
||||
}
|
||||
} );
|
||||
|
||||
/* === Collections === */
|
||||
|
||||
/**
|
||||
* Stores our collection of section models.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access private
|
||||
* @var object
|
||||
*/
|
||||
var Sections = Backbone.Collection.extend( {
|
||||
model : Section
|
||||
} );
|
||||
|
||||
/* === Views === */
|
||||
|
||||
/**
|
||||
* The default manager view. Other views can extend this using the
|
||||
* `butterbean.views.register_manager()` function.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @var object
|
||||
*/
|
||||
api.views.managers[ 'default' ] = Backbone.View.extend( {
|
||||
|
||||
// Wrapper element for the manager view.
|
||||
tagName : 'div',
|
||||
|
||||
// Adds some custom attributes to the wrapper.
|
||||
attributes : function() {
|
||||
return {
|
||||
'id' : 'butterbean-manager-' + this.model.get( 'name' ),
|
||||
'class' : 'butterbean-manager butterbean-manager-' + this.model.get( 'type' )
|
||||
};
|
||||
},
|
||||
|
||||
// Initializes the view.
|
||||
initialize : function() {
|
||||
|
||||
var type = this.model.get( 'type' );
|
||||
|
||||
// If there's not yet a template for this manager type, create it.
|
||||
if ( ! api.templates.manager_exists( type ) )
|
||||
api.templates.register_manager( type );
|
||||
|
||||
// Get the manager template.
|
||||
this.template = api.templates.get_manager( type );
|
||||
},
|
||||
|
||||
// Renders the manager.
|
||||
render : function() {
|
||||
this.el.innerHTML = this.template( this.model.toJSON() );
|
||||
return this;
|
||||
},
|
||||
|
||||
// Renders the manager's sections and controls.
|
||||
// Important! This may change drastically in the future, possibly even
|
||||
// taken out of the manager view altogether. It's for this reason that
|
||||
// it's not recommended to create custom views for managers right now.
|
||||
subview_render : function() {
|
||||
|
||||
// Create a new section collection.
|
||||
var sections = new Sections();
|
||||
|
||||
// Loop through each section and add it to the collection.
|
||||
_.each( this.model.get( 'sections' ), function( data ) {
|
||||
|
||||
sections.add( new Section( data ) );
|
||||
} );
|
||||
|
||||
// Loop through each section in the collection and render its view.
|
||||
sections.forEach( function( section, i ) {
|
||||
|
||||
// Create a new nav item view for the section.
|
||||
var nav_view = new Nav_View( { model : section } );
|
||||
|
||||
// Render the nav item view.
|
||||
document.querySelector( '#butterbean-ui-' + section.get( 'manager' ) + ' .butterbean-nav' ).appendChild( nav_view.render().el );
|
||||
|
||||
// Get the section view callback.
|
||||
var callback = api.views.get_section( section.attributes.type );
|
||||
|
||||
// Create a new section view.
|
||||
var view = new callback( { model : section } );
|
||||
|
||||
// Render the section view.
|
||||
document.querySelector( '#butterbean-ui-' + section.get( 'manager' ) + ' .butterbean-content' ).appendChild( view.render().el );
|
||||
|
||||
// Call the section view's ready method.
|
||||
view.ready();
|
||||
|
||||
// If the first model, set it to selected.
|
||||
section.set( 'selected', 0 === i );
|
||||
}, this );
|
||||
|
||||
// Loop through each control for the manager and render its view.
|
||||
_.each( this.model.get( 'controls' ), function( data ) {
|
||||
|
||||
// Create a new control model.
|
||||
var control = new Control( data );
|
||||
|
||||
// Get the control view callback.
|
||||
var callback = api.views.get_control( data.type );
|
||||
|
||||
// Create a new control view.
|
||||
var view = new callback( { model : control } );
|
||||
|
||||
// Render the view.
|
||||
document.getElementById( 'butterbean-' + control.get( 'manager' ) + '-section-' + control.get( 'section' ) ).appendChild( view.render().el );
|
||||
|
||||
// Call the view's ready method.
|
||||
view.ready();
|
||||
} );
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Function that is executed *after* the view has been rendered.
|
||||
// This is meant to be overwritten in sub-views.
|
||||
ready : function() {}
|
||||
} );
|
||||
|
||||
/**
|
||||
* The default section view. Other views can extend this using the
|
||||
* `butterbean.views.register_section()` function.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @var object
|
||||
*/
|
||||
api.views.sections[ 'default' ] = Backbone.View.extend( {
|
||||
|
||||
// Wrapper element for the section.
|
||||
tagName : 'div',
|
||||
|
||||
// Adds custom attributes for the section wrapper.
|
||||
attributes : function() {
|
||||
return {
|
||||
'id' : 'butterbean-' + this.model.get( 'manager' ) + '-section-' + this.model.get( 'name' ),
|
||||
'class' : 'butterbean-section butterbean-section-' + this.model.get( 'type' ),
|
||||
'aria-hidden' : ! this.model.get( 'selected' )
|
||||
};
|
||||
},
|
||||
|
||||
// Initializes the view.
|
||||
initialize : function() {
|
||||
|
||||
// Add an event for when the model changes.
|
||||
this.model.on( 'change', this.onchange, this );
|
||||
|
||||
// Get the section type.
|
||||
var type = this.model.get( 'type' );
|
||||
|
||||
// If there's no template for this section type, create it.
|
||||
if ( ! api.templates.section_exists( type ) )
|
||||
api.templates.register_section( type );
|
||||
|
||||
// Gets the section template.
|
||||
this.template = api.templates.get_section( type );
|
||||
},
|
||||
|
||||
// Renders the section.
|
||||
render : function() {
|
||||
|
||||
// Only render template if model is active.
|
||||
if ( this.model.get( 'active' ) )
|
||||
this.el.innerHTML = this.template( this.model.toJSON() );
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Executed when the model changes.
|
||||
onchange : function() {
|
||||
|
||||
// Set the view's `aria-hidden` attribute based on whether the model is selected.
|
||||
this.el.setAttribute( 'aria-hidden', ! this.model.get( 'selected' ) );
|
||||
},
|
||||
|
||||
// Function that is executed *after* the view has been rendered.
|
||||
// This is meant to be overwritten in sub-views.
|
||||
ready : function() {}
|
||||
} );
|
||||
|
||||
/**
|
||||
* The nav item view for each section.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @var object
|
||||
*/
|
||||
var Nav_View = Backbone.View.extend( {
|
||||
|
||||
// Sets the template used.
|
||||
template : nav_template,
|
||||
|
||||
// Wrapper element for the nav item.
|
||||
tagName : 'li',
|
||||
|
||||
// Sets some custom attributes for the nav item wrapper.
|
||||
attributes : function() {
|
||||
return {
|
||||
'aria-selected' : this.model.get( 'selected' )
|
||||
};
|
||||
},
|
||||
|
||||
// Initializes the nav item view.
|
||||
initialize : function() {
|
||||
this.model.on( 'change', this.render, this );
|
||||
this.model.on( 'change', this.onchange, this );
|
||||
},
|
||||
|
||||
// Renders the nav item.
|
||||
render : function() {
|
||||
|
||||
// Only render template if model is active.
|
||||
if ( this.model.get( 'active' ) )
|
||||
this.el.innerHTML = this.template( this.model.toJSON() );
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Custom events.
|
||||
events : {
|
||||
'click a' : 'onselect'
|
||||
},
|
||||
|
||||
// Executed when the section model changes.
|
||||
onchange : function() {
|
||||
|
||||
// Set the `aria-selected` attibute based on the model selected state.
|
||||
this.el.setAttribute( 'aria-selected', this.model.get( 'selected' ) );
|
||||
},
|
||||
|
||||
// Executed when the link for the nav item is clicked.
|
||||
onselect : function( event ) {
|
||||
event.preventDefault();
|
||||
|
||||
// Loop through each of the models in the collection and set them to inactive.
|
||||
_.each( this.model.collection.models, function( m ) {
|
||||
|
||||
m.set( 'selected', false );
|
||||
}, this );
|
||||
|
||||
// Set this view's model to selected.
|
||||
this.model.set( 'selected', true );
|
||||
}
|
||||
} );
|
||||
|
||||
/**
|
||||
* The default control view. Other views can extend this using the
|
||||
* `butterbean.views.register_control()` function.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @access public
|
||||
* @var object
|
||||
*/
|
||||
api.views.controls[ 'default' ] = Backbone.View.extend( {
|
||||
|
||||
// Wrapper element for the control.
|
||||
tagName : 'div',
|
||||
|
||||
// Custom attributes for the control wrapper.
|
||||
attributes : function() {
|
||||
return {
|
||||
'id' : 'butterbean-control-' + this.model.get( 'name' ),
|
||||
'class' : 'butterbean-control butterbean-control-' + this.model.get( 'type' )
|
||||
};
|
||||
},
|
||||
|
||||
// Initiazlies the control view.
|
||||
initialize : function() {
|
||||
var type = this.model.get( 'type' );
|
||||
|
||||
// Only add a new control template if we have a different control type.
|
||||
if ( ! api.templates.control_exists( type ) )
|
||||
api.templates.register_control( type );
|
||||
|
||||
// Get the control template.
|
||||
this.template = api.templates.get_control( type );
|
||||
|
||||
// Bind changes so that the view is re-rendered when the model changes.
|
||||
_.bindAll( this, 'render' );
|
||||
this.model.bind( 'change', this.render );
|
||||
},
|
||||
|
||||
// Renders the control template.
|
||||
render : function() {
|
||||
|
||||
// Only render template if model is active.
|
||||
if ( this.model.get( 'active' ) )
|
||||
this.el.innerHTML = this.template( this.model.toJSON() );
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Function that is executed *after* the view has been rendered.
|
||||
// This is meant to be overwritten in sub-views.
|
||||
ready : function() {}
|
||||
} );
|
||||
|
||||
/**
|
||||
* Adds the color control view.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
api.views.register_control( 'color', {
|
||||
|
||||
// Calls the core WP color picker for the control's input.
|
||||
ready : function() {
|
||||
|
||||
var options = this.model.attributes.options;
|
||||
|
||||
jQuery( this.$el ).find( '.butterbean-color-picker' ).wpColorPicker( options );
|
||||
}
|
||||
} );
|
||||
|
||||
/**
|
||||
* Adds the color palette view.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
api.views.register_control( 'palette', {
|
||||
|
||||
// Adds custom events.
|
||||
events : {
|
||||
'change input' : 'onselect'
|
||||
},
|
||||
|
||||
// Executed when one of the color palette's value has changed.
|
||||
// These are radio inputs.
|
||||
onselect : function() {
|
||||
|
||||
// Get the value of the input.
|
||||
var value = document.querySelector( '#' + this.el.id + ' input:checked' ).getAttribute( 'value' );
|
||||
|
||||
// Get all choices.
|
||||
var choices = this.model.get( 'choices' );
|
||||
|
||||
// Loop through choices and change the selected value.
|
||||
_.each( choices, function( choice, key ) {
|
||||
choice.selected = key === value;
|
||||
} );
|
||||
|
||||
// Because `choices` is an array, it's not recognized as a change. So, we
|
||||
// have to manually trigger a change here so that the view gets re-rendered.
|
||||
this.model.set( 'choices', choices ).trigger( 'change', this.model );
|
||||
}
|
||||
} );
|
||||
|
||||
/**
|
||||
* Adds the image control view.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
api.views.register_control( 'image', {
|
||||
|
||||
// Adds custom events.
|
||||
events : {
|
||||
'click .butterbean-add-media' : 'showmodal',
|
||||
'click .butterbean-change-media' : 'showmodal',
|
||||
'click .butterbean-remove-media' : 'removemedia'
|
||||
},
|
||||
|
||||
// Executed when the show modal button is clicked.
|
||||
showmodal : function() {
|
||||
|
||||
|
||||
// If we already have a media modal, open it.
|
||||
if ( ! _.isUndefined( this.media_modal ) ) {
|
||||
|
||||
this.media_modal.open();
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a new media modal.
|
||||
this.media_modal = wp.media( {
|
||||
frame : 'select',
|
||||
multiple : false,
|
||||
editing : true,
|
||||
title : this.model.get( 'l10n' ).choose,
|
||||
library : { type : 'image' },
|
||||
button : { text: this.model.get( 'l10n' ).set }
|
||||
} );
|
||||
|
||||
// Runs when an image is selected in the media modal.
|
||||
this.media_modal.on( 'select', function() {
|
||||
|
||||
// Gets the JSON data for the first selection.
|
||||
var media = this.media_modal.state().get( 'selection' ).first().toJSON();
|
||||
|
||||
// Size of image to display.
|
||||
var size = this.model.attributes.size;
|
||||
|
||||
// Updates the model for the view.
|
||||
this.model.set( {
|
||||
src : media.sizes[ size ] ? media.sizes[ size ]['url'] : media.url,
|
||||
alt : media.alt,
|
||||
value : media.id
|
||||
} );
|
||||
}, this );
|
||||
|
||||
// Opens the media modal.
|
||||
this.media_modal.open();
|
||||
},
|
||||
|
||||
// Executed when the remove media button is clicked.
|
||||
removemedia : function() {
|
||||
|
||||
// Updates the model for the view.
|
||||
this.model.set( { src : '', alt : '', value : '' } );
|
||||
}
|
||||
} );
|
||||
|
||||
}() );
|
||||
+1
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
+3
File diff suppressed because one or more lines are too long
+336
@@ -0,0 +1,336 @@
|
||||
/**!
|
||||
* wp-color-picker-alpha
|
||||
*
|
||||
* Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker
|
||||
* Only run in input and is defined data alpha in true
|
||||
*
|
||||
* Version: 1.2.2
|
||||
* https://github.com/23r9i0/wp-color-picker-alpha
|
||||
* Copyright (c) 2015 Sergio P.A. (23r9i0).
|
||||
* Licensed under the GPLv2 license.
|
||||
*/
|
||||
( function( $ ) {
|
||||
// Variable for some backgrounds ( grid )
|
||||
var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==',
|
||||
// html stuff for wpColorPicker copy of the original color-picker.js
|
||||
_before = '<a tabindex="0" class="wp-color-result" />',
|
||||
_after = '<div class="wp-picker-holder" />',
|
||||
_wrap = '<div class="wp-picker-container" />',
|
||||
_button = '<input type="button" class="button button-small hidden" />';
|
||||
|
||||
/**
|
||||
* Overwrite Color
|
||||
* for enable support rbga
|
||||
*/
|
||||
Color.fn.toString = function() {
|
||||
if ( this._alpha < 1 )
|
||||
return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' );
|
||||
|
||||
var hex = parseInt( this._color, 10 ).toString( 16 );
|
||||
|
||||
if ( this.error )
|
||||
return '';
|
||||
|
||||
if ( hex.length < 6 )
|
||||
hex = ( '00000' + hex ).substr( -6 );
|
||||
|
||||
return '#' + hex;
|
||||
};
|
||||
|
||||
/**
|
||||
* Overwrite wpColorPicker
|
||||
*/
|
||||
$.widget( 'wp.wpColorPicker', $.wp.wpColorPicker, {
|
||||
_create: function() {
|
||||
// bail early for unsupported Iris.
|
||||
if ( ! $.support.iris )
|
||||
return;
|
||||
|
||||
var self = this,
|
||||
el = self.element;
|
||||
|
||||
$.extend( self.options, el.data() );
|
||||
|
||||
// keep close bound so it can be attached to a body listener
|
||||
self.close = $.proxy( self.close, self );
|
||||
|
||||
self.initialValue = el.val();
|
||||
|
||||
// Set up HTML structure, hide things
|
||||
el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
|
||||
self.wrap = el.parent();
|
||||
self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor : self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
|
||||
self.pickerContainer = $( _after ).insertAfter( el );
|
||||
self.button = $( _button );
|
||||
|
||||
if ( self.options.defaultColor ) {
|
||||
self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
|
||||
} else {
|
||||
self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
|
||||
}
|
||||
|
||||
el.wrap( '<span class="wp-picker-input-wrap" />' ).after( self.button );
|
||||
|
||||
el.iris( {
|
||||
target : self.pickerContainer,
|
||||
hide : self.options.hide,
|
||||
width : 280,
|
||||
mode : self.options.mode,
|
||||
palettes : ['#000000','#ffffff','#f44336','#E91E63','#03A9F4','#00BCD4','#8BC34A','#FFEB3B','#FFC107','#FF9800','#607D8B'],
|
||||
change : function( event, ui ) {
|
||||
if ( self.options.alpha ) {
|
||||
self.toggler.css( { 'background-image' : 'url(' + image + ')' } ).html( '<span />' );
|
||||
self.toggler.find( 'span' ).css( {
|
||||
'width' : '100%',
|
||||
'height' : '100%',
|
||||
'position' : 'absolute',
|
||||
'top' : 0,
|
||||
'left' : 0,
|
||||
'border-top-left-radius' : '3px',
|
||||
'border-bottom-left-radius' : '3px',
|
||||
'background' : ui.color.toString()
|
||||
} );
|
||||
} else {
|
||||
self.toggler.css( { backgroundColor : ui.color.toString() } );
|
||||
}
|
||||
|
||||
// Check for a custom cb
|
||||
if ( $.isFunction( self.options.change ) )
|
||||
self.options.change.call( this, event, ui );
|
||||
}
|
||||
} );
|
||||
|
||||
el.val( self.initialValue );
|
||||
self._addListeners();
|
||||
|
||||
if ( ! self.options.hide ) {
|
||||
self.toggler.click();
|
||||
}
|
||||
},
|
||||
_addListeners: function() {
|
||||
var self = this;
|
||||
|
||||
// prevent any clicks inside this widget from leaking to the top and closing it
|
||||
self.wrap.on( 'click.wpcolorpicker', function( event ) {
|
||||
event.stopPropagation();
|
||||
} );
|
||||
|
||||
self.toggler.on( 'click', function() {
|
||||
if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
|
||||
self.close();
|
||||
} else {
|
||||
self.open();
|
||||
}
|
||||
});
|
||||
|
||||
self.element.on( 'change', function( event ) {
|
||||
// Empty or Error = clear
|
||||
if ( $( this ).val() === '' || self.element.hasClass( 'iris-error' ) ) {
|
||||
if ( self.options.alpha ) {
|
||||
self.toggler.removeAttr( 'style' );
|
||||
self.toggler.find( 'span' ).css( 'backgroundColor', '' );
|
||||
} else {
|
||||
self.toggler.css( 'backgroundColor', '' );
|
||||
}
|
||||
|
||||
// fire clear callback if we have one
|
||||
if ( $.isFunction( self.options.clear ) )
|
||||
self.options.clear.call( this, event );
|
||||
}
|
||||
} );
|
||||
|
||||
// open a keyboard-focused closed picker with space or enter
|
||||
self.toggler.on( 'keyup', function( event ) {
|
||||
if ( event.keyCode === 13 || event.keyCode === 32 ) {
|
||||
event.preventDefault();
|
||||
self.toggler.trigger( 'click' ).next().focus();
|
||||
}
|
||||
});
|
||||
|
||||
self.button.on( 'click', function( event ) {
|
||||
if ( $( this ).hasClass( 'wp-picker-clear' ) ) {
|
||||
self.element.val( '' );
|
||||
if ( self.options.alpha ) {
|
||||
self.toggler.removeAttr( 'style' );
|
||||
self.toggler.find( 'span' ).css( 'backgroundColor', '' );
|
||||
} else {
|
||||
self.toggler.css( 'backgroundColor', '' );
|
||||
}
|
||||
|
||||
if ( $.isFunction( self.options.clear ) )
|
||||
self.options.clear.call( this, event );
|
||||
|
||||
} else if ( $( this ).hasClass( 'wp-picker-default' ) ) {
|
||||
self.element.val( self.options.defaultColor ).change();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Overwrite iris
|
||||
*/
|
||||
$.widget( 'a8c.iris', $.a8c.iris, {
|
||||
_create: function() {
|
||||
this._super();
|
||||
|
||||
// Global option for check is mode rbga is enabled
|
||||
this.options.alpha = this.element.data( 'alpha' ) || false;
|
||||
|
||||
// Is not input disabled
|
||||
if ( ! this.element.is( ':input' ) )
|
||||
this.options.alpha = false;
|
||||
|
||||
if ( typeof this.options.alpha !== 'undefined' && this.options.alpha ) {
|
||||
var self = this,
|
||||
el = self.element,
|
||||
_html = '<div class="iris-strip iris-slider iris-alpha-slider"><div class="iris-slider-offset iris-slider-offset-alpha"></div></div>',
|
||||
aContainer = $( _html ).appendTo( self.picker.find( '.iris-picker-inner' ) ),
|
||||
aSlider = aContainer.find( '.iris-slider-offset-alpha' ),
|
||||
controls = {
|
||||
aContainer : aContainer,
|
||||
aSlider : aSlider
|
||||
};
|
||||
|
||||
if ( typeof el.data( 'custom-width' ) !== 'undefined' ) {
|
||||
self.options.customWidth = parseInt( el.data( 'custom-width' ) ) || 0;
|
||||
} else {
|
||||
self.options.customWidth = 100;
|
||||
}
|
||||
|
||||
// Set default width for input reset
|
||||
self.options.defaultWidth = el.width();
|
||||
|
||||
// Update width for input
|
||||
if ( self._color._alpha < 1 || self._color.toString().indexOf('rgb') != -1 )
|
||||
el.width( parseInt( self.options.defaultWidth + self.options.customWidth ) );
|
||||
|
||||
// Push new controls
|
||||
$.each( controls, function( k, v ) {
|
||||
self.controls[k] = v;
|
||||
} );
|
||||
|
||||
// Change size strip and add margin for sliders
|
||||
self.controls.square.css( { 'margin-right': '0' } );
|
||||
var emptyWidth = ( self.picker.width() - self.controls.square.width() - 20 ),
|
||||
stripsMargin = ( emptyWidth / 6 ),
|
||||
stripsWidth = ( ( emptyWidth / 2 ) - stripsMargin );
|
||||
|
||||
$.each( [ 'aContainer', 'strip' ], function( k, v ) {
|
||||
self.controls[v].width( stripsWidth ).css( { 'margin-left' : stripsMargin + 'px' } );
|
||||
} );
|
||||
|
||||
// Add new slider
|
||||
self._initControls();
|
||||
|
||||
// For updated widget
|
||||
self._change();
|
||||
}
|
||||
},
|
||||
_initControls: function() {
|
||||
this._super();
|
||||
|
||||
if ( this.options.alpha ) {
|
||||
var self = this,
|
||||
controls = self.controls;
|
||||
|
||||
controls.aSlider.slider({
|
||||
orientation : 'vertical',
|
||||
min : 0,
|
||||
max : 100,
|
||||
step : 1,
|
||||
value : parseInt( self._color._alpha * 100 ),
|
||||
slide : function( event, ui ) {
|
||||
// Update alpha value
|
||||
self._color._alpha = parseFloat( ui.value / 100 );
|
||||
self._change.apply( self, arguments );
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
_change: function() {
|
||||
this._super();
|
||||
|
||||
var self = this,
|
||||
el = self.element;
|
||||
|
||||
if ( this.options.alpha ) {
|
||||
var controls = self.controls,
|
||||
alpha = parseInt( self._color._alpha * 100 ),
|
||||
color = self._color.toRgb(),
|
||||
gradient = [
|
||||
'rgb(' + color.r + ',' + color.g + ',' + color.b + ') 0%',
|
||||
'rgba(' + color.r + ',' + color.g + ',' + color.b + ', 0) 100%'
|
||||
],
|
||||
defaultWidth = self.options.defaultWidth,
|
||||
customWidth = self.options.customWidth,
|
||||
target = self.picker.closest( '.wp-picker-container' ).find( '.wp-color-result' );
|
||||
|
||||
// Generate background slider alpha, only for CSS3 old browser fuck!! :)
|
||||
controls.aContainer.css( { 'background' : 'linear-gradient(to bottom, ' + gradient.join( ', ' ) + '), url(' + image + ')' } );
|
||||
|
||||
if ( target.hasClass( 'wp-picker-open' ) ) {
|
||||
// Update alpha value
|
||||
controls.aSlider.slider( 'value', alpha );
|
||||
|
||||
/**
|
||||
* Disabled change opacity in default slider Saturation ( only is alpha enabled )
|
||||
* and change input width for view all value
|
||||
*/
|
||||
if ( self._color._alpha < 1 ) {
|
||||
controls.strip.attr( 'style', controls.strip.attr( 'style' ).replace( /rgba\(([0-9]+,)(\s+)?([0-9]+,)(\s+)?([0-9]+)(,(\s+)?[0-9\.]+)\)/g, 'rgb($1$3$5)' ) );
|
||||
el.width( parseInt( defaultWidth + customWidth ) );
|
||||
} else {
|
||||
el.width( defaultWidth );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var reset = el.data( 'reset-alpha' ) || false;
|
||||
|
||||
if ( reset ) {
|
||||
self.picker.find( '.iris-palette-container' ).on( 'click.palette', '.iris-palette', function() {
|
||||
self._color._alpha = 1;
|
||||
self.active = 'external';
|
||||
self._change();
|
||||
} );
|
||||
}
|
||||
},
|
||||
_addInputListeners: function( input ) {
|
||||
var self = this,
|
||||
debounceTimeout = 100,
|
||||
callback = function( event ) {
|
||||
var color = new Color( input.val() ),
|
||||
val = input.val();
|
||||
|
||||
input.removeClass( 'iris-error' );
|
||||
// we gave a bad color
|
||||
if ( color.error ) {
|
||||
// don't error on an empty input
|
||||
if ( val !== '' )
|
||||
input.addClass( 'iris-error' );
|
||||
} else {
|
||||
if ( color.toString() !== self._color.toString() ) {
|
||||
// let's not do this on keyup for hex shortcodes
|
||||
if ( ! ( event.type === 'keyup' && val.match( /^[0-9a-fA-F]{3}$/ ) ) )
|
||||
self._setOption( 'color', color.toString() );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
input.on( 'change', callback ).on( 'keyup', self._debounce( callback, debounceTimeout ) );
|
||||
|
||||
// If we initialized hidden, show on first focus. The rest is up to you.
|
||||
if ( self.options.hide ) {
|
||||
input.on( 'focus', function() {
|
||||
self.show();
|
||||
} );
|
||||
}
|
||||
}
|
||||
} );
|
||||
}( jQuery ) );
|
||||
|
||||
// Auto Call plugin is class is color-picker
|
||||
// jQuery( document ).ready( function( $ ) {
|
||||
// $( '.color-picker' ).wpColorPicker();
|
||||
// } );
|
||||
Reference in New Issue
Block a user