Giter Club home page Giter Club logo

neatlinetext's Introduction

NeatlineText is a extension to the Neatline plugin that makes it possible to connect paragraphs, sentences, and words in text documents with annotations in Neatine exhibits.

For example, imagine you're making an interactive edition of Walt Whitman's "Salut au Monde," and want to wire up the locations in this passage with annotations on the map:

I see the tracks of the rail-roads of the earth;
I see them welding State to State, city to city, through North America;
I see them in Great Britain, I see them in Europe;
I see them in Asia and in Africa.

Installation

  1. Download the latest version of the plugin from the Omeka add-ons repository.

  2. Uncompress the .zip archive.

  3. Move the NeatlineText into the /plugins folder in you Omeka installation.

  4. In the Omeka administrative interface, click on Plugins in the top navigation bar and find the listing for "Neatline Widget ~ Text". Click on "Install."

Note: Since NeatlineText is a "sub-plugin" that extends the core functionality of Neatline (itself a plugin), Neatline needs to be installed in order to install NeatlineText.

Usage

Step 1: Create the Neatline records

First, create records in the Neatline exhibit for each of the geographic entities that you want to represent on the map - North America, Great Britain, etc. - and fill in the "Slug" field in the "Text" tab with some sort of semantic, easy-to-remember string:

Slug

Think of the slug as a plain-text, human-readable identifier that can be used to reference the record in other contexts. Like, for instance, attributes in HTML markup! Which brings us to...

Step 2: Create the HTML fragment

Fire up your favorite text editor, copy in the text document, and wrap sections of the text with elements with data-neatline-slug attributes that point at the record slugs:

I see the tracks of the rail-roads of the earth;
I see them welding State to State, city to city, through <span data-neatline-slug="north-america">North America</span>;
I see them in <span data-neatline-slug="great-britain">Great Britain</span>, I see them in <span data-neatline-slug="europe">Europe</span>;
I see them in <span data-neatline-slug="asia">Asia</span> and in <span data-neatline-slug="africa">Africa</span>.

In this case we're using <span> elements, since we're wrapping little inline strings, but you could add the data-neatline-slug attributes to any element at all - <p>'s, <div>'s, etc. The plugin doesn't care - it just queries for the existence of the attribute, not the element type.

Step 3: Copy the HTML into the exhibit

Once the markup is ready, just paste it into the "Narrative" input in the exhibit's edit form. Be sure to put the text editor in "Source" mode, since we're copying in raw HTML markup:

Narrative

And that's it. Now, when you open up the public or fullscreen views of the exhibit, NeatlineText will automatically wire up bi-directional connections between the spans in the text document and the corresponding records in Neatline. Out of the box, the plugin implements two basic interactions:

  • Highlighting: When the user hovers the cursor over a span in the text, any corresponding objects in the Neatline exhibit (shapes on the map, waypoints, etc.) will be highlighted. And vice versa - when the cursor hovers on an object in the exhibit, the span(s) in the text will highlight.

  • Selecting: When the user clicks on a span in the text, the Neatline exhibit will "focus" around the corresponding record in the exhibit - the map will pan and zoom to frame the annotation, the timeline will scroll to show the span, etc. And likewise, when the user selects a record in the Neatline exhibit, the text will automatically scroll to display the corresponding span.

Theming

Unlike other Neatline extensions like Waypoints and SIMILE, NeatlineText needs to be used in conjunction with a theme that positions the text next to the exhibit inside of a scrollable container element. By default, most themes just display the exhibit narrative above or below the exhibit, which means that the user would need to manually scroll up and down on the page to compare the exhibit with the text, which defeats the purpose.

There are two ways to go about this:

  • Omeka themes: To make it easy to get up and running, we've built a really simple started theme called Neatlight, which is specifically designed to house NeatlineText exhibits. Think of Neatlight as the Neatline equivalent of the default "Thanks Roy" theme that ships with Omeka - it's a simple, no-frills foundation that can be easily adapted and expanded.

  • Neatline themes: The other approach is to use Neatline's exhibit-specific themeing system, which makes it possible to create completely separate themes for each individual Neatline exhibit. For more information about this, check out the documentation, and take a look at David McClure's fork of the Neatlight theme, which contains the source code for the custom themes used in projects at neatline.dclure.org.

neatlinetext's People

Contributors

csbailey5t avatar davidmcclure avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

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

neatlinetext's Issues

Annotation doesn't show after clicking on a second span link

Hi,
I've installed up Neatline text as well as NeatlineSIMILE for a class project. When I first click on spanned link, it works fine; however, when I click on a second, it just zooms in to the location and does not display the annotation. I don't know how to resolve this issue---how can I make the second annotation display correctly, as well as subsequent annotations?

I have made it public to show the issue: http://forgivemehome.com/omeka/neatline/show/the-cradle-of-civilized-drinking

Thank you!

Compatibility issue with individual exhibit theme

Hi,

I am using NeatlineText on a customized theme I forked from Neatlight. I am creating an exhibit connecting events and neighborhoods on a map; I want users to be able click on a specific neighborhood in the text area and then have it highlight/zoom on the map itself.

I enabled NeatlineText, and while it works fine, there is a large margin to the right of the map. It also makes the text area much wider.
This is what the exhibit looks like normally, without NeatlineText enabled
screen shot 2016-05-29 at 6 54 46 pm

And this is what it looks like with NeatlineText enabled:
screen shot 2016-05-29 at 6 54 27 pm

Is this an easy fix in CSS? I have been toggling various classes to no avail. (I tried editing the margins in the #Neatline.text class, but it didn't work. I appreciate any help!

Thank you.

mouseover and mouseclick doesn't work on text

Hi,

i updated recently to newest neatlineText version, but the mouseOver e mouseClick on text "links" stopped word. If i change the text-public.js by the old version the things works well.

i don't know if it's the problem is because some modifications on neatline that i made...

Untrack the composer directory?

Hi folks,

Can we untrack the Composer vendor directory? This is just a build artifact, like node_modules, and it's not something that we should include in release distributions (it just installs PHPUnit).

Wanted to check before scrubbing it out, though, in case there's something I'm not thinking of.

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.