Collections functions
General functions
Render functions
Theme permission functions
Resource functions

tltype_srch_generate_js_for_background_and_count()

Description

Generate client side logic for doing expensive computation async for retrieving the tile background and total results count.

Parameters

ColumnTypeDefaultDescription
$tile array Tile information {@see pages/ajax/dash_tile.php}
$tile_id string HTML ID for the container div
$tile_width int Tile width {@see pages/ajax/dash_tile.php}
$tile_height int Tile height {@see pages/ajax/dash_tile.php}
$promoted_image int ID of the promoted resource (for background)

Location

include/dash_functions.php lines 1996 to 2126

Definition

 
function tltype_srch_generate_js_for_background_and_count(array $tilestring $tile_idint $tile_widthint $tile_heightint $promoted_image)
    {
    
// Prevent function from running for the wrong tile type and style
    
parse_str(parse_url($tile['url'] ?? ''PHP_URL_QUERY), $tile_meta);
    if(!(
        isset(
$tile_meta['tltype'], $tile_meta['tlstyle']) 
        && 
$tile_meta['tltype'] === 'srch'
        
&& in_array($tile_meta['tlstyle'], $GLOBALS['tile_styles']['srch'])
    ))
        {
        return;
        }

    
$tile_style $tile_meta['tlstyle'];

    
$search_string explode('?',$tile["link"]);
    
parse_str(str_replace("&","&",$search_string[1]),$search_string);
    
$search = isset($search_string["search"]) ? $search_string["search"] :"";
    
$restypes = isset($search_string["restypes"]) ? $search_string["restypes"] : "";
    
$order_by= isset($search_string["order_by"]) ? $search_string["order_by"] : "";
    
$archive = isset($search_string["archive"]) ? $search_string["archive"] : "";
    
$sort = isset($search_string["sort"]) ? $search_string["sort"] : "";
    
?>
    <!-- Resource counter -->
    <p class="no_resources DisplayNone"> echo htmlspecialchars($GLOBALS['lang']['noresourcesfound']); ?></p>
    <p class="tile_corner_box DisplayNone">
        <span aria-hidden="true" class="fa fa-clone"></span>
    </p>
    <script>
    jQuery(document).ready(function()
        {
        const TILE_STYLE = ' echo escape_quoted_data($tile_style); ?>';
        const SHOW_RESOURCE_COUNT =  echo $tile['resource_count'] ? 'true' 'false'?>;

        let data = {
            'link': ' echo escape_quoted_data($tile["link"]); ?>',
            'promimg': ' echo (int)$promoted_image?>',
        };

        api('get_dash_search_data', data, function(response)
            {
            const TILE_ID = ' echo escape_quoted_data($tile_id); ?>';
            const TILE_WIDTH =  echo $tile_width?>;
            const TILE_HEIGHT =  echo $tile_height?>;
            var preview_resources;

            if(TILE_STYLE === 'thmbs')
                {
                let promoted_image =  echo (int)$promoted_image?>;
                let promoted_image_resource = response.images.filter(resource => resource.ref == promoted_image && typeof resource.url !== 'undefined');
                console.debug('promoted_image_resource = %o', promoted_image_resource);

                // Filter response
                preview_resources = promoted_image > 0 && promoted_image_resource[0] !== undefined ? [promoted_image_resource[0]]
                : promoted_image === 0 && response.images[0] !== undefined ? [response.images[0]]
                : [];
                // Fit (adjust) the 'pre' size to the tile size
                preview_resources = preview_resources.map(function(resource)
                    {
                    if(resource['thumb_width'] * 0.7 >= resource['thumb_height'])
                        {
                        let ratio = resource['thumb_height'] / TILE_HEIGHT;
                        if(ratio == 0) { ratio = 1; } // attempt fit if 'thumb_height' is 0

                        let width = resource['thumb_width'] / ratio;
                        var size = width < TILE_WIDTH ? ' width="100%"' : ' height="100%"';
                        }
                    else
                        {
                        let ratio = resource['thumb_width'] / TILE_WIDTH;
                        if(ratio == 0) { ratio = 1; } // attempt fit if 'thumb_width' is 0

                        let height = resource['thumb_height'] / ratio;
                        var size = height < TILE_HEIGHT ? ' height="100%"' : ' width="100%"';
                        }

                    return '<img src="' + resource.url + '"' + size + ' class="thmbs_tile_img AbsoluteTopLeft">';
                    });
                }
            else if(TILE_STYLE === 'multi')
                {
                preview_resources = response.images
                    .map(function(resource, index, resources_list)
                        {
                        let tile_working_space =  echo $tile['tlsize'] == '' 140 280?>;
                        let gap = tile_working_space / resources_list.length;
                        let space = index * gap;
                        let style = 'left: ' + (space * 1.5) + 'px;'
                            + ' transform: rotate(' + (20 - (index * 12)) + 'deg);';

                        return '<img src="' + resource.url + '" style="' + style + '">';
                        })
                    // images will be prepended to the tile container so reverse the order so that the layout ends up as 
                    // expected (from left to right, each preview on top of the previous one)
                    .reverse();
                }
            // Blank style
            else
                {
                preview_resources = [];
                }

            // Tile background - resource(s) preview
            console.debug('preview_resources = %o', preview_resources);
            if(preview_resources.length > 0)
                {
                let tile_div = jQuery('div#' + TILE_ID);

                for(let i = 0; i < preview_resources.length; i++)
                    {
                    tile_div.prepend(preview_resources[i]);
                    }
                }

            // Resource count
            let tile_corner_box = jQuery('div#' + TILE_ID + ' p.tile_corner_box');
            if(SHOW_RESOURCE_COUNT)
                {
                tile_corner_box.append(response.count);
                tile_corner_box.removeClass('DisplayNone');
                }
            else if(response.count == 0)
                {
                jQuery('div#' + TILE_ID + ' p.no_resources').removeClass('DisplayNone');
                }
            });
        });
    </script>
    
    
return;
    }

This article was last updated 26th September 2022 12:35 Europe/London time based on the source file dated 24th August 2022 16:05 Europe/London time.