ver 0.1.0 release

hellsan631 · Oct 22, 2015 · f13fbd0 · f13fbd0
1 parent 3244093
commit f13fbd0
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,7 @@
 [![Code Climate](https://codeclimate.com/github/hellsan631/angular-pagepiling.js/badges/gpa.svg)](https://codeclimate.com/github/hellsan631/angular-pagepiling.js)
 [![License](http://img.shields.io/badge/License-MIT-blue.svg)](http://opensource.org/licenses/MIT)
 
+### Beta 0.1.0
 
 A simple [pagePiling.js](https://github.com/alvarotrigo/pagePiling.js) directive that allows
 the use of pagePiling.js within an angular app. There are several issues when using the the vanilla jquery
@@ -28,7 +29,7 @@ npm install --save angular-pagepiling.js
 
 ====
 
-Make sure to include both this directive and fullPage.js. This package isn't a replacement.
+Make sure to include both this directive and pagePiling.js. This package isn't a replacement.
 
 _index.html_
 ```html
@@ -67,7 +68,7 @@ _someView.html_
 
 ### Options
 
-If you'd like to add some options to the fullpage, just include them in an object in your controller, and add the options attribute to your html.
+If you'd like to add some options to the pagePiling, just include them in an object in your controller, and add the options attribute to your html.
 
 _someView.html_
 ```js

diff --git a/angular-pagePiling.js b/angular-pagePiling.js
@@ -2,12 +2,12 @@
   'use strict';
 
   angular
-    .module('fullPage.js', [])
-    .directive('fullPage', fullPage);
+    .module('pagePiling.js', [])
+    .directive('pagePiling', pagePiling);
 
-  fullPage.$inject = ['$timeout'];
+  pagePiling.$inject = ['$timeout'];
 
-  function fullPage($timeout) {
+  function pagePiling($timeout) {
     var directive = {
       restrict: 'A',
       scope: {options: '='},
@@ -20,58 +20,52 @@
       var pageIndex;
       var slideIndex;
 
-      var rebuild = function() {
-        destroyFullPage();
+      angular.element(element).pagepiling(sanatizeOptions(scope.options));
 
-        angular.element(element).fullpage(sanatizeOptions(scope.options));
-      };
+      function destroyFullPage() {
+        var pageElement = angular.element(element);
 
-      var destroyFullPage = function() {
-        if ($.fn.fullpage.destroy) {
-          $.fn.fullpage.destroy('all');
-        }
-      };
+        pageElement.attr({
+            style: '',
+        });
 
-      var sanatizeOptions = function(options) {
-        options.onLeave = function(page, next){
-          pageIndex = next;
-        };
+        pageElement.find('.section').removeClass('pp-section active pp-table pp-easing');
 
-        options.onSlideLeave = function(anchorLink, page, slide, direction, next){
-          pageIndex   = page;
-          slideIndex  = next;
-        };
+        pageElement.find('li').css({
+            zIndex: '',
+            transform: '',
+            '-webkit-transform': '',
+            '-moz-transform': '',
+            '-ms-transform': ''
+        });
+
+        pageElement.find('.pp-tableCell').remove();
+
+        $('#pp-nav').remove();
+      }
+
+      function sanatizeOptions(options) {
 
         options.afterRender = function(){
           //We want to remove the HREF targets for navigation because they use hashbang
           //They still work without the hash though, so its all good.
           if (options && options.navigation) {
-            $('#fp-nav').find('a').removeAttr('href');
-          }
-
-          if (pageIndex) {
-            $timeout(function() {
-              $.fn.fullpage.silentMoveTo(pageIndex, slideIndex);
-            });
+            $('#pp-nav').find('a').removeAttr('href');
           }
         };
 
         //if we are using a ui-router, we need to be able to handle anchor clicks without 'href="#thing"'
         $(document).on('click', '[data-menuanchor]', function () {
-          $.fn.fullpage.moveTo($(this).attr('data-menuanchor'));
+          $.fn.pagepiling.moveTo($(this).attr('data-menuanchor'));
         });
 
         return options;
-      };
+      }
 
       var watchNodes = function() {
         return element[0].getElementsByTagName('*').length;
       };
 
-      scope.$watch(watchNodes, rebuild);
-
-      scope.$watch('options', rebuild, true);
-
       element.on('$destroy', destroyFullPage);
     }
   }

diff --git a/angular-pagepiling.min.js b/angular-pagepiling.min.js
diff --git a/sample/app/app.module.js b/sample/app/app.module.js
@@ -3,7 +3,7 @@
 
   angular
     .module('sample-app', [
-      'fullPage.js',
+      'pagePiling.js',
       'ui.router'
     ]);
 

diff --git a/sample/app/directives/angular-pagepiling.min.js b/sample/app/directives/angular-pagepiling.min.js
@@ -0,0 +1,73 @@
+;(function() {
+  'use strict';
+
+  angular
+    .module('pagePiling.js', [])
+    .directive('pagePiling', pagePiling);
+
+  pagePiling.$inject = ['$timeout'];
+
+  function pagePiling($timeout) {
+    var directive = {
+      restrict: 'A',
+      scope: {options: '='},
+      link: link
+    };
+
+    return directive;
+
+    function link(scope, element) {
+      var pageIndex;
+      var slideIndex;
+
+      angular.element(element).pagepiling(sanatizeOptions(scope.options));
+
+      function destroyFullPage() {
+        var pageElement = angular.element(element);
+
+        pageElement.attr({
+            style: '',
+        });
+
+        pageElement.find('.section').removeClass('pp-section active pp-table pp-easing');
+
+        pageElement.find('li').css({
+            zIndex: '',
+            transform: '',
+            '-webkit-transform': '',
+            '-moz-transform': '',
+            '-ms-transform': ''
+        });
+
+        pageElement.find('.pp-tableCell').remove();
+
+        $('#pp-nav').remove();
+      }
+
+      function sanatizeOptions(options) {
+
+        options.afterRender = function(){
+          //We want to remove the HREF targets for navigation because they use hashbang
+          //They still work without the hash though, so its all good.
+          if (options && options.navigation) {
+            $('#pp-nav').find('a').removeAttr('href');
+          }
+        };
+
+        //if we are using a ui-router, we need to be able to handle anchor clicks without 'href="#thing"'
+        $(document).on('click', '[data-menuanchor]', function () {
+          $.fn.pagepiling.moveTo($(this).attr('data-menuanchor'));
+        });
+
+        return options;
+      }
+
+      var watchNodes = function() {
+        return element[0].getElementsByTagName('*').length;
+      };
+
+      element.on('$destroy', destroyFullPage);
+    }
+  }
+
+})();
diff --git a/sample/app/views/main/main.controller.js b/sample/app/views/main/main.controller.js
@@ -17,36 +17,6 @@
 			menu: '#menu'
     };
 
-    this.slides = [
-      {
-        title: 'Simple',
-        description: 'Easy to use. Configurable and customizable.',
-        src: 'images/1.png'
-      },
-      {
-        title: 'Cool',
-        description: 'It just looks cool. Impress everybody with a simple and modern web design!',
-        src: 'images/2.png'
-      },
-      {
-        title: 'Compatible',
-        description: 'Working in modern and old browsers too!',
-        src: 'images/3.png'
-      }
-    ];
-
-    this.addSlide = function() {
-      _this.slides.push({
-        title: 'New Slide',
-        description: 'I made a new slide!',
-        src: 'images/1.png'
-      });
-
-      console.log('added slide');
-
-      console.log(_this);
-    };
-
   }
 
 })();
diff --git a/sample/app/views/main/main.html b/sample/app/views/main/main.html
@@ -5,38 +5,30 @@
 	<li data-menuanchor="4thpage"><a>Fourth slide</a></li>
 </ul>
 
-<div full-page options="vm.mainOptions">
-  <div class="section " id="section0">
+<div page-piling options="vm.mainOptions">
+  <div class="section">
 		<h1>fullPage.js</h1>
 		<p>Create Beautiful Fullscreen Scrolling Websites</p>
 		<img src="images/fullPage.png" alt="fullPage" />
 	</div>
-	<div class="section active" id="section1">
-	    <div class="slide">
-				<div class="intro">
-					<h1>Create Sliders</h1>
-					<p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
-					<img src="images/slider.png" alt="slider" /> <br/>
-					<button ng-click="vm.addSlide();">Click Me to Add another Slide!</button>
-				</div>
-			</div>
-
-    <div ng-repeat="slide in vm.slides" class="slide">
+	<div class="section">
+    <div class="slide">
 			<div class="intro">
-				<img ng-src="{{ slide.src }}" alt="simple" />
-				<h1>{{ slide.title }}</h1>
-				<p>{{ slide.description }}</p>
+				<h1>Create Sliders</h1>
+				<p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
+				<img src="images/slider.png" alt="slider" /> <br/>
+				<button ng-click="vm.addSlide();">Click Me to Add another Slide!</button>
 			</div>
 		</div>
 	</div>
-	<div class="section" id="section2">
+	<div class="section">
 		<div class="intro">
 			<h1>Example</h1>
 			<p>HTML markup example to define 4 sections.</p>
 			<img src="images/example2.png" alt="example" />
 		</div>
 	</div>
-	<div class="section" id="section3">
+	<div class="section">
 		<div class="intro">
 			<h1>Working On Tablets</h1>
 			<p>