'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

(function (wpI18n, wpBlocks, wpElement, wpEditor, wpBlockEditor, wpComponents) {
    var __ = wpI18n.__;
    var Component = wpElement.Component,
        Fragment = wpElement.Fragment;
    var registerBlockType = wpBlocks.registerBlockType;
    var InspectorControls = wpBlockEditor.InspectorControls,
        MediaUpload = wpBlockEditor.MediaUpload,
        BlockControls = wpBlockEditor.BlockControls,
        PanelColorSettings = wpBlockEditor.PanelColorSettings;
    var mediaUpload = wpEditor.mediaUpload;
    var PanelBody = wpComponents.PanelBody,
        ToggleControl = wpComponents.ToggleControl,
        SelectControl = wpComponents.SelectControl,
        TextControl = wpComponents.TextControl,
        Text = wpComponents.Text,
        Button = wpComponents.Button,
        Tooltip = wpComponents.Tooltip,
        ToolbarGroup = wpComponents.ToolbarGroup,
        FormFileUpload = wpComponents.FormFileUpload,
        Placeholder = wpComponents.Placeholder,
        RangeControl = wpComponents.RangeControl,
        QueryControls = wpComponents.QueryControls;

    var $ = jQuery;
    var ALLOWED_MEDIA_TYPES = ['image'];
    var _lodash = lodash,
        pick = _lodash.pick,
        get = _lodash.get;
    var isBlobURL = wp.blob.isBlobURL;

    var pickRelevantMediaFiles = function pickRelevantMediaFiles(image) {
        var imageProps = pick(image, ['alt', 'id', 'link', 'caption', 'title', 'date', 'media_details']);
        imageProps.url = get(image, ['sizes', 'large', 'url']) || get(image, ['media_details', 'sizes', 'large', 'source_url']) || image.url;
        return imageProps;
    };

    var wpmf_local_categories = [];
    var wpmf_cloud_categories = [];
    var ij = 0;
    var space = '--';

    if (typeof wpmf === "undefined") {
        return;
    }

    $.each(wpmf.vars.wpmf_categories_order || [], function (key, id) {
        var term = wpmf.vars.wpmf_categories[id];
        if (typeof term !== "undefined") {
            if (0 !== parseInt(term.id)) {
                if (typeof term.depth === 'undefined') {
                    term.depth = 0;
                }

                if (typeof term.drive_type !== "undefined" && term.drive_type !== '') {
                    wpmf_cloud_categories[ij] = {
                        label: space.repeat(term.depth) + term.label,
                        value: term.id
                    };
                } else {
                    wpmf_local_categories[ij] = {
                        label: space.repeat(term.depth) + term.label,
                        value: term.id
                    };
                }

                ij++;
            }
        }
    });

    var folders_length = ij;
    var wpmf_categories = [].concat(wpmf_local_categories, wpmf_cloud_categories);

    var WpmfDefaultTheme = function (_Component) {
        _inherits(WpmfDefaultTheme, _Component);

        function WpmfDefaultTheme() {
            _classCallCheck(this, WpmfDefaultTheme);

            return _possibleConstructorReturn(this, (WpmfDefaultTheme.__proto__ || Object.getPrototypeOf(WpmfDefaultTheme)).apply(this, arguments));
        }

        /**
         * Un Selected image
         */


        _createClass(WpmfDefaultTheme, [{
            key: 'unSelectedImage',
            value: function unSelectedImage(e) {
                if (!$(e.target).hasClass('wpmf-gallery-image')) {
                    this.props.setStateImgSelectedID(0);
                    this.props.setStateImgInfos('', '', '');
                }
            }
        }, {
            key: 'loadImageInfos',
            value: function loadImageInfos(image) {
                if (this.props.selectedImageId !== image.id) {
                    this.props.setStateImgSelectedID(image.id);
                    this.props.setStateImgInfos(image.title, image.caption, image.custom_link, image.link_target);
                } else {
                    this.props.setStateImgSelectedID();
                    this.props.setStateImgInfos();
                }
            }
        }, {
            key: 'render',
            value: function render() {
                var _this2 = this;

                var _props = this.props,
                    attributes = _props.attributes,
                    setAttributes = _props.setAttributes,
                    clientId = _props.clientId;
                var images = attributes.images,
                    aspect_ratio = attributes.aspect_ratio,
                    columns = attributes.columns,
                    size = attributes.size,
                    img_border_radius = attributes.img_border_radius,
                    gutterwidth = attributes.gutterwidth,
                    borderStyle = attributes.borderStyle,
                    borderWidth = attributes.borderWidth,
                    borderColor = attributes.borderColor,
                    hoverShadowH = attributes.hoverShadowH,
                    hoverShadowV = attributes.hoverShadowV,
                    hoverShadowBlur = attributes.hoverShadowBlur,
                    hoverShadowSpread = attributes.hoverShadowSpread,
                    hoverShadowColor = attributes.hoverShadowColor;


                return React.createElement(
                    'div',
                    { className: 'wpmf-gallery-block wpmfDefault', onClick: this.unSelectedImage.bind(this) },
                    React.createElement(
                        'style',
                        null,
                        borderStyle !== 'none' && '#block-' + clientId + ' .wpmf-gallery-block ul li img {border: ' + borderColor + ' ' + borderWidth + 'px ' + borderStyle + ';}',
                        (parseInt(hoverShadowH) !== 0 || parseInt(hoverShadowV) !== 0 || parseInt(hoverShadowBlur) !== 0 || parseInt(hoverShadowSpread) !== 0) && '#block-' + clientId + ' .wpmf-gallery-block ul li:hover img {box-shadow: ' + hoverShadowH + 'px ' + hoverShadowV + 'px ' + hoverShadowBlur + 'px ' + hoverShadowSpread + 'px ' + hoverShadowColor + ';}'
                    ),
                    React.createElement(
                        'ul',
                        {
                            className: 'wpmf-gallery-list-items gallery-columns-' + columns + ' ratio_' + aspect_ratio + ' wpmf-has-border-radius-' + img_border_radius + ' wpmf-has-gutter-width-' + gutterwidth },
                        images.map(function (image, index) {
                            var url = '';
                            if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined") {
                                url = image.media_details.sizes[size].source_url;
                            } else if (typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined") {
                                url = image.sizes[size].url;
                            } else {
                                url = image.url;
                            }

                            if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined" || typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined" || typeof image.url !== "undefined") {
                                return React.createElement(
                                    'li',
                                    {
                                        className: isBlobURL(url) ? "wpmf-gallery-block-item is-transient" : "wpmf-gallery-block-item ",
                                        key: index },
                                    React.createElement(
                                        'div',
                                        { className: _this2.props.selectedImageId === image.id ? 'wpmf-gallery-block-item-infos is-selected' : 'wpmf-gallery-block-item-infos' },
                                        _this2.props.gallery_loading && React.createElement(
                                            'span',
                                            {
                                                className: 'spinner wpmf_spiner_block_gallery_loading' },
                                            ' '
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'square_thumbnail' },
                                            React.createElement(
                                                'div',
                                                { 'class': 'img_centered' },
                                                React.createElement('img', {
                                                    src: url,
                                                    className: 'wpmf-gallery-image',
                                                    onClick: _this2.loadImageInfos.bind(_this2, image)
                                                })
                                            )
                                        ),
                                        isBlobURL(url) && React.createElement(
                                            'span',
                                            { className: 'spinner' },
                                            ' '
                                        ),
                                        React.createElement(
                                            Tooltip,
                                            { text: wpmf.l18n.remove_image },
                                            React.createElement(Button, {
                                                className: 'wpmf-gallery-block-item-remove',
                                                icon: 'no',
                                                onClick: function onClick() {
                                                    _this2.props.setStateImgInfos(0, '', '');
                                                    setAttributes({
                                                        images: images.filter(function (img, i) {
                                                            return i !== index;
                                                        }),
                                                        image_sortable: images.filter(function (img, i) {
                                                            return i !== index;
                                                        }),
                                                        wpmf_autoinsert: '0'
                                                    });
                                                }
                                            })
                                        )
                                    )
                                );
                            }
                        })
                    )
                );
            }
        }]);

        return WpmfDefaultTheme;
    }(Component);

    var WpmfSliderTheme = function (_Component2) {
        _inherits(WpmfSliderTheme, _Component2);

        function WpmfSliderTheme() {
            _classCallCheck(this, WpmfSliderTheme);

            return _possibleConstructorReturn(this, (WpmfSliderTheme.__proto__ || Object.getPrototypeOf(WpmfSliderTheme)).apply(this, arguments));
        }

        _createClass(WpmfSliderTheme, [{
            key: 'componentDidMount',
            value: function componentDidMount() {
                var attributes = this.props.attributes;

                if (attributes.images.length) {
                    this.initSlider();
                }
            }
        }, {
            key: 'componentDidUpdate',
            value: function componentDidUpdate(prevProps) {
                // Deselect images when deselecting the block
                var _props2 = this.props,
                    attributes = _props2.attributes,
                    clientId = _props2.clientId;

                if (attributes.images.length && !(prevProps.attributes.aspect_ratio === attributes.aspect_ratio && prevProps.attributes.align === attributes.align && prevProps.attributes.gutterwidth === attributes.gutterwidth && prevProps.attributes.size === attributes.size && prevProps.attributes.columns === attributes.columns && prevProps.attributes.wpmf_orderby === attributes.wpmf_orderby && prevProps.attributes.wpmf_order === attributes.wpmf_order && JSON.stringify(prevProps.attributes.images) === JSON.stringify(attributes.images))) {
                    this.initSlider(true);
                }
            }

            /**
             * run masonry layout
             */

        }, {
            key: 'initSlider',
            value: function initSlider() {
                var reload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
                var _props3 = this.props,
                    attributes = _props3.attributes,
                    clientId = _props3.clientId;
                var columns = attributes.columns,
                    autoplay = attributes.autoplay;

                var $slider_container = $('#block-' + clientId + ' .wpmfslick');
                if ($slider_container.is(':hidden')) {
                    return;
                }

                if ($slider_container.hasClass('slick-initialized') || reload) {
                    $slider_container.slick('unslick');
                }

                setTimeout(function () {
                    var slick_args = {
                        infinite: true,
                        slidesToShow: parseInt(columns),
                        slidesToScroll: parseInt(columns),
                        pauseOnHover: true,
                        autoplay: autoplay === 1,
                        adaptiveHeight: parseInt(columns) === 1,
                        autoplaySpeed: 5000,
                        rows: 1,
                        dots: true,
                        fade: false,
                        responsive: [{
                            breakpoint: 1024,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 3,
                                infinite: true,
                                dots: true
                            }
                        }, {
                            breakpoint: 600,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2
                            }
                        }, {
                            breakpoint: 480,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }]
                    };

                    if (!$slider_container.hasClass('slick-initialized')) {
                        $slider_container.slick(slick_args);
                    }
                }, 200);
            }

            /**
             * Un Selected image
             */

        }, {
            key: 'unSelectedImage',
            value: function unSelectedImage(e) {
                if (!$(e.target).hasClass('wpmf-gallery-image')) {
                    this.props.setStateImgSelectedID(0);
                    this.props.setStateImgInfos('', '', '');
                }
            }
        }, {
            key: 'loadImageInfos',
            value: function loadImageInfos(image) {
                if (this.props.selectedImageId !== image.id) {
                    this.props.setStateImgSelectedID(image.id);
                    this.props.setStateImgInfos(image.title, image.caption, image.custom_link, image.link_target);
                } else {
                    this.props.setStateImgSelectedID();
                    this.props.setStateImgInfos();
                }
            }
        }, {
            key: 'render',
            value: function render() {
                var _this4 = this;

                var _props4 = this.props,
                    attributes = _props4.attributes,
                    setAttributes = _props4.setAttributes,
                    clientId = _props4.clientId;
                var images = attributes.images,
                    aspect_ratio = attributes.aspect_ratio,
                    columns = attributes.columns,
                    size = attributes.size,
                    crop_image = attributes.crop_image,
                    img_border_radius = attributes.img_border_radius,
                    gutterwidth = attributes.gutterwidth,
                    borderStyle = attributes.borderStyle,
                    borderWidth = attributes.borderWidth,
                    borderColor = attributes.borderColor,
                    hoverShadowH = attributes.hoverShadowH,
                    hoverShadowV = attributes.hoverShadowV,
                    hoverShadowBlur = attributes.hoverShadowBlur,
                    hoverShadowSpread = attributes.hoverShadowSpread,
                    hoverShadowColor = attributes.hoverShadowColor;

                return React.createElement(
                    'div',
                    { className: 'wpmf-gallery-block wpmf-has-columns-' + columns + ' wpmf-slick-crop-' + (parseInt(columns) === 1 ? 0 : crop_image) + ' wpmf-has-gutter-width-' + gutterwidth + ' wpmf-has-border-radius-' + img_border_radius, onClick: this.unSelectedImage.bind(this) },
                    React.createElement(
                        'style',
                        null,
                        borderStyle !== 'none' && '#block-' + clientId + ' .wpmf-gallery-block ul li img {border: ' + borderColor + ' ' + borderWidth + 'px ' + borderStyle + ';}',
                        (parseInt(hoverShadowH) !== 0 || parseInt(hoverShadowV) !== 0 || parseInt(hoverShadowBlur) !== 0 || parseInt(hoverShadowSpread) !== 0) && '#block-' + clientId + ' .wpmf-gallery-block ul li:hover img {box-shadow: ' + hoverShadowH + 'px ' + hoverShadowV + 'px ' + hoverShadowBlur + 'px ' + hoverShadowSpread + 'px ' + hoverShadowColor + ';}'
                    ),
                    React.createElement(
                        'ul',
                        {
                            className: 'wpmf-gallery-list-items wpmfslick ratio_' + aspect_ratio },
                        images.map(function (image, index) {
                            var url = '';
                            if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined") {
                                url = image.media_details.sizes[size].source_url;
                            } else if (typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined") {
                                url = image.sizes[size].url;
                            } else {
                                url = image.url;
                            }

                            if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined" || typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined" || typeof image.url !== "undefined") {
                                return React.createElement(
                                    'li',
                                    {
                                        className: isBlobURL(url) ? "wpmf-gallery-block-item is-transient" : "wpmf-gallery-block-item ",
                                        key: index },
                                    React.createElement(
                                        'div',
                                        { className: _this4.props.selectedImageId === image.id ? 'wpmf-gallery-block-item-infos is-selected' : 'wpmf-gallery-block-item-infos' },
                                        _this4.props.gallery_loading && React.createElement(
                                            'span',
                                            {
                                                className: 'spinner wpmf_spiner_block_gallery_loading' },
                                            ' '
                                        ),
                                        React.createElement(
                                            'a',
                                            { className: 'square_thumbnail' },
                                            React.createElement(
                                                'div',
                                                { className: 'img_centered' },
                                                React.createElement('img', {
                                                    src: url,
                                                    className: 'wpmf-gallery-image',
                                                    onClick: _this4.loadImageInfos.bind(_this4, image)
                                                })
                                            )
                                        ),
                                        isBlobURL(url) && React.createElement(
                                            'span',
                                            { className: 'spinner' },
                                            ' '
                                        ),
                                        React.createElement(
                                            Tooltip,
                                            { text: wpmf.l18n.remove_image },
                                            React.createElement(Button, {
                                                className: 'wpmf-gallery-block-item-remove',
                                                icon: 'no',
                                                onClick: function onClick() {
                                                    var $slider_container = $('#block-' + clientId + ' .wpmfslick');
                                                    if ($slider_container.hasClass('slick-initialized')) {
                                                        $slider_container.slick('unslick');
                                                    }
                                                    _this4.props.setStateImgInfos(0, '', '');
                                                    setAttributes({
                                                        images: images.filter(function (img, i) {
                                                            return i !== index;
                                                        }),
                                                        image_sortable: images.filter(function (img, i) {
                                                            return i !== index;
                                                        }),
                                                        wpmf_autoinsert: '0'
                                                    });
                                                }
                                            })
                                        )
                                    )
                                );
                            }
                        })
                    )
                );
            }
        }]);

        return WpmfSliderTheme;
    }(Component);

    var WpmfMasonryTheme = function (_Component3) {
        _inherits(WpmfMasonryTheme, _Component3);

        function WpmfMasonryTheme() {
            _classCallCheck(this, WpmfMasonryTheme);

            return _possibleConstructorReturn(this, (WpmfMasonryTheme.__proto__ || Object.getPrototypeOf(WpmfMasonryTheme)).apply(this, arguments));
        }

        _createClass(WpmfMasonryTheme, [{
            key: 'componentDidMount',
            value: function componentDidMount() {
                var attributes = this.props.attributes;

                if (attributes.images.length) {
                    this.initMasonry();
                }
            }
        }, {
            key: 'componentDidUpdate',
            value: function componentDidUpdate(prevProps) {
                // Deselect images when deselecting the block
                var attributes = this.props.attributes;

                if (attributes.images.length && !(prevProps.attributes.size === attributes.size && prevProps.attributes.columns === attributes.columns && prevProps.attributes.wpmf_orderby === attributes.wpmf_orderby && prevProps.attributes.align === attributes.align && prevProps.attributes.wpmf_order === attributes.wpmf_order && JSON.stringify(prevProps.attributes.images) === JSON.stringify(attributes.images))) {
                    this.initMasonry();
                }
            }

            /**
             * run masonry layout
             */

        }, {
            key: 'initMasonry',
            value: function initMasonry() {
                var _props5 = this.props,
                    attributes = _props5.attributes,
                    clientId = _props5.clientId;

                var $container = $('#block-' + clientId + ' .wpmf-gallery-list-items');
                if ($container.is(':hidden')) {
                    return;
                }

                if ($container.hasClass('masonry')) {
                    $container.masonry('destroy');
                }

                imagesLoaded($container, function () {
                    $container.masonry({
                        itemSelector: '.wpmf-gallery-block-item',
                        gutter: 0,
                        transitionDuration: 0,
                        percentPosition: true
                    });
                    $container.css('visibility', 'visible');
                    $container.addClass('masonry');
                });
            }

            /**
             * Un Selected image
             */

        }, {
            key: 'unSelectedImage',
            value: function unSelectedImage(e) {
                if (!$(e.target).hasClass('wpmf-gallery-image')) {
                    this.props.setStateImgSelectedID(0);
                    this.props.setStateImgInfos('', '', '');
                }
            }
        }, {
            key: 'loadImageInfos',
            value: function loadImageInfos(image) {
                if (this.props.selectedImageId !== image.id) {
                    this.props.setStateImgSelectedID(image.id);
                    this.props.setStateImgInfos(image.title, image.caption, image.custom_link, image.link_target);
                } else {
                    this.props.setStateImgSelectedID();
                    this.props.setStateImgInfos();
                }
            }
        }, {
            key: 'render',
            value: function render() {
                var _this6 = this;

                var _props6 = this.props,
                    attributes = _props6.attributes,
                    setAttributes = _props6.setAttributes,
                    clientId = _props6.clientId;
                var images = attributes.images,
                    columns = attributes.columns,
                    size = attributes.size,
                    img_border_radius = attributes.img_border_radius,
                    gutterwidth = attributes.gutterwidth,
                    borderStyle = attributes.borderStyle,
                    borderWidth = attributes.borderWidth,
                    borderColor = attributes.borderColor,
                    hoverShadowH = attributes.hoverShadowH,
                    hoverShadowV = attributes.hoverShadowV,
                    hoverShadowBlur = attributes.hoverShadowBlur,
                    hoverShadowSpread = attributes.hoverShadowSpread,
                    hoverShadowColor = attributes.hoverShadowColor,
                    align = attributes.align;

                return React.createElement(
                    'div',
                    { className: 'wpmf-gallery-block wpmfBlockMasonry', onClick: this.unSelectedImage.bind(this) },
                    React.createElement(
                        'style',
                        null,
                        borderStyle !== 'none' && '#block-' + clientId + ' .wpmf-gallery-block ul li img {border: ' + borderColor + ' ' + borderWidth + 'px ' + borderStyle + ';}',
                        (parseInt(hoverShadowH) !== 0 || parseInt(hoverShadowV) !== 0 || parseInt(hoverShadowBlur) !== 0 || parseInt(hoverShadowSpread) !== 0) && '#block-' + clientId + ' .wpmf-gallery-block ul li:hover img {box-shadow: ' + hoverShadowH + 'px ' + hoverShadowV + 'px ' + hoverShadowBlur + 'px ' + hoverShadowSpread + 'px ' + hoverShadowColor + ';}'
                    ),
                    React.createElement(
                        'ul',
                        {
                            className: 'wpmf-gallery-list-items gallery-columns-' + columns + ' wpmf-has-border-radius-' + img_border_radius + ' wpmf-has-gutter-width-' + gutterwidth },
                        images.map(function (image, index) {
                            var url = '';
                            if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined") {
                                url = image.media_details.sizes[size].source_url;
                            } else if (typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined") {
                                url = image.sizes[size].url;
                            } else {
                                url = image.url;
                            }

                            if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined" || typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined" || typeof image.url !== "undefined") {
                                return React.createElement(
                                    'li',
                                    {
                                        className: isBlobURL(url) ? "wpmf-gallery-block-item is-transient" : "wpmf-gallery-block-item ",
                                        key: index },
                                    React.createElement(
                                        'div',
                                        { className: _this6.props.selectedImageId === image.id ? 'wpmf-gallery-block-item-infos is-selected' : 'wpmf-gallery-block-item-infos' },
                                        _this6.props.gallery_loading && React.createElement(
                                            'span',
                                            {
                                                className: 'spinner wpmf_spiner_block_gallery_loading' },
                                            ' '
                                        ),
                                        React.createElement('img', {
                                            src: url,
                                            className: 'wpmf-gallery-image',
                                            onClick: _this6.loadImageInfos.bind(_this6, image)
                                        }),
                                        isBlobURL(url) && React.createElement(
                                            'span',
                                            { className: 'spinner' },
                                            ' '
                                        ),
                                        React.createElement(
                                            Tooltip,
                                            { text: wpmf.l18n.remove_image },
                                            React.createElement(Button, {
                                                className: 'wpmf-gallery-block-item-remove',
                                                icon: 'no',
                                                onClick: function onClick() {
                                                    _this6.props.setStateImgInfos(0, '', '');
                                                    setAttributes({
                                                        images: images.filter(function (img, i) {
                                                            return i !== index;
                                                        }),
                                                        image_sortable: images.filter(function (img, i) {
                                                            return i !== index;
                                                        }),
                                                        wpmf_autoinsert: '0'
                                                    });
                                                }
                                            })
                                        )
                                    )
                                );
                            }
                        })
                    )
                );
            }
        }]);

        return WpmfMasonryTheme;
    }(Component);

    var WpmfPortfolioTheme = function (_Component4) {
        _inherits(WpmfPortfolioTheme, _Component4);

        function WpmfPortfolioTheme() {
            _classCallCheck(this, WpmfPortfolioTheme);

            return _possibleConstructorReturn(this, (WpmfPortfolioTheme.__proto__ || Object.getPrototypeOf(WpmfPortfolioTheme)).apply(this, arguments));
        }

        _createClass(WpmfPortfolioTheme, [{
            key: 'componentDidMount',
            value: function componentDidMount() {
                var attributes = this.props.attributes;

                if (attributes.images.length) {
                    //this.initMasonry();
                }
            }

            /**
             * run masonry layout
             */

        }, {
            key: 'initMasonry',
            value: function initMasonry() {
                var _props7 = this.props,
                    attributes = _props7.attributes,
                    clientId = _props7.clientId;

                var $container = $('#block-' + clientId + ' .wpmf-gallery-list-items');
                if ($container.is(':hidden')) {
                    return;
                }

                if ($container.hasClass('masonry')) {
                    $container.masonry('destroy');
                }

                imagesLoaded($container, function () {
                    $container.masonry({
                        itemSelector: '.wpmf-gallery-block-item',
                        gutter: 0,
                        transitionDuration: 0,
                        percentPosition: true
                    });
                    $container.css('visibility', 'visible');
                });
            }

            /**
             * Un Selected image
             */

        }, {
            key: 'unSelectedImage',
            value: function unSelectedImage(e) {
                if (!$(e.target).hasClass('wpmf-gallery-image') && !$(e.target).hasClass('wpmf_overlay')) {
                    this.props.setStateImgSelectedID(0);
                    this.props.setStateImgInfos('', '', '');
                }
            }
        }, {
            key: 'loadImageInfos',
            value: function loadImageInfos(image) {
                if (this.props.selectedImageId !== image.id) {
                    this.props.setStateImgSelectedID(image.id);
                    this.props.setStateImgInfos(image.title, image.caption, image.custom_link, image.link_target);
                } else {
                    this.props.setStateImgSelectedID();
                    this.props.setStateImgInfos();
                }
            }
        }, {
            key: 'render',
            value: function render() {
                var _this8 = this;

                var _props8 = this.props,
                    attributes = _props8.attributes,
                    setAttributes = _props8.setAttributes,
                    clientId = _props8.clientId;
                var images = attributes.images,
                    aspect_ratio = attributes.aspect_ratio,
                    columns = attributes.columns,
                    size = attributes.size,
                    img_border_radius = attributes.img_border_radius,
                    gutterwidth = attributes.gutterwidth,
                    borderStyle = attributes.borderStyle,
                    borderWidth = attributes.borderWidth,
                    borderColor = attributes.borderColor,
                    hoverShadowH = attributes.hoverShadowH,
                    hoverShadowV = attributes.hoverShadowV,
                    hoverShadowBlur = attributes.hoverShadowBlur,
                    hoverShadowSpread = attributes.hoverShadowSpread,
                    hoverShadowColor = attributes.hoverShadowColor;

                return React.createElement(
                    'div',
                    { className: 'wpmf-gallery-block wpmfBlockMasonry', onClick: this.unSelectedImage.bind(this) },
                    React.createElement(
                        'style',
                        null,
                        borderStyle !== 'none' && '#block-' + clientId + ' .wpmf-gallery-block ul li img {border: ' + borderColor + ' ' + borderWidth + 'px ' + borderStyle + ';}',
                        (parseInt(hoverShadowH) !== 0 || parseInt(hoverShadowV) !== 0 || parseInt(hoverShadowBlur) !== 0 || parseInt(hoverShadowSpread) !== 0) && '#block-' + clientId + ' .wpmf-gallery-block ul li:hover img {box-shadow: ' + hoverShadowH + 'px ' + hoverShadowV + 'px ' + hoverShadowBlur + 'px ' + hoverShadowSpread + 'px ' + hoverShadowColor + ';}'
                    ),
                    React.createElement(
                        'ul',
                        {
                            className: 'wpmf-gallery-list-items ratio_' + aspect_ratio + ' gallery-columns-' + columns + ' wpmf-has-border-radius-' + img_border_radius + ' wpmf-has-gutter-width-' + gutterwidth },
                        images.map(function (image, index) {
                            var url = '';
                            if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined") {
                                url = image.media_details.sizes[size].source_url;
                            } else if (typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined") {
                                url = image.sizes[size].url;
                            } else {
                                url = image.url;
                            }

                            if (typeof image.media_details !== "undefined" && typeof image.media_details.sizes !== "undefined" && typeof image.media_details.sizes[size] !== "undefined" || typeof image.sizes !== "undefined" && typeof image.sizes[size] !== "undefined" || typeof image.url !== "undefined") {
                                return React.createElement(
                                    'li',
                                    {
                                        className: isBlobURL(url) ? "wpmf-gallery-block-item is-transient" : "wpmf-gallery-block-item ",
                                        key: index },
                                    React.createElement(
                                        'div',
                                        { className: _this8.props.selectedImageId === image.id ? 'wpmf-gallery-block-item-infos is-selected' : 'wpmf-gallery-block-item-infos' },
                                        _this8.props.gallery_loading && React.createElement(
                                            'span',
                                            {
                                                className: 'spinner wpmf_spiner_block_gallery_loading' },
                                            ' '
                                        ),
                                        React.createElement(
                                            'div',
                                            { onClick: function onClick() {
                                                    return _this8.loadImageInfos(image);
                                                }, className: 'wpmf_overlay' },
                                            ' '
                                        ),
                                        React.createElement(
                                            'div',
                                            { className: 'portfolio_lightbox', title: image.title },
                                            '+'
                                        ),
                                        React.createElement(
                                            'a',
                                            { className: 'square_thumbnail' },
                                            React.createElement(
                                                'div',
                                                { className: 'img_centered' },
                                                React.createElement('img', {
                                                    src: url,
                                                    className: 'wpmf-gallery-image'
                                                })
                                            )
                                        ),
                                        isBlobURL(url) && React.createElement(
                                            'span',
                                            { className: 'spinner' },
                                            ' '
                                        ),
                                        React.createElement(
                                            Tooltip,
                                            { text: wpmf.l18n.remove_image },
                                            React.createElement(Button, {
                                                className: 'wpmf-gallery-block-item-remove',
                                                icon: 'no',
                                                onClick: function onClick() {
                                                    _this8.props.setStateImgInfos(0, '', '');
                                                    setAttributes({
                                                        images: images.filter(function (img, i) {
                                                            return i !== index;
                                                        }),
                                                        image_sortable: images.filter(function (img, i) {
                                                            return i !== index;
                                                        }),
                                                        wpmf_autoinsert: '0'
                                                    });
                                                }
                                            })
                                        )
                                    ),
                                    React.createElement(
                                        'div',
                                        { className: 'wpmf-caption-text wpmf-gallery-caption' },
                                        image.title !== '' && React.createElement(
                                            'span',
                                            { className: 'title' },
                                            image.title
                                        ),
                                        image.caption !== '' && React.createElement(
                                            'span',
                                            { className: 'excerpt' },
                                            image.caption
                                        )
                                    )
                                );
                            }
                        })
                    )
                );
            }
        }]);

        return WpmfPortfolioTheme;
    }(Component);

    var wpmfWordpressGallery = function (_Component5) {
        _inherits(wpmfWordpressGallery, _Component5);

        function wpmfWordpressGallery() {
            _classCallCheck(this, wpmfWordpressGallery);

            var _this9 = _possibleConstructorReturn(this, (wpmfWordpressGallery.__proto__ || Object.getPrototypeOf(wpmfWordpressGallery)).apply(this, arguments));

            _this9.state = {
                inited: false,
                uploaded: false,
                gallery_loading: false,
                selectedImageId: 0,
                selectedImageInfos: {
                    title: '',
                    caption: '',
                    custom_link: '',
                    link_target: '_self'
                }
            };
            _this9.addFiles = _this9.addFiles.bind(_this9);
            _this9.uploadFromFiles = _this9.uploadFromFiles.bind(_this9);
            return _this9;
        }

        _createClass(wpmfWordpressGallery, [{
            key: 'componentWillMount',
            value: function componentWillMount() {
                var _this10 = this;

                var _props9 = this.props,
                    attributes = _props9.attributes,
                    setAttributes = _props9.setAttributes;
                var images = attributes.images,
                    image_sortable = attributes.image_sortable,
                    display = attributes.display,
                    wpmf_autoinsert = attributes.wpmf_autoinsert,
                    wpmf_folder_id = attributes.wpmf_folder_id;

                var currentBlockConfig = wpmf_blocks.vars.gallery_configs.theme[display + '_theme'];
                // No override attributes of blocks inserted before
                if (!attributes.changed) {
                    if ((typeof currentBlockConfig === 'undefined' ? 'undefined' : _typeof(currentBlockConfig)) === 'object' && currentBlockConfig !== null) {
                        Object.keys(currentBlockConfig).map(function (attribute) {
                            if (attribute === 'orderby' || attribute === 'order') {
                                attributes['wpmf_' + attribute] = currentBlockConfig[attribute];
                            } else {
                                attributes[attribute] = currentBlockConfig[attribute];
                            }
                        });
                    }

                    // Finally set changed attribute to true, so we don't modify anything again
                    setAttributes({ changed: true });
                }

                var wpmf_orderby = attributes.wpmf_orderby,
                    wpmf_order = attributes.wpmf_order;

                if (wpmf_folder_id.length && parseInt(wpmf_autoinsert) === 1) {
                    this.loadImagesFromFolder(wpmf_folder_id, wpmf_orderby, wpmf_order);
                } else {
                    var imgsId = images.map(function (img) {
                        return img.id;
                    });
                    this.setState({ gallery_loading: true });
                    fetch(wpmf_blocks.vars.ajaxurl + ('?action=gallery_block_load_image_infos&ids=' + imgsId.join() + '&wpmf_nonce=' + wpmf_blocks.vars.wpmf_nonce)).then(function (res) {
                        return res.json();
                    }).then(function (result) {
                        if (result.status) {
                            images.map(function (img) {
                                img.title = result.titles[img.id];
                                img.caption = result.captions[img.id];
                                img.custom_link = result.custom_links[img.id];
                                img.link_target = result.link_targets[img.id];
                                return img;
                            });

                            image_sortable.map(function (img) {
                                img.title = result.titles[img.id];
                                img.caption = result.captions[img.id];
                                img.custom_link = result.custom_links[img.id];
                                img.link_target = result.link_targets[img.id];
                                return img;
                            });
                            _this10.setState({ gallery_loading: false });
                        }
                    },
                    // errors
                    function (error) {});
                }
            }
        }, {
            key: 'componentWillReceiveProps',
            value: function componentWillReceiveProps(nextProps) {
                var _props10 = this.props,
                    attributes = _props10.attributes,
                    setAttributes = _props10.setAttributes;

                if (nextProps.attributes.display !== attributes.display) {
                    // set default settings by theme
                    var currentBlockConfig = wpmf_blocks.vars.gallery_configs.theme[nextProps.attributes.display + '_theme'];
                    if ((typeof currentBlockConfig === 'undefined' ? 'undefined' : _typeof(currentBlockConfig)) === 'object' && currentBlockConfig !== null) {
                        Object.keys(currentBlockConfig).map(function (attribute) {
                            if (attribute === 'orderby' || attribute === 'order') {
                                nextProps.attributes['wpmf_' + attribute] = currentBlockConfig[attribute];
                            } else {
                                nextProps.attributes[attribute] = currentBlockConfig[attribute];
                            }
                        });
                        setAttributes(nextProps.attributes);
                    }
                }
            }
        }, {
            key: 'componentDidUpdate',
            value: function componentDidUpdate(prevProps) {
                // Deselect images when deselecting the block
                var _props11 = this.props,
                    attributes = _props11.attributes,
                    setAttributes = _props11.setAttributes,
                    isSelected = _props11.isSelected;

                if (!isSelected && prevProps.isSelected) {
                    this.setStateImgSelectedID();
                    this.setStateImgInfos();
                }
            }
        }, {
            key: 'loadImagesFromFolder',
            value: function loadImagesFromFolder(folders, orderby, order) {
                var _this11 = this;

                var _props12 = this.props,
                    attributes = _props12.attributes,
                    setAttributes = _props12.setAttributes,
                    clientId = _props12.clientId;
                var images = attributes.images;

                this.setState({ gallery_loading: true });
                fetch(wpmf_blocks.vars.ajaxurl + ('?action=wpmf_gallery_from_folder&ids=' + folders.join() + '&orderby=' + orderby + '&order=' + order + '&wpmf_nonce=' + wpmf_blocks.vars.wpmf_nonce)).then(function (res) {
                    return res.json();
                }).then(function (result) {
                    if (result.status) {
                        var allImages = result.images;
                        _this11.setState({ gallery_loading: false });
                        if (JSON.stringify(images) !== JSON.stringify(result.images)) {
                            setAttributes({
                                images: allImages,
                                image_sortable: allImages
                            });
                        }

                        if (!allImages.length) {
                            if (!$('#block-' + clientId + ' .wpmf_gallery_img_msg').length) {
                                $('#block-' + clientId + ' .wpmf_select_folders').after('<span class="wpmf_gallery_img_msg">' + wpmf.l18n.folder_no_image + '</span>');
                            }
                        }
                    }
                });
            }

            /**
             * Do sort image
             */

        }, {
            key: 'doSort',
            value: function doSort(wpmf_orderby, wpmf_order) {
                var imgs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
                var _props13 = this.props,
                    attributes = _props13.attributes,
                    setAttributes = _props13.setAttributes;
                var images = attributes.images,
                    image_sortable = attributes.image_sortable;

                var images_ordered = void 0;
                // Order images
                switch (wpmf_orderby) {
                    default:
                    case 'title':
                        if (wpmf_order === 'DESC') {
                            images_ordered = [].concat(images).sort(function (a, b) {
                                if (typeof a.title !== "undefined" && typeof b.title !== "undefined") {
                                    return b.title.localeCompare(a.title);
                                } else {
                                    return b.url.localeCompare(a.url);
                                }
                            });
                        } else {
                            images_ordered = [].concat(images).sort(function (a, b) {
                                if (typeof a.title !== "undefined" && typeof b.title !== "undefined") {
                                    return a.title.localeCompare(b.title);
                                } else {
                                    return a.url.localeCompare(b.url);
                                }
                            });
                        }

                        setAttributes({
                            wpmf_orderby: wpmf_orderby,
                            wpmf_order: wpmf_order,
                            images: images_ordered
                        });

                        break;
                    case 'date':
                        if (wpmf_order === 'DESC') {
                            images_ordered = [].concat(images).sort(function (a, b) {
                                return new Date(b.id).getTime() - new Date(a.id).getTime();
                            });
                        } else {
                            images_ordered = [].concat(images).sort(function (a, b) {
                                return new Date(a.id).getTime() - new Date(b.id).getTime();
                            });
                        }

                        setAttributes({
                            wpmf_orderby: wpmf_orderby,
                            wpmf_order: wpmf_order,
                            images: images_ordered
                        });
                        break;
                    case 'post__in':
                        setAttributes({
                            wpmf_orderby: wpmf_orderby,
                            wpmf_order: wpmf_order,
                            images: imgs
                        });
                        break;
                }
            }

            /**
             * Set images orderby
             */

        }, {
            key: 'sortImageOrderBy',
            value: function sortImageOrderBy(value) {
                var attributes = this.props.attributes;
                var wpmf_order = attributes.wpmf_order;

                this.doSort(value, wpmf_order);
            }

            /**
             * Set images order
             */

        }, {
            key: 'sortImageOrder',
            value: function sortImageOrder(value) {
                var attributes = this.props.attributes;
                var wpmf_orderby = attributes.wpmf_orderby;

                this.doSort(wpmf_orderby, value);
            }
        }, {
            key: 'setAutoInsertGallery',
            value: function setAutoInsertGallery(value) {
                var _props14 = this.props,
                    attributes = _props14.attributes,
                    setAttributes = _props14.setAttributes;
                var wpmf_folder_id = attributes.wpmf_folder_id,
                    wpmf_orderby = attributes.wpmf_orderby,
                    wpmf_order = attributes.wpmf_order;

                setAttributes({ wpmf_autoinsert: value });
                if (parseInt(value) === 1 && wpmf_folder_id.length) {
                    this.loadImagesFromFolder(wpmf_folder_id, wpmf_orderby, wpmf_order);
                }
            }
        }, {
            key: 'setFoldersGallery',
            value: function setFoldersGallery(value, auto) {
                var _props15 = this.props,
                    attributes = _props15.attributes,
                    setAttributes = _props15.setAttributes;
                var wpmf_autoinsert = attributes.wpmf_autoinsert,
                    wpmf_orderby = attributes.wpmf_orderby,
                    wpmf_order = attributes.wpmf_order;

                setAttributes({ wpmf_folder_id: value, wpmf_autoinsert: '1' });
                if (auto) {
                    this.loadImagesFromFolder(value, wpmf_orderby, wpmf_order);
                } else {
                    if (parseInt(wpmf_autoinsert) === 1) {
                        this.loadImagesFromFolder(value, wpmf_orderby, wpmf_order);
                    }
                }
            }
        }, {
            key: 'setRadiusTo',
            value: function setRadiusTo(value) {
                var setAttributes = this.props.setAttributes;

                setAttributes({ img_border_radius: value });
            }

            /**
             * Load image infos
             */

        }, {
            key: 'loadImageInfos',
            value: function loadImageInfos(image) {
                if (this.state.selectedImageId !== image.id) {
                    this.setStateImgInfos(image.title, image.caption, image.custom_link, image.link_target);
                }

                this.setState({ selectedImageId: this.state.selectedImageId === image.id ? 0 : image.id });
            }

            /**
             * Update image info
             */

        }, {
            key: 'updateImageInfos',
            value: function updateImageInfos() {
                var _this12 = this;

                var _props16 = this.props,
                    attributes = _props16.attributes,
                    setAttributes = _props16.setAttributes;
                var images = attributes.images;

                $('.save_img_action span').addClass('visible');
                fetch(wpmf_blocks.vars.ajaxurl + ('?action=gallery_block_update_image_infos&id=' + this.state.selectedImageId + '&title=' + this.state.selectedImageInfos.title + '&caption=' + this.state.selectedImageInfos.caption + '&custom_link=' + this.state.selectedImageInfos.custom_link + '&link_target=' + this.state.selectedImageInfos.link_target + '&wpmf_nonce=' + wpmf_blocks.vars.wpmf_nonce)).then(function (res) {
                    return res.json();
                }).then(function (result) {
                    $('.save_img_action span').removeClass('visible');
                    if (result.status) {
                        images.map(function (img) {
                            if (img.id === _this12.state.selectedImageId) {
                                img.title = result.infos.title;
                                img.caption = result.infos.caption;
                                img.custom_link = result.infos.custom_link;
                                img.link_target = result.infos.link_target;
                            }

                            return img;
                        });
                    }
                },
                // errors
                function (error) {
                    _this12.setStateImgInfos();
                });
            }

            /**
             * Un Selected image
             */

        }, {
            key: 'unSelectedImage',
            value: function unSelectedImage(e) {
                if (!$(e.target).hasClass('wpmf-gallery-image')) {
                    this.setStateImgSelectedID();
                    this.setStateImgInfos();
                }
            }

            /**
             * Select image
             */

        }, {
            key: 'onSelectImages',
            value: function onSelectImages(imgss) {
                var _props17 = this.props,
                    attributes = _props17.attributes,
                    setAttributes = _props17.setAttributes;
                var images = attributes.images,
                    wpmf_orderby = attributes.wpmf_orderby,
                    wpmf_order = attributes.wpmf_order;


                var imgs = imgss.map(function (img) {
                    return wp.media.attachment(img.id).attributes;
                });
                var check = false;
                setAttributes({
                    images: imgs,
                    image_sortable: imgs
                });

                if (images.length <= imgs.length) {
                    if (images.length) {
                        images.map(function (img, index) {
                            if (img.id !== imgs[index].id) {
                                setAttributes({
                                    wpmf_orderby: 'post__in'
                                });
                                check = true;
                            }
                        });
                    } else {
                        check = false;
                    }

                    if (!check) {
                        this.doSort(wpmf_orderby, wpmf_order, imgs);
                    }
                } else {
                    imgs.map(function (img, index) {
                        if (img.id !== images[index].id) {
                            setAttributes({
                                wpmf_orderby: 'post__in'
                            });
                        }
                    });
                }
            }

            /**
             * Upload files
             */

        }, {
            key: 'uploadFromFiles',
            value: function uploadFromFiles(event) {
                this.addFiles(event.target.files);
            }

            /**
             * Add files
             */

        }, {
            key: 'addFiles',
            value: function addFiles(files) {
                var _props18 = this.props,
                    attributes = _props18.attributes,
                    setAttributes = _props18.setAttributes;
                var images = attributes.images;

                mediaUpload({
                    allowedTypes: ALLOWED_MEDIA_TYPES,
                    filesList: files,
                    onFileChange: function onFileChange(imgs) {
                        var imagesNormalized = imgs.map(function (image) {
                            return pickRelevantMediaFiles(image);
                        });

                        setAttributes({
                            images: images.concat(imagesNormalized),
                            image_sortable: images.concat(imagesNormalized)
                        });
                    }
                });
            }
        }, {
            key: 'setStateImgInfos',
            value: function setStateImgInfos() {
                var title = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
                var caption = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
                var custom_link = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
                var link_target = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '_self';

                this.setState({
                    selectedImageInfos: {
                        title: title,
                        caption: caption,
                        custom_link: custom_link,
                        link_target: link_target
                    }
                });
            }
        }, {
            key: 'setStateImgSelectedID',
            value: function setStateImgSelectedID() {
                var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

                this.setState({
                    selectedImageId: id
                });
            }
        }, {
            key: 'render',
            value: function render() {
                var _this13 = this;

                var listBorderStyles = [{ label: wpmf.l18n.none, value: 'none' }, { label: wpmf.l18n.solid, value: 'solid' }, { label: wpmf.l18n.dotted, value: 'dotted' }, { label: wpmf.l18n.dashed, value: 'dashed' }, { label: wpmf.l18n.double, value: 'double' }, { label: wpmf.l18n.groove, value: 'groove' }, { label: wpmf.l18n.ridge, value: 'ridge' }, { label: wpmf.l18n.inset, value: 'inset' }, { label: wpmf.l18n.outset, value: 'outset' }];

                var _props19 = this.props,
                    attributes = _props19.attributes,
                    setAttributes = _props19.setAttributes,
                    className = _props19.className,
                    isSelected = _props19.isSelected,
                    clientId = _props19.clientId;
                var images = attributes.images,
                    display = attributes.display,
                    aspect_ratio = attributes.aspect_ratio,
                    columns = attributes.columns,
                    size = attributes.size,
                    targetsize = attributes.targetsize,
                    link = attributes.link,
                    wpmf_orderby = attributes.wpmf_orderby,
                    wpmf_order = attributes.wpmf_order,
                    autoplay = attributes.autoplay,
                    crop_image = attributes.crop_image,
                    img_border_radius = attributes.img_border_radius,
                    borderWidth = attributes.borderWidth,
                    borderStyle = attributes.borderStyle,
                    borderColor = attributes.borderColor,
                    hoverShadowH = attributes.hoverShadowH,
                    hoverShadowV = attributes.hoverShadowV,
                    hoverShadowBlur = attributes.hoverShadowBlur,
                    hoverShadowSpread = attributes.hoverShadowSpread,
                    hoverShadowColor = attributes.hoverShadowColor,
                    gutterwidth = attributes.gutterwidth,
                    wpmf_autoinsert = attributes.wpmf_autoinsert,
                    wpmf_folder_id = attributes.wpmf_folder_id,
                    cover = attributes.cover,
                    align = attributes.align;

                var list_sizes = Object.keys(wpmf_blocks.vars.sizes).map(function (key, label) {
                    return {
                        label: wpmf_blocks.vars.sizes[key],
                        value: key
                    };
                });

                var controls = React.createElement(
                    BlockControls,
                    null,
                    images.length && React.createElement(
                        ToolbarGroup,
                        null,
                        React.createElement(MediaUpload, {
                            onSelect: function onSelect(imgs) {
                                return _this13.onSelectImages(imgs);
                            },
                            allowedTypes: ALLOWED_MEDIA_TYPES,
                            multiple: true,
                            gallery: true,
                            value: images.map(function (img) {
                                return img.id;
                            }),
                            render: function render(_ref) {
                                var open = _ref.open;
                                return React.createElement(Button, {
                                    className: 'components-toolbar__control',
                                    label: wpmf.l18n.edit_gallery,
                                    icon: 'edit',
                                    onClick: open
                                });
                            }
                        })
                    )
                );

                var inspect_controls = React.createElement(
                    InspectorControls,
                    null,
                    this.state.selectedImageId === 0 && React.createElement(
                        'div',
                        null,
                        React.createElement(
                            PanelBody,
                            { title: wpmf.l18n.gallery_settings },
                            React.createElement(SelectControl, {
                                label: wpmf.l18n.theme,
                                value: display,
                                options: [{ label: wpmf.l18n.default, value: 'default' }, { label: wpmf.l18n.masonry, value: 'masonry' }, { label: wpmf.l18n.portfolio, value: 'portfolio' }, { label: wpmf.l18n.slider, value: 'slider' }],
                                onChange: function onChange(value) {
                                    return setAttributes({ display: value });
                                }
                            }),
                            React.createElement(
                                'div',
                                { className: 'wpmf_sl_gallery_folders components-base-control' },
                                React.createElement(
                                    'label',
                                    { className: 'components-base-control__label' },
                                    wpmf.l18n.select_folder
                                ),
                                React.createElement(
                                    'select',
                                    { size: folders_length, className: 'wpmf_select_folders_controll', multiple: true, onChange: function onChange() {
                                            return _this13.setFoldersGallery($('.wpmf_select_folders_controll').val(), false);
                                        } },
                                    wpmf_categories.map(function (category, index) {
                                        if (wpmf_folder_id.indexOf(category.value.toString()) !== -1) {
                                            return React.createElement(
                                                'option',
                                                { selected: true, key: index, value: category.value },
                                                category.label
                                            );
                                        } else {
                                            return React.createElement(
                                                'option',
                                                { key: index, value: category.value },
                                                category.label
                                            );
                                        }
                                    })
                                )
                            ),
                            (display === 'slider' || display === 'default' || display === 'portfolio') && React.createElement(SelectControl, {
                                label: __('Aspect ratio', 'wpmf'),
                                value: aspect_ratio,
                                options: [{ label: 'Default', value: 'default' }, { label: '1:1', value: '1_1' }, { label: '3:2', value: '3_2' }, { label: '2:3', value: '2_3' }, { label: '4:3', value: '4_3' }, { label: '3:4', value: '3_4' }, { label: '16:9', value: '16_9' }, { label: '9:16', value: '9_16' }, { label: '21:9', value: '21_9' }, { label: '9:21', value: '9_21' }],
                                onChange: function onChange(value) {
                                    return setAttributes({ aspect_ratio: value });
                                }
                            }),
                            React.createElement(SelectControl, {
                                label: wpmf.l18n.columns,
                                value: columns,
                                options: [{ label: 1, value: '1' }, { label: 2, value: '2' }, { label: 3, value: '3' }, { label: 4, value: '4' }, { label: 5, value: '5' }, { label: 6, value: '6' }, { label: 7, value: '7' }, { label: 8, value: '8' }, { label: 9, value: '9' }],
                                onChange: function onChange(value) {
                                    return setAttributes({ columns: value });
                                }
                            }),
                            React.createElement(SelectControl, {
                                label: wpmf.l18n.gallery_image_size,
                                value: size,
                                options: list_sizes,
                                onChange: function onChange(value) {
                                    return setAttributes({ size: value });
                                }
                            }),
                            display === 'slider' && React.createElement(ToggleControl, {
                                label: wpmf.l18n.crop_image,
                                checked: crop_image,
                                onChange: function onChange() {
                                    return setAttributes({ crop_image: crop_image === 1 ? 0 : 1 });
                                }
                            }),
                            React.createElement(SelectControl, {
                                label: wpmf.l18n.lightbox_size,
                                value: targetsize,
                                options: list_sizes,
                                onChange: function onChange(value) {
                                    return setAttributes({ targetsize: value });
                                }
                            }),
                            React.createElement(SelectControl, {
                                label: wpmf.l18n.action_on_click,
                                value: link,
                                options: [{ label: wpmf.l18n.lightbox, value: 'file' }, { label: wpmf.l18n.attachment_page, value: 'post' }, { label: wpmf.l18n.none, value: 'none' }, { label: wpmf.l18n.custom_link, value: 'custom' }],
                                onChange: function onChange(value) {
                                    return setAttributes({ link: value });
                                }
                            }),
                            React.createElement(SelectControl, {
                                label: wpmf.l18n.orderby,
                                value: wpmf_orderby,
                                options: [{ label: wpmf.l18n.custom, value: 'post__in' }, { label: wpmf.l18n.random, value: 'rand' }, { label: wpmf.l18n.title, value: 'title' }, { label: wpmf.l18n.date, value: 'date' }],
                                onChange: this.sortImageOrderBy.bind(this)
                            }),
                            React.createElement(SelectControl, {
                                label: wpmf.l18n.order,
                                value: wpmf_order,
                                options: [{ label: wpmf.l18n.ascending, value: 'ASC' }, { label: wpmf.l18n.descending, value: 'DESC' }],
                                onChange: this.sortImageOrder.bind(this)
                            }),
                            React.createElement(SelectControl, {
                                label: wpmf.l18n.update_with_new_folder,
                                value: wpmf_autoinsert,
                                options: [{ label: wpmf.l18n.no, value: '0' }, { label: wpmf.l18n.yes, value: '1' }],
                                onChange: this.setAutoInsertGallery.bind(this)
                            }),
                            display === 'slider' && React.createElement(ToggleControl, {
                                label: wpmf.l18n.autoplay,
                                checked: autoplay,
                                onChange: function onChange() {
                                    return setAttributes({ autoplay: autoplay === 1 ? 0 : 1 });
                                }
                            })
                        ),
                        React.createElement(
                            PanelBody,
                            { title: wpmf.l18n.border, initialOpen: false },
                            React.createElement(RangeControl, {
                                label: wpmf.l18n.border_radius,
                                'aria-label': wpmf.l18n.border_radius_desc,
                                value: img_border_radius,
                                onChange: this.setRadiusTo.bind(this),
                                min: 0,
                                max: 20,
                                step: 1
                            }),
                            React.createElement(SelectControl, {
                                label: wpmf.l18n.border_style,
                                value: borderStyle,
                                options: listBorderStyles,
                                onChange: function onChange(value) {
                                    return setAttributes({ borderStyle: value });
                                }
                            }),
                            borderStyle !== 'none' && React.createElement(
                                Fragment,
                                null,
                                React.createElement(PanelColorSettings, {
                                    title: wpmf.l18n.border_color,
                                    initialOpen: false,
                                    colorSettings: [{
                                        label: wpmf.l18n.border_color,
                                        value: borderColor,
                                        onChange: function onChange(value) {
                                            return setAttributes({ borderColor: value === undefined ? '#2196f3' : value });
                                        }
                                    }]
                                }),
                                React.createElement(RangeControl, {
                                    label: wpmf.l18n.border_width,
                                    value: borderWidth || 0,
                                    onChange: function onChange(value) {
                                        return setAttributes({ borderWidth: value });
                                    },
                                    min: 0,
                                    max: 10
                                })
                            )
                        ),
                        React.createElement(
                            PanelBody,
                            { title: wpmf.l18n.margin, initialOpen: false },
                            React.createElement(RangeControl, {
                                label: wpmf.l18n.gutter,
                                value: gutterwidth,
                                onChange: function onChange(value) {
                                    return setAttributes({ gutterwidth: value });
                                },
                                min: 0,
                                max: 100,
                                step: 5
                            })
                        ),
                        React.createElement(
                            PanelBody,
                            { title: wpmf.l18n.shadow, initialOpen: false },
                            React.createElement(RangeControl, {
                                label: wpmf.l18n.shadow_h,
                                value: hoverShadowH || 0,
                                onChange: function onChange(value) {
                                    return setAttributes({ hoverShadowH: value });
                                },
                                min: -50,
                                max: 50
                            }),
                            React.createElement(RangeControl, {
                                label: wpmf.l18n.shadow_v,
                                value: hoverShadowV || 0,
                                onChange: function onChange(value) {
                                    return setAttributes({ hoverShadowV: value });
                                },
                                min: -50,
                                max: 50
                            }),
                            React.createElement(RangeControl, {
                                label: wpmf.l18n.shadow_blur,
                                value: hoverShadowBlur || 0,
                                onChange: function onChange(value) {
                                    return setAttributes({ hoverShadowBlur: value });
                                },
                                min: 0,
                                max: 50
                            }),
                            React.createElement(RangeControl, {
                                label: wpmf.l18n.shadow_spread,
                                value: hoverShadowSpread || 0,
                                onChange: function onChange(value) {
                                    return setAttributes({ hoverShadowSpread: value });
                                },
                                min: 0,
                                max: 50
                            }),
                            React.createElement(PanelColorSettings, {
                                title: wpmf.l18n.color_settings,
                                initialOpen: false,
                                colorSettings: [{
                                    label: wpmf.l18n.shadow_color,
                                    value: hoverShadowColor,
                                    onChange: function onChange(value) {
                                        return setAttributes({ hoverShadowColor: value === undefined ? '#ccc' : value });
                                    }
                                }]
                            })
                        )
                    ),
                    this.state.selectedImageId !== 0 && React.createElement(
                        PanelBody,
                        { title: wpmf.l18n.image_settings },
                        React.createElement(TextControl, {
                            label: wpmf.l18n.title,
                            value: this.state.selectedImageInfos.title,
                            onChange: function onChange(value) {
                                _this13.setState({
                                    selectedImageInfos: _extends({}, _this13.state.selectedImageInfos, {
                                        title: value
                                    })
                                });
                            }
                        }),
                        React.createElement(TextControl, {
                            label: wpmf.l18n.caption,
                            value: this.state.selectedImageInfos.caption,
                            onChange: function onChange(value) {
                                _this13.setState({
                                    selectedImageInfos: _extends({}, _this13.state.selectedImageInfos, {
                                        caption: value
                                    })
                                });
                            }
                        }),
                        React.createElement(TextControl, {
                            label: wpmf.l18n.custom_link,
                            value: this.state.selectedImageInfos.custom_link,
                            onChange: function onChange(value) {
                                _this13.setState({
                                    selectedImageInfos: _extends({}, _this13.state.selectedImageInfos, {
                                        custom_link: value
                                    })
                                });
                            }
                        }),
                        React.createElement(SelectControl, {
                            label: wpmf.l18n.link_target,
                            value: this.state.selectedImageInfos.link_target,
                            options: [{ label: wpmf.l18n.same_window, value: '_self' }, { label: wpmf.l18n.new_window, value: '_blank' }],
                            onChange: function onChange(value) {
                                _this13.setState({
                                    selectedImageInfos: _extends({}, _this13.state.selectedImageInfos, {
                                        link_target: value
                                    })
                                });
                            }
                        }),
                        React.createElement(
                            'div',
                            { className: 'save_img_action' },
                            React.createElement(
                                Button,
                                { className: 'is-button is-default is-primary is-large',
                                    onClick: this.updateImageInfos.bind(this) },
                                wpmf.l18n.save
                            ),
                            React.createElement(
                                'span',
                                { className: 'spinner' },
                                ' '
                            )
                        )
                    )
                );

                if (typeof cover !== "undefined" && images.length === 0) {
                    return React.createElement(
                        'div',
                        { className: 'wpmf-cover' },
                        React.createElement('img', { src: cover })
                    );
                }

                if (typeof cover === "undefined" && images.length === 0) {
                    return React.createElement(
                        Placeholder,
                        {
                            icon: 'format-gallery',
                            label: wpmf.l18n.media_gallery,
                            instructions: wpmf.l18n.media_gallery_desc,
                            className: className
                        },
                        React.createElement(
                            'div',
                            { className: 'wpmf_sl_gallery_folders' },
                            React.createElement(
                                'select',
                                { size: folders_length, className: 'wpmf_select_folders', multiple: true, onChange: function onChange() {
                                        return setAttributes({ wpmf_folder_id: $('#block-' + clientId + ' .wpmf_select_folders').val() });
                                    } },
                                wpmf_categories.map(function (category, index) {
                                    if (wpmf_folder_id.indexOf(category.value.toString()) !== -1) {
                                        return React.createElement(
                                            'option',
                                            { selected: true, key: index, value: category.value },
                                            category.label
                                        );
                                    } else {
                                        return React.createElement(
                                            'option',
                                            { key: index, value: category.value },
                                            category.label
                                        );
                                    }
                                })
                            )
                        ),
                        React.createElement(
                            FormFileUpload,
                            {
                                multiple: true,
                                islarge: 'true',
                                className: 'editor-media-placeholder__button wpmf_btn_upload_img',
                                onChange: this.uploadFromFiles,
                                accept: 'image/*',
                                icon: 'upload'
                            },
                            wpmf.l18n.upload
                        ),
                        React.createElement(MediaUpload, {
                            gallery: true,
                            multiple: true,
                            onSelect: function onSelect(imgs) {
                                return _this13.onSelectImages(imgs);
                            },
                            accept: 'image/*',
                            allowedTypes: ALLOWED_MEDIA_TYPES,
                            render: function render(_ref2) {
                                var open = _ref2.open;
                                return React.createElement(
                                    Button,
                                    {
                                        islarge: 'true',
                                        className: 'editor-media-placeholder__button wpmfLibrary',
                                        onClick: open
                                    },
                                    wpmf.l18n.media_folder
                                );
                            }
                        }),
                        React.createElement(
                            Button,
                            {
                                islarge: 'true',
                                isPrimary: true,
                                className: 'editor-media-placeholder__button',
                                onClick: function onClick() {
                                    return _this13.setFoldersGallery(wpmf_folder_id, true);
                                }
                            },
                            wpmf.l18n.create_gallery
                        )
                    );
                }

                if (typeof cover === "undefined" && images.length) {
                    return React.createElement(
                        Fragment,
                        null,
                        controls,
                        inspect_controls,
                        display === 'slider' && React.createElement(WpmfSliderTheme, _extends({}, this.props, { selectedImageId: this.state.selectedImageId,
                            gallery_loading: this.state.gallery_loading,
                            setStateImgInfos: this.setStateImgInfos.bind(this),
                            setStateImgSelectedID: this.setStateImgSelectedID.bind(this) })),
                        display === 'default' && React.createElement(WpmfDefaultTheme, _extends({}, this.props, { selectedImageId: this.state.selectedImageId,
                            gallery_loading: this.state.gallery_loading,
                            setStateImgInfos: this.setStateImgInfos.bind(this),
                            setStateImgSelectedID: this.setStateImgSelectedID.bind(this) })),
                        display === 'masonry' && React.createElement(WpmfMasonryTheme, _extends({}, this.props, { selectedImageId: this.state.selectedImageId,
                            gallery_loading: this.state.gallery_loading,
                            setStateImgInfos: this.setStateImgInfos.bind(this),
                            setStateImgSelectedID: this.setStateImgSelectedID.bind(this) })),
                        display === 'portfolio' && React.createElement(WpmfPortfolioTheme, _extends({}, this.props, { selectedImageId: this.state.selectedImageId,
                            gallery_loading: this.state.gallery_loading,
                            setStateImgInfos: this.setStateImgInfos.bind(this),
                            setStateImgSelectedID: this.setStateImgSelectedID.bind(this) })),
                        isSelected && parseInt(wpmf_autoinsert) === 0 && React.createElement(
                            'div',
                            { className: 'blocks-gallery-item has-add-item-button' },
                            React.createElement(
                                FormFileUpload,
                                {
                                    multiple: true,
                                    islarge: 'true',
                                    className: 'block-library-gallery-add-item-button',
                                    onChange: this.uploadFromFiles,
                                    accept: 'image/*',
                                    icon: 'upload'
                                },
                                wpmf.l18n.upload_an_image
                            )
                        )
                    );
                }
            }
        }]);

        return wpmfWordpressGallery;
    }(Component);

    var galleryAttrs = {
        images: {
            type: 'array',
            default: []
        },
        image_sortable: {
            type: 'array',
            default: []
        },
        display: {
            type: 'string',
            default: 'masonry'
        },
        aspect_ratio: {
            type: 'string',
            default: 'default'
        },
        columns: {
            type: 'string',
            default: '3'
        },
        size: {
            type: 'string',
            default: 'medium'
        },
        crop_image: {
            type: 'number',
            default: 1
        },
        targetsize: {
            type: 'string',
            default: 'large'
        },
        link: {
            type: 'string',
            default: 'file'
        },
        wpmf_orderby: {
            type: 'string',
            default: 'post__in'
        },
        wpmf_order: {
            type: 'string',
            default: 'ASC'
        },
        autoplay: {
            type: 'number',
            default: 1
        },
        wpmf_folder_id: {
            type: 'array',
            default: []
        },
        wpmf_autoinsert: {
            type: 'string',
            default: '0'
        },
        img_border_radius: {
            type: 'number',
            default: 0
        },
        borderWidth: {
            type: 'number',
            default: 1
        },
        borderColor: {
            type: 'string',
            default: 'transparent'
        },
        borderStyle: {
            type: 'string',
            default: 'none'
        },
        hoverShadowH: {
            type: 'number',
            default: 0
        },
        hoverShadowV: {
            type: 'number',
            default: 0
        },
        hoverShadowBlur: {
            type: 'number',
            default: 0
        },
        hoverShadowSpread: {
            type: 'number',
            default: 0
        },
        hoverShadowColor: {
            type: 'string',
            default: '#ccc'
        },
        gutterwidth: {
            type: 'number',
            default: 15
        },
        changed: {
            type: 'boolean',
            default: false
        },
        cover: {
            type: 'string',
            source: 'attribute',
            selector: 'img',
            attribute: 'src'
        }
    };

    registerBlockType('wpmf/wordpress-gallery', {
        title: wpmf_blocks.l18n.block_gallery_title,
        icon: 'format-gallery',
        category: 'wp-media-folder',
        supports: {
            align: ['none', 'left', 'right', 'full', 'wide', 'center']
        },
        example: {
            attributes: {
                cover: wpmf_blocks.vars.block_cover
            }
        },
        attributes: galleryAttrs,
        edit: wpmfWordpressGallery,
        save: function save(_ref3) {
            var attributes = _ref3.attributes;
            var images = attributes.images,
                display = attributes.display,
                aspect_ratio = attributes.aspect_ratio,
                columns = attributes.columns,
                size = attributes.size,
                targetsize = attributes.targetsize,
                link = attributes.link,
                wpmf_orderby = attributes.wpmf_orderby,
                wpmf_order = attributes.wpmf_order,
                wpmf_autoinsert = attributes.wpmf_autoinsert,
                wpmf_folder_id = attributes.wpmf_folder_id,
                autoplay = attributes.autoplay,
                crop_image = attributes.crop_image,
                img_border_radius = attributes.img_border_radius,
                gutterwidth = attributes.gutterwidth,
                hoverShadowH = attributes.hoverShadowH,
                hoverShadowV = attributes.hoverShadowV,
                hoverShadowBlur = attributes.hoverShadowBlur,
                hoverShadowSpread = attributes.hoverShadowSpread,
                hoverShadowColor = attributes.hoverShadowColor,
                borderWidth = attributes.borderWidth,
                borderStyle = attributes.borderStyle,
                borderColor = attributes.borderColor,
                align = attributes.align;

            var gallery_shortcode = '[gallery';

            var ids = images.map(function (img) {
                return img.id;
            });
            if (parseInt(wpmf_autoinsert) === 0) {
                if (images.length) {
                    gallery_shortcode += ' ids="' + ids.join() + '"';
                }
            }

            gallery_shortcode += ' display="' + display + '"';
            gallery_shortcode += ' aspect_ratio="' + aspect_ratio + '"';
            gallery_shortcode += ' size="' + size + '"';
            gallery_shortcode += ' columns="' + columns + '"';
            gallery_shortcode += ' targetsize="' + targetsize + '"';
            gallery_shortcode += ' link="' + link + '"';
            gallery_shortcode += ' wpmf_orderby="' + wpmf_orderby + '"';
            gallery_shortcode += ' wpmf_order="' + wpmf_order + '"';
            if (parseInt(autoplay) === 0) {
                gallery_shortcode += ' autoplay="' + autoplay + '"';
            }

            if (parseInt(autoplay) === 0) {
                gallery_shortcode += ' autoplay="' + autoplay + '"';
            }

            if (parseInt(crop_image) === 0) {
                gallery_shortcode += ' crop_image="' + crop_image + '"';
            }

            gallery_shortcode += ' wpmf_autoinsert="' + wpmf_autoinsert + '"';
            if (parseInt(img_border_radius) !== 0) {
                gallery_shortcode += ' img_border_radius="' + img_border_radius + '"';
            }

            if (parseInt(gutterwidth) !== 5) {
                gallery_shortcode += ' gutterwidth="' + gutterwidth + '"';
            }

            if (wpmf_folder_id.length) {
                gallery_shortcode += ' wpmf_folder_id="' + wpmf_folder_id.join() + '"';
            }

            if (typeof hoverShadowH !== "undefined" && typeof hoverShadowV !== "undefined" && typeof hoverShadowBlur !== "undefined" && typeof hoverShadowSpread !== "undefined" && (parseInt(hoverShadowH) !== 0 || parseInt(hoverShadowV) !== 0 || parseInt(hoverShadowBlur) !== 0 || parseInt(hoverShadowSpread) !== 0)) {
                gallery_shortcode += ' img_shadow="' + hoverShadowH + 'px ' + hoverShadowV + 'px ' + hoverShadowBlur + 'px ' + hoverShadowSpread + 'px ' + hoverShadowColor + '"';
            }

            if (borderStyle !== 'none') {
                gallery_shortcode += ' border_width="' + borderWidth + '"';
                gallery_shortcode += ' border_style="' + borderStyle + '"';
                gallery_shortcode += ' border_color="' + borderColor + '"';
            }

            if (typeof align !== "undefined") {
                gallery_shortcode += ' align="align' + align + '"';
            }
            gallery_shortcode += ']';

            return gallery_shortcode;
        }
    });
})(wp.i18n, wp.blocks, wp.element, wp.editor, wp.blockEditor, wp.components);
