Overview

The class Visibility Manager (SK.VisibilityManager) is managing visibility state of the given UI elements based on certain rules. These rules include properties to compare against certain values (match or no match), elements to show/hide. The rules apply on a properties hash (property:'value' pairs).

The configuration hash contains property rules, which is Array of Arrays (the rules). Each rule (Array) contains the following indexes:

  • property name
  • operator (== or !=)
  • values (Array of values to match operator)
  • selector (MooTools.Elements)
  • action ("show", "hide" or "sync" (executes "show" if match, otherwise executes "hide"), default "show")

The highest array index of a rule, the highest priority it has. If the action is "show" or "hide", VisibilityManager will execute it only if there is a match. If it is equal to "sync" - a "show" action is performed if there's a match, otherwise "hide" is executed.

 

Include Resource Files

Please note, the file dependencies might be included in the environment.

  • /Shared/Scripts/visibility_manager.js 
    <script type="text/javascript" src="/Shared/Scripts/visibility_manager.js"></script>

 

Default Options

Name Description Type Default Value
properties Initial set of properties ( {property: 'value'} ). Object null
configuration Groups of UIs which visible state should be changed depending on the properties. Object { rules : [] }

 

Methods

Name Description Parameters Returns
getProperties Returns an object with the properties. - Object (current set of properties)
setProperties Sets new properties to compare. Object (new set of properties) -
refresh Performes property comparison based on the rules in the configuration. As a result, updates elements' visibility state. Object (new set of properties) -

 

Examples

  • Creating new instance of Visibility Manager:
// Dynamically creating Link Manager using the Visibility Manager
​// to show/hide different options for the links
new SK.UI.LinkManager( 'my-link-manager', {
   'class'                        : 'my-link',
   no_link_label            : 'Select your link',
   no_link_option_text  : 'No Link'
   link_types                 : [
      'no_link', 'internal'
   ],
   // visibility properties
   properties : {
      type                   : '_NONE_',
      lightbox_options : 'hide'
   },
   visibility : null, // instance of VisibilityManager
   initVisibilityManager : function () {
      this.visibility = new SK.VisibilityManager({
         properties : this.properties,
         configuration : {
            rules : [
               [ 'type', '!=', [ 'internal' ], $$('.internal-link'), 'hide' ],
               [ 'type', '=', [ 'internal' ], $$('.internal-link'), 'show' ],
               [ 'type', '==', [ 'show' ], $$('.lightbox-options'), 'show' ],
               [ 'type', '==', [ 'hide' ], $$('.lightbox-options'), 'hide' ]
            ]
         }
      });
   }
});