Managing View States

A web app may have multiple screens or pages, for example homepage and settings. You may also need to maintain certain displaye states, e.g. hiding individual edit button on a list item when user not in edit mode.

We can build a utility classes that manage these view states for us. The idea is to manage view states entirely by view states mapping in JS.

Utility code: https://github.com/tmpmachine/view-state-util/blob/aa9964ddc901373ec8db5e18c8fef7b038afdded/view-state-util.js.

view-states-map.js

let viewStatesMap = [
  {
    group: 'listResultItem',
    states: [ 
      'queued',
    ],
  },
  {
    group: 'searchBar',
    states: [ 
      'opened',
    ],
  },
];

style.css
css
/* view utils : views initial state */
[data-view-name] { display: none; }

index.html
html
[ data-view-group="screens" data-view-states="main help"
  [section data-view-group="screens" data-view-name="main"
    Main screen
  ]
  [section data-view-group="screens" data-view-name-not="main"
    Settings
  ]
]

index.js
js
viewStateUtil.Init(viewStatesMap); 
viewStateUtil.Add('workspace', ['sidebar']);
viewStateUtil.Remove('workspace', ['sidebar']);

viewStateUtil.RemoveAll('workspace');
viewStateUtil.Set('workspace', ['sidebar']);