When this library is added to a project it allows access to a bundle of rivet UI components and add-ons:
Library | Files |
---|---|
rivet-core |
|
rivet-clearable-input |
|
rivet-collapsible |
|
rivet-icons |
|
rivet-switch |
|
Add the following as a dependency in your pom.xml
<dependency>
<groupId>edu.iu.uits.lms</groupId>
<artifactId>lms-canvas-rivet</artifactId>
<version><!-- latest version --></version>
</dependency>
You can find the latest version in Maven Central.
// example class
@Configuration
@EnableWebMvc
public class ApplicationConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/jsrivet/**").addResourceLocations("classpath:/META-INF/resources/jsrivet/").resourceChain(true);
}
}
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
public void configure(WebSecurity web) throws Exception {
web.ignoring().antMatchers("/jsrivet/**");
}
}
<link rel="stylesheet" type="text/css" href="/jsrivet/rivet.min.css" />
<script type="text/javascript" src="/jsrivet/rivet.min.js"></script>
At the very least, the js/css artifacts are referenced slightly differently:
Old file | New file |
---|---|
rivet-bundle.min.css | rivet.min.css |
rivet-bundle.min.js | rivet.min.js |
Beyond that, consult the specific rivet docs to find out more.
For upgrading the rivet version in this service:
package.json: Change the version of the "rivet-core" and check for the latest tag release for "rivet-icons" at https://github.com/indiana-university/rivet-icons pom.xml: Make sure the SNAPSHOT version matches the rivet-core version to be released
If you want to use the bundled scroll to top component in a tool, you will need the following css, js, and html markup in the tool to make it function. The html assumes the tool will have Rivet 2 and Rivet Icons.
<link rel="stylesheet" type="text/css" th:href="@{/app/jsrivet/rivet.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/app/jsrivet/rivet-icons.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/app/jsrivet/scrolltotop/scrolltotop.css}"/>
<!-- Scroll to top button -->
<button id="scroll-to-top-button" class="rvt-button rvt-button--secondary" onclick="topFunction();" title="Back to top">
<span class="rvt-m-right-xxs">Back to Top</span>
<rvt-icon name="arrow-up"></rvt-icon>
</button>
<script type="text/javascript" th:src="@{/app/jsrivet/rivet.min.js}"></script>
<script defer th:src="@{/app/jsrivet/rivet-icons.js}"></script>
<script type="module" th:src="@{/app/jsrivet/rivet-icon-element.js}"></script>
<script type="text/javascript" th:src="@{/app/jsrivet/scrolltotop/scrolltotop.js}"></script>