diff --git a/_includes/links.md b/_includes/links.md index c92998a79..89d3273b9 100644 --- a/_includes/links.md +++ b/_includes/links.md @@ -84,6 +84,7 @@ [0560]: {{ site.cookbook_url | absolute_url }}/recipe/0560-resources-on-a-timeline/ "Rendering Resources Sequentially on a Timeline" [0561]: {{ site.cookbook_url | absolute_url }}/recipe/0561-text-on-image/ "Visible Text Resource on a Canvas" +[0599]: {{ site.cookbook_url | absolute_url }}/recipe/0599-drag-and-drop/ "Drag and Drop" [cookbook-process]: {{site.cookbook_url | absolute_url }}/recipe diff --git a/index.md b/index.md index 109708c4b..00cec85ed 100644 --- a/index.md +++ b/index.md @@ -148,7 +148,7 @@ Recipes using [Content State API](https://iiif.io/api/content-state/1.0/) * [Loading a manifest with a viewer using a link][0466] * [Open a specific region of a canvas in a viewer][0485] * [Sharing a link for opening two or more Canvases][0540] - +* [Drag and drop][0599] ## Technical diff --git a/recipe/0599-drag-and-drop/index.md b/recipe/0599-drag-and-drop/index.md new file mode 100644 index 000000000..f020d5c5f --- /dev/null +++ b/recipe/0599-drag-and-drop/index.md @@ -0,0 +1,53 @@ +--- +title: Name of Recipe +id: -1 +layout: recipe +tags: [tbc] +summary: "tbc" +viewers: +topic: + - basic +--- + +## Use Case + +As a person wanting to annotate a IIIF resource, you would like to open a manifest in a viewer not present or available in the web interface where you first find the resource. + +## Implementation Notes + +Implementing this recipe requires a resource provider and a viewer provider each to implement their part. The resource provider must have a draggable item that can have a `dataTransfer.setData` method attached to the item's `dragstart` event and the viewer provider must have an interface capable of handling the data in its `drop` event. + +## Restrictions + +Because implementation is two-part, you may only have control over one half of the ability to drag and drop. Consequently, and since this action is only in a GUI environment, you will need to consider whether visitors to your IIIF interface would benefit from some kind of support text. + +## Example + +Describe the solution in prose and provide an example. +The example json document must be an external document, and imported with the following: + +{% include manifest_links.html viewers="" manifest="manifest.json" %} + +IIIF logo; drag and drop onto a supporting viewer to see this resource in that viewer + + + +## Related Recipes + +Provide a bulleted list of related recipes and why they are relevant. + +{% include acronyms.md %} +{% include links.md %} diff --git a/recipe/0599-drag-and-drop/manifest.json b/recipe/0599-drag-and-drop/manifest.json new file mode 100644 index 000000000..d5cedafeb --- /dev/null +++ b/recipe/0599-drag-and-drop/manifest.json @@ -0,0 +1,54 @@ +{ + "@context": "http://iiif.io/api/presentation/3/context.json", + "id": "{{ id.url }}", + "type": "Manifest", + "label": { "en": [ "Visible Text Annotation" ] }, + "items": [ + { + "id": "{{ id.path }}/canvas", + "type": "Canvas", + "height": 31722, + "width": 70399, + "items": [ + { + "id": "{{ id.path }}/page/p1/1", + "type": "AnnotationPage", + "items": [ + { + "id": "{{ id.path }}/annotation/p0001-image", + "type": "Annotation", + "motivation": "painting", + "body": { + "id": "https://iiif.io/api/image/3.0/example/reference/36ca0a3370db128ec984b33d71a1543d-100320001004/full/max/0/default.jpg", + "type": "Image", + "format": "image/jpeg", + "height": 31722, + "width": 70399, + "service": [ + { + "id": "https://iiif.io/api/image/3.0/example/reference/36ca0a3370db128ec984b33d71a1543d-100320001004", + "profile": "level1", + "type": "ImageService3" + } + ] + }, + "target": "{{ id.path }}/canvas" + }, + { + "id": "{{ id.path }}/annotation/p0001-text", + "type": "Annotation", + "motivation": "painting", + "body": { + "type": "TextualBody", + "format": "text/html", + "value": "

The koto is to the right, carried in a cloth wrapping.

", + "language": "en" + }, + "target": "{{ id.path }}/canvas#xywh=5500,12200,8000,5000" + } + ] + } + ] + } + ] + }