...
To design the navigation plugin in such a way that, the navigation buttons could be placed at any desired position with some configuration or event.
...
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 :
