Collections functions
Encryption functions
General functions
Render functions
Theme permission functions
Video 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 1478 to 1595

Definition

 
function render_dash_tile_colour_chooser($tile_style$tile_colour)
    {
    global 
$lang$dash_tile_colour$dash_tile_colour_options$baseurl;
    if(
'ftxt' == $tile_style)
        {
        
?>
        <div class="Question">
        
        
}
    else
        {
        
?>
        <span id="tile_style_colour_chooser" style="display: none;">
        
        
}
        
?>
            <label> echo $lang['colour']; ?></label>
    
    
// Show either color picker OR a drop down selector
    
if(=== count($dash_tile_colour_options))
        {
        
?>
        <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>
        
        
}
    else
        {
        
?>
        <select id="tile_style_colour" name="tile_style_colour" onchange="update_tile_preview_colour(this.value);">
        
        
foreach($dash_tile_colour_options as $dash_tile_colour_option_value => $dash_tile_colour_option_text)
            {
            
?>
            <option value=" echo $dash_tile_colour_option_value?>"> echo $dash_tile_colour_option_text?></option>
            
            
}
        
?>
        </select>
        
        
}
        
?>

    <!-- 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>
    

    
return;
    }

This article was last updated 30th November 2020 19:35 Europe/London time based on the source file dated 3rd November 2020 16:55 Europe/London time.