alter icons that are not published

[superjai]

Hey @skanda-vasishta. I just created a new field in the modal content type to deal with a particular scenario. The scenario is this one. Let's say you have a scene with ten icons on it, but you only have content immediately ready for five of the icons. What would be great would be to hide the icons where content is not ready and, when the content creators are ready, to gradually add in the remaining icons.

How to operationalize this? In the modal content type there is a new field: modal_published, which is a drop down with two potential values: "draft" and "published". Note that in the drop down menu for this field, these two values are capitalized, but what goes in the database is not capitalized.

In desktop/tablet view for a scene, when the scene loads, all clickable elements in the svg should be checked against the wordpress database. If there is no modal entry associated with a particular icon OR if that modal entry has a modal_published value != "published", then that icon should be hidden in the scene. This can be done in the CSS by setting display to none for that particular element. Secondly, the icon should not be listed in the table of contents.

In mobile view, similarly, any icons not to be shown yet should be hidden in the picture of the svg (including when the svg is enlarged). Additionally, those icons should be hidden in the grid view.

[superjai]

Hey @skanda-vasishta, slight change for what to do in scene when an icon has nothing associated with it. When an icon has no modal entry associated with a particular icon OR if that modal entry has a modal_published value != "published", don't hide the icon.

Instead, in desktop view, saturate the icon to roughly 30% (we'll need to play around with the number to figure out the exact percentage that make sense). Here is info on the css saturate function. Nothing should happen to the icon upon mouse click or mouse over.

In tablet view, keep the 30% (or whatever the final percentage is) saturation in the scene for no-association icons. These icons should not have an animated highlight. Nothing should happen to the icon upon mouse over.

In mobile view, keep the 30% (or whatever the final percentage is) saturation in the scene for no-association icons. Omit these icons from the grid.