page loaderダウンロード - page loaderソースコードのダウンロード

page loader

その他のカテゴリー

1.0.0

ダウンロード

@oom/ページローダー

ajax を使用してページをロードし、現在のページのコンテンツを置き換える Javascript ライブラリ。タイトル、URL、CSS、JavaScriptを変更します。このライブラリを使用すると、ページの読み込み速度が向上し、美しいページ遷移を作成できます。次のような特徴があります。

依存関係なし
超軽量
通常のリンクやフォームと一緒に使用できます
段階的な拡張戦略に従います。JavaScriptが失敗しても、Web ページは動作し続けます。
ES6 で構築されているため、古いブラウザのサポートにはトランスパイラーが必要になる場合があります

同様の目的を持つ他のライブラリには、barba.js、turbolink、または Highway があります。ページローダーの主な目的は、より柔軟でカスタマイズ可能にするために、軽量化と魔法の軽減を行うことです。

インストール

要件：

パッケージと依存関係をインストールするための NPM または Yarn
http リクエストには Fetch API を使用するため、フェッチポリフィルと Promise ポリフィルを使用して古いブラウザをサポートできます。

npm install @oom/page-loader

使用法

HTML

次の HTML コードから始めましょう。

 <!DOCTYPE html >
< html >
< head >
    < meta charset =" utf-8 " >
    < title > Page title </ title >
    < link rel =" stylesheet " href =" styles.css " >
    < script src =" scripts.js " > </ script >
</ head >
< body >
    < nav class =" menu " >
        < a href =" section1.html " > Section 1 </ a >
        < a href =" section2.html " > Section 2 </ a >
        < a href =" section3.html " > Section 3 </ a >
    </ nav >
    < main class =" content " >
        < h1 > This is the first section </ h1 >

        < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </ p >
    </ main >
</ body >
</ html >

JavaScript

完全なエクスペリエンスを得るには JavaScript を使用してください。

 import Navigator from "./vendors/@oom/page-loader/src/navigator.js" ;

const nav = new Navigator ( async ( load , event ) => {
  //Load the page
  const page = await load ( ) ;

  await page . replaceStyles ( ) ; //Load the new css styles defined in <head> not present currently
  await page . replaceScripts ( ) ; //Load the new js files defined in <head> not present currently
  await page . replaceContent ( "main" ) ; //Replace the <main> element
  await page . updateState ( ) ; //Update the page status (change url, title etc)
  await page . resetScroll ( ) ; //Reset the scroll position
} ) ;

//Init the navigation, capturing all clicks in links and form submits
nav . init ( ) ;

//Optionally, you can filter links and forms to disable this behaviour
nav . addFilter ( ( el ) => ! el . classList . contains ( "no-loader" ) ) ;

//For example, to disable forms:
nav . addFilter ( ( el ) => el . tagName !== "FORM" ) ;

//Subscribe to events
nav . on ( "error" , ( err ) => console . error ( err ) ) ;

//You can go manually to other url when you want
nav . go ( "https//example.com/page2.html" ) ;

//Or submit a form via ajax
const form = document . getElementById ( "my-form" ) ;
nav . submit ( form ) ;

//And handle downloads (links with download attribute)
nav . download ( async ( download , event , link ) => {
  link . classList . add ( "downloading" ) ;
  await download ( ) ;
  link . classList . remove ( "downloading" ) ;
} ) ;

ページ

ページインスタンスには、読み込まれたページに関する情報が含まれます。次のメソッドとプロパティがあります。

 const nav = new Navigator ( async ( load , event , target , submitter ) => {
  //By clicking a link, the target is the A element
  //By submitting a form, the target is the form but you can get the submitter element (the button being pressed)
  const trigger = submitter || target ;

  trigger . classList . add ( "loading" ) ;

  const page = await load ( ) ;

  //Replace an element in the document with the same element in the page
  await page . replaceContent ( "#content" ) ;

  //Append the children of the loaded page to the same element in the document
  await page . appendContent ( "#content" ) ;

  //Remove content from the document
  await page . removeContent ( "#content > .unwanted" ) ;

  //Change the css styles used in the new page (<link rel="stylesheet"> in <head>).
  await page . replaceStyles ( ) ;

  //Change the js styles used in the new page (<script src="..."> in <head>).
  await page . replaceScripts ( ) ;

  //Performs a document.querySelector in the page. Throws an exception on empty result
  await page . querySelector ( "p" ) ;

  //Performs a document.querySelectorAll in the page. Throws an exception on empty result
  await page . querySelectorAll ( "p" ) ;

  //Runs a history.pushState changing the url and title.
  await page . updateState ( ) ;

  //Reset the page scroll to top (or to the #target element)
  await page . resetScroll ( ) ;

  page . dom ; //HTMLDocument with the content of the page
  page . url ; //The url of the loaded page
  page . status ; //The http status code of the ajax response

  trigger . classList . remove ( "loading" ) ;
} ) ;