Skip to content

Commit

Permalink
backing up
Browse files Browse the repository at this point in the history
  • Loading branch information
Dan Bucholtz committed Apr 14, 2016
1 parent 9ef2623 commit 639d6df
Show file tree
Hide file tree
Showing 5 changed files with 419 additions and 17 deletions.
81 changes: 79 additions & 2 deletions js/angular/directive/slides.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,11 @@ function($animate, $timeout, $compile) {
'</div>',
controller: ['$scope', '$element', function($scope, $element) {
var _this = this;
var _watchHandler = null;

This comment has been minimized.

Sign in to view

Copy link
@danbucholtz

danbucholtz Apr 14, 2016

Contributor

Initialize handlers so we can clean-up when the directive is destroyed
var _enterHandler = null;
var _afterLeaveHandler = null;
var _modalRemovedHandler = null;
var _modalPresentedHandler = null;

this.update = function() {
$timeout(function() {
Expand Down Expand Up @@ -91,6 +96,52 @@ function($animate, $timeout, $compile) {
_this.update();
}, 50);

This comment has been minimized.

Sign in to view

Copy link
@danbucholtz

danbucholtz Apr 14, 2016

Contributor

updateLoop is a debounced method that if our sliders are looped, we go ahead and call updateLoop on the slider itself. updateLoop on the slider itself ultimately copies the innerHTML from the original nodes into the duplicate nodes.
this.updateLoop = ionic.debounce(function(){
if ( _this._options.loop ){
_this.__slider.updateLoop();
}
}, 50);

This comment has been minimized.

Sign in to view

Copy link
@danbucholtz

danbucholtz Apr 14, 2016

Contributor

watchForChanges begins listening for all digests (if it's not already listening). It then calls updateLoop when a digest occurs. The reason for watching for all digests is we don't know what data attributes are being bound to.

for example, in my controller I could have a something like this.

// update the scope every second
$timeout(function(){
   $scope.viewModel.myValue = Math.random()
}, 1000);
this.watchForChanges = function(){
if ( ! _watchHandler ){
// if we're not already watching, start watching
_watchHandler = $scope.$watch(function(){
console.log("Watch triggered");
_this.updateLoop();
});
}
}

this.stopWatching = function(){

This comment has been minimized.

Sign in to view

Copy link
@danbucholtz

danbucholtz Apr 14, 2016

Contributor

Since Ionic views are cached typically, there is no guarantee the slider will be destroyed. We don't want it to continue updating/listening when we're not in the active view or in a modal.
if ( _watchHandler ){
console.log("Stopping watching...");
_watchHandler();
_watchHandler = null;
}
}

this.cleanUpEventHandlers = function(){

This comment has been minimized.

Sign in to view

Copy link
@danbucholtz

danbucholtz Apr 14, 2016

Contributor

clean up event handlers when the component is destroyed.
if ( _enterHandler ){
_enterHandler();
_enterHandler = null;
}

if ( _afterLeaveHandler ){
_afterLeaveHandler();
_afterLeaveHandler = null;
}

if ( _modalRemovedHandler ){
_modalRemovedHandler();
_modalRemovedHandler = null;
}

if ( _modalPresentedHandler ){
_modalPresentedHandler();
_modalPresentedHandler = null;
}
}

this.getSlider = function() {
return _this.__slider;
};
Expand All @@ -113,15 +164,41 @@ function($animate, $timeout, $compile) {
$scope.slider = _this.__slider;

$scope.$on('$destroy', function() {
alert("scope destroy event");
slider.destroy();
_this.__slider = null;
_this.stopWatching();
_this.cleanUpEventHandlers();

});

This comment has been minimized.

Sign in to view

Copy link
@danbucholtz

danbucholtz Apr 14, 2016

Contributor

Start listening for changes by default, and initialize the lifecycle event listeners and modal event listeners
_this.watchForChanges();

_enterHandler = $scope.$on("$ionicView.enter", function(){
console.log("enter");
_this.watchForChanges();
});

_afterLeaveHandler = $scope.$on("$ionicView.afterLeave", function(){
console.log("after leave");
_this.stopWatching();
});

_modalRemovedHandler = $scope.$on("$ionic.modalRemoved", function(){
console.log("Modal removed");
_this.stopWatching();
});

_modalPresentedHandler = $scope.$on("$ionic.modalPresented", function(){
console.log("Modal presented");
_this.watchForChanges();
});

});

}],


link: function($scope) {
link: function($scope, element, attrs) {
$scope.showPager = true;
// Disable ngAnimate for slidebox and its children
//$animate.enabled(false, $element);
Expand Down
3 changes: 3 additions & 0 deletions js/angular/service/modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ function($rootScope, $ionicBody, $compile, $timeout, $ionicPlatform, $ionicTempl
self.el.classList.add('active');
self.scope.$broadcast('$ionicHeader.align');
self.scope.$broadcast('$ionicFooter.align');
self.scope.$broadcast('$ionic.modalPresented');
}, 20);

return $timeout(function() {
Expand Down Expand Up @@ -224,6 +225,8 @@ function($rootScope, $ionicBody, $compile, $timeout, $ionicPlatform, $ionicTempl
if (self._isShown) return;
modalEl.addClass('ng-leave-active')
.removeClass('ng-enter ng-enter-active active');

self.scope.$broadcast('$ionic.modalRemoved');
}, 20, false);

self.$el.off('click');
Expand Down
37 changes: 30 additions & 7 deletions js/views/slidesView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2044,14 +2044,35 @@
}
s.observers = [];
};

This comment has been minimized.

Sign in to view

Copy link
@danbucholtz

danbucholtz Apr 14, 2016

Contributor

This is using jqlite to access the inner html of the original node and assign it to the duplicate node.
s.updateLoop = function(){
// this is an Ionic custom function
var duplicates = s.wrapper.children('.' + s.params.slideClass + '.' + s.params.slideDuplicateClass);
var slides = s.wrapper.children('.' + s.params.slideClass);
for ( var i = 0; i < duplicates.length; i++ ){
var duplicate = duplicates[i];
var swiperSlideIndex = angular.element(duplicate).attr("data-swiper-slide-index");
// loop through each slide
for ( var j = 0; i < slides.length; j++ ){
// if it's not a duplicate, and the data swiper slide index matches the duplicate value
var slide = slides[j]
if ( !angular.element(slide).hasClass(s.params.slideDuplicateClass) && angular.element(slide).attr("data-swiper-slide-index") === swiperSlideIndex ){
// sweet, it's a match
duplicate.innerHTML = slide.innerHTML;
break;
}
}
}
}
/*=========================
Loop
===========================*/
// Create looped slides
s.createLoop = function () {

This comment has been minimized.

Sign in to view

Copy link
@danbucholtz

danbucholtz Apr 14, 2016

Contributor

Max modified the createLoop method to do the $compile operation on the cloned nodes. This triggers a digest so it is not ideal if we're watching all digests, because it gets us into an infinite loop of digests.

var toRemove = s.wrapper.children('.' + s.params.slideClass + '.' + s.params.slideDuplicateClass);
angular.element(toRemove).remove();
//console.log("Slider create loop method");
//var toRemove = s.wrapper.children('.' + s.params.slideClass + '.' + s.params.slideDuplicateClass);
//angular.element(toRemove).remove();
s.wrapper.children('.' + s.params.slideClass + '.' + s.params.slideDuplicateClass).remove();

var slides = s.wrapper.children('.' + s.params.slideClass);

Expand All @@ -2071,24 +2092,26 @@
slide.attr('data-swiper-slide-index', index);
});
for (i = 0; i < appendSlides.length; i++) {
newNode = angular.element(appendSlides[i]).clone().addClass(s.params.slideDuplicateClass);
/*newNode = angular.element(appendSlides[i]).clone().addClass(s.params.slideDuplicateClass);
newNode.removeAttr('ng-transclude');
newNode.removeAttr('ng-repeat');
scope = angular.element(appendSlides[i]).scope();
newNode = $compile(newNode)(scope);
angular.element(s.wrapper).append(newNode);
//s.wrapper.append($(appendSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass));
*/
s.wrapper.append($(appendSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass));
}
for (i = prependSlides.length - 1; i >= 0; i--) {
//s.wrapper.prepend($(prependSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass));
s.wrapper.prepend($(prependSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass));

newNode = angular.element(prependSlides[i]).clone().addClass(s.params.slideDuplicateClass);
/*newNode = angular.element(prependSlides[i]).clone().addClass(s.params.slideDuplicateClass);
newNode.removeAttr('ng-transclude');
newNode.removeAttr('ng-repeat');
scope = angular.element(prependSlides[i]).scope();
newNode = $compile(newNode)(scope);
angular.element(s.wrapper).prepend(newNode);
*/
}
};
s.destroyLoop = function () {
Expand Down
Loading

0 comments on commit 639d6df

Please sign in to comment.