Repository: NUKnightLab/TimelineJS Branch: master Commit: f1f59d304db1 Files: 195 Total size: 22.0 MB Directory structure: gitextract_abbcag5e/ ├── .gitignore ├── .gitmodules ├── CHANGELOG ├── DEVELOPER.md ├── LICENSE ├── README.markdown ├── bower.json ├── config.json ├── examples/ │ ├── README.md │ ├── example_googlespreadsheet.html │ ├── example_jquery_load.html │ ├── example_json.html │ ├── example_json.json │ ├── example_jsonp.html │ ├── example_jsonp.jsonp │ ├── example_storify.html │ ├── model.json │ └── model.jsonp ├── fabfile.py ├── requirements.txt ├── source/ │ ├── embed/ │ │ └── index.html │ ├── gfx/ │ │ ├── timeline-dark.psd │ │ ├── timeline-dark@2x.psd │ │ ├── timeline.psd │ │ └── timeline@2x.psd │ ├── js/ │ │ ├── Core/ │ │ │ ├── .gitignore │ │ │ ├── Core/ │ │ │ │ ├── VMM.Browser.js │ │ │ │ ├── VMM.Core.js │ │ │ │ ├── VMM.Date.js │ │ │ │ ├── VMM.FileExtention.js │ │ │ │ ├── VMM.Library.js │ │ │ │ ├── VMM.LoadLib.js │ │ │ │ ├── VMM.Util.js │ │ │ │ └── VMM.js │ │ │ ├── Embed/ │ │ │ │ ├── Embed.CDN.Generator.js │ │ │ │ ├── Embed.CDN.js │ │ │ │ ├── Embed.LoadLib.js │ │ │ │ └── Embed.js │ │ │ ├── LICENSE │ │ │ ├── Language/ │ │ │ │ ├── VMM.Language.js │ │ │ │ └── locale/ │ │ │ │ ├── af.js │ │ │ │ ├── ar.js │ │ │ │ ├── be.js │ │ │ │ ├── bg.js │ │ │ │ ├── ca.js │ │ │ │ ├── cz.js │ │ │ │ ├── da.js │ │ │ │ ├── de.js │ │ │ │ ├── el.js │ │ │ │ ├── en-24hr.js │ │ │ │ ├── en-week.js │ │ │ │ ├── en.js │ │ │ │ ├── eo.js │ │ │ │ ├── es.js │ │ │ │ ├── et.js │ │ │ │ ├── eu.js │ │ │ │ ├── fa.js │ │ │ │ ├── fi.js │ │ │ │ ├── fo.js │ │ │ │ ├── fr.js │ │ │ │ ├── fy.js │ │ │ │ ├── ga.js │ │ │ │ ├── gl.js │ │ │ │ ├── he.js │ │ │ │ ├── hi.js │ │ │ │ ├── hr.js │ │ │ │ ├── hu.js │ │ │ │ ├── hy.js │ │ │ │ ├── id.js │ │ │ │ ├── is.js │ │ │ │ ├── it.js │ │ │ │ ├── iw.js │ │ │ │ ├── ja.js │ │ │ │ ├── ka.js │ │ │ │ ├── ko.js │ │ │ │ ├── lb.js │ │ │ │ ├── lt.js │ │ │ │ ├── lv.js │ │ │ │ ├── ms.js │ │ │ │ ├── ne.js │ │ │ │ ├── nl.js │ │ │ │ ├── no.js │ │ │ │ ├── pl.js │ │ │ │ ├── pt-br.js │ │ │ │ ├── pt.js │ │ │ │ ├── rm.js │ │ │ │ ├── ro.js │ │ │ │ ├── ru.js │ │ │ │ ├── si.js │ │ │ │ ├── sk.js │ │ │ │ ├── sl.js │ │ │ │ ├── sr-cy.js │ │ │ │ ├── sr.js │ │ │ │ ├── sv.js │ │ │ │ ├── ta.js │ │ │ │ ├── te.js │ │ │ │ ├── th.js │ │ │ │ ├── tl.js │ │ │ │ ├── tr.js │ │ │ │ ├── uk.js │ │ │ │ ├── zh-cn.js │ │ │ │ └── zh-tw.js │ │ │ ├── Library/ │ │ │ │ ├── AES.js │ │ │ │ ├── LazyLoad.js │ │ │ │ ├── Leaflet.js │ │ │ │ ├── bootstrap-tooltip.js │ │ │ │ └── jQuery/ │ │ │ │ └── easing.js │ │ │ ├── Media/ │ │ │ │ ├── VMM.ExternalAPI.js │ │ │ │ ├── VMM.Media.js │ │ │ │ ├── VMM.MediaElement.js │ │ │ │ ├── VMM.MediaType.js │ │ │ │ └── VMM.TextElement.js │ │ │ ├── README.md │ │ │ ├── Slider/ │ │ │ │ ├── VMM.DragSlider.js │ │ │ │ ├── VMM.Slider.Slide.js │ │ │ │ └── VMM.Slider.js │ │ │ └── VMM.StoryJS.js │ │ ├── VMM.Timeline.DataObj.js │ │ ├── VMM.Timeline.Min.js │ │ ├── VMM.Timeline.TimeNav.js │ │ └── VMM.Timeline.js │ └── less/ │ ├── Core/ │ │ ├── .gitignore │ │ ├── Font/ │ │ │ ├── AbrilFatface-Average.less │ │ │ ├── Arvo-PTSans.less │ │ │ ├── Bevan-PotanoSans.less │ │ │ ├── BreeSerif-OpenSans.less │ │ │ ├── DroidSerif-DroidSans.less │ │ │ ├── Georgia-Helvetica.less │ │ │ ├── Lekton-Molengo.less │ │ │ ├── Lora-Istok.less │ │ │ ├── Merriweather-NewsCycle.less │ │ │ ├── NewsCycle-Merriweather.less │ │ │ ├── NixieOne-Ledger.less │ │ │ ├── PT.less │ │ │ ├── PTSerif-PTSans.less │ │ │ ├── Pacifico-Arimo.less │ │ │ ├── PlayfairDisplay-Muli.less │ │ │ ├── PoiretOne-Molengo.less │ │ │ ├── Rancho-Gudea.less │ │ │ └── SansitaOne-Kameron.less │ │ ├── Font.Default.less │ │ ├── GFX.less │ │ ├── LICENSE │ │ ├── Mixins.less │ │ ├── README.md │ │ ├── Reset.less │ │ ├── Typography.less │ │ ├── VMM.Core.less │ │ ├── VMM.Slider.less │ │ ├── VMM.Tooltip.less │ │ └── Variables.less │ ├── Theme/ │ │ └── Dark.less │ ├── VMM.Timeline.TimeNav.less │ └── VMM.Timeline.less ├── tests/ │ ├── test_extra_html.html │ ├── test_extra_html.json │ ├── test_googlespreadsheet.html │ ├── test_googlespreadsheet_bc_era_ages_epoch.html │ ├── test_googlespreadsheet_biblical_ad.html │ ├── test_googlespreadsheet_minutes.html │ ├── test_iframe_640.html │ ├── test_jsonp.html │ ├── test_utc_firefox.html │ └── test_utc_firefox.json └── website/ ├── __init__.py ├── app.py ├── core/ │ ├── __init__.py │ └── settings/ │ ├── __init__.py │ ├── base.py │ └── loc.py ├── static/ │ ├── css/ │ │ └── site.css │ ├── img/ │ │ └── .gitignore │ ├── js/ │ │ ├── .gitignore │ │ ├── main.js │ │ └── story-timeline.js │ └── welcome/ │ └── welcome.json └── templates/ ├── _about.html ├── _demo.html ├── _description.html ├── _developers.html ├── _examples.html ├── _help.html ├── _make.html ├── _overview.html ├── base.html ├── error.html ├── examples/ │ ├── example.json │ ├── houston/ │ │ ├── data.json │ │ └── index.html │ ├── republican/ │ │ └── index.html │ ├── shit-people-say/ │ │ ├── data.json │ │ └── index.html │ └── user-interface/ │ ├── data.json │ └── index.html └── index.html ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ *.DS_Store .DS_Store* dev_examples/ cdn/ compiled *.tmproj *.tmproject tmtags source/gfx/Sprites/ /node_modules *.pyc codekit-config.json build ================================================ FILE: .gitmodules ================================================ ================================================ FILE: CHANGELOG ================================================ 2.35.6 (2015-03-25) ------ Restore original animation/easing (revert pull #681) 2.35.5 (2015-02-26) ------ #672,679,681,683 a series of presentation/performance tweaks from @acdha Fix auto-linking regression 2.35.4 (2015-02-17) ------ Fix Stamen map tile URL bug 2.35.3 (2015-02-17) ------ #673 Update Taiwanese locale #689 Update Thai locale #693 Update Polish locale #705 Frisian localization #722 Support 'youtubeTheme' config option #732 Updated German Translations #733 Move "Swipe to Navigate" to I18N. Now we need translations for 55 languages! #744 Hindi localization #745 Update Icelandic date formats #749 Irish localization #762 Belarusian localization 2.35.2 (2014-11-24) ------ fix half-width bug on small displays 2.35.1 (2014-11-19) ------ #719 whackamole with JS dates 2.35.0 (2014-11-19) ------ #718 Issue with dates in 1970 in GMT/BST time zones 2.34.1 ------ #710 fix regression from #706 re IE https #709 retina image for loading.gif (even though we don't use it) 2.34.0 ------ Remove HTTPS URL rewriting for older IE. don't do analytics on https Check to make sure that every slide has a start date, so that people get a clear warning if the spreadsheet header has been changed. fix jquery version check, again. (should accept jquery 2, although TimelineJS has not been tested with jquery 2) cf. #551 Update ko.js translation file Update fa.js 2.33.1 ------ Fix bug in handling maps.google URLs Update zh-cn localization file. 2.33.0 ------ #638 (WIP) better handle new-format Google Maps URLs #597 parse new-format Google Spreadsheet URLs correctly (no ticket) Support "W" as date format token for "week" based on existing getWeek add on to Date.prototype #632 Accept *.bmp as image URL in media field #631 Add bower file #589 remove unused code that refers to non-existent modules #526 fix jQuery version check so 1.10.x > 1.9.x #529 fix untagify to remove closing tags as well #567 be more permissive about iframe markup #512 fix Dark.css theme even though themes are generally not supported #520 treat Streetview API urls as images, not maps #536 fix typo in README.md #623 set maxheight on soundcloud embeds #624 'crush' pngs #625 deal with nutty MSIE user agent strings 2.32.0 ------ Stop YouTube players when slide changes Better method for determining embed path root Check for iframe and blockquote media before other url tests Add languages: 'hr' (Croatian), 'uk' (Ukrainian) minor fixes to language files for 'fi' (Finnish) 'sl' (Slovenian) 2.31.0 ------ Add languages: 'ro' (Romanian), 'th' (Thai) minor fixes to language files for 'es' (Spanish) 'fa' (Farsi), 'hu' (Hungarian), 'no' (Norwegian) add OpenStreetMap as a map option ('osm') Support '.svg' as an image media type support custom thumbnails when no media is specified clearer warning about "compatibility mode" to IE users. 2.30.0 ------ Fix language code for 'zh-cn' (Chinese) add 'fa' (Farsi) Move 'remove' function from Array.prototype to a util method to avoid adverse affects on other JS code. 2.26.2 ----- * Start a CHANGELOG * Change embed HTML to dynamically set the embed path, to support use over https ================================================ FILE: DEVELOPER.md ================================================ ## Requirements python 2.7.x [virtualenvwrapper](http://virtualenvwrapper.readthedocs.org/) [Node.js](http://nodejs.org) [LESS](http://lesscss.org) # npm install -g less [UglifyJS](https://github.com/mishoo/UglifyJS) # npm install -g uglify-js@">=2.4" ## Setup # Change into the parent directory containing your repositories cd path_to_repos_root # Clone the secrets repository (if necessary) git clone git@github.com:NUKnightLab/secrets.git # Clone KnightLab support repositories (General public, you can skip this step) git clone git@github.com:NUKnightLab/cdn.knightlab.com.git git clone git@github.com:NUKnightLab/fablib.git # Clone the timeline repository (and the submodules) git clone --recursive git@github.com:NUKnightLab/TimelineJS.git # Change into the timeline repository cd TimelineJS # Create a virtual environment mkvirtualenv TimelineJS # Activate the virtual environment workon TimelineJS # Install python requirements pip install -r requirements.txt # Run the development server. fab serve # Re-compile to preview changes. Of course this will need to be in another terminal, or after the fab serve command was put in the # background. It would be great to automate this, but we would like to not add another build system and haven't figured out how to # do it with fabric. Pull requests are welcome! fab build ## Overview Files in the `source` directory are resources for deployment to the CDN. Files in the `website` directory are specific to the website. `config.json` is used to control building, staging, and deployment ## Updating the documentation site Documentation site files are in the `website` directory. To review your edits locally, run `fab serve` to start a local server on [http://localhost:5000](http://localhost:5000). ## Deploying updates to the documentation site (timeline.knightlab.com) To deploy to S3, type `fab deploy`. ## Adding support for a new language * Add the file with the correct ISO-639 language code name in the `source/js/Core/Language/locale` directory. * Update website/templates/_make.html to refer to the new file (remember to sort alphabetically by language name, not code) * create a test timeline using the new language to verify that it basically works * deploy a new version (don't forget to stage_wp) * update knightlab-timeline.php in the TimelineJS-Wordpress-Plugin repo and release that too. ## Deploying javascript changes to the CDN To stage your changes to a versioned directory in your local CDN repository, type `fab stage` You will be prompted for the new version number. After you provide it, this `fab stage` runs a build, copies the files into a versioned directory in your local `cdn.knightlab.com` repository, and tags the last commit with a version number. To stage your changes to the `latest` directory in your local CDN repository, type `fab stage_latest` You will be prompted for which version number you want to stage as the 'latest' version on the CDN. This copies files from the directory with that version in your local `cdn.knightlab.com` respository into the corresponding `latest` directory -- so you will have to have used `fab stage` before this. You must push and deploy all CDN changes separately from that repository. Don't forget to edit the index page there until we work out some automated index building system. ================================================ FILE: LICENSE ================================================ This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. Mozilla Public License Version 2.0 ================================== 1. Definitions -------------- 1.1. "Contributor" means each individual or legal entity that creates, contributes to the creation of, or owns Covered Software. 1.2. "Contributor Version" means the combination of the Contributions of others (if any) used by a Contributor and that particular Contributor's Contribution. 1.3. "Contribution" means Covered Software of a particular Contributor. 1.4. "Covered Software" means Source Code Form to which the initial Contributor has attached the notice in Exhibit A, the Executable Form of such Source Code Form, and Modifications of such Source Code Form, in each case including portions thereof. 1.5. "Incompatible With Secondary Licenses" means (a) that the initial Contributor has attached the notice described in Exhibit B to the Covered Software; or (b) that the Covered Software was made available under the terms of version 1.1 or earlier of the License, but not also under the terms of a Secondary License. 1.6. "Executable Form" means any form of the work other than Source Code Form. 1.7. "Larger Work" means a work that combines Covered Software with other material, in a separate file or files, that is not Covered Software. 1.8. "License" means this document. 1.9. "Licensable" means having the right to grant, to the maximum extent possible, whether at the time of the initial grant or subsequently, any and all of the rights conveyed by this License. 1.10. "Modifications" means any of the following: (a) any file in Source Code Form that results from an addition to, deletion from, or modification of the contents of Covered Software; or (b) any new file in Source Code Form that contains any Covered Software. 1.11. "Patent Claims" of a Contributor means any patent claim(s), including without limitation, method, process, and apparatus claims, in any patent Licensable by such Contributor that would be infringed, but for the grant of the License, by the making, using, selling, offering for sale, having made, import, or transfer of either its Contributions or its Contributor Version. 1.12. "Secondary License" means either the GNU General Public License, Version 2.0, the GNU Lesser General Public License, Version 2.1, the GNU Affero General Public License, Version 3.0, or any later versions of those licenses. 1.13. "Source Code Form" means the form of the work preferred for making modifications. 1.14. "You" (or "Your") means an individual or a legal entity exercising rights under this License. For legal entities, "You" includes any entity that controls, is controlled by, or is under common control with You. For purposes of this definition, "control" means (a) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (b) ownership of more than fifty percent (50%) of the outstanding shares or beneficial ownership of such entity. 2. License Grants and Conditions -------------------------------- 2.1. Grants Each Contributor hereby grants You a world-wide, royalty-free, non-exclusive license: (a) under intellectual property rights (other than patent or trademark) Licensable by such Contributor to use, reproduce, make available, modify, display, perform, distribute, and otherwise exploit its Contributions, either on an unmodified basis, with Modifications, or as part of a Larger Work; and (b) under Patent Claims of such Contributor to make, use, sell, offer for sale, have made, import, and otherwise transfer either its Contributions or its Contributor Version. 2.2. Effective Date The licenses granted in Section 2.1 with respect to any Contribution become effective for each Contribution on the date the Contributor first distributes such Contribution. 2.3. Limitations on Grant Scope The licenses granted in this Section 2 are the only rights granted under this License. No additional rights or licenses will be implied from the distribution or licensing of Covered Software under this License. Notwithstanding Section 2.1(b) above, no patent license is granted by a Contributor: (a) for any code that a Contributor has removed from Covered Software; or (b) for infringements caused by: (i) Your and any other third party's modifications of Covered Software, or (ii) the combination of its Contributions with other software (except as part of its Contributor Version); or (c) under Patent Claims infringed by Covered Software in the absence of its Contributions. This License does not grant any rights in the trademarks, service marks, or logos of any Contributor (except as may be necessary to comply with the notice requirements in Section 3.4). 2.4. Subsequent Licenses No Contributor makes additional grants as a result of Your choice to distribute the Covered Software under a subsequent version of this License (see Section 10.2) or under the terms of a Secondary License (if permitted under the terms of Section 3.3). 2.5. Representation Each Contributor represents that the Contributor believes its Contributions are its original creation(s) or it has sufficient rights to grant the rights to its Contributions conveyed by this License. 2.6. Fair Use This License is not intended to limit any rights You have under applicable copyright doctrines of fair use, fair dealing, or other equivalents. 2.7. Conditions Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in Section 2.1. 3. Responsibilities ------------------- 3.1. Distribution of Source Form All distribution of Covered Software in Source Code Form, including any Modifications that You create or to which You contribute, must be under the terms of this License. You must inform recipients that the Source Code Form of the Covered Software is governed by the terms of this License, and how they can obtain a copy of this License. You may not attempt to alter or restrict the recipients' rights in the Source Code Form. 3.2. Distribution of Executable Form If You distribute Covered Software in Executable Form then: (a) such Covered Software must also be made available in Source Code Form, as described in Section 3.1, and You must inform recipients of the Executable Form how they can obtain a copy of such Source Code Form by reasonable means in a timely manner, at a charge no more than the cost of distribution to the recipient; and (b) You may distribute such Executable Form under the terms of this License, or sublicense it under different terms, provided that the license for the Executable Form does not attempt to limit or alter the recipients' rights in the Source Code Form under this License. 3.3. Distribution of a Larger Work You may create and distribute a Larger Work under terms of Your choice, provided that You also comply with the requirements of this License for the Covered Software. If the Larger Work is a combination of Covered Software with a work governed by one or more Secondary Licenses, and the Covered Software is not Incompatible With Secondary Licenses, this License permits You to additionally distribute such Covered Software under the terms of such Secondary License(s), so that the recipient of the Larger Work may, at their option, further distribute the Covered Software under the terms of either this License or such Secondary License(s). 3.4. Notices You may not remove or alter the substance of any license notices (including copyright notices, patent notices, disclaimers of warranty, or limitations of liability) contained within the Source Code Form of the Covered Software, except that You may alter any license notices to the extent required to remedy known factual inaccuracies. 3.5. Application of Additional Terms You may choose to offer, and to charge a fee for, warranty, support, indemnity or liability obligations to one or more recipients of Covered Software. However, You may do so only on Your own behalf, and not on behalf of any Contributor. You must make it absolutely clear that any such warranty, support, indemnity, or liability obligation is offered by You alone, and You hereby agree to indemnify every Contributor for any liability incurred by such Contributor as a result of warranty, support, indemnity or liability terms You offer. You may include additional disclaimers of warranty and limitations of liability specific to any jurisdiction. 4. Inability to Comply Due to Statute or Regulation --------------------------------------------------- If it is impossible for You to comply with any of the terms of this License with respect to some or all of the Covered Software due to statute, judicial order, or regulation then You must: (a) comply with the terms of this License to the maximum extent possible; and (b) describe the limitations and the code they affect. Such description must be placed in a text file included with all distributions of the Covered Software under this License. Except to the extent prohibited by statute or regulation, such description must be sufficiently detailed for a recipient of ordinary skill to be able to understand it. 5. Termination -------------- 5.1. The rights granted under this License will terminate automatically if You fail to comply with any of its terms. However, if You become compliant, then the rights granted under this License from a particular Contributor are reinstated (a) provisionally, unless and until such Contributor explicitly and finally terminates Your grants, and (b) on an ongoing basis, if such Contributor fails to notify You of the non-compliance by some reasonable means prior to 60 days after You have come back into compliance. Moreover, Your grants from a particular Contributor are reinstated on an ongoing basis if such Contributor notifies You of the non-compliance by some reasonable means, this is the first time You have received notice of non-compliance with this License from such Contributor, and You become compliant prior to 30 days after Your receipt of the notice. 5.2. If You initiate litigation against any entity by asserting a patent infringement claim (excluding declaratory judgment actions, counter-claims, and cross-claims) alleging that a Contributor Version directly or indirectly infringes any patent, then the rights granted to You by any and all Contributors for the Covered Software under Section 2.1 of this License shall terminate. 5.3. In the event of termination under Sections 5.1 or 5.2 above, all end user license agreements (excluding distributors and resellers) which have been validly granted by You or Your distributors under this License prior to termination shall survive termination. ************************************************************************ * * * 6. Disclaimer of Warranty * * ------------------------- * * * * Covered Software is provided under this License on an "as is" * * basis, without warranty of any kind, either expressed, implied, or * * statutory, including, without limitation, warranties that the * * Covered Software is free of defects, merchantable, fit for a * * particular purpose or non-infringing. The entire risk as to the * * quality and performance of the Covered Software is with You. * * Should any Covered Software prove defective in any respect, You * * (not any Contributor) assume the cost of any necessary servicing, * * repair, or correction. This disclaimer of warranty constitutes an * * essential part of this License. No use of any Covered Software is * * authorized under this License except under this disclaimer. * * * ************************************************************************ ************************************************************************ * * * 7. Limitation of Liability * * -------------------------- * * * * Under no circumstances and under no legal theory, whether tort * * (including negligence), contract, or otherwise, shall any * * Contributor, or anyone who distributes Covered Software as * * permitted above, be liable to You for any direct, indirect, * * special, incidental, or consequential damages of any character * * including, without limitation, damages for lost profits, loss of * * goodwill, work stoppage, computer failure or malfunction, or any * * and all other commercial damages or losses, even if such party * * shall have been informed of the possibility of such damages. This * * limitation of liability shall not apply to liability for death or * * personal injury resulting from such party's negligence to the * * extent applicable law prohibits such limitation. Some * * jurisdictions do not allow the exclusion or limitation of * * incidental or consequential damages, so this exclusion and * * limitation may not apply to You. * * * ************************************************************************ 8. Litigation ------------- Any litigation relating to this License may be brought only in the courts of a jurisdiction where the defendant maintains its principal place of business and such litigation shall be governed by laws of that jurisdiction, without reference to its conflict-of-law provisions. Nothing in this Section shall prevent a party's ability to bring cross-claims or counter-claims. 9. Miscellaneous ---------------- This License represents the complete agreement concerning the subject matter hereof. If any provision of this License is held to be unenforceable, such provision shall be reformed only to the extent necessary to make it enforceable. Any law or regulation which provides that the language of a contract shall be construed against the drafter shall not be used to construe this License against a Contributor. 10. Versions of the License --------------------------- 10.1. New Versions Mozilla Foundation is the license steward. Except as provided in Section 10.3, no one other than the license steward has the right to modify or publish new versions of this License. Each version will be given a distinguishing version number. 10.2. Effect of New Versions You may distribute the Covered Software under the terms of the version of the License under which You originally received the Covered Software, or under the terms of any subsequent version published by the license steward. 10.3. Modified Versions If you create software not governed by this License, and you want to create a new license for such software, you may create and use a modified version of this License if you rename the license and remove any references to the name of the license steward (except to note that such modified license differs from this License). 10.4. Distributing Source Code Form that is Incompatible With Secondary Licenses If You choose to distribute Source Code Form that is Incompatible With Secondary Licenses under the terms of this version of the License, the notice described in Exhibit B of this License must be attached. ------------------------------------------- Map tiles by [Stamen Design](http://stamen.com "Stamen Design"), under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0 "CC BY 3.0"). Data by [OpenStreetMap](http://openstreetmap.org "OpenStreetMap"), under [CC BY SA](http://creativecommons.org/licenses/by-sa/3.0 "CC BY SA"). ================================================ FILE: README.markdown ================================================ # This Version of Timeline is no longer under development Therefore, GitHub issues and pull requests have been disabled. Knight Lab has created a new version at https://github.com/NUKnightLab/TimelineJS3 . The new library should work with existing Google Spreadsheets, but not existing TimelineJS JSON files. The new version of TimelineJS requires a new JSON format, and there is no direct conversion tool, although it should not be too complicated to manually or programatically convert an old JSON file. Knight Lab will continue to serve this version of Timeline from * https://cdn.knightlab.com/libs/timeline/latest/js/timeline-min.js * https://cdn.knightlab.com/libs/timeline/latest/js/timeline.js * https://cdn.knightlab.com/libs/timeline/latest/css/timeline.css However, no future development on this line of code is planned. ---- **Table of Contents** - [TimelineJS](#timelinejs) - [Document history with TimelineJS](#document-history-with-timelinejs) - [Add it to your site](#add-it-to-your-site) - [Using Inline (easiest)](#using-inline-easiest) - [Using a method (advanced)](#using-a-method-advanced) - [Loading the files](#loading-the-files) - [Config Options](#config-options) - [Language](#language) - [Start at End](#start-at-end) - [Start at Slide](#start-at-slide) - [Start Zoom Adjust](#start-zoom-adjust) - [Hash Bookmark](#hash-bookmark) - [Debug](#debug) - [Map Style Types](#map-style-types) - [Font Options](#font-options) - [Font Combination Preview:](#font-combination-preview) - [File Formats](#file-formats) - [JSON:](#json) - [JSONP :](#jsonp-) - [Google Docs:](#google-docs) - [Storify:](#storify) - [Media](#media) - [Best practices](#best-practices) - [License](#license) # TimelineJS ## Document history with TimelineJS There are lots of timeline tools on the web but they are almost all either hard on the eyes or hard to use. Create timelines that are at the same time beautiful and intuitive for users TimelineJS is great for pulling in media from different sources. Just throw in a link from Twitter, YouTube, Flickr, Vimeo, Google Maps or SoundCloud and TimelineJS will format it to fit perfectly. More media types will be supported in the future. Creating one is as easy as filling in a Google spreadsheet or as detailed as JSON. ## Add it to your site ### Using Inline (*easiest*) Place the embed code where you want the timeline to show in the `
` of your site. See [Config Options](#config-options) for a full list of what you can set in the config. ```html ``` ### Using a method (*advanced*) You could also initialize a new timeline using the `createStoryJS` method after `storyjs-embed.js` has been loaded ```javascript createStoryJS({ type: 'timeline', width: '800', height: '600', source: 'path_to_json/or_link_to_googlespreadsheet', embed_id: 'my-timeline' // ID of the DIV you want to load the timeline into }); ``` Here's a simple example: ```html ``` ### Loading the files If you like, you may load TimelineJS from the KnightLab's CDN. The examples above demonstrate how to do this using `story-embed.js`, which is the simplest way to set up a Timeline of your own. If for some reason you need more fine-grained control over your timeline, load the javascript and CSS files separately. We recommend that you load them from our CDN. ```html ``` If you need to serve copies of the files from your own server, use the entire contents of the ["/build/" directory](https://github.com/NUKnightLab/TimelineJS/tree/master/build) of our GitHub repository. If you use a local copy of `story-embed.js` it should automatically load the other Timeline resources from your server. ## Config Options Here are some of the options you can set in the config. ### Source `source` Should be either the path to the JSON resource to load, or a JavaScript object corresponding to the Timeline model. Here is an example using a data object: ```javascript var dataObject = {timeline: {headline: "Headline", type: ... }} createStoryJS({ type: 'timeline', width: '800', height: '600', source: dataObject, embed_id: 'my-timeline' }); ``` If source is a string, we will try to automatically recognize resources that are Twitter searches, Google Spreadsheets or Storify stories. Failing that, we assume the source is either JSON or JSONP. If string matches on `.jsonp`, we will treat it as JSONP, otherwise, we will append `?callback=onJSONP_Data`. See more details below. ### Language `lang` Localization *default is `en` English* Languages available: * `af` *Afrikaans* * `ar` *Arabic* * `hy` *Armenian* * `eu` *Basque* * `be` *Belarusian* * `bg` *Bulgarian* * `ca` *Catalan* * `zh-cn` *Chinese* * `hr` *Croatian / Hrvatski* * `cz` *Czech* * `da` *Danish* * `nl` *Dutch* * `en` *English* * `en-24hr` *English (24-hour time)* * `eo` *Esperanto* * `et` *Estonian* * `fo` *Faroese* * `fa` *Farsi* * `fi` *Finnish* * `fr` *French* * `fy` *Frisian* * `gl` *Galician* * `ka` *Georgian* * `de` *German / Deutsch* * `el` *Greek* * `he` *Hebrew* * `hi` *Hindi* * `hu` *Hungarian* * `is` *Icelandic* * `id` *Indonesian* * `ga` *Irish* * `it` *Italian* * `ja` *Japanese* * `ko` *Korean* * `lv` *Latvian* * `lt` *Lithuanian* * `lb` *Luxembourgish* * `ms` *Malay* * `ne` *Nepali* * `no` *Norwegian* * `pl` *Polish* * `pt` *Portuguese* * `pt-br` *Portuguese (Brazilian)* * `ro` *Romanian* * `rm` *Romansh* * `ru` *Russian* * `sr-cy` *Serbian - Cyrillic* * `sr` *Serbian - Latin* * `si` *Sinhalese* * `sk` *Slovak* * `sl` *Slovenian* * `es` *Spanish* * `sv` *Swedish* * `tl` *Tagalog* * `ta` *Tamil* * `zh-tw` *Taiwanese* * `te` *Telugu* * `th` *Thai* * `tr` *Turkish* * `uk` *Ukrainian* Help us add more. Grab a copy of a language file and replace it with your language [Example language file](https://github.com/NUKnightLab/TimelineJS/blob/master/source/js/Core/Language/locale/en.js) and find your language's [two letter code here](http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) ###Start at End `start_at_end` set to true to start the timeline on the last date. *default is false* ###Start at Slide `start_at_slide` You can tell TimelineJS to start at a specific slide number *default is 0* ###Start Zoom Adjust `start_zoom_adjust` This will tweak the default zoom level. Equivalent to pressing the zoom in or zoom out button the specified number of times. Negative numbers zoom out. *default is 0* ###Hash Bookmark `hash_bookmark` set to true to allow bookmarking slides using the hash tag *default is false* ###Debug `debug` Will log events etc to the console. *default is false* ###Map Style Types Due to recent changes to the Google Maps API, you need a [API Key](https://developers.google.com/places/documentation/#Authentication) in order to use custom map types. `gmap_key:` *required in order to use maptype* `maptype:` * [Stamen Maps ](http://maps.stamen.com) * `toner` * `toner-lines` * `toner-labels` * `watercolor` * `sterrain` * Google Maps * `ROADMAP` * `TERRAIN` * `HYBRID` * `SATELLITE` * OpenStreetMap - `osm` ###Font Options `font:` * `AbrilFatface-Average` *Abril Fatface & Average* * `Arvo-PTSans` *Arvo & PT Sans* * `Bevan-PotanoSans` *Bevan & Potano Sans* * `BreeSerif-OpenSans` *Bree Serif & Open Sans* * `DroidSerif-DroidSans` *Droid Serif & Droid Sans* * `Georgia-Helvetica` *Georgia & Helvetica Neue* * `Lekton-Molengo` *Lekton & Molengo* * `Merriweather-NewsCycle` *Merriweather & News Cycle* * `NewsCycle-Merriweather` *News Cycle & Merriweather* * `NixieOne-Ledger` *Nixie One & Ledger* * `Pacifico-Arimo` *Pacifico & Arimo* * `PlayfairDisplay-Muli` *Playfair Display & Muli* * `PoiretOne-Molengo` *Poiret One & Molengo* * `PTSerif-PTSans` *PT Serif & PT Sans* * `PT` *PT Sans & PT Narrow & PT Serif* * `Rancho-Gudea` *Rancho & Gudea* * `SansitaOne-Kameron` *Sansita One & Kameron* * Or make your own ####Font Combination Preview:  ## File Formats ### JSON: JSON is the native data format for TimelineJS. Remember, JSON is picky. A misplaced comma or quotation mark can prevent the timeline from loading properly. Here is the full model: ```javascript { "timeline": { "headline":"The Main Timeline Headline Goes here", "type":"default", "text":"Intro body text goes here, some HTML is ok
", "asset": { "media":"http://yourdomain_or_socialmedialink_goes_here.jpg", "credit":"Credit Name Goes Here", "caption":"Caption text goes here" }, "date": [ { "startDate":"2011,12,10,07,02,10", "endDate":"2011,12,11,08,11", "headline":"Headline Goes Here", "text":"Body text goes here, some HTML is OK
", "tag":"This is Optional", "classname":"optionaluniqueclassnamecanbeaddedhere", "asset": { "media":"http://twitter.com/ArjunaSoriano/status/164181156147900416", "thumbnail":"optional-32x32px.jpg", "credit":"Credit Name Goes Here", "caption":"Caption text goes here" } } ], "era": [ { "startDate":"2011,12,10", "endDate":"2011,12,11", "headline":"Headline Goes Here", "text":"Body text goes here, some HTML is OK
", "tag":"This is Optional" } ] } } ``` ### JSONP : Timeline can use a variation of JSONP to allow you to easily load data across different domains. To allow this to happen, the file must end with the extension `.jsonp` Here is the full model: ```javascript storyjs_jsonp_data = { "timeline": { "headline":"The Main Timeline Headline Goes here", "type":"default", "text":"Intro body text goes here, some HTML is ok
", "asset": { "media":"http://yourdomain_or_socialmedialink_goes_here.jpg", "credit":"Credit Name Goes Here", "caption":"Caption text goes here" }, "date": [ { "startDate":"2011,12,10", "endDate":"2011,12,11", "headline":"Headline Goes Here", "text":"Body text goes here, some HTML is OK
", "tag":"This is Optional", "classname":"optionaluniqueclassnamecanbeaddedhere", "asset": { "media":"http://twitter.com/ArjunaSoriano/status/164181156147900416", "thumbnail":"optional-32x32px.jpg", "credit":"Credit Name Goes Here", "caption":"Caption text goes here" } } ], "era": [ { "startDate":"2011,12,10", "endDate":"2011,12,11", "headline":"Headline Goes Here", "tag":"This is Optional" } ] } } ``` ### Google Docs: If you don’t want to mess with JSON, fire up Google Docs and build your timeline in a spreadsheet. It’s as simple as dropping a date, text, and links into the appropriate columns in TimelineJS’s template. You can find the template here: [TimelineJS Google Spreadsheet Template](https://drive.google.com/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&mode=public&pli=1#) There are only a couple things you need to know in order to create a timeline using Google Docs: 1. Make the spreadsheet public: Google Docs are automatically set to private but the spreadsheet must be public. Click the blue “Share” button on the top right-hand corner. In the “Share settings” window, you’ll see the private setting of the spreadsheet: click “Change...”. In the Visibility options window, choose “Public on the Web” and save. 2. Publish to the Web Under the File menu, select “Publish to the Web.” In the next window, check the box next to “Automatically republish when changes are made.” Uncheck all other boxes. Click “start publishing.” This will give you the URL to embed in your HTML file. 3. Copy/paste the Web URL into your TimelineJS HTML file After you publish the spreadsheet, Google Docs will generate a link to the file. Copy the link for the Web Page option (as opposed to PDF, HTML, XLS, etc.), then paste it into the timeline’s HTML file (see [Add it to your site](#add-it-to-your-site) ) ### Storify: Support for Storify is still in its early stages. It works though. Just paste a link to the storify story as the source. ## Media Included in the zip file is a kitchen sink example. This timeline shows how to incorporate the different media types from different services like Twitter, YouTube, Flickr, Instagram, TwitPic, Wikipedia, Dailymotion, SoundCloud and Vimeo. Just copy and paste the address of the media from the browser bar into the media parameter. TimelineJS will auto-magically pull in the media via their api and format it. ## Best practices Tips and tricks to best utilize TimelineJS 1. Keep it light - don’t get bogged down by text or other elements 2. Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline. 3. Include events that build up to major occurrences, not just the major events. 4. Don't overwhelm the user. A timeline with hundreds of events is probably not the best use of the format. ## License This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. ================================================ FILE: bower.json ================================================ { "name": "TimelineJS", "version": "2.32.0", "homepage": "http://timeline.knightlab.com", "authors": [ "Zach WiseVine Test
", "asset": { "media":"https://vine.co/v/b55LOA1dgJU", "credit":"", "caption":"" } }, { "startDate":"2012,1,26", "endDate":"2012,1,27", "headline":"Sh*t Politicians Say", "text":"In true political fashion, his character rattles off common jargon heard from people running for office.
", "asset": { "media":"http://youtu.be/u4XpeU9erbg", "credit":"", "caption":"" } }, { "startDate":"2012,1,10", "headline":"Sh*t Nobody Says", "text":"Have you ever heard someone say “can I burn a copy of your Nickelback CD?” or “my Bazooka gum still has flavor!” Nobody says that.
", "asset": { "media":"http://youtu.be/f-x8t0JOnVw", "credit":"", "caption":"" } }, { "startDate":"2012,1,26", "headline":"Sh*t Chicagoans Say", "text":"", "asset": { "media":"http://youtu.be/Ofy5gNkKGOo", "credit":"", "caption":"" } }, { "startDate":"2011,12,12", "headline":"Sh*t Girls Say", "text":"", "asset": { "media":"http://youtu.be/u-yLGIH7W9Y", "credit":"", "caption":"Writers & Creators: Kyle Humphrey & Graydon Sheppard" } }, { "startDate":"2012,1,4", "headline":"Sh*t Broke People Say", "text":"", "asset": { "media":"http://youtu.be/zyyalkHjSjo", "credit":"", "caption":"" } }, { "startDate":"2012,1,4", "headline":"Sh*t Silicon Valley Says", "text":"", "asset": { "media":"http://youtu.be/BR8zFANeBGQ", "credit":"", "caption":"written, filmed, and edited by Kate Imbach & Tom Conrad" } }, { "startDate":"2011,12,25", "headline":"Sh*t Vegans Say", "text":"", "asset": { "media":"http://youtu.be/OmWFnd-p0Lw", "credit":"", "caption":"" } }, { "startDate":"2012,1,23", "headline":"Sh*t Graphic Designers Say", "text":"", "asset": { "media":"http://youtu.be/KsT3QTmsN5Q", "credit":"", "caption":"" } }, { "startDate":"2011,12,30", "headline":"Sh*t Wookiees Say", "text":"", "asset": { "media":"http://youtu.be/vJpBCzzcSgA", "credit":"", "caption":"" } }, { "startDate":"2012,1,17", "headline":"Sh*t People Say About Sh*t People Say Videos", "text":"", "asset": { "media":"http://youtu.be/c9ehQ7vO7c0", "credit":"", "caption":"" } }, { "startDate":"2012,1,20", "headline":"Sh*t Social Media Pros Say", "text":"", "asset": { "media":"http://youtu.be/eRQe-BT9g_U", "credit":"", "caption":"" } }, { "startDate":"2012,1,11", "headline":"Sh*t Old People Say About Computers", "text":"", "asset": { "media":"http://youtu.be/HRmc5uuoUzA", "credit":"", "caption":"" } }, { "startDate":"2012,1,11", "headline":"Sh*t College Freshmen Say", "text":"", "asset": { "media":"http://youtu.be/rwozXzo0MZk", "credit":"", "caption":"" } }, { "startDate":"2011,12,16", "headline":"Sh*t Girls Say - Episode 2", "text":"", "asset": { "media":"http://youtu.be/kbovd-e-hRg", "credit":"", "caption":"Writers & Creators: Kyle Humphrey & Graydon Sheppard" } }, { "startDate":"2011,12,24", "headline":"Sh*t Girls Say - Episode 3 Featuring Juliette Lewis", "text":"", "asset": { "media":"http://youtu.be/bDHUhT71JN8", "credit":"", "caption":"Writers & Creators: Kyle Humphrey & Graydon Sheppard" } }, { "startDate":"2012,1,27", "headline":"Sh*t Web Designers Say", "text":"", "asset": { "media":"http://youtu.be/MEOb_meSHhQ", "credit":"", "caption":"" } }, { "startDate":"2012,1,12", "headline":"Sh*t Hipsters Say", "text":"No meme is complete without a bit of hipster-bashing.", "asset": { "media":"http://youtu.be/FUhrSVyu0Kw", "credit":"", "caption":"Written, Directed, Conceptualized and Performed by Carrie Valentine and Jessica Katz" } }, { "startDate":"2012,1,6", "headline":"Sh*t Cats Say", "text":"No meme is complete without cats. This had to happen, obviously.", "asset": { "media":"http://youtu.be/MUX58Vi-YLg", "credit":"", "caption":"" } }, { "startDate":"2012,1,21", "headline":"Sh*t Cyclists Say", "text":"", "asset": { "media":"http://youtu.be/GMCkuqL9IcM", "credit":"", "caption":"Video script, production, and editing by Allen Krughoff of Hardcastle Photography" } }, { "startDate":"2011,12,30", "headline":"Sh*t Yogis Say", "text":"", "asset": { "media":"http://youtu.be/IMC1_RH_b3k", "credit":"", "caption":"" } }, { "startDate":"2012,1,18", "headline":"Sh*t New Yorkers Say", "text":"", "asset": { "media":"http://youtu.be/yRvJylbSg7o", "credit":"", "caption":"Directed and Edited by Matt Mayer, Produced by Seth Keim, Written by Eliot Glazer. Featuring Eliot and Ilana Glazer, who are siblings, not married." } } ] } } ================================================ FILE: examples/example_jsonp.html ================================================In true political fashion, his character rattles off common jargon heard from people running for office.
", "asset": { "media":"http://youtu.be/u4XpeU9erbg", "credit":"", "caption":"" } }, { "startDate":"2012,1,10", "headline":"Sh*t Nobody Says", "text":"Have you ever heard someone say “can I burn a copy of your Nickelback CD?” or “my Bazooka gum still has flavor!” Nobody says that.
", "asset": { "media":"http://youtu.be/f-x8t0JOnVw", "credit":"", "caption":"" } }, { "startDate":"2012,1,26", "headline":"Sh*t Chicagoans Say", "text":"", "asset": { "media":"http://youtu.be/Ofy5gNkKGOo", "credit":"", "caption":"" } }, { "startDate":"2011,12,12", "headline":"Sh*t Girls Say", "text":"", "asset": { "media":"http://youtu.be/u-yLGIH7W9Y", "credit":"", "caption":"Writers & Creators: Kyle Humphrey & Graydon Sheppard" } }, { "startDate":"2012,1,4", "headline":"Sh*t Broke People Say", "text":"", "asset": { "media":"http://youtu.be/zyyalkHjSjo", "credit":"", "caption":"" } }, { "startDate":"2012,1,4", "headline":"Sh*t Silicon Valley Says", "text":"", "asset": { "media":"http://youtu.be/BR8zFANeBGQ", "credit":"", "caption":"written, filmed, and edited by Kate Imbach & Tom Conrad" } }, { "startDate":"2011,12,25", "headline":"Sh*t Vegans Say", "text":"", "asset": { "media":"http://youtu.be/OmWFnd-p0Lw", "credit":"", "caption":"" } }, { "startDate":"2012,1,23", "headline":"Sh*t Graphic Designers Say", "text":"", "asset": { "media":"http://youtu.be/KsT3QTmsN5Q", "credit":"", "caption":"" } }, { "startDate":"2011,12,30", "headline":"Sh*t Wookiees Say", "text":"", "asset": { "media":"http://youtu.be/vJpBCzzcSgA", "credit":"", "caption":"" } }, { "startDate":"2012,1,17", "headline":"Sh*t People Say About Sh*t People Say Videos", "text":"", "asset": { "media":"http://youtu.be/c9ehQ7vO7c0", "credit":"", "caption":"" } }, { "startDate":"2012,1,20", "headline":"Sh*t Social Media Pros Say", "text":"", "asset": { "media":"http://youtu.be/eRQe-BT9g_U", "credit":"", "caption":"" } }, { "startDate":"2012,1,11", "headline":"Sh*t Old People Say About Computers", "text":"", "asset": { "media":"http://youtu.be/HRmc5uuoUzA", "credit":"", "caption":"" } }, { "startDate":"2012,1,11", "headline":"Sh*t College Freshmen Say", "text":"", "asset": { "media":"http://youtu.be/rwozXzo0MZk", "credit":"", "caption":"" } }, { "startDate":"2011,12,16", "headline":"Sh*t Girls Say - Episode 2", "text":"", "asset": { "media":"http://youtu.be/kbovd-e-hRg", "credit":"", "caption":"Writers & Creators: Kyle Humphrey & Graydon Sheppard" } }, { "startDate":"2011,12,24", "headline":"Sh*t Girls Say - Episode 3 Featuring Juliette Lewis", "text":"", "asset": { "media":"http://youtu.be/bDHUhT71JN8", "credit":"", "caption":"Writers & Creators: Kyle Humphrey & Graydon Sheppard" } }, { "startDate":"2012,1,27", "headline":"Sh*t Web Designers Say", "text":"", "asset": { "media":"http://youtu.be/MEOb_meSHhQ", "credit":"", "caption":"" } }, { "startDate":"2012,1,12", "headline":"Sh*t Hipsters Say", "text":"No meme is complete without a bit of hipster-bashing.", "asset": { "media":"http://youtu.be/FUhrSVyu0Kw", "credit":"", "caption":"Written, Directed, Conceptualized and Performed by Carrie Valentine and Jessica Katz" } }, { "startDate":"2012,1,6", "headline":"Sh*t Cats Say", "text":"No meme is complete without cats. This had to happen, obviously.", "asset": { "media":"http://youtu.be/MUX58Vi-YLg", "credit":"", "caption":"" } }, { "startDate":"2012,1,21", "headline":"Sh*t Cyclists Say", "text":"", "asset": { "media":"http://youtu.be/GMCkuqL9IcM", "credit":"", "caption":"Video script, production, and editing by Allen Krughoff of Hardcastle Photography" } }, { "startDate":"2011,12,30", "headline":"Sh*t Yogis Say", "text":"", "asset": { "media":"http://youtu.be/IMC1_RH_b3k", "credit":"", "caption":"" } }, { "startDate":"2012,1,18", "headline":"Sh*t New Yorkers Say", "text":"", "asset": { "media":"http://youtu.be/yRvJylbSg7o", "credit":"", "caption":"Directed and Edited by Matt Mayer, Produced by Seth Keim, Written by Eliot Glazer. Featuring Eliot and Ilana Glazer, who are siblings, not married." } } ] } } ================================================ FILE: examples/example_storify.html ================================================Intro body text goes here, some HTML is ok
", "asset": { "media":"http://yourdomain_or_socialmedialink_goes_here.jpg", "credit":"Credit Name Goes Here", "caption":"Caption text goes here" }, "date": [ { "startDate":"2011,12,10", "endDate":"2011,12,11", "headline":"Headline Goes Here", "text":"Body text goes here, some HTML is OK
", "tag":"This is Optional", "asset": { "media":"http://twitter.com/ArjunaSoriano/status/164181156147900416", "thumbnail":"optional-32x32px.jpg", "credit":"Credit Name Goes Here", "caption":"Caption text goes here" } } ], "era": [ { "startDate":"2011,12,10", "endDate":"2011,12,11", "headline":"Headline Goes Here", "tag":"This is Optional" } ] } } ================================================ FILE: examples/model.jsonp ================================================ storyjs_jsonp_data = { "timeline": { "headline":"The Main Timeline Headline Goes here", "type":"default", "text":"Intro body text goes here, some HTML is ok
", "asset": { "media":"http://yourdomain_or_socialmedialink_goes_here.jpg", "credit":"Credit Name Goes Here", "caption":"Caption text goes here" }, "date": [ { "startDate":"2011,12,10", "endDate":"2011,12,11", "headline":"Headline Goes Here", "text":"Body text goes here, some HTML is OK
", "tag":"This is Optional", "asset": { "media":"http://twitter.com/ArjunaSoriano/status/164181156147900416", "thumbnail":"optional-32x32px.jpg", "credit":"Credit Name Goes Here", "caption":"Caption text goes here" } } ], "era": [ { "startDate":"2011,12,10", "endDate":"2011,12,11", "headline":"Headline Goes Here", "tag":"This is Optional" } ] } } ================================================ FILE: fabfile.py ================================================ from os.path import abspath, basename, dirname, join import sys from fabric.api import env from fabric.decorators import roles, runs_once, task import distutils.core # # Project-specific settings, alter as needed # # env.project_name = basename(dirname(__file__)) env.project_name = 'TimelineJS' # # Add paths # def add_paths(*args): """Make paths are in sys.path.""" for p in args: if p not in sys.path: sys.path.append(p) project_path = dirname(abspath(__file__)) repos_path = dirname(project_path) fablib_path = join(repos_path, 'fablib') add_paths(project_path, repos_path, fablib_path) # # Import from fablib # from fablib import * @task def stage_wp(): """* Use to copy over CSS/JS files to WP Plugin directory""" print("This will copy over the css/js folders from within build to the Wordpress Plugin Directory") if not confirm('Is your TimelineJS-Wordpress-Plugin Directory in the same directory as where TimelineJS is located? (y/n) '): abort('Cancelling') # # Copy over CSS files build_css_dir = "build/css" wp_css_dir = "../TimelineJS-Wordpress-Plugin/css" distutils.dir_util.copy_tree(build_css_dir, wp_css_dir) # # Copy over JS files build_js_dir = "build/js" wp_js_dir = "../TimelineJS-Wordpress-Plugin/js" distutils.dir_util.copy_tree(build_js_dir, wp_js_dir) print("\nRemember to push the updated files in TimelineJS-Wordpress-Plugin as well....") ================================================ FILE: requirements.txt ================================================ Fabric==1.6.1 Flask==0.10.1 Jinja2==2.7 MarkupSafe==0.18 Werkzeug==0.9.3 boto==2.13.3 itsdangerous==0.22 paramiko==1.10.1 ply==3.4 pycrypto==2.6 wsgiref==0.1.2 python-magic==0.4.6 pyOpenSSL==0.15.1 ================================================ FILE: source/embed/index.html ================================================env variable with user agent and feature test
information.
@method getEnv
@private
*/
function getEnv() {
var ua = navigator.userAgent;
env = {
// True if this browser supports disabling async mode on dynamically
// created script nodes. See
// http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order
async: doc.createElement('script').async === true
};
(env.webkit = /AppleWebKit\//.test(ua))
|| (env.ie = /MSIE/.test(ua))
|| (env.opera = /Opera/.test(ua))
|| (env.gecko = /Gecko\//.test(ua))
|| (env.unknown = true);
}
/**
Loads the specified resources, or the next resource of the specified type
in the queue if no resources are specified. If a resource of the specified
type is already being loaded, the new request will be queued until the
first request has been finished.
When an array of resource URLs is specified, those URLs will be loaded in
parallel if it is possible to do so while preserving execution order. All
browsers support parallel loading of CSS, but only Firefox and Opera
support parallel loading of scripts. In other browsers, scripts will be
queued and loaded one at a time to ensure correct execution order.
@method load
@param {String} type resource type ('css' or 'js')
@param {String|Array} urls (optional) URL or array of URLs to load
@param {Function} callback (optional) callback function to execute when the
resource is loaded
@param {Object} obj (optional) object to pass to the callback function
@param {Object} context (optional) if provided, the callback function will
be executed in this object's context
@private
*/
function load(type, urls, callback, obj, context) {
var _finish = function () { finish(type); },
isCSS = type === 'css',
nodes = [],
i, len, node, p, pendingUrls, url;
env || getEnv();
if (urls) {
// If urls is a string, wrap it in an array. Otherwise assume it's an
// array and create a copy of it so modifications won't be made to the
// original.
urls = typeof urls === 'string' ? [urls] : urls.concat();
// Create a request object for each URL. If multiple URLs are specified,
// the callback will only be executed after all URLs have been loaded.
//
// Sadly, Firefox and Opera are the only browsers capable of loading
// scripts in parallel while preserving execution order. In all other
// browsers, scripts must be loaded sequentially.
//
// All browsers respect CSS specificity based on the order of the link
// elements in the DOM, regardless of the order in which the stylesheets
// are actually downloaded.
if (isCSS || env.async || env.gecko || env.opera) {
// Load in parallel.
queue[type].push({
urls : urls,
callback: callback,
obj : obj,
context : context
});
} else {
// Load sequentially.
for (i = 0, len = urls.length; i < len; ++i) {
queue[type].push({
urls : [urls[i]],
callback: i === len - 1 ? callback : null, // callback is only added to the last URL
obj : obj,
context : context
});
}
}
}
// If a previous load request of this type is currently in progress, we'll
// wait our turn. Otherwise, grab the next item in the queue.
if (pending[type] || !(p = pending[type] = queue[type].shift())) {
return;
}
head || (head = doc.head || doc.getElementsByTagName('head')[0]);
pendingUrls = p.urls;
for (i = 0, len = pendingUrls.length; i < len; ++i) {
url = pendingUrls[i];
if (isCSS) {
node = env.gecko ? createNode('style') : createNode('link', {
href: url,
rel : 'stylesheet'
});
} else {
node = createNode('script', {src: url});
node.async = false;
}
node.className = 'lazyload';
node.setAttribute('charset', 'utf-8');
if (env.ie && !isCSS) {
node.onreadystatechange = function () {
if (/loaded|complete/.test(node.readyState)) {
node.onreadystatechange = null;
_finish();
}
};
} else if (isCSS && (env.gecko || env.webkit)) {
// Gecko and WebKit don't support the onload event on link nodes.
if (env.webkit) {
// In WebKit, we can poll for changes to document.styleSheets to
// figure out when stylesheets have loaded.
p.urls[i] = node.href; // resolve relative URLs (or polling won't work)
pollWebKit();
} else {
// In Gecko, we can import the requested URL into a
================================================
FILE: tests/test_extra_html.json
================================================
{
"timeline":
{
"headline":"The Amazon effect",
"type":"default",
"startDate":"2000",
"text":"
Wm. Sugden and Sons Ltd started tailors shop in Cleckheaton
" }, { "asset": { "caption": "", "media": "http://c8226405.myzen.co.uk/wp-content/uploads/2012/09/sewingmachine3.jpg" }, "headline": "1896", "startDate": "1896,9,10,12,06", "text": "Starts making shirts in the shop
" }, { "asset": null, "endDate": "1899,9,10", "headline": "1899", "startDate": "1899,9,10", "text": "Shirt business has out grown the shop so moves into a larger factory at Water Lane Mills
" }, { "asset": null, "endDate": "1904,9,10", "headline": "1904", "startDate": "1904,9,10", "text": "Another factory in Barnsley opens
" }, { "asset": null, "endDate": "1911,9,10", "headline": "1911", "startDate": "1911,9,10", "text": "Opens a factory in Wakefield to make workwear and army uniforms
" }, { "asset": { "caption": "", "media": "http://c8226405.myzen.co.uk/wp-content/uploads/2012/09/green-shirt3.jpg" }, "endDate": "1924,9,10", "headline": "1924", "startDate": "1924,9,10", "text": "Moves to a larger factory in Wakefield as product range expands
" }, { "asset": null, "endDate": "1930,9,10", "headline": "1920-1930", "startDate": "1920,9,10", "text": "Acquire two weaving mills in Lancashire and make over five million shirts
" }, { "asset": null, "endDate": "1950,9,10", "headline": "1950", "startDate": "1950,9,10", "text": "Sets up factory in South Yorkshire to manufacture jeans
" }, { "asset": null, "endDate": "1965,9,10", "headline": "1965", "startDate": "1965,9,10", "text": "A bigger factory is needed to accommodate production
" }, { "asset": null, "endDate": "1968,9,10", "headline": "1968", "startDate": "1968,9,10", "text": "Merger with Donner family and Double Two brand
" }, { "asset": null, "endDate": "1990,9,10", "headline": "1970-1990", "startDate": "1970,9,10", "text": "Reputation for quality grows and Topflight brand of workwear is widely sold
" }, { "asset": null, "endDate": "1990,9,10", "headline": "1990", "startDate": "1990,9,10", "text": "Managed Services concept introduced under Threadneedle brand
" }, { "asset": null, "endDate": "1998,9,10", "headline": "1998", "startDate": "1998,9,10", "text": "John Sugden retires, a new generation of the family takes over
" }, { "asset": null, "endDate": "2012,9,10", "headline": "Present", "startDate": "2012,9,10", "text": "Although the business has been reshaped throughout the years, the business still remains a heritage brand and is still an important part of Wakefieldu2019s history
" } ], "headline": "", "text": "", "type": "default" } } ================================================ FILE: website/__init__.py ================================================ ================================================ FILE: website/app.py ================================================ ''' Main entrypoint file. To run: $ python serve.py ''' from flask import Flask from flask import request from flask import render_template from flask import json from flask import send_from_directory import importlib import traceback import sys import os #if __name__ == "__main__": # Add current directory to sys.path site_dir = os.path.dirname(os.path.abspath(__file__)) if site_dir not in sys.path: sys.path.append(site_dir) # Set default FLASK_SETTINGS_MODULE for debug mode if not os.environ.get('FLASK_SETTINGS_MODULE', ''): os.environ['FLASK_SETTINGS_MODULE'] = 'core.settings.loc' # Import settings module for the inject_static_url context processor. settings_module = os.environ.get('FLASK_SETTINGS_MODULE') try: importlib.import_module(settings_module) except ImportError, e: raise ImportError( "Could not import settings '%s' (Is it on sys.path?): %s" \ % (settings_module, e)) settings = sys.modules[settings_module] app = Flask(__name__) build_dir = os.path.join(settings.PROJECT_ROOT, 'build') source_dir = os.path.join(settings.PROJECT_ROOT, 'source') @app.context_processor def inject_static_url(): """ Inject the variables 'static_url' and 'STATIC_URL' into the templates to avoid hard-coded paths to static files. Grab it from the environment variable STATIC_URL, or use the default. Never has a trailing slash. """ static_url = settings.STATIC_URL or app.static_url_path if static_url.endswith('/'): static_url = static_url.rstrip('/') return dict(static_url=static_url, STATIC_URL=static_url) @app.route('/build/TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.
You're looking at an example of one right now.
Click on the arrow to the right to learn more.
", "asset": { "media":"//2.bp.blogspot.com/-dxJbW0CG8Zs/TmkoMA5-cPI/AAAAAAAAAqw/fQpsz9GpFdo/s1600/voyage-dans-la-lune-1902-02-g.jpg", "credit":"", "caption":"" }, "date": [ { "startDate":"1851", "headline":"It's Easy to Make Your Own Timeline", "text":"The TimelineJS Embed Generator makes it easy to add a timeline to your own site. Just copy our Google Spreadsheet template, add your events as rows in the spreadsheet, and use our generator tool to generate the HTML you need to add to your site.", "asset": { "media":"/static/welcome/step3.png", "credit":"", "caption":"Screenshot from TimelineJS Embed Generator tool (see below)" } }, { "startDate":"1871", "headline":"Illustrate your Timeline with photos, videos, tweets and more.", "text":"Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.", "asset": { "media":"", "credit":"", "caption":"Screenshot from TimelineJS Embed Generator tool (see below)" } }, { "startDate":"1899", "headline":"YouTube video", "text":"To add a YouTube video, just add a link to it in the media field. No embedding necessary. http://youtu.be/lIvftGgps24", "asset": { "media":"http://youtu.be/lIvftGgps24", "credit":"Georges Méliès", "caption":"Le portrait mystérieux" } }, { "startDate":"1902", "headline":"YouTube with no text", "text":"", "asset": { "media":"http://youtu.be/7JDaOOw0MEE", "credit":"Georges Méliès", "caption":"A Trip to the Moon / Le Voyage dans la lune" } }, { "startDate":"1902", "headline":"Wikipedia", "text":"Add a link to a Wikipedia entry in the media field to show an excerpt alongside your text.", "asset": { "media":"http://en.wikipedia.org/wiki/A_Trip_to_the_Moon", "credit":"", "caption":"" } }, { "startDate":"1950,2,7", "headline":"Blockquote", "text":"This is an example of a blockquote.“You have brains in your head. You have feet in your shoes. You can steer yourself in any direction you choose. You're on your own, and you know what you know. And you are the guy who'll decide where to go.”", "credit":"Dr. Seuss", "caption":"" } }, { "startDate":"1960,2,7", "headline":"Website", "text":"This is an example of a website. Just paste a link to the site in the media field.", "asset": { "media":"http://www.w3schools.com/", "credit":"w3schools", "caption":"http://w3schools.com" } }, { "startDate":"1979,1,18", "headline":"Google Map", "text":"Google Maps are easy too. Just add the link to the map in the media field.", "asset": { "media":"http://maps.google.com/maps?hl=en&sll=42.05083,-87.674194&sspn=0.020170947570668576,0.036220713642592585&z=15", "credit":"", "caption":"" } }, { "startDate":"1980,1,18", "headline":"Google Map with no text", "text":"", "asset": { "media":"http://maps.google.com/maps?q=chicago&hl=en&sll=41.874961,-87.619054&sspn=0.159263,0.351906&t=t&hnear=Chicago,+Cook,+Illinois&z=11", "credit":"", "caption":"" } }, { "startDate":"1985,2,7", "headline":"Flickr", "text":"To add a Flickr photo, just paste a link to the photo page in the media field. Example: http://www.flickr.com/photos/zachwise/7074630607/", "asset": { "media":"http://www.flickr.com/photos/zachwise/7074630607/in/photostream/", "credit":"Zach Wise", "caption":"" } }, { "startDate":"1990,2,7", "headline":"Flickr with no text", "text":"", "asset": { "media":"http://www.flickr.com/photos/zachwise/7050589957/in/photostream/", "credit":"Zach Wise", "caption":"March to work." } }, { "startDate":"2001,2,10", "headline":"A Tweet", "text":"To add a tweet, just paste a link to the tweet stats in the media field. Example: http://twitter.com/alykat/status/164184609519697920", "asset": { "media":"http://twitter.com/alykat/status/164184609519697920", "credit":"", "caption":"" } }, { "startDate":"2002,12,10", "headline":"Yet Another Tweet", "asset": { "media":"http://twitter.com/ArjunaSoriano/status/164181156147900416", "credit":"", "caption":"" } }, { "startDate":"2011,8,23", "headline":"Vimeo", "text":"
Just add a link to the video in the media field. Example: https://vimeo.com/33211636
", "asset": { "media":"https://vimeo.com/33211636", "credit":"Denis Chapon", "caption":"" } }, { "startDate":"2012,1,18", "headline":"SoundCloud ", "text":"Just add a link to the track in the media field.", "asset": { "media":"http://soundcloud.com/beastieboys/make-some-noise", "credit":"", "caption":"R.I.P. MCA." } }, { "startDate":"2013,10,01", "headline":"Get started!", "text":"Use the generator form to make your first timeline now.", "asset": { "media":"", "credit":"", "caption":"" } } ] } } ================================================ FILE: website/templates/_about.html ================================================TimelineJS can pull in media from different sources. It has built in support for:
Twitter, Flickr, Google Maps, YouTube, Vimeo, Dailymotion, Wikipedia, SoundCloud and more media types in the future.
Creating one is as easy as filling in a Google spreadsheet or as detailed as JSON.
TimelineJS is an open-source tool that enables anyone to build visually,rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core look and functionality.
It can pull in media from a variety of sources and has built-in support for Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia, SoundCloud and more.
Get updates, tips and news by email. No Spam.
This project is hosted on GitHub, the largest code host in the world. We encourage you to contribute to the project and we value your feedback. You can report bugs and discuss features on the GitHub issues page, or ask a question
This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/.
Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.
Have you made a timeline? Let us know, and we might feature it here.
Have a question? Look for it in the FAQ below. No luck there? Try our community support forum. You may also find some answers in the old Google group archive, although it is no longer an active discussion forum.
All modern browsers are supported as well as Internet Explorer 8 and above.
If you run into problems with IE8, IE9 or IE10 and get a error message saying IE7 is not supported, it may be because you are running the browser in IE7 compatibility mode. Here are directions on how to change the compatibility mode.
The TimelineJS iFrame embed method is compatible with WordPress. Some WordPress installs require users who want to paste code in to the HTML view to have an editor or administrator status — if you’re having trouble, make sure that you have sufficient permissions.
If you don't have the right permissions, try this plugin for Wordpress.
If you’re using the TimelineJS Google spreadsheet template, first make sure the cell you want to modify is set to Plain Text — "Format > Number > Plain Text.” Then simply enter the year (e.g. 1994) or month and year (e.g. 7/1979).
Earlier versions of TimelineJS required you to enter a date as January 1 of a given year to do this, but now you should just enter the full year, as explained above.
TimelineJS works on any site or blog. Make your own in four easy steps. (video tutorial)
Build a new Google Spreadsheet using our template. Drop dates, text and links to media into the appropriate columns. Note: Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.

Under the File menu, select “Publish to the Web.”
In the next window, click the blue "publish" button. When asked, "Are you sure…?" click OK.
Now, copy the URL that appears in the center of the window. You'll use this in the next step.

