OptimizedImagesField.js ➔ initSizesVueComponent - Code Metrics - Inspection of "Merge branch 'develop' into feature/sizes-ux" - nystudio107/craft-imageoptimize - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — develop ( e89f4d...9f2622 )

by Andrew

created 2021-03-28 19:28 UTC

OptimizedImagesField.js ➔ initSizesVueComponent C

↳ Parent: src/assetbundles/imageoptimize/src/js/OptimizedImagesField.js

Complexity

Conditions

Size

Total Lines	12
Code Lines	9

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	9
c	0
b	0
f	0
dl	0
loc	12
rs	5.4
cc	11

How to fix Complexity

/**
 * Image Optimize plugin for Craft CMS
 *
 * OptimizedImages Field JS
 *
 * @author    nystudio107
 * @copyright Copyright (c) 2017 nystudio107
 * @link      https://nystudio107.com
 * @package   ImageOptimize
 * @since     1.2.0
 */

import SizesContainer from '@/vue/SizesContainer.vue';

function humanFileSize(bytes, si = false, dp = 1) {

    const thresh = si ? 1000 : 1024;

    if (Math.abs(bytes) < thresh) {
        return bytes + ' B';
    }

    const units = si
        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
        : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
    let u = -1;
    const r = 10 ** dp;

    do {
        bytes /= thresh;
        ++u;
    } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);


    return bytes.toFixed(dp) + ' ' + units[u];
}

;(function ($, window, document, undefined) {

    var pluginName = "ImageOptimizeOptimizedImages",
        defaults = {};

    // Plugin constructor
    function Plugin(element, options) {

        this.element = element;

        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype = {

        init: function (id) {

            var _this = this;


            $(function () {


                /* -- _this.options gives us access to the $jsonVars that our FieldType passed down to us */

                const images = document.querySelectorAll("img.io-preview-image");
                for (const image of images) {
                    const url = image.src || image.href;
                    if (url && url.length > 0) {
                        const iTime = performance.getEntriesByName(url)[0];

                        if (iTime !== undefined) {
                            const elem = image.parentNode.parentNode.parentNode.nextElementSibling.querySelector('.io-file-size');
                            if (elem) {
                                elem.innerHTML = humanFileSize(iTime.decodedBodySize, true);
                            }
                        }
                    }
                }
            });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
        }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function (options) {
        return this.each(function () {

            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName,

                    new Plugin(this, options));
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
            }
        });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
    };

})(jQuery, window, document);

function initSizesVueComponent(sizesWrapperId) {

    const vm = new Vue({

        el: '#' + sizesWrapperId,
        components: {
            'sizes-container': SizesContainer,
        },
        data: {},
        methods: {},
        mounted() {
        }
    });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
}

