관리-도구

편집 파일: admin.js

/******/ (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 (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);

/***/ }),
/* 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 (response) {
        if (response.success && response.data.redirectUrl === true) {
          window.location = response.data.redirectUrl;
        } else {
          $button.prop('disabled', false);
        }

$spinner.hide();
      },
      fail: function () {
        $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 () {
    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;

/***/ }),
/* 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 () {
    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;

/***/ }),
/* 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 () {
    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;

/***/ }),
/* 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 () {
    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;

/***/ }),
/* 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 () {
    _.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;

/***/ }),
/* 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 () {
    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;

/***/ })
/******/ ]);