Skip to content

Commit 6570ab8

Browse files
hellsan631hellsan631
committed
support for dynamic (ng-repeat) content inside of the directive
still very much buggy
1 parent f37362e commit 6570ab8

File tree

6 files changed

+161
-40
lines changed

6 files changed

+161
-40
lines changed

‎angular-fullpage.js

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,16 @@
1818

1919
function link(scope, element, attrs) {
2020

21+
var initialized = false;
22+
var pageIndex;
23+
var slideIndex;
24+
2125
var rebuild = function() {
2226
destroyFullPage();
2327

24-
requestAnimationFrame(function(){
25-
angular.element(element).fullpage(sanatizeOptions(scope.options));
26-
});
28+
console.log('rebuilt');
29+
30+
angular.element(element).fullpage(sanatizeOptions(scope.options));
2731
};
2832

2933
var destroyFullPage = function() {
@@ -33,14 +37,28 @@
3337
};
3438

3539
var sanatizeOptions = function(options) {
36-
if (options && options.navigation) {
37-
options.afterRender = function() {
40+
options.onLeave = function(page, next){
41+
pageIndex = next;
42+
};
3843

39-
//We want to remove the HREF targets for navigation because they use hashbang
40-
//They still work without the hash though, so its all good.
44+
options.onSlideLeave = function(anchorLink, page, slide, direction, next){
45+
pageIndex = page;
46+
slideIndex = next;
47+
};
48+
49+
options.afterRender = function(){
50+
//We want to remove the HREF targets for navigation because they use hashbang
51+
//They still work without the hash though, so its all good.
52+
if (options && options.navigation) {
4153
$('#fp-nav').find('a').removeAttr('href');
42-
};
43-
}
54+
}
55+
56+
if (pageIndex) {
57+
$timeout(function() {
58+
$.fn.fullpage.silentMoveTo(pageIndex, slideIndex);
59+
});
60+
}
61+
};
4462

4563
//if we are using a ui-router, we need to be able to handle anchor clicks without 'href="#thing"'
4664
$(document).on('click', '[data-menuanchor]', function () {
@@ -50,6 +68,12 @@
5068
return options;
5169
};
5270

71+
var watchNodes = function() {
72+
return element[0].getElementsByTagName('*').length;
73+
};
74+
75+
scope.$watch(watchNodes, rebuild);
76+
5377
scope.$watch('options', rebuild, true);
5478

5579
element.on('$destroy', destroyFullPage);

‎angular-fullpage.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@ gulp.task('serve-watch', function(){
6363
.pipe(plumber({
6464
errorHandler: onError
6565
}))
66-
.pipe(uglify())
6766
.pipe(concat(output.build))
6867
.pipe(gulp.dest('sample/app/directives/'));
6968
});

‎sample/app/directives/angular-fullPage.min.js

Lines changed: 83 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,83 @@
1-
!function(){"use strict";function n(n,t){function e(t,e,o){var a,i=function(){a=n(function(){angular.element(e).fullpage(f(t.options))},1)},u=function(t){a&&n.cancel(a),$.fn.fullpage.destroy&&$.fn.fullpage.destroy("all"),t&&"function"==typeof t&&t()},f=function(n){return n&&n.navigation&&(n.afterRender=function(){$("#fp-nav").find("a").removeAttr("href")}),$(document).on("click","[data-menuanchor]",function(){$.fn.fullpage.moveTo($(this).attr("data-menuanchor"))}),n};t.$watch("options",function(n){u(i)},!0),e.on("$destroy",u)}var o={restrict:"A",scope:{options:"="},link:e};return o}angular.module("fullPage.js",[]).directive("fullPage",n),n.$inject=["$timeout","$window"]}();
1+
;(function() {
2+
'use strict';
3+
4+
angular
5+
.module('fullPage.js', [])
6+
.directive('fullPage', fullPage);
7+
8+
fullPage.$inject = ['$timeout', '$window'];
9+
10+
function fullPage($timeout, $window) {
11+
var directive = {
12+
restrict: 'A',
13+
scope: {options: '='},
14+
link: link
15+
};
16+
17+
return directive;
18+
19+
function link(scope, element, attrs) {
20+
21+
var initialized = false;
22+
var pageIndex;
23+
var slideIndex;
24+
25+
var rebuild = function() {
26+
destroyFullPage();
27+
28+
console.log('rebuilt');
29+
30+
angular.element(element).fullpage(sanatizeOptions(scope.options));
31+
};
32+
33+
var destroyFullPage = function() {
34+
if ($.fn.fullpage.destroy) {
35+
$.fn.fullpage.destroy('all');
36+
}
37+
};
38+
39+
var sanatizeOptions = function(options) {
40+
options.onLeave = function(page, next){
41+
pageIndex = next;
42+
};
43+
44+
options.onSlideLeave = function(anchorLink, page, slide, direction, next){
45+
pageIndex = page;
46+
slideIndex = next;
47+
};
48+
49+
options.afterRender = function(){
50+
//We want to remove the HREF targets for navigation because they use hashbang
51+
//They still work without the hash though, so its all good.
52+
if (options && options.navigation) {
53+
$('#fp-nav').find('a').removeAttr('href');
54+
}
55+
56+
if (pageIndex) {
57+
$timeout(function() {
58+
$.fn.fullpage.silentMoveTo(pageIndex, slideIndex);
59+
});
60+
}
61+
};
62+
63+
//if we are using a ui-router, we need to be able to handle anchor clicks without 'href="#thing"'
64+
$(document).on('click', '[data-menuanchor]', function () {
65+
$.fn.fullpage.moveTo($(this).attr('data-menuanchor'));
66+
});
67+
68+
return options;
69+
};
70+
71+
var watchNodes = function() {
72+
return element[0].getElementsByTagName('*').length;
73+
};
74+
75+
scope.$watch(watchNodes, rebuild);
76+
77+
scope.$watch('options', rebuild, true);
78+
79+
element.on('$destroy', destroyFullPage);
80+
}
81+
}
82+
83+
})();

‎sample/app/views/main/main.controller.js

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,41 @@
1111

1212
var _this = this;
1313

14-
_this.mainOptions = {
14+
this.mainOptions = {
1515
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
1616
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
17-
menu: '#menu',
18-
scrollingSpeed: 1000
19-
}
17+
menu: '#menu'
18+
};
19+
20+
this.slides = [
21+
{
22+
title: 'Simple',
23+
description: 'Easy to use. Configurable and customizable.',
24+
src: 'images/1.png'
25+
},
26+
{
27+
title: 'Cool',
28+
description: 'It just looks cool. Impress everybody with a simple and modern web design!',
29+
src: 'images/2.png'
30+
},
31+
{
32+
title: 'Compatible',
33+
description: 'Working in modern and old browsers too!',
34+
src: 'images/3.png'
35+
}
36+
];
37+
38+
this.addSlide = function() {
39+
_this.slides.push({
40+
title: 'New Slide',
41+
description: 'I made a new slide!',
42+
src: 'images/1.png'
43+
});
44+
45+
console.log('added slide');
46+
47+
console.log(_this);
48+
};
2049

2150
}
2251

‎sample/app/views/main/main.html

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,21 @@ <h1>fullPage.js</h1>
1111
<p>Create Beautiful Fullscreen Scrolling Websites</p>
1212
<img src="images/fullPage.png" alt="fullPage" />
1313
</div>
14-
<div class="section" id="section1">
14+
<div class="section active" id="section1">
1515
<div class="slide">
16-
<div class="intro">
17-
<h1>Create Sliders</h1>
18-
<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>
19-
<img src="images/slider.png" alt="slider" />
16+
<div class="intro">
17+
<h1>Create Sliders</h1>
18+
<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>
19+
<img src="images/slider.png" alt="slider" /> <br/>
20+
<button ng-click="vm.addSlide();">Click Me to Add another Slide!</button>
21+
</div>
2022
</div>
2123

22-
</div>
23-
<div class="slide">
24-
<div class="intro">
25-
<img src="images/1.png" alt="simple" />
26-
<h1>Simple</h1>
27-
<p>Easy to use. Configurable and customizable.</p>
28-
</div>
29-
</div>
30-
<div class="slide">
31-
<div class="intro">
32-
<img src="images/2.png" alt="Cool" />
33-
<h1>Cool</h1>
34-
<p>It just looks cool. Impress everybody with a simple and modern web design!</p>
35-
</div>
36-
</div>
37-
<div class="slide">
24+
<div ng-repeat="slide in vm.slides" class="slide">
3825
<div class="intro">
39-
<img src="images/3.png" alt="Compatible" />
40-
<h1>Compatible</h1>
41-
<p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
26+
<img ng-src="{{ slide.src }}" alt="simple" />
27+
<h1>{{ slide.title }}</h1>
28+
<p>{{ slide.description }}</p>
4229
</div>
4330
</div>
4431
</div>

0 commit comments

Comments
 (0)