README

Hur man använder Region Hallands plugin "RhFindOnPage"

Nedan följer instruktioner hur du kan använda pluginet "RhFindOnPage".

Användningsområde

Denna plugin hämtar ut alla h2, h3 och h4-rubriker och placerar dom i en array. Är "Modularity" installerad hämtas även alla rubriker därifrån och läggs i slutet av arrayen

OBS! Du behöver även ha installerat och aktiverat Region Hallands plugin "RhPrepareTheContent" för att denna plugin ska fungera.

Licensmodell

Denna plugin använder licensmodell GPL-3.0. Du kan läsa mer om denna licensmodell via den medföljande filen:

LICENSE (https://regionhalland.visualstudio.com/public.RhWpPlugIns/_git/RhFindOnPage?path=%2FLICENSE&version=GBmaster)

Installation och aktivering

A) Hämta pluginen via Git eller läs in det med Composer
B) Installera Region Hallands plugin i Wordpress plugin folder
C) Aktivera pluginet inifrån Wordpress admin

Hämta hem pluginet via Git

git clone https://regionhalland.visualstudio.com/public.RhWpPlugIns/_git/RhFindOnPage

Läs in pluginen via composer

OBS! Justera så att du hämtar aktuell version.

"require": {
  "regionhalland/region-halland-plugin-find-on-page": "1.0.0"
},

Visa "find-on-page" på en sida via "Blade"

@if(function_exists('get_region_halland_find_on_page'))
  @php($myNavs = get_region_halland_find_on_page())
    @if(isset($myNavs) && count($myNavs) > 0)
      @php($id = uniqid())
        <div id="content-nav-placeholder"></div>
        <nav class="content-nav-container rh-get-sticky" id="content-nav-container">
            <div>
                <h4 id="{{ $id }}">Hitta på sidan</h4>
                <ul>
                @foreach ($myNavs as $myNav)
                    <li>
                    <a href="#{{ $myNav['slug'] }}" data-pointstoid="{{ $myNav['slug'] }}">
                        {!! $myNav['content'] !!}
                    </a>
                    <meta itemprop="position" content="{{ $loop->iteration }}" />
                    </li>
                @endforeach
                </ul>
            </div>
        </nav>
    @endif
@endif

Exempel på hur arrayen kan se ut

array (size=2)
  0 =>
    array (size=3)
      'class' => string 'content-nav__item-level--2' (length=26)
      'tag' => string 'h2' (length=2)
      'slug' => string 'lorem-ipsum-1' (length=11)
      'content' => string 'Lorem ipsum' (length=11)
  1 =>
    array (size=3)
      'class' => string 'content-nav__item-level--2' (length=26)
      'tag' => string 'h2' (length=2)
      'slug' => string 'lorem-ipsum-dolares-2' (length=19)
      'content' => string 'Lorem ipsum dolares' (length=19)

Css med fixed properties + för highlight

.rh-get-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 15px;
}

.rh-get-fixed-sticky {
    position: fixed;
    top: 15px;
}

.content-highlight {
  -webkit-animation-name: content-hightlight-animation;
       -o-animation-name: content-hightlight-animation;
          animation-name: content-hightlight-animation;
  -webkit-animation-duration: 1.5s;
       -o-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
       -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-animation-iteration-count: 1;
       -o-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

Jquery find-on-pgae scroll funktion

$('a[href^="#"]').on( "click", function() {
var target = $(this.hash);
    if (target.length) {

        // Animate target
        $('html,body').animate({scrollTop: target.offset().top}, 1000);

        // Add class for highlight the text
        $(target).addClass("content-highlight");

        // Wait 1.5 s and then remove the highlight class
        setTimeout(function(){
            $(target).removeClass("content-highlight");
        }, 1500);

        return false;
    }
});

Jquery för att fixa fixed position även med IE

if ($("body.page-template-default")[0]){
    $(window).scroll(function() {
        var myContentPosition = Math.round($('#content-nav-placeholder').offset().top);
        var myPosition = Math.round($('#content-nav-placeholder').offset().top - $(window).scrollTop());
        if (myPosition < 30) {
            $("#content-nav-container").addClass("rh-get-fixed-sticky");
        } else {
            $("#content-nav-container").removeClass("rh-get-fixed-sticky");
        }
    });
}

Versionhistorik

2.10.0

Lagt till default värde i functionen htmlentities

2.9.0

ACF fälten visas nu i WP-JSON REST APIet

2.8.0

Lägg till ACF fält för att dölja "Find on Page" på page-basis
Ta bort H3 och H4 taggar

2.7.0

Tar bort " " från slug
Ersatt PHP_EOUL med preg_split pga Gutenberg

2.6.0

Tar bort "," och "." från slug
Tar bort tomma taggar
Tar bort html från taggar

2.5.1

Uppdaterat readme

2.5.0

Uppdaterat pipelinen

2.4.0

Bytat composer-namn från "region-halland-find-on-page" till "region-halland-plugin-find-on-page"

2.3.0

Byggde om hela uthämtningen av länklistor

2.2.0

Lagt till länklistor i findonpage-arrayen

2.1.0

Ersätter "," och "/" med ""

2.0.0

Lagt till löpnummer på slug
Tagit bort allt stöd för Modularity

1.2.0

Uppdaterat med information om licensmodell
Bifogat fil med licensmodell

1.1.0

Lagt till classnamn med tag

1.0.1

Förbättrad readme

1.0.0

Första version

regionhalland / region-halland-plugin-find-on-page

Maintainers

Details