ecomp-sdk-app/src/main/webapp/static/fusion/raptor/ebz/multiselect.js

   1 'use strict';
   2
   3 angular.module('quantum').directive('dropdownMultiselect', ['$document', function($document){
   4    return {
   5        restrict: 'E',
   6        scope:{
   7             model: '=ngModel',
   8             options: '='
   9        },
  10        template: "<div class='btn-group ng-isolate-scope buttons-dropdown--small' data-ng-class='{open: open}'>"+
  11         "<a class='button btn buttons-dropdown__split button--secondary'  data-ng-click='open=!open;' style='border-right:none;'>Multi-Select</a>"+
  12                 "<a class='button buttons-dropdown__drop dropdown-toggle button--secondary' data-ng-click='open=!open;'  style='border-left:none;color:#067ab4'></a>"+
  13                 "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +
  14                     "<li><a data-ng-click='selectAll()'><i class='icon-included-checkmark'></i>  Check All</a></li>" +
  15                     "<li><a data-ng-click='deselectAll();'><i class='icon-erase'></i>  Uncheck All</a></li>" +
  16                     "<li class='divider'></li>" +
  17                     "<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.title}}<span data-ng-class='isChecked(option.value)'></span></a></li>" +
  18                 "</ul>" +
  19             "</div>" ,
  20        link: function($scope,element,attr){
  21
  22           $scope.$watch("options",function(newValue,oldValue) {
  23                 $scope.model = [];
  24           });
  25
  26             $scope.selectAll = function () {
  27                 $scope.model = _.pluck($scope.options, 'value');
  28             };
  29             $scope.deselectAll = function() {
  30                 $scope.model=[];
  31             };
  32             $scope.setSelectedItem = function(){
  33                 var value = this.option.value;
  34                 if (_.contains($scope.model, value)) {
  35                     $scope.model = _.without($scope.model, value);
  36                 } else {
  37                     $scope.model.push(value);
  38                 }
  39                 return false;
  40             };
  41             $scope.isChecked = function (value) {
  42                 if (_.contains($scope.model, value)) {
  43                     return 'icon-included-checkmark pull-right';
  44                 }
  45                 return false;
  46             };
  47
  48             $document.bind('click', function(event){
  49                 var isClickedElementChildOfPopup = element
  50                   .find(event.target)
  51                   .length > 0;
  52
  53                 if (isClickedElementChildOfPopup)
  54                   return;
  55
  56                 $scope.open = false;
  57                 $scope.$apply();
  58               });
  59
  60        }
  61    };
  62 }]);