Coding standards
Security in ResourceSpace
Developer reference
Database
Action functions
Admin functions
Ajax functions
Annotation functions
API functions
Collections functions
Comment functions
Config functions
CSV export functions
Dash functions
Debug functions
Encryption functions
Facial recognition functions
File functions
General functions
Language functions
Log functions
Login functions
Message functions
Migration functions
Node functions
PDF functions
Plugin functions
Render functions
Reporting functions
Request functions
Research functions
Slideshow functions
Theme permission functions
User functions
Video functions
Database functions
Metadata functions
Resource functions
Search functions
Map functions
Job functions
Tab functions
Test 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 1978 to 2102

Definition

 
function tltype_srch_generate_js_for_background_and_count(array $tile, string $tile_id, int $tile_width, int $tile_height, int $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'];

    ?>
    <!-- Resource counter -->
    <p class="no_resources DisplayNone"> echo escape($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($tile_style); ?>';
        const SHOW_RESOURCE_COUNT =  echo $tile['resource_count'] ? 'true' : 'false'; ?>;

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

        api('get_dash_search_data', data, function(response)
            {
            const TILE_ID = ' echo escape($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 alt="' + resource.title + '" 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 alt="' + resource.title + '" 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');
                }
            },
             echo generate_csrf_js_object('get_dash_search_data'); ?>
        );
        });
    </script>
    
    }

This article was last updated 7th September 2024 21:35 Europe/London time based on the source file dated 4th July 2024 10:05 Europe/London time.