LMS Canvas Rivet Web Bundle

When this library is added to a project it allows access to a bundle of rivet UI components and add-ons:

Library	Directory	Files
Datatables Extensions	datatables-ext	datatables-ally.css datatables-ally.js datatables-filters.js
rivet-clearable-input	rivet-clearable-input	rivet-clearable-input.min.js rivet-clearable-input.min.css
rivet-core	rivet-core	rivet.css rivet.min.css rivet.min.js rivet-esm.js rivet-iife.js rivet-umd.js
rivet-icons	rivet-icons	rivet-icon-element.css rivet-icon-element.js rivet-icons.js rivet-icons.json <icon-name>.js
rivet-stickers	rivet-stickers	rivet-sticker-element.css rivet-sticker-element.js rivet-stickers.js rivet-stickers.json <sticker-name>.js
scrolltotop	scrolltotop	scrolltotop.js

Installation

From Maven

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.

Setup Examples

Add Resource Handler to a Java configuration class

// 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);
   }

}

Ignore jsrivet artifacts in your security setup

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
   @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/jsrivet/**");
    }
}

Link to whatever css and js files you need

<link rel="stylesheet" type="text/css" href="/jsrivet/rivet.min.css" />
<script type="text/javascript" src="/jsrivet/rivet.min.js"></script>

Upgrading from rivet-uits (1.x) to rivet-core (2.x)

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.

Upgrading to 5.2.8.0

With the introduction of the new rivet-stickers (0.3.0) and changes to rivet-icons (3.0.0), we decided to add directories for organizational purposes. Now, each component will be inside their own directory. The table at the top of this README should mention those specific details.

Release Upgrades

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

Scroll to top component

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>

Datatables Extensions

See the README.md in the source for details.