├── .circleci
    └── config.yml
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── example
    ├── nuxt.config.js
    └── pages
    │   └── index.vue
├── lib
    ├── module.js
    └── plugin.js
├── package-lock.json
├── package.json
└── test
    └── module.test.js


/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     working_directory: /usr/src/app
 5 |     docker:
 6 |       - image: banian/node
 7 |     steps:
 8 |       # Checkout repository
 9 |       - checkout
10 | 
11 |       # Restore cache
12 |       - restore_cache:
13 |           key: yarn-{{ checksum "yarn.lock" }}
14 | 
15 |       # Install dependencies
16 |       - run:
17 |           name: Install Dependencies
18 |           command: NODE_ENV=dev yarn
19 | 
20 |       # Keep cache
21 |       - save_cache:
22 |           key: yarn-{{ checksum "yarn.lock" }}
23 |           paths:
24 |             - "node_modules"
25 | 
26 |       # Test
27 |       - run:
28 |           name: Tests
29 |           command: yarn test
30 | 
31 |       # Coverage
32 |       - run:
33 |           name: Coverage
34 |           command: yarn codecov
35 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_size = 2
 6 | indent_style = space
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parserOptions: {
 4 |     parser: 'babel-eslint'
 5 |   },
 6 |   env: {
 7 |     browser: true,
 8 |     node: true,
 9 |     jest: true
10 |   },
11 |   extends: [
12 |     'standard',
13 |     'plugin:vue/recommended'
14 |   ],
15 |   plugins: [
16 |     'jest',
17 |     'vue'
18 |   ],
19 |   rules: {
20 |     'indent': 'off',
21 |     'vue/script-indent': ['warn', 2, {
22 |       'baseIndent': 1
23 |     }],
24 |     // Allow paren-less arrow functions
25 |     'arrow-parens': 0,
26 |     // Allow async-await
27 |     'generator-star-spacing': 0,
28 |   },
29 |   globals: {
30 |     'jest/globals': true,
31 |     jasmine: true
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | *.iml
 3 | .idea
 4 | *.log*
 5 | .nuxt
 6 | .vscode
 7 | .DS_Store
 8 | coverage
 9 | dist
10 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 4 | 
 5 | ### [0.0.3](https://github.com/vaso2/fullpage-nuxt/compare/v0.0.2...v0.0.3) (2019-05-19)
 6 | 
 7 | 
 8 | 
 9 | <a name="0.0.2"></a>
10 | ## [0.0.2](https://github.com/vaso2/fullpage-nuxt/compare/v0.0.1...v0.0.2) (2018-12-23)
11 | 
12 | 
13 | 
14 | <a name="0.0.1"></a>
15 | ## 0.0.1 (2018-12-23)
16 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) GALSD Web Development <head@galley.online>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # fullpage-nuxt
 2 | 
 3 | [![npm version][npm-version-src]][npm-version-href]
 4 | [![npm downloads](https://img.shields.io/npm/dt/fullpage-nuxt.svg?style=flat-square)](https://npmjs.com/package/fullpage-nuxt)
 5 | 
 6 | > Nuxt module for [fullpage-vue](https://www.npmjs.com/package/fullpage-vue) plugin. 
 7 | A by-page scroll, support horizontal scroll and vertical scroll, support all the animation instructions of animate.css.
 8 | 
 9 | [📖 **Release Notes**](./CHANGELOG.md)
10 | 
11 | ## Setup
12 | 
13 | - Add `fullpage-nuxt` dependency using yarn or npm to your project
14 | - Add `fullpage-nuxt` to `modules` section of `nuxt.config.js`
15 | 
16 | ```js
17 | {
18 |   modules: [
19 |     // Simple usage
20 |     'fullpage-nuxt',
21 | 
22 |     // With options
23 |     ['fullpage-nuxt', { /* module options */ }],
24 |  ]
25 | }
26 | ```
27 | You can find more details under `example` folder. 
28 | Usage instructions in the fullpage-vue [docs](https://www.npmjs.com/package/fullpage-vue)
29 | ## Options
30 | 
31 | - `animate: false` (default). Will import [animate.css](https://daneden.github.io/animate.css/) if true.
32 | 
33 | ## License
34 | 
35 | MIT, made by [GALSD Web Development](https://galsd.com/)
36 | 
37 | <!-- Badges -->
38 | [npm-version-src]: https://img.shields.io/npm/v/fullpage-nuxt.svg?style=flat-square
39 | [npm-version-href]: https://npmjs.com/package/fullpage-nuxt
40 | [npm-downloads-src]: https://img.shields.io/npm/dt/fullpage-nuxt/latest.svg?style=flat-square
41 | [npm-downloads-href]: https://npmjs.com/package/fullpage-nuxt
42 | 


--------------------------------------------------------------------------------
/example/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | const { resolve } = require('path')
 2 | 
 3 | module.exports = {
 4 |   rootDir: resolve(__dirname, '..'),
 5 |   buildDIr: resolve(__dirname, '.nuxt'),
 6 |   srcDir: __dirname,
 7 |   render: {
 8 |     resourceHints: false
 9 |   },
10 |   modules: [
11 |     '@@'
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/example/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="fullpage-container">
  3 |     <div class="button-group">
  4 |       <button type="button" :class="{active:index ==0}" @click="moveTo(0)">first page</button>
  5 |       <button type="button" :class="{active:index ==1}" @click="moveTo(1)">Second page</button>
  6 |       <button type="button" :class="{active:index ==2}" @click="moveTo(2)">Third page</button>
  7 |       <button type="button" v-for="btn in pageNum" :class="{active:index == btn + 2}" @click="moveTo(btn+2)">page {{btn+2}}
  8 |       </button>
  9 |       <button type="button" @click="showPage()">add page</button>
 10 |     </div>
 11 |     <div class="fullpage-wp" v-fullpage="opts" ref="fullpage">
 12 |       <div class="page-1 page">
 13 |         <h1 class="part-1" v-animate="{value: 'bounceInLeft'}">vue-fullpage.js</h1>
 14 |         <h3 class="" v-animate="{value: 'bounceInLeft'}">A sigle-page scroll plugin based on vue@2.x,support for mobile and PC .</h3>
 15 |         <div>
 16 |           <p class="part-1" v-animate="{value: 'bounceInRight'}">vue-fullpage</p>
 17 |         </div>
 18 |       </div>
 19 |       <div class="page-2 page">
 20 |         <h2 class="part-2" v-animate="{value: 'bounceInRight'}">Easy to use plugin</h2>
 21 |       </div>
 22 |       <div class="page-3 page">
 23 |         <h2 class="" v-animate="{value: 'bounceInTop'}">Working On Tablets</h2>
 24 |         <h3 class="" v-animate="{value: 'bounceInBotton'}">Designed to fit different screen sizes as well as tablet and mobile devices. </h3>
 25 |         <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
 26 |         <p class="part-3" v-animate="{value: 'bounceInRight', delay: 300}">vue-fullpage</p>
 27 |         <p class="part-3" v-animate="{value: 'bounceInDown', delay: 600}">vue-fullpage</p>
 28 |         <p class="part-3" v-animate="{value: 'zoomInDown', delay: 900}">vue-fullpage</p>
 29 |       </div>
 30 |       <div class="page-2 page" v-for="page in pageNum">
 31 |         <h2 class="part-2" v-animate="{value: 'bounceInRight'}">page {{page}}</h2>
 32 |       </div>
 33 |     </div>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 |   export default {
 39 |     name: 'Fullpage',
 40 |     layout: 'short',
 41 |     data () {
 42 |       return {
 43 |         index: 0,
 44 |         pageNum: 0,
 45 |         opts: {
 46 |           start: 0,
 47 |           dir: 'v',
 48 |           loop: false,
 49 |           duration: 300,
 50 |           beforeChange: function (ele, current, next) {
 51 |             console.log('before', current, next)
 52 |             this.index = next
 53 |           },
 54 |           afterChange: function (ele, current) {
 55 |             this.index = current
 56 |             console.log('after', current)
 57 |           }
 58 |         }
 59 |       }
 60 |     },
 61 |     methods: {
 62 |       moveTo: function (index) {
 63 |         this.$refs.fullpage.$fullpage.moveTo(index, true)
 64 |       },
 65 |       showPage: function () {
 66 |         this.pageNum++
 67 |         this.$refs.fullpage.$fullpage.$update()
 68 |       }
 69 |     }
 70 |   }
 71 | </script>
 72 | 
 73 | <style>
 74 |   body {
 75 |     margin: 0;
 76 |   }
 77 |   .fullpage-container {
 78 |     position: absolute;
 79 |     left: 0;
 80 |     top: 0;
 81 |     width: 100%;
 82 |     height: 100%;
 83 |   }
 84 |   .page {
 85 |     display: block;
 86 |     text-align: center;
 87 |     font-size: 26px;
 88 |     color: #eee;
 89 |   }
 90 |   .page-1 {
 91 |     padding-top: 100px;
 92 |     background: #1bbc9b;
 93 |   }
 94 |   .page-2 {
 95 |     padding-top: 100px;
 96 |     background-color: rgb(75, 191, 195);
 97 |   }
 98 |   .page-3 {
 99 |     padding-top: 50px;
100 |     background: #aabbcc;
101 |   }
102 |   h3,
103 |   p {
104 |     font-size: 16px;
105 |   }
106 |   .button-group {
107 |     position: absolute;
108 |     top: 30px;
109 |     left: 30px;
110 |     z-index: 9;
111 |   }
112 |   .button-group button {
113 |     display: inline-block;
114 |     margin: 10px;
115 |     color: #000;
116 |     background: #fff;
117 |     background: rgba(255, 255, 255, .5);
118 |     -webkit-border-radius: 10px;
119 |     border-radius: 10px;
120 |     padding: 9px 18px;
121 |     border: none;
122 |     outline: none;
123 |   }
124 |   .button-group button.active {
125 |     background: rgba(0, 0, 0, .5);
126 |     color: #fff;
127 |   }
128 | </style>
129 | 


--------------------------------------------------------------------------------
/lib/module.js:
--------------------------------------------------------------------------------
 1 | const { resolve } = require('path')
 2 | 
 3 | module.exports = async function fullPageModule (moduleOptions) {
 4 |   const options = Object.assign({
 5 |     animate: false
 6 |   }, moduleOptions)
 7 | 
 8 |   this.options.css.unshift('fullpage-vue/src/fullpage.css')
 9 |   this.addPlugin({
10 |     src: resolve(__dirname, 'plugin.js'),
11 |     ssr: false,
12 |     options
13 |   })
14 | }
15 | 
16 | module.exports.meta = require('../package.json')
17 | 


--------------------------------------------------------------------------------
/lib/plugin.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueFullpage from 'fullpage-vue'
3 | 
4 | <% if (options.animate) { %>
5 | import 'animate.css'
6 | <% } %>
7 | 
8 | Vue.use(VueFullpage)
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fullpage-nuxt",
 3 |   "version": "0.0.3",
 4 |   "description": "Nuxt module for fullpage-vue plugin",
 5 |   "keywords": [
 6 |     "vue",
 7 |     "nuxt",
 8 |     "fullpage",
 9 |     "fullpage-vue",
10 |     "directive"
11 |   ],
12 |   "license": "MIT",
13 |   "contributors": [
14 |     {
15 |       "name": "vaso2 <head@galley.online>"
16 |     }
17 |   ],
18 |   "main": "lib/module.js",
19 |   "repository": "https://github.com/vaso2/fullpage-nuxt",
20 |   "publishConfig": {
21 |     "access": "public"
22 |   },
23 |   "scripts": {
24 |     "dev": "nuxt example",
25 |     "lint": "eslint lib test",
26 |     "test": "npm run lint && jest",
27 |     "release": "standard-version && git push --follow-tags && npm publish"
28 |   },
29 |   "eslintIgnore": [
30 |     "lib/plugin.js"
31 |   ],
32 |   "files": [
33 |     "lib"
34 |   ],
35 |   "jest": {
36 |     "testEnvironment": "node",
37 |     "collectCoverage": true
38 |   },
39 |   "dependencies": {
40 |     "fullpage-vue": "^1.8.2"
41 |   },
42 |   "optionalDependencies": {
43 |     "animate.css": "^3.7.0"
44 |   },
45 |   "devDependencies": {
46 |     "babel-eslint": "latest",
47 |     "codecov": "latest",
48 |     "eslint": "latest",
49 |     "eslint-config-standard": "latest",
50 |     "eslint-plugin-import": "latest",
51 |     "eslint-plugin-jest": "latest",
52 |     "eslint-plugin-node": "latest",
53 |     "eslint-plugin-promise": "latest",
54 |     "eslint-plugin-standard": "latest",
55 |     "eslint-plugin-vue": "latest",
56 |     "jest": "latest",
57 |     "jsdom": "latest",
58 |     "nuxt-edge": "latest",
59 |     "standard-version": "latest"
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/test/module.test.js:
--------------------------------------------------------------------------------
 1 | const { Nuxt, Builder } = require('nuxt-edge')
 2 | const request = require('request-promise-native')
 3 | 
 4 | const config = require('../example/nuxt.config')
 5 | 
 6 | const url = path => `http://localhost:3000${path}`
 7 | const get = path => request(url(path))
 8 | 
 9 | describe('basic', () => {
10 |   let nuxt
11 | 
12 |   beforeAll(async () => {
13 |     config.dev = false
14 |     nuxt = new Nuxt(config)
15 |     await new Builder(nuxt).build()
16 |     await nuxt.listen(3000)
17 |   }, 60000)
18 | 
19 |   afterAll(async () => {
20 |     await nuxt.close()
21 |   })
22 | 
23 |   test('render', async () => {
24 |     let html = await get('/')
25 |     expect(html).toContain('Working On Tablets')
26 |   })
27 | })
28 | 


--------------------------------------------------------------------------------