2068 lines
101 KiB
JavaScript
2068 lines
101 KiB
JavaScript
'use strict';
|
|
|
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
|
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
|
|
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
|
|
(function (wpI18n, wpBlocks, wpElement, wpEditor, wpBlockEditor, wpComponents) {
|
|
var __ = wpI18n.__;
|
|
var Component = wpElement.Component,
|
|
Fragment = wpElement.Fragment;
|
|
var registerBlockType = wpBlocks.registerBlockType;
|
|
var InspectorControls = wpBlockEditor.InspectorControls,
|
|
MediaUpload = wpBlockEditor.MediaUpload,
|
|
BlockControls = wpBlockEditor.BlockControls,
|
|
PanelColorSettings = wpBlockEditor.PanelColorSettings;
|
|
var mediaUpload = wpEditor.mediaUpload;
|
|
var PanelBody = wpComponents.PanelBody,
|
|
ToggleControl = wpComponents.ToggleControl,
|
|
SelectControl = wpComponents.SelectControl,
|
|
TextControl = wpComponents.TextControl,
|
|
Text = wpComponents.Text,
|
|
Button = wpComponents.Button,
|
|
Tooltip = wpComponents.Tooltip,
|
|
ToolbarGroup = wpComponents.ToolbarGroup,
|
|
FormFileUpload = wpComponents.FormFileUpload,
|
|
Placeholder = wpComponents.Placeholder,
|
|
RangeControl = wpComponents.RangeControl,
|
|
QueryControls = wpComponents.QueryControls;
|
|
|
|
var $ = jQuery;
|
|
var ALLOWED_MEDIA_TYPES = ['image'];
|
|
var _lodash = lodash,
|
|
pick = _lodash.pick,
|
|
get = _lodash.get;
|
|
var isBlobURL = wp.blob.isBlobURL;
|
|
|
|
var pickRelevantMediaFiles = function pickRelevantMediaFiles(image) {
|
|
var imageProps = pick(image, ['alt', 'id', 'link', 'caption', 'title', 'date', 'media_details']);
|
|
imageProps.url = get(image, ['sizes', 'large', 'url']) || get(image, ['media_details', 'sizes', 'large', 'source_url']) || image.url;
|
|
return imageProps;
|
|
};
|
|
|
|
var wpmf_local_categories = [];
|
|
var wpmf_cloud_categories = [];
|
|
var ij = 0;
|
|
var space = '--';
|
|
|
|
if (typeof wpmf === "undefined") {
|
|
return;
|
|
}
|
|
|
|
$.each(wpmf.vars.wpmf_categories_order || [], function (key, id) {
|
|
var term = wpmf.vars.wpmf_categories[id];
|
|
if (typeof term !== "undefined") {
|
|
if (0 !== parseInt(term.id)) {
|
|
if (typeof term.depth === 'undefined') {
|
|
term.depth = 0;
|
|
}
|
|
|
|
if (typeof term.drive_type !== "undefined" && term.drive_type !== '') {
|
|
wpmf_cloud_categories[ij] = {
|
|
label: space.repeat(term.depth) + term.label,
|
|
value: term.id
|
|
};
|
|
} else {
|
|
wpmf_local_categories[ij] = {
|
|
label: space.repeat(term.depth) + term.label,
|
|
value: term.id
|
|
};
|
|
}
|
|
|
|
ij++;
|
|
}
|
|
}
|
|
});
|
|
|
|
var folders_length = ij;
|
|
var wpmf_categories = [].concat(wpmf_local_categories, wpmf_cloud_categories);
|
|
|
|
var WpmfDefaultTheme = function (_Component) {
|
|
_inherits(WpmfDefaultTheme, _Component);
|
|
|
|
function WpmfDefaultTheme() {
|
|
_classCallCheck(this, WpmfDefaultTheme);
|
|
|
|
return _possibleConstructorReturn(this, (WpmfDefaultTheme.__proto__ || Object.getPrototypeOf(WpmfDefaultTheme)).apply(this, arguments));
|
|
}
|
|
|
|
/**
|
|
* Un Selected image
|
|
*/
|
|
|
|
|
|
_createClass(WpmfDefaultTheme, [{
|
|
key: 'unSelectedImage',
|
|
value: function unSelectedImage(e) {
|
|
if (!$(e.target).hasClass('wpmf-gallery-image')) {
|
|
this.props.setStateImgSelectedID(0);
|
|
this.props.setStateImgInfos('', '', '');
|
|
}
|
|
}
|
|
}, {
|
|
key: 'loadImageInfos',
|
|
value: function loadImageInfos(image) {
|
|
if (this.props.selectedImageId !== image.id) {
|
|
this.props.setStateImgSelectedID(image.id);
|
|
this.props.setStateImgInfos(image.title, image.caption, image.custom_link, image.link_target);
|
|
} else {
|
|
this.props.setStateImgSelectedID();
|
|
this.props.setStateImgInfos();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var _props = this.props,
|
|
attributes = _props.attributes,
|
|
setAttributes = _props.setAttributes,
|
|
clientId = _props.clientId;
|
|
var images = attributes.images,
|
|
aspect_ratio = attributes.aspect_ratio,
|
|
columns = attributes.columns,
|
|
size = attributes.size,
|
|
img_border_radius = attributes.img_border_radius,
|
|
gutterwidth = attributes.gutterwidth,
|
|
borderStyle = attributes.borderStyle,
|
|
borderWidth = attributes.borderWidth,
|
|
borderColor = attributes.borderColor,
|
|
hoverShadowH = attributes.hoverShadowH,
|
|
hoverShadowV = attributes.hoverShadowV,
|
|
hoverShadowBlur = attributes.hoverShadowBlur,
|
|
hoverShadowSpread = attributes.hoverShadowSpread,
|
|
hoverShadowColor = attributes.hoverShadowColor;
|
|
|
|
|
|
return React.createElement(
|
|
'div',
|
|
{ className: 'wpmf-gallery-block wpmfDefault', onClick: this.unSelectedImage.bind(this) },
|
|
React.createElement(
|
|
'style',
|
|
null,
|
|
borderStyle !== 'none' && '#block-' + clientId + ' .wpmf-gallery-block ul li img {border: ' + borderColor + ' ' + borderWidth + 'px ' + borderStyle + ';}',
|
|
(parseInt(hoverShadowH) !== 0 || parseInt(hoverShadowV) !== 0 || parseInt(hoverShadowBlur) !== 0 || parseInt(hoverShadowSpread) !== 0) && '#block-' + clientId + ' .wpmf-gallery-block ul li:hover img {box-shadow: ' + hoverShadowH + 'px ' + hoverShadowV + 'px ' + hoverShadowBlur + 'px ' + hoverShadowSpread + 'px ' + hoverShadowColor + ';}'
|
|
),
|
|
React.createElement(
|
|
'ul',
|
|
{
|
|
className: 'wpmf-gallery-list-items gallery-columns-' + columns + ' ratio_' + aspect_ratio + ' wpmf-has-border-radius-' + img_border_radius + ' wpmf-has-gutter-width-' + gutterwidth },
|
|
images.map(function (image, index) {
|
|
var url = '';
|
|
if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined") {
|
|
url = image.media_details.sizes[size].source_url;
|
|
} else if (typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined") {
|
|
url = image.sizes[size].url;
|
|
} else {
|
|
url = image.url;
|
|
}
|
|
|
|
if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined" || typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined" || typeof image.url !== "undefined") {
|
|
return React.createElement(
|
|
'li',
|
|
{
|
|
className: isBlobURL(url) ? "wpmf-gallery-block-item is-transient" : "wpmf-gallery-block-item ",
|
|
key: index },
|
|
React.createElement(
|
|
'div',
|
|
{ className: _this2.props.selectedImageId === image.id ? 'wpmf-gallery-block-item-infos is-selected' : 'wpmf-gallery-block-item-infos' },
|
|
_this2.props.gallery_loading && React.createElement(
|
|
'span',
|
|
{
|
|
className: 'spinner wpmf_spiner_block_gallery_loading' },
|
|
' '
|
|
),
|
|
React.createElement(
|
|
'div',
|
|
{ className: 'square_thumbnail' },
|
|
React.createElement(
|
|
'div',
|
|
{ 'class': 'img_centered' },
|
|
React.createElement('img', {
|
|
src: url,
|
|
className: 'wpmf-gallery-image',
|
|
onClick: _this2.loadImageInfos.bind(_this2, image)
|
|
})
|
|
)
|
|
),
|
|
isBlobURL(url) && React.createElement(
|
|
'span',
|
|
{ className: 'spinner' },
|
|
' '
|
|
),
|
|
React.createElement(
|
|
Tooltip,
|
|
{ text: wpmf.l18n.remove_image },
|
|
React.createElement(Button, {
|
|
className: 'wpmf-gallery-block-item-remove',
|
|
icon: 'no',
|
|
onClick: function onClick() {
|
|
_this2.props.setStateImgInfos(0, '', '');
|
|
setAttributes({
|
|
images: images.filter(function (img, i) {
|
|
return i !== index;
|
|
}),
|
|
image_sortable: images.filter(function (img, i) {
|
|
return i !== index;
|
|
}),
|
|
wpmf_autoinsert: '0'
|
|
});
|
|
}
|
|
})
|
|
)
|
|
)
|
|
);
|
|
}
|
|
})
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
|
|
return WpmfDefaultTheme;
|
|
}(Component);
|
|
|
|
var WpmfSliderTheme = function (_Component2) {
|
|
_inherits(WpmfSliderTheme, _Component2);
|
|
|
|
function WpmfSliderTheme() {
|
|
_classCallCheck(this, WpmfSliderTheme);
|
|
|
|
return _possibleConstructorReturn(this, (WpmfSliderTheme.__proto__ || Object.getPrototypeOf(WpmfSliderTheme)).apply(this, arguments));
|
|
}
|
|
|
|
_createClass(WpmfSliderTheme, [{
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
var attributes = this.props.attributes;
|
|
|
|
if (attributes.images.length) {
|
|
this.initSlider();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate(prevProps) {
|
|
// Deselect images when deselecting the block
|
|
var _props2 = this.props,
|
|
attributes = _props2.attributes,
|
|
clientId = _props2.clientId;
|
|
|
|
if (attributes.images.length && !(prevProps.attributes.aspect_ratio === attributes.aspect_ratio && prevProps.attributes.align === attributes.align && prevProps.attributes.gutterwidth === attributes.gutterwidth && prevProps.attributes.size === attributes.size && prevProps.attributes.columns === attributes.columns && prevProps.attributes.wpmf_orderby === attributes.wpmf_orderby && prevProps.attributes.wpmf_order === attributes.wpmf_order && JSON.stringify(prevProps.attributes.images) === JSON.stringify(attributes.images))) {
|
|
this.initSlider(true);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* run masonry layout
|
|
*/
|
|
|
|
}, {
|
|
key: 'initSlider',
|
|
value: function initSlider() {
|
|
var reload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
var _props3 = this.props,
|
|
attributes = _props3.attributes,
|
|
clientId = _props3.clientId;
|
|
var columns = attributes.columns,
|
|
autoplay = attributes.autoplay;
|
|
|
|
var $slider_container = $('#block-' + clientId + ' .wpmfslick');
|
|
if ($slider_container.is(':hidden')) {
|
|
return;
|
|
}
|
|
|
|
if ($slider_container.hasClass('slick-initialized') || reload) {
|
|
$slider_container.slick('unslick');
|
|
}
|
|
|
|
setTimeout(function () {
|
|
var slick_args = {
|
|
infinite: true,
|
|
slidesToShow: parseInt(columns),
|
|
slidesToScroll: parseInt(columns),
|
|
pauseOnHover: true,
|
|
autoplay: autoplay === 1,
|
|
adaptiveHeight: parseInt(columns) === 1,
|
|
autoplaySpeed: 5000,
|
|
rows: 1,
|
|
dots: true,
|
|
fade: false,
|
|
responsive: [{
|
|
breakpoint: 1024,
|
|
settings: {
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3,
|
|
infinite: true,
|
|
dots: true
|
|
}
|
|
}, {
|
|
breakpoint: 600,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 2
|
|
}
|
|
}, {
|
|
breakpoint: 480,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1
|
|
}
|
|
}]
|
|
};
|
|
|
|
if (!$slider_container.hasClass('slick-initialized')) {
|
|
$slider_container.slick(slick_args);
|
|
}
|
|
}, 200);
|
|
}
|
|
|
|
/**
|
|
* Un Selected image
|
|
*/
|
|
|
|
}, {
|
|
key: 'unSelectedImage',
|
|
value: function unSelectedImage(e) {
|
|
if (!$(e.target).hasClass('wpmf-gallery-image')) {
|
|
this.props.setStateImgSelectedID(0);
|
|
this.props.setStateImgInfos('', '', '');
|
|
}
|
|
}
|
|
}, {
|
|
key: 'loadImageInfos',
|
|
value: function loadImageInfos(image) {
|
|
if (this.props.selectedImageId !== image.id) {
|
|
this.props.setStateImgSelectedID(image.id);
|
|
this.props.setStateImgInfos(image.title, image.caption, image.custom_link, image.link_target);
|
|
} else {
|
|
this.props.setStateImgSelectedID();
|
|
this.props.setStateImgInfos();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var _props4 = this.props,
|
|
attributes = _props4.attributes,
|
|
setAttributes = _props4.setAttributes,
|
|
clientId = _props4.clientId;
|
|
var images = attributes.images,
|
|
aspect_ratio = attributes.aspect_ratio,
|
|
columns = attributes.columns,
|
|
size = attributes.size,
|
|
crop_image = attributes.crop_image,
|
|
img_border_radius = attributes.img_border_radius,
|
|
gutterwidth = attributes.gutterwidth,
|
|
borderStyle = attributes.borderStyle,
|
|
borderWidth = attributes.borderWidth,
|
|
borderColor = attributes.borderColor,
|
|
hoverShadowH = attributes.hoverShadowH,
|
|
hoverShadowV = attributes.hoverShadowV,
|
|
hoverShadowBlur = attributes.hoverShadowBlur,
|
|
hoverShadowSpread = attributes.hoverShadowSpread,
|
|
hoverShadowColor = attributes.hoverShadowColor;
|
|
|
|
return React.createElement(
|
|
'div',
|
|
{ className: 'wpmf-gallery-block wpmf-has-columns-' + columns + ' wpmf-slick-crop-' + (parseInt(columns) === 1 ? 0 : crop_image) + ' wpmf-has-gutter-width-' + gutterwidth + ' wpmf-has-border-radius-' + img_border_radius, onClick: this.unSelectedImage.bind(this) },
|
|
React.createElement(
|
|
'style',
|
|
null,
|
|
borderStyle !== 'none' && '#block-' + clientId + ' .wpmf-gallery-block ul li img {border: ' + borderColor + ' ' + borderWidth + 'px ' + borderStyle + ';}',
|
|
(parseInt(hoverShadowH) !== 0 || parseInt(hoverShadowV) !== 0 || parseInt(hoverShadowBlur) !== 0 || parseInt(hoverShadowSpread) !== 0) && '#block-' + clientId + ' .wpmf-gallery-block ul li:hover img {box-shadow: ' + hoverShadowH + 'px ' + hoverShadowV + 'px ' + hoverShadowBlur + 'px ' + hoverShadowSpread + 'px ' + hoverShadowColor + ';}'
|
|
),
|
|
React.createElement(
|
|
'ul',
|
|
{
|
|
className: 'wpmf-gallery-list-items wpmfslick ratio_' + aspect_ratio },
|
|
images.map(function (image, index) {
|
|
var url = '';
|
|
if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined") {
|
|
url = image.media_details.sizes[size].source_url;
|
|
} else if (typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined") {
|
|
url = image.sizes[size].url;
|
|
} else {
|
|
url = image.url;
|
|
}
|
|
|
|
if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined" || typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined" || typeof image.url !== "undefined") {
|
|
return React.createElement(
|
|
'li',
|
|
{
|
|
className: isBlobURL(url) ? "wpmf-gallery-block-item is-transient" : "wpmf-gallery-block-item ",
|
|
key: index },
|
|
React.createElement(
|
|
'div',
|
|
{ className: _this4.props.selectedImageId === image.id ? 'wpmf-gallery-block-item-infos is-selected' : 'wpmf-gallery-block-item-infos' },
|
|
_this4.props.gallery_loading && React.createElement(
|
|
'span',
|
|
{
|
|
className: 'spinner wpmf_spiner_block_gallery_loading' },
|
|
' '
|
|
),
|
|
React.createElement(
|
|
'a',
|
|
{ className: 'square_thumbnail' },
|
|
React.createElement(
|
|
'div',
|
|
{ className: 'img_centered' },
|
|
React.createElement('img', {
|
|
src: url,
|
|
className: 'wpmf-gallery-image',
|
|
onClick: _this4.loadImageInfos.bind(_this4, image)
|
|
})
|
|
)
|
|
),
|
|
isBlobURL(url) && React.createElement(
|
|
'span',
|
|
{ className: 'spinner' },
|
|
' '
|
|
),
|
|
React.createElement(
|
|
Tooltip,
|
|
{ text: wpmf.l18n.remove_image },
|
|
React.createElement(Button, {
|
|
className: 'wpmf-gallery-block-item-remove',
|
|
icon: 'no',
|
|
onClick: function onClick() {
|
|
var $slider_container = $('#block-' + clientId + ' .wpmfslick');
|
|
if ($slider_container.hasClass('slick-initialized')) {
|
|
$slider_container.slick('unslick');
|
|
}
|
|
_this4.props.setStateImgInfos(0, '', '');
|
|
setAttributes({
|
|
images: images.filter(function (img, i) {
|
|
return i !== index;
|
|
}),
|
|
image_sortable: images.filter(function (img, i) {
|
|
return i !== index;
|
|
}),
|
|
wpmf_autoinsert: '0'
|
|
});
|
|
}
|
|
})
|
|
)
|
|
)
|
|
);
|
|
}
|
|
})
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
|
|
return WpmfSliderTheme;
|
|
}(Component);
|
|
|
|
var WpmfMasonryTheme = function (_Component3) {
|
|
_inherits(WpmfMasonryTheme, _Component3);
|
|
|
|
function WpmfMasonryTheme() {
|
|
_classCallCheck(this, WpmfMasonryTheme);
|
|
|
|
return _possibleConstructorReturn(this, (WpmfMasonryTheme.__proto__ || Object.getPrototypeOf(WpmfMasonryTheme)).apply(this, arguments));
|
|
}
|
|
|
|
_createClass(WpmfMasonryTheme, [{
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
var attributes = this.props.attributes;
|
|
|
|
if (attributes.images.length) {
|
|
this.initMasonry();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate(prevProps) {
|
|
// Deselect images when deselecting the block
|
|
var attributes = this.props.attributes;
|
|
|
|
if (attributes.images.length && !(prevProps.attributes.size === attributes.size && prevProps.attributes.columns === attributes.columns && prevProps.attributes.wpmf_orderby === attributes.wpmf_orderby && prevProps.attributes.align === attributes.align && prevProps.attributes.wpmf_order === attributes.wpmf_order && JSON.stringify(prevProps.attributes.images) === JSON.stringify(attributes.images))) {
|
|
this.initMasonry();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* run masonry layout
|
|
*/
|
|
|
|
}, {
|
|
key: 'initMasonry',
|
|
value: function initMasonry() {
|
|
var _props5 = this.props,
|
|
attributes = _props5.attributes,
|
|
clientId = _props5.clientId;
|
|
|
|
var $container = $('#block-' + clientId + ' .wpmf-gallery-list-items');
|
|
if ($container.is(':hidden')) {
|
|
return;
|
|
}
|
|
|
|
if ($container.hasClass('masonry')) {
|
|
$container.masonry('destroy');
|
|
}
|
|
|
|
imagesLoaded($container, function () {
|
|
$container.masonry({
|
|
itemSelector: '.wpmf-gallery-block-item',
|
|
gutter: 0,
|
|
transitionDuration: 0,
|
|
percentPosition: true
|
|
});
|
|
$container.css('visibility', 'visible');
|
|
$container.addClass('masonry');
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Un Selected image
|
|
*/
|
|
|
|
}, {
|
|
key: 'unSelectedImage',
|
|
value: function unSelectedImage(e) {
|
|
if (!$(e.target).hasClass('wpmf-gallery-image')) {
|
|
this.props.setStateImgSelectedID(0);
|
|
this.props.setStateImgInfos('', '', '');
|
|
}
|
|
}
|
|
}, {
|
|
key: 'loadImageInfos',
|
|
value: function loadImageInfos(image) {
|
|
if (this.props.selectedImageId !== image.id) {
|
|
this.props.setStateImgSelectedID(image.id);
|
|
this.props.setStateImgInfos(image.title, image.caption, image.custom_link, image.link_target);
|
|
} else {
|
|
this.props.setStateImgSelectedID();
|
|
this.props.setStateImgInfos();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this6 = this;
|
|
|
|
var _props6 = this.props,
|
|
attributes = _props6.attributes,
|
|
setAttributes = _props6.setAttributes,
|
|
clientId = _props6.clientId;
|
|
var images = attributes.images,
|
|
columns = attributes.columns,
|
|
size = attributes.size,
|
|
img_border_radius = attributes.img_border_radius,
|
|
gutterwidth = attributes.gutterwidth,
|
|
borderStyle = attributes.borderStyle,
|
|
borderWidth = attributes.borderWidth,
|
|
borderColor = attributes.borderColor,
|
|
hoverShadowH = attributes.hoverShadowH,
|
|
hoverShadowV = attributes.hoverShadowV,
|
|
hoverShadowBlur = attributes.hoverShadowBlur,
|
|
hoverShadowSpread = attributes.hoverShadowSpread,
|
|
hoverShadowColor = attributes.hoverShadowColor,
|
|
align = attributes.align;
|
|
|
|
return React.createElement(
|
|
'div',
|
|
{ className: 'wpmf-gallery-block wpmfBlockMasonry', onClick: this.unSelectedImage.bind(this) },
|
|
React.createElement(
|
|
'style',
|
|
null,
|
|
borderStyle !== 'none' && '#block-' + clientId + ' .wpmf-gallery-block ul li img {border: ' + borderColor + ' ' + borderWidth + 'px ' + borderStyle + ';}',
|
|
(parseInt(hoverShadowH) !== 0 || parseInt(hoverShadowV) !== 0 || parseInt(hoverShadowBlur) !== 0 || parseInt(hoverShadowSpread) !== 0) && '#block-' + clientId + ' .wpmf-gallery-block ul li:hover img {box-shadow: ' + hoverShadowH + 'px ' + hoverShadowV + 'px ' + hoverShadowBlur + 'px ' + hoverShadowSpread + 'px ' + hoverShadowColor + ';}'
|
|
),
|
|
React.createElement(
|
|
'ul',
|
|
{
|
|
className: 'wpmf-gallery-list-items gallery-columns-' + columns + ' wpmf-has-border-radius-' + img_border_radius + ' wpmf-has-gutter-width-' + gutterwidth },
|
|
images.map(function (image, index) {
|
|
var url = '';
|
|
if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined") {
|
|
url = image.media_details.sizes[size].source_url;
|
|
} else if (typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined") {
|
|
url = image.sizes[size].url;
|
|
} else {
|
|
url = image.url;
|
|
}
|
|
|
|
if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined" || typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined" || typeof image.url !== "undefined") {
|
|
return React.createElement(
|
|
'li',
|
|
{
|
|
className: isBlobURL(url) ? "wpmf-gallery-block-item is-transient" : "wpmf-gallery-block-item ",
|
|
key: index },
|
|
React.createElement(
|
|
'div',
|
|
{ className: _this6.props.selectedImageId === image.id ? 'wpmf-gallery-block-item-infos is-selected' : 'wpmf-gallery-block-item-infos' },
|
|
_this6.props.gallery_loading && React.createElement(
|
|
'span',
|
|
{
|
|
className: 'spinner wpmf_spiner_block_gallery_loading' },
|
|
' '
|
|
),
|
|
React.createElement('img', {
|
|
src: url,
|
|
className: 'wpmf-gallery-image',
|
|
onClick: _this6.loadImageInfos.bind(_this6, image)
|
|
}),
|
|
isBlobURL(url) && React.createElement(
|
|
'span',
|
|
{ className: 'spinner' },
|
|
' '
|
|
),
|
|
React.createElement(
|
|
Tooltip,
|
|
{ text: wpmf.l18n.remove_image },
|
|
React.createElement(Button, {
|
|
className: 'wpmf-gallery-block-item-remove',
|
|
icon: 'no',
|
|
onClick: function onClick() {
|
|
_this6.props.setStateImgInfos(0, '', '');
|
|
setAttributes({
|
|
images: images.filter(function (img, i) {
|
|
return i !== index;
|
|
}),
|
|
image_sortable: images.filter(function (img, i) {
|
|
return i !== index;
|
|
}),
|
|
wpmf_autoinsert: '0'
|
|
});
|
|
}
|
|
})
|
|
)
|
|
)
|
|
);
|
|
}
|
|
})
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
|
|
return WpmfMasonryTheme;
|
|
}(Component);
|
|
|
|
var WpmfPortfolioTheme = function (_Component4) {
|
|
_inherits(WpmfPortfolioTheme, _Component4);
|
|
|
|
function WpmfPortfolioTheme() {
|
|
_classCallCheck(this, WpmfPortfolioTheme);
|
|
|
|
return _possibleConstructorReturn(this, (WpmfPortfolioTheme.__proto__ || Object.getPrototypeOf(WpmfPortfolioTheme)).apply(this, arguments));
|
|
}
|
|
|
|
_createClass(WpmfPortfolioTheme, [{
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
var attributes = this.props.attributes;
|
|
|
|
if (attributes.images.length) {
|
|
//this.initMasonry();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* run masonry layout
|
|
*/
|
|
|
|
}, {
|
|
key: 'initMasonry',
|
|
value: function initMasonry() {
|
|
var _props7 = this.props,
|
|
attributes = _props7.attributes,
|
|
clientId = _props7.clientId;
|
|
|
|
var $container = $('#block-' + clientId + ' .wpmf-gallery-list-items');
|
|
if ($container.is(':hidden')) {
|
|
return;
|
|
}
|
|
|
|
if ($container.hasClass('masonry')) {
|
|
$container.masonry('destroy');
|
|
}
|
|
|
|
imagesLoaded($container, function () {
|
|
$container.masonry({
|
|
itemSelector: '.wpmf-gallery-block-item',
|
|
gutter: 0,
|
|
transitionDuration: 0,
|
|
percentPosition: true
|
|
});
|
|
$container.css('visibility', 'visible');
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Un Selected image
|
|
*/
|
|
|
|
}, {
|
|
key: 'unSelectedImage',
|
|
value: function unSelectedImage(e) {
|
|
if (!$(e.target).hasClass('wpmf-gallery-image') && !$(e.target).hasClass('wpmf_overlay')) {
|
|
this.props.setStateImgSelectedID(0);
|
|
this.props.setStateImgInfos('', '', '');
|
|
}
|
|
}
|
|
}, {
|
|
key: 'loadImageInfos',
|
|
value: function loadImageInfos(image) {
|
|
if (this.props.selectedImageId !== image.id) {
|
|
this.props.setStateImgSelectedID(image.id);
|
|
this.props.setStateImgInfos(image.title, image.caption, image.custom_link, image.link_target);
|
|
} else {
|
|
this.props.setStateImgSelectedID();
|
|
this.props.setStateImgInfos();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this8 = this;
|
|
|
|
var _props8 = this.props,
|
|
attributes = _props8.attributes,
|
|
setAttributes = _props8.setAttributes,
|
|
clientId = _props8.clientId;
|
|
var images = attributes.images,
|
|
aspect_ratio = attributes.aspect_ratio,
|
|
columns = attributes.columns,
|
|
size = attributes.size,
|
|
img_border_radius = attributes.img_border_radius,
|
|
gutterwidth = attributes.gutterwidth,
|
|
borderStyle = attributes.borderStyle,
|
|
borderWidth = attributes.borderWidth,
|
|
borderColor = attributes.borderColor,
|
|
hoverShadowH = attributes.hoverShadowH,
|
|
hoverShadowV = attributes.hoverShadowV,
|
|
hoverShadowBlur = attributes.hoverShadowBlur,
|
|
hoverShadowSpread = attributes.hoverShadowSpread,
|
|
hoverShadowColor = attributes.hoverShadowColor;
|
|
|
|
return React.createElement(
|
|
'div',
|
|
{ className: 'wpmf-gallery-block wpmfBlockMasonry', onClick: this.unSelectedImage.bind(this) },
|
|
React.createElement(
|
|
'style',
|
|
null,
|
|
borderStyle !== 'none' && '#block-' + clientId + ' .wpmf-gallery-block ul li img {border: ' + borderColor + ' ' + borderWidth + 'px ' + borderStyle + ';}',
|
|
(parseInt(hoverShadowH) !== 0 || parseInt(hoverShadowV) !== 0 || parseInt(hoverShadowBlur) !== 0 || parseInt(hoverShadowSpread) !== 0) && '#block-' + clientId + ' .wpmf-gallery-block ul li:hover img {box-shadow: ' + hoverShadowH + 'px ' + hoverShadowV + 'px ' + hoverShadowBlur + 'px ' + hoverShadowSpread + 'px ' + hoverShadowColor + ';}'
|
|
),
|
|
React.createElement(
|
|
'ul',
|
|
{
|
|
className: 'wpmf-gallery-list-items ratio_' + aspect_ratio + ' gallery-columns-' + columns + ' wpmf-has-border-radius-' + img_border_radius + ' wpmf-has-gutter-width-' + gutterwidth },
|
|
images.map(function (image, index) {
|
|
var url = '';
|
|
if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined") {
|
|
url = image.media_details.sizes[size].source_url;
|
|
} else if (typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined") {
|
|
url = image.sizes[size].url;
|
|
} else {
|
|
url = image.url;
|
|
}
|
|
|
|
if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined" || typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined" || typeof image.url !== "undefined") {
|
|
return React.createElement(
|
|
'li',
|
|
{
|
|
className: isBlobURL(url) ? "wpmf-gallery-block-item is-transient" : "wpmf-gallery-block-item ",
|
|
key: index },
|
|
React.createElement(
|
|
'div',
|
|
{ className: _this8.props.selectedImageId === image.id ? 'wpmf-gallery-block-item-infos is-selected' : 'wpmf-gallery-block-item-infos' },
|
|
_this8.props.gallery_loading && React.createElement(
|
|
'span',
|
|
{
|
|
className: 'spinner wpmf_spiner_block_gallery_loading' },
|
|
' '
|
|
),
|
|
React.createElement(
|
|
'div',
|
|
{ onClick: function onClick() {
|
|
return _this8.loadImageInfos(image);
|
|
}, className: 'wpmf_overlay' },
|
|
' '
|
|
),
|
|
React.createElement(
|
|
'div',
|
|
{ className: 'portfolio_lightbox', title: image.title },
|
|
'+'
|
|
),
|
|
React.createElement(
|
|
'a',
|
|
{ className: 'square_thumbnail' },
|
|
React.createElement(
|
|
'div',
|
|
{ className: 'img_centered' },
|
|
React.createElement('img', {
|
|
src: url,
|
|
className: 'wpmf-gallery-image'
|
|
})
|
|
)
|
|
),
|
|
isBlobURL(url) && React.createElement(
|
|
'span',
|
|
{ className: 'spinner' },
|
|
' '
|
|
),
|
|
React.createElement(
|
|
Tooltip,
|
|
{ text: wpmf.l18n.remove_image },
|
|
React.createElement(Button, {
|
|
className: 'wpmf-gallery-block-item-remove',
|
|
icon: 'no',
|
|
onClick: function onClick() {
|
|
_this8.props.setStateImgInfos(0, '', '');
|
|
setAttributes({
|
|
images: images.filter(function (img, i) {
|
|
return i !== index;
|
|
}),
|
|
image_sortable: images.filter(function (img, i) {
|
|
return i !== index;
|
|
}),
|
|
wpmf_autoinsert: '0'
|
|
});
|
|
}
|
|
})
|
|
)
|
|
),
|
|
React.createElement(
|
|
'div',
|
|
{ className: 'wpmf-caption-text wpmf-gallery-caption' },
|
|
image.title !== '' && React.createElement(
|
|
'span',
|
|
{ className: 'title' },
|
|
image.title
|
|
),
|
|
image.caption !== '' && React.createElement(
|
|
'span',
|
|
{ className: 'excerpt' },
|
|
image.caption
|
|
)
|
|
)
|
|
);
|
|
}
|
|
})
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
|
|
return WpmfPortfolioTheme;
|
|
}(Component);
|
|
|
|
var wpmfWordpressGallery = function (_Component5) {
|
|
_inherits(wpmfWordpressGallery, _Component5);
|
|
|
|
function wpmfWordpressGallery() {
|
|
_classCallCheck(this, wpmfWordpressGallery);
|
|
|
|
var _this9 = _possibleConstructorReturn(this, (wpmfWordpressGallery.__proto__ || Object.getPrototypeOf(wpmfWordpressGallery)).apply(this, arguments));
|
|
|
|
_this9.state = {
|
|
inited: false,
|
|
uploaded: false,
|
|
gallery_loading: false,
|
|
selectedImageId: 0,
|
|
selectedImageInfos: {
|
|
title: '',
|
|
caption: '',
|
|
custom_link: '',
|
|
link_target: '_self'
|
|
}
|
|
};
|
|
_this9.addFiles = _this9.addFiles.bind(_this9);
|
|
_this9.uploadFromFiles = _this9.uploadFromFiles.bind(_this9);
|
|
return _this9;
|
|
}
|
|
|
|
_createClass(wpmfWordpressGallery, [{
|
|
key: 'componentWillMount',
|
|
value: function componentWillMount() {
|
|
var _this10 = this;
|
|
|
|
var _props9 = this.props,
|
|
attributes = _props9.attributes,
|
|
setAttributes = _props9.setAttributes;
|
|
var images = attributes.images,
|
|
image_sortable = attributes.image_sortable,
|
|
display = attributes.display,
|
|
wpmf_autoinsert = attributes.wpmf_autoinsert,
|
|
wpmf_folder_id = attributes.wpmf_folder_id;
|
|
|
|
var currentBlockConfig = wpmf_blocks.vars.gallery_configs.theme[display + '_theme'];
|
|
// No override attributes of blocks inserted before
|
|
if (!attributes.changed) {
|
|
if ((typeof currentBlockConfig === 'undefined' ? 'undefined' : _typeof(currentBlockConfig)) === 'object' && currentBlockConfig !== null) {
|
|
Object.keys(currentBlockConfig).map(function (attribute) {
|
|
if (attribute === 'orderby' || attribute === 'order') {
|
|
attributes['wpmf_' + attribute] = currentBlockConfig[attribute];
|
|
} else {
|
|
attributes[attribute] = currentBlockConfig[attribute];
|
|
}
|
|
});
|
|
}
|
|
|
|
// Finally set changed attribute to true, so we don't modify anything again
|
|
setAttributes({ changed: true });
|
|
}
|
|
|
|
var wpmf_orderby = attributes.wpmf_orderby,
|
|
wpmf_order = attributes.wpmf_order;
|
|
|
|
if (wpmf_folder_id.length && parseInt(wpmf_autoinsert) === 1) {
|
|
this.loadImagesFromFolder(wpmf_folder_id, wpmf_orderby, wpmf_order);
|
|
} else {
|
|
var imgsId = images.map(function (img) {
|
|
return img.id;
|
|
});
|
|
this.setState({ gallery_loading: true });
|
|
fetch(wpmf_blocks.vars.ajaxurl + ('?action=gallery_block_load_image_infos&ids=' + imgsId.join() + '&wpmf_nonce=' + wpmf_blocks.vars.wpmf_nonce)).then(function (res) {
|
|
return res.json();
|
|
}).then(function (result) {
|
|
if (result.status) {
|
|
images.map(function (img) {
|
|
img.title = result.titles[img.id];
|
|
img.caption = result.captions[img.id];
|
|
img.custom_link = result.custom_links[img.id];
|
|
img.link_target = result.link_targets[img.id];
|
|
return img;
|
|
});
|
|
|
|
image_sortable.map(function (img) {
|
|
img.title = result.titles[img.id];
|
|
img.caption = result.captions[img.id];
|
|
img.custom_link = result.custom_links[img.id];
|
|
img.link_target = result.link_targets[img.id];
|
|
return img;
|
|
});
|
|
_this10.setState({ gallery_loading: false });
|
|
}
|
|
},
|
|
// errors
|
|
function (error) {});
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
var _props10 = this.props,
|
|
attributes = _props10.attributes,
|
|
setAttributes = _props10.setAttributes;
|
|
|
|
if (nextProps.attributes.display !== attributes.display) {
|
|
// set default settings by theme
|
|
var currentBlockConfig = wpmf_blocks.vars.gallery_configs.theme[nextProps.attributes.display + '_theme'];
|
|
if ((typeof currentBlockConfig === 'undefined' ? 'undefined' : _typeof(currentBlockConfig)) === 'object' && currentBlockConfig !== null) {
|
|
Object.keys(currentBlockConfig).map(function (attribute) {
|
|
if (attribute === 'orderby' || attribute === 'order') {
|
|
nextProps.attributes['wpmf_' + attribute] = currentBlockConfig[attribute];
|
|
} else {
|
|
nextProps.attributes[attribute] = currentBlockConfig[attribute];
|
|
}
|
|
});
|
|
setAttributes(nextProps.attributes);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate(prevProps) {
|
|
// Deselect images when deselecting the block
|
|
var _props11 = this.props,
|
|
attributes = _props11.attributes,
|
|
setAttributes = _props11.setAttributes,
|
|
isSelected = _props11.isSelected;
|
|
|
|
if (!isSelected && prevProps.isSelected) {
|
|
this.setStateImgSelectedID();
|
|
this.setStateImgInfos();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'loadImagesFromFolder',
|
|
value: function loadImagesFromFolder(folders, orderby, order) {
|
|
var _this11 = this;
|
|
|
|
var _props12 = this.props,
|
|
attributes = _props12.attributes,
|
|
setAttributes = _props12.setAttributes,
|
|
clientId = _props12.clientId;
|
|
var images = attributes.images;
|
|
|
|
this.setState({ gallery_loading: true });
|
|
fetch(wpmf_blocks.vars.ajaxurl + ('?action=wpmf_gallery_from_folder&ids=' + folders.join() + '&orderby=' + orderby + '&order=' + order + '&wpmf_nonce=' + wpmf_blocks.vars.wpmf_nonce)).then(function (res) {
|
|
return res.json();
|
|
}).then(function (result) {
|
|
if (result.status) {
|
|
var allImages = result.images;
|
|
_this11.setState({ gallery_loading: false });
|
|
if (JSON.stringify(images) !== JSON.stringify(result.images)) {
|
|
setAttributes({
|
|
images: allImages,
|
|
image_sortable: allImages
|
|
});
|
|
}
|
|
|
|
if (!allImages.length) {
|
|
if (!$('#block-' + clientId + ' .wpmf_gallery_img_msg').length) {
|
|
$('#block-' + clientId + ' .wpmf_select_folders').after('<span class="wpmf_gallery_img_msg">' + wpmf.l18n.folder_no_image + '</span>');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Do sort image
|
|
*/
|
|
|
|
}, {
|
|
key: 'doSort',
|
|
value: function doSort(wpmf_orderby, wpmf_order) {
|
|
var imgs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
var _props13 = this.props,
|
|
attributes = _props13.attributes,
|
|
setAttributes = _props13.setAttributes;
|
|
var images = attributes.images,
|
|
image_sortable = attributes.image_sortable;
|
|
|
|
var images_ordered = void 0;
|
|
// Order images
|
|
switch (wpmf_orderby) {
|
|
default:
|
|
case 'title':
|
|
if (wpmf_order === 'DESC') {
|
|
images_ordered = [].concat(images).sort(function (a, b) {
|
|
if (typeof a.title !== "undefined" && typeof b.title !== "undefined") {
|
|
return b.title.localeCompare(a.title);
|
|
} else {
|
|
return b.url.localeCompare(a.url);
|
|
}
|
|
});
|
|
} else {
|
|
images_ordered = [].concat(images).sort(function (a, b) {
|
|
if (typeof a.title !== "undefined" && typeof b.title !== "undefined") {
|
|
return a.title.localeCompare(b.title);
|
|
} else {
|
|
return a.url.localeCompare(b.url);
|
|
}
|
|
});
|
|
}
|
|
|
|
setAttributes({
|
|
wpmf_orderby: wpmf_orderby,
|
|
wpmf_order: wpmf_order,
|
|
images: images_ordered
|
|
});
|
|
|
|
break;
|
|
case 'date':
|
|
if (wpmf_order === 'DESC') {
|
|
images_ordered = [].concat(images).sort(function (a, b) {
|
|
return new Date(b.id).getTime() - new Date(a.id).getTime();
|
|
});
|
|
} else {
|
|
images_ordered = [].concat(images).sort(function (a, b) {
|
|
return new Date(a.id).getTime() - new Date(b.id).getTime();
|
|
});
|
|
}
|
|
|
|
setAttributes({
|
|
wpmf_orderby: wpmf_orderby,
|
|
wpmf_order: wpmf_order,
|
|
images: images_ordered
|
|
});
|
|
break;
|
|
case 'post__in':
|
|
setAttributes({
|
|
wpmf_orderby: wpmf_orderby,
|
|
wpmf_order: wpmf_order,
|
|
images: imgs
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Set images orderby
|
|
*/
|
|
|
|
}, {
|
|
key: 'sortImageOrderBy',
|
|
value: function sortImageOrderBy(value) {
|
|
var attributes = this.props.attributes;
|
|
var wpmf_order = attributes.wpmf_order;
|
|
|
|
this.doSort(value, wpmf_order);
|
|
}
|
|
|
|
/**
|
|
* Set images order
|
|
*/
|
|
|
|
}, {
|
|
key: 'sortImageOrder',
|
|
value: function sortImageOrder(value) {
|
|
var attributes = this.props.attributes;
|
|
var wpmf_orderby = attributes.wpmf_orderby;
|
|
|
|
this.doSort(wpmf_orderby, value);
|
|
}
|
|
}, {
|
|
key: 'setAutoInsertGallery',
|
|
value: function setAutoInsertGallery(value) {
|
|
var _props14 = this.props,
|
|
attributes = _props14.attributes,
|
|
setAttributes = _props14.setAttributes;
|
|
var wpmf_folder_id = attributes.wpmf_folder_id,
|
|
wpmf_orderby = attributes.wpmf_orderby,
|
|
wpmf_order = attributes.wpmf_order;
|
|
|
|
setAttributes({ wpmf_autoinsert: value });
|
|
if (parseInt(value) === 1 && wpmf_folder_id.length) {
|
|
this.loadImagesFromFolder(wpmf_folder_id, wpmf_orderby, wpmf_order);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'setFoldersGallery',
|
|
value: function setFoldersGallery(value, auto) {
|
|
var _props15 = this.props,
|
|
attributes = _props15.attributes,
|
|
setAttributes = _props15.setAttributes;
|
|
var wpmf_autoinsert = attributes.wpmf_autoinsert,
|
|
wpmf_orderby = attributes.wpmf_orderby,
|
|
wpmf_order = attributes.wpmf_order;
|
|
|
|
setAttributes({ wpmf_folder_id: value, wpmf_autoinsert: '1' });
|
|
if (auto) {
|
|
this.loadImagesFromFolder(value, wpmf_orderby, wpmf_order);
|
|
} else {
|
|
if (parseInt(wpmf_autoinsert) === 1) {
|
|
this.loadImagesFromFolder(value, wpmf_orderby, wpmf_order);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'setRadiusTo',
|
|
value: function setRadiusTo(value) {
|
|
var setAttributes = this.props.setAttributes;
|
|
|
|
setAttributes({ img_border_radius: value });
|
|
}
|
|
|
|
/**
|
|
* Load image infos
|
|
*/
|
|
|
|
}, {
|
|
key: 'loadImageInfos',
|
|
value: function loadImageInfos(image) {
|
|
if (this.state.selectedImageId !== image.id) {
|
|
this.setStateImgInfos(image.title, image.caption, image.custom_link, image.link_target);
|
|
}
|
|
|
|
this.setState({ selectedImageId: this.state.selectedImageId === image.id ? 0 : image.id });
|
|
}
|
|
|
|
/**
|
|
* Update image info
|
|
*/
|
|
|
|
}, {
|
|
key: 'updateImageInfos',
|
|
value: function updateImageInfos() {
|
|
var _this12 = this;
|
|
|
|
var _props16 = this.props,
|
|
attributes = _props16.attributes,
|
|
setAttributes = _props16.setAttributes;
|
|
var images = attributes.images;
|
|
|
|
$('.save_img_action span').addClass('visible');
|
|
fetch(wpmf_blocks.vars.ajaxurl + ('?action=gallery_block_update_image_infos&id=' + this.state.selectedImageId + '&title=' + this.state.selectedImageInfos.title + '&caption=' + this.state.selectedImageInfos.caption + '&custom_link=' + this.state.selectedImageInfos.custom_link + '&link_target=' + this.state.selectedImageInfos.link_target + '&wpmf_nonce=' + wpmf_blocks.vars.wpmf_nonce)).then(function (res) {
|
|
return res.json();
|
|
}).then(function (result) {
|
|
$('.save_img_action span').removeClass('visible');
|
|
if (result.status) {
|
|
images.map(function (img) {
|
|
if (img.id === _this12.state.selectedImageId) {
|
|
img.title = result.infos.title;
|
|
img.caption = result.infos.caption;
|
|
img.custom_link = result.infos.custom_link;
|
|
img.link_target = result.infos.link_target;
|
|
}
|
|
|
|
return img;
|
|
});
|
|
}
|
|
},
|
|
// errors
|
|
function (error) {
|
|
_this12.setStateImgInfos();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Un Selected image
|
|
*/
|
|
|
|
}, {
|
|
key: 'unSelectedImage',
|
|
value: function unSelectedImage(e) {
|
|
if (!$(e.target).hasClass('wpmf-gallery-image')) {
|
|
this.setStateImgSelectedID();
|
|
this.setStateImgInfos();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Select image
|
|
*/
|
|
|
|
}, {
|
|
key: 'onSelectImages',
|
|
value: function onSelectImages(imgss) {
|
|
var _props17 = this.props,
|
|
attributes = _props17.attributes,
|
|
setAttributes = _props17.setAttributes;
|
|
var images = attributes.images,
|
|
wpmf_orderby = attributes.wpmf_orderby,
|
|
wpmf_order = attributes.wpmf_order;
|
|
|
|
|
|
var imgs = imgss.map(function (img) {
|
|
return wp.media.attachment(img.id).attributes;
|
|
});
|
|
var check = false;
|
|
setAttributes({
|
|
images: imgs,
|
|
image_sortable: imgs
|
|
});
|
|
|
|
if (images.length <= imgs.length) {
|
|
if (images.length) {
|
|
images.map(function (img, index) {
|
|
if (img.id !== imgs[index].id) {
|
|
setAttributes({
|
|
wpmf_orderby: 'post__in'
|
|
});
|
|
check = true;
|
|
}
|
|
});
|
|
} else {
|
|
check = false;
|
|
}
|
|
|
|
if (!check) {
|
|
this.doSort(wpmf_orderby, wpmf_order, imgs);
|
|
}
|
|
} else {
|
|
imgs.map(function (img, index) {
|
|
if (img.id !== images[index].id) {
|
|
setAttributes({
|
|
wpmf_orderby: 'post__in'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Upload files
|
|
*/
|
|
|
|
}, {
|
|
key: 'uploadFromFiles',
|
|
value: function uploadFromFiles(event) {
|
|
this.addFiles(event.target.files);
|
|
}
|
|
|
|
/**
|
|
* Add files
|
|
*/
|
|
|
|
}, {
|
|
key: 'addFiles',
|
|
value: function addFiles(files) {
|
|
var _props18 = this.props,
|
|
attributes = _props18.attributes,
|
|
setAttributes = _props18.setAttributes;
|
|
var images = attributes.images;
|
|
|
|
mediaUpload({
|
|
allowedTypes: ALLOWED_MEDIA_TYPES,
|
|
filesList: files,
|
|
onFileChange: function onFileChange(imgs) {
|
|
var imagesNormalized = imgs.map(function (image) {
|
|
return pickRelevantMediaFiles(image);
|
|
});
|
|
|
|
setAttributes({
|
|
images: images.concat(imagesNormalized),
|
|
image_sortable: images.concat(imagesNormalized)
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: 'setStateImgInfos',
|
|
value: function setStateImgInfos() {
|
|
var title = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
var caption = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
var custom_link = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
|
|
var link_target = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '_self';
|
|
|
|
this.setState({
|
|
selectedImageInfos: {
|
|
title: title,
|
|
caption: caption,
|
|
custom_link: custom_link,
|
|
link_target: link_target
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: 'setStateImgSelectedID',
|
|
value: function setStateImgSelectedID() {
|
|
var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
|
|
this.setState({
|
|
selectedImageId: id
|
|
});
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this13 = this;
|
|
|
|
var listBorderStyles = [{ label: wpmf.l18n.none, value: 'none' }, { label: wpmf.l18n.solid, value: 'solid' }, { label: wpmf.l18n.dotted, value: 'dotted' }, { label: wpmf.l18n.dashed, value: 'dashed' }, { label: wpmf.l18n.double, value: 'double' }, { label: wpmf.l18n.groove, value: 'groove' }, { label: wpmf.l18n.ridge, value: 'ridge' }, { label: wpmf.l18n.inset, value: 'inset' }, { label: wpmf.l18n.outset, value: 'outset' }];
|
|
|
|
var _props19 = this.props,
|
|
attributes = _props19.attributes,
|
|
setAttributes = _props19.setAttributes,
|
|
className = _props19.className,
|
|
isSelected = _props19.isSelected,
|
|
clientId = _props19.clientId;
|
|
var images = attributes.images,
|
|
display = attributes.display,
|
|
aspect_ratio = attributes.aspect_ratio,
|
|
columns = attributes.columns,
|
|
size = attributes.size,
|
|
targetsize = attributes.targetsize,
|
|
link = attributes.link,
|
|
wpmf_orderby = attributes.wpmf_orderby,
|
|
wpmf_order = attributes.wpmf_order,
|
|
autoplay = attributes.autoplay,
|
|
crop_image = attributes.crop_image,
|
|
img_border_radius = attributes.img_border_radius,
|
|
borderWidth = attributes.borderWidth,
|
|
borderStyle = attributes.borderStyle,
|
|
borderColor = attributes.borderColor,
|
|
hoverShadowH = attributes.hoverShadowH,
|
|
hoverShadowV = attributes.hoverShadowV,
|
|
hoverShadowBlur = attributes.hoverShadowBlur,
|
|
hoverShadowSpread = attributes.hoverShadowSpread,
|
|
hoverShadowColor = attributes.hoverShadowColor,
|
|
gutterwidth = attributes.gutterwidth,
|
|
wpmf_autoinsert = attributes.wpmf_autoinsert,
|
|
wpmf_folder_id = attributes.wpmf_folder_id,
|
|
cover = attributes.cover,
|
|
align = attributes.align;
|
|
|
|
var list_sizes = Object.keys(wpmf_blocks.vars.sizes).map(function (key, label) {
|
|
return {
|
|
label: wpmf_blocks.vars.sizes[key],
|
|
value: key
|
|
};
|
|
});
|
|
|
|
var controls = React.createElement(
|
|
BlockControls,
|
|
null,
|
|
images.length && React.createElement(
|
|
ToolbarGroup,
|
|
null,
|
|
React.createElement(MediaUpload, {
|
|
onSelect: function onSelect(imgs) {
|
|
return _this13.onSelectImages(imgs);
|
|
},
|
|
allowedTypes: ALLOWED_MEDIA_TYPES,
|
|
multiple: true,
|
|
gallery: true,
|
|
value: images.map(function (img) {
|
|
return img.id;
|
|
}),
|
|
render: function render(_ref) {
|
|
var open = _ref.open;
|
|
return React.createElement(Button, {
|
|
className: 'components-toolbar__control',
|
|
label: wpmf.l18n.edit_gallery,
|
|
icon: 'edit',
|
|
onClick: open
|
|
});
|
|
}
|
|
})
|
|
)
|
|
);
|
|
|
|
var inspect_controls = React.createElement(
|
|
InspectorControls,
|
|
null,
|
|
this.state.selectedImageId === 0 && React.createElement(
|
|
'div',
|
|
null,
|
|
React.createElement(
|
|
PanelBody,
|
|
{ title: wpmf.l18n.gallery_settings },
|
|
React.createElement(SelectControl, {
|
|
label: wpmf.l18n.theme,
|
|
value: display,
|
|
options: [{ label: wpmf.l18n.default, value: 'default' }, { label: wpmf.l18n.masonry, value: 'masonry' }, { label: wpmf.l18n.portfolio, value: 'portfolio' }, { label: wpmf.l18n.slider, value: 'slider' }],
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ display: value });
|
|
}
|
|
}),
|
|
React.createElement(
|
|
'div',
|
|
{ className: 'wpmf_sl_gallery_folders components-base-control' },
|
|
React.createElement(
|
|
'label',
|
|
{ className: 'components-base-control__label' },
|
|
wpmf.l18n.select_folder
|
|
),
|
|
React.createElement(
|
|
'select',
|
|
{ size: folders_length, className: 'wpmf_select_folders_controll', multiple: true, onChange: function onChange() {
|
|
return _this13.setFoldersGallery($('.wpmf_select_folders_controll').val(), false);
|
|
} },
|
|
wpmf_categories.map(function (category, index) {
|
|
if (wpmf_folder_id.indexOf(category.value.toString()) !== -1) {
|
|
return React.createElement(
|
|
'option',
|
|
{ selected: true, key: index, value: category.value },
|
|
category.label
|
|
);
|
|
} else {
|
|
return React.createElement(
|
|
'option',
|
|
{ key: index, value: category.value },
|
|
category.label
|
|
);
|
|
}
|
|
})
|
|
)
|
|
),
|
|
(display === 'slider' || display === 'default' || display === 'portfolio') && React.createElement(SelectControl, {
|
|
label: __('Aspect ratio', 'wpmf'),
|
|
value: aspect_ratio,
|
|
options: [{ label: 'Default', value: 'default' }, { label: '1:1', value: '1_1' }, { label: '3:2', value: '3_2' }, { label: '2:3', value: '2_3' }, { label: '4:3', value: '4_3' }, { label: '3:4', value: '3_4' }, { label: '16:9', value: '16_9' }, { label: '9:16', value: '9_16' }, { label: '21:9', value: '21_9' }, { label: '9:21', value: '9_21' }],
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ aspect_ratio: value });
|
|
}
|
|
}),
|
|
React.createElement(SelectControl, {
|
|
label: wpmf.l18n.columns,
|
|
value: columns,
|
|
options: [{ label: 1, value: '1' }, { label: 2, value: '2' }, { label: 3, value: '3' }, { label: 4, value: '4' }, { label: 5, value: '5' }, { label: 6, value: '6' }, { label: 7, value: '7' }, { label: 8, value: '8' }, { label: 9, value: '9' }],
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ columns: value });
|
|
}
|
|
}),
|
|
React.createElement(SelectControl, {
|
|
label: wpmf.l18n.gallery_image_size,
|
|
value: size,
|
|
options: list_sizes,
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ size: value });
|
|
}
|
|
}),
|
|
display === 'slider' && React.createElement(ToggleControl, {
|
|
label: wpmf.l18n.crop_image,
|
|
checked: crop_image,
|
|
onChange: function onChange() {
|
|
return setAttributes({ crop_image: crop_image === 1 ? 0 : 1 });
|
|
}
|
|
}),
|
|
React.createElement(SelectControl, {
|
|
label: wpmf.l18n.lightbox_size,
|
|
value: targetsize,
|
|
options: list_sizes,
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ targetsize: value });
|
|
}
|
|
}),
|
|
React.createElement(SelectControl, {
|
|
label: wpmf.l18n.action_on_click,
|
|
value: link,
|
|
options: [{ label: wpmf.l18n.lightbox, value: 'file' }, { label: wpmf.l18n.attachment_page, value: 'post' }, { label: wpmf.l18n.none, value: 'none' }, { label: wpmf.l18n.custom_link, value: 'custom' }],
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ link: value });
|
|
}
|
|
}),
|
|
React.createElement(SelectControl, {
|
|
label: wpmf.l18n.orderby,
|
|
value: wpmf_orderby,
|
|
options: [{ label: wpmf.l18n.custom, value: 'post__in' }, { label: wpmf.l18n.random, value: 'rand' }, { label: wpmf.l18n.title, value: 'title' }, { label: wpmf.l18n.date, value: 'date' }],
|
|
onChange: this.sortImageOrderBy.bind(this)
|
|
}),
|
|
React.createElement(SelectControl, {
|
|
label: wpmf.l18n.order,
|
|
value: wpmf_order,
|
|
options: [{ label: wpmf.l18n.ascending, value: 'ASC' }, { label: wpmf.l18n.descending, value: 'DESC' }],
|
|
onChange: this.sortImageOrder.bind(this)
|
|
}),
|
|
React.createElement(SelectControl, {
|
|
label: wpmf.l18n.update_with_new_folder,
|
|
value: wpmf_autoinsert,
|
|
options: [{ label: wpmf.l18n.no, value: '0' }, { label: wpmf.l18n.yes, value: '1' }],
|
|
onChange: this.setAutoInsertGallery.bind(this)
|
|
}),
|
|
display === 'slider' && React.createElement(ToggleControl, {
|
|
label: wpmf.l18n.autoplay,
|
|
checked: autoplay,
|
|
onChange: function onChange() {
|
|
return setAttributes({ autoplay: autoplay === 1 ? 0 : 1 });
|
|
}
|
|
})
|
|
),
|
|
React.createElement(
|
|
PanelBody,
|
|
{ title: wpmf.l18n.border, initialOpen: false },
|
|
React.createElement(RangeControl, {
|
|
label: wpmf.l18n.border_radius,
|
|
'aria-label': wpmf.l18n.border_radius_desc,
|
|
value: img_border_radius,
|
|
onChange: this.setRadiusTo.bind(this),
|
|
min: 0,
|
|
max: 20,
|
|
step: 1
|
|
}),
|
|
React.createElement(SelectControl, {
|
|
label: wpmf.l18n.border_style,
|
|
value: borderStyle,
|
|
options: listBorderStyles,
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ borderStyle: value });
|
|
}
|
|
}),
|
|
borderStyle !== 'none' && React.createElement(
|
|
Fragment,
|
|
null,
|
|
React.createElement(PanelColorSettings, {
|
|
title: wpmf.l18n.border_color,
|
|
initialOpen: false,
|
|
colorSettings: [{
|
|
label: wpmf.l18n.border_color,
|
|
value: borderColor,
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ borderColor: value === undefined ? '#2196f3' : value });
|
|
}
|
|
}]
|
|
}),
|
|
React.createElement(RangeControl, {
|
|
label: wpmf.l18n.border_width,
|
|
value: borderWidth || 0,
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ borderWidth: value });
|
|
},
|
|
min: 0,
|
|
max: 10
|
|
})
|
|
)
|
|
),
|
|
React.createElement(
|
|
PanelBody,
|
|
{ title: wpmf.l18n.margin, initialOpen: false },
|
|
React.createElement(RangeControl, {
|
|
label: wpmf.l18n.gutter,
|
|
value: gutterwidth,
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ gutterwidth: value });
|
|
},
|
|
min: 0,
|
|
max: 100,
|
|
step: 5
|
|
})
|
|
),
|
|
React.createElement(
|
|
PanelBody,
|
|
{ title: wpmf.l18n.shadow, initialOpen: false },
|
|
React.createElement(RangeControl, {
|
|
label: wpmf.l18n.shadow_h,
|
|
value: hoverShadowH || 0,
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ hoverShadowH: value });
|
|
},
|
|
min: -50,
|
|
max: 50
|
|
}),
|
|
React.createElement(RangeControl, {
|
|
label: wpmf.l18n.shadow_v,
|
|
value: hoverShadowV || 0,
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ hoverShadowV: value });
|
|
},
|
|
min: -50,
|
|
max: 50
|
|
}),
|
|
React.createElement(RangeControl, {
|
|
label: wpmf.l18n.shadow_blur,
|
|
value: hoverShadowBlur || 0,
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ hoverShadowBlur: value });
|
|
},
|
|
min: 0,
|
|
max: 50
|
|
}),
|
|
React.createElement(RangeControl, {
|
|
label: wpmf.l18n.shadow_spread,
|
|
value: hoverShadowSpread || 0,
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ hoverShadowSpread: value });
|
|
},
|
|
min: 0,
|
|
max: 50
|
|
}),
|
|
React.createElement(PanelColorSettings, {
|
|
title: wpmf.l18n.color_settings,
|
|
initialOpen: false,
|
|
colorSettings: [{
|
|
label: wpmf.l18n.shadow_color,
|
|
value: hoverShadowColor,
|
|
onChange: function onChange(value) {
|
|
return setAttributes({ hoverShadowColor: value === undefined ? '#ccc' : value });
|
|
}
|
|
}]
|
|
})
|
|
)
|
|
),
|
|
this.state.selectedImageId !== 0 && React.createElement(
|
|
PanelBody,
|
|
{ title: wpmf.l18n.image_settings },
|
|
React.createElement(TextControl, {
|
|
label: wpmf.l18n.title,
|
|
value: this.state.selectedImageInfos.title,
|
|
onChange: function onChange(value) {
|
|
_this13.setState({
|
|
selectedImageInfos: _extends({}, _this13.state.selectedImageInfos, {
|
|
title: value
|
|
})
|
|
});
|
|
}
|
|
}),
|
|
React.createElement(TextControl, {
|
|
label: wpmf.l18n.caption,
|
|
value: this.state.selectedImageInfos.caption,
|
|
onChange: function onChange(value) {
|
|
_this13.setState({
|
|
selectedImageInfos: _extends({}, _this13.state.selectedImageInfos, {
|
|
caption: value
|
|
})
|
|
});
|
|
}
|
|
}),
|
|
React.createElement(TextControl, {
|
|
label: wpmf.l18n.custom_link,
|
|
value: this.state.selectedImageInfos.custom_link,
|
|
onChange: function onChange(value) {
|
|
_this13.setState({
|
|
selectedImageInfos: _extends({}, _this13.state.selectedImageInfos, {
|
|
custom_link: value
|
|
})
|
|
});
|
|
}
|
|
}),
|
|
React.createElement(SelectControl, {
|
|
label: wpmf.l18n.link_target,
|
|
value: this.state.selectedImageInfos.link_target,
|
|
options: [{ label: wpmf.l18n.same_window, value: '_self' }, { label: wpmf.l18n.new_window, value: '_blank' }],
|
|
onChange: function onChange(value) {
|
|
_this13.setState({
|
|
selectedImageInfos: _extends({}, _this13.state.selectedImageInfos, {
|
|
link_target: value
|
|
})
|
|
});
|
|
}
|
|
}),
|
|
React.createElement(
|
|
'div',
|
|
{ className: 'save_img_action' },
|
|
React.createElement(
|
|
Button,
|
|
{ className: 'is-button is-default is-primary is-large',
|
|
onClick: this.updateImageInfos.bind(this) },
|
|
wpmf.l18n.save
|
|
),
|
|
React.createElement(
|
|
'span',
|
|
{ className: 'spinner' },
|
|
' '
|
|
)
|
|
)
|
|
)
|
|
);
|
|
|
|
if (typeof cover !== "undefined" && images.length === 0) {
|
|
return React.createElement(
|
|
'div',
|
|
{ className: 'wpmf-cover' },
|
|
React.createElement('img', { src: cover })
|
|
);
|
|
}
|
|
|
|
if (typeof cover === "undefined" && images.length === 0) {
|
|
return React.createElement(
|
|
Placeholder,
|
|
{
|
|
icon: 'format-gallery',
|
|
label: wpmf.l18n.media_gallery,
|
|
instructions: wpmf.l18n.media_gallery_desc,
|
|
className: className
|
|
},
|
|
React.createElement(
|
|
'div',
|
|
{ className: 'wpmf_sl_gallery_folders' },
|
|
React.createElement(
|
|
'select',
|
|
{ size: folders_length, className: 'wpmf_select_folders', multiple: true, onChange: function onChange() {
|
|
return setAttributes({ wpmf_folder_id: $('#block-' + clientId + ' .wpmf_select_folders').val() });
|
|
} },
|
|
wpmf_categories.map(function (category, index) {
|
|
if (wpmf_folder_id.indexOf(category.value.toString()) !== -1) {
|
|
return React.createElement(
|
|
'option',
|
|
{ selected: true, key: index, value: category.value },
|
|
category.label
|
|
);
|
|
} else {
|
|
return React.createElement(
|
|
'option',
|
|
{ key: index, value: category.value },
|
|
category.label
|
|
);
|
|
}
|
|
})
|
|
)
|
|
),
|
|
React.createElement(
|
|
FormFileUpload,
|
|
{
|
|
multiple: true,
|
|
islarge: 'true',
|
|
className: 'editor-media-placeholder__button wpmf_btn_upload_img',
|
|
onChange: this.uploadFromFiles,
|
|
accept: 'image/*',
|
|
icon: 'upload'
|
|
},
|
|
wpmf.l18n.upload
|
|
),
|
|
React.createElement(MediaUpload, {
|
|
gallery: true,
|
|
multiple: true,
|
|
onSelect: function onSelect(imgs) {
|
|
return _this13.onSelectImages(imgs);
|
|
},
|
|
accept: 'image/*',
|
|
allowedTypes: ALLOWED_MEDIA_TYPES,
|
|
render: function render(_ref2) {
|
|
var open = _ref2.open;
|
|
return React.createElement(
|
|
Button,
|
|
{
|
|
islarge: 'true',
|
|
className: 'editor-media-placeholder__button wpmfLibrary',
|
|
onClick: open
|
|
},
|
|
wpmf.l18n.media_folder
|
|
);
|
|
}
|
|
}),
|
|
React.createElement(
|
|
Button,
|
|
{
|
|
islarge: 'true',
|
|
isPrimary: true,
|
|
className: 'editor-media-placeholder__button',
|
|
onClick: function onClick() {
|
|
return _this13.setFoldersGallery(wpmf_folder_id, true);
|
|
}
|
|
},
|
|
wpmf.l18n.create_gallery
|
|
)
|
|
);
|
|
}
|
|
|
|
if (typeof cover === "undefined" && images.length) {
|
|
return React.createElement(
|
|
Fragment,
|
|
null,
|
|
controls,
|
|
inspect_controls,
|
|
display === 'slider' && React.createElement(WpmfSliderTheme, _extends({}, this.props, { selectedImageId: this.state.selectedImageId,
|
|
gallery_loading: this.state.gallery_loading,
|
|
setStateImgInfos: this.setStateImgInfos.bind(this),
|
|
setStateImgSelectedID: this.setStateImgSelectedID.bind(this) })),
|
|
display === 'default' && React.createElement(WpmfDefaultTheme, _extends({}, this.props, { selectedImageId: this.state.selectedImageId,
|
|
gallery_loading: this.state.gallery_loading,
|
|
setStateImgInfos: this.setStateImgInfos.bind(this),
|
|
setStateImgSelectedID: this.setStateImgSelectedID.bind(this) })),
|
|
display === 'masonry' && React.createElement(WpmfMasonryTheme, _extends({}, this.props, { selectedImageId: this.state.selectedImageId,
|
|
gallery_loading: this.state.gallery_loading,
|
|
setStateImgInfos: this.setStateImgInfos.bind(this),
|
|
setStateImgSelectedID: this.setStateImgSelectedID.bind(this) })),
|
|
display === 'portfolio' && React.createElement(WpmfPortfolioTheme, _extends({}, this.props, { selectedImageId: this.state.selectedImageId,
|
|
gallery_loading: this.state.gallery_loading,
|
|
setStateImgInfos: this.setStateImgInfos.bind(this),
|
|
setStateImgSelectedID: this.setStateImgSelectedID.bind(this) })),
|
|
isSelected && parseInt(wpmf_autoinsert) === 0 && React.createElement(
|
|
'div',
|
|
{ className: 'blocks-gallery-item has-add-item-button' },
|
|
React.createElement(
|
|
FormFileUpload,
|
|
{
|
|
multiple: true,
|
|
islarge: 'true',
|
|
className: 'block-library-gallery-add-item-button',
|
|
onChange: this.uploadFromFiles,
|
|
accept: 'image/*',
|
|
icon: 'upload'
|
|
},
|
|
wpmf.l18n.upload_an_image
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}
|
|
}]);
|
|
|
|
return wpmfWordpressGallery;
|
|
}(Component);
|
|
|
|
var galleryAttrs = {
|
|
images: {
|
|
type: 'array',
|
|
default: []
|
|
},
|
|
image_sortable: {
|
|
type: 'array',
|
|
default: []
|
|
},
|
|
display: {
|
|
type: 'string',
|
|
default: 'masonry'
|
|
},
|
|
aspect_ratio: {
|
|
type: 'string',
|
|
default: 'default'
|
|
},
|
|
columns: {
|
|
type: 'string',
|
|
default: '3'
|
|
},
|
|
size: {
|
|
type: 'string',
|
|
default: 'medium'
|
|
},
|
|
crop_image: {
|
|
type: 'number',
|
|
default: 1
|
|
},
|
|
targetsize: {
|
|
type: 'string',
|
|
default: 'large'
|
|
},
|
|
link: {
|
|
type: 'string',
|
|
default: 'file'
|
|
},
|
|
wpmf_orderby: {
|
|
type: 'string',
|
|
default: 'post__in'
|
|
},
|
|
wpmf_order: {
|
|
type: 'string',
|
|
default: 'ASC'
|
|
},
|
|
autoplay: {
|
|
type: 'number',
|
|
default: 1
|
|
},
|
|
wpmf_folder_id: {
|
|
type: 'array',
|
|
default: []
|
|
},
|
|
wpmf_autoinsert: {
|
|
type: 'string',
|
|
default: '0'
|
|
},
|
|
img_border_radius: {
|
|
type: 'number',
|
|
default: 0
|
|
},
|
|
borderWidth: {
|
|
type: 'number',
|
|
default: 1
|
|
},
|
|
borderColor: {
|
|
type: 'string',
|
|
default: 'transparent'
|
|
},
|
|
borderStyle: {
|
|
type: 'string',
|
|
default: 'none'
|
|
},
|
|
hoverShadowH: {
|
|
type: 'number',
|
|
default: 0
|
|
},
|
|
hoverShadowV: {
|
|
type: 'number',
|
|
default: 0
|
|
},
|
|
hoverShadowBlur: {
|
|
type: 'number',
|
|
default: 0
|
|
},
|
|
hoverShadowSpread: {
|
|
type: 'number',
|
|
default: 0
|
|
},
|
|
hoverShadowColor: {
|
|
type: 'string',
|
|
default: '#ccc'
|
|
},
|
|
gutterwidth: {
|
|
type: 'number',
|
|
default: 15
|
|
},
|
|
changed: {
|
|
type: 'boolean',
|
|
default: false
|
|
},
|
|
cover: {
|
|
type: 'string',
|
|
source: 'attribute',
|
|
selector: 'img',
|
|
attribute: 'src'
|
|
}
|
|
};
|
|
|
|
registerBlockType('wpmf/wordpress-gallery', {
|
|
title: wpmf_blocks.l18n.block_gallery_title,
|
|
icon: 'format-gallery',
|
|
category: 'wp-media-folder',
|
|
supports: {
|
|
align: ['none', 'left', 'right', 'full', 'wide', 'center']
|
|
},
|
|
example: {
|
|
attributes: {
|
|
cover: wpmf_blocks.vars.block_cover
|
|
}
|
|
},
|
|
attributes: galleryAttrs,
|
|
edit: wpmfWordpressGallery,
|
|
save: function save(_ref3) {
|
|
var attributes = _ref3.attributes;
|
|
var images = attributes.images,
|
|
display = attributes.display,
|
|
aspect_ratio = attributes.aspect_ratio,
|
|
columns = attributes.columns,
|
|
size = attributes.size,
|
|
targetsize = attributes.targetsize,
|
|
link = attributes.link,
|
|
wpmf_orderby = attributes.wpmf_orderby,
|
|
wpmf_order = attributes.wpmf_order,
|
|
wpmf_autoinsert = attributes.wpmf_autoinsert,
|
|
wpmf_folder_id = attributes.wpmf_folder_id,
|
|
autoplay = attributes.autoplay,
|
|
crop_image = attributes.crop_image,
|
|
img_border_radius = attributes.img_border_radius,
|
|
gutterwidth = attributes.gutterwidth,
|
|
hoverShadowH = attributes.hoverShadowH,
|
|
hoverShadowV = attributes.hoverShadowV,
|
|
hoverShadowBlur = attributes.hoverShadowBlur,
|
|
hoverShadowSpread = attributes.hoverShadowSpread,
|
|
hoverShadowColor = attributes.hoverShadowColor,
|
|
borderWidth = attributes.borderWidth,
|
|
borderStyle = attributes.borderStyle,
|
|
borderColor = attributes.borderColor,
|
|
align = attributes.align;
|
|
|
|
var gallery_shortcode = '[gallery';
|
|
|
|
var ids = images.map(function (img) {
|
|
return img.id;
|
|
});
|
|
if (parseInt(wpmf_autoinsert) === 0) {
|
|
if (images.length) {
|
|
gallery_shortcode += ' ids="' + ids.join() + '"';
|
|
}
|
|
}
|
|
|
|
gallery_shortcode += ' display="' + display + '"';
|
|
gallery_shortcode += ' aspect_ratio="' + aspect_ratio + '"';
|
|
gallery_shortcode += ' size="' + size + '"';
|
|
gallery_shortcode += ' columns="' + columns + '"';
|
|
gallery_shortcode += ' targetsize="' + targetsize + '"';
|
|
gallery_shortcode += ' link="' + link + '"';
|
|
gallery_shortcode += ' wpmf_orderby="' + wpmf_orderby + '"';
|
|
gallery_shortcode += ' wpmf_order="' + wpmf_order + '"';
|
|
if (parseInt(autoplay) === 0) {
|
|
gallery_shortcode += ' autoplay="' + autoplay + '"';
|
|
}
|
|
|
|
if (parseInt(autoplay) === 0) {
|
|
gallery_shortcode += ' autoplay="' + autoplay + '"';
|
|
}
|
|
|
|
if (parseInt(crop_image) === 0) {
|
|
gallery_shortcode += ' crop_image="' + crop_image + '"';
|
|
}
|
|
|
|
gallery_shortcode += ' wpmf_autoinsert="' + wpmf_autoinsert + '"';
|
|
if (parseInt(img_border_radius) !== 0) {
|
|
gallery_shortcode += ' img_border_radius="' + img_border_radius + '"';
|
|
}
|
|
|
|
if (parseInt(gutterwidth) !== 5) {
|
|
gallery_shortcode += ' gutterwidth="' + gutterwidth + '"';
|
|
}
|
|
|
|
if (wpmf_folder_id.length) {
|
|
gallery_shortcode += ' wpmf_folder_id="' + wpmf_folder_id.join() + '"';
|
|
}
|
|
|
|
if (typeof hoverShadowH !== "undefined" && typeof hoverShadowV !== "undefined" && typeof hoverShadowBlur !== "undefined" && typeof hoverShadowSpread !== "undefined" && (parseInt(hoverShadowH) !== 0 || parseInt(hoverShadowV) !== 0 || parseInt(hoverShadowBlur) !== 0 || parseInt(hoverShadowSpread) !== 0)) {
|
|
gallery_shortcode += ' img_shadow="' + hoverShadowH + 'px ' + hoverShadowV + 'px ' + hoverShadowBlur + 'px ' + hoverShadowSpread + 'px ' + hoverShadowColor + '"';
|
|
}
|
|
|
|
if (borderStyle !== 'none') {
|
|
gallery_shortcode += ' border_width="' + borderWidth + '"';
|
|
gallery_shortcode += ' border_style="' + borderStyle + '"';
|
|
gallery_shortcode += ' border_color="' + borderColor + '"';
|
|
}
|
|
|
|
if (typeof align !== "undefined") {
|
|
gallery_shortcode += ' align="align' + align + '"';
|
|
}
|
|
gallery_shortcode += ']';
|
|
|
|
return gallery_shortcode;
|
|
}
|
|
});
|
|
})(wp.i18n, wp.blocks, wp.element, wp.editor, wp.blockEditor, wp.components);
|