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 | |
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></version>
</dependency>
You can find the latest version in Maven Central.
Setup Examples
Add Resource Handler to a Java configuration 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.