https://github.com/nameoverflow/singlepager

https://github.com/nameoverflow/singlepager

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/nameoverflow/singlepager
• Owner: nameoverflow
• License: mit
• Created: 2017-03-26T13:39:23.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-01-19T03:42:25.000Z (almost 7 years ago)
• Last Synced: 2024-10-16T15:31:02.279Z (3 months ago)
• Language: TypeScript
• Size: 16.6 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SinglePager

Functional similar to [InstantClick](https://github.com/dieulot/instantclick/), makes simple static pages dynamic and instant just like a single-page-application. Only change the content of specified container.

For use with Hexo, Jekyll, etc.

Released in ES2015 without any transformation or polyfill such as Babel.

## Usage

### Initialize

Include and initialize it.

```html

...



  ...



...


  var sp = new Pager('data-pager-shell')

```

The parameter of construct could be an attribute name string, or a configure object.

```typescript

interface PagerConfig {

  shellMark?: string,     // The mark attribute to replace content

  disableMark?: string,   // Attribute mark links not be load

  ignoreScript?: string,  // Ignore this `` tag

  runBefore?: string,     // Run script in the `<script>` tag before page switch

  triggerTime?: number,   // Not implement

  historyToSave?: number  // Number of histories to save

}

const defaultConfig = <PagerConfig>{

  shellMark: 'data-single-pager',

  disableMark: 'data-pager-disabled',

  ignoreScript: 'data-pager-ignore',

  runBefore: 'data-run-before',

  triggerTime: 100,

  historyToSave: 3

}

```

### `<script>` Hook Tag

While `<script>` tags in container will default run after the page switching, it can be specified to run before or after the page switching.

Remember that `<script>` with `data-run-before` (or other name setted in config) would run before the content changes, so do not make references to the target page elements.

```html

<div data-pager-shell>

  ...

  <div id="tag"></div>

  <script>

    document.getElementById('tag').innerHTML += '<p>Run after mount</p>'

  

  

    // Error!

    // document.getElementById('tag').innerHTML += '<p>Run before mount</p>'

    alert('Run before mount')

  

  

    alert('Do not run this')

  

```

## Build

Run `make` to dist, `make comile` to compile typescript (ts 2.2.1+ required)

## Test

Python 3.4+ required

Run `python -m http.server` then open `http://127.0.0.1:8000/test/test.html`