Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at Leaff.it/ I really love famo.us framework and its amazing potential and if you're like me, and you want the web to win, please share some snippet of code for the community and grow faster with us
Categories
Meta
Famo.us Code | Show/Hide nodes with visibility modifier
324
post-template-default,single,single-post,postid-324,single-format-standard,ajax_updown_fade,page_not_loaded,,qode-theme-ver-6.2.1

Show/Hide nodes with visibility modifier

01 Jul Show/Hide nodes with visibility modifier

What if you simply want to show/hide a renderable?

ScrollViews have a clever algorithm to determine which surfaces to render.The RenderController has a clever algorithm that allows for renderables to transition in and out of view…..

For all other uses – no scrolling or transitioning – use this:

var Modifier = require('famous/core/Modifier');
var StateModifier = require('famous/modifiers/StateModifier');

__original_modify = Modifier.prototype.modify;

Modifier.prototype.modify = function extended_modify(target) {
  __original_modify.call(this,target);
  
  // here is the hack: set target to NULL if it should not be visible!
  if(this._visibleGetter) this.visible = this._visibleGetter();
  this._output.target = this.visible === undefined || this.visible? target: null;
  
  return this._output;
};

Modifier.prototype.visibleFrom = function(visible){
    if (visible instanceof Function) this._visibleGetter = visible;
    else if (visible instanceof Object && visible.get) this._visibleGetter = visible.get.bind(visible);
    else {
        this._visibleGetter = null;
        this.visible = visible;
    }
    return this;
};

StateModifier.prototype.setVisible = function(value) {
  this._modifier.visible = value;
};

Now you can use the following methods:

  • Modifier.visibleFrom(function(){ return true // or false; })
  • StateModifier.setVisible(true); // or false;

If you don’t like hacking the Famo.us core, you can use a ShowModifer:

var Transform = require('famous/core/Transform');

function ShowModifier(options) {
  this.visible = !!options.visible;
  this._output = {
    transform: Transform.identity,
    opacity: 1,
    origin: null,
    align: null,
    size: null,
    target: null
  };
}

ShowModifier.prototype.modify = function(target){
  this._output.target = this.visible? target: null;
  return this._output;
};

ShowModifier.prototype.show = function show(){
  this.visible = true;
};

ShowModifier.prototype.hide = function hide() {
  this.visible = false;
};

module.exports = ShowModifier;

EDIT: WARNING Famo.us itself warns for performance pentalties from adding/removing nodes the the render tree. Read the full thread here.