Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
t11r committed Jan 9, 2025
1 parent 4d7cc4c commit b289c4d
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 173 deletions.
100 changes: 2 additions & 98 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

TIFY is a slim and mobile-friendly [IIIF](https://iiif.io/) document viewer built with [Vue.js](https://vuejs.org/). It supports [IIIF Presentation API and Image API](https://iiif.io/api/) version 2 and 3.

Continue reading to learn how to integrate TIFY into your website or application and about its options and API, [check out the website for usage examples](https://tify.rocks/), or [have a look at the user guide](doc/user-guide.en.md).
Continue reading to learn how to integrate TIFY into your website or application and about its options and API, [check out the website for usage examples](https://tify.rocks/), or [have a look at the documentation](doc).

## Embedding TIFY

Expand Down Expand Up @@ -95,103 +95,7 @@ new Tify({

## API

With the exception of `mount` and `destroy`, all API functions are only available after TIFY has been mounted and the manifest has been loaded. Then the `ready` promise is fulfilled. There is no API function to load a new manifest; just replace the instance.

Use the API like this:

``` js
const tify = new Tify({ manifestUrl: 'https://example.org/iiif-manifest.json' })

tify.mount('#tify')

tify.ready.then(() => {
tify.setPage([1, 12, 13])
tify.setView('thumbnails')
tify.viewer.viewport.zoomTo(2)
})
```

- **`destroy`**

Destroys the current instance and removes event listeners. If you are using TIFY in an SPA, this should be called every time a page containing TIFY is unmounted to avoid memory leaks.

No parameters.

- **`mount`**

Mounts TIFY.

Parameters:

- `container`: string or HTMLElement, required

CSS selector pointing to a single HTML node or the node itself into which TIFY is mounted.

- **`resetScan`**

Resets the scan display options.

Parameters:

- `includingFiltersAndRotation`: boolean, default `false`

By default, only pan and zoom are reset. If `true`, image filters and rotation are reset, too.

- **`setPage`**

Changes the active page or pages.

Parameters:

- `pageOrPages`: 1-based integer or array thereof (required)

Provide a number to display a single page or an array of numbers to display multiple pages at once. If the number (or any of the numbers in the array) is smaller than `1` or greater than the number of pages in the document, the command is ignored.

Returns an array of the current pages or `false` if `pageOrPages` is invalid.

- **`setLanguage`**

Changes the frontend language and loads the associated translation. This function returns a Promise.

Parameters:

- `language`: string, default `'en'`

The language to load. A JSON file containing the translations for this language must be present in `public/translations`. Untranslated strings are displayed in English.

- **`setView`**

Changes the active view (panel).

Parameters:

- `name`: string (required)

The view’s name; `'export'`, `'fulltext'`, `'help'`, `'info'`, `'thumbnails'`, `'toc'`, or `null` to display (only) the scan.

- **`toggleDoublePage`**

Switches from single to double page (“book view”) and vice versa.

Parameters:

- `forced`: boolean, default `false`

Double page is forced on (`true`) or off (`false`).

- **`toggleFullscreen`**

Toggles fullscreen mode. For security reasons, most browsers require a user interaction to enter fullscreen mode; a button calling this function via `onclick` works, but trying to do so automatically does probably not.

Parameters:

- `forced`: boolean, default `false`

Fullscreen is forced on (`true`) or off (`false`).

### OpenSeadragon API

The `viewer` object exposes the full [OpenSeadragon API](https://openseadragon.github.io/docs/OpenSeadragon.html). If you want to control the scan view programmatically, the [methods of `viewer.viewport`](https://openseadragon.github.io/docs/OpenSeadragon.Viewport.html) are probably of interest.
TIFY provides an API which allows to control most of its features, see [API documentation](doc/api.md).

## Build Setup

Expand Down
101 changes: 101 additions & 0 deletions doc/api.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
# TIFY API

With the exception of `mount` and `destroy`, all API functions are only available after TIFY has been mounted and the manifest has been loaded. Then the `ready` promise is fulfilled. There is no API function to load a new manifest; just replace the instance.

Use the API like this:

``` js
const tify = new Tify({ manifestUrl: 'https://example.org/iiif-manifest.json' })

tify.mount('#tify')

tify.ready.then(() => {
tify.setPage([1, 12, 13])
tify.setView('thumbnails')
tify.viewer.viewport.zoomTo(2)
})
```

## Functions

- **`destroy`**

Destroys the current instance and removes event listeners. If you are using TIFY in an SPA, this should be called every time a page containing TIFY is unmounted to avoid memory leaks.

No parameters.

- **`mount`**

Mounts TIFY.

Parameters:

- `container`: string or HTMLElement, required

CSS selector pointing to a single HTML node or the node itself into which TIFY is mounted.

- **`resetScan`**

Resets the scan display options.

Parameters:

- `includingFiltersAndRotation`: boolean, default `false`

By default, only pan and zoom are reset. If `true`, image filters and rotation are reset, too.

- **`setPage`**

Changes the active page or pages.

Parameters:

- `pageOrPages`: 1-based integer or array thereof (required)

Provide a number to display a single page or an array of numbers to display multiple pages at once. If the number (or any of the numbers in the array) is smaller than `1` or greater than the number of pages in the document, the command is ignored.

Returns an array of the current pages or `false` if `pageOrPages` is invalid.

- **`setLanguage`**

Changes the frontend language and loads the associated translation. This function returns a Promise.

Parameters:

- `language`: string, default `'en'`

The language to load. A JSON file containing the translations for this language must be present in `public/translations`. Untranslated strings are displayed in English.

- **`setView`**

Changes the active view (panel).

Parameters:

- `name`: string (required)

The view’s name; `'export'`, `'fulltext'`, `'help'`, `'info'`, `'thumbnails'`, `'toc'`, or `null` to display (only) the scan.

- **`toggleDoublePage`**

Switches from single to double page (“book view”) and vice versa.

Parameters:

- `forced`: boolean, default `false`

Double page is forced on (`true`) or off (`false`).

- **`toggleFullscreen`**

Toggles fullscreen mode. For security reasons, most browsers require a user interaction to enter fullscreen mode; a button calling this function via `onclick` works, but trying to do so automatically does probably not.

Parameters:

- `forced`: boolean, default `false`

Fullscreen is forced on (`true`) or off (`false`).

## OpenSeadragon API

The `viewer` object exposes the full [OpenSeadragon API](https://openseadragon.github.io/docs/OpenSeadragon.html). If you want to control the scan view programmatically, the [methods of `viewer.viewport`](https://openseadragon.github.io/docs/OpenSeadragon.Viewport.html) are probably of interest.
3 changes: 3 additions & 0 deletions doc/introduction.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# TIFY Introduction

See [readme](../README.md).
57 changes: 0 additions & 57 deletions doc/user-guide.de.md

This file was deleted.

2 changes: 0 additions & 2 deletions doc/user-guide.en.md → doc/user-guide.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
# TIFY User Guide

## Introduction

TIFY is a slim and mobile-friendly IIIF document viewer, created with performance and usability in mind.

IIIF, which stands for “International Image Interoperability Framework”, defines a set of standardized <acronym title="application programming interface">API</acronym>s for describing and delivering images along with presentational and structural metadata over the web. This allows digitized artworks, books, newspapers, manuscripts, maps, scrolls, and archival materials to be shared between institutions and repositories. Any IIIF-compliant application can consume and display those images and metadata. [Get more information about IIIF.](http://iiif.io/about/)
Expand Down
12 changes: 3 additions & 9 deletions src/components/ViewHelp.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,6 @@ export default {
return 'TIFY is a slim and mobile-friendly IIIF document viewer, released under the'
+ ' <a href="https://www.gnu.org/licenses/agpl-3.0.html.en">GNU Affero General Public License 3.0</a>.';
},
userGuideUrl() {
const lang = this.env.docsLanguages.includes(this.$store.options.language)
? this.$store.options.language
: 'en';
return `${this.env.docsUrl}/user-guide.${lang}.md`;
},
},
};
</script>
Expand All @@ -40,13 +34,13 @@ export default {

<ul class="tify-list">
<li>
<a :href="userGuideUrl">{{ $translate('User guide') }}</a>
<a :href="env.repositoryUrl">{{ $translate('Source code') }}</a>
</li>
<li>
<a :href="env.repositoryUrl">{{ $translate('Source code') }}</a>
<a :href="`${env.blobBaseUrl}/doc`">{{ $translate('Documentation') }}</a>
</li>
<li>
<a :href="env.contributorsUrl">{{ $translate('Contributors') }}</a>
<a :href="`${env.blobBaseUrl}/CONTRIBUTORS.md`">{{ $translate('Contributors') }}</a>
</li>
<li>
<a :href="env.bugsUrl">{{ $translate('Report a bug') }}</a>
Expand Down
10 changes: 3 additions & 7 deletions vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,11 @@ export default defineConfig({
// https://vitejs.dev/config/#environment-variables
define: {
ENV: {
version: pkg.version,
license: pkg.license,
blobBaseUrl: `${pkg.repository.url}/blob/v${pkg.version}`,
bugsUrl: pkg.bugs.url,
contributorsUrl: `${pkg.repository.url}/blob/v${pkg.version}/CONTRIBUTORS.md`,
docsUrl: `${pkg.repository.url}/blob/v${pkg.version}/doc`,
docsLanguages: [
...new Set(readdirSync('./doc').map((file) => file.split('.')[1])),
],
license: pkg.license,
repositoryUrl: pkg.repository.url,
version: pkg.version,
},
},
plugins: [
Expand Down

0 comments on commit b289c4d

Please sign in to comment.