Angular directive that

README.md

MixItUp ng component (angularJs >= v1.5)

Description

• component uses dataset API of MixItUp (https://www.kunkalabs.com/tutorials/using-the-dataset-api/)

Known issues

• Missing ability to return HTML DOM element in 'render' function (patrickkunka/mixitup#272)

About MixItUp

A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more... MixItUp gives you beautiful animated DOM manipulation on top of native CSS layout. https://www.kunkalabs.com/mixitup/

How to use the 'mixitup' component?

<mixitup data-items="$ctrl.items">
  <!-- Here goes HTML template of 'item' -->
  <div>{{item.text}}</div>
</mixitup>

<mixitup data-items="$ctrl.items">
  <!-- Here goes HTML template of 'item' -->
  <super-item-component data-item="item"></super-item-component>
</mixitup>

mixitup.directive.ts

import * as $ from "jquery";
import {find, extend, isArray} from "lodash";
import * as angular from "angular";
import * as mixitup from "mixitup";

class MixitupCtrl {
  mixer: any;
  items: any[];
  trackBy: string;
  entryVarName: string;

  static defaultOptions = {
    trackBy: "id",
    entryVarName: "item"
  }

  static $inject = [
    "$element",
    "$compile",
    "$scope"
  ];

  constructor(
    private $element,
    private $compile,
    private $scope
  ) {
    /**
     * Prepare options
     * -----------------
     */
    this.trackBy = this.trackBy ? this.trackBy : MixitupCtrl.defaultOptions.trackBy;
    this.entryVarName = this.entryVarName ? this.entryVarName : MixitupCtrl.defaultOptions.entryVarName;

    /**
     * Init item template
     * -----------------
     */
    let template = find($($element).contents(), {nodeType: 8}).nodeValue;

    /**
     * Define 'render' function
     * -----------------
     */
    let render = (item) => {
      let scope = this.$scope.$new()

      let scopeExtender = {}
      scopeExtender[this.entryVarName] = item;

      extend(scope, scopeExtender)
      let compiledTemplate = this.$compile(angular.element(template))(scope);
      return $(compiledTemplate).prop("outerHTML");
    };

    /**
     * init 'mixer'
     * -----------------
     */
    this.mixer = mixitup(this.$element, {
      data: {
        uidKey: this.trackBy
      },
      render: {
        target: render
      },
      selectors: {
        target: ".card"
      }
    });
  }

  $onChanges(changesObj) {
    if (changesObj.items) {
      this.renderList();
    }
  }

  renderList() {
    if (
      this.mixer &&
      isArray(this.items)
    ) {
      this.mixer.dataset(this.items);
    }
  }

}

let ngModule = angular.module("components.mixitup", []);

ngModule.component("mixitup", {
  controller: MixitupCtrl,
  template: ($element) => {
    /**
     * Inside of the element is defined template of 'item'
     * since template can 'compilable' code (e.g. : component that changes its html after compilation)
     * we need ensure this code will not be compiled before use by 'mixitup'
     * so we 'comment' this element
     */
    let mixitupItem = $element.children()[0];
    let mixitupItemCommented = document.createComment(mixitupItem.outerHTML);
    mixitupItem.replaceWith(mixitupItemCommented);
  },
  bindings: {
    items: "<",
    trackBy: "@",
    entryVarName: "@"
  }
});