palanshagarwal / hexaflip Goto Github PK

var cubeSet = new HexaFlip(documentGetElementById('my-el'),
    {
        prince: ['For You', 'Prince', 'Dirty Mind', 'Controversy', '1999', 'Around the World in a Day'],
        curtis: ['Curtis', 'Roots', 'Super Fly', 'Back to the World', 'Got to Find a Way', 'Sweet Exorcist']
    }
);

// you can also pass a selector string and HexaFlip will take the first matching element:
var firstDiv = new HexaFlip('div');

var colorCube = new HexaFlip('#color-cube',
    {
        chromaSet: [
          {
              value: 'orange',
              style: {
                  backgroundColor: '#e67e22',
                  fontWeight: 100
              }
          },
          {
              value: 'teal',
              style: {
                  backgroundColor: '#1abc9c',
                  fontFamily: 'Futura'
              }
          },
          {
              value: 'yellow',
              style: {
                  backgroundColor: '#f1c40f',
                  textDecoration: 'underline'
              }
          }
        ]
    }
);

var horizontalCube = new HexaFlip('#my-el2',
    {
        letters: ['α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'ι', 'κ', 'λ', 'μ',
                  'ν', 'ξ', 'ο', 'π', 'ρ', 'σ', 'τ', 'υ', 'φ', 'χ', 'ψ', 'ω']
    },
    {
        horizontalFlip: true,
        size: 300
    }
);

cubeSet.setValue({ prince: '1999', curtis: 'Roots' });
cubeSet.getValue();

cubeSet.flip();
cubeSet.flipBack();

//...
    },
    {
        domEvents: {
            mouseover: function(e, face, cube) {
                face.style.backgroundColor = 'red';
            },
            mouseout: function(e, face, cube) {
                face.style.backgroundColor = 'blue';
            },
            click: function(e, face, cube) {
                console.log(face.innerHTML);
            }
        }
    }
);