Cubes/cubes.js at master · Daniel217D/Cubes · 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
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
let cubes = function(parent, settings) {
  if (!parent) {
    console.error("Cubes: Element is undefined");
    return
  }
  if (!parent.id) {
    console.error("Cubes: Element must have id");
    return
  }
  const wNum = settings ? settings.columns : 10,
    hNum = settings ? settings.rows : 10,
    wCub = parent.offsetWidth / wNum,
    hCub = parent.offsetHeight ? parent.offsetHeight / hNum : wCub,
    speed = settings ? settings.speed : 100,
    transition = settings ? settings.transition + 'ms' : '1000ms',
    diagonal = settings ? settings.diagonal : false;
  let once = settings ? settings.once ? -1 : 1 : 1;
  //generate grid
  {
    const color = settings ? settings.color : 'rgba(66, 134, 244, 1)',
      position = getComputedStyle(parent).position;
    let html = '<div class="cubes">';
    for (let i = 0; i < hNum; i++) {
      html = html + ` <div class="cubes-row" data-cubes="${i}">`
      for (let j = 0; j < wNum; j++) {
        html = html + ` <div class="cubes-block cubes-block__base" data-cubes="${j}"></div>`
      }
      html = html + `</div>`
    }
    html = html + `</div>`

	let delCubes = parent.getElementsByClassName('cubes')[0];
    if (delCubes && delCubes.parentNode === parent) {
      parent.removeChild(parent.getElementsByClassName('cubes')[0]);
    }

    parent.innerHTML = parent.innerHTML + html;

    if ((position !== 'relative') && (position !== 'absolute') && (position !== 'fixed')) {
      parent.style.position = 'relative';
    }
    const css = `
    #${parent.id} .cubes {
      position: absolute;
      top:0;
      left:0;
    }
    #${parent.id} .cubes-row {
      height: ${hCub}px;
      position: relative;
    }

    #${parent.id} .cubes-block {
      width: ${wCub}px;
       height: ${hCub}px;
      position: absolute;
      transition: ${transition};
    }

    #${parent.id} .cubes-block__base {
      background-color: ${color};
    }

    #${parent.id} .cubes-block__toggled {
      background-color: rgba(0, 0, 0, 0);
    }`,
      head = document.head || document.getElementsByTagName('head')[0],
      style = document.createElement('style');

    style.type = 'text/css';
    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }

    head.appendChild(style);
  }

  let allblocks = Array.from(parent.getElementsByClassName("cubes-row")),
    ammountAllBlocks = 0,
    ammoutBlocks = 0,
    toggleShow = true;

  allblocks.forEach((block, index) => {
    allblocks[index] = [];

    Array.from(block.getElementsByClassName("cubes-block")).forEach((element) => {
      ammountAllBlocks++;

      allblocks[index][element.dataset.cubes] = element;
      element.style.left = wCub * parseInt(element.dataset.cubes) + "px";

      element.addEventListener("mouseenter", function handler() {
        if (once) {
          once++;
          changeColor(parseInt(this.dataset.cubes), parseInt(this.parentNode.dataset.cubes));
        }
      });
    });
  });

  let changeColor = (x, y) => {
    let base, toggled;
    if (toggleShow) {
      base = "cubes-block__base";
      toggled = "cubes-block__toggled";
    } else {
      base = "cubes-block__toggled";
      toggled = "cubes-block__base";
    }
    setTimeout(() => {
      let block = allblocks[y][x];
      if (block !== undefined && !block.classList.contains(toggled)) {
        ammoutBlocks++;
        block.classList.toggle(base);
        block.classList.toggle(toggled);
        if (allblocks[y][x - 1] !== undefined) changeColor(x - 1, y);
        if (allblocks[y][x + 1] !== undefined) changeColor(x + 1, y);
        if (allblocks[y - 1] !== undefined) changeColor(x, y - 1);
        if (allblocks[y + 1] !== undefined) changeColor(x, y + 1);

        if (diagonal) {
          if ((allblocks[y][x + 1] !== undefined) && (allblocks[y + 1] !== undefined)) changeColor(x + 1, y + 1);
          if ((allblocks[y][x + 1] !== undefined) && (allblocks[y - 1] !== undefined)) changeColor(x + 1, y - 1);
          if ((allblocks[y][x - 1] !== undefined) && (allblocks[y + 1] !== undefined)) changeColor(x - 1, y + 1);
          if ((allblocks[y][x - 1] !== undefined) && (allblocks[y - 1] !== undefined)) changeColor(x - 1, y - 1);
        }
        if (ammoutBlocks === ammountAllBlocks) {
          ammoutBlocks = 0;
          toggleShow = !toggleShow;
        }
      }
    }, speed);
  };
};