...
In the second approach, we could change the appearance of navigation buttons specific to the plugins in which navigation icons overlap with the content.
...
Approach - 1 : [ By using navigation plugin from content-plugins ]
Navigation plugin can be used modified to achieve the desired fix.
We could design a template for navigation buttons as in the Final design.
Do a
conditional rendering for the new template to avoid overlapping.rendering based on the configuration or event data.
- The event or config should have the details of the position[ eg: top, middle ] to render the template.
Code Block <div ng-show="customNavigationVisible" ng-controller="CustomNavigationCtrl"> <custom-next-navigation></custom-next-navigation> <custom-previous-navigation></custom-previous-navigation> </div>
Pros:
- We can design the template once and use wherever we want by using conditional rendering.
...
- We have to move navigation plugin form content-plugins to player core-plugins in order to use and bundle it.
...
Diagram illustrating the First approach:
Approach - 2 : [ Plugin specific modifications ]
The existing navigate-next and navigate-previous plugin provide some inbuilt events to hide navigation icons.
- After hiding the icons we could attach the navigation buttons, as in the Final design.
- Attach the navigation events [nex and previous ] to the new template buttons.
...
- As this implementation is specific to the renderer plugin, we may need to do the same changes multiple times for different plugins.
Diagram illustrating the Second Approach :
