flippy
A leafy library for books, comics and magazines
Last updated 4 years ago by marvindanig .
UNLICENSED · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install flippy 
SYNC missed versions from official npm registry.

Build Status Commitizen friendly npm

flippy.JS

A leafy responsive alternative to Turnjs. No jQuery dependency along with a no javascript fallback.

API

In your HTML:

  <div id = "book">
      <div class = "page"> Page-1 HTML </div>
      <div class = "page"> Page-2 HTML </div>
      <div class = "page"> Page-3 HTML </div>
      …
      …
      <div class = "page"> Page-2N content here…</div>
  </div>

Note the 2N number of pages in the book because a leaf has two sides to it.

Invocation with script.js:

import 'babel-polyfill'

import '../css/book.css'

import '../lib/flippy.js'

document.addEventListener('DOMContentLoaded', function(event) {

    /**********************************/
    /****** Initialize  Flippy ********/
    /**********************************/

    let settings = { duration: 100, animation: true, curl: true, allowZoom: false, start_page: 20 }

    let node = document.getElementById('book')

    const superbook = Flippy.init(node, settings)

    console.table(superbook)

    /**********************************/
    /******** Work in progress ********/
    /**********************************/

    // superbook.flipping = false

    // superbook.flipped = true // Custom event?

    // superbook.zooming = false // boolean state

    // superbook.zoomed = true // boolean state

    // superbook.page = () => 'current_page'

    // superbook.area = () => '[height, width]'

    // superbook.direction = 'forward'

    // superbook.next = () => {
    //     superbook.direction = 'forward'
    //     return superbook.direction
    // }

    // superbook.prev = () => {
    //     superbook.direction = 'backward'
    //     return superbook.direction
    // }

    // superbook.hasPage = pageNo => {
    //     console.log('Returns if page exist: ', pageNo)
    // }

    // superbook.addPage = (pageNo, content) => {
    //     console.log('Adding page number: ', content, 'at', pageNo)
    // }

    // superbook.removePage = pageNo => {
    //     console.log('Remove page number: ', pageNo)
    // }

    /**********************************/
    /******** Implemented  API ********/
    /**********************************/

    let booklength = superbook.flippy('length')

    console.log('Book length', booklength)

    superbook.flippy('flip', 7)


}, true)

Current Tags

  • 1.2.0                                ...           latest (4 years ago)

3 Versions

  • 1.2.0                                ...           4 years ago
  • 1.1.0                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (21)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |