plugin updates
This commit is contained in:
Tony Volpe
@@ -0,0 +1,301 @@
|
||||
// External Dependencies
|
||||
import React, {Component} from 'react';
|
||||
import $ from 'jquery';
|
||||
// Internal Dependencies
|
||||
import './style.css';
|
||||
|
||||
class WpmfGalleryDivi extends Component {
|
||||
|
||||
static slug = 'wpmf_gallery_divi';
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
html: '',
|
||||
loading: true
|
||||
};
|
||||
this.wrap = React.createRef();
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
if (this.props.items !== '') {
|
||||
this.loadHtml(this.props);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (this.props.items !== nextProps.items || this.props.aspect_ratio !== nextProps.aspect_ratio || this.props.columns !== nextProps.columns || this.props.theme !== nextProps.theme || this.props.size !== nextProps.size || this.props.orderby !== nextProps.orderby || this.props.order !== nextProps.order || this.props.border_radius !== nextProps.border_radius || this.props.gutterwidth !== nextProps.gutterwidth
|
||||
|| this.props.border_width !== nextProps.border_width || this.props.border_color !== nextProps.border_color || this.props.border_style !== nextProps.border_style
|
||||
|| this.props.enable_shadow !== nextProps.enable_shadow || this.props.shadow_color !== nextProps.shadow_color || this.props.shadow_horizontal !== nextProps.shadow_horizontal || this.props.shadow_vertical !== nextProps.shadow_vertical || this.props.shadow_blur !== nextProps.shadow_blur || this.props.shadow_spread !== nextProps.shadow_spread
|
||||
|| this.props.gallery_folders !== nextProps.gallery_folders || this.props.gallery_folder_id !== nextProps.gallery_folder_id) {
|
||||
this.loadHtml(nextProps);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.items !== '') {
|
||||
let t = this;
|
||||
let a = setInterval(function () {
|
||||
if (t.props.theme === 'masonry' || t.props.theme === 'portfolio') {
|
||||
if ($(t.wrap.current).find('.gallery-masonry').length) {
|
||||
t.initMasonry();
|
||||
clearInterval(a);
|
||||
}
|
||||
}
|
||||
|
||||
if (t.props.theme === 'slider') {
|
||||
if ($(t.wrap.current).find('.wpmfslick').length) {
|
||||
t.initSlider();
|
||||
clearInterval(a);
|
||||
}
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
// Deselect images when deselecting the block
|
||||
if (this.props.items !== '' && !(this.props.items === prevProps.items && this.props.aspect_ratio === prevProps.aspect_ratio && this.props.columns === prevProps.columns && this.props.theme === prevProps.theme && this.props.size === prevProps.size && this.props.orderby === prevProps.orderby && this.props.order === prevProps.order && this.props.border_radius === prevProps.border_radius && this.props.gutterwidth === prevProps.gutterwidth && this.props.border_width === prevProps.border_width && this.props.border_color === prevProps.border_color && this.props.border_style === prevProps.border_style && this.props.enable_shadow === prevProps.enable_shadow && this.props.shadow_color === prevProps.shadow_color && this.props.shadow_horizontal === prevProps.shadow_horizontal && this.props.shadow_vertical === prevProps.shadow_vertical && this.props.shadow_blur === prevProps.shadow_blur && this.props.shadow_spread === prevProps.shadow_spread && this.props.gallery_folders === prevProps.gallery_folders && this.props.gallery_folder_id === prevProps.gallery_folder_id)) {
|
||||
let t = this;
|
||||
let a = setInterval(function () {
|
||||
if (t.props.theme === 'masonry' || t.props.theme === 'portfolio') {
|
||||
if ($(t.wrap.current).find('.gallery-masonry').length) {
|
||||
t.initMasonry();
|
||||
clearInterval(a);
|
||||
}
|
||||
}
|
||||
|
||||
if (t.props.theme === 'slider') {
|
||||
if ($(t.wrap.current).find('.wpmfslick').length) {
|
||||
if (t.props.aspect_ratio !== prevProps.aspect_ratio) {
|
||||
t.initSlider(true);
|
||||
} else {
|
||||
t.initSlider();
|
||||
}
|
||||
clearInterval(a);
|
||||
}
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
calculateGrid($container) {
|
||||
let columns = parseInt($container.data('wpmfcolumns'));
|
||||
let gutterWidth = $container.data('gutterWidth');
|
||||
let containerWidth = $container.width();
|
||||
|
||||
if (isNaN(gutterWidth)) {
|
||||
gutterWidth = 5;
|
||||
} else if (gutterWidth > 500 || gutterWidth < 0) {
|
||||
gutterWidth = 5;
|
||||
}
|
||||
|
||||
if (parseInt(columns) < 2 || containerWidth <= 450) {
|
||||
columns = 2;
|
||||
}
|
||||
|
||||
gutterWidth = parseInt(gutterWidth);
|
||||
|
||||
let allGutters = gutterWidth * (columns - 1);
|
||||
let contentWidth = containerWidth - allGutters;
|
||||
|
||||
let columnWidth = Math.floor(contentWidth / columns);
|
||||
|
||||
return {columnWidth: columnWidth, gutterWidth: gutterWidth, columns: columns};
|
||||
};
|
||||
|
||||
initMasonry() {
|
||||
let $container = $(this.wrap.current).find('.gallery-masonry');
|
||||
if ($container.is(':hidden')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ($container.hasClass('masonry')) {
|
||||
$container.masonry('destroy');
|
||||
}
|
||||
|
||||
var t = this;
|
||||
$container.imagesLoaded(function () {
|
||||
var $postBox = $container.children('.wpmf-gallery-item');
|
||||
var o = t.calculateGrid($container);
|
||||
$postBox.css({'width': o.columnWidth + 'px', 'margin-bottom': o.gutterWidth + 'px'});
|
||||
$container.masonry({
|
||||
itemSelector: '.wpmf-gallery-item',
|
||||
columnWidth: o.columnWidth,
|
||||
gutter: o.gutterWidth,
|
||||
isFitWidth: true,
|
||||
transitionDuration: 0,
|
||||
});
|
||||
$container.css('visibility', 'visible');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* run masonry layout
|
||||
*/
|
||||
initSlider(reload = false) {
|
||||
let $slider_container = $(this.wrap.current).find('.wpmfslick');
|
||||
if ($slider_container.is(':hidden')) {
|
||||
return;
|
||||
}
|
||||
|
||||
let columns = parseInt($slider_container.data('wpmfcolumns'));
|
||||
let autoplay = $slider_container.data('auto_animation');
|
||||
if ($slider_container.hasClass('slick-initialized') || reload) {
|
||||
$slider_container.slick('destroy');
|
||||
}
|
||||
|
||||
$slider_container.imagesLoaded(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,
|
||||
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
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
$slider_container.slick(slick_args);
|
||||
});
|
||||
}
|
||||
|
||||
loadHtml(props) {
|
||||
if (!this.state.loading) {
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
}
|
||||
let img_shadow = '';
|
||||
if (props.enable_shadow === 'on') {
|
||||
img_shadow = props.shadow_horizontal + ' ' + props.shadow_vertical + ' ' + props.shadow_blur + ' ' + props.shadow_spread + ' ' + props.shadow_color;
|
||||
}
|
||||
let datas = {
|
||||
items: props.items,
|
||||
display: props.theme,
|
||||
columns: props.columns,
|
||||
size: props.size,
|
||||
targetsize: props.targetsize,
|
||||
link: props.action,
|
||||
orderby: props.orderby,
|
||||
order: props.order,
|
||||
gutterwidth: props.gutterwidth,
|
||||
border_width: props.border_width,
|
||||
border_style: props.border_style,
|
||||
border_color: props.border_color,
|
||||
img_shadow: img_shadow,
|
||||
border_radius: props.border_radius,
|
||||
wpmf_autoinsert: props.gallery_folders,
|
||||
wpmf_folder_id: props.gallery_folder_id
|
||||
};
|
||||
|
||||
fetch(window.et_fb_options.ajaxurl + `?action=wpmf_divi_load_gallery_html&et_admin_load_nonce=${window.et_fb_options.et_admin_load_nonce}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(datas)
|
||||
} )
|
||||
.then(res => res.json())
|
||||
.then(
|
||||
(result) => {
|
||||
this.setState({
|
||||
html: result.html,
|
||||
loading: false
|
||||
});
|
||||
},
|
||||
// errors
|
||||
(error) => {
|
||||
this.setState({
|
||||
html: '',
|
||||
loading: true
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const loadingIcon = (
|
||||
<svg className={'wpfd-loading'} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
||||
<g transform="translate(25 50)">
|
||||
<circle cx="0" cy="0" r="10" fill="#cfcfcf" transform="scale(0.590851 0.590851)">
|
||||
<animateTransform attributeName="transform" type="scale" begin="-0.8666666666666667s" calcMode="spline"
|
||||
keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0.5;1;0.5" keyTimes="0;0.5;1" dur="2.6s"
|
||||
repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<g transform="translate(50 50)">
|
||||
<circle cx="0" cy="0" r="10" fill="#cfcfcf" transform="scale(0.145187 0.145187)">
|
||||
<animateTransform attributeName="transform" type="scale" begin="-0.43333333333333335s" calcMode="spline"
|
||||
keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0.5;1;0.5" keyTimes="0;0.5;1" dur="2.6s"
|
||||
repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<g transform="translate(75 50)">
|
||||
<circle cx="0" cy="0" r="10" fill="#cfcfcf" transform="scale(0.0339143 0.0339143)">
|
||||
<animateTransform attributeName="transform" type="scale" begin="0s" calcMode="spline"
|
||||
keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0.5;1;0.5" keyTimes="0;0.5;1" dur="2.6s"
|
||||
repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
if (this.props.items === '' && parseInt(this.props.gallery_folder_id) === 0) {
|
||||
return (
|
||||
<div className="wpmf-divi-container wpmf-gallery-divi-wrap" ref={this.wrap}>
|
||||
<div id="divi-gallery-placeholder" className="divi-gallery-placeholder">
|
||||
<span className="wpmf-divi-message">
|
||||
{'Please add some images to the gallery to activate the preview'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.state.loading) {
|
||||
return (
|
||||
<div className="wpmf-divi-container wpmf-gallery-divi-wrap" ref={this.wrap}>
|
||||
<div className={'wpmf-loading-wrapper'}>
|
||||
<i className={'wpmf-loading'}>{loadingIcon}</i>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!this.state.loading) {
|
||||
return (
|
||||
<div className="wpmf-gallery-divi-wrap" ref={this.wrap} dangerouslySetInnerHTML={{__html: this.state.html}}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default WpmfGalleryDivi;
|
||||
@@ -0,0 +1,377 @@
|
||||
<?php
|
||||
/* Prohibit direct script loading */
|
||||
defined('ABSPATH') || die('No direct script access allowed!');
|
||||
|
||||
/**
|
||||
* Class WpmfGalleryDivi
|
||||
*/
|
||||
class WpmfGalleryDivi extends ET_Builder_Module
|
||||
{
|
||||
|
||||
/**
|
||||
* Module slug
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
public $slug = 'wpmf_gallery_divi';
|
||||
|
||||
/**
|
||||
* Whether module support visual builder. e.g `on` or `off`.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
public $vb_support = 'on';
|
||||
|
||||
/**
|
||||
* Credits of all custom modules.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://www.joomunited.com/',
|
||||
'author' => 'Joomunited',
|
||||
'author_uri' => 'https://www.joomunited.com/',
|
||||
);
|
||||
|
||||
/**
|
||||
* Init
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function init()
|
||||
{
|
||||
$this->name = esc_html__('WPMF Gallery', 'wpmf');
|
||||
}
|
||||
|
||||
/**
|
||||
* Advanced Fields Config
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function get_advanced_fields_config() // phpcs:ignore PSR1.Methods.CamelCapsMethodName.NotCamelCaps -- Method extends from ET_Builder_Module class
|
||||
{
|
||||
return array(
|
||||
'button' => false,
|
||||
'link_options' => false
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the settings fields data for this element.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function get_fields() // phpcs:ignore PSR1.Methods.CamelCapsMethodName.NotCamelCaps -- Method extends from ET_Builder_Module class
|
||||
{
|
||||
$settings = wpmfGetOption('gallery_settings');
|
||||
return array(
|
||||
'theme' => array(
|
||||
'label' => esc_html__('Theme', 'wpmf'),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'masonry' => esc_html__('Masonry', 'wpmf'),
|
||||
'default' => esc_html__('Default', 'wpmf'),
|
||||
'portfolio' => esc_html__('Portfolio', 'wpmf'),
|
||||
'slider' => esc_html__('Slider', 'wpmf')
|
||||
),
|
||||
'default' => 'default',
|
||||
'default_on_front' => 'default'
|
||||
),
|
||||
'items' => array(
|
||||
'label' => esc_html__('Images', 'wpmf'),
|
||||
'type' => 'upload-gallery',
|
||||
'option_category' => 'configuration',
|
||||
'computed_affects' => array(
|
||||
'__gallery',
|
||||
),
|
||||
'default' => '',
|
||||
'default_on_front' => '',
|
||||
),
|
||||
'aspect_ratio' => array(
|
||||
'label' => esc_html__('Aspect ratio', 'wpmf'),
|
||||
'description' => esc_html__('Aspect ratio for default, slider, portfolio theme', 'wpmf'),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'default' => esc_html__('Default', 'wpmf'),
|
||||
'1_1' => '1:1',
|
||||
'3_2' => '3:2',
|
||||
'2_3' => '2:3',
|
||||
'4_3' => '4:3',
|
||||
'3_4' => '3:4',
|
||||
'16_9' => '16:9',
|
||||
'9_16' => '9:16',
|
||||
'21_9' => '21:9',
|
||||
'9_21' => '9:21'
|
||||
),
|
||||
'default' => '1_1',
|
||||
'default_on_front' => '1_1'
|
||||
),
|
||||
'columns' => array(
|
||||
'label' => esc_html__('Columns', 'wpmf'),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => 3,
|
||||
'default_on_front' => $settings['theme']['masonry_theme']['columns'],
|
||||
'validate_unit' => false,
|
||||
'unitless' => true,
|
||||
'range_settings' => array(
|
||||
'min' => 1,
|
||||
'max' => 8,
|
||||
'step' => 1
|
||||
)
|
||||
),
|
||||
'size' => array(
|
||||
'label' => esc_html__('Image Size', 'wpmf'),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => apply_filters('image_size_names_choose', array(
|
||||
'thumbnail' => __('Thumbnail', 'wpmf'),
|
||||
'medium' => __('Medium', 'wpmf'),
|
||||
'large' => __('Large', 'wpmf'),
|
||||
'full' => __('Full Size', 'wpmf'),
|
||||
)),
|
||||
'default' => $settings['theme']['masonry_theme']['size'],
|
||||
'default_on_front' => $settings['theme']['masonry_theme']['size']
|
||||
),
|
||||
'targetsize' => array(
|
||||
'label' => esc_html__('Lightbox Size', 'wpmf'),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => apply_filters('image_size_names_choose', array(
|
||||
'thumbnail' => __('Thumbnail', 'wpmf'),
|
||||
'medium' => __('Medium', 'wpmf'),
|
||||
'large' => __('Large', 'wpmf'),
|
||||
'full' => __('Full Size', 'wpmf'),
|
||||
)),
|
||||
'default' => $settings['theme']['masonry_theme']['targetsize'],
|
||||
'default_on_front' => $settings['theme']['masonry_theme']['targetsize']
|
||||
),
|
||||
'action' => array(
|
||||
'label' => esc_html__('Action On Click', 'wpmf'),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'file' => esc_html__('Lightbox', 'wpmf'),
|
||||
'post' => esc_html__('Attachment Page', 'wpmf'),
|
||||
'none' => esc_html__('None', 'wpmf'),
|
||||
),
|
||||
'default' => $settings['theme']['masonry_theme']['link'],
|
||||
'default_on_front' => $settings['theme']['masonry_theme']['link']
|
||||
),
|
||||
'orderby' => array(
|
||||
'label' => esc_html__('Order by', 'wpmf'),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'post__in' => esc_html__('Custom', 'wpmf'),
|
||||
'rand' => esc_html__('Random', 'wpmf'),
|
||||
'title' => esc_html__('Title', 'wpmf'),
|
||||
'date' => esc_html__('Date', 'wpmf')
|
||||
),
|
||||
'default' => $settings['theme']['masonry_theme']['orderby'],
|
||||
'default_on_front' => $settings['theme']['masonry_theme']['orderby']
|
||||
),
|
||||
'order' => array(
|
||||
'label' => esc_html__('Order', 'wpmf'),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'ASC' => esc_html__('Ascending', 'wpmf'),
|
||||
'DESC' => esc_html__('Descending', 'wpmf')
|
||||
),
|
||||
'default' => $settings['theme']['masonry_theme']['order'],
|
||||
'default_on_front' => $settings['theme']['masonry_theme']['order']
|
||||
),
|
||||
'gutterwidth' => array(
|
||||
'label' => esc_html__('Gutter', 'wpmf'),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => 5,
|
||||
'default_on_front' => 5,
|
||||
'validate_unit' => false,
|
||||
'unitless' => true,
|
||||
'range_settings' => array(
|
||||
'min' => 0,
|
||||
'max' => 100,
|
||||
'step' => 5
|
||||
)
|
||||
),
|
||||
'border_radius' => array(
|
||||
'label' => esc_html__('Border Radius', 'wpmf'),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => 0,
|
||||
'default_on_front' => 0,
|
||||
'validate_unit' => false,
|
||||
'unitless' => true,
|
||||
'range_settings' => array(
|
||||
'min' => 0,
|
||||
'max' => 20,
|
||||
'step' => 1
|
||||
)
|
||||
),
|
||||
'border_style' => array(
|
||||
'label' => esc_html__('Border Type', 'wpmf'),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'solid' => esc_html__('Solid', 'wpmf'),
|
||||
'double' => esc_html__('Double', 'wpmf'),
|
||||
'dotted' => esc_html__('Dotted', 'wpmf'),
|
||||
'dashed' => esc_html__('Dashed', 'wpmf'),
|
||||
'groove' => esc_html__('Groove', 'wpmf')
|
||||
),
|
||||
'default' => 'solid',
|
||||
'default_on_front' => 'solid'
|
||||
),
|
||||
'border_width' => array(
|
||||
'label' => esc_html__('Border Width', 'wpmf'),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => 0,
|
||||
'default_on_front' => 0,
|
||||
'validate_unit' => false,
|
||||
'unitless' => true,
|
||||
'range_settings' => array(
|
||||
'min' => 0,
|
||||
'max' => 30,
|
||||
'step' => 1
|
||||
)
|
||||
),
|
||||
'border_color' => array(
|
||||
'label' => esc_html__('Border Color', 'wpmf'),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'default' => '#cccccc',
|
||||
'default_on_front' => '#cccccc'
|
||||
),
|
||||
'enable_shadow' => array(
|
||||
'label' => esc_html__('Enable Shadow', 'wpmf'),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'on' => esc_html__('On', 'wpmf'),
|
||||
'off' => esc_html__('Off', 'wpmf'),
|
||||
),
|
||||
'default' => 'off',
|
||||
'default_on_front' => 'off'
|
||||
),
|
||||
'shadow_color' => array(
|
||||
'label' => esc_html__('Shadow Color', 'wpmf'),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'default' => '#cccccc',
|
||||
'default_on_front' => '#cccccc'
|
||||
),
|
||||
'shadow_horizontal' => array(
|
||||
'label' => esc_html__('Horizontal', 'wpmf'),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'validate_unit' => true,
|
||||
'default' => '0px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '0px',
|
||||
'range_settings' => array(
|
||||
'min' => '-50',
|
||||
'max' => '50',
|
||||
'step' => '1'
|
||||
)
|
||||
),
|
||||
'shadow_vertical' => array(
|
||||
'label' => esc_html__('Vertical', 'wpmf'),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'validate_unit' => true,
|
||||
'default' => '0px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '0px',
|
||||
'range_settings' => array(
|
||||
'min' => '-50',
|
||||
'max' => '50',
|
||||
'step' => '1'
|
||||
)
|
||||
),
|
||||
'shadow_blur' => array(
|
||||
'label' => esc_html__('Blur', 'wpmf'),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'validate_unit' => true,
|
||||
'default' => '0px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '0px',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '50',
|
||||
'step' => '1'
|
||||
)
|
||||
),
|
||||
'shadow_spread' => array(
|
||||
'label' => esc_html__('Spread', 'wpmf'),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'validate_unit' => true,
|
||||
'default' => '0px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '0px',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '50',
|
||||
'step' => '1'
|
||||
)
|
||||
),
|
||||
'gallery_folders' => array(
|
||||
'label' => esc_html__('Gallery From Folder', 'wpmf'),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'on' => esc_html__('On', 'wpmf'),
|
||||
'off' => esc_html__('Off', 'wpmf'),
|
||||
),
|
||||
'default' => 'off',
|
||||
'default_on_front' => 'off'
|
||||
),
|
||||
'gallery_folder_id' => array(
|
||||
'label' => esc_html__('Choose a Folder', 'wpmf'),
|
||||
'type' => 'text',
|
||||
'option_category' => 'configuration',
|
||||
'default' => 0,
|
||||
'default_on_front' => 0
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Render content
|
||||
*
|
||||
* @param array $attrs List of attributes.
|
||||
* @param string $content Content being processed.
|
||||
* @param string $render_slug Slug of module that is used for rendering output.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function render($attrs, $content, $render_slug) // phpcs:ignore PEAR.Functions.ValidDefaultValue.NotAtEnd -- Method extends from ET_Builder_Module class
|
||||
{
|
||||
$gallery_folders = (!empty($this->props['gallery_folders']) && $this->props['gallery_folders'] === 'on') ? 1 : 0;
|
||||
if (!empty($this->props['enable_shadow']) && $this->props['enable_shadow'] === 'on') {
|
||||
$img_shadow = $this->props['shadow_horizontal'] . ' ' . $this->props['shadow_vertical'] . ' ' . $this->props['shadow_blur'] . ' ' . $this->props['shadow_spread'] . ' ' . $this->props['shadow_color'];
|
||||
} else {
|
||||
$img_shadow = '';
|
||||
}
|
||||
if (empty($this->props['items']) && empty($this->props['gallery_folder_id'])) {
|
||||
$html = '<div class="wpmf-divi-container">
|
||||
<div id="divi-gallery-placeholder" class="divi-gallery-placeholder">
|
||||
<span class="wpmf-divi-message">
|
||||
' . esc_html__('Please add some images to the gallery to activate the preview', 'wpmf') . '
|
||||
</span>
|
||||
</div>
|
||||
</div>';
|
||||
return $html;
|
||||
}
|
||||
|
||||
return do_shortcode('[wpmf_gallery is_divi="1" include="'. esc_attr($this->props['items']) .'" display="' . esc_attr($this->props['theme']) . '" columns="' . esc_attr($this->props['columns']) . '" size="' . esc_attr($this->props['size']) . '" targetsize="' . esc_attr($this->props['targetsize']) . '" link="' . esc_attr($this->props['action']) . '" wpmf_orderby="' . esc_attr($this->props['orderby']) . '" wpmf_order="' . esc_attr($this->props['order']) . '" gutterwidth="' . esc_attr($this->props['gutterwidth']) . '" border_width="' . esc_attr($this->props['border_width']) . '" border_style="' . esc_attr($this->props['border_style']) . '" border_color="' . esc_attr($this->props['border_color']) . '" img_shadow="' . esc_attr($img_shadow) . '" img_border_radius="' . esc_attr($this->props['border_radius']) . '" wpmf_autoinsert="' . esc_attr($gallery_folders) . '" wpmf_folder_id="' . esc_attr($this->props['gallery_folder_id']) . '" aspect_ratio="' . esc_attr($this->props['aspect_ratio']) . '"]');
|
||||
}
|
||||
}
|
||||
|
||||
new WpmfGalleryDivi;
|
||||
@@ -0,0 +1,155 @@
|
||||
.gallery-columns-1 .wpmf-gallery-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-columns-2 .wpmf-gallery-item {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.gallery-columns-3 .wpmf-gallery-item {
|
||||
width: calc(100%/3);
|
||||
}
|
||||
|
||||
.gallery-columns-4 .wpmf-gallery-item {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.gallery-columns-5 .wpmf-gallery-item {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.gallery-columns-6 .wpmf-gallery-item {
|
||||
width: calc(100%/6);
|
||||
}
|
||||
|
||||
.gallery-columns-7 .wpmf-gallery-item {
|
||||
width: calc(100%/7);
|
||||
}
|
||||
|
||||
.gallery-columns-8 .wpmf-gallery-item {
|
||||
width: 12.5%
|
||||
}
|
||||
|
||||
.gallery-columns-9 .wpmf-gallery-item {
|
||||
width: calc(100%/9);
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-1 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-1.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-1 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 1px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-2 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-2.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-2 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 2px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-3 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-3.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-3 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 3px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-4 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-4.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-4 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 4px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-5 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-5.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-5 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-6 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-6.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-6 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 6px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-7 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-7.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-7 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 7px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-8 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-8.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-8 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 8px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-9 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-9.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-9 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 9px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-10 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-10.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-10 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-11 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-11.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-11 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 11px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-12 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-12.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-12 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 12px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-13 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-13.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-13 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 13px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-14 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-14.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-14 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 14px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-15 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-15.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-15 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 15px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-16 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-16.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-16 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 16px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-17 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-17.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-17 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 17px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-18 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-18.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-18 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 18px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-19 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-19.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-19 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 19px
|
||||
}
|
||||
|
||||
.wpmf-has-border-radius-20 .wpmf-gallery-item img,
|
||||
.wpmf-has-border-radius-20.wpmfslick .wpmf-gallery-item .wpmf-gallery-icon,
|
||||
.wpmf-has-border-radius-20 .wpmf-gallery-item .wpmf_overlay {
|
||||
border-radius: 20px
|
||||
}
|
||||
Reference in New Issue
Block a user