Scaife Widgets

front-end component library for the Scaife Viewer ecosystem

This repository is part of the Scaife Viewer project, an open-source ecosystem for building rich online reading environments.

Citizens

Everything is a component in the Vue sense but we try to distinguish between:

1. Components - stateless, presentation-only components
2. Widgets - stateful, Vuex-backed components
3. Stores - Vuex state stores

Getting Started

$ yarn add @scaife-viewer/scaife-widgets

Import components and widgets like so:

import {
  // components
  HelloWorld,
  Icon,
  Metadata,
  Paginator,
  TextSize,
  TextWidth,
  // widgets
  TextSizeWidget,
  TextWidthWidget,
  PassageAncestorsWidget,
  PassageChildrenWidget,
  PassageReferenceWidget
} from "@scaife-viewer/scaife-widgets";

Import css like so:

<style src='@scaife-viewer/scaife-widgets/dist/scaife-widgets.css'></style>

Import utils like so:

import { URN } from "@scaife-viewer/scaife-widgets";

Import constants like so:

import WIDGETS_NS from "@scaife-viewer/scaife-widgets";

Import and initialize the store like so:

import Vue from "vue";
import Vuex from "vuex";
import App from "./App.vue";
import { scaifeWidgets } from "@scaife-viewer/scaife-widgets";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    [scaifeWidgets.namespace]: scaifeWidgets.store
  }
});

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  store
}).$mount("#app");

See _example/sample for more examples.

TextSizeWidget and TextWidthWidget

The TextSizeWidget and TextWidthWidget widgets must be coupled with a "reader" component along with the appropriate class: text-${textSize} or text-width-${textWidth}, respectively.

Example:

<template>
  <div
    class="reader"
    :class="[`text-${textSize}`, `text-width-${textWidth}`]"
  >
    <!-- reader here -->
  </div>
</template>

Development

Project setup:

$ yarn install

Compile and minify for production:

$ yarn build

Run unit tests:

$ yarn test

Lint:

$ yarn lint

Develop scaife-widgets in parallel with a Scaife Viewer front end:

Within the scaife-widgets repo root directory:

$ yarn link
$ yarn watch

Within the Scaife Viewer front end directory:

$ yarn link "@scaife-viewer/scaife-widgets"
$ yarn serve

The watch script will re-build scaife-widgets when changes are made.

Since the module has been linked via yarn link, the front end's serve script will detect the changes and recompile the front end.

To revert to the canonical scaife-widgets installation within the Scaife Viewer front end:

yarn unlink "scaife-viewer/scaife-widgets"
yarn install --force