bgrins / spectrum

The No Hassle JavaScript Colorpicker
https://bgrins.github.io/spectrum/
MIT License
2.32k stars 588 forks source link

A problem with including var and conditional functions in the function #571

Open emoz41 opened 3 years ago

emoz41 commented 3 years ago

Hi

JQuery version: 3.5.1

I have a simple problem: I cannot put var and conditional functions in the function of this library

My code:

` $("#change-color-04").spectrum({

    type:"color",                                                       

    showButtons: false,                                                 

    showAlpha: false,                                           

    allowEmpty: false,                                                  

    showInput: true,                                                    

    palette: [ ],                                                       

    showSelectionPalette: false,                                        

    selectionPalette: ["#d8dee3", "#232830","#363e45","#739921"],       

    ///////////////////////////////////

    checkOptionSelect   = $("p").filter("#theme-manager-theme-list-result").text()      

    checkOption01       = $("p").find("#option-change-themes-01").text()        

    checkOption02       = $("p").find("#option-change-themes-02").text()    

    if( checkOptionSelect === checkOption01 )
    {
        move: function(color) {

            $("div").filter("#change-color-04").css("background-color",color.toHexString()) 

            $("p,h2").filter("#texts-fontcolor").css("color",color.toHexString())

            $("span").filter(".data-theme-manager-theme-01-texts-color").text( color.toHexString() ) 
        }

        return
    }

    if( checkOptionSelect === checkOption02 )
    {
        move: function(color) {

            $("div").filter("#change-color-04").css("background-color",color.toHexString()) 

            $("p,h2").filter("#texts-fontcolor").css("color",color.toHexString())

            $("span").filter(".data-theme-manager-theme-02-texts-color").text( color.toHexString() )
        }

        return
    }
});`

what's the problem ?

emoz41 commented 3 years ago

Hi

I fixed the problem with this code:

` $("#theme-manager-base-color-01").on("click",function() { checkOptionSelect = $("p").filter("#theme-manager-theme-list-result").text()

    checkOption01       = $("p").filter("#option-change-themes-01").text()

    checkOption02       = $(document).find("#option-change-themes-02").text()   

    if( checkOptionSelect === checkOption01 )
    {   
        $("#change-color-04").spectrum({

            // ضبط اساسيات مولد الالوان

            type:"color",                                                       

            showButtons: false,                                             

            showAlpha: false,                                                   

            allowEmpty: false,                                                  

            showInput: true,                                                    

            palette: [ ],                                                       

            showSelectionPalette: false,                                        

            selectionPalette: ["#d8dee3", "#232830","#363e45","#739921"],       

            // نهاية ضبط اساسيات مولد الالوان

            move: function(color) {

                $("div").filter("#change-color-04").css("background-color",color.toHexString())         

                $("p,h2").filter("#texts-fontcolor").css("color",color.toHexString())                   

                $("span").filter(".data-theme-manager-theme-01-texts-color").text( color.toHexString() ) 
            }
        }); 

        return
    }

    if( checkOptionSelect === checkOption02 )
    {
        $("#change-color-04").spectrum({

            // ضبط اساسيات مولد الالوان

            type:"color",                                                       

            showButtons: false,                                             

            showAlpha: false,                                                   

            allowEmpty: false,                                                  

            showInput: true,                                                    

            palette: [ ],                                                       

            showSelectionPalette: false,                                        

            selectionPalette: ["#d8dee3", "#232830","#363e45","#739921"],       

            // نهاية ضبط اساسيات مولد الالوان

            move: function(color) {

                $("div").filter("#change-color-04").css("background-color",color.toHexString())         

                $("p,h2").filter("#texts-fontcolor").css("color",color.toHexString())                   

                $("span").filter(".data-theme-manager-theme-02-texts-color").text( color.toHexString() ) 
            }
        })

        return
    }
});`

But is there no solution to this problem without using this solution? Because the click function delays responding by one click until the colors appear

emoz41 commented 3 years ago

Unfortunately, my solution was wrong, because I cannot use the second conditional function, the browser only recognizes the first function, and does not recognize the second function, because the library is loaded in the first condition, and it does not accept to be transferred to the second condition because it is loaded, so Is there no solution to this problem?