all files / addon/components/ em-flickity.js

100% Statements 35/35
92.86% Branches 13/14
100% Functions 12/12
100% Lines 22/22
1 statement, 1 branch Ignored     
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119                                          20×                                                               20×                                   22× 20× 20×         22×   22× 20× 20×         20×   20× 13× 13×             20×     20×       20× 20×   20× 540× 370×       20×        
import Ember from "ember";
import layout from "../templates/components/em-flickity";
 
const { computed, get, getProperties, set } = Ember;
 
export default Ember.Component.extend({
  layout,
  classNames: ["flickity-wrapper"],
  eventHandlers: [],
  showSlides: false,
  widget: null,
 
  // some default flickity settings
  cellAlign: "center",
  contain: true,
  friction: 0.8,
  pageDots: false,
  selectedAttraction: 0.125,
  setGallerySize: false,
 
  optionKeys: computed(function getOptionKeys() {
    return [
      "accessibility",
      "adaptiveHeight",
      "arrowShape",
      "asNavFor",
      "autoPlay",
      "bgLazyLoad",
      "draggable",
      "gragThreshold",
      "cellAlign",
      "cellSelector",
      "contain",
      "freeScroll",
      "freeScrollFriction",
      "friction",
      "groupCells",
      "imagesLoaded",
      "initialIndex",
      "lazyLoad",
      "pageDots",
      "percentPosition",
      "prevNextButtons",
      "resize",
      "rightToLeft",
      "selectedAttraction",
      "setGallerySize",
      "watchCSS",
      "wrapAround"
    ];
  }),
 
  eventKeys: computed(function getEventKeys() {
    return [
      "cellSelect",
      "select",
      "settle",
      "scroll",
      "dragStart",
      "dragMove",
      "dragEnd",
      "pointerDown",
      "pointerMove",
      "pointerUp",
      "staticClick",
      "lazyLoad",
      "bgLazyLoad"
    ];
  }),
 
  didInsertElement() {
    if (get(this, "showSlides")) {
      set(this, "widget", this.$().flickity(this._getOptions()));
      this._setupEvents();
    }
  },
 
  willDestroyElement() {
    const $widget = get(this, "widget");
 
    if ($widget) {
      get(this, "eventHandlers").forEach(evt => evt.off());
      $widget.flickity("destroy");
    }
  },
 
  _setupEvents() {
    const $widget = get(this, "widget");
 
    const handler = key => (event, pointer, cellElement, cellIndex) => {
      Eif (this.attrs[key]) {
        this.attrs[key](
          cellIndex || $widget.data("flickity").selectedIndex,
          $widget.data("flickity")
        );
      }
    };
 
    const eventHandlers = get(this, "eventKeys")
      .map(key => $widget.on(`${key}.flickity`, handler(key)));
 
    set(this, "eventHandlers", eventHandlers);
  },
 
  _getOptions() {
    const propKeys = get(this, "optionKeys");
    const props = getProperties(this, ...propKeys);
 
    Object.keys(props).forEach(prop => {
      if (!props[prop] && typeof props[prop] !== "boolean") {
        delete props[prop];
      }
    });
 
    return props;
  }
});