modified file menu-icons
This commit is contained in:
@ -0,0 +1,9 @@
|
||||
wp.media.model.MenuIconsItemSettingField = require( './models/item-setting-field.js' );
|
||||
wp.media.model.MenuIconsItemSettings = require( './models/item-settings.js' );
|
||||
wp.media.model.MenuIconsItem = require( './models/item.js' );
|
||||
|
||||
wp.media.view.MenuIconsItemSettingField = require( './views/item-setting-field.js' );
|
||||
wp.media.view.MenuIconsItemSettings = require( './views/item-settings.js' );
|
||||
wp.media.view.MenuIconsItemPreview = require( './views/item-preview.js' );
|
||||
wp.media.view.MenuIconsSidebar = require( './views/sidebar.js' );
|
||||
wp.media.view.MediaFrame.MenuIcons = require( './views/frame.js' );
|
@ -0,0 +1,16 @@
|
||||
/**
|
||||
* wp.media.model.MenuIconsItemSettingField
|
||||
*
|
||||
* @class
|
||||
* @augments Backbone.Model
|
||||
*/
|
||||
var MenuIconsItemSettingField = Backbone.Model.extend({
|
||||
defaults: {
|
||||
id: '',
|
||||
label: '',
|
||||
value: '',
|
||||
type: 'text'
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemSettingField;
|
@ -0,0 +1,11 @@
|
||||
/**
|
||||
* wp.media.model.MenuIconsItemSettings
|
||||
*
|
||||
* @class
|
||||
* @augments Backbone.Collection
|
||||
*/
|
||||
var MenuIconsItemSettings = Backbone.Collection.extend({
|
||||
model: wp.media.model.MenuIconsItemSettingField
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemSettings;
|
@ -0,0 +1,27 @@
|
||||
/**
|
||||
* wp.media.model.MenuIconsItem
|
||||
*
|
||||
* @class
|
||||
* @augments Backbone.Model
|
||||
*/
|
||||
var Item = Backbone.Model.extend({
|
||||
initialize: function() {
|
||||
this.on( 'change', this.updateValues, this );
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the values of menu item's settings fields
|
||||
*
|
||||
* #fires mi:update
|
||||
*/
|
||||
updateValues: function() {
|
||||
_.each( this.get( '$inputs' ), function( $input, key ) {
|
||||
$input.val( this.get( key ) );
|
||||
}, this );
|
||||
|
||||
// Trigger the 'mi:update' event to regenerate the icon on the field.
|
||||
this.get( '$el' ).trigger( 'mi:update' );
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Item;
|
@ -0,0 +1,46 @@
|
||||
/**
|
||||
* wp.media.view.MediaFrame.MenuIcons
|
||||
*
|
||||
* @class
|
||||
* @augments wp.media.view.MediaFrame.IconPicker
|
||||
* @augments wp.media.view.MediaFrame.Select
|
||||
* @augments wp.media.view.MediaFrame
|
||||
* @augments wp.media.view.Frame
|
||||
* @augments wp.media.View
|
||||
* @augments wp.Backbone.View
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
|
||||
var MenuIcons = wp.media.view.MediaFrame.IconPicker.extend({
|
||||
initialize: function() {
|
||||
this.menuItems = new Backbone.Collection([], {
|
||||
model: wp.media.model.MenuIconsItem
|
||||
});
|
||||
|
||||
wp.media.view.MediaFrame.IconPicker.prototype.initialize.apply( this, arguments );
|
||||
if(this.setMenuTabPanelAriaAttributes){
|
||||
this.off( 'open', this.setMenuTabPanelAriaAttributes, this );
|
||||
// Set the router ARIA tab panel attributes when the modal opens.
|
||||
this.off( 'open', this.setRouterTabPanelAriaAttributes, this );
|
||||
|
||||
// Update the menu ARIA tab panel attributes when the content updates.
|
||||
this.off( 'content:render', this.setMenuTabPanelAriaAttributes, this );
|
||||
// Update the router ARIA tab panel attributes when the content updates.
|
||||
this.off( 'content:render', this.setRouterTabPanelAriaAttributes, this );
|
||||
}
|
||||
this.listenTo( this.target, 'change', this.miUpdateItemProps );
|
||||
this.on( 'select', this.miClearTarget, this );
|
||||
},
|
||||
|
||||
miUpdateItemProps: function( props ) {
|
||||
var model = this.menuItems.get( props.id );
|
||||
|
||||
model.set( props.changed );
|
||||
},
|
||||
|
||||
miClearTarget: function() {
|
||||
this.target.clear({ silent: true });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIcons;
|
@ -0,0 +1,51 @@
|
||||
/**
|
||||
* wp.media.view.MenuIconsItemPreview
|
||||
*
|
||||
* @class
|
||||
* @augments wp.media.View
|
||||
* @augments wp.Backbone.View
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
var MenuIconsItemPreview = wp.media.View.extend({
|
||||
tagName: 'p',
|
||||
className: 'mi-preview menu-item attachment-info',
|
||||
events: {
|
||||
'click a': 'preventDefault'
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
wp.media.View.prototype.initialize.apply( this, arguments );
|
||||
this.model.on( 'change', this.render, this );
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var frame = this.controller,
|
||||
state = frame.state(),
|
||||
selected = state.get( 'selection' ).single(),
|
||||
props = this.model.toJSON(),
|
||||
data = _.extend( props, {
|
||||
type: state.id,
|
||||
icon: selected.id,
|
||||
title: this.model.get( '$title' ).val(),
|
||||
url: state.ipGetIconUrl( selected, props.image_size )
|
||||
}),
|
||||
template = 'menu-icons-item-sidebar-preview-' + iconPicker.types[ state.id ].templateId + '-';
|
||||
|
||||
if ( data.hide_label ) {
|
||||
template += 'hide_label';
|
||||
} else {
|
||||
template += data.position;
|
||||
}
|
||||
|
||||
this.template = wp.media.template( template );
|
||||
this.$el.html( this.template( data ) );
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
preventDefault: function( e ) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemPreview;
|
@ -0,0 +1,38 @@
|
||||
var $ = jQuery,
|
||||
MenuIconsItemSettingField;
|
||||
|
||||
/**
|
||||
* wp.media.view.MenuIconsItemSettingField
|
||||
*
|
||||
* @class
|
||||
* @augments wp.media.View
|
||||
* @augments wp.Backbone.View
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
MenuIconsItemSettingField = wp.media.View.extend({
|
||||
tagName: 'label',
|
||||
className: 'setting',
|
||||
events: {
|
||||
'change :input': '_update'
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
wp.media.View.prototype.initialize.apply( this, arguments );
|
||||
|
||||
this.template = wp.media.template( 'menu-icons-settings-field-' + this.model.get( 'type' ) );
|
||||
this.model.on( 'change', this.render, this );
|
||||
},
|
||||
|
||||
prepare: function() {
|
||||
return this.model.toJSON();
|
||||
},
|
||||
|
||||
_update: function( e ) {
|
||||
var value = $( e.currentTarget ).val();
|
||||
|
||||
this.model.set( 'value', value );
|
||||
this.options.item.set( this.model.id, value );
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemSettingField;
|
@ -0,0 +1,30 @@
|
||||
/**
|
||||
* wp.media.view.MenuIconsItemSettings
|
||||
*
|
||||
* @class
|
||||
* @augments wp.media.view.PriorityList
|
||||
* @augments wp.media.View
|
||||
* @augments wp.Backbone.View
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
var MenuIconsItemSettings = wp.media.view.PriorityList.extend({
|
||||
className: 'mi-settings attachment-info',
|
||||
|
||||
prepare: function() {
|
||||
_.each( this.collection.map( this.createField, this ), function( view ) {
|
||||
this.set( view.model.id, view );
|
||||
}, this );
|
||||
},
|
||||
|
||||
createField: function( model ) {
|
||||
var field = new wp.media.view.MenuIconsItemSettingField({
|
||||
item: this.model,
|
||||
model: model,
|
||||
collection: this.collection
|
||||
});
|
||||
|
||||
return field;
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemSettings;
|
@ -0,0 +1,101 @@
|
||||
/**
|
||||
* wp.media.view.MenuIconsSidebar
|
||||
*
|
||||
* @class
|
||||
* @augments wp.media.view.IconPickerSidebar
|
||||
* @augments wp.media.view.Sidebar
|
||||
* @augments wp.media.view.PriorityList
|
||||
* @augments wp.media.View
|
||||
* @augments wp.Backbone.View
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
var MenuIconsSidebar = wp.media.view.IconPickerSidebar.extend({
|
||||
initialize: function() {
|
||||
var title = new wp.media.View({
|
||||
tagName: 'h3',
|
||||
priority: - 10
|
||||
});
|
||||
|
||||
var info = new wp.media.View({
|
||||
tagName: 'p',
|
||||
className: '_info',
|
||||
priority: 1000
|
||||
});
|
||||
|
||||
wp.media.view.IconPickerSidebar.prototype.initialize.apply( this, arguments );
|
||||
|
||||
title.$el.text( window.menuIcons.text.preview );
|
||||
this.set( 'title', title );
|
||||
|
||||
info.$el.html( window.menuIcons.text.settingsInfo );
|
||||
this.set( 'info', info );
|
||||
},
|
||||
|
||||
createSingle: function() {
|
||||
this.createPreview();
|
||||
this.createSettings();
|
||||
},
|
||||
|
||||
disposeSingle: function() {
|
||||
this.unset( 'preview' );
|
||||
this.unset( 'settings' );
|
||||
},
|
||||
|
||||
createPreview: function() {
|
||||
var self = this,
|
||||
frame = self.controller,
|
||||
state = frame.state();
|
||||
|
||||
// If the selected icon is still being downloaded (image or svg type),
|
||||
// wait for it to complete before creating the preview.
|
||||
if ( state.dfd && state.dfd.state() === 'pending' ) {
|
||||
state.dfd.done( function() {
|
||||
self.createPreview();
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
self.set( 'preview', new wp.media.view.MenuIconsItemPreview({
|
||||
controller: frame,
|
||||
model: frame.target,
|
||||
priority: 80
|
||||
}) );
|
||||
},
|
||||
|
||||
createSettings: function() {
|
||||
var frame = this.controller,
|
||||
state = frame.state(),
|
||||
fieldIds = state.get( 'data' ).settingsFields,
|
||||
fields = [];
|
||||
|
||||
_.each( fieldIds, function( fieldId ) {
|
||||
var field = window.menuIcons.settingsFields[ fieldId ],
|
||||
model;
|
||||
|
||||
if ( ! field ) {
|
||||
return;
|
||||
}
|
||||
|
||||
model = _.defaults({
|
||||
value: frame.target.get( fieldId ) || field['default']
|
||||
}, field );
|
||||
|
||||
fields.push( model );
|
||||
});
|
||||
|
||||
if ( ! fields.length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.set( 'settings', new wp.media.view.MenuIconsItemSettings({
|
||||
controller: this.controller,
|
||||
collection: new wp.media.model.MenuIconsItemSettings( fields ),
|
||||
model: frame.target,
|
||||
type: this.options.type,
|
||||
priority: 120
|
||||
}) );
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsSidebar;
|
Reference in New Issue
Block a user