@knight-lab/timelinejs 3.8.15 → 3.8.19

package/website/templates/docs/overriding-styles.html

@@ -1,357 +0,0 @@
-{% extends "base.html" %} {% block content %}
-<article id="product-body">
-    <section class="section-color container">
-        <p class="breadcrumb"><a href="index.html">&#12298; Back to main documentation page</a></p>
-        <h2 class="header-story">Overriding Timeline's Styles</h2>
-        <p>
-            For more technically capable creators, you can override or extend TimelineJS's <abbr title="Cascading Style Sheets">CSS</abbr> to have more control over how your timeline looks. To do this, you must be able to create CSS files and host them
-            at a URL where TimelineJS can find them.
-        </p>
-        <h3 id="typography">Fonts and Typography</h3>
-        <p>
-            The easiest way to change the fonts TimelineJS uses is to select from one of the list in the "Optional settings" section of step 3 of the Timeline authoring tool. However, if none of those font combinations work for you, you can create your own.
-        </p>
-        <p>
-            To create your own, you can <a href="https://cdn.knightlab.com/libs/timeline3/latest/css/fonts/font.abril-droidsans.css">download a model copy</a> of a typical font CSS file from our CDN. You may want to put it through a <a href="http://www.cleancss.com/css-beautify/">CSS formatter before you start to edit it.</a>            If you are familiar with <a href="http://lesscss.org/">LESS</a>, you may prefer to work from <a href="https://github.com/NUKnightLab/TimelineJS3/tree/master/src/less">our LESS files on GitHub</a>. If you set up Timeline as an <a href="https://docs.npmjs.com/cli/v6/commands/npm">`npm`</a>            project, then after you edit those files, you can run <code>npm run dist</code> to compile the LESS into CSS. You'll find your generated font CSS file in the <code>dist/css/fonts</code> directory.</p>
-        <p>
-            Whether you use <code>npm</code> or simply edit a copy of one of the provided font CSS files, it's up to you to put this file on a web server. If you're using the embed code to publish your timeline, then you should change the <code>src</code>            attribute of your <code>iframe</code> so that it has a parameter <code>font</code> with the URL to your font CSS as the value. <a href="https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk&font=Default&lang=en&initial_zoom=2&height=650&font=https://cdn.knightlab.com/libs/timeline3/latest/css/fonts/font.ubuntu.css">This URL</a>            demonstrates setting the font with a URL, albeit in this case a URL to one of our provided font sets.
-        </p>
-        <p>
-            If, instead of the embed, you are directly instantiating the timeline in your page using JavaScript, see <a href="http://timeline.knightlab.com/docs/instantiate-a-timeline.html#custom-fonts">this documentation</a> for more details.
-        </p>
-        <h3>Other CSS presentation</h3>
-        <p>TimelineJS uses the <a href="http://lesscss.org/">Less CSS pre-processor</a> to manage the complex number of elements, variables, and conditions needed to make everything look great. One side effect of how we use <code>Less</code> is that various
-            style rules for TimelineJS are often very specific. Since, in CSS, more specific rules take precedence over less specific ones, you may find it easier to edit Timeline's <code>Less</code> files and compile your own stylesheet than to work
-            out the exact selector which controls style rules.
-        </p>
-        <p>
-            If you want to change more than just typography, the basics are similar. You can create a Timeline CSS file by editing a copy of <a href="http://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">the main CSS file</a>, or by
-            <a href="https://github.com/NUKnightLab/TimelineJS3/"></a>checking out TimelineJS from GitHub</a> and using <code>npm</code> to set up the development environment, and then editing the <a href="https://github.com/NUKnightLab/TimelineJS3/tree/master/src/less">LESS files</a> TimelineJS uses. If
-            you are <a href="http://timeline.knightlab.com/docs/instantiate-a-timeline.html">instantiating the timeline using JavaScript</a>, you may also be able to selectively override CSS with <code>&lt;style&gt;</code> tags in the page.
-        </p>
-
-        <p>
-            Assuming you've created your own CSS file and put it on a web server somewhere, if you are using <code>iframe</code> embeds, you can edit the <code>src</code> of your embed to tell TimelineJS to load your CSS. Add a parameter called <code>theme</code>            and set its value to the URL for your custom CSS. (At one point we considered providing alternative themes with TimelineJS, but we haven't made the time to fully complete and test any.)
-        </p>
-        <p>
-            See below for more details on various CSS classes which TimelineJS uses.
-        </p>
-
-    </section>
-    <section class="section container" id="overriding-styles">
-        <div class="grid">
-            <div class="column-12">
-                <h3>Timeline CSS classes</h3>
-                <p>This table lists the major CSS classes which TimelineJS uses. You may just be able to tweak some of these. However, TimelineJS uses Less for CSS preprocessing, which means that some of the CSS rules are very specific.
-
-                </p>
-                <p><strong><em>Slide options</em></strong> affect the media and text areas of slides.</p>
-                <div class="grid">
-                    <div class="column-2 column-6-phone">
-                        <strong>Class Name</strong>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <strong>Element Type?</strong>
-                    </div>
-                    <div class="column-8">
-                        <strong>Notes</strong>
-                    </div>
-                </div>
-
-                <div class="grid">
-                    <div class="column-2 column-6-phone">
-                        <code>tl-timeline</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        Added to the initial div containing the timeline. Contains entire element.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-slider-container-mask</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        A wrapper around the slides. Background colors or images can be set here.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-slide</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        Each complete set of slide items. May appear in conjunction with <code>.tl-slide-titleslide</code> (for title slides) or <code>.tl-slide-media-only</code> (slides without text).
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-media-content-container</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        Contains the media, its credit, and its caption.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-media-content</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        Contains the media item. Use this to add borders, padding and more.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-credit</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The media item's credit.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-caption</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The media item's caption.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-text</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The slide's text plus padding. Add background color to the text portion of the slide here.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-text-content-container</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The slide's text minus padding.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-headline-date</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>h3</code>
-                    </div>
-                    <div class="column-8">
-                        The date that appears over the slide's headline.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-headline</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>h2</code>
-                    </div>
-                    <div class="column-8">
-                        The slide's headline. Title slides have the additional class <code>.tl-headline-title</code>. Note that you will probably need to use the selector <code>h2.tl-headline</code> to change the appearance of the slide titles.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-text-content</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The text of the slide, in <code>p</code> tags.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-slidenav-next</code>
-                        <br/>or</br>
-                        <code>tl-slidenav-previous</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The navigation and text for moving forward and back. Use in conjunction with the following selectors to render the navigation arrows and text.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-slidenav-icon::before</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        Inserts the navigation arrow. Preface with <code>.tl-slidenav-next</code> or <code>.tl-slidenav-previous</code> to specify which arrow to render.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-slidenav-title</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The title of the next/previous slide. Preface with <code>.tl-slidenav-next</code> or <code>.tl-slidenav-previous</code> to specify which title to render.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-slidenav-description</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The description of the next/previous slide. Appears on hover. Preface with <code>.tl-slidenav-next</code> or <code>.tl-slidenav-previous</code> to specify which description to render.
-                    </div>
-                </div>
-                <p><strong><em>Timenav options</em></strong> affect the portion of the timeline that renders the time series.</p>
-                <div class="grid">
-                    <div class="column-2 column-6-phone">
-                        <strong>Class Name</strong>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <strong>Element Type?</strong>
-                    </div>
-                    <div class="column-8">
-                        <strong>Notes</strong>
-                    </div>
-                </div>
-
-                <div class="grid">
-                    <div class="column-2 column-6-phone">
-                        <code>tl-timenav</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The timeline element. Change the background color here.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-menubar</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The zoom icons.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-timemarker</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        All of the elements that make up the markers (flags and lines) on the timenav. The marker of the current slide also has the class <code>.tl-timemarker-active</code>.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-timemarker-content-container</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The flag of the marker. You can set the flag's background color and text color here. When writing styles for this selector, preface this selector with <code>.tl-timemarker</code> (for slides other than the current slide) or <code>.tl-timemarker.tl-timemarker-active</code>                        (for the current slide).
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-timemarker-timespan</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The width of the marker. This draws the translucent background behind markers if your event has a start and end date. When writing styles for this selector, preface this selector with <code>.tl-timemarker</code> (for slides other
-                        than the current slide) or <code>.tl-timemarker.tl-timemarker-active</code> (for the current slide).
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-timemarker-media-container</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The icon or thumbnail representing the media in the timeline flag.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-headline</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>h2</code>
-                    </div>
-                    <div class="column-8">
-                        The text of the flag. Set color and font family here. Note that this is the same class used for the headline in the main slide body. If you want to change only the headline in the navigation, use <code>.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline</code>.
-                        (Yes, ideally it wouldn't need to be so specific, but for now, it does.)
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-timeaxis</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The ticks representing the timescale.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-timeaxis-background</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The appearance of the background for the tick marks.
-                    </div>
-
-                    <div class="column-2 column-6-phone">
-                        <code>tl-timeaxis-tick:before</code>
-                    </div>
-                    <div class="column-2 column-6-phone">
-                        <code>div</code>
-                    </div>
-                    <div class="column-8">
-                        The line drawing the tick. Set the background color to change the color of the line. Preface with <code>.tl-timeaxis-major</code> to target major ticks or <code>.tl-timeaxis-minor</code> to target minor ticks.
-                    </div>
-                </div>
-
-            </div>
-        </div>
-    </section>
-</article>
-{% endblock %} {% block scripts %}
-<script type="text/javascript">
-    jQuery(document).ready(function() {
-        // make permalinks function for each question
-        jQuery("p[id]").each(function() {
-            jQuery(this).css('cursor', 'pointer');
-            jQuery(this).click(function() {
-                window.location.hash = "#" + this.id;
-            })
-        });
-    });
-</script>
-{% endblock %}

package/website/templates/docs/using-spreadsheets.html

@@ -1,94 +0,0 @@
-{% extends "base.html" %}
-{% block content %}
-<article>
-  <section class="section-color container">
-    <p class="breadcrumb"><a href="index.html">&#12298; Back to main documentation page</a></p>
-    <header>
-      <h2 class="header-story">Making a timeline from a Google Spreadsheet</h2>
-      <p>
-        You can create a simple timeline in a few short minutes using our <a href="https://drive.google.com/previewtemplate?id=1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ&mode=public">Google spreadsheet template</a>, and this quick guide explaining the basic process.  <a href="json-format.html">Experts can use their JSON</a> skills to create custom installations, while keeping TimelineJS3's core look and functionality.
-      </p>
-      <p>
-        For an example of a completed spreadsheet, see  <a href="https://docs.google.com/spreadsheets/u/1/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/pubhtml" target="_blank">the spreadsheet</a> which powers the example on our <a href="/index.html">home page</a>.
-      </p>
-    </header>
-  </section>
-  <section class="product-page container">
-    <div>
-      <h4 id="dates">Working with dates</h4>
-      <p id="start_date">
-        The first four spreadsheet columns (<strong>A-D</strong>) are the date of your timeline entry. You can just enter the year, or you can get down to details such as month, day and even time of an event. You <em>must</em> enter at least the year, except for a 'title' slide. (To enter BCE dates, use a negative year, such as <em>-500</em>)
-      </p>
-      <p id="end_date">
-        You have the option to add end dates (columns <strong>E-H</strong>). Again, you can just enter the year, or you can get as detailed as you like. End dates will cause TimelineJS to display spans of time (a.k.a. eras) in the bottom portion of the timeline. If your event doesn't have an "end date", leave these blank&mdash;you don't need to repeat the start date.
-      </p>
-      <p id="display_date">
-        If you need more flexibility about how dates are shown in a slide, you can use column <strong>I</strong> to specify a "display date," which will override any decisions TimelineJS makes about how to show the date. This can be helpful if the actual date is not known, but you still need to specify some date using one or more of the previous (A-H) columns so that TimelineJS knows how to display it relative to other events. If you use this column, the display date is used on the slide where it is specified, and on labels for the "next" and "previous" buttons which lead to that slide.
-      </p>
-      <h4>Adding text content</h4>
-      <p id="slide_text">
-        Columns <strong>J</strong> and <strong>K</strong> of the spreadsheet contain the headline and the body text that will be displayed on each slide of your timeline. You can use simple HTML in these fields to style your text or to link to other pages on the web. Some HTML may be stripped out or changed as a security precaution.
-      </p>
-      <p>Neither "headline" nor "text" are strictly required, but we recommend including at least a headline, as this is also used in the timeline navigation tool to label the markers.</p>
-      <h4 id="media">Adding media (optional)</h4>
-      <p>
-        TimelineJS can pull in media from a variety of sources and has built-in support for Twitter, Instagram, Flickr, Google Maps, DropBox, DocumentCloud, Wikipedia, SoundCloud, Storify, iframes, major video sites (YouTube, Vimeo, etc.) and more. <a href="media-types.html">Read more about the media types TimelineJS works with.</a>
-      </p>
-      <p>
-        You have the option to add media to your slides in columns <strong>L-O</strong>. Under the <strong>Media</strong> column (<strong>L</strong>) enter the link (URL) to the media you wish to display. TimelineJS supports multiple <a href="media-types.html">media types</a>. In the next column (<strong>M</strong>), you can credit the media's original source, and in column <strong>N</strong> you can include a short caption. As with the text and headline, you may use basic HTML for formatting and linking in the credit and caption (<strong>M</strong> and <strong>N</strong>) columns.
-      </p>
-      <p id="media_markup">
-        If TimelineJS doesn't support the media type you want on your slide, you can often make do by entering <code>&lt;iframe&gt;</code> markup in the <strong>Media</strong> column (<strong>L</strong>) instead of a URL. You can also enter <code>&lt;blockquote&gt;</code> markup in column L.
-      </p>
-      <p id="thumbnail">
-        Markers for slides that contain media show a small icon representing the type of media used. If you'd like, you can show a thumbnail of the media there, instead. Simply add the URL of the image you'd like to use to column <strong>O</strong>.
-      </p>
-      <p id="slide_background">
-        If you like, you can set the background of the slide to a specific color or an image. To do this, enter a <a href="https://www.w3schools.com/cssref/css_colors.asp">CSS hex color</a> value, <a href="http://www.w3schools.com/cssref/css_colors.asp">CSS named color</a>, or the URL to an image in the <strong>Background</strong> column (<strong>R</strong>).
-      </p>
-      <h4 id="title_slides">Titles and Eras</h4>
-      <p>
-        The <strong>Type</strong> column (<strong>P</strong>) can be used to activate a few more specialized features in Timeline. In most cases, you'll leave it blank. Many support questions we get relate to people accidentally filling in the "type" column when they don't intend to use it.
-      </p>
-      <p>
-        If you use the word <code>title</code> in this column, then Timeline will use the row as a "title slide," which is shown before all others, and which does not require a date. Title
-        slides do not appear in the markers in the navigation component of the Timeline. You should only have one row with "title" in the Type column.
-      </p>
-      <p>
-        If you use the word <code>era</code> in this column, then Timeline will use the row to label a span of time in the "axis" area of the timeline navigation component. Eras should have start and end dates (at least the year for each) and a headline. No other cells are relevant to rows with type 'era'.</p>
-        <p>Each era gets
-        a distinct color, which is not currently configurable. At this time, overlapping eras are not well-supported, but we are investigating design strategies for that use case.
-      </p>
-      <h4 id="organizing_slides">Organizing slides</h4>
-      <p>
-        TimelineJS automatically orders slides according to their start date, and always puts the title slide first, no matter how the rows in your spreadsheet are ordered. If you need to have two slides with exactly the same start date, then the row which appears first in the spreadsheet will be shown first in the timeline.
-      </p>
-      <p id="groups">
-        Using the <strong>Group</strong> column (<strong>Q</strong>), you can organize your slides by groups (formerly known as "tags"). You can put any values you want in the Group column. Events with the same group will be put in the same row or adjacent rows, and TimelineJS will use the text from the Group column as a label at the left edge of the row(s) containing those events. The group text will also be displayed on each slide. If you like, you can have a mix of slides in groups and slides with a blank value in the Group column. Creators cannot control the order in which groups are shown in the navigation area: they are listed based on the chronological order in which they are used, except that if there are slides with no group, those are at the bottom after the other groups.
-      </p>
-    </div>
-  </section>
-  <section class="section-color section-color-complement">
-    <div class="container">
-      <h4 id="publishing">Publishing your Timeline</h4>
-      <p>Now that you have your spreadsheet set up, publish it to the web as explained in <a href="/#make-step-2">step 2 of "Make a Timeline"</a>, and follow the rest of the instructions on that page.</p>
-
-    </div>
-  </section>
-</article>
-
-{% endblock %}
-
-{% block scripts %}
-<script type="text/javascript">
-jQuery(document).ready(function() {
-  // make permalinks function for each question
-  jQuery("p[id],h4[id]").each(function(){
-    jQuery(this).css('cursor','pointer');
-    jQuery(this).click(function(){
-      window.location.hash = "#" + this.id;
-    })
-  });
-});
-</script>
-{% endblock %}

package/website/templates/error.html

@@ -1,28 +0,0 @@
-{% extends "base.html" %}
-{% block content %}
-<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
-
-<script type="text/javascript" charset="utf-8">
-	$(document).ready(function() {
-		
-		// Add the missing url to the text
-		$("#url").text(window.location.pathname);
-		
-		// Fix the css locations dynamically
-		$("head link").each(function() {
-			for (var i=0; i<window.location.pathname.split(/\//g).length-2; i++)
-				$(this).attr("href", "../" + $(this).attr("href"));
-		});
-		
-	})
-</script>
-<section id="error" class="background-white">
-	<div class="container">
-		<div class="row">
-			<p class="span12 error">
-				Sorry the page <b id="url"></b> could not be found on this server.
-			</p>
-		</div>
-	</div>
-</section>
-{% endblock %}

package/website/templates/examples/_common_example_embed.html

@@ -1,27 +0,0 @@
-<!-- Demo -->
-<div id="timeline-embed">
-    <div id="timeline"></div>
-</div>
-<!-- build:css //cdn.knightlab.com/libs/timeline3/%(cdn)s/css/timeline.css -->
-<link rel="stylesheet" href="/dist/css/fonts/font.knightlab.css">
-<!-- endbuild -->
-<!-- build:css //cdn.knightlab.com/libs/timeline3/%(cdn)s/css/timeline.css -->
-<link title="timeline-styles" rel="stylesheet" href="/dist/css/timeline.css">
-<!-- endbuild -->
-<!-- build:js //cdn.knightlab.com/libs/timeline3/%(cdn)s/js/timeline-min.js -->
-<script src="/dist/js/timeline.js"></script>
-<!-- endbuild -->
-<script>
-    $(document).ready(function() {
-        var embed = document.getElementById('timeline-embed');
-        embed.style.height = getComputedStyle(document.body).height;
-        window.timeline = new TL.Timeline('timeline-embed', 'timeline3.json', {
-            hash_bookmark: false
-        });
-        window.addEventListener('resize', function() {
-            var embed = document.getElementById('timeline-embed');
-            embed.style.height = getComputedStyle(document.body).height;
-            timeline.updateDisplay();
-        })
-    });
-</script>

package/website/templates/examples/embed-test/index.html

@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html lang="en"><!--
-
-  	88888888888 d8b                        888 d8b                888888   d8888b
-  	    888     Y8P                        888 Y8P                   88b d88P  Y88b
-  	    888                                888                       888 Y88b
-  	    888     888 88888b d88b     d88b   888 888 88888b     d88b   888   Y888b
-  	    888     888 888  888  88b d8P  Y8b 888 888 888  88b d8P  Y8b 888      Y88b
-  	    888     888 888  888  888 88888888 888 888 888  888 88888888 888        888
-  	    888     888 888  888  888 Y8b      888 888 888  888 Y8b      88P Y88b  d88P
-  	    888     888 888  888  888   Y8888  888 888 888  888   Y8888  888   Y8888P
-  	                                                                d88P
-  	                                                              d88P
-  	                                                            888P
-  	 -->
-  <head>
-    <title>Test Timeline embedded with iframe</title>
-    <meta name="description" content="Demonstrating an iframe embed, to verify that it works over HTTPS">
-    <meta charset="utf-8">
-    <meta name="viewport" content="initial-scale=1,width=device-width">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-touch-fullscreen" content="yes">
-    <!-- Style-->
-    <style>
-      html, body {
-      height:100%;
-      padding: 0px;
-      margin: 0px;
-      }
-    </style>
-    <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
-    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-	<link rel="shortcut icon" href="https://cdn.knightlab.com/libs/blueline/latest/assets/logos/favicon.ico">
-  </head>
-  <body>
-  <iframe src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI&font=Default&lang=en&initial_zoom=2&height=650' width='100%' height='650' frameborder='0'></iframe>
-
-      {% include "_analytics.html" %}
-
-  </body>
-</html>