OptimizedImagesField.js ➔ imageLoaded - Code Metrics - Inspection of "Version 1.6.26" - nystudio107/craft-imageoptimize - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — develop ( 2386f6...9dccdb )

by Andrew

created 2021-02-27 00:27 UTC

OptimizedImagesField.js ➔ imageLoaded A

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

Complexity

Conditions

Size

Total Lines	12
Code Lines	8

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	8
dl	0
loc	12
rs	10
c	0
b	0
f	0
cc	4

/**
 * 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, 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) {
                    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.
    };

})( jQuery, 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, 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			/**
14			* Convert the passed in bytes into a human readable format
15			*
16			* @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...
17			* @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...
18			* @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...
19			* @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...
20			*/
21			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...
22			const thresh = si ? 1000 : 1024;
23
24			if (Math.abs(bytes) < thresh) {
25			return bytes + ' B';
26			}
27
28			const units = si
29			? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
30			: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
31			let u = -1;
32			const r = 10**dp;
33
34			do {
35			bytes /= thresh;

nystudio107 / craft-imageoptimize

Push — develop ( 2386f6...9dccdb )

OptimizedImagesField.js ➔ imageLoaded A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like