Update advanced preview and sliders on color change

[Jaza]

Currently, when you update the hex value in the text box, only the ".current-color" preview box changes accordingly. Nothing in the advanced tab gets updated (assuming that showAdvanced is enabled). Ideally, everything in the advanced tab should change to the new color on change (i.e. the advanced preview box, and the HSL sliders).

[SKeehnen]

Hi Jaza,

I have been playing around with a fix to update the sliders, it might not be the best solution, but it works for me:

               updatePreview: function ($thisEl) {
            function updatePreviewElements(color) {
                // Update "current-color" preview square.
                $thisEl.siblings(".input-group-btn")
                       .find(".current-color")
                       .css("background-color", "#" + color);

                // Update preview and HSL sliders in advanced tab.
                if (settings.showAdvanced) {
                    $thisEl.parent()
                           .find(".advanced-content .color-preview")
                           .css("background-color", "#" + color);

                    var clr = tinycolor(color);
                    var colorHsl = clr.toHsl(); // { h: 0, s: 1, l: 0.5, a: 1 }
                    settings.advancedStatus = colorHsl;

                    var lenght = $thisEl.parent().find("span.spectrum-lightness").width();
                    var sliderPosH = lenght / 360 * colorHsl.h;
                    var sliderPosL = lenght * colorHsl.l;
                    var sliderPosS = lenght * colorHsl.s;

                    $thisEl.parent()
                        .find(".spectrum-hue .highlight-band")
                 .css("left", sliderPosH + "px");
                    $thisEl.parent()
                         .find("span.hue-value").empty().append(parseInt(colorHsl.h));

                    $thisEl.parent()
                           .find(".spectrum-lightness .highlight-band")
                    .css("left", sliderPosL + "px");
                    $thisEl.parent()
                         .find("span.lightness-value").empty().append(parseInt(colorHsl.l * 100) + "%");


                    $thisEl.parent()
                        .find(".spectrum-saturation .highlight-band")
                 .css("left", sliderPosS + "px");
                    $thisEl.parent()
                         .find("span.saturation-value").empty().append(parseInt(colorHsl.s * 100) + "%");

                    // midpoint of the current left position of the color band
                    var hbWidth = $(".highlight-band").first().outerWidth(),
                        halfHBWidth = hbWidth / 2,
                        highlightBandLocation = parseInt($thisEl.css("left"), 10) + halfHBWidth,
                        spectrumType = "bidirectional",
                        colorMultiplier = methods.getColorMultiplier(spectrumType, highlightBandLocation, "advanced");

                    methods.updateSaturationStyles($thisEl.parent().find(".spectrum-saturation"), colorHsl.h, colorHsl.l);
                    methods.updateHueStyles($thisEl.parent().find(".spectrum-hue"), colorHsl.s, colorHsl.l);
                    methods.updateLightnessStyles($thisEl.parent().find(".spectrum-lightness"), colorHsl.h, colorHsl.s);
                    methods.modifyHighlightBand($thisEl.parent().find(".highlight-band"), colorMultiplier, spectrumType);

                }
            }

            if (!settings.allowBlank) {
                myColorVars.typedColor = tinycolor($thisEl.val()).toHex();
                updatePreviewElements(myColorVars.typedColor);
            } else {
                myColorVars.typedColor = $thisEl.val().match(/^\s+$|^$/) ? '' : tinycolor($thisEl.val()).toHex();
                if (myColorVars.typedColor === '') {
                    $thisEl.siblings(".input-group-btn")
                           .find(".current-color")
                           .css("background", "none");
                } else {
                    updatePreviewElements(myColorVars.typedColor);
                }
            }
        },

[charleslaw]

I have a solution I'm happy with:#81