관리-도구

편집 파일: icon-picker.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 = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

wp.media.model.IconPickerTarget = __webpack_require__(6);
wp.media.model.IconPickerFonts = __webpack_require__(5);

wp.media.controller.iconPickerMixin = __webpack_require__(4);
wp.media.controller.IconPickerFont = __webpack_require__(2);
wp.media.controller.IconPickerImg = __webpack_require__(3);

wp.media.view.IconPickerBrowser = __webpack_require__(7);
wp.media.view.IconPickerSidebar = __webpack_require__(14);
wp.media.view.IconPickerFontItem = __webpack_require__(10);
wp.media.view.IconPickerFontLibrary = __webpack_require__(11);
wp.media.view.IconPickerFontFilter = __webpack_require__(9);
wp.media.view.IconPickerFontBrowser = __webpack_require__(8);
wp.media.view.IconPickerImgBrowser = __webpack_require__(13);
wp.media.view.IconPickerSvgItem = __webpack_require__(15);
wp.media.view.MediaFrame.IconPicker = __webpack_require__(12);

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(0);

(function ($) {
	var l10n = wp.media.view.l10n.iconPicker,
	    templates = {},
	    frame,
	    selectIcon,
	    removeIcon,
	    getFrame,
	    updateField,
	    updatePreview,
	    $field;

getFrame = function getFrame() {
		if (!frame) {
			frame = new wp.media.view.MediaFrame.IconPicker();

frame.target.on('change', updateField);
		}

return frame;
	};

updateField = function updateField(model) {
		_.each(model.get('inputs'), function ($input, key) {
			$input.val(model.get(key));
		});

model.clear({ silent: true });
		$field.trigger('ipf:update');
	};

updatePreview = function updatePreview(e) {
		var $el = $(e.currentTarget),
		    $select = $el.find('a.ipf-select'),
		    $remove = $el.find('a.ipf-remove'),
		    type = $el.find('input.ipf-type').val(),
		    icon = $el.find('input.ipf-icon').val(),
		    url = $el.find('input.url').val(),
		    template;

if (type === '' || icon === '' || !_.has(iconPicker.types, type)) {
			$remove.addClass('hidden');
			$select.removeClass('has-icon').addClass('button').text(l10n.selectIcon).attr('title', '');

return;
		}

if (templates[type]) {
			template = templates[type];
		} else {
			template = templates[type] = wp.template('iconpicker-' + iconPicker.types[type].templateId + '-icon');
		}

$remove.removeClass('hidden');
		$select.attr('title', l10n.selectIcon).addClass('has-icon').removeClass('button').html(template({
			type: type,
			icon: icon,
			url: url
		}));
	};

selectIcon = function selectIcon(e) {
		var frame = getFrame(),
		    model = { inputs: {} };

e.preventDefault();

$field = $(e.currentTarget).closest('.ipf');
		model.id = $field.attr('id');

// Collect input fields and use them as the model's attributes.
		$field.find('input').each(function () {
			var $input = $(this),
			    key = $input.attr('class').replace('ipf-', ''),
			    value = $input.val();

model[key] = value;
			model.inputs[key] = $input;
		});

frame.target.set(model, { silent: true });
		frame.open();
	};

removeIcon = function removeIcon(e) {
		var $el = $(e.currentTarget).closest('div.ipf');

$el.find('input').val('');
		$el.trigger('ipf:update');
	};

$(document).on('click', 'a.ipf-select', selectIcon).on('click', 'a.ipf-remove', removeIcon).on('ipf:update', 'div.ipf', updatePreview);

$('div.ipf').trigger('ipf:update');
})(jQuery);

