This PR implements one way (and the only way I've found) to optionally & dynamically load an item's "full view" display from a file.
The motivation here is to be able to populate the full view for an item with things like embedded Leaflet maps, tables, interactive widgets, and general bespokery, and to do this in a sane, maintainable, and version-controlled way. Without this functionality, we were faced with the possibility of implementing complex full view displays as giant blobs of HTML inside items' fullView fields, which would start out gnarly in the simplest of cases and only get worse after that.
This PR works by taking the item slug from the URL (e.g., querying-daymet-daily-precipitation), converting that into the camel case style used by Vue components (e.g., QueryingDaymetDailyPrecipitation), and then checking to see if a global component with that name exists. If so, the found component is loaded into the full.vue page. If not, and if a fullView HTML field exists for the item, that is loaded into the full.vue page instead. If neither a component file nor fullView field exists for the item, no "Read more" link is displayed.
Dynamically loading components in this way requires that the components live in the global component space, otherwise Vue is not aware that these components exist until it tries (and fails) to load them. Fortunately, all that is required to make Vue components global is to place them in the global component subdirectory.
To test, load the app and observe that there are now two items with "Read more" links:
"Future precipitation map & web services" (full view implemented with fullView field, same as before)
"Querying Daymet daily precipitation data using polygons from the SNAP Data API" (full view implemented with a component file)
Make sure each of the two "Read more" links works as expected. That's it, basically!
This PR implements one way (and the only way I've found) to optionally & dynamically load an item's "full view" display from a file.
The motivation here is to be able to populate the full view for an item with things like embedded Leaflet maps, tables, interactive widgets, and general bespokery, and to do this in a sane, maintainable, and version-controlled way. Without this functionality, we were faced with the possibility of implementing complex full view displays as giant blobs of HTML inside items'
fullViewfields, which would start out gnarly in the simplest of cases and only get worse after that.This PR works by taking the item slug from the URL (e.g.,
querying-daymet-daily-precipitation), converting that into the camel case style used by Vue components (e.g.,QueryingDaymetDailyPrecipitation), and then checking to see if a global component with that name exists. If so, the found component is loaded into thefull.vuepage. If not, and if afullViewHTML field exists for the item, that is loaded into thefull.vuepage instead. If neither a component file norfullViewfield exists for the item, no "Read more" link is displayed.Dynamically loading components in this way requires that the components live in the global component space, otherwise Vue is not aware that these components exist until it tries (and fails) to load them. Fortunately, all that is required to make Vue components global is to place them in the
globalcomponent subdirectory.To test, load the app and observe that there are now two items with "Read more" links:
fullViewfield, same as before)Make sure each of the two "Read more" links works as expected. That's it, basically!