Giter Club home page Giter Club logo

timelinejs3's Introduction

TimelineJS3

TimelineJS v3: A Storytelling Timeline built in JavaScript. https://timeline.knightlab.com

Overview

TimelineJS is a tool designed to help people with minimal technical skill tell rich, dynamic stories on the web. Most people will create timelines using the official authoring tool and embed their creations using a snip of HTML code offered at the end of that process.

For users of these content management systems (CMSes), there are plugins to facilitate the embedding process:

Getting Started

General users of TimelineJS should consult timeline.knightlab.com for instructions and documentation. Information on GitHub is primarily directed at those who are interested in working with the TimelineJS source code.

The authoritative documentation list is also on the main website, but here are some direct links which may be useful:

Contributing to TimelineJS

Are you trying to contribute to or develop TimelineJS3? Here's where you should start.

API

For users who instantiate a timeline in a page (as opposed to using the iframe embed model), this page roughly documents TimelineJS's JavaScript API, but note that because TimelineJS's primary use case is the embedded iframe, some of these methods have not been thoroughly tested.

Use via ES6 modules/webpack

To use in a project that uses ES6 modules and webpack, import the Timeline class and the CSS as follows

import { Timeline } from '@knight-lab/timelinejs';
import '@knight-lab/timelinejs/dist/css/timeline.css';

timelinejs3's People

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  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

timelinejs3's Issues

Timeline height is too tall

When I placed a timeline within a div with the following style:

timeline {

    position: asbolute;
    left: 0;
    right: 0;
    top: 100px;
    bottom: 0;

}

The timeline ran 100px off the bottom of the page, causing the page to scroll.

Handle 'title' slides appropriately

Right now, the first slide is always marked as the 'title' slide (based on its position, not an explicit 'type'), but also, the setup process doesn't allow for slides which don't have a date.

I wonder if we should make the title slide a separate thing in the JSON, even if it's configuration is similar to other slides, and the markup generation mostly the same.

Title slides in the original Timeline don't show up in the time nav, and they don't require dates. I think that's probably what we want too.

Treating this as a question for now, but we will need to turn it into action items.

clean up compatibility test page

We have a simple page where people can put in their old timeline spreadsheet URLs, and I added something to export the TimelineJS3 JSON. It looks kinda janky. @hbillings can you glitterbomb it pls?

Default text for SlideNav

If a slide has no headline, then the text in the Previous/Next StorySlider controls is not replaced. As you navigate back and forth within a timeline, the text in the control will not match what the previous/next slide actually is, which is confusing. There should probably be some language-dependent default text. Or, maybe allow no text.

Reorganize VCO.Language to make a localization object

Discussed with Zach:

We'll adjust the options that get passed into the Timeline constructor so that, as early as possible, Timeline will install an object in options.language which can be used to get localized messages (date formats, etc). The options will be passed around to all components which need language services. Doing this supports the possible (albeit rare) case that different timelines on one page would have different languages. It also might allow us to handle certain more complicated message formatting issues more flexibly than we do now, by encapsulating the complexity in the language object.

Dedupe major minor ticks

When a minor tick is created that is also created in major then don't create the minor one.

For instance if the minor is years and the major is decade, don't create the minor ones for the decade years.

Major
1900, 1910, 1920

Minor
1901, 1902, 1903, 1904, 1905, 1906, 1907, 1908, 1909, 1911, 1912 etc

Should this be in AxisHelper or should I handle it on the display side?

Missing VCO.Media.Map type

Sample Timeline 0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE has a slide with a Google Map. VCO.MediaType.js has an entry for "googlemaps", which maps to VCO.Media.Map, but VCO.Media.Map.js does not exist.

Sequencing flexibility

In NUKnightLab/TimelineJS#725, someone requested the ability to display markers on the timeline corresponding to, for example, the lifespan of a person, but to sequence the slide based on some time other than that person's birthdate.

This is an understandable request, although it seems kind of complex. Perhaps it can be handled simply with a "sequence_date" property that would override the start_date?

We've also had requests for what amount to "title" cards in the midst of timelines, as sort of chapter markers. This seems a lot harder, because we don't have a paradigm for displaying a marker for them in the timeline.

Update font list and preview

In the "Make a Timeline' section of the website, the list of fonts and corresponding preview does not match the list of fonts in source/less/fonts.

current_id and current_slide out of sync

When using Timeline.goToId() and Timeline.goTo() as API functions, Timeline.current_id and Timeline.current_slide get out of sync. It also seems like this happens when just navigating through the slides normally using the built-in timeline controls.

Markers: raise z-index to top on hover

There may be wrinkles I don't know about, but I think the markers don't look so good when they react to mouseover with a style change but are still behind other markers.

See:
google chrome

Relative Time

Feature for displaying time based on current time.
We could integrate momentjs

DocumentCloud resize

When the timeline resizes, the outer DocumentCloud viewer resizes, but the inner document doesn't.

Google map embed height is too small

By default, the Google map embeds are 191px tall. There's some inheritance weirdness with "height: 100%" going on. I think we might need to programmatically determine the appropriate pixel height and set that on the iframe when we render the map.

Devise spreadsheet format for TimelineJS 3

Current columns:

  • Start Date
  • End Date
  • Headline
  • Text
  • Media
  • Media Credit
  • Media Caption
  • Media Thumbnail
  • Type
  • Tag

Challenges: supporting arbitrary formats in "date" column, including European (where Christmas is 25/12/2014) as well as the fact that values are not technically dates, at least in some cases (year-only or month/year only)

Tags are not implemented yet. (see #33)

Users have recently requested "alt" tags for media via ZenDesk, etc. Should we support them?

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.