define(function(require, exports, module) {
    var Engine        = require('famous/core/Engine');
    var Modifier      = require('famous/core/Modifier');
    var Surface       = require('famous/core/Surface');
    var Transform     = require('famous/core/Transform');
    var ModifierChain = require('famous/modifiers/ModifierChain');
   
    var mainContext = Engine.createContext();

    var modifierChain = new ModifierChain();

    var modifierOne = new Modifier({
        align: [.5, .5],
        origin: [0.5, 0.5]
    });

    var modifierTwo = new Modifier({
        transform: Transform.translate(0, 100, 0)
    });
    
    var surface = new Surface({
        size: [200, 200],
        content: "Click me to remove the center align/origin modifier",
        classes: ["red-bg"],
        properties: {
            textAlign: "center",
        }
    });

    modifierChain.addModifier(modifierOne);
    modifierChain.addModifier(modifierTwo);
    mainContext.add(modifierChain).add(surface);

    surface.on('click', function() {
        modifierChain.removeModifier(modifierOne);
        surface.setContent('Success!');
    });
});
Example #2
0
define(function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var Transform = require('famous/core/Transform');
  var ModifierChain = require('famous/modifiers/ModifierChain');

  var ContainerSurface = require('famous/surfaces/ContainerSurface');
  var SequentialLayout = require('famous/views/SequentialLayout');
  var Utility = require('famous/utilities/Utility');

  var mainCtx = Engine.createContext();

  var container = new ContainerSurface({
    properties: {
      overflow: 'auto'
    }
  });
  container.context.setPerspective(800);

  var surface, modifier, modifierChain, transform, content;

  surface = new Surface({
    size: [100, 100],
    content: 'Hello World',
    properties: {
      backgroundColor: 'rgb(255, 66, 33)',
      lineHeight: '100px',
      fontSize: '14px',
      color: 'white',
      textAlign: 'center'
    }
  });

  modifier = new Modifier({
    transform: Transform.translate(0, 0, 0)
  });
  container.add(modifier).add(surface);

  surface = new Surface({
    content: 'Transform.translate(0, 0, 0) <pre>'+Transform.translate(0, 0, 0).toString()+'</pre>'
  });
  modifier = new Modifier({
    transform: Transform.translate(110, 0, 0)
  });
  container.add(modifier).add(surface);

  surface = new Surface({
    size: [100, 100],
    content: 'Hello World',
    properties: {
      backgroundColor: 'rgb(255, 66, 33)',
      lineHeight: '100px',
      fontSize: '14px',
      color: 'white',
      textAlign: 'center'
    }
  });
  var translateModifier = new Modifier({
    transform: Transform.translate(100, 110, 0)
  });
  container.add(translateModifier).add(surface);

  surface = new Surface({
    content: 'Transform.translate(100, 110, 0)<pre>'+Transform.translate(100, 110, 0).toString()+'</pre>'
  });
  modifier = new Modifier({
    transform: Transform.translate(210, 110, 0)
  });
  container.add(modifier).add(surface);

  surface = new Surface({
    size: [100, 100],
    content: 'Hello World',
    properties: {
      backgroundColor: 'rgb(255, 66, 33)',
      lineHeight: '100px',
      fontSize: '14px',
      color: 'white',
      textAlign: 'center'
    }
  });
  modifierChain = new ModifierChain();
  var scaleModifier = new Modifier({
    transform: Transform.scale(2, 2, 1)
  });
  modifierChain.addModifier(
    scaleModifier,
    new Modifier({
      transform: Transform.translate(0, 250, 0)
    })
  );
  container.add(modifierChain).add(surface);

  content = 'Transform.scale(2, 2, 1)<pre>'+Transform.scale(2, 2, 1).toString()+'</pre>';
  content += 'Note: setPerspective(1000);';

  surface = new Surface({
    content: content
  });
  modifier = new Modifier({
    transform: Transform.translate(130, 250, 0)
  });
  container.add(modifier).add(surface);

  surface = new Surface({
    size: [100, 100],
    content: 'Hello World',
    properties: {
      backgroundColor: 'rgb(255, 66, 33)',
      lineHeight: '100px',
      fontSize: '14px',
      color: 'white',
      textAlign: 'center'
    }
  });
  modifierChain = new ModifierChain();
  var rotateModifier = new Modifier({
    transform: Transform.rotateZ(Math.PI / 4)
  });
  modifierChain.addModifier(
    rotateModifier,
    new Modifier({
      transform: Transform.translate(80, 360, 0)
    })
  );
  container.add(modifierChain).add(surface);

  content = 'Transform.rotateZ(Math.PI / 4)<pre>'+Transform.rotateZ(Math.PI / 4).toString();
  content += '</pre> Note: setPerspective(1000);<br>Use ModifierChain here.';

  surface = new Surface({
    content: content
  });
  modifier = new Modifier({
    transform: Transform.translate(160, 380, 0)
  });
  container.add(modifier).add(surface);

  surface = new Surface({
    size: [100, 100],
    content: 'Hello World',
    properties: {
      backgroundColor: 'rgb(255, 66, 33)',
      lineHeight: '100px',
      fontSize: '14px',
      color: 'white',
      textAlign: 'center'
    }
  });
  modifierChain = new ModifierChain();
  var skewModifier = new Modifier({
    transform: Transform.skew(Math.PI / 6, 0, 0)
  });
  modifierChain.addModifier(
    new Modifier({
      transform: Transform.rotateY(Math.PI / 8)
    }),
    skewModifier,
    new Modifier({
      transform: Transform.translate(10, 540, 0)
    })
  );
  container.add(modifierChain).add(surface);

  content = 'Transform.skew(Math.PI / 6, 0, 0)<pre>'+Transform.skew(Math.PI / 6, 0, 0).toString();
  content += '</pre> Note: setPerspective(1000);<br>Use ModifierChain here, Transform.rotateY(Math.PI / 8) first.<br>';
  content += 'See also: <a href="http://stackoverflow.com/questions/13206220/3d-skew-transformation-matrix-along-one-coordinate-axis">3D skew transformation matrix along one coordinate axis</a>';

  surface = new Surface({
    content: content
  });
  modifier = new Modifier({
    transform: Transform.translate(160, 520, 0)
  });
  container.add(modifier).add(surface);

  surface = new Surface({
    size: [100, 100],
    content: 'Hello World',
    properties: {
      backgroundColor: 'rgb(255, 66, 33)',
      lineHeight: '100px',
      fontSize: '14px',
      color: 'white',
      textAlign: 'center'
    }
  });
  var inverseModifierChain = new ModifierChain();
  var inverseRotate = new Modifier({
    transform: Transform.inverse(Transform.rotateZ(Math.PI / 8))
  });
  inverseModifierChain.addModifier(
    new Modifier({
      transform: Transform.rotateZ(Math.PI / 4)
    }),
    inverseRotate,
    new Modifier({
      transform: Transform.translate(80, 680, 0)
    })
  );
  container.add(inverseModifierChain).add(surface);

  content = 'Transform.rotateZ(Math.PI / 8)<pre>'+Transform.rotateZ(Math.PI / 8).toString();
  content += '</pre>Transform.inverse(Transform.rotateZ(Math.PI / 8))<pre>'+Transform.inverse(Transform.rotateZ(Math.PI / 8)).toString();
  content += '</pre>Transform.transpose(Transform.rotateZ(Math.PI / 8))<pre>'+Transform.transpose(Transform.rotateZ(Math.PI / 8)).toString();
  content += '</pre> Note: setPerspective(1000);<br>Use ModifierChain here, Transform.rotateY(Math.PI / 4) first.<br>';

  surface = new Surface({
    content: content
  });
  modifier = new Modifier({
    transform: Transform.translate(160, 680, 0)
  });
  container.add(modifier).add(surface);

  setIntervalCheck = false;
  setInterval(function() {
    if (setIntervalCheck) {
      translateModifier.setTransform(Transform.translate(100, 110, 0), {
        duration: 200,
        curve: "easeInOut"
      });
      scaleModifier.setTransform(Transform.scale(2,2,1), {
        duration: 200,
        curve: "easeInOut"
      });
      rotateModifier.setTransform(Transform.rotateZ(Math.PI / 4), {
        duration: 200,
        curve: "easeInOut"
      });
      skewModifier.setTransform(Transform.skew(Math.PI / 6, 0, 0), {
        duration: 200,
        curve: "easeInOut"
      });
      inverseRotate.setTransform(Transform.rotateZ(Math.PI / 8), {
        duration: 200,
        curve: "easeInOut"
      });
      setIntervalCheck = false;
    } else {
      translateModifier.setTransform(Transform.translate(0, 110, 0), {
        duration: 200,
        curve: "easeInOut"
      });
      scaleModifier.setTransform(Transform.scale(1, 1, 1), {
        duration: 200,
        curve: "easeInOut"
      });
      rotateModifier.setTransform(Transform.rotateZ(0), {
        duration: 200,
        curve: "easeInOut"
      });
      skewModifier.setTransform(Transform.skew(0, 0, 0), {
        duration: 200,
        curve: "easeInOut"
      });
      inverseRotate.setTransform(Transform.inverse(Transform.rotateZ(Math.PI / 8)), {
        duration: 200,
        curve: "easeInOut"
      });
      setIntervalCheck = true;
    }
  }, 500);

  mainCtx.add(container);
});
Example #3
0
    function _createElements() {

      var context = this;
      var table = new RenderNode();
      context.elementElements = [];

            var elementNumber = 0;
            var columnNumber = -1;
            var rowNumber = -1;
            var distanceWidth = context.elementWidth + context.elementWidth / 25;
            var distanceHeight = context.elementHeight + context.elementHeight / 25;
            var notElements = [7,8,9,
                                    10,17,18,19,
                                    20,21,22,27,28,29,
                                    30,31,32,37,
                                    40,41,42,47,
                                    50,51,52,57,
                                    60,61,62,67,
                                    70,71,72,77,
                                    80,81,82,87,
                                    90,91,92,97,
                                    100,101,102,107,
                                    110,111,112,117,
                                    120,127,
                                    130,137,
                                    140,147,
                                    150,157,
                                    160,167,
                                    177];
            var elementColors = {
              'none': 'rgba(255, 255, 255, 0.54)',
              'hydrogen': 'rgba(102, 102, 102, 0.54)',
              'alkaliMetal': 'rgba(245, 176, 120, 0.54)',
              'alkaliEarthMetal': 'rgba(241, 245, 120, 0.54)',
              'transitionMetal': 'rgba(242, 118, 118, 0.54)',
              'poorMetals': 'rgba(120, 245, 220, 0.54)',
              'otherNonMetals': 'rgba(132, 245, 120, 0.54)',
              'nobleGases': 'rgba(120, 159, 245, 0.54)',
              'lanthanoids': 'rgba(245, 120, 220, 0.54)',
              'actinoids': 'rgba(195, 120, 245, 0.54)'
            };





      for (var i = 0; i < 180; i++) {

        columnNumber++;

        if (i % 10 == 0) {
          columnNumber = -1;
          columnNumber ++;
          rowNumber++;
        }

        if (notElements.indexOf(i) > -1) {
          //DONT ADD SURFACE
        } else {
          //ADD ELEMENT
          elementNumber = elementNumber ++;
            //*****************ADD ELEMENT FACE*************************//
                  var elementSurface = new Surface({
                    size: [context.elementWidth,context.elementHeight],
                    content: context.options.elementData[elementNumber].abreviation,
                    properties: {
                      lineHeight: context.elementHeight + 'px',
                      textAlign: 'center',
                      //backgroundColor: elementColors[context.options.elementData[elementNumber].type],
                      fontSize: context.elementWidth / 3 + 'px',
                      overflow: 'hidden',
                      color: 'white',
                      fontFamily: 'Roboto, sans-serif',
                      fontWeight: 100
                    }
                  });

                  elementSurface.addClass('periodicElement');

                  var individualRotation = new Modifier();
                  var originalTranslate = Transform.translate((-context.tableWidth/2)+(distanceWidth * rowNumber), (-context.tableHeight/2)+(distanceHeight*columnNumber),0);
                  var positionModifier = new Modifier({
                    align: [0.5,0.5],
                    transform: originalTranslate
                  });
                  var tableConnection = new Modifier({
                    origin: [0.5,0.5],
                  });
                  var flatConnection = new Modifier({
                    origin: [0.5,0.5]
                  });



                  var modifierChain = new ModifierChain();

                  modifierChain.addModifier(individualRotation);
                  modifierChain.addModifier(positionModifier);
                  modifierChain.addModifier(tableConnection);

                  tableConnection.transformFrom(function() {
                      return Transform.multiply(Transform.translate(0,0,context.zTransitionable.get()), Transform.multiply(Transform.rotateY(context.yTransitionable.get()), Transform.rotateX(context.xTransitionable.get())))
                  });


                  flatConnection.transformFrom(function() {
                      return Transform.multiply(Transform.translate(0,0,context.zTransitionable.get()), Transform.multiply(Transform.rotateY(context.yTransitionable.get()), Transform.rotateX(context.xTransitionable.get())))
                  });


            //****************ADD ELEMENT BACK*********************************//



                  // var contentTemplate = function() {
                  //   return "<div>" + context.options.elementData[elementNumber].number + "</div>" +
                  //          "<div>" + context.options.elementData[elementNumber].name + "</div>" +
                  //          "<div>" + context.options.elementData[elementNumber].atomicWeight + "</div>" +
                  //          "<div>" + context.options.elementData[elementNumber].type + "</div>" +
                  //          "<div><img src=\'" + context.options.elementData[elementNumber].icon + "\' alt=\'element diagram\' height=\'75\'></div>";
                  // };

                  var contentTemplate = function() {
                    return  "<div>" + context.options.elementData[elementNumber].number + "</div>" +
                            "<div>" + context.options.elementData[elementNumber].name + "</div>" +
                            "<div>" + context.options.elementData[elementNumber].atomicWeight + "</div>" +
                            "<div>" + context.options.elementData[elementNumber].type + "</div>" +
                            "<div class=\'" + "element" + elementNumber + "\'></div>";
                  }



                  var elementBackSurface = new Surface({
                    size: [context.elementWidth,context.elementHeight],
                    content: contentTemplate(),
                    properties: {
                      textAlign: 'center',
                      lineHeight: context.elementHeight / 8 + 'px',
                      // backgroundColor: elementColors[context.options.elementData[elementNumber].type],
                      color: 'white',
                      fontSize: context.elementWidth / 10 + 'px',
                      overflow: 'hidden',
                      fontFamily: 'Roboto, sans-serif',
                      fontWeight: 100
                    }
                  });

                  elementBackSurface.addClass('periodicElement');

                  var individualBackRotation = new Modifier({
                    transform: Transform.rotateY(Math.PI)
                  });
                  var positionBackModifier = new Modifier({
                      align: [0.5,0.5],
                      transform: originalTranslate
                  });
                  var tableBackConnection = new Modifier({
                    origin: [0.5,0.5]
                  });
                  var flatBackConnection = new Modifier({
                    origin: [0.5,0.5]
                  });

                  var modifierBackChain = new ModifierChain();
                  modifierBackChain.addModifier(individualBackRotation);
                  modifierBackChain.addModifier(positionBackModifier);
                  modifierBackChain.addModifier(tableBackConnection);

                  tableBackConnection.transformFrom(function() {
                      return Transform.multiply(Transform.translate(0,0,context.zTransitionable.get()), Transform.multiply(Transform.rotateY(context.yTransitionable.get()), Transform.rotateX(context.xTransitionable.get())))
                  });

                  flatBackConnection.transformFrom(function() {
                      return Transform.multiply(Transform.translate(0,0,context.zTransitionable.get()), Transform.multiply(Transform.rotateY(context.yTransitionable.get()), Transform.rotateX(context.xTransitionable.get())))
                  });


                  context.elementElements.push({surface:        elementSurface,
                                                original:       originalTranslate,
                                                modifierChain:  modifierChain,
                                                position:       positionModifier,
                                                table:          tableConnection,
                                                flat:           flatConnection,
                                                individual:     individualRotation,
                                                backSurface:    elementBackSurface,
                                                modifierBackChain: modifierBackChain,
                                                individualBack: individualBackRotation,
                                                positionBack:   positionBackModifier,
                                                tableBack:      tableBackConnection,
                                                flatBack:       flatBackConnection});


                  setElementSurfaceListener(context, elementNumber);

                  table.add(modifierChain).add(elementSurface);
                  table.add(modifierBackChain).add(elementBackSurface);

                  elementNumber++


        }

      }

      return table;

    }