Craft.OptimizedImagesInput = Garnish.Base.extend(

    {
        id: null,
        inputNamePrefix: null,
        inputIdPrefix: null,

        $container: null,
        $blockContainer: null,
        $addBlockBtnContainer: null,
        $addBlockBtnGroup: null,
        $addBlockBtnGroupBtns: null,

        blockSort: null,
        blockSelect: null,

        init: function (id, inputNamePrefix, sizesWrapperId) {

            initSizesVueComponent(sizesWrapperId);
            this.id = id;
            this.inputNamePrefix = inputNamePrefix;
            this.inputIdPrefix = Craft.formatInputId(this.inputNamePrefix);


            this.$container = $('#' + this.id);
            this.$blockContainer = this.$container.children('.variant-blocks');
            this.$addBlockBtnContainer = this.$container.children('.buttons');
            this.$addBlockBtnGroup = this.$addBlockBtnContainer.children('.btngroup');
            this.$addBlockBtnGroupBtns = this.$addBlockBtnGroup.children('.btn');

            // Create our action button menus
            var _this = this;
            this.$blockContainer.find('> > .actions > .settings').each(function (index, value) {

                var $value = $(value);
                var menuBtn;
                if ($value.data('menubtn')) {
                    menuBtn = $value.data('menubtn');
                } else {
                    menuBtn = new Garnish.MenuBtn(value);

                }
                menuBtn.menu.settings.onOptionSelect = $.proxy(function (option) {

                    this.onMenuOptionSelect(option, menuBtn);
                }, _this);
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
            });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.

            var $blocks = this.$blockContainer.children();

            this.blockSort = new Garnish.DragSort($blocks, {

                handle: '> .actions > .move',
                axis: 'y',
                collapseDraggees: true,
                magnetStrength: 4,
                helperLagBase: 1.5,
                helperOpacity: 0.9,
                onSortChange: $.proxy(function () {

                    this.resetVariantBlockOrder();
                }, this)
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
            });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.

            this.addListener(this.$addBlockBtnGroupBtns, 'click', function (ev) {

                var type = $(ev.target).data('type');

                this.addVariantBlock(null);
            });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.

            this.addAspectRatioHandlers();
            this.reIndexVariants();
        },

        onMenuOptionSelect: function (option, menuBtn) {
            var $option = $(option);
            var container = menuBtn.$btn.closest('.matrixblock');

            switch ($option.data('action')) {
                case 'add': {

                    this.addVariantBlock(container);
                    break;
                }
                case 'delete': {
                    if (!$option.hasClass('disabled')) {
                        this.deleteVariantBlock(container);
                    }
                    break;
                }
            }
        },

        getHiddenBlockCss: function ($block) {
            return {
                opacity: 0,
                marginBottom: -($block.outerHeight())
            };
        },

        // Re-index all of the variant blocks
        reIndexVariants: function () {
            this.$blockContainer = this.$container.children('.variant-blocks');
            var $blocks = this.$blockContainer.children();
            $blocks.each(function (index, value) {

                var variantIndex = index;
                var $value = $(value);
                var elements = $value.find('div .field, label, input, select');

                // Re-index all of the element attributes
                $(elements).each(function (index, value) {

                    // id attributes
                    var str = $(value).attr('id');
                    if (str) {
                        str = str.replace(/\-([0-9]+)\-/g, "-" + variantIndex + "-");
                        $(value).attr('id', str);
                    }
                    // for attributes
                    str = $(value).attr('for');
                    if (str) {
                        str = str.replace(/\-([0-9]+)\-/g, "-" + variantIndex + "-");
                        $(value).attr('for', str);
                    }
                    // Name attributes
                    str = $(value).attr('name');
                    if (str) {
                        str = str.replace(/\[([0-9]+)\]/g, "[" + variantIndex + "]");
                        $(value).attr('name', str);
                    }
                });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
            });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
            var disabledDeleteItem = false;
            // If we only have one block, don't allow it to be deleted
            if ($blocks.length == 1) {

                disabledDeleteItem = true;
            }
            $blocks.find('> .actions > .settings').each(function (index, value) {

                var $value = $(value);
                var menuBtn;
                if ($value.data('menubtn')) {
                    menuBtn = $value.data('menubtn');
                    $menuItem = $(menuBtn.menu.$menuList[1]);

                    if (disabledDeleteItem) {
                        $menuItem.find("> li > a").addClass('disabled').disable();
                    } else {
                        $menuItem.find("> li > a").removeClass('disabled').enable();
                    }
                }
            });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.

        },

        addAspectRatioHandlers: function () {
            this.addListener($('.lightswitch'), 'click', function (ev) {

                var $target = $(ev.target);
                var $block = $target.closest('.matrixblock');
                $block.find('.io-aspect-ratio-wrapper').slideToggle();
            });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
            this.addListener($('.io-select-ar-box'), 'click', function (ev) {

                var $target = $(ev.target);
                var x = $(ev.target).data('x'),
                    y = $(ev.target).data('y'),
                    custom = $(ev.target).data('custom'),
                    field, $block;
                // Select the appropriate aspect ratio
                $block = $target.closest('.matrixblock');
                $block.find('.io-select-ar-box').each(function (index, value) {

                    $(value).removeClass('io-selected-ar-box');
                });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
                $target.addClass('io-selected-ar-box');

                // Handle setting the actual field values
                if (custom) {
                    $block.find('.io-custom-ar-wrapper').slideDown();
                } else {
                    $block.find('.io-custom-ar-wrapper').slideUp();
                    field = $block.find('input')[2];
                    $(field).val(x);
                    field = $block.find('input')[3];
                    $(field).val(y);
                }
            });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
        },

        addVariantBlock: function (container) {
            var _this = this;
            $block = $(this.$blockContainer.children()[0]).clone();

            // Reset to default values
            $block.find('.io-select-ar-box').each(function (index, value) {

                if (index === 0) {
                    $(value).addClass('io-selected-ar-box');
                } else {
                    $(value).removeClass('io-selected-ar-box');
                }
            });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
            $block.find('.io-custom-ar-wrapper').hide();
            field = $block.find('input')[0];

            $(field).val(1200);
            field = $block.find('input')[1];
            $(field).val(1);
            field = $block.find('input')[2];
            $(field).val(16);
            field = $block.find('input')[3];
            $(field).val(9);
            field = $block.find('select')[0];
            $(field).val(82);
            field = $block.find('select')[1];
            $(field).val('jpg');
            $block.css(this.getHiddenBlockCss($block)).velocity({

                opacity: 1,
                'margin-bottom': 10
            }, 'fast', $.proxy(function () {


                // Insert the block in the right place
                if (container) {
                    $block.insertBefore(container);
                } else {
                    $block.appendTo(this.$blockContainer);
                }
                // Update the Garnish UI controls
                this.blockSort.addItems($block);
                this.addAspectRatioHandlers();
                $block.find('.settings').each(function (index, value) {

                    var $value = $(value),
                        menuBtn,
                        menu;

                    menu = _this.$container.find('.io-menu-clone > .menu').clone();
                    $(menu).insertAfter($value);
                    menuBtn = new Garnish.MenuBtn(value);


                    menuBtn.menu.settings.onOptionSelect = $.proxy(function (option) {

                        _this.onMenuOptionSelect(option, menuBtn);
                    }, this);
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
                });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
                this.reIndexVariants();
            }, this));
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
        },

        deleteVariantBlock: function (container) {
            var _this = this;
            container.velocity(this.getHiddenBlockCss(container), 'fast', $.proxy(function () {

                container.remove();
                _this.reIndexVariants();
            }, this));
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
        },

        resetVariantBlockOrder: function () {
            this.reIndexVariants();
        }

    });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.


