vennwebtest/custom.js at master · mark-bloom/vennwebtest · GitHub

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
// Activate intersection of selected items
$(document).ready(function(){
  var elements = document.body.getElementsByClassName('vitem');
  var pathElems = document.body.getElementsByClassName('vpath');
  $('.vpath').on("click", function(){
    selectedHold(pathElems, this);
    compareSelection(elements, this);
    refreshVisibleItems(elements);
  });
  $('.venn').on("click", function(event){
    $target = $(event.target);
    if(!$target.closest('.vpath').length) {
      clearSelection(elements, pathElems);
    }
  });
});

function selectedHold(vennElems, pathClicked) {
  for (var i = 0; i < vennElems.length; i++) {
    vennElems[i].classList.remove("vselected");
  }
  pathClicked.classList.add("vselected");
}

function compareSelection(arrayElems, pathClicked) {
  for (var i = 0; i < arrayElems.length; i++) {
    arrayElems[i].classList.add("vactivated");
  }
  if(pathClicked.classList.contains("venn-red")) {
    for (var i = 0; i < arrayElems.length; i++) {
      if(!arrayElems[i].classList.contains("vcat-red")) {
        arrayElems[i].classList.remove("vactivated");
      }
    }
  }
  if(pathClicked.classList.contains("venn-blue")) {
    for (var i = 0; i < arrayElems.length; i++) {
      if(!arrayElems[i].classList.contains("vcat-blue")) {
        arrayElems[i].classList.remove("vactivated");
      }
    }
  }
  if(pathClicked.classList.contains("venn-yellow")) {
    for (var i = 0; i < arrayElems.length; i++) {
      if(!arrayElems[i].classList.contains("vcat-yellow")) {
        arrayElems[i].classList.remove("vactivated");
      }
    }
  }
}

function refreshVisibleItems(arrayElems) {
  for (var i = 0; i < arrayElems.length; i++) {
    if(arrayElems[i].classList.contains("vactivated")) {
      arrayElems[i].style.display = "block";
    } else {
      arrayElems[i].style.display = "none";
    }
  }
  for (var i = 0; i < arrayElems.length; i++) {
    arrayElems[i].classList.add("vactivated");
  }
}

function clearSelection(arrayElems, vennElems) {
  for (var i = 0; i < arrayElems.length; i++) {
    vennElems[i].classList.remove("vselected");
    arrayElems[i].style.display = "block";
  }
}

// // Activates the union of items (e.g. purple = red OR blue, not AND)
// $(document).ready(function(){
//   var elements = document.body.getElementsByClassName('vitem');
//   $('.venn-red').on("click", function(){
//     $('.vcat-red').addClass("vactivated");
//   });
//   $('.venn-blue').on("click", function(){
//     $('.vcat-blue').addClass("vactivated");
//   });
//   $('.venn-yellow').on("click", function(){
//     $('.vcat-yellow').addClass("vactivated");
//   });
//   $('.vpath').on("click", function(){
//     refreshVisibleItems(elements);
//   });
// });