plugin updates
This commit is contained in:
Tony Volpe
@@ -0,0 +1,431 @@
|
||||
"use strict";
|
||||
|
||||
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;
|
||||
var mediaUpload = wpEditor.mediaUpload;
|
||||
var PanelBody = wpComponents.PanelBody,
|
||||
SelectControl = wpComponents.SelectControl,
|
||||
ToolbarGroup = wpComponents.ToolbarGroup,
|
||||
Button = wpComponents.Button,
|
||||
IconButton = wpComponents.IconButton,
|
||||
FormFileUpload = wpComponents.FormFileUpload,
|
||||
Placeholder = wpComponents.Placeholder;
|
||||
|
||||
var wpmfFileDesign = function (_Component) {
|
||||
_inherits(wpmfFileDesign, _Component);
|
||||
|
||||
function wpmfFileDesign() {
|
||||
_classCallCheck(this, wpmfFileDesign);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, (wpmfFileDesign.__proto__ || Object.getPrototypeOf(wpmfFileDesign)).apply(this, arguments));
|
||||
|
||||
_this.addFiles = _this.addFiles.bind(_this);
|
||||
_this.uploadFromFiles = _this.uploadFromFiles.bind(_this);
|
||||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload files
|
||||
*/
|
||||
|
||||
|
||||
_createClass(wpmfFileDesign, [{
|
||||
key: "uploadFromFiles",
|
||||
value: function uploadFromFiles(event) {
|
||||
this.addFiles(event.target.files);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add files
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "addFiles",
|
||||
value: function addFiles(files) {
|
||||
var _props = this.props,
|
||||
attributes = _props.attributes,
|
||||
setAttributes = _props.setAttributes;
|
||||
|
||||
mediaUpload({
|
||||
filesList: files,
|
||||
onFileChange: function onFileChange(file) {
|
||||
if (file.length && file[0] !== null && typeof file[0].id !== "undefined") {
|
||||
var f = {};
|
||||
f.title = file[0].title;
|
||||
f.mime = file[0].mime_type;
|
||||
f.filesizeInBytes = file[0].media_details.filesize;
|
||||
f.url = file[0].url;
|
||||
setAttributes({
|
||||
id: file[0].id,
|
||||
file: f
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "render",
|
||||
value: function render() {
|
||||
var _props2 = this.props,
|
||||
attributes = _props2.attributes,
|
||||
setAttributes = _props2.setAttributes,
|
||||
className = _props2.className;
|
||||
var id = attributes.id,
|
||||
file = attributes.file,
|
||||
target = attributes.target,
|
||||
cover = attributes.cover;
|
||||
|
||||
var controls = React.createElement(
|
||||
BlockControls,
|
||||
null,
|
||||
id !== 0 && React.createElement(
|
||||
ToolbarGroup,
|
||||
null,
|
||||
React.createElement(MediaUpload, {
|
||||
onSelect: function onSelect(file) {
|
||||
return setAttributes({ id: file.id, file: file });
|
||||
},
|
||||
render: function render(_ref) {
|
||||
var open = _ref.open;
|
||||
return React.createElement(IconButton, {
|
||||
className: "components-toolbar__control",
|
||||
label: __('Edit File', 'wpmf'),
|
||||
icon: "edit",
|
||||
onClick: open
|
||||
});
|
||||
}
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
var mime = '';
|
||||
var size = 0;
|
||||
if (id !== 0) {
|
||||
var mimetype = file.url.split('.');
|
||||
var index = mimetype.length - 1;
|
||||
if (mimetype[index].length > 10) {
|
||||
mimetype = file.mime.split('/');
|
||||
index = mimetype.length - 1;
|
||||
}
|
||||
if (typeof mimetype !== "undefined" && typeof mimetype[index] !== "undefined") {
|
||||
mime = mimetype[index].toUpperCase();
|
||||
}
|
||||
if (file.filesizeInBytes < 1024 * 1024) {
|
||||
size = file.filesizeInBytes / 1024;
|
||||
size = size.toFixed(1);
|
||||
size += ' kB';
|
||||
} else if (file.filesizeInBytes > 1024 * 1024) {
|
||||
size = file.filesizeInBytes / (1024 * 1024);
|
||||
size = size.toFixed(1);
|
||||
size += ' MB';
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof cover === "undefined" && id == 0) {
|
||||
return React.createElement(
|
||||
Placeholder,
|
||||
{
|
||||
icon: "media-archive",
|
||||
label: __('WPMF Media Download', 'wpmf'),
|
||||
instructions: wpmf.l18n.media_download_desc,
|
||||
className: className
|
||||
},
|
||||
React.createElement(
|
||||
FormFileUpload,
|
||||
{
|
||||
islarge: "true",
|
||||
className: "is-primary editor-media-placeholder__button wpmf_btn_upload_img",
|
||||
onChange: this.uploadFromFiles,
|
||||
accept: "*"
|
||||
},
|
||||
wpmf.l18n.upload
|
||||
),
|
||||
React.createElement(MediaUpload, {
|
||||
onSelect: function onSelect(file) {
|
||||
return setAttributes({ id: file.id, file: file });
|
||||
},
|
||||
accept: "*",
|
||||
allowedTypes: "*",
|
||||
render: function render(_ref2) {
|
||||
var open = _ref2.open;
|
||||
return React.createElement(
|
||||
Button,
|
||||
{
|
||||
islarge: "true",
|
||||
className: "is-tertiary editor-media-placeholder__button wpmfLibrary",
|
||||
onClick: open
|
||||
},
|
||||
wpmf.l18n.media_folder
|
||||
);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return React.createElement(
|
||||
Fragment,
|
||||
null,
|
||||
typeof cover !== "undefined" && React.createElement(
|
||||
"div",
|
||||
{ className: "wpmf-cover" },
|
||||
React.createElement("img", { src: cover })
|
||||
),
|
||||
controls,
|
||||
typeof cover === "undefined" && id !== 0 && React.createElement(
|
||||
"div",
|
||||
{ className: "wp-block-shortcode" },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "wpmf-file-design-block" },
|
||||
React.createElement(
|
||||
InspectorControls,
|
||||
null,
|
||||
React.createElement(
|
||||
PanelBody,
|
||||
{ title: __('File Design Settings', 'wpmf') },
|
||||
React.createElement(SelectControl, {
|
||||
label: __('Target', 'wpmf'),
|
||||
value: target,
|
||||
options: [{ label: __('Same Window', 'wpmf'), value: '' }, { label: __('New Window', 'wpmf'), value: '_blank' }],
|
||||
onChange: function onChange(value) {
|
||||
return setAttributes({ target: value });
|
||||
}
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ "data-id": id },
|
||||
React.createElement(
|
||||
"a",
|
||||
{
|
||||
className: "wpmf-defile",
|
||||
href: file.url,
|
||||
download: true,
|
||||
rel: "noopener noreferrer",
|
||||
target: target, "data-id": id },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "wpmf-defile-title" },
|
||||
React.createElement(
|
||||
"b",
|
||||
null,
|
||||
file.title
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"span",
|
||||
{ className: "wpmf-single-infos" },
|
||||
React.createElement(
|
||||
"b",
|
||||
null,
|
||||
__('Size: ', 'wpmf'),
|
||||
" "
|
||||
),
|
||||
size,
|
||||
React.createElement(
|
||||
"b",
|
||||
null,
|
||||
__(' Format: ', 'wpmf'),
|
||||
" "
|
||||
)
|
||||
),
|
||||
mime
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return wpmfFileDesign;
|
||||
}(Component);
|
||||
|
||||
var fileDesignAttrs = {
|
||||
id: {
|
||||
type: 'number',
|
||||
default: 0
|
||||
},
|
||||
file: {
|
||||
type: 'object',
|
||||
default: {}
|
||||
},
|
||||
target: {
|
||||
type: 'string',
|
||||
default: ''
|
||||
},
|
||||
cover: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
selector: 'img',
|
||||
attribute: 'src'
|
||||
}
|
||||
};
|
||||
|
||||
registerBlockType('wpmf/filedesign', {
|
||||
title: __('WPMF Media Download', 'wpmf'),
|
||||
icon: 'media-archive',
|
||||
category: 'wp-media-folder',
|
||||
example: {
|
||||
attributes: {
|
||||
cover: wpmf_filedesign_blocks.vars.block_cover
|
||||
}
|
||||
},
|
||||
attributes: fileDesignAttrs,
|
||||
edit: wpmfFileDesign,
|
||||
save: function save(_ref3) {
|
||||
var attributes = _ref3.attributes;
|
||||
var id = attributes.id,
|
||||
file = attributes.file,
|
||||
target = attributes.target;
|
||||
|
||||
|
||||
var mime = '';
|
||||
var size = 0;
|
||||
if (id !== 0) {
|
||||
var mimetype = file.url.split('.');
|
||||
var index = mimetype.length - 1;
|
||||
if (mimetype[index].length > 10) {
|
||||
mimetype = file.mime.split('/');
|
||||
index = mimetype.length - 1;
|
||||
}
|
||||
if (typeof mimetype !== "undefined" && typeof mimetype[index] !== "undefined") {
|
||||
mime = mimetype[index].toUpperCase();
|
||||
}
|
||||
if (file.filesizeInBytes < 1024 * 1024) {
|
||||
size = file.filesizeInBytes / 1024;
|
||||
size = size.toFixed(1);
|
||||
size += ' kB';
|
||||
} else if (file.filesizeInBytes > 1024 * 1024) {
|
||||
size = file.filesizeInBytes / (1024 * 1024);
|
||||
size = size.toFixed(1);
|
||||
size += ' MB';
|
||||
}
|
||||
}
|
||||
|
||||
return React.createElement(
|
||||
"div",
|
||||
{ "data-id": id },
|
||||
React.createElement(
|
||||
"a",
|
||||
{
|
||||
className: "wpmf-defile",
|
||||
href: file.url,
|
||||
download: true,
|
||||
rel: "noopener noreferrer",
|
||||
target: target, "data-id": id },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "wpmf-defile-title" },
|
||||
React.createElement(
|
||||
"b",
|
||||
null,
|
||||
file.title
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"span",
|
||||
{ className: "wpmf-single-infos" },
|
||||
React.createElement(
|
||||
"b",
|
||||
null,
|
||||
__('Size: ', 'wpmf'),
|
||||
" "
|
||||
),
|
||||
size,
|
||||
React.createElement(
|
||||
"b",
|
||||
null,
|
||||
__(' Format: ', 'wpmf'),
|
||||
" "
|
||||
)
|
||||
),
|
||||
mime
|
||||
)
|
||||
);
|
||||
},
|
||||
deprecated: [{
|
||||
attributes: fileDesignAttrs,
|
||||
save: function save(_ref4) {
|
||||
var attributes = _ref4.attributes;
|
||||
var id = attributes.id,
|
||||
file = attributes.file,
|
||||
target = attributes.target;
|
||||
|
||||
|
||||
var mime = '';
|
||||
var size = 0;
|
||||
if (id !== 0) {
|
||||
var mimetype = file.mime.split('/');
|
||||
if (typeof mimetype !== "undefined" && typeof mimetype[1] !== "undefined") {
|
||||
mime = mimetype[1].toUpperCase();
|
||||
}
|
||||
if (file.filesizeInBytes < 1024 * 1024) {
|
||||
size = file.filesizeInBytes / 1024;
|
||||
size = size.toFixed(1);
|
||||
size += ' kB';
|
||||
} else if (file.filesizeInBytes > 1024 * 1024) {
|
||||
size = file.filesizeInBytes / (1024 * 1024);
|
||||
size = size.toFixed(1);
|
||||
size += ' MB';
|
||||
}
|
||||
}
|
||||
|
||||
return React.createElement(
|
||||
"div",
|
||||
{ "data-id": id },
|
||||
React.createElement(
|
||||
"a",
|
||||
{
|
||||
className: "wpmf-defile",
|
||||
href: file.url,
|
||||
download: true,
|
||||
target: target, "data-id": id },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "wpmf-defile-title" },
|
||||
React.createElement(
|
||||
"b",
|
||||
null,
|
||||
file.title
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"span",
|
||||
{ className: "wpmf-single-infos" },
|
||||
React.createElement(
|
||||
"b",
|
||||
null,
|
||||
__('Size: ', 'wpmf'),
|
||||
" "
|
||||
),
|
||||
size,
|
||||
React.createElement(
|
||||
"b",
|
||||
null,
|
||||
__(' Format: ', 'wpmf'),
|
||||
" "
|
||||
)
|
||||
),
|
||||
mime
|
||||
)
|
||||
);
|
||||
}
|
||||
}]
|
||||
});
|
||||
})(wp.i18n, wp.blocks, wp.element, wp.editor, wp.blockEditor, wp.components);
|
||||
@@ -0,0 +1,285 @@
|
||||
(function (wpI18n, wpBlocks, wpElement, wpEditor, wpBlockEditor, wpComponents) {
|
||||
const {__} = wpI18n;
|
||||
const {Component, Fragment} = wpElement;
|
||||
const {registerBlockType} = wpBlocks;
|
||||
const {InspectorControls, MediaUpload, BlockControls} = wpBlockEditor;
|
||||
const {mediaUpload} = wpEditor;
|
||||
const {PanelBody, SelectControl, ToolbarGroup, Button, IconButton, FormFileUpload, Placeholder} = wpComponents;
|
||||
|
||||
class wpmfFileDesign extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.addFiles = this.addFiles.bind(this);
|
||||
this.uploadFromFiles = this.uploadFromFiles.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload files
|
||||
*/
|
||||
uploadFromFiles(event) {
|
||||
this.addFiles(event.target.files);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add files
|
||||
*/
|
||||
addFiles(files) {
|
||||
const {attributes, setAttributes} = this.props;
|
||||
mediaUpload({
|
||||
filesList: files,
|
||||
onFileChange: (file) => {
|
||||
if (file.length && file[0] !== null && typeof file[0].id !== "undefined") {
|
||||
let f = {};
|
||||
f.title = file[0].title;
|
||||
f.mime = file[0].mime_type;
|
||||
f.filesizeInBytes = file[0].media_details.filesize;
|
||||
f.url = file[0].url;
|
||||
setAttributes({
|
||||
id: file[0].id,
|
||||
file: f
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {attributes, setAttributes, className} = this.props;
|
||||
const {id, file, target, cover} = attributes;
|
||||
const controls = (
|
||||
<BlockControls>
|
||||
{id !== 0 && (
|
||||
<ToolbarGroup>
|
||||
<MediaUpload
|
||||
onSelect={(file) => setAttributes({id: file.id, file: file})}
|
||||
render={({open}) => (
|
||||
<IconButton
|
||||
className="components-toolbar__control"
|
||||
label={__('Edit File', 'wpmf')}
|
||||
icon="edit"
|
||||
onClick={open}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</ToolbarGroup>
|
||||
)}
|
||||
</BlockControls>
|
||||
);
|
||||
|
||||
let mime = '';
|
||||
let size = 0;
|
||||
if (id !== 0) {
|
||||
let mimetype = file.url.split('.');
|
||||
let index = mimetype.length - 1;
|
||||
if (mimetype[index].length > 10) {
|
||||
mimetype = file.mime.split('/');
|
||||
index = mimetype.length - 1;
|
||||
}
|
||||
if (typeof mimetype !== "undefined" && typeof mimetype[index] !== "undefined") {
|
||||
mime = mimetype[index].toUpperCase()
|
||||
}
|
||||
if (file.filesizeInBytes < 1024 * 1024) {
|
||||
size = file.filesizeInBytes / 1024;
|
||||
size = size.toFixed(1);
|
||||
size += ' kB'
|
||||
} else if (file.filesizeInBytes > 1024 * 1024) {
|
||||
size = file.filesizeInBytes / (1024 * 1024);
|
||||
size = size.toFixed(1);
|
||||
size += ' MB'
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof cover === "undefined" && id == 0) {
|
||||
return (
|
||||
<Placeholder
|
||||
icon="media-archive"
|
||||
label={__('WPMF Media Download', 'wpmf')}
|
||||
instructions={wpmf.l18n.media_download_desc}
|
||||
className={className}
|
||||
>
|
||||
<FormFileUpload
|
||||
islarge="true"
|
||||
className="is-primary editor-media-placeholder__button wpmf_btn_upload_img"
|
||||
onChange={this.uploadFromFiles}
|
||||
accept="*"
|
||||
>
|
||||
{wpmf.l18n.upload}
|
||||
</FormFileUpload>
|
||||
<MediaUpload
|
||||
onSelect={(file) => setAttributes({id: file.id, file: file})}
|
||||
accept="*"
|
||||
allowedTypes="*"
|
||||
render={({open}) => (
|
||||
<Button
|
||||
islarge="true"
|
||||
className="is-tertiary editor-media-placeholder__button wpmfLibrary"
|
||||
onClick={open}
|
||||
>
|
||||
{wpmf.l18n.media_folder}
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
</Placeholder>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{
|
||||
typeof cover !== "undefined" && <div className="wpmf-cover"><img src={cover} /></div>
|
||||
}
|
||||
|
||||
{controls}
|
||||
{
|
||||
(typeof cover === "undefined" && id !== 0) && <div className="wp-block-shortcode">
|
||||
<div className="wpmf-file-design-block">
|
||||
<InspectorControls>
|
||||
<PanelBody title={__('File Design Settings', 'wpmf')}>
|
||||
<SelectControl
|
||||
label={__('Target', 'wpmf')}
|
||||
value={target}
|
||||
options={[
|
||||
{label: __('Same Window', 'wpmf'), value: ''},
|
||||
{label: __('New Window', 'wpmf'), value: '_blank'}
|
||||
]}
|
||||
onChange={(value) => setAttributes({target: value})}
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
<div data-id={id}>
|
||||
<a
|
||||
className="wpmf-defile"
|
||||
href={file.url}
|
||||
download
|
||||
rel="noopener noreferrer"
|
||||
target={target} data-id={id}>
|
||||
<div className="wpmf-defile-title"><b>{file.title}</b></div>
|
||||
<span className="wpmf-single-infos">
|
||||
<b>{__('Size: ', 'wpmf')} </b>{size}
|
||||
<b>{__(' Format: ', 'wpmf')} </b></span>{mime}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const fileDesignAttrs = {
|
||||
id: {
|
||||
type: 'number',
|
||||
default: 0
|
||||
},
|
||||
file: {
|
||||
type: 'object',
|
||||
default: {},
|
||||
},
|
||||
target: {
|
||||
type: 'string',
|
||||
default: '',
|
||||
},
|
||||
cover: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
selector: 'img',
|
||||
attribute: 'src',
|
||||
}
|
||||
};
|
||||
|
||||
registerBlockType(
|
||||
'wpmf/filedesign', {
|
||||
title: __('WPMF Media Download', 'wpmf'),
|
||||
icon: 'media-archive',
|
||||
category: 'wp-media-folder',
|
||||
example: {
|
||||
attributes: {
|
||||
cover: wpmf_filedesign_blocks.vars.block_cover
|
||||
}
|
||||
},
|
||||
attributes: fileDesignAttrs,
|
||||
edit: wpmfFileDesign,
|
||||
save: ({attributes}) => {
|
||||
const {id, file, target} = attributes;
|
||||
|
||||
let mime = '';
|
||||
let size = 0;
|
||||
if (id !== 0) {
|
||||
let mimetype = file.url.split('.');
|
||||
let index = mimetype.length - 1;
|
||||
if (mimetype[index].length > 10) {
|
||||
mimetype = file.mime.split('/');
|
||||
index = mimetype.length - 1;
|
||||
}
|
||||
if (typeof mimetype !== "undefined" && typeof mimetype[index] !== "undefined") {
|
||||
mime = mimetype[index].toUpperCase()
|
||||
}
|
||||
if (file.filesizeInBytes < 1024 * 1024) {
|
||||
size = file.filesizeInBytes / 1024;
|
||||
size = size.toFixed(1);
|
||||
size += ' kB'
|
||||
} else if (file.filesizeInBytes > 1024 * 1024) {
|
||||
size = file.filesizeInBytes / (1024 * 1024);
|
||||
size = size.toFixed(1);
|
||||
size += ' MB'
|
||||
}
|
||||
}
|
||||
|
||||
return <div data-id={id}>
|
||||
<a
|
||||
className="wpmf-defile"
|
||||
href={file.url}
|
||||
download
|
||||
rel="noopener noreferrer"
|
||||
target={target} data-id={id}>
|
||||
<div className="wpmf-defile-title"><b>{file.title}</b></div>
|
||||
<span className="wpmf-single-infos">
|
||||
<b>{__('Size: ', 'wpmf')} </b>{size}
|
||||
<b>{__(' Format: ', 'wpmf')} </b></span>{mime}
|
||||
</a>
|
||||
</div>;
|
||||
},
|
||||
deprecated: [
|
||||
{
|
||||
attributes: fileDesignAttrs,
|
||||
save: ({attributes}) => {
|
||||
const {id, file, target} = attributes;
|
||||
|
||||
let mime = '';
|
||||
let size = 0;
|
||||
if (id !== 0) {
|
||||
let mimetype = file.mime.split('/');
|
||||
if (typeof mimetype !== "undefined" && typeof mimetype[1] !== "undefined") {
|
||||
mime = mimetype[1].toUpperCase()
|
||||
}
|
||||
if (file.filesizeInBytes < 1024 * 1024) {
|
||||
size = file.filesizeInBytes / 1024;
|
||||
size = size.toFixed(1);
|
||||
size += ' kB'
|
||||
} else if (file.filesizeInBytes > 1024 * 1024) {
|
||||
size = file.filesizeInBytes / (1024 * 1024);
|
||||
size = size.toFixed(1);
|
||||
size += ' MB'
|
||||
}
|
||||
}
|
||||
|
||||
return <div data-id={id}>
|
||||
<a
|
||||
className="wpmf-defile"
|
||||
href={file.url}
|
||||
download
|
||||
target={target} data-id={id}>
|
||||
<div className="wpmf-defile-title"><b>{file.title}</b></div>
|
||||
<span className="wpmf-single-infos">
|
||||
<b>{__('Size: ', 'wpmf')} </b>{size}
|
||||
<b>{__(' Format: ', 'wpmf')} </b></span>{mime}
|
||||
</a>
|
||||
</div>;
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
);
|
||||
})(wp.i18n, wp.blocks, wp.element, wp.editor, wp.blockEditor, wp.components);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
@@ -0,0 +1,238 @@
|
||||
"use strict";
|
||||
|
||||
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, wpComponents) {
|
||||
var __ = wpI18n.__;
|
||||
var Component = wpElement.Component,
|
||||
Fragment = wpElement.Fragment;
|
||||
var registerBlockType = wpBlocks.registerBlockType;
|
||||
var InspectorControls = wpEditor.InspectorControls,
|
||||
MediaUpload = wpEditor.MediaUpload,
|
||||
BlockControls = wpEditor.BlockControls,
|
||||
BlockAlignmentToolbar = wpEditor.BlockAlignmentToolbar;
|
||||
var PanelBody = wpComponents.PanelBody,
|
||||
SelectControl = wpComponents.SelectControl,
|
||||
Toolbar = wpComponents.Toolbar,
|
||||
Button = wpComponents.Button,
|
||||
IconButton = wpComponents.IconButton;
|
||||
|
||||
var wpmfImageLightbox = function (_Component) {
|
||||
_inherits(wpmfImageLightbox, _Component);
|
||||
|
||||
function wpmfImageLightbox() {
|
||||
_classCallCheck(this, wpmfImageLightbox);
|
||||
|
||||
return _possibleConstructorReturn(this, (wpmfImageLightbox.__proto__ || Object.getPrototypeOf(wpmfImageLightbox)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(wpmfImageLightbox, [{
|
||||
key: "render",
|
||||
value: function render() {
|
||||
var _props = this.props,
|
||||
attributes = _props.attributes,
|
||||
setAttributes = _props.setAttributes;
|
||||
var image = attributes.image,
|
||||
id = attributes.id,
|
||||
size = attributes.size,
|
||||
url = attributes.url,
|
||||
lightbox_size = attributes.lightbox_size,
|
||||
lightbox_url = attributes.lightbox_url,
|
||||
align = attributes.align;
|
||||
|
||||
var list_sizes = Object.keys(wpmf_lightbox_blocks.vars.sizes).map(function (key, label) {
|
||||
return {
|
||||
label: wpmf_lightbox_blocks.vars.sizes[key],
|
||||
value: key
|
||||
};
|
||||
});
|
||||
|
||||
var controls = React.createElement(
|
||||
BlockControls,
|
||||
null,
|
||||
id !== 0 && React.createElement(
|
||||
Toolbar,
|
||||
null,
|
||||
React.createElement(BlockAlignmentToolbar, { value: align,
|
||||
onChange: function onChange(align) {
|
||||
return setAttributes({ align: align });
|
||||
} }),
|
||||
React.createElement(MediaUpload, {
|
||||
onSelect: function onSelect(img) {
|
||||
setAttributes({
|
||||
id: parseInt(img.id),
|
||||
image: img,
|
||||
url: img.url,
|
||||
lightbox_url: img.url
|
||||
});
|
||||
},
|
||||
accept: "image/*",
|
||||
allowedTypes: 'image',
|
||||
render: function render(_ref) {
|
||||
var open = _ref.open;
|
||||
|
||||
return React.createElement(IconButton, {
|
||||
className: "components-toolbar__control",
|
||||
label: __('Change Image', 'wpmf'),
|
||||
icon: "edit",
|
||||
onClick: open
|
||||
});
|
||||
}
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
return React.createElement(
|
||||
Fragment,
|
||||
null,
|
||||
controls,
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "wp-block-shortcode" },
|
||||
id !== 0 && React.createElement(
|
||||
"div",
|
||||
{ className: "wpmf-image-lightbox-block" },
|
||||
React.createElement(
|
||||
InspectorControls,
|
||||
null,
|
||||
React.createElement(
|
||||
PanelBody,
|
||||
{ title: __('PDF Settings', 'wpmf') },
|
||||
React.createElement(SelectControl, {
|
||||
label: __('Image size', 'wpmf'),
|
||||
value: size,
|
||||
options: list_sizes,
|
||||
onChange: function onChange(value) {
|
||||
setAttributes({ size: value, url: image.sizes[value].url });
|
||||
}
|
||||
}),
|
||||
React.createElement(SelectControl, {
|
||||
label: __('Lightbox size', 'wpmf'),
|
||||
value: lightbox_size,
|
||||
options: list_sizes,
|
||||
onChange: function onChange(value) {
|
||||
return setAttributes({
|
||||
lightbox_size: value,
|
||||
lightbox_url: image.sizes[value].url
|
||||
});
|
||||
}
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"a",
|
||||
null,
|
||||
React.createElement("img", { src: url, "data-wpmflightbox": "1",
|
||||
className: "align" + align + " size-" + size + " wp-image-" + id,
|
||||
"data-wpmf_size_lightbox": lightbox_size,
|
||||
"data-wpmf_image_lightbox": lightbox_url })
|
||||
)
|
||||
),
|
||||
id === 0 && React.createElement(MediaUpload, {
|
||||
onSelect: function onSelect(img) {
|
||||
setAttributes({
|
||||
id: parseInt(img.id),
|
||||
image: img,
|
||||
url: img.url,
|
||||
lightbox_url: img.url
|
||||
});
|
||||
},
|
||||
accept: "image/*",
|
||||
allowedTypes: 'image',
|
||||
render: function render(_ref2) {
|
||||
var open = _ref2.open;
|
||||
|
||||
return React.createElement(
|
||||
Button,
|
||||
{
|
||||
isLarge: true,
|
||||
className: "editor-media-placeholder__button wpmf-pdf-button",
|
||||
onClick: open
|
||||
},
|
||||
__('Add image', 'wpmf')
|
||||
);
|
||||
}
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return wpmfImageLightbox;
|
||||
}(Component);
|
||||
|
||||
registerBlockType('wpmf/image-lightbox', {
|
||||
title: wpmf_lightbox_blocks.l18n.block_image_lightbox_title,
|
||||
icon: 'format-image',
|
||||
category: 'wp-media-folder',
|
||||
attributes: {
|
||||
image: {
|
||||
type: 'object',
|
||||
default: {}
|
||||
},
|
||||
link_to: {
|
||||
type: 'string',
|
||||
default: 'full'
|
||||
},
|
||||
id: {
|
||||
type: 'number',
|
||||
default: 0
|
||||
},
|
||||
size: {
|
||||
type: 'string',
|
||||
default: 'full'
|
||||
},
|
||||
url: {
|
||||
type: 'string',
|
||||
default: ''
|
||||
},
|
||||
lightbox_size: {
|
||||
type: 'string',
|
||||
default: 'full'
|
||||
},
|
||||
lightbox_url: {
|
||||
type: 'string',
|
||||
default: ''
|
||||
},
|
||||
align: {
|
||||
type: 'string',
|
||||
default: 'center'
|
||||
}
|
||||
},
|
||||
edit: wpmfImageLightbox,
|
||||
save: function save(_ref3) {
|
||||
var attributes = _ref3.attributes;
|
||||
var id = attributes.id,
|
||||
size = attributes.size,
|
||||
url = attributes.url,
|
||||
lightbox_size = attributes.lightbox_size,
|
||||
lightbox_url = attributes.lightbox_url,
|
||||
align = attributes.align;
|
||||
|
||||
return React.createElement(
|
||||
"a",
|
||||
{className: "align" + align},
|
||||
React.createElement("img", { src: url, "data-wpmflightbox": "1", className: "align" + align + " size-" + size + " wp-image-" + id,
|
||||
"data-wpmf_size_lightbox": lightbox_size,
|
||||
"data-wpmf_image_lightbox": lightbox_url })
|
||||
);
|
||||
},
|
||||
getEditWrapperProps: function getEditWrapperProps(attributes) {
|
||||
var align = attributes.align;
|
||||
|
||||
var props = { 'data-resized': true };
|
||||
|
||||
if ('left' === align || 'right' === align || 'center' === align) {
|
||||
props['data-align'] = align;
|
||||
}
|
||||
|
||||
return props;
|
||||
}
|
||||
});
|
||||
})(wp.i18n, wp.blocks, wp.element, wp.blockEditor, wp.components);
|
||||
@@ -0,0 +1,182 @@
|
||||
(function (wpI18n, wpBlocks, wpElement, wpEditor, wpComponents) {
|
||||
const {__} = wpI18n;
|
||||
const {Component, Fragment} = wpElement;
|
||||
const {registerBlockType} = wpBlocks;
|
||||
const {InspectorControls, MediaUpload, BlockControls, BlockAlignmentToolbar} = wpEditor;
|
||||
const {PanelBody, SelectControl, Toolbar, Button, IconButton} = wpComponents;
|
||||
|
||||
class wpmfImageLightbox extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {attributes, setAttributes} = this.props;
|
||||
const {image, id, size, url, lightbox_size, lightbox_url, align} = attributes;
|
||||
const list_sizes = Object.keys(wpmf_lightbox_blocks.vars.sizes).map((key, label) => {
|
||||
return {
|
||||
label: wpmf_lightbox_blocks.vars.sizes[key],
|
||||
value: key
|
||||
}
|
||||
});
|
||||
|
||||
const controls = (
|
||||
<BlockControls>
|
||||
{(id !== 0) && (
|
||||
<Toolbar>
|
||||
<BlockAlignmentToolbar value={align}
|
||||
onChange={(align) => setAttributes({align: align})}/>
|
||||
<MediaUpload
|
||||
onSelect={(img) => {
|
||||
setAttributes({
|
||||
id: parseInt(img.id),
|
||||
image: img,
|
||||
url: img.url,
|
||||
lightbox_url: img.url
|
||||
})
|
||||
}}
|
||||
accept="image/*"
|
||||
allowedTypes={'image'}
|
||||
render={({open}) => {
|
||||
return (
|
||||
<IconButton
|
||||
className="components-toolbar__control"
|
||||
label={__('Change Image', 'wpmf')}
|
||||
icon="edit"
|
||||
onClick={open}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</Toolbar>
|
||||
)}
|
||||
</BlockControls>
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{controls}
|
||||
<div className="wp-block-shortcode">
|
||||
{
|
||||
(id !== 0) && <div className="wpmf-image-lightbox-block">
|
||||
<InspectorControls>
|
||||
<PanelBody title={__('PDF Settings', 'wpmf')}>
|
||||
<SelectControl
|
||||
label={__('Image size', 'wpmf')}
|
||||
value={size}
|
||||
options={list_sizes}
|
||||
onChange={(value) => {
|
||||
setAttributes({size: value, url: image.sizes[value].url})
|
||||
}}
|
||||
/>
|
||||
|
||||
<SelectControl
|
||||
label={__('Lightbox size', 'wpmf')}
|
||||
value={lightbox_size}
|
||||
options={list_sizes}
|
||||
onChange={(value) => setAttributes({
|
||||
lightbox_size: value,
|
||||
lightbox_url: image.sizes[value].url
|
||||
})}
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
<a className={`align${align}`}>
|
||||
<img src={url} data-wpmflightbox="1"
|
||||
className={`align${align} size-${size} wp-image-${id}`}
|
||||
data-wpmf_size_lightbox={lightbox_size}
|
||||
data-wpmf_image_lightbox={lightbox_url}/>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
(id === 0) && <MediaUpload
|
||||
onSelect={(img) => {
|
||||
setAttributes({
|
||||
id: parseInt(img.id),
|
||||
image: img,
|
||||
url: img.url,
|
||||
lightbox_url: img.url
|
||||
})
|
||||
}}
|
||||
accept="image/*"
|
||||
allowedTypes={'image'}
|
||||
render={({open}) => {
|
||||
return (
|
||||
<Button
|
||||
isLarge
|
||||
className="editor-media-placeholder__button wpmf-pdf-button"
|
||||
onClick={open}
|
||||
>
|
||||
{__('Add image', 'wpmf')}
|
||||
</Button>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
registerBlockType(
|
||||
'wpmf/image-lightbox', {
|
||||
title: wpmf_lightbox_blocks.l18n.block_image_lightbox_title,
|
||||
icon: 'format-image',
|
||||
category: 'wp-media-folder',
|
||||
attributes: {
|
||||
image: {
|
||||
type: 'object',
|
||||
default: {}
|
||||
},
|
||||
link_to: {
|
||||
type: 'string',
|
||||
default: 'full',
|
||||
},
|
||||
id: {
|
||||
type: 'number',
|
||||
default: 0
|
||||
},
|
||||
size: {
|
||||
type: 'string',
|
||||
default: 'full',
|
||||
},
|
||||
url: {
|
||||
type: 'string',
|
||||
default: '',
|
||||
},
|
||||
lightbox_size: {
|
||||
type: 'string',
|
||||
default: 'full',
|
||||
},
|
||||
lightbox_url: {
|
||||
type: 'string',
|
||||
default: '',
|
||||
},
|
||||
align: {
|
||||
type: 'string',
|
||||
default: 'center'
|
||||
}
|
||||
},
|
||||
edit: wpmfImageLightbox,
|
||||
save: ({attributes}) => {
|
||||
const {id, size, url, lightbox_size, lightbox_url, align} = attributes;
|
||||
return <a className={`align${align}`}><img src={url} data-wpmflightbox="1" className={`align${align} size-${size} wp-image-${id}`}
|
||||
data-wpmf_size_lightbox={lightbox_size}
|
||||
data-wpmf_image_lightbox={lightbox_url}/></a>;
|
||||
},
|
||||
getEditWrapperProps(attributes) {
|
||||
const {align} = attributes;
|
||||
const props = {'data-resized': true};
|
||||
|
||||
if ('left' === align || 'right' === align || 'center' === align) {
|
||||
props['data-align'] = align;
|
||||
}
|
||||
|
||||
return props;
|
||||
}
|
||||
}
|
||||
);
|
||||
})(wp.i18n, wp.blocks, wp.element, wp.blockEditor, wp.components);
|
||||
@@ -0,0 +1,277 @@
|
||||
'use strict';
|
||||
|
||||
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;
|
||||
var PanelBody = wpComponents.PanelBody,
|
||||
SelectControl = wpComponents.SelectControl,
|
||||
ToolbarGroup = wpComponents.ToolbarGroup,
|
||||
TextControl = wpComponents.TextControl,
|
||||
Button = wpComponents.Button,
|
||||
IconButton = wpComponents.IconButton,
|
||||
Placeholder = wpComponents.Placeholder;
|
||||
|
||||
var $ = jQuery;
|
||||
|
||||
var wpmfPdfEmbed = function (_Component) {
|
||||
_inherits(wpmfPdfEmbed, _Component);
|
||||
|
||||
function wpmfPdfEmbed() {
|
||||
_classCallCheck(this, wpmfPdfEmbed);
|
||||
|
||||
return _possibleConstructorReturn(this, (wpmfPdfEmbed.__proto__ || Object.getPrototypeOf(wpmfPdfEmbed)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(wpmfPdfEmbed, [{
|
||||
key: 'componentDidMount',
|
||||
value: function componentDidMount() {
|
||||
var _props = this.props,
|
||||
attributes = _props.attributes,
|
||||
clientId = _props.clientId;
|
||||
var id = attributes.id,
|
||||
embed = attributes.embed,
|
||||
target = attributes.target,
|
||||
width = attributes.width,
|
||||
height = attributes.height;
|
||||
|
||||
this.doPdfEmbed(id, embed, target, width, height, clientId);
|
||||
}
|
||||
}, {
|
||||
key: 'componentDidUpdate',
|
||||
value: function componentDidUpdate(prevProps) {
|
||||
var _props2 = this.props,
|
||||
attributes = _props2.attributes,
|
||||
clientId = _props2.clientId;
|
||||
var id = attributes.id,
|
||||
embed = attributes.embed,
|
||||
target = attributes.target,
|
||||
width = attributes.width,
|
||||
height = attributes.height;
|
||||
|
||||
if (attributes.embed != prevProps.attributes.embed || attributes.id != prevProps.attributes.id || attributes.width != prevProps.attributes.width || attributes.height != prevProps.attributes.height) {
|
||||
this.doPdfEmbed(id, embed, target, width, height, clientId);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'doPdfEmbed',
|
||||
value: function doPdfEmbed(id, embed, target, width, height, clientId) {
|
||||
var $container = $('#block-' + clientId + ' .wpmf_block_pdf_wrap');
|
||||
fetch(wpmf_pdf_blocks.vars.ajaxurl + ('?action=wpmf_load_pdf_embed&id=' + id + '&embed=' + embed + '&target=' + target + '&width=' + width + '&height=' + height + '&wpmf_nonce=' + wpmf_pdf_blocks.vars.wpmf_nonce)).then(function (res) {
|
||||
return res.json();
|
||||
}).then(function (result) {
|
||||
if (result.status) {
|
||||
$container.html(result.html);
|
||||
}
|
||||
},
|
||||
// errors
|
||||
function (error) {});
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _props3 = this.props,
|
||||
attributes = _props3.attributes,
|
||||
setAttributes = _props3.setAttributes,
|
||||
className = _props3.className;
|
||||
var id = attributes.id,
|
||||
embed = attributes.embed,
|
||||
target = attributes.target,
|
||||
width = attributes.width,
|
||||
height = attributes.height;
|
||||
|
||||
var controls = React.createElement(
|
||||
BlockControls,
|
||||
null,
|
||||
id !== 0 && React.createElement(
|
||||
ToolbarGroup,
|
||||
null,
|
||||
React.createElement(MediaUpload, {
|
||||
onSelect: function onSelect(file) {
|
||||
return setAttributes({ id: parseInt(file.id) });
|
||||
},
|
||||
accept: 'application/pdf',
|
||||
allowedTypes: 'application/pdf',
|
||||
render: function render(_ref) {
|
||||
var open = _ref.open;
|
||||
return React.createElement(IconButton, {
|
||||
className: 'components-toolbar__control wpmf-pdf-button',
|
||||
label: __('Edit', 'wpmf'),
|
||||
icon: 'edit',
|
||||
onClick: open
|
||||
});
|
||||
}
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
var pdf_shortcode = '[wpmfpdf';
|
||||
pdf_shortcode += ' id="' + id + '"';
|
||||
pdf_shortcode += ' embed="' + embed + '"';
|
||||
pdf_shortcode += ' target="' + target + '"';
|
||||
if (width !== '') {
|
||||
pdf_shortcode += ' width="' + width + '"';
|
||||
}
|
||||
if (height !== '') {
|
||||
pdf_shortcode += ' height="' + height + '"';
|
||||
}
|
||||
pdf_shortcode += ']';
|
||||
|
||||
if (id == 0) {
|
||||
return React.createElement(
|
||||
Placeholder,
|
||||
{
|
||||
icon: 'pdf',
|
||||
label: __('WP Media Folder PDF Embed', 'wpmf'),
|
||||
instructions: __('Select a PDF file from your media library.', 'wpmf'),
|
||||
className: className
|
||||
},
|
||||
React.createElement(MediaUpload, {
|
||||
onSelect: function onSelect(file) {
|
||||
return setAttributes({ id: parseInt(file.id) });
|
||||
},
|
||||
accept: 'application/pdf',
|
||||
allowedTypes: 'application/pdf',
|
||||
render: function render(_ref2) {
|
||||
var open = _ref2.open;
|
||||
return React.createElement(
|
||||
Button,
|
||||
{
|
||||
islarge: 'true',
|
||||
className: 'is-tertiary editor-media-placeholder__button wpmfLibrary',
|
||||
onClick: open
|
||||
},
|
||||
__('Add PDF', 'wpmf')
|
||||
);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return React.createElement(
|
||||
Fragment,
|
||||
null,
|
||||
React.createElement(
|
||||
'div',
|
||||
{ className: 'wp-block-shortcode' },
|
||||
id !== 0 && React.createElement(
|
||||
'div',
|
||||
{ className: 'wpmf-pdf-block' },
|
||||
React.createElement(
|
||||
InspectorControls,
|
||||
null,
|
||||
React.createElement(
|
||||
PanelBody,
|
||||
{ title: __('PDF Settings', 'wpmf') },
|
||||
React.createElement(SelectControl, {
|
||||
label: __('Embed', 'wpmf'),
|
||||
value: embed,
|
||||
options: [{ label: __('On', 'wpmf'), value: 1 }, { label: __('Off', 'wpmf'), value: 0 }],
|
||||
onChange: function onChange(value) {
|
||||
return setAttributes({ embed: parseInt(value) });
|
||||
}
|
||||
}),
|
||||
React.createElement(SelectControl, {
|
||||
label: __('Target', 'wpmf'),
|
||||
value: target,
|
||||
options: [{ label: __('Same Window', 'wpmf'), value: '' }, { label: __('New Window', 'wpmf'), value: '_blank' }],
|
||||
onChange: function onChange(value) {
|
||||
return setAttributes({ target: value });
|
||||
}
|
||||
}),
|
||||
React.createElement(TextControl, {
|
||||
label: __('Width', 'wpmf'),
|
||||
value: width,
|
||||
onChange: function onChange(value) {
|
||||
return setAttributes({ width: value });
|
||||
}
|
||||
}),
|
||||
React.createElement(TextControl, {
|
||||
className: 'wpmf_pdf_embed_shortcode_input',
|
||||
label: __('Height', 'wpmf'),
|
||||
value: height,
|
||||
onChange: function onChange(value) {
|
||||
return setAttributes({ height: value });
|
||||
}
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(TextControl, {
|
||||
value: pdf_shortcode,
|
||||
className: 'wpmf_pdf_value',
|
||||
autoComplete: 'off',
|
||||
readOnly: true
|
||||
}),
|
||||
id !== 0 && React.createElement('div', { className: 'wpmf_block_pdf_wrap' })
|
||||
)
|
||||
),
|
||||
controls
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return wpmfPdfEmbed;
|
||||
}(Component);
|
||||
|
||||
registerBlockType('wpmf/pdfembed', {
|
||||
title: wpmf_pdf_blocks.l18n.block_pdf_title,
|
||||
icon: 'media-code',
|
||||
category: 'wp-media-folder',
|
||||
attributes: {
|
||||
id: {
|
||||
type: 'number',
|
||||
default: 0
|
||||
},
|
||||
embed: {
|
||||
type: 'number',
|
||||
default: 1
|
||||
},
|
||||
target: {
|
||||
type: 'string',
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: 'string',
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: 'string',
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
edit: wpmfPdfEmbed,
|
||||
save: function save(_ref3) {
|
||||
var attributes = _ref3.attributes;
|
||||
var id = attributes.id,
|
||||
embed = attributes.embed,
|
||||
target = attributes.target,
|
||||
width = attributes.width,
|
||||
height = attributes.height;
|
||||
|
||||
var pdf_shortcode = '[wpmfpdf';
|
||||
pdf_shortcode += ' id="' + id + '"';
|
||||
pdf_shortcode += ' embed="' + embed + '"';
|
||||
pdf_shortcode += ' target="' + target + '"';
|
||||
if (width !== '') {
|
||||
pdf_shortcode += ' width="' + width + '"';
|
||||
}
|
||||
if (height !== '') {
|
||||
pdf_shortcode += ' height="' + height + '"';
|
||||
}
|
||||
pdf_shortcode += ']';
|
||||
return pdf_shortcode;
|
||||
}
|
||||
});
|
||||
})(wp.i18n, wp.blocks, wp.element, wp.editor, wp.blockEditor, wp.components);
|
||||
@@ -0,0 +1,210 @@
|
||||
(function (wpI18n, wpBlocks, wpElement, wpEditor, wpBlockEditor, wpComponents) {
|
||||
const {__} = wpI18n;
|
||||
const {Component, Fragment} = wpElement;
|
||||
const {registerBlockType} = wpBlocks;
|
||||
const {InspectorControls, MediaUpload, BlockControls} = wpBlockEditor;
|
||||
const {PanelBody, SelectControl, ToolbarGroup, TextControl, Button, IconButton, Placeholder} = wpComponents;
|
||||
const $ = jQuery;
|
||||
|
||||
class wpmfPdfEmbed extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const {attributes, clientId} = this.props;
|
||||
const {id, embed, target, width, height} = attributes;
|
||||
this.doPdfEmbed(id, embed, target, width, height, clientId);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const {attributes, clientId} = this.props;
|
||||
const {id, embed, target, width, height} = attributes;
|
||||
if (attributes.embed != prevProps.attributes.embed || attributes.id != prevProps.attributes.id || attributes.width != prevProps.attributes.width || attributes.height != prevProps.attributes.height) {
|
||||
this.doPdfEmbed(id, embed, target, width, height, clientId);
|
||||
}
|
||||
}
|
||||
|
||||
doPdfEmbed(id, embed, target, width, height, clientId) {
|
||||
let $container = $(`#block-${clientId} .wpmf_block_pdf_wrap`);
|
||||
fetch(wpmf_pdf_blocks.vars.ajaxurl + `?action=wpmf_load_pdf_embed&id=${id}&embed=${embed}&target=${target}&width=${width}&height=${height}&wpmf_nonce=${wpmf_pdf_blocks.vars.wpmf_nonce}`)
|
||||
.then(res => res.json())
|
||||
.then(
|
||||
(result) => {
|
||||
if (result.status) {
|
||||
$container.html(result.html);
|
||||
}
|
||||
},
|
||||
// errors
|
||||
(error) => {
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {attributes, setAttributes, className} = this.props;
|
||||
const {id, embed, target, width, height} = attributes;
|
||||
const controls = (
|
||||
<BlockControls>
|
||||
{id !== 0 && (
|
||||
<ToolbarGroup>
|
||||
<MediaUpload
|
||||
onSelect={(file) => setAttributes({id: parseInt(file.id)})}
|
||||
accept="application/pdf"
|
||||
allowedTypes={'application/pdf'}
|
||||
render={({open}) => (
|
||||
<IconButton
|
||||
className="components-toolbar__control wpmf-pdf-button"
|
||||
label={__('Edit', 'wpmf')}
|
||||
icon="edit"
|
||||
onClick={open}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</ToolbarGroup>
|
||||
)}
|
||||
</BlockControls>
|
||||
);
|
||||
|
||||
let pdf_shortcode = '[wpmfpdf';
|
||||
pdf_shortcode += ' id="' + id + '"';
|
||||
pdf_shortcode += ' embed="' + embed + '"';
|
||||
pdf_shortcode += ' target="' + target + '"';
|
||||
if (width !== '') {
|
||||
pdf_shortcode += ' width="' + width + '"';
|
||||
}
|
||||
if (height !== '') {
|
||||
pdf_shortcode += ' height="' + height + '"';
|
||||
}
|
||||
pdf_shortcode += ']';
|
||||
|
||||
if (id == 0) {
|
||||
return (
|
||||
<Placeholder
|
||||
icon="pdf"
|
||||
label={__('WP Media Folder PDF Embed', 'wpmf')}
|
||||
instructions={__('Select a PDF file from your media library.', 'wpmf')}
|
||||
className={className}
|
||||
>
|
||||
<MediaUpload
|
||||
onSelect={(file) => setAttributes({id: parseInt(file.id)})}
|
||||
accept="application/pdf"
|
||||
allowedTypes={'application/pdf'}
|
||||
render={({open}) => (
|
||||
<Button
|
||||
islarge="true"
|
||||
className="is-tertiary editor-media-placeholder__button wpmfLibrary"
|
||||
onClick={open}
|
||||
>
|
||||
{__('Add PDF', 'wpmf')}
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
</Placeholder>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="wp-block-shortcode">
|
||||
{
|
||||
(id !== 0) && <div className="wpmf-pdf-block">
|
||||
<InspectorControls>
|
||||
<PanelBody title={__('PDF Settings', 'wpmf')}>
|
||||
<SelectControl
|
||||
label={__('Embed', 'wpmf')}
|
||||
value={embed}
|
||||
options={[
|
||||
{label: __('On', 'wpmf'), value: 1},
|
||||
{label: __('Off', 'wpmf'), value: 0}
|
||||
]}
|
||||
onChange={(value) => setAttributes({embed: parseInt(value)})}
|
||||
/>
|
||||
|
||||
<SelectControl
|
||||
label={__('Target', 'wpmf')}
|
||||
value={target}
|
||||
options={[
|
||||
{label: __('Same Window', 'wpmf'), value: ''},
|
||||
{label: __('New Window', 'wpmf'), value: '_blank'}
|
||||
]}
|
||||
onChange={(value) => setAttributes({target: value})}
|
||||
/>
|
||||
<TextControl
|
||||
label={__('Width', 'wpmf')}
|
||||
value={ width }
|
||||
onChange={ ( value ) => setAttributes({width: value})}
|
||||
/>
|
||||
<TextControl
|
||||
className="wpmf_pdf_embed_shortcode_input"
|
||||
label={__('Height', 'wpmf')}
|
||||
value={ height }
|
||||
onChange={ ( value ) => setAttributes({height: value})}
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
<TextControl
|
||||
value={pdf_shortcode}
|
||||
className="wpmf_pdf_value"
|
||||
autoComplete="off"
|
||||
readOnly
|
||||
/>
|
||||
{
|
||||
(id !== 0) && <div className="wpmf_block_pdf_wrap"></div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
{controls}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
registerBlockType(
|
||||
'wpmf/pdfembed', {
|
||||
title: wpmf_pdf_blocks.l18n.block_pdf_title,
|
||||
icon: 'media-code',
|
||||
category: 'wp-media-folder',
|
||||
attributes: {
|
||||
id: {
|
||||
type: 'number',
|
||||
default: 0
|
||||
},
|
||||
embed: {
|
||||
type: 'number',
|
||||
default: 1,
|
||||
},
|
||||
target: {
|
||||
type: 'string',
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: 'string',
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: 'string',
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
edit: wpmfPdfEmbed,
|
||||
save: ({attributes}) => {
|
||||
const {id, embed, target, width, height} = attributes;
|
||||
let pdf_shortcode = '[wpmfpdf';
|
||||
pdf_shortcode += ' id="' + id + '"';
|
||||
pdf_shortcode += ' embed="' + embed + '"';
|
||||
pdf_shortcode += ' target="' + target + '"';
|
||||
if (width !== '') {
|
||||
pdf_shortcode += ' width="' + width + '"';
|
||||
}
|
||||
if (height !== '') {
|
||||
pdf_shortcode += ' height="' + height + '"';
|
||||
}
|
||||
pdf_shortcode += ']';
|
||||
return pdf_shortcode;
|
||||
}
|
||||
}
|
||||
);
|
||||
})(wp.i18n, wp.blocks, wp.element, wp.editor, wp.blockEditor, wp.components);
|
||||
774
wp/wp-content/plugins/wp-media-folder/assets/js/blocks/style.css
Normal file
774
wp/wp-content/plugins/wp-media-folder/assets/js/blocks/style.css
Normal file
@@ -0,0 +1,774 @@
|
||||
.wpmfLibrary {
|
||||
margin-right: 6px !important;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
.wpmf-gallery-block {
|
||||
position: relative !important;
|
||||
margin-bottom: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
.alignleft .wpmf-gallery-block, .alignright .wpmf-gallery-block, .aligncenter .wpmf-gallery-block {
|
||||
width: 620px!important;
|
||||
}
|
||||
|
||||
.aligncenter .wpmf-gallery-block {
|
||||
margin-right: auto!important;
|
||||
margin-left: auto!important;
|
||||
}
|
||||
.wpmf-gallery-block-item.is-transient img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.wpmf-gallery-block-item.is-transient .spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -9px !important;
|
||||
margin-left: -9px !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.gallery-columns-1 .wpmf-gallery-block-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-columns-2 .wpmf-gallery-block-item {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.gallery-columns-3 .wpmf-gallery-block-item {
|
||||
width: calc(100%/3);
|
||||
}
|
||||
|
||||
.gallery-columns-4 .wpmf-gallery-block-item {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.gallery-columns-5 .wpmf-gallery-block-item {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.gallery-columns-6 .wpmf-gallery-block-item {
|
||||
width: calc(100%/6);
|
||||
}
|
||||
|
||||
.gallery-columns-7 .wpmf-gallery-block-item {
|
||||
width: calc(100%/7);
|
||||
}
|
||||
|
||||
.gallery-columns-8 .wpmf-gallery-block-item {
|
||||
width: 12.5%
|
||||
}
|
||||
|
||||
.gallery-columns-9 .wpmf-gallery-block-item {
|
||||
width: calc(100%/9);
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items .wpmf-gallery-block-item img {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items .wpmf-gallery-block-item {
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wpmf-cover {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.wpmf-cover img {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-gallery-list-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-gallery-list-items .wpmf-gallery-block-item {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.wpmf-gallery-block-item-infos {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wpmfslick .wpmf-gallery-block-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wpmf-slick-crop-1 .wpmfslick .wpmf-gallery-block-item-infos:before {
|
||||
padding-top: 100%;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpmf-slick-crop-1 .wpmfslick .wpmf-gallery-block-item-infos:after {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 160% !important;
|
||||
height: 100% !important;
|
||||
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1,
|
||||
45deg
|
||||
) translate3d(0, -120%, 0) !important;
|
||||
-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1,
|
||||
45deg
|
||||
) translate3d(0, -120%, 0) !important;
|
||||
-webkit-transition: transform 0.7s ease 0s !important;
|
||||
transition: transform 0.7s ease 0s !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
|
||||
.wpmf-slick-crop-1 .wpmfslick .wpmf-gallery-block-item-infos.is-selected::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
-webkit-box-shadow: inset 0 0 0 4px #49bf88;
|
||||
box-shadow: inset 0 0 0 4px #49bf88;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.wpmf-slick-crop-1 .wpmfslick .square_thumbnail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
transition: opacity .1s;
|
||||
}
|
||||
|
||||
.wpmf-slick-crop-1 .wpmfslick .square_thumbnail:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wpmf-slick-crop-1 .wpmfslick .square_thumbnail .img_centered {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
.wpmf-slick-crop-1 .wpmfslick .square_thumbnail .img_centered img {
|
||||
transform: translate(-50%, -50%) !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-height: 100%;
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover;
|
||||
padding: 0 !important;
|
||||
transition: ease all 500ms !important;
|
||||
}
|
||||
|
||||
.wpmf-slick-text {
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
clear: left;
|
||||
opacity: 0;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
border-bottom: #eee 1px solid;
|
||||
z-index: 999;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wpmf-slick-text span {
|
||||
color: #ffffff;
|
||||
bottom: 5px;
|
||||
font-size: 11px;
|
||||
transition: all 0.15s linear;
|
||||
padding-bottom: 7px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wpmfslick .wpmf-gallery-item:hover .wpmf-slick-text {
|
||||
opacity: 1;
|
||||
bottom: 15px;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-gallery-block-item-infos,
|
||||
.wpmfDefault .wpmf-gallery-block-item-infos img {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: #fff;
|
||||
background-color: #ff0000;
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
z-index: 999;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items .wpmf-gallery-block-item .wpmf-gallery-block-item-remove .dashicon {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wpmf-gallery-block-item-remove svg {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.save_img_action span {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.save_img_action span.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.wpmf-pdf-block {
|
||||
width: 100%;
|
||||
padding-right: 10px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.wpmf-pdf-block input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wpmf-pdf-button {
|
||||
margin: 0 4px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
.aligncenter .wpmf-image-lightbox-block, .alignright .wpmf-image-lightbox-block, .alignleft .wpmf-image-lightbox-block {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.aligncenter .wpmf-image-lightbox-block {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wpmf-image-lightbox-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wpmf-pdf-button {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
/* Border radius for image */
|
||||
.wpmf-has-border-radius-1 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-1 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-1 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 1px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-2 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-2 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-2 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 2px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-3 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-3 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-3 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 3px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-4 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-4 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 4px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-5 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-5 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-5 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-6 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-6 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-6 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 6px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-7 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-7 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-7 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 7px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-8 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-8 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-8 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 8px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-9 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-9 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-9 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 9px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-10 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-10 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-10 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-11 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-11 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-11 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 11px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-12 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-12 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-12 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 12px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-13 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-13 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-13 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 13px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-14 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-14 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-14 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 14px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-15 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-15 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-15 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 15px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-16 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-16 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-16 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 16px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-17 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-17 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-17 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 17px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-18 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-18 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-18 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 18px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-19 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-19 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-19 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 19px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-20 .wpmf-gallery-block-item img,
|
||||
.wpmf-has-border-radius-20 .wpmf-gallery-block-item .wpmf_overlay,
|
||||
.wpmf-has-border-radius-20 .wpmf-gallery-block-item .wpmf-gallery-block-item-remove {
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.wpmfslick .slick-dots {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.wpmfslick .wpmf-gallery-block-item {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wpmf-has-gutter-width-5 .wpmfslick .wpmf-gallery-block-item {
|
||||
padding: 2.5px;
|
||||
}
|
||||
|
||||
.wpmf-has-gutter-width-10 .wpmfslick .wpmf-gallery-block-item {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.wpmf-has-gutter-width-15 .wpmfslick .wpmf-gallery-block-item {
|
||||
padding: 7.5px;
|
||||
}
|
||||
|
||||
.wpmf-has-gutter-width-20 .wpmfslick .wpmf-gallery-block-item {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.wpmf-has-gutter-width-25 .wpmfslick .wpmf-gallery-block-item {
|
||||
padding: 12.5px;
|
||||
}
|
||||
|
||||
.wpmf-has-gutter-width-30 .wpmfslick .wpmf-gallery-block-item {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.wpmf-has-gutter-width-35 .wpmfslick .wpmf-gallery-block-item {
|
||||
padding: 17.5px;
|
||||
}
|
||||
|
||||
.wpmf-has-gutter-width-40 .wpmfslick .wpmf-gallery-block-item {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.wpmf-has-gutter-width-45 .wpmfslick .wpmf-gallery-block-item {
|
||||
padding: 22.5px;
|
||||
}
|
||||
|
||||
.wpmf-has-gutter-width-50 .wpmfslick .wpmf-gallery-block-item {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.wpmfBlockMasonry .wpmf-has-gutter-width-5 .wpmf-gallery-block-item-infos {
|
||||
margin: 2.5px;
|
||||
}
|
||||
|
||||
.wpmfBlockMasonry .wpmf-has-gutter-width-10 .wpmf-gallery-block-item-infos {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.wpmfBlockMasonry .wpmf-has-gutter-width-15 .wpmf-gallery-block-item-infos {
|
||||
margin: 7.5px;
|
||||
}
|
||||
|
||||
.wpmfBlockMasonry .wpmf-has-gutter-width-20 .wpmf-gallery-block-item-infos {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.wpmfBlockMasonry .wpmf-has-gutter-width-25 .wpmf-gallery-block-item-infos {
|
||||
margin: 12.5px;
|
||||
}
|
||||
|
||||
.wpmfBlockMasonry .wpmf-has-gutter-width-30 .wpmf-gallery-block-item-infos {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.wpmfBlockMasonry .wpmf-has-gutter-width-35 .wpmf-gallery-block-item-infos {
|
||||
margin: 17.5px;
|
||||
}
|
||||
|
||||
.wpmfBlockMasonry .wpmf-has-gutter-width-40 .wpmf-gallery-block-item-infos {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.wpmfBlockMasonry .wpmf-has-gutter-width-45 .wpmf-gallery-block-item-infos {
|
||||
margin: 22.5px;
|
||||
}
|
||||
|
||||
.wpmfBlockMasonry .wpmf-has-gutter-width-50 .wpmf-gallery-block-item-infos {
|
||||
margin: 25px;
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-has-gutter-width-5 li {
|
||||
padding: 2.5px;
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-has-gutter-width-10 li {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-has-gutter-width-15 li {
|
||||
padding: 7.5px;
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-has-gutter-width-20 li {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-has-gutter-width-25 li {
|
||||
padding: 12.5px;
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-has-gutter-width-30 li {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-has-gutter-width-35 li {
|
||||
padding: 17.5px;
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-has-gutter-width-40 li {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-has-gutter-width-45 li {
|
||||
padding: 22.5px;
|
||||
}
|
||||
|
||||
.wpmfDefault .wpmf-has-gutter-width-50 li {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.wpmf-has-columns-1 > li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wpmf_sl_gallery_folders {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.wpmf_sl_gallery_folders select {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
border: none;
|
||||
box-shadow: 1px 1px 12px #ccc;
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
.wpmf_sl_gallery_folders, .wpmf_btn_upload_img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.wpmf_spiner_block_gallery_loading {
|
||||
position: absolute !important;
|
||||
left: calc(50% - 10px) !important;
|
||||
top: calc(50% - 10px) !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.wpmf-has-gutter-width-10 .wpmf-viewport,
|
||||
.wpmf-has-gutter-width-15 .wpmf-viewport,
|
||||
.wpmf-has-gutter-width-20 .wpmf-viewport,
|
||||
.wpmf-has-gutter-width-25 .wpmf-viewport,
|
||||
.wpmf-has-gutter-width-30 .wpmf-viewport,
|
||||
.wpmf-has-gutter-width-35 .wpmf-viewport,
|
||||
.wpmf-has-gutter-width-40 .wpmf-viewport,
|
||||
.wpmf-has-gutter-width-45 .wpmf-viewport,
|
||||
.wpmf-has-gutter-width-50 .wpmf-viewport {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.wpmf_overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 888;
|
||||
background: rgba(10,6,6,0.75);
|
||||
display: none;
|
||||
}
|
||||
.portfolio_lightbox {
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left: 50%;
|
||||
margin-top: -18px;
|
||||
margin-left: -18px;
|
||||
display: none !important;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 36px;
|
||||
color: #393939 !important;
|
||||
background-color: #fff;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2em;
|
||||
z-index: 999;
|
||||
transition: opacity .3s ease-in-out,color .3s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out;
|
||||
}
|
||||
|
||||
.wpmfBlockMasonry .wpmf-gallery-block-item-infos:hover > .wpmf_overlay,
|
||||
.wpmfBlockMasonry .wpmf-gallery-block-item-infos:hover > .portfolio_lightbox{
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.wpmf-gallery-caption {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.wpmf-gallery-caption .title {
|
||||
color: #393939;
|
||||
font-family: Raleway;
|
||||
font-size: 13px !important;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wpmf-gallery-caption .excerpt{
|
||||
color: #9a9a9a;
|
||||
font-family: Raleway;
|
||||
font-size: 12px !important;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wpmf_gallery_img_msg {
|
||||
color: #ff8800;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items:not(.wpmfslick.wpmf-slick-crop-0) .square_thumbnail,
|
||||
.wpmf_square_thumbnail {
|
||||
/*overflow: hidden;*/
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
transition: opacity .1s;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items:not(.wpmfslick.wpmf-slick-crop-0) .square_thumbnail:after,
|
||||
.wpmf_square_thumbnail:after{
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items:not(.wpmfslick.wpmf-slick-crop-0) .square_thumbnail .img_centered,
|
||||
.wpmf_square_thumbnail .img_centered {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items:not(.wpmfslick.wpmf-slick-crop-0) .square_thumbnail .img_centered img,
|
||||
.wpmf_square_thumbnail .img_centered img {
|
||||
transform: translate(-50%, -50%) !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-height: 100%;
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover;
|
||||
padding: 0 !important;
|
||||
/*transition: ease all 500ms !important;*/
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items.ratio_default .wpmf-gallery-block-item .wpmf-gallery-block-item-infos:before {
|
||||
padding-top: 100%;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items.ratio_1_1 .wpmf-gallery-block-item .wpmf-gallery-block-item-infos:before,
|
||||
.gallery_comments_item .img_box_box {
|
||||
padding-top: 100%;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items.ratio_3_2 .wpmf-gallery-block-item .wpmf-gallery-block-item-infos:before {
|
||||
padding-top: calc(100%/3*2);
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items.ratio_2_3 .wpmf-gallery-block-item .wpmf-gallery-block-item-infos:before {
|
||||
padding-top: calc(100%/2*3);
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items.ratio_4_3 .wpmf-gallery-block-item .wpmf-gallery-block-item-infos:before {
|
||||
padding-top: calc(100%/4*3);
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items.ratio_3_4 .wpmf-gallery-block-item .wpmf-gallery-block-item-infos:before {
|
||||
padding-top: calc(100%/3*4);
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items.ratio_16_9 .wpmf-gallery-block-item .wpmf-gallery-block-item-infos:before {
|
||||
padding-top: calc(100%/16*9);
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items.ratio_9_16 .wpmf-gallery-block-item .wpmf-gallery-block-item-infos:before {
|
||||
padding-top: calc(100%/9*16);
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items.ratio_21_9 .wpmf-gallery-block-item .wpmf-gallery-block-item-infos:before {
|
||||
padding-top: calc(100%/21*9);
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wpmf-gallery-list-items.ratio_9_21 .wpmf-gallery-block-item .wpmf-gallery-block-item-infos:before {
|
||||
padding-top: calc(100%/9*21);
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
Reference in New Issue
Block a user