/***/ }),
/* 2 */
/***/ (function(module, exports) {

/**
 * wp.media.controller.IconPickerFont
 *
 * @class
 * @augments wp.media.controller.State
 * @augments Backbone.Model
 * @mixes    wp.media.controller.iconPickerMixin
 */
var IconPickerFont = wp.media.controller.State.extend(_.extend({}, wp.media.controller.iconPickerMixin, {
	defaults: {
		multiple: false,
		menu: 'default',
		toolbar: 'select',
		baseType: 'font'
	},

initialize: function initialize() {
		var data = this.get('data');

this.set('groups', new Backbone.Collection(data.groups));
		this.set('library', new wp.media.model.IconPickerFonts(data.items));
		this.set('selection', new wp.media.model.Selection(null, {
			multiple: this.get('multiple')
		}));
	},

activate: function activate() {
		this.frame.on('open', this.updateSelection, this);
		this.resetFilter();
		this.updateSelection();
	},

deactivate: function deactivate() {
		this.frame.off('open', this.updateSelection, this);
	},

resetFilter: function resetFilter() {
		this.get('library').props.set('group', 'all');
	},

updateSelection: function updateSelection() {
		var selection = this.get('selection'),
		    library = this.get('library'),
		    target = this.frame.target,
		    icon = target.get('icon'),
		    type = target.get('type'),
		    selected;

if (this.id === type) {
			selected = library.findWhere({ id: icon });
		}

selection.reset(selected ? selected : null);
	},

getContentView: function getContentView() {
		return new wp.media.view.IconPickerFontBrowser(_.extend({
			controller: this.frame,
			model: this,
			groups: this.get('groups'),
			collection: this.get('library'),
			selection: this.get('selection'),
			baseType: this.get('baseType'),
			type: this.get('id')
		}, this.ipGetSidebarOptions()));
	}
}));

module.exports = IconPickerFont;

/***/ }),
/* 3 */
/***/ (function(module, exports) {

var Library = wp.media.controller.Library,
    l10n = wp.media.view.l10n,
    models = wp.media.model,
    views = wp.media.view,
    IconPickerImg;

/**
 * wp.media.controller.IconPickerImg
 *
 * @augments wp.media.controller.Library
 * @augments wp.media.controller.State
 * @augments Backbone.Model
 * @mixes    media.selectionSync
 * @mixes    wp.media.controller.iconPickerMixin
 */
IconPickerImg = Library.extend(_.extend({}, wp.media.controller.iconPickerMixin, {
	defaults: _.defaults({
		id: 'image',
		baseType: 'image',
		syncSelection: false
	}, Library.prototype.defaults),

initialize: function initialize(options) {
		var selection = this.get('selection');

this.options = options;

this.set('library', wp.media.query({ type: options.data.mimeTypes }));

this.routers = {
			upload: {
				text: l10n.uploadFilesTitle,
				priority: 20
			},
			browse: {
				text: l10n.mediaLibraryTitle,
				priority: 40
			}
		};

if (!(selection instanceof models.Selection)) {
			this.set('selection', new models.Selection(selection, {
				multiple: false
			}));
		}

Library.prototype.initialize.apply(this, arguments);
	},

activate: function activate() {
		Library.prototype.activate.apply(this, arguments);
		this.get('library').observe(wp.Uploader.queue);
		this.frame.on('open', this.updateSelection, this);
		this.updateSelection();
	},

deactivate: function deactivate() {
		Library.prototype.deactivate.apply(this, arguments);
		this.get('library').unobserve(wp.Uploader.queue);
		this.frame.off('open', this.updateSelection, this);
	},

getContentView: function getContentView(mode) {
		var content = mode === 'upload' ? this.uploadContent() : this.browseContent();

this.frame.$el.removeClass('hide-toolbar');

return content;
	},

/**
  * Media library content
  *
  * @returns {wp.media.view.IconPickerImgBrowser} "Browse" content view.
  */
	browseContent: function browseContent() {
		var options = _.extend({
			model: this,
			controller: this.frame,
			collection: this.get('library'),
			selection: this.get('selection'),
			sortable: this.get('sortable'),
			search: this.get('searchable'),
			filters: this.get('filterable'),
			dragInfo: this.get('dragInfo'),
			idealColumnWidth: this.get('idealColumnWidth'),
			suggestedWidth: this.get('suggestedWidth'),
			suggestedHeight: this.get('suggestedHeight')
		}, this.ipGetSidebarOptions());

if (this.id === 'svg') {
			options.AttachmentView = views.IconPickerSvgItem;
		}

return new views.IconPickerImgBrowser(options);
	},

/**
  * Render callback for the content region in the `upload` mode.
  *
  * @returns {wp.media.view.UploaderInline} "Upload" content view.
  */
	uploadContent: function uploadContent() {
		return new wp.media.view.UploaderInline({
			controller: this.frame
		});
	},

updateSelection: function updateSelection() {
		var selection = this.get('selection'),
		    target = this.frame.target,
		    icon = target.get('icon'),
		    type = target.get('type'),
		    selected;

if (this.id === type) {
			selected = models.Attachment.get(icon);
			this.dfd = selected.fetch();
		}

selection.reset(selected ? selected : null);
	},

/**
  * Get image icon URL
  *
  * @param  {object} model - Selected icon model.
  * @param  {string} size  - Image size.
  *
  * @returns {string} Icon URL.
  */
	ipGetIconUrl: function ipGetIconUrl(model, size) {
		var url = model.get('url'),
		    sizes = model.get('sizes');

if (undefined === size) {
			size = 'thumbnail';
		}

if (sizes && sizes[size]) {
			url = sizes[size].url;
		}

return url;
	}
}));

module.exports = IconPickerImg;

/***/ }),
/* 4 */
/***/ (function(module, exports) {

/**
 * Methods for the state
 *
 * @mixin
 */
var iconPickerMixin = {

/**
  * @returns {object}
  */
	ipGetSidebarOptions: function ipGetSidebarOptions() {
		var frameOptions = this.frame.options,
		    options = {};

if (frameOptions.SidebarView && frameOptions.SidebarView.prototype instanceof wp.media.view.IconPickerSidebar) {
			options.sidebar = true;
			options.SidebarView = frameOptions.SidebarView;
		} else {
			options.sidebar = false;
		}

return options;
	},

/**
  * Get image icon URL
  *
  * @returns {string}
  */
	ipGetIconUrl: function ipGetIconUrl() {
		return '';
	}
};

module.exports = iconPickerMixin;

/***/ }),
/* 5 */
/***/ (function(module, exports) {

/**
 * wp.media.model.IconPickerFonts
 */
var IconPickerFonts = Backbone.Collection.extend({
	constructor: function constructor() {
		Backbone.Collection.prototype.constructor.apply(this, arguments);

this.items = new Backbone.Collection(this.models);
		this.props = new Backbone.Model({
			group: 'all',
			search: ''
		});

this.props.on('change', this.refresh, this);
	},

/**
  * Refresh library when props is changed
  *
  * @param {Backbone.Model} props
  */
	refresh: function refresh(props) {
		var _this = this;

var items = _.clone(this.items.models);

_.each(props.toJSON(), function (value, filter) {
			var method = _this.filters[filter];

if (method) {
				items = items.filter(function (item) {
					return method(item, value);
				});
			}
		});

this.reset(items);
	},

filters: {
		/**
   * @static
   *
   * @param {Backbone.Model} item  Item model.
   * @param {string}         group Group ID.
   *
   * @returns {Boolean}
   */
		group: function group(item, _group) {
			return _group === 'all' || item.get('group') === _group || item.get('group') === '';
		},

/**
   * @static
   *
   * @param {Backbone.Model} item Item model.
   * @param {string}         term Search term.
   *
   * @returns {Boolean}
   */
		search: function search(item, term) {
			var result = void 0;

if (term === '') {
				result = true;
			} else {
				result = _.any(['id', 'name'], function (attribute) {
					var value = item.get(attribute);

return value && value.search(term) >= 0;
				}, term);
			}

return result;
		}
	}
});

module.exports = IconPickerFonts;

/***/ }),
/* 6 */
/***/ (function(module, exports) {

/**
 * wp.media.model.IconPickerTarget
 *
 * A target where the picked icon should be sent to
 *
 * @augments Backbone.Model
 */
var IconPickerTarget = Backbone.Model.extend({
	defaults: {
		type: '',
		group: 'all',
		icon: '',
		url: '',
		sizes: []
	}
});

module.exports = IconPickerTarget;

/***/ }),
/* 7 */
/***/ (function(module, exports) {

/**
 * Methods for the browser views
 */
var IconPickerBrowser = {
	createSidebar: function createSidebar() {
		this.sidebar = new this.options.SidebarView({
			controller: this.controller,
			selection: this.options.selection
		});

this.views.add(this.sidebar);
	}
};

module.exports = IconPickerBrowser;

/***/ }),
/* 8 */
/***/ (function(module, exports) {

/**
 * wp.media.view.IconPickerFontBrowser
 */
var IconPickerFontBrowser = wp.media.View.extend(_.extend({
	className: function className() {
		var className = 'attachments-browser iconpicker-fonts-browser';

if (!this.options.sidebar) {
			className += ' hide-sidebar';
		}

return className;
	},

initialize: function initialize() {
		this.groups = this.options.groups;

this.createToolbar();
		this.createLibrary();

if (this.options.sidebar) {
			this.createSidebar();
		}
	},

createLibrary: function createLibrary() {
		this.items = new wp.media.view.IconPickerFontLibrary({
			controller: this.controller,
			collection: this.collection,
			selection: this.options.selection,
			baseType: this.options.baseType,
			type: this.options.type
		});

// Add keydown listener to the instance of the library view

this.views.add(this.items);
	},

createToolbar: function createToolbar() {
		this.toolbar = new wp.media.view.Toolbar({
			controller: this.controller
		});

this.views.add(this.toolbar);

// Dropdown filter
		this.toolbar.set('filters', new wp.media.view.IconPickerFontFilter({
			controller: this.controller,
			model: this.collection.props,
			priority: -80
		}).render());

// Search field
		this.toolbar.set('search', new wp.media.view.Search({
			controller: this.controller,
			model: this.collection.props,
			priority: 60
		}).render());
	}
}, wp.media.view.IconPickerBrowser));

module.exports = IconPickerFontBrowser;

/***/ }),
/* 9 */
/***/ (function(module, exports) {

/**
 * wp.media.view.IconPickerFontFilter
 */
var IconPickerFontFilter = wp.media.view.AttachmentFilters.extend({
	createFilters: function createFilters() {
		var groups = this.controller.state().get('groups'),
		    filters = {};

filters.all = {
			text: wp.media.view.l10n.iconPicker.allFilter,
			props: { group: 'all' }
		};

groups.each(function (group) {
			filters[group.id] = {
				text: group.get('name'),
				props: { group: group.id }
			};
		});

this.filters = filters;
	},

change: function change() {
		var filter = this.filters[this.el.value];

if (filter) {
			this.model.set('group', filter.props.group);
		}
	}
});

module.exports = IconPickerFontFilter;

/***/ }),
/* 10 */
/***/ (function(module, exports) {

var Attachment = wp.media.view.Attachment.Library,
    IconPickerFontItem;

/**
 * wp.media.view.IconPickerFontItem
 */
IconPickerFontItem = Attachment.extend({
	className: 'attachment iconpicker-item',

initialize: function initialize() {
		this.template = wp.media.template('iconpicker-' + this.options.baseType + '-item');
		Attachment.prototype.initialize.apply(this, arguments);
	},

render: function render() {
		var options = _.defaults(this.model.toJSON(), {
			baseType: this.options.baseType,
			type: this.options.type
		});

this.views.detach();
		this.$el.html(this.template(options));
		this.updateSelect();
		this.views.render();

return this;
	}
});

module.exports = IconPickerFontItem;

/***/ }),
/* 11 */
/***/ (function(module, exports) {

var $ = jQuery,
    Attachments = wp.media.view.Attachments,
    IconPickerFontLibrary;

/**
 * wp.media.view.IconPickerFontLibrary
 */
IconPickerFontLibrary = Attachments.extend({
	className: 'attachments iconpicker-items clearfix',

initialize: function initialize() {
		Attachments.prototype.initialize.apply(this, arguments);

_.bindAll(this, 'scrollToSelected');
		_.defer(this.scrollToSelected, this);
		this.controller.on('open', this.scrollToSelected, this);
		$(this.options.scrollElement).off('scroll', this.scroll);
	},

_addItem: function _addItem(model) {
		this.views.add(this.createAttachmentView(model), {
			at: this.collection.indexOf(model)
		});
	},

_removeItem: function _removeItem(model) {
		var view = this._viewsByCid[model.cid];
		delete this._viewsByCid[model.cid];

if (view) {
			view.remove();
		}
	},

render: function render() {
		_.each(this._viewsByCid, this._removeItem, this);
		this.collection.each(this._addItem, this);

return this;
	},

createAttachmentView: function createAttachmentView(model) {
		var view = new wp.media.view.IconPickerFontItem({
			controller: this.controller,
			model: model,
			collection: this.collection,
			selection: this.options.selection,
			baseType: this.options.baseType,
			type: this.options.type
		});

return this._viewsByCid[view.cid] = view;
	},

/**
  * Scroll to selected item
  */
	scrollToSelected: function scrollToSelected() {
		var selected = this.options.selection.single(),
		    singleView,
		    distance;

if (!selected) {
			return;
		}

singleView = this.getView(selected);

if (singleView && !this.isInView(singleView.$el)) {
			distance = singleView.$el.offset().top - parseInt(singleView.$el.css('paddingTop'), 10) - this.$el.offset().top + this.$el.scrollTop() - parseInt(this.$el.css('paddingTop'), 10);

this.$el.scrollTop(distance);
		}
	},

getView: function getView(model) {
		return _.findWhere(this._viewsByCid, { model: model });
	},

isInView: function isInView($elem) {
		var docViewTop = this.$window.scrollTop(),
		    docViewBottom = docViewTop + this.$window.height(),
		    elemTop = $elem.offset().top,
		    elemBottom = elemTop + $elem.height();

return elemBottom <= docViewBottom && elemTop >= docViewTop;
	},

prepare: function prepare() {},
	ready: function ready() {},
	initSortable: function initSortable() {},
	scroll: function scroll() {}
});

module.exports = IconPickerFontLibrary;

/***/ }),
/* 12 */
/***/ (function(module, exports) {

/**
 * wp.media.view.MediaFrame.IconPicker
 *
 * A frame for selecting an icon.
 *
 * @class
 * @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
 * @mixes wp.media.controller.StateMachine
 */

var l10n = wp.media.view.l10n,
    Select = wp.media.view.MediaFrame.Select,
    IconPicker;

IconPicker = Select.extend({
	initialize: function initialize() {
		_.defaults(this.options, {
			title: l10n.iconPicker.frameTitle,
			multiple: false,
			ipTypes: iconPicker.types,
			target: null,
			SidebarView: null
		});

if (this.options.target instanceof wp.media.model.IconPickerTarget) {
			this.target = this.options.target;
		} else {
			this.target = new wp.media.model.IconPickerTarget();
		}

Select.prototype.initialize.apply(this, arguments);
	},

createStates: function createStates() {
		var Controller;

_.each(this.options.ipTypes, function (props) {
			if (!wp.media.controller.hasOwnProperty('IconPicker' + props.controller)) {
				return;
			}

Controller = wp.media.controller['IconPicker' + props.controller];

this.states.add(new Controller({
				id: props.id,
				content: props.id,
				title: props.name,
				data: props.data
			}));
		}, this);
	},

/**
  * Bind region mode event callbacks.
  */
	bindHandlers: function bindHandlers() {
		this.on('router:create:browse', this.createRouter, this);
		this.on('router:render:browse', this.browseRouter, this);
		this.on('content:render', this.ipRenderContent, this);
		this.on('toolbar:create:select', this.createSelectToolbar, this);
		this.on('open', this._ipSetState, this);
		this.on('select', this._ipUpdateTarget, this);
	},

/**
  * Set state based on the target's icon type
  */
	_ipSetState: function _ipSetState() {
		var stateId = this.target.get('type');

if (!stateId || !this.states.findWhere({ id: stateId })) {
			stateId = this.states.at(0).id;
		}

this.setState(stateId);
	},

/**
  * Update target's attributes after selecting an icon
  */
	_ipUpdateTarget: function _ipUpdateTarget() {
		var state = this.state(),
		    selected = state.get('selection').single(),
		    props;

props = {
			type: state.id,
			icon: selected.get('id'),
			sizes: selected.get('sizes'),
			url: state.ipGetIconUrl(selected)
		};

this.target.set(props);
	},

browseRouter: function browseRouter(routerView) {
		var routers = this.state().routers;

if (routers) {
			routerView.set(routers);
		}
	},

ipRenderContent: function ipRenderContent() {
		var state = this.state(),
		    mode = this.content.mode(),
		    content = state.getContentView(mode);

this.content.set(content);
	}
});

module.exports = IconPicker;

/***/ }),
/* 13 */
/***/ (function(module, exports) {

/**
 * wp.media.view.IconPickerImgBrowser
 */
var IconPickerImgBrowser = wp.media.view.AttachmentsBrowser.extend(wp.media.view.IconPickerBrowser);

module.exports = IconPickerImgBrowser;

/***/ }),
/* 14 */
/***/ (function(module, exports) {

/**
 * wp.media.view.IconPickerSidebar
 */
var IconPickerSidebar = wp.media.view.Sidebar.extend({
	initialize: function initialize() {
		var selection = this.options.selection;

wp.media.view.Sidebar.prototype.initialize.apply(this, arguments);

selection.on('selection:single', this.createSingle, this);
		selection.on('selection:unsingle', this.disposeSingle, this);

if (selection.single()) {
			this.createSingle();
		}
	},

/**
  * @abstract
  */
	createSingle: function createSingle() {},

/**
  * @abstract
  */
	disposeSingle: function disposeSingle() {}
});

module.exports = IconPickerSidebar;

/***/ }),
/* 15 */
/***/ (function(module, exports) {

/**
 * wp.media.view.IconPickerSvgItem
 */
var IconPickerSvgItem = wp.media.view.Attachment.Library.extend({
  template: wp.template('iconpicker-svg-item')
});

module.exports = IconPickerSvgItem;

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