column-sortable icon indicating copy to clipboard operation
column-sortable copied to clipboard

How to keep #hash in URL for @sortablelink's?

Open artifex-media opened this issue 3 years ago • 5 comments

I noticed the @sortablelink does not automaticly recognize you are on a URL with a #hash on it, for example https://www.mywebpage.com/pages/#tab1

@sortablelink will not append that hash into it's link which causes the user to jump back to either a beginning of a page (if the hash is being used as an anchor) or jumps to another part of the page/default tab when the hash is being used a tab reminder, for example with bootstrap tabs.

Is there a way to make it recognize hash in the current url's? Or can I somehow append it myself with the 4th parameter?

artifex-media avatar Apr 22 '21 09:04 artifex-media

My work-around:

I added a new parameter called $anchorId, and appended it to the $queryString.

See updates in render() and parseParameters().

I then create the link like this: @sortablelink('name', 'Name', [], [], ['hash' => '#jump_to_name'])

Hope this helps.

public static function render(array $parameters)
    {
        // NEW - ADDED $anchorId AS A RETURNED PARAMETER
        list($sortColumn, $sortParameter, $title, $queryParameters, $anchorAttributes, $anchorId) = self::parseParameters($parameters);

        $title = self::applyFormatting($title, $sortColumn);

        if ($mergeTitleAs = config('columnsortable.inject_title_as', null)) {
            request()->merge([$mergeTitleAs => $title]);
        }

        list($icon, $direction) = self::determineDirection($sortColumn, $sortParameter);

        $trailingTag = self::formTrailingTag($icon);

        $anchorClass = self::getAnchorClass($sortParameter, $anchorAttributes);

        $anchorAttributesString = self::buildAnchorAttributesString($anchorAttributes);

        $queryString = self::buildQueryString($queryParameters, $sortParameter, $direction);

        // NEW - APPENDED MY $anchorId TO THE STRING
        $queryString = $queryString . implode($anchorId);

        return '<a'.$anchorClass.' href="'.url(request()->path().'?'.$queryString).'"'.$anchorAttributesString.'>'.e($title).$trailingTag;
    }


    /**
     * @param array $parameters
     *
     * @return array
     * @throws \Kyslik\ColumnSortable\Exceptions\ColumnSortableException
     */
    public static function parseParameters(array $parameters)
    {
        //TODO: let 2nd parameter be both title, or default query parameters
        //TODO: needs some checks before determining $title
        $explodeResult    = self::explodeSortParameter($parameters[0]);
        $sortColumn       = (empty($explodeResult)) ? $parameters[0] : $explodeResult[1];
        $title            = (count($parameters) === 1) ? null : $parameters[1];
        $queryParameters  = (isset($parameters[2]) && is_array($parameters[2])) ? $parameters[2] : [];
        $anchorAttributes = (isset($parameters[3]) && is_array($parameters[3])) ? $parameters[3] : [];

        // NEW - ADD IN $anchorId AS A PARAMETER AND RETURN IT

        $anchorId         = (isset($parameters[4]) && is_array($parameters[4])) ? $parameters[4] : [];

        return [$sortColumn, $parameters[0], $title, $queryParameters, $anchorAttributes, $anchorId];
    }

dunkdigital avatar Jul 08 '21 11:07 dunkdigital

When I get time I'll merge in my branch with custom hrefs which would probably sort that out

On Thu, 8 Jul 2021, 9:03 pm Hugh Williams, @.***> wrote:

My work-around:

I added a new parameter called $anchorId, and appended it to the $queryString.

See updates in render() and parseParameters().

I then create the link like this: @sortablelink('name', 'Name', [], [], ['hash' => '#jump_to_name'])

Hope this helps.

public static function render(array $parameters) { // NEW - ADDED $anchorId AS A RETURNED PARAMETER list($sortColumn, $sortParameter, $title, $queryParameters, $anchorAttributes, $anchorId) = self::parseParameters($parameters);

    $title = self::applyFormatting($title, $sortColumn);

    if ($mergeTitleAs = config('columnsortable.inject_title_as', null)) {
        request()->merge([$mergeTitleAs => $title]);
    }

    list($icon, $direction) = self::determineDirection($sortColumn, $sortParameter);

    $trailingTag = self::formTrailingTag($icon);

    $anchorClass = self::getAnchorClass($sortParameter, $anchorAttributes);

    $anchorAttributesString = self::buildAnchorAttributesString($anchorAttributes);

    $queryString = self::buildQueryString($queryParameters, $sortParameter, $direction);

    // NEW - APPENDED MY $anchorId TO THE STRING
    $queryString = $queryString . implode($anchorId);

    return '<a'.$anchorClass.' href="'.url(request()->path().'?'.$queryString).'"'.$anchorAttributesString.'>'.e($title).$trailingTag;
}


/**
 * @param array $parameters
 *
 * @return array
 * @throws \Kyslik\ColumnSortable\Exceptions\ColumnSortableException
 */
public static function parseParameters(array $parameters)
{
    //TODO: let 2nd parameter be both title, or default query parameters
    //TODO: needs some checks before determining $title
    $explodeResult    = self::explodeSortParameter($parameters[0]);
    $sortColumn       = (empty($explodeResult)) ? $parameters[0] : $explodeResult[1];
    $title            = (count($parameters) === 1) ? null : $parameters[1];
    $queryParameters  = (isset($parameters[2]) && is_array($parameters[2])) ? $parameters[2] : [];
    $anchorAttributes = (isset($parameters[3]) && is_array($parameters[3])) ? $parameters[3] : [];

    // NEW - ADD IN $anchorId AS A PARAMETER AND RETURN IT

    $anchorId         = (isset($parameters[4]) && is_array($parameters[4])) ? $parameters[4] : [];

    return [$sortColumn, $parameters[0], $title, $queryParameters, $anchorAttributes, $anchorId];
}

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Kyslik/column-sortable/issues/179#issuecomment-876344510, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADFILPB47WFZAIICW2XW2JLTWWAXFANCNFSM43MDGUQA .

Healyhatman avatar Jul 08 '21 22:07 Healyhatman

I've merged in and made a release for my custom href update. In the fourth parameter for example you can do @sortablelink('column', 'Title', null, ['href' => '/#tab1']) Please give it a go and let me know

Healyhatman avatar Jul 09 '21 12:07 Healyhatman

@Healyhatman A bit late bit like to respond that this worked great :)

artifex-media avatar Aug 09 '22 09:08 artifex-media

If you're trying to use the hash and the query string, the hash param has to come after the query string for it to work...right? AFAICT...it has to be like this for it to work: https://example.com/path?sort=name&direction=desc#named_anchor So, wouldn't there need to be something pretty close to @dunkdigital's solution here to make this work?

tcowin avatar Apr 01 '23 03:04 tcowin