User:Ultimate Dark Carnage/Sandbox9.js

/******************************
*******************************
***** Color Select Module *****
********* Created by **********
**** Ultimate Dark Carnage ****
*******************************
******************************/

window.colorSelectLoad = 0;
if (colorSelectLoad < 1){
    colorSelectLoad = 1;
    window.colorSelectHTML = 
        '<section class="ColorSelect WikiaGrid clearfix module" id="ColorSelect">' +
            '<h1 class="ColorSelectHeading" id="ColorSelectHeading">Color Select</h1>' +
            '<nav class="ColorSelectNavigation">' +
                '<ul>' +
                    '<li class="ColorSelectActive"><a href="javascript:void(0);">Color</a></li>' +
                    '<li class="ColorSelectDisabled"><a href="javascript:void(0);">Gradient</a></li>' +
                '</ul>' +
            '</nav>' +
            '<div class="ColorSelectContent ColorSelectComponent FloatLeft">' +
                '<form class="WikiaForm ColorSelectForm" method="" name="">' +
                    '<table style="width: 100%;">' +
                        '<tr>' +
                            '<td colspan="2">' +
                                '<em>Color</em>' +
                                '<label class="ColorSelectLabel" for="RGBRed">Red: </label>' +
                                '<input type="range" id="RGBRed" min="0" max="255" value="128" name="rgb" />' +
                            '</td>' +
                        '</tr>' +
                        '<tr>' +
                            '<td colspan="2">' +
                                '<label class="ColorSelectLabel" for="RGBGreen">Green: </label>' +
                                '<input type="range" id="RGBGreen" min="0" max="255" value="128" name="rgb" />' +
                            '</td>' +
                        '</tr>' +
                        '<tr>' +
                            '<td colspan="2">' +
                                '<label class="ColorSelectLabel" for="RGBBlue">Blue: </label>' +
                                '<input type="range" id="RGBBlue" min="0" max="255" value="128" name="rgb" />' +
                            '</td>' +
                        '</tr>' +
                        '<tr>' +
                            '<td>' +
                                '<em>Alpha</em>' +
                                '<label class="ColorSelectLabel" for="RGBAlphaDisable">Off: </label>' +
                                '<input type="radio" id="RGBAlphaDisable" value="disable" name="rgb-alpha-init" checked />' +
                                '<label class="ColorSelectLabel" for"RGBAlphaEnable">On: </label>' +
                                '<input type="radio" id="RGBAlphaEnable" value="enable" name="rgb-alpha-init" />' +
                            '</td>' +
                        '</tr>' +
                        '<tr>' +
                            '<td colspan="2">' +
                                '<label class="ColorSelectLabel" for="RGBAlpha">Alpha: </label>' +
                                '<input type="range" id="RGBAlpha" min="0" max="1" step="0.01" value="1" name="rgb" disabled />' +
                            '</td>' +
                        '</tr>' +
                    '</table>' +
                '</form>' +
            '</div>' +
            '<div class="ColorSelectComponent FloatRight">' +
                '<h2>Color: </h2>' +
                '<div class="ColorBox" style="width: 100px; height: 100px;">' +
                    '&nbsp;' +
                '</div>' +
                '<ul class="ColorSelectStats">' +
                    '<li>RGBA: <code>rgb(<span class="RGBIdentifier"></span>)</code></li>' +
                    '<li>Hex: <code><span class="HexIdentifier"></span></code></li>' +
                '</ul>' +
            '</div>' +
        '</section>';
    if ($('.ColorSelectNavigation li').hasClass('ColorSelectDisabled') === true){
        $(this).children('a').removeAttr('href');
    }
 
    var RGBRed = $('#RGBRed').val();
    var RGBGreen = $('#RGBGreen').val();
    var RGBBlue = $('#RGBBlue').val();
    var RGBAlpha = $('#RGBAlpha').val();
 
    $('.ColorSelectWrapper').append(colorSelectHTML);
 
    $('.ColorSelect input[type="radio"][name="rgb"]').on('change', function(){
        $('.ColorBox').css('background', 'rgba(' + RGBRed + ', ' + RGBGreen + ', ' + RGBBlue + ', ' + RGBAlpha + ')');
    });
}