JSFiddle - React, Tailwind, and code Playground

by ifandelse

HTML

<div>
    Character Set:
    <input type="text" id="charSet" class="" value="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" />
</div>
<div>
    Maximum length of ID:
    <input type="text" id="charLimit" class="text-input" />
</div>
<div>
    <input type="button" onclick="window.doIt()" value="Start Generating IDs!" class="button">
</div>
<table class="tbl-results">
    <tr>
        <td class="label">Total possible IDs:</td>
        <td class="value"><span id="total" /></td>
    </tr>
    <tr>
        <td class="label">Current ID Count:</td>
        <td class="value"><span id="count" /></td>
    </tr> 
    <tr>
        <td class="label">Generated ID:</td>
        <td class="value"><span id="results" /></td></td>
    </tr>
</table>

CSS

.button {
     width: 180px;   
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.text-input {
     width: 20px; 
     padding-left: 10px;  
}

body {
     font-family: Tahoma, Arial;
      font-size: 9pt;  
}

td {
     padding: 5px 5px 5px 5px;   
}

.label {
     font-weight: bold;
      text-align: left;  
    vertical-align: top;
}

.value {
     text-align: right;   
}

#results {
     font-size: 28pt;
      color: dimgray;  
    font-family: Courier, Courier New
}

.tbl-results { 
     min-width: 375px;   
}

#charSet {
    width:400px;   
    padding-bottom: 3px;
}

div {
     padding-bottom:5px;   
}

JavaScript

var Permutron = function(maxIdLength, isFixed, charset) {
    var _charset = charset || 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
        _size = maxIdLength;
        _isFixed = isFixed || false
        _generators = [],
        _genIdx = 0;
    
    var Generator = function(size, maxRotations) {
        var _maxRotation = maxRotations || 1,        
            _currentRotation = 1,
            _depth = size|| 0;
        
        this.advanceParent = false;
        this.childGenerator = undefined;
        this.depletedAvailableIds = false;
        this.currentIndex = 0;
        this.maxIdsPossible = function(x) {
            var multiplier = x || 1;
            var count = _charset.length * multiplier;
            if(this.childGenerator) {
               count = this.childGenerator.maxIdsPossible(count);
            } 
            return count;
        }
        
        this.next = function() {
            if(!this.depletedAvailableIds) {
                var char = _charset.charAt(this.currentIndex);
                if(this.childGenerator) {
                    char += this.childGenerator.next();
                    if(this.childGenerator.advanceParent) {
                        this.currentIndex++;
                        this.childGenerator.advanceParent = false;
                    }
                    if(this.childGenerator.depletedAvailableIds) {
                         this.depletedAvailableIds = true;   
                    }
                }
                else {
                    this.currentIndex++;
                }
                if(this.currentIndex>= _charset.length) {
                    if(_currentRotation === _maxRotation) {
                        this.depletedAvailableIds = true;
                    }
                    else {
                        this.currentIndex = 0;
                        _currentRotation++;
                        this.advanceParent = true;
                    }
                }
               ...