Famo.us - Using 'proportionsFrom' in Modif

Question

Why am I getting voted a minus vote for this?

UPDATE - Solved

Thanks guys for pointing me in the right direction. I actually found using the View to not be as useful as I had hoped. My solution was to use a ContainerSurface.

Please find my solution here: http://jsfiddle.net/pandafinity/qntrau92/

I'm sure there is a lot of code I can cut out but ContainerSurfaces seems to be what I need.

Thanks again :)

---

Hi guys and Happy New Year !!

Has anyone any examples of using the new method 'proportionsFrom' for Famo.us Modifiers? https://famo.us/docs/core/Modifier

Seems a lot easier than calculating widths etc, so wondered if anyone is using it yet as there's nothing on the search engines :)

I wanted to see if it overrides size etc?

Any help would be really appreciated :)

Thanks again.

UPDATE

Here is some quick code. I am trying to call a View that is a certain size (could be a percentage size of the browser). Within this View I want another View that takes up 30% width of the outer View (not the browser window).

JSFiddle Example is here: http://jsfiddle.net/pandafinity/b68zfbyt/

-- Main file

define(function(require, exports, module) {
  'use strict';
  var Engine = require("famous/core/Engine");
  var StateModifier = require('famous/modifiers/StateModifier');
  var TestingWindow = require('app/widgets/TestingWindow');
  var mainContext = Engine.createContext();
  var contextSize = [undefined, undefined];
  var mainView = new TestingWindow();

  mainContext.setPerspective(1000);

  Engine.nextTick(function() {
    contextSize = mainContext.getSize();
    mainContext.add(mainView);
  });
});

The Main View called is 'TestingWindow' :

define(function(require, exports, module) {
  'use strict';

  var Entity = require('famous/core/Entity');
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var StateModifier = require('famous/modifiers/StateModifier');

  var SidePanel = require('app/lib/panels/SidePanel');

  function TestingWidget() {
    View.apply(this, arguments);
    this._id = Entity.register(this);
    this.surface = new Surface({
      content: 'Weegeet',
      properties: {
        border: '1px solid #ccc'
      }
    });

    this._mainModifier = new StateModifier({
      size: [300,500],
      origin: [0.5,0.5],
      align: [0.5,0.5],
    });
    this.sidePanel = new SidePanel();

    // This is the Proportions Bit I am asking about - but it attaches the sidePanel View
    // to the Context not the 'TestingWindow' (it appears)
    this._sidePanelModifier = new StateModifier({
      proportions: [0.3,1]
    });

    this.add(this._mainModifier).add(this.surface);

    this.add(this._sidePanelModifier).add(this.sidePanel);
  }
  TestingWidget.prototype = Object.create(View.prototype);
  TestingWidget.prototype.constructor = TestingWidget;

  module.exports = TestingWidget;
});

The 'SidePanel' View - I am hoping will be 30% width of the 'TestingWindow' View :

define(function(require, exports, module) {
  'use strict';

  var Entity = require('famous/core/Entity');
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var StateModifier = require('famous/modifiers/StateModifier');

  function SidePanel() {
    View.apply(this, arguments);
    this._id = Entity.register(this);
    this.surface = new Surface({
      size: [undefined,undefined],
      properties: {
        backgroundColor: 'red'
      }
    });
    this._mainModifier = new StateModifier({
      opacity: 0.6
    });

    this._add(this._mainModifier).add(this.surface);
  }
  SidePanel.prototype = Object.create(View.prototype);
  SidePanel.prototype.constructor = SidePanel;

  module.exports = SidePanel;
});

Hope this explains a little more about what I am trying to achieve.

Thanks again :)

Answer 1

it works like this:

var mod = new Modifier();

// set size to full-width and 100px height
mod.sizeFrom([undefined, 150]);

// set size to 50% of full-width and 10% of height (15px)
mod.proportionsFrom([0.5, 0.1]);

Answer 2

It does not actually overwrite the size. It changes the size that is rendered based on the size of the original value.

Example jsBin here

The code below will set a random proportion of 1, 2, or 3 when you click on the surface. The surface size is set to be as large as the parent context ([undefined, undefined]) and will size appropriately. The modifier will change it's size proportionately to the original size set.

Example code

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

  var surface = new Surface({ 
    size: [undefined, undefined],
    content: 'Famo.us Application',
    properties: {
      backgroundColor: 'rgba(0, 255, 0, 0.5)'
    }
  });

  var modifier = new Modifier({
    size: [100, 100],
    proportions: [2, 2]
  });

  var proportion = 1;
  function _getProportions() {
    return [proportion, proportion];
  }

  surface.on('click', function(e){
    console.log('clicked ', proportion);
    proportion = Math.floor(Math.random() * (3)) + 1;
    this.setContent('Clicked ' + this.getSize());
  });
  surface.on('resize', function() {
    console.log('changing ', proportion);
    this.setContent('Changed Size ' + this.getSize());
  });

  mainContext.add(modifier).add(surface);

  modifier.proportionsFrom(_getProportions);

[Edit]: To address your edits

Since it is the widget that will size proportionately to the parent. Let us set the proportion within the widget itself so you will not have it applied outside your widget.

Example Changes Here

define('main', function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var StateModifier = require('famous/modifiers/StateModifier');
  var mainContext = Engine.createContext();
  var contextSize = [undefined, undefined];
  var TestingWindow = require('TestingWindow');

  var mainView = new TestingWindow();

  mainContext.setPerspective(1);

  Engine.nextTick(function() {
    contextSize = mainContext.getSize();
    mainContext.add(mainView);
  });
});

define('TestingWindow', function(require, exports, module) {

  var Entity = require('famous/core/Entity');
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var StateModifier = require('famous/modifiers/StateModifier');

  var SidePanel = require('SidePanel');

  function TestingWidget() {
    View.apply(this, arguments);
    this._id = Entity.register(this);
    this.surface = new Surface({
      content: 'Weegeet',
      properties: {
        border: '1px solid #ccc'
      }
    });

    this._mainModifier = new StateModifier({
      size: [300 ,500],
      origin: [0.5 ,0.5],
      align: [0.5 ,0.5],
    });
    this.sidePanel = new SidePanel();

    this._sidePanelModifier = new StateModifier({
      size: [undefined, undefined]
    });

    this._contextNode = this.add(this._mainModifier);
    this._contextNode.add(this.surface);
    this._contextNode.add(this._sidePanelModifier).add(this.sidePanel);
  }
  TestingWidget.prototype = Object.create(View.prototype);
  TestingWidget.prototype.constructor = TestingWidget;

  module.exports = TestingWidget;
});

define('SidePanel',function(require, exports, module) {

  var Entity = require('famous/core/Entity');
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var StateModifier = require('famous/modifiers/StateModifier');

  function SidePanel() {
    View.apply(this, arguments);
    this._id = Entity.register(this);
    this.surface = new Surface({
      size: [undefined,undefined],
      properties: {
        backgroundColor: 'red'
      }
    });
    this._mainModifier = new StateModifier({
      opacity: 0.6,
      proportions: [0.333, 1]
    });

    this._add(this._mainModifier).add(this.surface);
  }
  SidePanel.prototype = Object.create(View.prototype);
  SidePanel.prototype.constructor = SidePanel;

  module.exports = SidePanel;
});