Famo.us - Using 'proportionsFrom' in Modifiers

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]);