lookforward

lookforward

Usage no npm install needed!

<script type="module">
  import lookforward from 'https://cdn.skypack.dev/lookforward';
</script>

README

lookforward

npm version CircleCI npm download GitHub license

It supports simple page transitions using HistoryAPI

See https://appleple.github.io/lookforward/ for complete docs and demos

Feature

Installation

via npm

npm install lookforward --save

or yarn

yarn add lookforward

Usage

require

const lookforward = require('lookforward');

lookforward.js

window.addEventListener('DOMContentLoaded',function(){
    new LookForward(".js-lookforward");
});

jquery-lookforward.js

$(function(){
    $(".js-lookforward").lookforward();
});

<a href="./a.html" class="js-lookforward" data-transition-enter="slideup" data-transition-leave="slidedown">Open</a>

Option

{
  classNames: {
    LookForward: 'lookforward',
    LookForwardBody: 'lookforward-body',
    LookForwardInner: 'lookforward-inner',
    LookForwardClose: 'lookforward-close',
    LookForwardCloseBtn: 'lookforward-close-btn',
    LookForwardHeader: 'lookforward-header',
    LookForwardFooter: 'lookforward-footer'
  },
  scrapedArea: 'body', // Area to be scraped
  useHistoryApi: true // Rewrite URL on page transitions using HistoryAPI
}

Event

// when the modal is opened
lookforward.on('open',function(e){
  console.log('open');
});

// when the modal is closed
lookforward.on('close',function(e){
  console.log('close');
});

// when all modals are closed
lookforward.on('closeAll',function(e){
  console.log('closeAll');
});

Tips

If you want to execute JavaScript on each pages, I recommend you specifying scraped area so to exclude common JavaScript such as jQuery and include local JavaScript. The following is the example how

<body>
  <div class="js-lookforward-body">
    <!-- contents here -->
    <script src="/path/to/local.js"></script>
  </div>
  <script src="/path/to/lookforward.js"></script>
  <script>
  new LookForward('.js-lookforward', {
    scrapedArea: '.js-lookforward-body',
    execInnerScript: true
  });
  </script>
</body>

Download

Download ZIP

Github

https://github.com/appleple/lookforward

Contributor

@steelydylan

License

Code and documentation copyright 2017 by appleple, Inc. Code released under the MIT License.