src/web/assets/src/js/OptimizedImagesField.js - Code Metrics - Inspection of "Merge branch 'release/1.6.40' into v1" - nystudio107/craft-imageoptimize - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — v1 ( e777a2...cb149e )

by Andrew

created 2022-01-12 17:28 UTC

src/web/assets/src/js/OptimizedImagesField.js C

↳ Parent: Project

Complexity

Total Complexity	55
Complexity/F	1.72

Size

Lines of Code	329
Function Count	32

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	55
eloc	214
c	0
b	0
f	0
dl	0
loc	329
rs	6
mnd	23
bc	23
fnc	32
bpm	0.7187
cpm	1.7187
noi	81

2 Functions

Rating	Name	Duplication	Size	Complexity
A	OptimizedImagesField.js ➔ Plugin	0	10	2
A	OptimizedImagesField.js ➔ imageLoaded	0	12	4

How to fix Complexity

/* global $ */
/* global Craft */
/* global Garnish */

/**
 * 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
 */

/**
 * Convert the passed in bytes into a human readable format
 *
 * @param bytes

 * @param si

 * @param dp

 * @returns {string}

 */
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];
}

/**
 * After an image has loaded, query the performance API for the decodedBodySize
 *
 * @param image
 */
function imageLoaded(image) {

    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);
            }
        }
    }
}

(function ( $, window, document) {

    const 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() {

            $(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) {
                    if (image.complete) {
                        imageLoaded(image);
                    } else {
                        image.addEventListener('load', (event) => {

                            imageLoaded(event.target);
                        });
someFunctionCall(
    $firstArgument,
    $secondArgument,
    $thirdArgument
); // Closing parenthesis on a new line.
                    }
                }
            });
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.
    };

})($, window, document);

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) {


            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
            this.$blockContainer.find('> > .actions > .settings').each( (index, value) => {

                const $value = $(value);
                let 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.

            const $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() {

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

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

        onMenuOptionSelect: function(option, menuBtn) {

            const $option = $(option);
            const 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');
            const $blocks = this.$blockContainer.children();
            $blocks.each(function (index, value) {

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

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

                    // id attributes
                    let 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.
            let 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) {

                const $value = $(value);
                let menuBtn;
                if ($value.data('menubtn')) {
                    menuBtn = $value.data('menubtn');
                    let menuItem = $(menuBtn.menu.$menuList[1]);
                    if (typeof menuItem !== undefined) {
                        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) {

                const $target = $(ev.target);
                const $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) {

                const $target = $(ev.target);
                let 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) {

            let $block = $(this.$blockContainer.children()[0]).clone();
            // Reset to default values
            $block.find('.io-select-ar-box').each( (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();
            let 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( (index, value) => {

                    let $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) {

            container.velocity(this.getHiddenBlockCss(container), 'fast', $.proxy( () => {

                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			/* global $ */
2			/* global Craft */
3			/* global Garnish */
4
5			/**
6			* Image Optimize plugin for Craft CMS
7			*
8			* OptimizedImages Field JS
9			*
10			* @author nystudio107
11			* @copyright Copyright (c) 2017 nystudio107
12			* @link https://nystudio107.com
13			* @package ImageOptimize
14			* @since 1.2.0
15			*/
16
17			/**
18			* Convert the passed in bytes into a human readable format
19			*
20			* @param bytes
			0 ignored issues – show Coding Style introduced 2021-02-27 00:33 UTC by Report Bug Copy Issue Report Tag value for @param tag indented incorrectly; expected 3 spaces but found 1 Loading history...
21			* @param si
			0 ignored issues – show Coding Style introduced 2021-02-27 00:33 UTC by Report Bug Copy Issue Report Tag value for @param tag indented incorrectly; expected 3 spaces but found 1 Loading history...
22			* @param dp
			0 ignored issues – show Coding Style introduced 2021-02-27 00:33 UTC by Report Bug Copy Issue Report Tag value for @param tag indented incorrectly; expected 3 spaces but found 1 Loading history...
23			* @returns {string}
			0 ignored issues – show Coding Style introduced 2021-02-27 00:33 UTC by Report Bug Copy Issue Report Tag @returns cannot be grouped with parameter tags in a doc comment Loading history...
24			*/
25			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...
26			const thresh = si ? 1000 : 1024;
27
28			if (Math.abs(bytes) < thresh) {
29			return bytes + ' B';
30			}
31
32			const units = si
33			? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
34			: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
35			let u = -1;

nystudio107 / craft-imageoptimize

Push — v1 ( e777a2...cb149e )

src/web/assets/src/js/OptimizedImagesField.js C

Complexity

Size

Duplication

Importance

2 Functions

How to fix Complexity

Complexity

Duplication Side-by-Side

Filter issues like