1			/**
2			* Image Optimize plugin for Craft CMS
3			*
4			* OptimizedImages Field JS
5			*
6			* @author nystudio107
7			* @copyright Copyright (c) 2017 nystudio107
8			* @link https://nystudio107.com
9			* @package ImageOptimize
10			* @since 1.2.0
11			*/
12
13			import SizesContainer from '@/vue/SizesContainer.vue';
14
15			function humanFileSize(bytes, si = false, dp = 1) {
			0 ignored issues – show Coding Style introduced 2021-02-20 02:15 UTC by Report Bug Copy Issue Report Opening brace should be on a new line Loading history...
16			const thresh = si ? 1000 : 1024;
17
18			if (Math.abs(bytes) < thresh) {
19			return bytes + ' B';
20			}
21
22			const units = si
23			? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
24			: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
25			let u = -1;
26			const r = 10 ** dp;
27
28			do {
29			bytes /= thresh;
30			++u;
31			} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
32
33
34			return bytes.toFixed(dp) + ' ' + units[u];
35			}
36
37			;(function ($, window, document, undefined) {
38
39			var pluginName = "ImageOptimizeOptimizedImages",

nystudio107 / craft-imageoptimize

Push — develop ( e89f4d...9f2622 )

OptimizedImagesField.js ➔ initSizesVueComponent C

Complexity

Size

Duplication

Importance

How to fix Complexity

Complexity

Duplication Side-by-Side

Filter issues like