Giter Club home page Giter Club logo

mirador's Introduction

⚠️ This project is for Mirador 3, the latest version of Mirador. For Mirador 2, please see ProjectMirador/mirador2 or legacy documentation on the Mirador 2 wiki. Please note that the community's focus is on Mirador 3, and are unlikely to accept pull requests or provide support for Mirador 2.

Mirador

Node.js CI codecov

For Mirador Users

You can quickly use and configure Mirador by remixing the mirador-start Glitch.

We recommend installing Mirador using a JavaScript package manager like npm or yarn.

$ npm install mirador 

# or

$ yarn add mirador

If you are interested in integrating Mirador with plugins into your project, we recommend using webpack or parcel to integrate the es version of the packages. Examples are here:

https://github.com/ProjectMirador/mirador-integration

If you want to simply embed Mirador in an HTML page without further customization, include the Mirador UMD build:

<script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>

More examples of embedding Mirador can be found at https://github.com/ProjectMirador/mirador/wiki/M3-Embedding-in-Another-Environment#in-an-html-document-with-javascript.

Adding translations to Mirador

For help with adding a translation, see src/locales/README.md

Running Mirador locally for development

Mirador local development requires nodejs to be installed.

  1. Run npm install to install the dependencies.

Starting the project

$ npm start

Then navigate to http://127.0.0.1:4444/

Instantiating Mirador

var miradorInstance = Mirador.viewer({
  id: 'mirador' // id selector where Mirador should be instantiated
});

> miradorInstance
{ actions, store }

Example Action

Add a window:

store.dispatch(actions.addWindow());

To focus a window run:

store.dispatch(actions.focusWindow('window-1'))

Check current state

store.getState()

Running the tests

$ npm test # For headless CI=true npm test

or to continually watch the source files

$ npm run test:watch

Linting the project

$ npm run lint

Debugging

Local instance

The following browser extensions are useful for debugging a local development instance of Mirador:

Test suite

To debug the test suite, run:

$ npm run test:debug

then spin up a nodejs inspector client and set some breakpoints. See here for a guide to debugging with Chrome DevTools.

mirador's People

Contributors

aeschylus avatar arthurian avatar azaroth42 avatar camillevilla avatar cbeer avatar charbugs avatar christopher-johnson avatar csbailey5t avatar dicksonlaw583 avatar digitlib avatar gigamorph avatar glefi avatar jazahn avatar jbaiter avatar jcoyne avatar jkeck avatar knagasaki avatar lutzhelm avatar marlo-longley avatar mattmcguirk avatar mejackreed avatar morpheus-87 avatar mrwho avatar phil-plencner-hl avatar radpet avatar regisrob avatar rsinghal avatar sdellis avatar versae avatar wedjaa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mirador's Issues

Add facility to viewer initialisation to add workspaces, delegate widgets.

Widgets are currently stored in an array on the viewer, but they now pertain to workspaces only. Provide a way to add, switch, and activate workspaces on the viewer object and delegate such concerns for widgets to the workspaces of which they are a part.

Perhaps some element of "history" or "all previously opened objects" with a non-widget-specific representation will be useful for the load menu.

Overflow issue in Manifest Panel

The manifest panel list items should adapt the number of visible thumbnails with a media query or javascript to prevent images from popping under the thumbnails.

Break out image loading code into the imagePromise module for re-use.

The logic to handle image loading is currently trapped in the template data function of the manifestsListitem module, but should be broken out into its own object so that it can be used in the other 3 places we will need to lazy-load images and manage their loading state with a placeholder.

Workset Selection Modal Populating Workspace

Implement a basic version of the workset selection modal that populates the with a window. List manifests, allow user to click one, close the modal and populate the workspace slot with a window.

Write the basic workspace.js controller/constructor for workspaces.

The "viewer" now has a child called "workspace", which will store window layouts and work-space level settings, such as lock modes, previously active objects, the widget population of the "free form" or "scratch" space, and so on. All super-widget state is managed by the workspace.js file.

The workspaces directory contains instantiation objects for particular workspaces, including the "single image focus", "book reader", "details view", and "compare view". Workspace.js should provide only the structure and methods needed by all of these variations.

This includes:

  • A model providing an array of open widgets (currently kept under the viewer object)
  • A model of a workspace "slot", with its methods for loading, switching, and splitting.
  • A model for defining the positions and possible transformations of these slots.
  • Methods for registering events with the viewer object (notifying it of changes to open items, layout, which workspace is focused, etc.)
  • Storing undo states?
  • Registering workspace-specific event types (such as the synchronised zoom function for multiple-window layouts).

Work out a consistent "init-bind-update" cycle for the way application components share data and manage their own event-binding and lifecycle.

A crude version of this pattern is implemented in AnnotationLayer.js in Mirador. This is essentially what backbone provides, but we don't need the rest of backbone and backbone presents other complications. The basics of this pattern would be simply removing direct DOM-manipulation code and making sure all our objects have their data abstracted into a model whose fields are exposed only by getter and setter functions that broadcast events to the necessary subscribers. Children or views of controller objects only have their render functions called by the events sent from parents (except in particular appropriate cases).

Keyboard accessibility

From William Straub/HMML:

For example, according to WCAG standards, users should be able to utilize the keyboard (usually Tab key and arrow keys) to get to any of the menu items – mouse only web buttons and gadgets can be difficult or impossible for some users with disabilities to access

Event mixin

Abstract module as a mixin as name.js in utils. Have a Getter and Setter Method, event publication method, model hash whose changes are observed, a way to add events as a hash.

Events as a Hash

 { "eventName" : [functionName], ... }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.