Front-end-plugin som skapar en array för 'Hitta på sidan'

Hur man använder Region Hallands plugin "region-halland-find-on-page"

Nedan följer instruktioner hur du kan använda pluginet "region-halland-find-on-page".

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 "region-halland-prepare-the-content" 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://github.com/RegionHalland/region-halland-find-on-page/blob/master/LICENSE)

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://github.com/RegionHalland/region-halland-find-on-page.git

Läs in pluginen via composer

Dessa två delar behöver du lägga in i din composer-fil

Repositories = var pluginen är lagrad, i detta fall på github

"repositories": [
  {
    "type": "vcs",
    "url": "https://github.com/RegionHalland/region-halland-find-on-page.git"
  },
],

Require = anger vilken version av pluginen du vill använda, i detta fall version 1.0.0

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

"require": {
  "regionhalland/region-halland-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.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