Collections functions
General functions
Node functions
Render functions
Theme permission functions
User functions
Resource functions

render_dash_tile_colour_chooser()

Description

Renders a new section to pick/ select a colour. User can either use the color
picker or select a colour from the ones already available (config option)

Parameters

ColumnTypeDefaultDescription
$tile_style string
$tile_colour string Hexadecimal code (without the # sign). Example: 0A8A0E

Return

void

Location

include/dash_functions.php lines 1538 to 1631

Definition

 
function render_dash_tile_colour_chooser($tile_style$tile_colour)
    {
    global 
$lang$baseurl;
    if(
'ftxt' == $tile_style)
        {
        
?>
        <div class="Question">
        
        
}
    else
        {
        
?>
        <span id="tile_style_colour_chooser" style="display: none;">
        
        
}
        
?>
        <label> echo escape($lang['colour']); ?></label>
   
        <script src=" echo $baseurl?>/lib/spectrum/spectrum.js"></script>
        <link rel="stylesheet" href=" echo $baseurl?>/lib/spectrum/spectrum.css" />
        <input id="tile_style_colour" name="tlstylecolour" type="text" onchange="update_tile_preview_colour(this.value);" value=" echo $tile_colour?>">
        <script>
            jQuery('#tile_style_colour').spectrum({
                showAlpha: true,
                showInput: true,
                clickoutFiresChange: true,
                preferredFormat: 'rgb'
            });
        </script>

    <!-- Show/ hide colour picker/ selector -->
    <script>
        function update_tile_preview_colour(colour)
            {
            jQuery('#previewdashtile').css('background-color', '#' + colour);
            }

    
    
if('ftxt' == $tile_style)
        {
        
?>
        jQuery(document).ready(function() {
            if(jQuery('#tile_style_colour').val() != '')
                {
                update_tile_preview_colour(' echo $tile_colour?>');
                }
        });
        
        
}
    else
        {
        
?>
        jQuery(document).ready(function() {
            if(jQuery('#tile_style_ echo $tile_style?>').prop('checked'))
                {
                jQuery('#tile_style_colour_chooser').show();
                update_tile_preview_colour(' echo $tile_colour?>');
                }
        });

        jQuery('input:radio[name="tlstyle"]').change(function() {
            if(jQuery(this).prop('checked') && jQuery(this).val() == ' echo $tile_style?>')
                {
                jQuery('#tile_style_colour_chooser').show();
                }
            else
                {
                jQuery('#tile_style_colour_chooser').hide();
                jQuery('#tile_style_colour').val('');
                jQuery('#tile_style_colour').removeAttr('style');
                jQuery('#previewdashtile').removeAttr('style');
                }
        });
        
        
}
        
?>
    </script>
    
    
if('ftxt' == $tile_style)
        {
        
?>
        </div>
        
        
}
    else
        {
        
?>
        </span>
        
        
}
        
?>
    <div class="clearerleft"></div>
    
    
}

This article was last updated 19th March 2024 02:35 Europe/London time based on the source file dated 15th March 2024 17:00 Europe/London time.