Angularjs support

[loup-brun]

I've begun integrating Swipe into Angular.js. The integration works well so far and does not touch the original swipe.js file, but there are limitations in simply wrapping the library.

There are 3 main directives:

• swipe-wrap: initializes the Swipe controller and thus will contain all the Swipe-related model/logic. Additional components (directives) may added within this wrapper, such as a counter or a controls directive;
• swipe-slider: the actual slider;
• swipe-item: a slide, which contains the client's html.

The swipe-wrap must be a parent of the swipe-slider, because the latter transcludes, thus creating a new, isolated scope that inherits from the $parent scope. Therefore, in order for the model to propagate correctly, the swipe-wrap must be parent of the slider.

All the Swipe options are supported. However, since the original swipe.js is untouched, I must create a new callback function which includes $scope.$apply() AND the client callback in order for every slide change to be added to the event loop. (otherwise, Angularjs doesn't know about the slide index when auto-playing the slider).

My suggestion is to port Swipe to a different core file designed for Angular.js. However, the integration I made works - just include angular.swipe.js before your custom app, given Swipe is already loaded as a global on the page.

Markup

<swipe-wrap>
  <swipe-slider data-options="Demo1.sliderConfig">
    <swipe-item>...</swipe-item>
    <swipe-item>...</swipe-item>
    <swipe-item>...</swipe-item>
  </swipe-slider>
  <!-- Other slide-related directives go here -->
</swipe-wrap>

<!-- Include the following scripts in the correct order before defining your app -->
<script src="angular.js"></script>
<script src="swipe.js"></script>
<script src="angular.swipe.js"></script>

Javascript

angular
  .module('myApp', ['swipe']) // require the swipe module
  .controller('DemoController', DemoController);

// Attach the app onto the document body
// Alternatively, use the directive form of the bootstrap function
angular.bootstrap(document.getElementsByTagName('body')[0], ['myApp']);

function DemoController() {
  var Demo = this;
  // Add an options object to your application controller
  Demo.sliderConfig = {
    startSlide: 0,
    speed: 400,
    auto: 3000,
    draggable: false,
    continuous: true,
    disableScroll: false,
    stopPropagation: false,
    callback: function(index, elem) {},
    transitionEnd: function(index, elem) {}
  };
}

[lyfeyaj]

Great feature! Merged!

[lyfeyaj]

Hi @loup-brun , do you mind if I add you as collaborator?

[loup-brun]

Sure - no problem ;) Happy to help!

[loup-brun]

Let me know if the multiple directives sound confusing. Maybe there could be a better design, but in respect to the Angular scopes, I think this is a relatively robust architecture.

[lyfeyaj]

Using multiple directives is ok to me.

Below is how I use swipe in my angular project for several months ago:

'use strict'

###*
 # @ngdoc directive
 # @name vetServicesApp.directive:common/swipe
 # @description
 # # common/swipe
###
angular.module('vetServicesApp.directives')
  .directive('swipe', [
    '$timeout'
    ($timeout) ->
      restrict: 'AE'
      link: (scope, element, attrs) ->
        initSwipe = () ->
          if scope.mySwipe
            scope.mySwipe.kill()
            scope.mySwipe = null
          scope.mySwipe = new Swipe(element[0],
            startSlide: 0
            speed: 400
            auto: parseInt(attrs.auto)
            draggable: true
            autoRestart: false
            continuous: true
            disableScroll: false
            stopPropagation: false
            callback: (index, elem) ->
              angular.element(".swipe-num li")
                     .removeClass("active")
                     .eq(index)
                     .addClass("active")
              return
            transitionEnd: (index, elem) ->
              return
          )
          return

        if attrs.usingNgRepeat
          scope.$on 'Event:ng-repeat-finish-render', ->
            $timeout(initSwipe, 100)
        else
          $timeout(initSwipe, 100)

        scope.$on 'Event:ImagesLoaded', ->
          $timeout ->
            scope.mySwipe.setup()
          , 100
        return
])

There are two things may cause problems when using swipe in angular:

1. When using with ng-repeat, due to the async process of ng-repeat, swipe may init before the items are loaded, especially when loading items via Ajax.
2. Another common problem is when using swipe with images. There are occasions that swipe will not perform properly when images are loading with high latency.

So, you can see that I use two additional directives for monitoring ng-repeat and image loading status to initiate or setup swipe.

It is great If these two problems can be fixed with better solutions ^_^
@loup-brun Any good ideas?

[loup-brun]

I'll have to make some tests with ng-repeat, since I haven't used Swipe with that directive - though I can see how pertinent it can be.

Since wrapping the Swipe library in Angular brings some compromises, we might (just a quick thought, not yet a serious consideration) port the project to a different repository to better enable Angular support.

[maxfahl]

This is a bit out of topic. But do you guys know of any wrapper for this slider in Angular 4?