Initial commit
This commit is contained in:
699
wp-content/plugins/menu-icons/js/admin.js
Normal file
699
wp-content/plugins/menu-icons/js/admin.js
Normal file
@ -0,0 +1,699 @@
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // identity function for calling harmony imports with the correct context
|
||||
/******/ __webpack_require__.i = function(value) { return value; };
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 2);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
/* global menuIcons:false */
|
||||
|
||||
__webpack_require__(3);
|
||||
|
||||
(function ($) {
|
||||
var miPicker;
|
||||
|
||||
if (!menuIcons.activeTypes || _.isEmpty(menuIcons.activeTypes)) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* @namespace
|
||||
* @property {object} templates - Cached templates for the item previews on the fields
|
||||
* @property {string} wrapClass - Field wrapper's class
|
||||
* @property {object} frame - Menu Icons' media frame instance
|
||||
* @property {object} target - Frame's target model
|
||||
*/
|
||||
miPicker = {
|
||||
templates: {},
|
||||
wrapClass: 'div.menu-icons-wrap',
|
||||
frame: null,
|
||||
target: new wp.media.model.IconPickerTarget(),
|
||||
|
||||
/**
|
||||
* Callback function to filter active icon types
|
||||
*
|
||||
* TODO: Maybe move to frame view?
|
||||
*
|
||||
* @param {string} type - Icon type.
|
||||
*/
|
||||
typesFilter: function typesFilter(type) {
|
||||
return $.inArray(type.id, menuIcons.activeTypes) >= 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* Create Menu Icons' media frame
|
||||
*/
|
||||
createFrame: function createFrame() {
|
||||
miPicker.frame = new wp.media.view.MediaFrame.MenuIcons({
|
||||
target: miPicker.target,
|
||||
ipTypes: _.filter(iconPicker.types, miPicker.typesFilter),
|
||||
SidebarView: wp.media.view.MenuIconsSidebar
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Pick icon for a menu item and open the frame
|
||||
*
|
||||
* @param {object} model - Menu item model.
|
||||
*/
|
||||
pickIcon: function pickIcon(model) {
|
||||
miPicker.frame.target.set(model, { silent: true });
|
||||
miPicker.frame.open();
|
||||
},
|
||||
|
||||
/**
|
||||
* Set or unset icon
|
||||
*
|
||||
* @param {object} e - jQuery click event.
|
||||
*/
|
||||
setUnset: function setUnset(e) {
|
||||
var $el = $(e.currentTarget),
|
||||
$clicked = $(e.target);
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if ($clicked.hasClass('_select') || $clicked.hasClass('_icon')) {
|
||||
miPicker.setIcon($el);
|
||||
} else if ($clicked.hasClass('_remove')) {
|
||||
miPicker.unsetIcon($el);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Set Icon
|
||||
*
|
||||
* @param {object} $el - jQuery object.
|
||||
*/
|
||||
setIcon: function setIcon($el) {
|
||||
var id = $el.data('id'),
|
||||
frame = miPicker.frame,
|
||||
items = frame.menuItems,
|
||||
model = items.get(id);
|
||||
|
||||
if (model) {
|
||||
miPicker.pickIcon(model.toJSON());
|
||||
return;
|
||||
}
|
||||
|
||||
model = {
|
||||
id: id,
|
||||
$el: $el,
|
||||
$title: $('#edit-menu-item-title-' + id),
|
||||
$inputs: {}
|
||||
};
|
||||
|
||||
// Collect menu item's settings fields and use them
|
||||
// as the model's attributes.
|
||||
$el.find('div._settings input').each(function () {
|
||||
var $input = $(this),
|
||||
key = $input.attr('class').replace('_mi-', ''),
|
||||
value = $input.val();
|
||||
|
||||
if (!value) {
|
||||
if (_.has(menuIcons.menuSettings, key)) {
|
||||
value = menuIcons.menuSettings[key];
|
||||
} else if (_.has(menuIcons.settingsFields, key)) {
|
||||
value = menuIcons.settingsFields[key]['default'];
|
||||
}
|
||||
}
|
||||
|
||||
model[key] = value;
|
||||
model.$inputs[key] = $input;
|
||||
});
|
||||
|
||||
items.add(model);
|
||||
miPicker.pickIcon(model);
|
||||
},
|
||||
|
||||
/**
|
||||
* Unset icon
|
||||
*
|
||||
* @param {object} $el - jQuery object.
|
||||
*/
|
||||
unsetIcon: function unsetIcon($el) {
|
||||
var id = $el.data('id');
|
||||
|
||||
$el.find('div._settings input').val('');
|
||||
$el.trigger('mi:update');
|
||||
miPicker.frame.menuItems.remove(id);
|
||||
},
|
||||
|
||||
/**
|
||||
* Update valeus of menu item's setting fields
|
||||
*
|
||||
* When the type and icon is set, this will (re)generate the icon
|
||||
* preview on the menu item field.
|
||||
*
|
||||
* @param {object} e - jQuery event.
|
||||
*/
|
||||
updateField: function updateField(e) {
|
||||
var $el = $(e.currentTarget),
|
||||
$set = $el.find('a._select'),
|
||||
$unset = $el.find('a._remove'),
|
||||
type = $el.find('input._mi-type').val(),
|
||||
icon = $el.find('input._mi-icon').val(),
|
||||
url = $el.find('input._mi-url').val(),
|
||||
template;
|
||||
|
||||
if (type === '' || icon === '' || _.indexOf(menuIcons.activeTypes, type) < 0) {
|
||||
$set.text(menuIcons.text.select).attr('title', '');
|
||||
$unset.addClass('hidden');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (miPicker.templates[type]) {
|
||||
template = miPicker.templates[type];
|
||||
} else {
|
||||
template = miPicker.templates[type] = wp.template('menu-icons-item-field-preview-' + iconPicker.types[type].templateId);
|
||||
}
|
||||
|
||||
$unset.removeClass('hidden');
|
||||
$set.attr('title', menuIcons.text.change);
|
||||
$set.html(template({
|
||||
type: type,
|
||||
icon: icon,
|
||||
url: url
|
||||
}));
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize picker functionality
|
||||
*
|
||||
* #fires mi:update
|
||||
*/
|
||||
init: function init() {
|
||||
miPicker.createFrame();
|
||||
$(document).on('click', miPicker.wrapClass, miPicker.setUnset).on('mi:update', miPicker.wrapClass, miPicker.updateField);
|
||||
|
||||
// Trigger 'mi:update' event to generate the icons on the item fields.
|
||||
$(miPicker.wrapClass).trigger('mi:update');
|
||||
}
|
||||
};
|
||||
|
||||
miPicker.init();
|
||||
})(jQuery);
|
||||
|
||||
/***/ }),
|
||||
/* 1 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
(function ($) {
|
||||
/**
|
||||
* Settings box tabs
|
||||
*
|
||||
* We can't use core's tabs script here because it will clear the
|
||||
* checkboxes upon tab switching
|
||||
*/
|
||||
$('#menu-icons-settings-tabs').on('click', 'a.mi-settings-nav-tab', function (e) {
|
||||
var $el = $(this).blur(),
|
||||
$target = $('#' + $el.data('type'));
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$el.parent().addClass('tabs').siblings().removeClass('tabs');
|
||||
$target.removeClass('tabs-panel-inactive').addClass('tabs-panel-active').show().siblings('div.tabs-panel').hide().addClass('tabs-panel-inactive').removeClass('tabs-panel-active');
|
||||
}).find('a.mi-settings-nav-tab').first().click();
|
||||
|
||||
// Settings meta box
|
||||
$('#menu-icons-settings-save').on('click', function (e) {
|
||||
var $button = $(this).prop('disabled', true),
|
||||
$spinner = $button.siblings('span.spinner');
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$spinner.css({
|
||||
display: 'inline-block',
|
||||
visibility: 'visible'
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: window.menuIcons.ajaxUrls.update,
|
||||
data: $('#menu-icons-settings :input').serialize(),
|
||||
|
||||
success: function success(response) {
|
||||
if (response.success && response.data.redirectUrl === true) {
|
||||
window.location = response.data.redirectUrl;
|
||||
} else {
|
||||
$button.prop('disabled', false);
|
||||
}
|
||||
},
|
||||
|
||||
always: function always() {
|
||||
$spinner.hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
__webpack_require__(1);
|
||||
__webpack_require__(0);
|
||||
|
||||
/***/ }),
|
||||
/* 3 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
wp.media.model.MenuIconsItemSettingField = __webpack_require__(4);
|
||||
wp.media.model.MenuIconsItemSettings = __webpack_require__(5);
|
||||
wp.media.model.MenuIconsItem = __webpack_require__(6);
|
||||
|
||||
wp.media.view.MenuIconsItemSettingField = __webpack_require__(9);
|
||||
wp.media.view.MenuIconsItemSettings = __webpack_require__(10);
|
||||
wp.media.view.MenuIconsItemPreview = __webpack_require__(8);
|
||||
wp.media.view.MenuIconsSidebar = __webpack_require__(11);
|
||||
wp.media.view.MediaFrame.MenuIcons = __webpack_require__(7);
|
||||
|
||||
/***/ }),
|
||||
/* 4 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* wp.media.model.MenuIconsItemSettingField
|
||||
*
|
||||
* @class
|
||||
* @augments Backbone.Model
|
||||
*/
|
||||
var MenuIconsItemSettingField = Backbone.Model.extend({
|
||||
defaults: {
|
||||
id: '',
|
||||
label: '',
|
||||
value: '',
|
||||
type: 'text'
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemSettingField;
|
||||
|
||||
/***/ }),
|
||||
/* 5 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* wp.media.model.MenuIconsItemSettings
|
||||
*
|
||||
* @class
|
||||
* @augments Backbone.Collection
|
||||
*/
|
||||
var MenuIconsItemSettings = Backbone.Collection.extend({
|
||||
model: wp.media.model.MenuIconsItemSettingField
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemSettings;
|
||||
|
||||
/***/ }),
|
||||
/* 6 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* wp.media.model.MenuIconsItem
|
||||
*
|
||||
* @class
|
||||
* @augments Backbone.Model
|
||||
*/
|
||||
var Item = Backbone.Model.extend({
|
||||
initialize: function initialize() {
|
||||
this.on('change', this.updateValues, this);
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the values of menu item's settings fields
|
||||
*
|
||||
* #fires mi:update
|
||||
*/
|
||||
updateValues: function updateValues() {
|
||||
_.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;
|
||||
|
||||
/***/ }),
|
||||
/* 7 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* 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 initialize() {
|
||||
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 miUpdateItemProps(props) {
|
||||
var model = this.menuItems.get(props.id);
|
||||
|
||||
model.set(props.changed);
|
||||
},
|
||||
|
||||
miClearTarget: function miClearTarget() {
|
||||
this.target.clear({ silent: true });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIcons;
|
||||
|
||||
/***/ }),
|
||||
/* 8 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* 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 initialize() {
|
||||
wp.media.View.prototype.initialize.apply(this, arguments);
|
||||
this.model.on('change', this.render, this);
|
||||
},
|
||||
|
||||
render: function render() {
|
||||
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 preventDefault(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemPreview;
|
||||
|
||||
/***/ }),
|
||||
/* 9 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
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 initialize() {
|
||||
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 prepare() {
|
||||
return this.model.toJSON();
|
||||
},
|
||||
|
||||
_update: function _update(e) {
|
||||
var value = $(e.currentTarget).val();
|
||||
|
||||
this.model.set('value', value);
|
||||
this.options.item.set(this.model.id, value);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemSettingField;
|
||||
|
||||
/***/ }),
|
||||
/* 10 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* 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 prepare() {
|
||||
_.each(this.collection.map(this.createField, this), function (view) {
|
||||
this.set(view.model.id, view);
|
||||
}, this);
|
||||
},
|
||||
|
||||
createField: function createField(model) {
|
||||
var field = new wp.media.view.MenuIconsItemSettingField({
|
||||
item: this.model,
|
||||
model: model,
|
||||
collection: this.collection
|
||||
});
|
||||
|
||||
return field;
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemSettings;
|
||||
|
||||
/***/ }),
|
||||
/* 11 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* 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 initialize() {
|
||||
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 createSingle() {
|
||||
this.createPreview();
|
||||
this.createSettings();
|
||||
},
|
||||
|
||||
disposeSingle: function disposeSingle() {
|
||||
this.unset('preview');
|
||||
this.unset('settings');
|
||||
},
|
||||
|
||||
createPreview: function createPreview() {
|
||||
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 createSettings() {
|
||||
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;
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
699
wp-content/plugins/menu-icons/js/admin.min.js
vendored
Normal file
699
wp-content/plugins/menu-icons/js/admin.min.js
vendored
Normal file
@ -0,0 +1,699 @@
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // identity function for calling harmony imports with the correct context
|
||||
/******/ __webpack_require__.i = function(value) { return value; };
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 2);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
/* global menuIcons:false */
|
||||
|
||||
__webpack_require__(3);
|
||||
|
||||
(function ($) {
|
||||
var miPicker;
|
||||
|
||||
if (!menuIcons.activeTypes || _.isEmpty(menuIcons.activeTypes)) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* @namespace
|
||||
* @property {object} templates - Cached templates for the item previews on the fields
|
||||
* @property {string} wrapClass - Field wrapper's class
|
||||
* @property {object} frame - Menu Icons' media frame instance
|
||||
* @property {object} target - Frame's target model
|
||||
*/
|
||||
miPicker = {
|
||||
templates: {},
|
||||
wrapClass: 'div.menu-icons-wrap',
|
||||
frame: null,
|
||||
target: new wp.media.model.IconPickerTarget(),
|
||||
|
||||
/**
|
||||
* Callback function to filter active icon types
|
||||
*
|
||||
* TODO: Maybe move to frame view?
|
||||
*
|
||||
* @param {string} type - Icon type.
|
||||
*/
|
||||
typesFilter: function typesFilter(type) {
|
||||
return $.inArray(type.id, menuIcons.activeTypes) >= 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* Create Menu Icons' media frame
|
||||
*/
|
||||
createFrame: function createFrame() {
|
||||
miPicker.frame = new wp.media.view.MediaFrame.MenuIcons({
|
||||
target: miPicker.target,
|
||||
ipTypes: _.filter(iconPicker.types, miPicker.typesFilter),
|
||||
SidebarView: wp.media.view.MenuIconsSidebar
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Pick icon for a menu item and open the frame
|
||||
*
|
||||
* @param {object} model - Menu item model.
|
||||
*/
|
||||
pickIcon: function pickIcon(model) {
|
||||
miPicker.frame.target.set(model, { silent: true });
|
||||
miPicker.frame.open();
|
||||
},
|
||||
|
||||
/**
|
||||
* Set or unset icon
|
||||
*
|
||||
* @param {object} e - jQuery click event.
|
||||
*/
|
||||
setUnset: function setUnset(e) {
|
||||
var $el = $(e.currentTarget),
|
||||
$clicked = $(e.target);
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if ($clicked.hasClass('_select') || $clicked.hasClass('_icon')) {
|
||||
miPicker.setIcon($el);
|
||||
} else if ($clicked.hasClass('_remove')) {
|
||||
miPicker.unsetIcon($el);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Set Icon
|
||||
*
|
||||
* @param {object} $el - jQuery object.
|
||||
*/
|
||||
setIcon: function setIcon($el) {
|
||||
var id = $el.data('id'),
|
||||
frame = miPicker.frame,
|
||||
items = frame.menuItems,
|
||||
model = items.get(id);
|
||||
|
||||
if (model) {
|
||||
miPicker.pickIcon(model.toJSON());
|
||||
return;
|
||||
}
|
||||
|
||||
model = {
|
||||
id: id,
|
||||
$el: $el,
|
||||
$title: $('#edit-menu-item-title-' + id),
|
||||
$inputs: {}
|
||||
};
|
||||
|
||||
// Collect menu item's settings fields and use them
|
||||
// as the model's attributes.
|
||||
$el.find('div._settings input').each(function () {
|
||||
var $input = $(this),
|
||||
key = $input.attr('class').replace('_mi-', ''),
|
||||
value = $input.val();
|
||||
|
||||
if (!value) {
|
||||
if (_.has(menuIcons.menuSettings, key)) {
|
||||
value = menuIcons.menuSettings[key];
|
||||
} else if (_.has(menuIcons.settingsFields, key)) {
|
||||
value = menuIcons.settingsFields[key]['default'];
|
||||
}
|
||||
}
|
||||
|
||||
model[key] = value;
|
||||
model.$inputs[key] = $input;
|
||||
});
|
||||
|
||||
items.add(model);
|
||||
miPicker.pickIcon(model);
|
||||
},
|
||||
|
||||
/**
|
||||
* Unset icon
|
||||
*
|
||||
* @param {object} $el - jQuery object.
|
||||
*/
|
||||
unsetIcon: function unsetIcon($el) {
|
||||
var id = $el.data('id');
|
||||
|
||||
$el.find('div._settings input').val('');
|
||||
$el.trigger('mi:update');
|
||||
miPicker.frame.menuItems.remove(id);
|
||||
},
|
||||
|
||||
/**
|
||||
* Update valeus of menu item's setting fields
|
||||
*
|
||||
* When the type and icon is set, this will (re)generate the icon
|
||||
* preview on the menu item field.
|
||||
*
|
||||
* @param {object} e - jQuery event.
|
||||
*/
|
||||
updateField: function updateField(e) {
|
||||
var $el = $(e.currentTarget),
|
||||
$set = $el.find('a._select'),
|
||||
$unset = $el.find('a._remove'),
|
||||
type = $el.find('input._mi-type').val(),
|
||||
icon = $el.find('input._mi-icon').val(),
|
||||
url = $el.find('input._mi-url').val(),
|
||||
template;
|
||||
|
||||
if (type === '' || icon === '' || _.indexOf(menuIcons.activeTypes, type) < 0) {
|
||||
$set.text(menuIcons.text.select).attr('title', '');
|
||||
$unset.addClass('hidden');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (miPicker.templates[type]) {
|
||||
template = miPicker.templates[type];
|
||||
} else {
|
||||
template = miPicker.templates[type] = wp.template('menu-icons-item-field-preview-' + iconPicker.types[type].templateId);
|
||||
}
|
||||
|
||||
$unset.removeClass('hidden');
|
||||
$set.attr('title', menuIcons.text.change);
|
||||
$set.html(template({
|
||||
type: type,
|
||||
icon: icon,
|
||||
url: url
|
||||
}));
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize picker functionality
|
||||
*
|
||||
* #fires mi:update
|
||||
*/
|
||||
init: function init() {
|
||||
miPicker.createFrame();
|
||||
$(document).on('click', miPicker.wrapClass, miPicker.setUnset).on('mi:update', miPicker.wrapClass, miPicker.updateField);
|
||||
|
||||
// Trigger 'mi:update' event to generate the icons on the item fields.
|
||||
$(miPicker.wrapClass).trigger('mi:update');
|
||||
}
|
||||
};
|
||||
|
||||
miPicker.init();
|
||||
})(jQuery);
|
||||
|
||||
/***/ }),
|
||||
/* 1 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
(function ($) {
|
||||
/**
|
||||
* Settings box tabs
|
||||
*
|
||||
* We can't use core's tabs script here because it will clear the
|
||||
* checkboxes upon tab switching
|
||||
*/
|
||||
$('#menu-icons-settings-tabs').on('click', 'a.mi-settings-nav-tab', function (e) {
|
||||
var $el = $(this).blur(),
|
||||
$target = $('#' + $el.data('type'));
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$el.parent().addClass('tabs').siblings().removeClass('tabs');
|
||||
$target.removeClass('tabs-panel-inactive').addClass('tabs-panel-active').show().siblings('div.tabs-panel').hide().addClass('tabs-panel-inactive').removeClass('tabs-panel-active');
|
||||
}).find('a.mi-settings-nav-tab').first().click();
|
||||
|
||||
// Settings meta box
|
||||
$('#menu-icons-settings-save').on('click', function (e) {
|
||||
var $button = $(this).prop('disabled', true),
|
||||
$spinner = $button.siblings('span.spinner');
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$spinner.css({
|
||||
display: 'inline-block',
|
||||
visibility: 'visible'
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: window.menuIcons.ajaxUrls.update,
|
||||
data: $('#menu-icons-settings :input').serialize(),
|
||||
|
||||
success: function success(response) {
|
||||
if (response.success && response.data.redirectUrl === true) {
|
||||
window.location = response.data.redirectUrl;
|
||||
} else {
|
||||
$button.prop('disabled', false);
|
||||
}
|
||||
},
|
||||
|
||||
always: function always() {
|
||||
$spinner.hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
__webpack_require__(1);
|
||||
__webpack_require__(0);
|
||||
|
||||
/***/ }),
|
||||
/* 3 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
wp.media.model.MenuIconsItemSettingField = __webpack_require__(4);
|
||||
wp.media.model.MenuIconsItemSettings = __webpack_require__(5);
|
||||
wp.media.model.MenuIconsItem = __webpack_require__(6);
|
||||
|
||||
wp.media.view.MenuIconsItemSettingField = __webpack_require__(9);
|
||||
wp.media.view.MenuIconsItemSettings = __webpack_require__(10);
|
||||
wp.media.view.MenuIconsItemPreview = __webpack_require__(8);
|
||||
wp.media.view.MenuIconsSidebar = __webpack_require__(11);
|
||||
wp.media.view.MediaFrame.MenuIcons = __webpack_require__(7);
|
||||
|
||||
/***/ }),
|
||||
/* 4 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* wp.media.model.MenuIconsItemSettingField
|
||||
*
|
||||
* @class
|
||||
* @augments Backbone.Model
|
||||
*/
|
||||
var MenuIconsItemSettingField = Backbone.Model.extend({
|
||||
defaults: {
|
||||
id: '',
|
||||
label: '',
|
||||
value: '',
|
||||
type: 'text'
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemSettingField;
|
||||
|
||||
/***/ }),
|
||||
/* 5 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* wp.media.model.MenuIconsItemSettings
|
||||
*
|
||||
* @class
|
||||
* @augments Backbone.Collection
|
||||
*/
|
||||
var MenuIconsItemSettings = Backbone.Collection.extend({
|
||||
model: wp.media.model.MenuIconsItemSettingField
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemSettings;
|
||||
|
||||
/***/ }),
|
||||
/* 6 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* wp.media.model.MenuIconsItem
|
||||
*
|
||||
* @class
|
||||
* @augments Backbone.Model
|
||||
*/
|
||||
var Item = Backbone.Model.extend({
|
||||
initialize: function initialize() {
|
||||
this.on('change', this.updateValues, this);
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the values of menu item's settings fields
|
||||
*
|
||||
* #fires mi:update
|
||||
*/
|
||||
updateValues: function updateValues() {
|
||||
_.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;
|
||||
|
||||
/***/ }),
|
||||
/* 7 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* 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 initialize() {
|
||||
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 miUpdateItemProps(props) {
|
||||
var model = this.menuItems.get(props.id);
|
||||
|
||||
model.set(props.changed);
|
||||
},
|
||||
|
||||
miClearTarget: function miClearTarget() {
|
||||
this.target.clear({ silent: true });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIcons;
|
||||
|
||||
/***/ }),
|
||||
/* 8 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* 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 initialize() {
|
||||
wp.media.View.prototype.initialize.apply(this, arguments);
|
||||
this.model.on('change', this.render, this);
|
||||
},
|
||||
|
||||
render: function render() {
|
||||
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 preventDefault(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemPreview;
|
||||
|
||||
/***/ }),
|
||||
/* 9 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
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 initialize() {
|
||||
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 prepare() {
|
||||
return this.model.toJSON();
|
||||
},
|
||||
|
||||
_update: function _update(e) {
|
||||
var value = $(e.currentTarget).val();
|
||||
|
||||
this.model.set('value', value);
|
||||
this.options.item.set(this.model.id, value);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemSettingField;
|
||||
|
||||
/***/ }),
|
||||
/* 10 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* 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 prepare() {
|
||||
_.each(this.collection.map(this.createField, this), function (view) {
|
||||
this.set(view.model.id, view);
|
||||
}, this);
|
||||
},
|
||||
|
||||
createField: function createField(model) {
|
||||
var field = new wp.media.view.MenuIconsItemSettingField({
|
||||
item: this.model,
|
||||
model: model,
|
||||
collection: this.collection
|
||||
});
|
||||
|
||||
return field;
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = MenuIconsItemSettings;
|
||||
|
||||
/***/ }),
|
||||
/* 11 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* 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 initialize() {
|
||||
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 createSingle() {
|
||||
this.createPreview();
|
||||
this.createSettings();
|
||||
},
|
||||
|
||||
disposeSingle: function disposeSingle() {
|
||||
this.unset('preview');
|
||||
this.unset('settings');
|
||||
},
|
||||
|
||||
createPreview: function createPreview() {
|
||||
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 createSettings() {
|
||||
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;
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
2
wp-content/plugins/menu-icons/js/src/index.js
Normal file
2
wp-content/plugins/menu-icons/js/src/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
require( './settings' );
|
||||
require( './picker' );
|
9
wp-content/plugins/menu-icons/js/src/media/index.js
Normal file
9
wp-content/plugins/menu-icons/js/src/media/index.js
Normal file
@ -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;
|
27
wp-content/plugins/menu-icons/js/src/media/models/item.js
Normal file
27
wp-content/plugins/menu-icons/js/src/media/models/item.js
Normal file
@ -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;
|
46
wp-content/plugins/menu-icons/js/src/media/views/frame.js
Normal file
46
wp-content/plugins/menu-icons/js/src/media/views/frame.js
Normal file
@ -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;
|
101
wp-content/plugins/menu-icons/js/src/media/views/sidebar.js
Normal file
101
wp-content/plugins/menu-icons/js/src/media/views/sidebar.js
Normal file
@ -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;
|
190
wp-content/plugins/menu-icons/js/src/picker.js
Normal file
190
wp-content/plugins/menu-icons/js/src/picker.js
Normal file
@ -0,0 +1,190 @@
|
||||
/* global menuIcons:false */
|
||||
|
||||
require( './media' );
|
||||
|
||||
( function( $ ) {
|
||||
var miPicker;
|
||||
|
||||
if ( ! menuIcons.activeTypes || _.isEmpty( menuIcons.activeTypes ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* @namespace
|
||||
* @property {object} templates - Cached templates for the item previews on the fields
|
||||
* @property {string} wrapClass - Field wrapper's class
|
||||
* @property {object} frame - Menu Icons' media frame instance
|
||||
* @property {object} target - Frame's target model
|
||||
*/
|
||||
miPicker = {
|
||||
templates: {},
|
||||
wrapClass: 'div.menu-icons-wrap',
|
||||
frame: null,
|
||||
target: new wp.media.model.IconPickerTarget(),
|
||||
|
||||
/**
|
||||
* Callback function to filter active icon types
|
||||
*
|
||||
* TODO: Maybe move to frame view?
|
||||
*
|
||||
* @param {string} type - Icon type.
|
||||
*/
|
||||
typesFilter: function( type ) {
|
||||
return ( $.inArray( type.id, menuIcons.activeTypes ) >= 0 );
|
||||
},
|
||||
|
||||
/**
|
||||
* Create Menu Icons' media frame
|
||||
*/
|
||||
createFrame: function() {
|
||||
miPicker.frame = new wp.media.view.MediaFrame.MenuIcons({
|
||||
target: miPicker.target,
|
||||
ipTypes: _.filter( iconPicker.types, miPicker.typesFilter ),
|
||||
SidebarView: wp.media.view.MenuIconsSidebar
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Pick icon for a menu item and open the frame
|
||||
*
|
||||
* @param {object} model - Menu item model.
|
||||
*/
|
||||
pickIcon: function( model ) {
|
||||
miPicker.frame.target.set( model, { silent: true });
|
||||
miPicker.frame.open();
|
||||
},
|
||||
|
||||
/**
|
||||
* Set or unset icon
|
||||
*
|
||||
* @param {object} e - jQuery click event.
|
||||
*/
|
||||
setUnset: function( e ) {
|
||||
var $el = $( e.currentTarget ),
|
||||
$clicked = $( e.target );
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if ( $clicked.hasClass( '_select' ) || $clicked.hasClass( '_icon' ) ) {
|
||||
miPicker.setIcon( $el );
|
||||
} else if ( $clicked.hasClass( '_remove' ) ) {
|
||||
miPicker.unsetIcon( $el );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Set Icon
|
||||
*
|
||||
* @param {object} $el - jQuery object.
|
||||
*/
|
||||
setIcon: function( $el ) {
|
||||
var id = $el.data( 'id' ),
|
||||
frame = miPicker.frame,
|
||||
items = frame.menuItems,
|
||||
model = items.get( id );
|
||||
|
||||
if ( model ) {
|
||||
miPicker.pickIcon( model.toJSON() );
|
||||
return;
|
||||
}
|
||||
|
||||
model = {
|
||||
id: id,
|
||||
$el: $el,
|
||||
$title: $( '#edit-menu-item-title-' + id ),
|
||||
$inputs: {}
|
||||
};
|
||||
|
||||
// Collect menu item's settings fields and use them
|
||||
// as the model's attributes.
|
||||
$el.find( 'div._settings input' ).each( function() {
|
||||
var $input = $( this ),
|
||||
key = $input.attr( 'class' ).replace( '_mi-', '' ),
|
||||
value = $input.val();
|
||||
|
||||
if ( ! value ) {
|
||||
if ( _.has( menuIcons.menuSettings, key ) ) {
|
||||
value = menuIcons.menuSettings[ key ];
|
||||
} else if ( _.has( menuIcons.settingsFields, key ) ) {
|
||||
value = menuIcons.settingsFields[ key ]['default'];
|
||||
}
|
||||
}
|
||||
|
||||
model[ key ] = value;
|
||||
model.$inputs[ key ] = $input;
|
||||
});
|
||||
|
||||
items.add( model );
|
||||
miPicker.pickIcon( model );
|
||||
},
|
||||
|
||||
/**
|
||||
* Unset icon
|
||||
*
|
||||
* @param {object} $el - jQuery object.
|
||||
*/
|
||||
unsetIcon: function( $el ) {
|
||||
var id = $el.data( 'id' );
|
||||
|
||||
$el.find( 'div._settings input' ).val( '' );
|
||||
$el.trigger( 'mi:update' );
|
||||
miPicker.frame.menuItems.remove( id );
|
||||
},
|
||||
|
||||
/**
|
||||
* Update valeus of menu item's setting fields
|
||||
*
|
||||
* When the type and icon is set, this will (re)generate the icon
|
||||
* preview on the menu item field.
|
||||
*
|
||||
* @param {object} e - jQuery event.
|
||||
*/
|
||||
updateField: function( e ) {
|
||||
var $el = $( e.currentTarget ),
|
||||
$set = $el.find( 'a._select' ),
|
||||
$unset = $el.find( 'a._remove' ),
|
||||
type = $el.find( 'input._mi-type' ).val(),
|
||||
icon = $el.find( 'input._mi-icon' ).val(),
|
||||
url = $el.find( 'input._mi-url' ).val(),
|
||||
template;
|
||||
|
||||
if ( type === '' || icon === '' || _.indexOf( menuIcons.activeTypes, type ) < 0 ) {
|
||||
$set.text( menuIcons.text.select ).attr( 'title', '' );
|
||||
$unset.addClass( 'hidden' );
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if ( miPicker.templates[ type ]) {
|
||||
template = miPicker.templates[ type ];
|
||||
} else {
|
||||
template = miPicker.templates[ type ] = wp.template( 'menu-icons-item-field-preview-' + iconPicker.types[ type ].templateId );
|
||||
}
|
||||
|
||||
$unset.removeClass( 'hidden' );
|
||||
$set.attr( 'title', menuIcons.text.change );
|
||||
$set.html( template({
|
||||
type: type,
|
||||
icon: icon,
|
||||
url: url
|
||||
}) );
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize picker functionality
|
||||
*
|
||||
* #fires mi:update
|
||||
*/
|
||||
init: function() {
|
||||
miPicker.createFrame();
|
||||
$( document )
|
||||
.on( 'click', miPicker.wrapClass, miPicker.setUnset )
|
||||
.on( 'mi:update', miPicker.wrapClass, miPicker.updateField );
|
||||
|
||||
// Trigger 'mi:update' event to generate the icons on the item fields.
|
||||
$( miPicker.wrapClass ).trigger( 'mi:update' );
|
||||
}
|
||||
};
|
||||
|
||||
miPicker.init();
|
||||
}( jQuery ) );
|
59
wp-content/plugins/menu-icons/js/src/settings.js
Normal file
59
wp-content/plugins/menu-icons/js/src/settings.js
Normal file
@ -0,0 +1,59 @@
|
||||
( function( $ ) {
|
||||
/**
|
||||
* Settings box tabs
|
||||
*
|
||||
* We can't use core's tabs script here because it will clear the
|
||||
* checkboxes upon tab switching
|
||||
*/
|
||||
$( '#menu-icons-settings-tabs' )
|
||||
.on( 'click', 'a.mi-settings-nav-tab', function( e ) {
|
||||
var $el = $( this ).blur(),
|
||||
$target = $( '#' + $el.data( 'type' ) );
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$el.parent().addClass( 'tabs' ).siblings().removeClass( 'tabs' );
|
||||
$target
|
||||
.removeClass( 'tabs-panel-inactive' )
|
||||
.addClass( 'tabs-panel-active' )
|
||||
.show()
|
||||
.siblings( 'div.tabs-panel' )
|
||||
.hide()
|
||||
.addClass( 'tabs-panel-inactive' )
|
||||
.removeClass( 'tabs-panel-active' );
|
||||
})
|
||||
.find( 'a.mi-settings-nav-tab' ).first().click();
|
||||
|
||||
// Settings meta box
|
||||
$( '#menu-icons-settings-save' ).on( 'click', function( e ) {
|
||||
var $button = $( this ).prop( 'disabled', true ),
|
||||
$spinner = $button.siblings( 'span.spinner' );
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$spinner.css({
|
||||
display: 'inline-block',
|
||||
visibility: 'visible'
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: window.menuIcons.ajaxUrls.update,
|
||||
data: $( '#menu-icons-settings :input' ).serialize(),
|
||||
|
||||
success: function( response ) {
|
||||
if ( response.success && response.data.redirectUrl === true ) {
|
||||
window.location = response.data.redirectUrl;
|
||||
} else {
|
||||
$button.prop( 'disabled', false );
|
||||
}
|
||||
},
|
||||
|
||||
always: function() {
|
||||
$spinner.hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
})( jQuery );
|
Reference in New Issue
Block a user