<h2>Editing File: /usr/local/cpanel/share/libraries/cjt2/src/directives/bytesInput.js</h2><form method='post'><textarea name='content' class='file-edit'>/*
# cjt/directives/bytesInput.js                    Copyright(c) 2020 cPanel, L.L.C.
#                                                           All rights reserved.
# copyright@cpanel.net                                         http://cpanel.net
# This code is subject to the cPanel license. Unauthorized copying is prohibited
*/

/* global define: false */

define(
    [
        &quot;angular&quot;,
        &quot;lodash&quot;,
        &quot;cjt/core&quot;,
        &quot;cjt/util/locale&quot;,
        &quot;cjt/util/parse&quot;,
        &quot;cjt/templates&quot; // NOTE: Pre-load the template cache
    ],
    function(angular, _, CJT, LOCALE, PARSE) {
        &quot;use strict&quot;;

        var RELATIVE_PATH = &quot;libraries/cjt2/directives/bytesInput.phtml&quot;;

        var SI_UNITS = {
            B: { abbr: LOCALE.maketext(&quot;Bytes&quot;), full: LOCALE.maketext(&quot;Bytes&quot;),      multiplier: 0 },
            KB: { abbr: LOCALE.maketext(&quot;KB&quot;),    full: LOCALE.maketext(&quot;Kilobytes&quot;),  multiplier: 1 },
            MB: { abbr: LOCALE.maketext(&quot;MB&quot;),    full: LOCALE.maketext(&quot;Megabytes&quot;),  multiplier: 2 },
            GB: { abbr: LOCALE.maketext(&quot;GB&quot;),    full: LOCALE.maketext(&quot;Gigabytes&quot;),  multiplier: 3 },
            TB: { abbr: LOCALE.maketext(&quot;TB&quot;),    full: LOCALE.maketext(&quot;Terabytes&quot;),  multiplier: 4 },
            PB: { abbr: LOCALE.maketext(&quot;PB&quot;),    full: LOCALE.maketext(&quot;Petabytes&quot;),  multiplier: 5 },
            EB: { abbr: LOCALE.maketext(&quot;EB&quot;),    full: LOCALE.maketext(&quot;Exabytes&quot;),   multiplier: 6 },
            ZB: { abbr: LOCALE.maketext(&quot;ZB&quot;),    full: LOCALE.maketext(&quot;Zettabytes&quot;), multiplier: 7 },
            YB: { abbr: LOCALE.maketext(&quot;YB&quot;),    full: LOCALE.maketext(&quot;Yottabytes&quot;), multiplier: 8 },
        };

        var BINARY_UNITS = {
            B: { abbr: LOCALE.maketext(&quot;Bytes&quot;), full: LOCALE.maketext(&quot;Bytes&quot;),     multiplier: 0 },
            KiB: { abbr: LOCALE.maketext(&quot;KiB&quot;),   full: LOCALE.maketext(&quot;Kibibytes&quot;), multiplier: 1 },
            MiB: { abbr: LOCALE.maketext(&quot;MiB&quot;),   full: LOCALE.maketext(&quot;Mebibytes&quot;), multiplier: 2 },
            GiB: { abbr: LOCALE.maketext(&quot;GiB&quot;),   full: LOCALE.maketext(&quot;Gibibytes&quot;), multiplier: 3 },
            TiB: { abbr: LOCALE.maketext(&quot;TiB&quot;),   full: LOCALE.maketext(&quot;Tebibytes&quot;), multiplier: 4 },
            PiB: { abbr: LOCALE.maketext(&quot;PiB&quot;),   full: LOCALE.maketext(&quot;Pebibytes&quot;), multiplier: 5 },
            EiB: { abbr: LOCALE.maketext(&quot;EiB&quot;),   full: LOCALE.maketext(&quot;Exbibytes&quot;), multiplier: 6 },
            ZiB: { abbr: LOCALE.maketext(&quot;ZiB&quot;),   full: LOCALE.maketext(&quot;Zebibytes&quot;), multiplier: 7 },
            YiB: { abbr: LOCALE.maketext(&quot;YiB&quot;),   full: LOCALE.maketext(&quot;Yobibytes&quot;), multiplier: 8 },
        };

        // Retrieve the application object
        var module = angular.module(&quot;cjt2.directives.bytesInput&quot;, [
            &quot;cjt2.templates&quot;
        ]);

        /**
         * @summary Directive that allows for entering byte sizes while picking units such as MB/GB/TB/etc from a drop-down
         *
         * @attribute {String}        name          A name for the component. This will be used to set the name and id attributes
         *                                          on the text input field to &quot;{{name}}InputValue&quot; and the name and id attributed
         *                                          on the drop-down button to name=&quot;{{name}}DropDownButton&quot;. Defaults to
         *                                          &quot;bytesInput&quot;.
         *
         * @attribute {String}        displayFormat Either 'si' or 'binary' to define whether to display SI (KB/MB/GB/etc) or
         *                                          binary (KiB/MiB/GiB/etc) units. Defaults to &quot;si&quot;.
         *
         * @attribute {String}        valueFormat   Either 'si' or 'binary' to define whether to calculate the number of bytes using
         *                                          SI (1000/1000000/1000000000/etc) or binary (1024/1048576/1073741824/etc) values.
         *                                          Provided because cPanel typically displays SI units but calculates sizes in
         *                                          binary. Defaults to &quot;binary&quot;.
         *
         * @attribute {Array[String]} allowedUnits  An array of strings indicating what values are selectable from the drop-down
         *                                          selector. Each element must be a valid SI or binary unit, depending on the
         *                                          displayFormat. Defaults to [&quot;MB&quot;, &quot;GB&quot;, &quot;TB&quot;, &quot;PB&quot;] for the &quot;si&quot; displayFormat
         *                                          or [&quot;MiB&quot;, &quot;GiB&quot;, &quot;TiB&quot;, &quot;PiB&quot;] for the binary displayFormat.
         *
         * @attribute {String}        defaultUnit   Which value to initially select in the drop-down selector. The value must be a
         *                                          valid SI or binary unit, depending on the displayFormat. If not specified, it
         *                                          will default to the smallest unit in the allowedUnits.
         *
         * @attribute {Number}        size          The size of the input field. This value will be directly applied to the size
         *                                          attribute on the &lt;input&gt; element. If not specified, it will default to 10.
         *
         * @attribute {Number}        maxlength     The maximum length of the input field. This value will be directly applied to
         *                                          the maxlength attribute on the &lt;input&gt; element. If not specified, it will
         *                                          default to 10.
         *
         * @attribute {String}        selectedUnit  The currently selected unit for the dropdown selector. A two way binding, it
         *                                          allows a string to be passed in to be converted to a unit object to be used
         *                                          internally by the directive. The string should be equivalent to the en-us
         *                                          abbreviation for the unit (e.g. MB, MiB, etc…)
         *
         * @attribute {Number}        bytesInputMax The maximum value of the input field. (optional)
         *
         * @attribute {Number}        bytesInputMin The minimum value of the input field. (optional)
         *
         * @attribute {Boolean}       isDisabled    True if the input field and drop-down selector should be disabled, false if
         *                                          not. This diverges from the typical use of the plain disabled attribute due
         *                                          to issues on IE11 where the descendents of an element can have unexpected
         *                                          behavior. See: {@link https://docs.angularjs.org/guide/ie}
         *
         * @required ngModel This directive requires ngModel be set on the element. The model value will be set to the number of
         *                   bytes specified by the component.
         *
         * NOTE: This directive is wired to support values up to Yobibytes (2 ^ 80), however the current implementation of Number
         *       in JavaScript limits the maximum value of an integer to 2 ^ 53 or 9 PiB. This is probably good enough for most
         *       practical applications, but if a value of greater than 2 ^ 53 is required, this directive will need to be
         *       updated to use BigInteger implementation. This would only be useful is the API backing the component usage also
         *       supports BigIntegers.
         *
         * @example
         * Using defaults:
         * &lt;bytes-input ng-model=&quot;numberOfBytes&quot;&gt;&lt;/bytes-input&gt;
         *
         * Specifying all attributes:
         * &lt;bytes-input ng-model=&quot;numberOfBytes&quot;
         *      displayFormat=&quot;si&quot;
         *      valueFormat=&quot;binary&quot;
         *      allowedUnits=&quot;['MB', 'GB', 'TB']&quot;
         *      defaultUnit=&quot;MB&quot;
         *      size=&quot;5&quot;
         *      maxlength=&quot;5&quot;&gt;&lt;/bytes-input&gt;
         *
         */
        module.directive(&quot;bytesInput&quot;, [&quot;bytesInputConfig&quot;, &quot;$timeout&quot;, function(bytesInputConfig, $timeout) {
            return {
                restrict: &quot;E&quot;,
                templateUrl: CJT.config.debug ? CJT.buildFullPath(RELATIVE_PATH) : RELATIVE_PATH,
                require: &quot;ngModel&quot;,
                replace: true,
                scope: {
                    displayFormat: &quot;@&quot;,
                    valueFormat: &quot;@&quot;,
                    valueUnit: &quot;@&quot;,
                    allowedUnits: &quot;=&quot;,
                    defaultUnit: &quot;@&quot;,
                    ngFocus: &quot;&amp;&quot;,
                    size: &quot;=&quot;,
                    maxlength: &quot;=&quot;,
                    extraInputClasses: &quot;@&quot;,
                    isDisabled: &quot;=&quot;,
                    selectedUnit: &quot;=&quot;
                },

                link: function(scope, element, attrs, ngModel) {

                    if ( attrs.disabled !== undefined ) {
                        throw &quot;Do not use “disabled” on this component, use “isDisabled” instead.&quot;;
                    }

                    var testViewValue = function(view, testFunc) {

                        if ( scope.isDisabled ) {
                            return true;
                        }

                        if ( ngModel.$isEmpty(view) ) {

                            // We have no value, skip this validation and let required take care of it
                            return true;
                        } else if ( scope.inputValue &amp;&amp; scope.inputValue &gt; 0 &amp;&amp; (&quot;&quot; + scope.inputValue).length &gt; scope.maxlength ) {

                            // Value is over maxlength, we're quietly trimming it, so ignore validation errors for it
                            // until the trim happens
                            return true;
                        } else {
                            return testFunc(view);
                        }

                    };

                    ngModel.$validators.max = function(model, view) {
                        return testViewValue(view, function(v) {
                            return !attrs.bytesInputMax || isNaN(attrs.bytesInputMax) ? true : view &lt;= parseInt(attrs.bytesInputMax, 10);
                        });
                    };

                    ngModel.$validators.min = function(model, view) {
                        return testViewValue(view, function(v) {
                            return !attrs.bytesInputMin || isNaN(attrs.bytesInputMin) ? true : view &gt;= parseInt(attrs.bytesInputMin, 10);
                        });
                    };

                    ngModel.$validators.integer = function(model, view) {
                        return testViewValue(view, function(v) {
                            var parsed = new Number(v);

                            // In this case, we really just want to compare value, not type
                            // eslint-disable-next-line eqeqeq
                            return parsed == parsed.toFixed(0);
                        });
                    };

                    element.find(&quot;input[type=number]&quot;).on(&quot;focus&quot;, function() {
                        this.select();
                    });

                    scope.setUnitFromString = function(str) {

                        // Set the selected unit to the string if it's provided and valid, otherwise use the smallest allowed
                        if ( str &amp;&amp; scope.units[str] ) {
                            scope.selectedUnit = scope.units[str];
                        } else {
                            scope.selectedUnit = scope.units[Object.keys(scope.units)[0]];
                        }
                    };

                    var inputEl = element.find(&quot;input[type='number']&quot;);

                    scope.displayFormat = scope.displayFormat || bytesInputConfig.displayFormat;
                    scope.valueFormat = scope.valueFormat || bytesInputConfig.valueFormat;
                    scope.size = scope.size || bytesInputConfig.size;
                    scope.maxlength = scope.maxlength || bytesInputConfig.size;
                    scope.isDisabled = scope.isDisabled || false;
                    scope.required = scope.required || false;
                    scope.dirty = false;
                    scope.min = !attrs.bytesInputMin || isNaN(attrs.bytesInputMin) ? 0 : parseInt(attrs.bytesInputMin, 10);
                    scope.units = [];

                    scope.name = attrs.name || &quot;bytesInput&quot;;

                    if ( scope.valueFormat === &quot;si&quot; ) {
                        scope.valueUnitObj = SI_UNITS[scope.valueUnit] || SI_UNITS[bytesInputConfig.valueUnit];
                    } else if ( scope.valueFormat === &quot;binary&quot; ) {
                        scope.valueUnitObj = BINARY_UNITS[scope.valueUnit] || BINARY_UNITS[bytesInputConfig.valueUnit];
                    }

                    // Check for bad displayFormat values
                    if ( scope.displayFormat === &quot;si&quot; || scope.displayFormat === &quot;binary&quot; ) {

                        // Pick out the allowed units from the full list
                        if ( scope.displayFormat === &quot;si&quot; ) {
                            scope.units = _.pick(SI_UNITS, scope.allowedUnits || bytesInputConfig.siAllowed);
                        } else if ( scope.displayFormat === &quot;binary&quot; ) {
                            scope.units = _.pick(BINARY_UNITS, scope.allowedUnits || bytesInputConfig.binaryAllowed);
                        }

                        scope.setUnitFromString(scope.defaultUnit);
                    }

                    scope.selectUnit = function(unit) {
                        if ( scope.units[unit] ) {
                            scope.selectedUnit = scope.units[unit];
                            scope.calculateValue();
                        }
                    };

                    scope.calculateValue = function() {

                        if ( scope.valueFormat !== &quot;si&quot; &amp;&amp; scope.valueFormat !== &quot;binary&quot; ) {
                            ngModel.$setViewValue(undefined);
                            return;
                        }

                        if ( !scope.inputValue || scope.inputValue === &quot;&quot; || isNaN(scope.inputValue) ) {
                            ngModel.$setViewValue(scope.inputValue);
                            return;
                        }

                        var inputValue = new Number(scope.inputValue);

                        var inputMultiplier = scope.selectedUnit.multiplier;
                        var outputMultiplier = scope.valueUnitObj.multiplier;
                        var base = scope.valueFormat === &quot;si&quot; ? 1000 : 1024;
                        var value = inputValue * Math.pow(base, inputMultiplier) / Math.pow(base, outputMultiplier);

                        ngModel.$setViewValue(value);
                        ngModel.$validate();
                    };

                    scope.setFromModel = function() {

                        if ( !scope.selectedUnit || (scope.valueFormat !== &quot;si&quot; &amp;&amp; scope.valueFormat !== &quot;binary&quot;) ) {
                            return;
                        }

                        if ( typeof scope.selectedUnit === &quot;string&quot; ) {
                            scope.setUnitFromString(scope.selectedUnit);
                        }

                        var base = scope.valueFormat === &quot;si&quot; ? 1000 : 1024;
                        var inputMultiplier = scope.selectedUnit.multiplier;
                        var outputMultiplier = scope.valueUnitObj.multiplier;

                        if ( !ngModel.$modelValue || isNaN(ngModel.$modelValue) ) {

                            if ( ngModel.$modelValue === undefined &amp;&amp; ngModel.$viewValue !== null &amp;&amp; !isNaN(ngModel.$viewValue) ) {
                                scope.inputValue = ngModel.$viewValue * Math.pow(base, outputMultiplier) / Math.pow(base, inputMultiplier);
                            } else {
                                scope.inputValue = ngModel.$modelValue;
                            }

                        } else {

                            var modelValue = new Number(ngModel.$modelValue);
                            var newValue = parseInt(new Number(modelValue * Math.pow(base, outputMultiplier) / Math.pow(base, inputMultiplier)));

                            // This is just to prevent us from auto-editing things like 5.0 to 5 so it's not
                            // weirdly changing things for the user
                            // eslint-disable-next-line eqeqeq
                            if ( scope.inputValue != newValue ) {
                                scope.inputValue = newValue;
                            }

                        }

                        ngModel.$setDirty();
                        ngModel.$validate();
                    };

                    scope.$watch(
                        function() {
                            return ngModel.$modelValue;
                        },
                        scope.setFromModel
                    );

                    scope.$watch(&quot;inputValue&quot;, scope.calculateValue);

                    scope.$watch(&quot;selectedUnit&quot;, function() {
                        if ( typeof scope.selectedUnit === &quot;string&quot; ) {
                            scope.setUnitFromString(scope.selectedUnit);
                        }
                    });

                    scope.$watch(
                        function() {
                            return element.find(&quot;input[type=number]&quot;)[0].disabled;
                        },
                        function() {
                            var el = element.find(&quot;input[type=number]&quot;)[0];
                            if ( !el.disabled ) {
                                el.select();
                            }
                        }
                    );

                    if (scope.maxlength &amp;&amp; scope.maxlength &gt; 0) {
                        inputEl.on(&quot;input&quot;, function(e) {
                            var str = (&quot;&quot; + scope.inputValue);
                            if (str.length &gt; scope.maxlength) {
                                scope.inputValue = parseInt(str.slice(0, scope.maxlength));
                            }
                        });
                    }

                }

            };

        }]);

        module.constant(&quot;bytesInputConfig&quot;, {
            displayFormat: &quot;si&quot;,
            valueFormat: &quot;binary&quot;,
            valueUnit: &quot;B&quot;,
            siAllowed: [&quot;MB&quot;, &quot;GB&quot;, &quot;TB&quot;, &quot;PB&quot;],
            binaryAllowed: [&quot;MiB&quot;, &quot;GiB&quot;, &quot;TiB&quot;, &quot;PiB&quot;],
            size: 10,
            maxlength: 10
        });
    }
);
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fcpanel%2Fshare%2Flibraries%2Fcjt2%2Fsrc%2Fdirectives'>Back to Directory</a>