added multiple class list feature to section. Added menu id feture. A…

…dded menu class list. Added verticalAlignMiddle feature

Gruntfile.js

@@ -5,12 +5,14 @@ module.exports = function(grunt) {
         pkg: grunt.file.readJSON('package.json'),
         uglify: {
             options: {
-                'output.comments': 'all',
-                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+                output: {
+                    comments: 'all'
+                },
+                banner: '/*!\n <%= pkg.buildName %> - v<%= pkg.version %>\n* https://github.com/pixelbyaj/SitePage\n* @author Abhishek Joshi\n* @license MIT*/'
             },
             build: {
-                src: 'build/bundle.<%= pkg.name %>.js',
-                dest: 'dist/<%= pkg.name %>.min.js'
+                src: 'build/<%= pkg.buildName %>.js',
+                dest: 'dist/<%= pkg.buildName %>.min.js'
             }
         },
         ts: {
@@ -23,28 +25,30 @@ module.exports = function(grunt) {
                 separator: ';',
             },
             dist: {
-                src: ['build/<%= pkg.name %>.js', 'src/scripts/swiped-events.min.js'],
-                dest: 'build/bundle.<%= pkg.name %>.js',
+                src: ['build/<%= pkg.buildName %>.js', 'src/scripts/swiped-events.min.js'],
+                dest: 'build/<%= pkg.buildName %>.js',
             },
         },
         cssmin: {
             options: {
                 keepSpecialComments: 0
             },
             site: {
-                src: ['src/style/<%= pkg.name %>.css'],
-                dest: 'dist/style/<%= pkg.name %>.min.css'
+                src: ['src/style/<%= pkg.buildName %>.css'],
+                dest: 'dist/style/<%= pkg.buildName %>.min.css'
             }
-        }
+        },
+        clean: ['build/', 'dist/']
     });
 
     // Load the plugin that provides the "uglify" task.
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-ts');
     grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-contrib-clean');
 
     // Default task(s).
-    grunt.registerTask('default', ['ts', 'concat', 'uglify', 'cssmin']);
+    grunt.registerTask('build', ['clean', 'ts', 'concat', 'uglify', 'cssmin']);
 
 };

README.md

@@ -1,5 +1,5 @@
 # sitePage.js
-![sitePage.js version](http://img.shields.io/badge/sitePage.js-v2.0.0-brightgreen.svg)
+![sitePage.js version](https://img.shields.io/npm/v/sitepage.js/latest)
 [![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://mit-license.org/)
 [![PayPal Donate](https://img.shields.io/badge/donate-PayPal.me-ff69b4.svg)](https://www.paypal.me/pixelbyaj)
 [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/sitepage.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/sitepage.js)
@@ -10,12 +10,11 @@ A simple and easy to use library that creates single page scrolling websites wit
 - [Introduction](https://github.com/pixelbyaj/sitepage#introduction)
 - [Compatibility](https://github.com/pixelbyaj/sitepage#compatibility)
 - [License](https://github.com/pixelbyaj/sitepage#license)
+- [Usage](https://github.com/pixelbyaj/sitepage#usage)
 - [Options](https://github.com/pixelbyaj/sitepage#options)
-- [Callbacks](https://github.com/pixelbyaj/sitepage#callbacks)
 - [Reporting issues](https://github.com/pixelbyaj/sitepage#reporting-issues)
 - [Contributing to sitepage](https://github.com/pixelbyaj/sitepage#contributing-to-sitepagejs)
 - [Changelog](https://github.com/pixelbyaj/sitepage#changelog)
-- [Build tasks](https://github.com/pixelbyaj/sitepage#build-tasks)
 - [Resources](https://github.com/pixelbyaj/sitepage#resources)
 - [Donations](https://github.com/pixelbyaj/sitepage#donations)
 
@@ -89,12 +88,13 @@ All you need to do is call sitepage before the closing `</body>` tag.
 new SitePage("sitePage", {
         //brandname
         brandName: "",
-        backgroundColor:"#45b4f5",	
+        backgroundColor:"#45b4f5",
+        verticalAlignMiddle: true, // By default it would be true	
         //sections
         sections: [{
                 anchor: "Home",
                 templateUrl: "./views/home.html",
-                backgroundColor: "#45b4f5"
+                backgroundColor: "#45b4f5",
             },
             {
                 anchor: "Features",
@@ -133,9 +133,63 @@ new SitePage("sitePage", {
 
 
 ```
+### Options
+```javascript
+{
+        //brandname
+        brandName: "",
+        backgroundColor:"#45b4f5",
+        verticalAlignMiddle: true, // By default it would be true and apply to all sections
+        //sections
+        sections: [{
+                anchor: "Home",
+                templateUrl: "./views/home.html",
+                backgroundColor: "#45b4f5",
+                verticalAlignMiddle:false,//By default it would be false,
+                sectionClass:[]//class to be apply on sections
+            },
+            {
+                anchor: "Features",
+                templateUrl: "./views/features.html",
+                backgroundColor: "#fc6c7c"
+            },
+            {
+                anchor: "Examples",
+                templateUrl: "./views/examples.html",
+                backgroundColor: "#1bbc9b"
+            },
+            {
+                anchor: "Contact Us",
+                template: "<h1>Contact Us</h1>",
+                backgroundColor: "#1bbc9b"
+            }
+        ],
+        //navigation
+	    anchors:true,//true|false
+        navigation: navigation,//horizontal|vertical
+        sameurl: sameurl,//true|false
+        //transition
+        easing: "ease",//ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
+        transitionSpeed: 1000,//speed in ms
+        //scrolling
+        autoScrolling: autoscrolling,//true|false
+        keyboardNavigation: true,//true|false
+        //callback events
+        pageTransitionStart: (prevPage, currentPage) => {
+            console.log(`prevPage: ${prevPage ? prevPage.id : ""} currentPage :${currentPage.id}`);
+        },
+        pageTransitionEnd: (currentPage) => {
+            console.log(`currentPage :${currentPage.id}`);
+        }
+    }
+```
+## Reporting issues
+## Contributing to sitepage
+## Donations
+## Changelog
+## Resources
 
 
-## Donations
 Donations would be more than welcome :)
 
 [![Donate](https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif)](https://www.paypal.me/pixelbyaj)

demo/index.html

@@ -15,7 +15,7 @@
     <div id="sitePage">
 
     </div>
-    <script src="../dist/sitepage.min.js"></script>
+    <script src="../build/sitepage.js"></script>
     <script src="scripts/index.js"></script>
 </body>
 

demo/scripts/index.js

@@ -33,10 +33,14 @@ document.ready(function() {
     new SitePage("sitePage", {
         brandName: "PixelByAJ",
         backgroundColor: "",
+        verticalAlignMiddle: true, //true||false
         sections: [{
                 anchor: "Home",
+                //anchorClass: [],
                 templateUrl: "./views/home.html",
-                backgroundColor: "#ff5f45"
+                backgroundColor: "#ff5f45",
+                verticalAlignMiddle: true, //true||false
+                sectionClass: ['text-right']
             },
             {
                 anchor: "Skills",