benjamincharity / angular-flickity Goto Github PK

• Events
  • cellSelect
  • settle
  • dragMove
  • dragEnd
  • pointerDown
  • pointerUp
  • staticClick
  • lazyLoad

Notes

• Events should not be wired/broadcasted unless asked for by the instance options or provider options.

Currently only used for an index of method.

Hi, great work. Especially documentation is great. I want to use flickity with angular material's md-card attribute so not with images. I tried it but it did not create a gallery. Here what I want to achieve:

My case:

<div bc-flickity="{{myCustomOptions}}" >
<md-card data-ng-repeat="photo in slides">
    <a ui-sref="baba.icerik({ad:photo.isim})"><img data-ng-src="{{photo.isim}}.jpg"></a>
</md-card>
</div>

Coverage reporter only seems to report on index.js rather than also reporting on the imported files.

Example: https://coveralls.io/builds/9679044/source?filename=src%2Findex.js

Hello Benjamin,
I'm trying to use Flickity in my angularjs project.
However, after setting my slider like this

<div bc-flickity="{{sliderOptions}}">
    <figure ng-class="'slide background-image'" data-ng-repeat="photo in module.gallerie">
        <img ng-src="{{photo.url}}">
    </figure>
</div>

The HTML output is like that :

The flickity seems to be instanciate. But the cells aren't in the right place (before the flickity-viewport div)

Currently, when created like this:

this.FlickityService.create(element[0], null, options);

The ID is actually set to null rather than falling back to the default of using the index.

When using the Flickity service to create an instance inside a UI-Router view's controller, we also need to be destroying it using the $destroy event. The long $timeout delay in FlickityService.destroy() causes issues if switching quickly between pages. This should be ~10x shorter.

http://flickity.metafizzy.co/api.html

• Methods
  • select
  • previous
  • next
  • resize
  • reposition
  • prepend
  • append
  • insert
  • remove
  • destroy
  • reloadCells
  • getCellElements
  • Flickity.data()
  • selectedIndex
  • selectedElement
  • cells

I am struggling with this for 2 days now, i installed flickity first with npm , and it was not working, then again with bower and made the changes you say but again the same problem,Module 'bc.Flickity' is not available

Deprecated: https://github.com/bower/spec/blob/master/json.md#version

Relates to #50, #51.

It looks like this line of code: https://github.com/benjamincharity/angular-flickity/blob/master/src/next/next.directive.js#L47 is checking data.instance.cells.length instead of data.instance.slides.length. This introduces a subtle bug where the next button is not hidden when on the final slide when groupCells is enabled.

Happy to submit a PR to address (will work on one now).

Issue:
Assigning options from the constructor and passing them on the directive argument on the template does not work and ignores all the settings.

Code example (ES6):

export default class CarouselController {

  constructor(FlickityService) {
    this.flickityOptions = {
      cellSelector: '.child-slide',
      setGallerySize: true,
      prevNextButtons: false,
      imagesLoaded: true,
      pageDots: false,
      wrapAround: true
    };
  }
}

.carousel-component(bc-flickity="{{ $ctrl.flickityOptions }}")
  .child-slide(ng-repeat="item in $ctrl.items")
    image-component(image="item.image", url="item.url")

Result:
prevNextButtons, imagesLoaded, pageDots, wrapAround options are ignored and the default setting is always displayed

Demo (forked from your demo):
http://plnkr.co/edit/sU6VoIz7UyODu8Rcxs0k?p=preview

Workaround:
Downgrade to v2.0.0

Currently a wrapping div.flickity-viewport is added. We should be able to define our own class on this generated element.

Is there a reason why sourcemaps are included in the min.js? This makes the bundle unnecessarily large

the dist folder is outdated. So when I install from bower I get an old version.

Currently the directive chokes if it doesn't receive an object.

It looks like the bc-flickity-previous and bc-flickity-next directives do not initialize as disabled, even if there are not enough slides to scroll. It looks like the functions defined here: https://github.com/benjamincharity/angular-flickity/blob/master/src/previous/previous.directive.js#L71 and here: https://github.com/benjamincharity/angular-flickity/blob/master/src/next/next.directive.js#L73 need to be called when Flickity is initialized.

• Test service
• Test directives
• Test controller
• Hook up CodeClimate
• Set up build with CircleCi

How can i view multiple slides one time.
contain property is not working.

http://bnj.bz/2D3p2l3d2v3x/code_of_conduct.md****

Look into alternate solutions that would include IE.

http://docs.w3cub.com/javascript/global_objects/array/findindex/

• https://docs.npmjs.com/getting-started/publishing-npm-packages
• https://docs.npmjs.com/misc/developers

Simply installing via bower never seems to work. Overriding the main with the dist files seems to fix this.

bower.json:

  "name": "myProject",
  ...
  "overrides": {
    "flickity": {
      "main": [
        "dist/flickity.pkgd.js",
        "dist/flickity.min.css"
      ]
    }
  }

What it's for, how to use it.

• Add each event separately (add to TOC)
• Define what is passed through each

Hi @benjamincharity,

Thanks for making this wonderful plugin. I am trying to get the slider work with Remote data (after $http call), but I am facing an issue.

The wrapper divs (flickity-viewport and flickity-slider) get initialized first and treat the remote data array as an Empty Array. After this, the remote data load get completed and the slides get loaded "before" the wrappers but inside the correct parent.

When i hardcode the Remote Data in the Array directly, everything works. But on including it as a $http call, it fails. I even tried using the service options "after" the $http promise is resolved, but still get the same error.

Is there a way to specify the reload based on some criteria after array is initialized with remote data?

Using Angular 1.5 / Angular-UI Router 0.2.x

Similar to this issue here:
metafizzy/flickity-docs#4

When initializing Flickity using native javascript / jquery the gallery inits correctly, but allowing the directive to do the initialization, the gallery is stacked vertically on top of itself and no functionality is working.

This only happens inside a Angular-UI Routers "UI-View" that is pulling in a "templateURL" if you move the directive outside the UI-View it works or if you alternatively define a inline template with UI-Router, it works.

A workaround was for me to initialize the gallery with the Service inside of the corresponding Controller of my UI-View.

$timeout(function() {
    FlickityService.create('.demo__slides', $scope.flickityId, $scope.flickityOptions)
},0);

Working CodePen with INLINE template and UI-Router
i don't have a way to make a codepen with a external template to show it not working.

Issues with angular 1.6.1 .. autoPlay: true was the main one I found in my very limited testing.

Quick test: Use your simple demo @ http://codepen.io/anon/pen/RoXaXy and change the 1.5 cdn out with 1.6.1 link below. You’ll notice the slides will no longer play. This is a great wrapper though! Thanks!

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js

• If no ID is specified, default to the first (assume it is the only - backward compat)
• Should accept an optional ID to bind to specific instance

• Pass in object
• Still can use ID
• Can override defaults using provider

I am trying to use Angular-Flickity but running into some version issue. I have specified following in my bower.json file.

"angular-flickity": "2.0.0",

I haven't explicitly specified "flickity" version in bower.json.

when I run bower install, I see following.

angular-flickity#2.0.0 web/src/main/webapp/bower_components/angular-flickity
├── angular#1.5.8
└── flickity#1.2.1

It's resolving to 1.2.1 version of flickity.

Do I need to explicitly specifiy flickity version in my bower.json?

• Expose isDisabled flag when wrapAround is false.
  • Next: isDisabled should be true when at the at the last cell.
  • Previous: isDisabled should be true when at the at the first cell.
• Add docs showing how to use the flag to disable the button and add a class

I read #39 and tried that approach. I have an interactive search that returns items with images. Based on the map drag or filters changed, results could have common items. So, I had to destroy instances in order to recreate them since their id would be the same. Because of $timeout in FlickityService.destroy, the destroy was happening after the next create cycle from the next api call, which was making flicketyIndex be outdated since the next create cycle added more instances and the array splicing eventually changed the order of the array causing errors.

I tried to remedy with promises and such but it was getting difficult with all the create and destroy promises happening at different times.

I changed the destroy code to be this to see how it functions (I moved index get inside promise and removed $timeout).

value: function destroy(id) {
    var _this2 = this;

    return this.$q(function (resolve, reject) {

        var flickityIndex = _this2._getFlickityIndex(id);

        if (flickityIndex < 0 || !_this2.instances[flickityIndex]) {
            reject('Instance ' + id + ' not found');
        }

        // Destroy the Flickity instance
        _this2.instances[flickityIndex].instance.destroy();

        // Remove the instance from the array
        _this2.instances.splice(flickityIndex, 1);

        resolve('Instance ' + id + ' destroyed.');
    });
}

With this change, I'm simply using your directive inside the results/ng-repeat and letting angular control the init/destroy lifecycle when the scope changes. So far its working very well.

I know you had a reason for $timeout in destroy but wanted to make you aware of this edge case and the problems that $timeout was causing with the instances array.

I also think the getFlicketyIndex should be inside the promise, right before the destroy in case the array order changes.

bglazyload not working in angular

Currently have a mix of both $q and ES6 Promises. There should be consistency throughout the module (one way or another).

$q

• 👍 Better IE support (IE9 and up)
• ❓ Tied directly in with AngularJS

ES6 Promises

• 👍 Vanilla JS
• 👎 Needs polyfill for IE

Note: If native promises are chosen, clear instructions for enabling IE support should be added to the docs.

Should be:

  "angular": "^1.4.0"

Demo should include:

• Basic
  • Multiple instances (3)
  • Using next/previous
    • http://embed.plnkr.co/gFwwJf/
• Services
  • Use service to move
  • Use service to change page based on cell position (eg when at last)
• Options
  • Set via controller
  • Set via provider
  • Show various options
• Events
  • Log all events to a list in page
    • http://embed.plnkr.co/k7Xw4t/

It's difficult to make use of the staticClick event because it does not provide the parameters of the event from the underlying API (pointer, cellElement, cellIndex). These are needed to determine which item was clicked. Is there a way to retrieve these using the existing code?

I am trying to use multiple sliders of Flickity in my single view. For some reason, Prev and Next Arrows are not showing for all the Flickity sliders. It only shows up for one of the Flickity slider and where it shows up, it ends up controller different slider.
Any idea?

The bundle refers to the flickity node_modules as Flickity.

This will work fine on Windows or macOS as their file system is case-insensitive by default.

However, on a Linux box, an error will be raised as the actual package for flickity is flickity (lower case f)

For instance, when using a service and passing in an ID that cannot be found. Could be hard to track down without warnings/errors.

Hello @benjamincharity

When I don't use ng-repeat - just plain HTML - everything works like a charm.
But I have a problem when using ng-repeat with bc-flickity directive. It seems it runs after bc-flickity postLink is finished.
I put a breakpoint in this line https://github.com/benjamincharity/angular-flickity/blob/master/src/flickity.directive.js#L53 to find out that:

1. When using plan html (listing all slides literally) - element[0] contains all slides DOM elements. As expected, nothing fancy here.
2. But when I use ng-repeat - element[0] is empty.

I saw one of yours examples: http://plnkr.co/edit/qdyKKo?p=preview
and I implemented it in my code, and it does not work either for me. Which brings me to conclusion that there might be something wrong with my code.
The problem is that this is a code that was handed over to me, and I'm not really sure what can cause this issue.

This might not be a bug of your code at all, but I'd appreciate any help/hints from you.

http://flickity.metafizzy.co/#new-flickity-v2