File: /var/www/html/wp-content/plugins/hover_effects_pack/js/gutenberg_block_src.js
"use strict";
(function (blocks, element, components, editor) {
const {
InspectorControls,
MediaUpload,
MediaUploadCheck
} = editor;
const {
ServerSideRender,
TextControl,
CheckboxControl,
SelectControl,
ColorPicker,
TextareaControl
} = components;
let initTO = [], repeats = 3;
function initHP() {
initTO.map(function (to) {
clearTimeout(to)
});
initTO = [];
for (let i = 1; i <= 3; i++) {
initTO.push(setTimeout(function () {
hp_document_ready();
}, i * 500));
}
}
const regularControlsRenders = {
text: ({ctrl_name, data, value, onChange}) => {
return [
<TextControl
label={data.label}
value={!!value?value:data.default}
onChange={onChange}
help={data.help}
/>
]
},
textarea: ({ctrl_name, data, value, onChange}) => {
return [
<TextareaControl
label={data.label}
value={value}
onChange={onChange}
help={data.help}
/>
]
},
checkbox: ({ctrl_name, data, value, onChange}) => {
return [
<CheckboxControl
label={data.label}
checked={!!value}
onChange={data => onChange(data ? ctrl_name : '')}
help={data.help}
/>,
]
},
select: ({ctrl_name, data, value, onChange}) => {
return [
<SelectControl
label={data.label}
value={value}
onChange={onChange}
options={data.options}
help={data.help}
/>
]
},
colorpicker: ({ctrl_name, data, value, onChange}) => {
return [
<label>{data.label}</label>,
<ColorPicker
label={data.label}
color={{hex: !!value ? value : null}}
onChangeComplete={color => onChange(color.hex)}
disableAlpha
help={data.help}
/>
]
}
};
let regularControls = {
img_title: {
type: 'string', default: null,
control: 'text',
label: 'Image Title Attribute',
help: 'Set image title attribute'
},
img_alt: {
type: 'string', default: null,
control: 'text',
label: 'Image Alt Attribute',
help: 'Set image alt attribute'
},
disable_popup: {
type: 'string', default: null,
control: 'checkbox',
label: 'Disable popup for this link',
help: 'Prevent error with open links to other site when popup is enabled'
},
link_tab: {
type: 'string', default: null,
control: 'checkbox',
label: 'Open link in new tab',
help: 'Works only when image popup effects disabled or previous checkbox is checked'
},
gallery_id: {
type: 'string', default: null,
control: 'text',
label: 'Image Gallery Id',
help: 'Images with same Gallery Id will be grouped, and you can navigate between them with prev/next buttons'
},
width: {
type: 'string', default: '150',
control: 'text',
label: 'Image Width',
help: 'Set image width'
},
height: {
type: 'string', default: '150',
control: 'text',
label: 'Image Height',
help: 'Set image height'
},
class: {
type: 'string', default: null,
control: 'text',
label: 'Custom link class',
help: 'You can add custom CSS class for link'
},
radius: {
type: 'string', default: null,
control: 'text',
label: 'Border radius',
help: 'You can add border radius in px'
},
effect: {
type: 'string', default: null,
control: 'select',
label: 'Effect',
help: 'Set image hover effect',
options: [
{value: 'none', label: 'None'},
{value: 'fade', label: 'Fade'},
{value: 'stroke', label: 'Stroke'},
{value: 'twist', label: 'Twist'},
{value: 'flip', label: 'Flip'},
{value: 'flow', label: 'Flow'},
{value: 'box', label: 'Box'},
{value: 'stripe', label: 'Stripe'},
{value: 'apart', label: 'Apart Horizontal'},
{value: 'apart', label: 'Apart Vertical'},
{value: 'diagonal', label: 'Diagonal'},
]
},
inverse_effect: {
type: 'string', default: null,
control: 'checkbox',
label: 'Inverse Behavior',
help: 'Hover layer will be visible by default and hidden on mouse hover'
},
color: {
type: 'string', default: null,
control: 'colorpicker',
label: 'Hover Color',
help: 'Use this field to override global value'
},
opacity: {
type: 'string', default: null,
control: 'select',
label: 'Opacity',
help: 'Set image hover opacity (except flip and twist effects)',
options: [
{value: '100', label: '100%'},
{value: '90', label: '90%'},
{value: '80', label: '80%'},
{value: '70', label: '70%'},
{value: '60', label: '60%'},
{value: '50', label: '50%'},
{value: '40', label: '40%'},
{value: '30', label: '30%'},
{value: '20', label: '20%'},
{value: '10', label: '10%'},
]
},
title: {
type: 'string', default: null,
control: 'text',
label: 'Image Hover Title',
help: 'Set title, that will go over image'
},
title_visible: {
type: 'string', default: null,
control: 'checkbox',
label: 'Disable Title Animation',
help: 'Disable Title Animation (Title Always Visible)'
},
title_delay: {
type: 'string', default: null,
control: 'select',
label: 'Title Effect Delay',
help: 'Set title effect delay',
options: [
{value: '', label: 'None'},
{value: '03', label: '0,3 seconds'},
{value: '06', label: '0,6 seconds'},
{value: '09', label: '0,9 seconds'},
{value: '12', label: '1,2 seconds'},
{value: '15', label: '1,5 seconds'},
]
},
title_slide: {
type: 'string', default: null,
control: 'select',
label: 'Title Slide Effect',
help: 'Set title slide effect direction',
options: [
{value: '', label: 'None'},
{value: 'from-left', label: 'From left'},
{value: 'from-right', label: 'From right'},
{value: 'from-bottom', label: 'From bottom'},
{value: 'from-top', label: 'From top'},
]
},
title_rotation: {
type: 'string', default: null,
control: 'select',
label: 'Title Rotation Effect',
help: 'Set title rotation effect direction and angle',
options: [
{value: '', label: 'None'},
{value: 'cw-90', label: 'Clockwise 90'},
{value: 'cw-180', label: 'Clockwise 180'},
{value: 'ccw-90', label: 'Counterclockwise 90'},
{value: 'ccw-180', label: 'Counterclockwise 180'},
]
},
title_scale: {
type: 'string', default: null,
control: 'checkbox',
label: 'Title Scale Effect',
help: 'Enable scale effect'
},
title_fade: {
type: 'string', default: null,
control: 'checkbox',
label: 'Title Fade Effect',
help: 'Enable fade effect'
},
text: {
type: 'string', default: null,
control: 'textarea',
label: 'Image Hover Text',
help: 'Set text, that will go over image. You can use HTML tags'
},
text_visible: {
type: 'string', default: null,
control: 'checkbox',
label: 'Disable Text Animation',
help: 'Disable Text Animation (Text Always Visible)'
},
text_delay: {
type: 'string', default: null,
control: 'select',
label: 'Text Effect Delay',
help: 'Set text effect delay',
options: [
{value: '', label: 'None'},
{value: '03', label: '0,3 seconds'},
{value: '06', label: '0,6 seconds'},
{value: '09', label: '0,9 seconds'},
{value: '12', label: '1,2 seconds'},
{value: '15', label: '1,5 seconds'},
]
},
text_slide: {
type: 'string', default: null,
control: 'select',
label: 'Text Slide Effect',
help: 'Set text slide effect direction',
options: [
{value: '', label: 'None'},
{value: 'from-left', label: 'From left'},
{value: 'from-right', label: 'From right'},
{value: 'from-bottom', label: 'From bottom'},
{value: 'from-top', label: 'From top'},
]
},
text_rotation: {
type: 'string', default: null,
control: 'select',
label: 'Text Rotation Effect',
help: 'Set text rotation effect direction and angle',
options: [
{value: '', label: 'None'},
{value: 'cw-90', label: 'Clockwise 90'},
{value: 'cw-180', label: 'Clockwise 180'},
{value: 'ccw-90', label: 'Counterclockwise 90'},
{value: 'ccw-180', label: 'Counterclockwise 180'},
]
},
text_scale: {
type: 'string', default: null,
control: 'checkbox',
label: 'Text Scale Effect',
help: 'Enable scale effect'
},
text_fade: {
type: 'string', default: null,
control: 'checkbox',
label: 'Text Fade Effect',
help: 'Enable fade effect'
},
};
blocks.registerBlockType('hoverpack/block', {
title: 'Hover Effects Pack',
icon: 'format-image',
category: 'common',
attributes: {
img: {
type: 'string',
default: null
},
img_id: {
type: 'string',
default: null
},
link: {
type: 'string',
default: null
},
...regularControls
},
edit: function (props) {
function openEditWindow() {
window.hp_openEditWindow(function (options) {
props.setAttributes(options);
});
}
const {
img, link, img_id
} = props.attributes;
const {
setAttributes
} = props;
let CH_HOOKS = {};
function attrChangedHook(attr, cb) {
let el = CH_HOOKS[attr] || [];
el.push(cb);
CH_HOOKS[attr] = el;
}
function callHook(attr, value) {
if (CH_HOOKS[attr]) {
CH_HOOKS[attr].map(fn => fn.call(null, value));
}
}
function onAttrChanged(attr, value) {
let d = {};
d[attr] = value;
callHook(attr, value);
setAttributes(d);
}
function onAttrCb(attr) {
return function (val) {
onAttrChanged(attr, val);
}
}
attrChangedHook('img', (img) => {
onAttrChanged('link', img);
});
const controlsRendered = [];
for (let ctrl_name in regularControls) {
let data = regularControls[ctrl_name];
controlsRendered.push(...regularControlsRenders[data.control]({
ctrl_name: ctrl_name,
data: data,
value: props.attributes[ctrl_name],
onChange: onAttrCb(ctrl_name)
}));
}
let controls = props.isSelected &&
(
<InspectorControls
className="hoverpack-inspector-controls"
>
<div className="hoverpack-inspector-controls">
<div className="control-item inline-item">
<label>Image</label>
<MediaUploadCheck>
<MediaUpload
type="image"
onSelect={(img) => {
onAttrChanged('img', img.url);
onAttrChanged('img_id', String(img.id));
}}
value={img}
render={({open}) => (
<button
type="button"
onClick={open}
className="button inline-button"
>
Select the image
</button>
)}
/>
</MediaUploadCheck>
<TextControl
label=""
value={img}
onChange={onAttrCb('img')}
help="Select the image"
/>
</div>
<div className="control-item">
<TextControl
label="Image link"
value={link}
onChange={onAttrCb('link')}
help="Set image link address"
/>
</div>
{controlsRendered}
</div>
</InspectorControls>
);
initHP();
return [
controls,
<ServerSideRender
block="hoverpack/block"
attributes={props.attributes}
/>
]
},
save: function () {
return null;
},
});
}(
window.wp.blocks,
window.wp.element,
window.wp.components,
window.wp.editor
));