diff --git a/.gitignore b/.gitignore
index daf667906..220896166 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,4 +17,4 @@ build/website
build
*.log
dist
-.vscode
+.vscode
\ No newline at end of file
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 000000000..1119b3747
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,7 @@
+deploy_staging:
+ only:
+ - staging
+ script:
+ - yarn
+ - yarn run build
+ - rsync -a --del ./dist/* /app/timeline
diff --git a/API.md b/API.md
old mode 100644
new mode 100755
diff --git a/API_TEST.html b/API_TEST.html
old mode 100644
new mode 100755
diff --git a/AUTHORS b/AUTHORS
old mode 100644
new mode 100755
diff --git a/CHANGELOG.md b/CHANGELOG.md
old mode 100644
new mode 100755
index d5193491a..cb5955a57
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,3 @@
-3.9.1 (2022-11-29)
--------------------------
-* Adapted to a change in Google Drive sharing links which caused TimelineJS to no longer select the correct media type.
-* Fix rare date formatting issues
-* #803 support m.youtube.com URLs same as other YouTube URLs
-
3.9.0 (2022-10-07)
-------------------------
* A bounty of accessibility improvements contributed by @OleksandrDanylchenko: #744, #747, #749, #750, #756, #758, #760, #764, #766, #768, #770, #783, #786, #787 and one from @madhaze #789
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
old mode 100644
new mode 100755
diff --git a/DEPLOYING.md b/DEPLOYING.md
old mode 100644
new mode 100755
diff --git a/Documentation_Technique_Timeline_2024.pdf b/Documentation_Technique_Timeline_2024.pdf
new file mode 100755
index 000000000..bcdd4ba3f
Binary files /dev/null and b/Documentation_Technique_Timeline_2024.pdf differ
diff --git a/Documentation_Utilisateur_Timeline_2024.pdf b/Documentation_Utilisateur_Timeline_2024.pdf
new file mode 100755
index 000000000..c5dff7d88
Binary files /dev/null and b/Documentation_Utilisateur_Timeline_2024.pdf differ
diff --git a/LICENSE b/LICENSE
old mode 100644
new mode 100755
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/RELEASING.md b/RELEASING.md
old mode 100644
new mode 100755
diff --git a/babel.config.js b/babel.config.js
old mode 100644
new mode 100755
diff --git a/banner.tmpl b/banner.tmpl
old mode 100644
new mode 100755
diff --git a/config.json b/config.json
old mode 100644
new mode 100755
diff --git a/contrib/README.md b/contrib/README.md
old mode 100644
new mode 100755
diff --git a/contrib/csv_to_json.py b/contrib/csv_to_json.py
old mode 100644
new mode 100755
diff --git a/contrib/docs/ImageHosting.md b/contrib/docs/ImageHosting.md
old mode 100644
new mode 100755
diff --git a/contrib/examples/autoload.html b/contrib/examples/autoload.html
old mode 100644
new mode 100755
diff --git a/contrib/examples/iBooksAuthor/README.md b/contrib/examples/iBooksAuthor/README.md
old mode 100644
new mode 100755
diff --git a/contrib/examples/iBooksAuthor/TimelineJS.wdgt/Default.png b/contrib/examples/iBooksAuthor/TimelineJS.wdgt/Default.png
old mode 100644
new mode 100755
diff --git a/contrib/examples/iBooksAuthor/TimelineJS.wdgt/Info.plist b/contrib/examples/iBooksAuthor/TimelineJS.wdgt/Info.plist
old mode 100644
new mode 100755
diff --git a/contrib/examples/iBooksAuthor/TimelineJS.wdgt/index.html b/contrib/examples/iBooksAuthor/TimelineJS.wdgt/index.html
old mode 100644
new mode 100755
diff --git a/contrib/examples/react.html b/contrib/examples/react.html
old mode 100644
new mode 100755
diff --git a/contrib/examples/vue.html b/contrib/examples/vue.html
old mode 100644
new mode 100755
diff --git a/contrib/fedorbeets/README.md b/contrib/fedorbeets/README.md
old mode 100644
new mode 100755
diff --git a/contrib/fedorbeets/timeline.py.txt b/contrib/fedorbeets/timeline.py.txt
old mode 100644
new mode 100755
diff --git a/contrib/iamamoose/README.md b/contrib/iamamoose/README.md
old mode 100644
new mode 100755
diff --git a/contrib/iamamoose/timeline.py.txt b/contrib/iamamoose/timeline.py.txt
old mode 100644
new mode 100755
diff --git a/contrib/women_in_computing.csv b/contrib/women_in_computing.csv
old mode 100644
new mode 100755
diff --git a/contrib/women_in_computing.json b/contrib/women_in_computing.json
old mode 100644
new mode 100755
diff --git a/docs/Timeline_Technical_Documentation_2022.pdf b/docs/Timeline_Technical_Documentation_2022.pdf
new file mode 100644
index 000000000..becc7c1ea
Binary files /dev/null and b/docs/Timeline_Technical_Documentation_2022.pdf differ
diff --git a/docs/Timeline_User_Documentation_2022.pdf b/docs/Timeline_User_Documentation_2022.pdf
new file mode 100644
index 000000000..3bae73a58
Binary files /dev/null and b/docs/Timeline_User_Documentation_2022.pdf differ
diff --git a/fabfile.py b/fabfile.py
old mode 100644
new mode 100755
diff --git a/index.html b/index.html
new file mode 100755
index 000000000..133c398eb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,76 @@
+
+
+
+ HistoRade
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
old mode 100644
new mode 100755
diff --git a/jest.config.js b/jest.config.js
old mode 100644
new mode 100755
diff --git a/package-lock.json b/package-lock.json
old mode 100644
new mode 100755
index 5d7a773f7..7445a4589
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@knight-lab/timelinejs",
- "version": "3.8.21",
+ "version": "3.9.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@knight-lab/timelinejs",
- "version": "3.8.21",
+ "version": "3.9.0",
"license": "MPL-2.0",
"dependencies": {
"dompurify": "^2.2.7",
diff --git a/package.json b/package.json
old mode 100644
new mode 100755
index 4842b4e64..26cca7b3f
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@knight-lab/timelinejs",
- "version": "3.9.1",
+ "version": "3.9.0",
"license": "MPL-2.0",
"description": "TimelineJS v3: A Storytelling Timeline built in JavaScript, made by Northwestern University Knight Lab.",
"dependencies": {
@@ -70,4 +70,4 @@
"url": "https://github.com/JoeGermuska"
}
]
-}
\ No newline at end of file
+}
diff --git a/requirements.txt b/requirements.txt
old mode 100644
new mode 100755
diff --git a/src/css/icons/tl-icons.woff2 b/src/css/icons/tl-icons.woff2
old mode 100644
new mode 100755
diff --git a/src/embed/compare.html b/src/embed/compare.html
old mode 100644
new mode 100755
diff --git a/src/embed/index.html b/src/embed/index.html
old mode 100644
new mode 100755
diff --git a/src/embed/old-index.html b/src/embed/old-index.html
old mode 100644
new mode 100755
diff --git a/src/embed/popular_timelines.json b/src/embed/popular_timelines.json
old mode 100644
new mode 100755
index 654111e59..c11df9311
--- a/src/embed/popular_timelines.json
+++ b/src/embed/popular_timelines.json
@@ -5986,4 +5986,4 @@
"pageviews": "13,760(0.01%)",
"uniques": "10,729(0.01%)"
}
-]
\ No newline at end of file
+]
diff --git a/src/js/__tests__/Timeline.test.js b/src/js/__tests__/Timeline.test.js
old mode 100644
new mode 100755
diff --git a/src/js/animation/Animate.js b/src/js/animation/Animate.js
old mode 100644
new mode 100755
diff --git a/src/js/animation/Ease.js b/src/js/animation/Ease.js
old mode 100644
new mode 100755
diff --git a/src/js/core/Browser.js b/src/js/core/Browser.js
old mode 100644
new mode 100755
diff --git a/src/js/core/CSV.js b/src/js/core/CSV.js
old mode 100644
new mode 100755
diff --git a/src/js/core/ConfigFactory.js b/src/js/core/ConfigFactory.js
old mode 100644
new mode 100755
index 9093bbb11..95d4faf26
--- a/src/js/core/ConfigFactory.js
+++ b/src/js/core/ConfigFactory.js
@@ -59,7 +59,6 @@ function extractEventFromCSVObject(orig_row) {
Object.keys(orig_row).forEach(k => {
row[k] = trim(orig_row[k]) // get rid of white-space and reduce all-blank cells to empty strings
})
-
var d = {
media: {
caption: row['Media Caption'] || '',
@@ -74,8 +73,32 @@ function extractEventFromCSVObject(orig_row) {
display_date: row['Display Date'] || '', // only in v3 but no problem
group: row['Group'] || row['Tag'] || '', // small diff between v1 and v3 sheets
background: interpretBackground(row['Background']), // only in v3 but no problem
- type: row['Type'] || ''
+
+ id: row['n°ID'] || '',
+ type: row['Type'] || '',
+ categories: row['Categorie'] || '',
+ markerColor: row['MarkerColor'] || '',
+ GroupOrder: row['GroupOrder'] || '',
+ GroupColor: row['GroupColor'] || '',
+ parentOf: row['parentOf'] || '',
+ childOf: row['childOf'] || '',
+ typeOfLink: row['TypeOfLink'] || '',
+ ZoomOnClick: row['ZoomOnClick'] || '',
+ }
+ if(d.parentOf != ''){
+ var parents = d.parentOf.split(/[,;]/);
+ d.parentOf = parents;
+
+
}
+ if(d.childOf != ''){
+ var children = d.childOf.split(/[,;]/);
+ d.childOf = children;
+
+
+
+ }
+
if (Object.keys(row).includes('Start Date') || Object.keys(row).includes('End Date')) {
// V1 date handling
@@ -136,8 +159,8 @@ function extractEventFromCSVObject(orig_row) {
/**
* Given a Google Sheets URL (or mere document ID), read the data and return
* a Timeline JSON file suitable for instantiating a timeline.
- *
- * @param {string} url
+ *
+ * @param {string} url
*/
export async function readGoogleAsCSV(url, sheets_proxy) {
@@ -147,7 +170,7 @@ export async function readGoogleAsCSV(url, sheets_proxy) {
let error = null;
await fetchCSV({
- url: `${sheets_proxy}${url}`,
+ url: `${url}`,
}).then(d => {
rows = d;
}).catch(error_json => {
@@ -184,7 +207,7 @@ export async function readGoogleAsCSV(url, sheets_proxy) {
* Given a Google Sheets URL or a bare spreadsheet key, return a URL expected
* to retrieve a CSV file, assuming the Sheets doc has been "published to the web".
* No checking for the actual availability is done.
- * @param {string} url_or_key
+ * @param {string} url_or_key
*/
export function makeGoogleCSVURL(url_or_key) {
url_or_key = url_or_key.trim()
@@ -231,13 +254,13 @@ async function jsonFromGoogleURL(google_url, options) {
}
/**
- * Using the given URL, fetch or create a JS Object suitable for configuring a timeline. Use
- * that to create a TimelineConfig, and invoke the callback with that object as its argument.
- * If the second argument is an object instead of a callback function, it must have a
+ * Using the given URL, fetch or create a JS Object suitable for configuring a timeline. Use
+ * that to create a TimelineConfig, and invoke the callback with that object as its argument.
+ * If the second argument is an object instead of a callback function, it must have a
* 'callback' property which will be invoked with the config.
* Even in error cases, a minimal TimelineConfig object will be created and passed to the callback
* so that error messages can be displayed in the host page.
- *
+ *
* @param {String} url the URL or Google Spreadsheet key which can be used to get configuration information
* @param {function|object} callback_or_options either a callback function or an object with a 'callback' property and other configuration properties
*/
@@ -265,8 +288,8 @@ export async function makeConfig(url, callback_or_options) {
try {
json = await jsonFromGoogleURL(url, options);
} catch (e) {
- // even with an error, we make
- // a TimelineConfig because it's
+ // even with an error, we make
+ // a TimelineConfig because it's
// the most straightforward way to display messages
// in the DOM
tc = new TimelineConfig();
@@ -334,4 +357,4 @@ function handleRow(event, timeline_config) {
} else {
timeline_config.events.push(event);
}
-}
\ No newline at end of file
+}
diff --git a/src/js/core/Events.js b/src/js/core/Events.js
old mode 100644
new mode 100755
diff --git a/src/js/core/Load.js b/src/js/core/Load.js
old mode 100644
new mode 100755
diff --git a/src/js/core/TLClass.js b/src/js/core/TLClass.js
old mode 100644
new mode 100755
diff --git a/src/js/core/TLError.js b/src/js/core/TLError.js
old mode 100644
new mode 100755
diff --git a/src/js/core/TimelineConfig.js b/src/js/core/TimelineConfig.js
old mode 100644
new mode 100755
index c503d98af..34ccaf1c0
--- a/src/js/core/TimelineConfig.js
+++ b/src/js/core/TimelineConfig.js
@@ -18,8 +18,8 @@ const STRIP_MARKUP_FIELDS = {
}
/**
- * After sanitizing, make sure all tags with 'href' attributes that
- * don't have a target attribute are set to open in a new ('_blank')
+ * After sanitizing, make sure all tags with 'href' attributes that
+ * don't have a target attribute are set to open in a new ('_blank')
* window. Also make sure that all tags which are set to open in a '_blank'
* window set `rel="noopener"`
*/
@@ -58,7 +58,7 @@ function _process_fields(slide, callback, fieldmap) {
* Centralize use of HTML sanitizer so that we can enforce common
* rules. Maybe we would want to push this to Util and unit test
* but ultimately we're trusting the creators of the library.
- * @param {string} txt
+ * @param {string} txt
*/
function _tl_sanitize(txt) {
return DOMPurify.sanitize(txt, {
@@ -72,6 +72,7 @@ export class TimelineConfig {
this.title = '';
this.scale = '';
this.events = [];
+ this.filtered_events = [];
this.eras = [];
this.event_dict = {}; // despite name, all slides (events + title) indexed by slide.unique_id
this.messages = {
@@ -101,6 +102,7 @@ export class TimelineConfig {
}
}
+
if (data.eras) {
data.eras.forEach((era_data, indexOf) => {
try {
@@ -111,8 +113,10 @@ export class TimelineConfig {
})
}
+
sortByDate(this.events);
sortByDate(this.eras);
+ this.filtered_events = [...this.events];
}
}
@@ -160,7 +164,7 @@ export class TimelineConfig {
/**
- * @returns {boolean} whether or not this config has logged errors.
+ * @returns {boolean} whether or not this config has logged errors.
*/
isValid() {
return this.messages.errors.length == 0;
@@ -175,7 +179,6 @@ export class TimelineConfig {
if (typeof(data.start_date) == 'undefined') {
trace("Missing start date, skipping event")
- console.log(data)
return null
}
@@ -354,10 +357,10 @@ export class TimelineConfig {
}
/**
- * Do some simple cleanup for all slides and eras, including sanitizing
+ * Do some simple cleanup for all slides and eras, including sanitizing
* HTML input, or stripping markup for fields which are not intended to support
* it.
- * @param { Slide | TimeEra } slide
+ * @param { Slide | TimeEra } slide
*/
_tidyFields(slide) {
@@ -381,4 +384,4 @@ export class TimelineConfig {
_process_fields(slide, stripMarkup, STRIP_MARKUP_FIELDS)
}
-}
\ No newline at end of file
+}
diff --git a/src/js/core/Util.js b/src/js/core/Util.js
old mode 100644
new mode 100755
diff --git a/src/js/core/__tests__/CSV.test.js b/src/js/core/__tests__/CSV.test.js
old mode 100644
new mode 100755
diff --git a/src/js/core/__tests__/ConfigFactory.test.js b/src/js/core/__tests__/ConfigFactory.test.js
old mode 100644
new mode 100755
diff --git a/src/js/core/__tests__/Util.test.js b/src/js/core/__tests__/Util.test.js
old mode 100644
new mode 100755
diff --git a/src/js/core/__tests__/parser_test.csv b/src/js/core/__tests__/parser_test.csv
old mode 100644
new mode 100755
diff --git a/src/js/core/__tests__/women_in_computing.csv b/src/js/core/__tests__/women_in_computing.csv
old mode 100644
new mode 100755
diff --git a/src/js/date/DateUtil.js b/src/js/date/DateUtil.js
old mode 100644
new mode 100755
diff --git a/src/js/date/TLDate.js b/src/js/date/TLDate.js
old mode 100644
new mode 100755
index de081f7f0..b080be652
--- a/src/js/date/TLDate.js
+++ b/src/js/date/TLDate.js
@@ -178,24 +178,13 @@ export const TLDate = TLClass.extend({
this._createDateObj();
}
- if (data.format && !format) {
- format = data.format
- }
this._setFormat(format, format_short);
},
setDateFormat: function(format) {
this.data.format = format;
},
- /**
- * Return a string representation of this date. If this date has been created with a `display_date` property,
- * that value is always returned, regardless of arguments to the method invocation. Otherwise,
- * the given `Language` is asked to create a string representation based on this Date's data, passing through the provided
- * `format` String, or, if that is undefined, this date's default format string.
- * @param {Language} language
- * @param {String} format
- * @returns {String} formattedDate
- */
+
getDisplayDate: function(language, format) {
if (this.data.display_date) {
return this.data.display_date;
@@ -356,14 +345,6 @@ export const TLDate = TLClass.extend({
} else if (!this.data.format_short) {
this.data.format_short = this.findBestFormat(true);
}
- },
- /**
- * Get the year-only representation of this date. Ticks need this to layout
- * the time axis, and this needs to work isomorphically for TLDate and BigDate
- * @returns {Number}
- */
- getFullYear: function() {
- return this.data.date_obj.getFullYear()
}
});
@@ -496,10 +477,6 @@ export const BigDate = TLDate.extend({
this._createDateObj();
}
- if (data.format && !format) {
- format = data.format
- }
-
this._setFormat(format, format_short);
},
@@ -520,13 +497,5 @@ export const BigDate = TLDate.extend({
}
throw new TLError("invalid_scale_err", scale);
- },
- /**
- * Get the year-only representation of this date. Ticks need this to layout
- * the time axis, and this needs to work isomorphically for TLDate and BigDate
- * @returns {Number}
- */
- getFullYear: function() {
- return this.data.date_obj.getTime()
}
-});
\ No newline at end of file
+});
diff --git a/src/js/date/__tests__/TLDate.test.js b/src/js/date/__tests__/TLDate.test.js
old mode 100644
new mode 100755
index 71041102c..cb3a95e56
--- a/src/js/date/__tests__/TLDate.test.js
+++ b/src/js/date/__tests__/TLDate.test.js
@@ -55,16 +55,6 @@ test("display_text overrides other formatting", () => {
})
-test("date constructor format overrides other formatting", () => {
- var cdate = new TLDate({ year: 2014, month: 12 }, 'yyyy')
- expect(cdate.getDisplayDate()).toBe('2014')
-})
-
-test("format in constructor data param overrides other formatting", () => {
- var cdate = new TLDate({ year: 2014, month: 12, format: 'yyyy' })
- expect(cdate.getDisplayDate()).toBe('2014')
-})
-
test("handle years in the first century CE correctly", () => {
var date = makeDate({ year: 75 });
expect(date.getDisplayDate()).toBe("75")
diff --git a/src/js/dom/DOM.js b/src/js/dom/DOM.js
old mode 100644
new mode 100755
diff --git a/src/js/dom/DOMEvent.js b/src/js/dom/DOMEvent.js
old mode 100644
new mode 100755
diff --git a/src/js/dom/DOMMixins.js b/src/js/dom/DOMMixins.js
old mode 100644
new mode 100755
diff --git a/src/js/dom/DOMUtil.js b/src/js/dom/DOMUtil.js
old mode 100644
new mode 100755
index 884edbe95..45aab8276
--- a/src/js/dom/DOMUtil.js
+++ b/src/js/dom/DOMUtil.js
@@ -22,4 +22,4 @@ export function removeClass(el, name) {
}
return w;
}).replace(/^\s+/, '');
-}
\ No newline at end of file
+}
diff --git a/src/js/index.js b/src/js/index.js
old mode 100644
new mode 100755
diff --git a/src/js/language/I18NMixins.js b/src/js/language/I18NMixins.js
old mode 100644
new mode 100755
diff --git a/src/js/language/Language.js b/src/js/language/Language.js
old mode 100644
new mode 100755
diff --git a/src/js/language/__tests__/Language.test.js b/src/js/language/__tests__/Language.test.js
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/af.json b/src/js/language/locale/af.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/ar.json b/src/js/language/locale/ar.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/be.json b/src/js/language/locale/be.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/bg.json b/src/js/language/locale/bg.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/ca.json b/src/js/language/locale/ca.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/cz.json b/src/js/language/locale/cz.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/da.json b/src/js/language/locale/da.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/de.json b/src/js/language/locale/de.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/el.json b/src/js/language/locale/el.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/en-24hr.json b/src/js/language/locale/en-24hr.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/en-week.json b/src/js/language/locale/en-week.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/en.json b/src/js/language/locale/en.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/eo.json b/src/js/language/locale/eo.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/es.json b/src/js/language/locale/es.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/et.json b/src/js/language/locale/et.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/eu.json b/src/js/language/locale/eu.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/fa.json b/src/js/language/locale/fa.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/fi.json b/src/js/language/locale/fi.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/fo.json b/src/js/language/locale/fo.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/fr.json b/src/js/language/locale/fr.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/fy.json b/src/js/language/locale/fy.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/ga.json b/src/js/language/locale/ga.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/gl.json b/src/js/language/locale/gl.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/he.json b/src/js/language/locale/he.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/hi.json b/src/js/language/locale/hi.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/hr.json b/src/js/language/locale/hr.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/hu.json b/src/js/language/locale/hu.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/hy.json b/src/js/language/locale/hy.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/id.json b/src/js/language/locale/id.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/is.json b/src/js/language/locale/is.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/it.json b/src/js/language/locale/it.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/iw.json b/src/js/language/locale/iw.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/ja.json b/src/js/language/locale/ja.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/ka.json b/src/js/language/locale/ka.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/ko.json b/src/js/language/locale/ko.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/lb.json b/src/js/language/locale/lb.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/lt.json b/src/js/language/locale/lt.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/lv.json b/src/js/language/locale/lv.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/ms.json b/src/js/language/locale/ms.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/my.json b/src/js/language/locale/my.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/nb.json b/src/js/language/locale/nb.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/ne.json b/src/js/language/locale/ne.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/nl.json b/src/js/language/locale/nl.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/nn.json b/src/js/language/locale/nn.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/no.json b/src/js/language/locale/no.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/pl.json b/src/js/language/locale/pl.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/pt-br.json b/src/js/language/locale/pt-br.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/pt.json b/src/js/language/locale/pt.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/rm.json b/src/js/language/locale/rm.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/ro.json b/src/js/language/locale/ro.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/ru.json b/src/js/language/locale/ru.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/si.json b/src/js/language/locale/si.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/sk.json b/src/js/language/locale/sk.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/sl.json b/src/js/language/locale/sl.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/sr-cy.json b/src/js/language/locale/sr-cy.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/sr.json b/src/js/language/locale/sr.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/sv.json b/src/js/language/locale/sv.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/ta.json b/src/js/language/locale/ta.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/te.json b/src/js/language/locale/te.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/th.json b/src/js/language/locale/th.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/tl.json b/src/js/language/locale/tl.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/tr.json b/src/js/language/locale/tr.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/uk.json b/src/js/language/locale/uk.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/ur.json b/src/js/language/locale/ur.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/vi.json b/src/js/language/locale/vi.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/zh-cn.json b/src/js/language/locale/zh-cn.json
old mode 100644
new mode 100755
diff --git a/src/js/language/locale/zh-tw.json b/src/js/language/locale/zh-tw.json
old mode 100644
new mode 100755
diff --git a/src/js/media/Media.js b/src/js/media/Media.js
old mode 100644
new mode 100755
diff --git a/src/js/media/MediaType.js b/src/js/media/MediaType.js
old mode 100644
new mode 100755
index d4d5f1c60..bad6ba376
--- a/src/js/media/MediaType.js
+++ b/src/js/media/MediaType.js
@@ -58,7 +58,7 @@ export function lookupMediaType(m, image_only) {
media_types = [{
type: "youtube",
name: "YouTube",
- match_str: "^(https?:)?\/*(www.|m.)?youtube|youtu\.be",
+ match_str: "^(https?:)?\/*(www.)?youtube|youtu\.be",
cls: YouTube
},
{
@@ -148,7 +148,7 @@ export function lookupMediaType(m, image_only) {
{
type: "googledocs",
name: "Google Doc",
- match_str: "^(https?:)?\/*[^.]*.google.com\/[^\/]*\/d\/[^\/]*\/[^\/]*\?usp=shar.*|^(https?:)?\/*drive.google.com\/open\?id=[^\&]*\&authuser=0|^(https?:)?\/\/*drive.google.com\/open\\?id=[^\&]*|^(https?:)?\/*[^.]*.googledrive.com\/host\/[^\/]*\/",
+ match_str: "^(https?:)?\/*[^.]*.google.com\/[^\/]*\/d\/[^\/]*\/[^\/]*\?usp=sharing|^(https?:)?\/*drive.google.com\/open\?id=[^\&]*\&authuser=0|^(https?:)?\/\/*drive.google.com\/open\\?id=[^\&]*|^(https?:)?\/*[^.]*.googledrive.com\/host\/[^\/]*\/",
cls: GoogleDoc
},
{
diff --git a/src/js/media/types/Audio.js b/src/js/media/types/Audio.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Blockquote.js b/src/js/media/types/Blockquote.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/DailyMotion.js b/src/js/media/types/DailyMotion.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/DocumentCloud.js b/src/js/media/types/DocumentCloud.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Flickr.js b/src/js/media/types/Flickr.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/GoogleDoc.js b/src/js/media/types/GoogleDoc.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/GoogleMap.js b/src/js/media/types/GoogleMap.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/IFrame.js b/src/js/media/types/IFrame.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Image.js b/src/js/media/types/Image.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Imgur.js b/src/js/media/types/Imgur.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Instagram.js b/src/js/media/types/Instagram.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/PDF.js b/src/js/media/types/PDF.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Profile.js b/src/js/media/types/Profile.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/SoundCloud.js b/src/js/media/types/SoundCloud.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Spotify.js b/src/js/media/types/Spotify.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Text.js b/src/js/media/types/Text.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Twitter.js b/src/js/media/types/Twitter.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/TwitterEmbed.js b/src/js/media/types/TwitterEmbed.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Video.js b/src/js/media/types/Video.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Vimeo.js b/src/js/media/types/Vimeo.js
old mode 100644
new mode 100755
index 0b1d34b62..d63c710fc
--- a/src/js/media/types/Vimeo.js
+++ b/src/js/media/types/Vimeo.js
@@ -60,4 +60,4 @@ export default class Vimeo extends Media {
trace(err);
}
}
-}
\ No newline at end of file
+}
diff --git a/src/js/media/types/Vine.js b/src/js/media/types/Vine.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Wikipedia.js b/src/js/media/types/Wikipedia.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/Wistia.js b/src/js/media/types/Wistia.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/YouTube.js b/src/js/media/types/YouTube.js
old mode 100644
new mode 100755
diff --git a/src/js/media/types/__tests__/Spotify.test.js b/src/js/media/types/__tests__/Spotify.test.js
old mode 100644
new mode 100755
diff --git a/src/js/net/Net.js b/src/js/net/Net.js
old mode 100644
new mode 100755
diff --git a/src/js/slider/Slide.js b/src/js/slider/Slide.js
old mode 100644
new mode 100755
diff --git a/src/js/slider/SlideNav.js b/src/js/slider/SlideNav.js
old mode 100644
new mode 100755
diff --git a/src/js/timeline/Timeline.js b/src/js/timeline/Timeline.js
old mode 100644
new mode 100755
index 1042924d9..7d84356bf
--- a/src/js/timeline/Timeline.js
+++ b/src/js/timeline/Timeline.js
@@ -1,30 +1,46 @@
-import * as DOM from "../dom/DOM"
-import { addClass } from "../dom/DOMUtil"
-import { hexToRgb, mergeData, classMixin, isTrue, trace, addTraceHandler } from "../core/Util";
+import * as DOM from "../dom/DOM";
+import { addClass } from "../dom/DOMUtil";
+import {
+ hexToRgb,
+ mergeData,
+ classMixin,
+ isTrue,
+ trace,
+ addTraceHandler,
+} from "../core/Util";
import { easeInOutQuint, easeOutStrong } from "../animation/Ease";
-import Message from "../ui/Message"
-import { Language, fallback, loadLanguage } from "../language/Language"
+import Message from "../ui/Message";
+import { Language, fallback, loadLanguage } from "../language/Language";
import { I18NMixins } from "../language/I18NMixins";
import Events from "../core/Events";
-import { makeConfig } from "../core/ConfigFactory"
-import { TimelineConfig } from "../core/TimelineConfig"
-import { TimeNav } from "../timenav/TimeNav"
-import * as Browser from "../core/Browser"
-import { Animate } from "../animation/Animate"
-import { StorySlider } from "../slider/StorySlider"
-import { MenuBar } from "../ui/MenuBar"
+import { makeConfig } from "../core/ConfigFactory";
+import { TimelineConfig } from "../core/TimelineConfig";
+import { TimeNav } from "../timenav/TimeNav";
+import * as Browser from "../core/Browser";
+import { Animate } from "../animation/Animate";
+import { StorySlider } from "../slider/StorySlider";
+import { MenuBar } from "../ui/MenuBar";
import { loadCSS, loadJS } from "../core/Load";
+import { sortByDate, SCALE_DATE_CLASSES } from "../date/DateUtil";
let script_src_url = null;
if (document) {
- let script_tags = document.getElementsByTagName('script');
+ let script_tags = document.getElementsByTagName("script");
if (script_tags && script_tags.length > 0) {
script_src_url = script_tags[script_tags.length - 1].src;
}
}
+let inputFilter = {
+ keyword: "",
+ date: {
+ debut: "",
+ fin: "",
+ },
+ theme: "",
+};
function make_keydown_handler(timeline) {
- return function(event) {
+ return function (event) {
if (timeline.config) {
var keyName = event.key;
var currentSlide = timeline._getSlideIndex(self.current_id);
@@ -32,45 +48,45 @@ function make_keydown_handler(timeline) {
var lastSlide = timeline.config.title ? _n + 1 : _n;
var firstSlide = 0;
- if (keyName == 'ArrowLeft') {
+ if (keyName == "ArrowLeft") {
if (currentSlide != firstSlide) {
timeline.goToPrev();
}
- } else if (keyName == 'ArrowRight') {
+ } else if (keyName == "ArrowRight") {
if (currentSlide != lastSlide) {
timeline.goToNext();
}
}
}
- }
+ };
}
/**
* Primary entry point for using TimelineJS.
* @constructor
- * @param {HTMLElement|string} elem - the HTML element, or its ID, to which
+ * @param {HTMLElement|string} elem - the HTML element, or its ID, to which
* the Timeline should be bound
* @param {object|String} - a JavaScript object conforming to the TimelineJS
* configuration format, or a String which is the URL for a Google Sheets document
* or JSON configuration file which Timeline will retrieve and parse into a JavaScript object.
- * NOTE: do not pass a JSON String for this. TimelineJS doesn't try to distinguish a
+ * NOTE: do not pass a JSON String for this. TimelineJS doesn't try to distinguish a
* JSON string from a URL string. If you have a JSON String literal, parse it using
* `JSON.parse` before passing it to the constructor.
*
- * @param {object} [options] - a JavaScript object specifying
+ * @param {object} [options] - a JavaScript object specifying
* presentation options
*/
class Timeline {
constructor(elem, data, options) {
if (!options) {
- options = {}
+ options = {};
}
this.ready = false;
this._el = {
container: DOM.get(elem),
storyslider: {},
timenav: {},
- menubar: {}
+ menubar: {},
};
if (options.lang && !options.language) {
@@ -97,10 +113,11 @@ class Timeline {
this.options = {
script_path: "https://cdn.knightlab.com/libs/timeline3/latest/js/", // as good a default as any
+ url: data,
height: this._el.container.offsetHeight,
width: this._el.container.offsetWidth,
debug: false,
- font: 'default',
+ font: "default",
is_embed: false,
is_full_embed: false,
hash_bookmark: false,
@@ -135,12 +152,18 @@ class Timeline {
zoom_sequence: [0.5, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89], // Array of Fibonacci numbers for TimeNav zoom levels
language: "en",
ga_property_id: null,
- track_events: ['back_to_start', 'nav_next', 'nav_previous', 'zoom_in', 'zoom_out'],
+ track_events: [
+ "back_to_start",
+ "nav_next",
+ "nav_previous",
+ "zoom_in",
+ "zoom_out",
+ ],
theme: null,
// sheets_proxy value should be suitable for simply postfixing with the Google Sheets CSV URL
// as in include trailing slashes, or '?url=' or whatever. No support right now for anything but
// postfixing. The default proxy should work in most cases, but only for TimelineJS sheets.
- sheets_proxy: 'https://sheets-proxy.knightlab.com/proxy/',
+ sheets_proxy: "https://sheets-proxy.knightlab.com/proxy/",
soundcite: false,
};
@@ -150,131 +173,158 @@ class Timeline {
this.animator_menubar = null;
// Ideally we'd set the language here, but we're bootstrapping and may hit problems
- // before we're able to load it. if it weren't a remote resource, we could probably
+ // before we're able to load it. if it weren't a remote resource, we could probably
// do it.
- this.message = new Message(this._el.container, { message_class: "tl-message-full" });
+ this.message = new Message(this._el.container, {
+ message_class: "tl-message-full",
+ });
// Merge Options
- if (typeof(options.default_bg_color) == "string") {
+ if (typeof options.default_bg_color == "string") {
var parsed = hexToRgb(options.default_bg_color); // will clear it out if its invalid
if (parsed) {
options.default_bg_color = parsed;
} else {
- delete options.default_bg_color
+ delete options.default_bg_color;
trace("Invalid default background color. Ignoring.");
}
}
mergeData(this.options, options);
- if (!(this.options.script_path)) {
- this.options.script_path = this.determineScriptPath()
+ if (!this.options.script_path) {
+ this.options.script_path = this.determineScriptPath();
}
if (options.soundcite) {
- this.on('ready', () => {
- trace("Loading Soundcite resources ")
- loadCSS('https://cdn.knightlab.com/libs/soundcite/latest/css/player.css')
- loadJS('https://cdn.knightlab.com/libs/soundcite/latest/js/soundcite.min.js')
- })
+ this.on("ready", () => {
+ trace("Loading Soundcite resources ");
+ loadCSS(
+ "https://cdn.knightlab.com/libs/soundcite/latest/css/player.css"
+ );
+ loadJS(
+ "https://cdn.knightlab.com/libs/soundcite/latest/js/soundcite.min.js"
+ );
+ });
}
// load font, theme
- this._loadStyles()
-
+ this._loadStyles();
document.addEventListener("keydown", make_keydown_handler(this));
- window.addEventListener("resize", function(e) {
- this.updateDisplay();
- }.bind(this));
+ window.addEventListener(
+ "resize",
+ function (e) {
+ this.updateDisplay();
+ }.bind(this)
+ );
if (this.options.debug) {
- addTraceHandler(console.log)
+ addTraceHandler(console.log);
}
// Apply base class to container
- addClass(this._el.container, 'tl-timeline');
- this._el.container.setAttribute('tabindex', '0');
- this._el.container.setAttribute('role', 'region');
- this._el.container.setAttribute('aria-label', this._('aria_label_timeline'));
+ addClass(this._el.container, "tl-timeline");
+ this._el.container.setAttribute("tabindex", "0");
+ this._el.container.setAttribute("role", "region");
+ this._el.container.setAttribute(
+ "aria-label",
+ this._("aria_label_timeline")
+ );
if (this.options.is_embed) {
- addClass(this._el.container, 'tl-timeline-embed');
+ addClass(this._el.container, "tl-timeline-embed");
}
if (this.options.is_full_embed) {
- addClass(this._el.container, 'tl-timeline-full-embed');
+ addClass(this._el.container, "tl-timeline-full-embed");
}
this._loadLanguage(data);
+ var messages = this._el.container.getElementsByClassName(
+ "tl-timegroup-message"
+ );
+
+
}
_loadStyles() {
let font_css_url = null,
theme_css_url = null;
- if (this.options.font && (
- this.options.font.indexOf('http') == 0 ||
- this.options.font.match(/\.css$/))) {
- font_css_url = this.options.font
+ if (
+ this.options.font &&
+ (this.options.font.indexOf("http") == 0 ||
+ this.options.font.match(/\.css$/))
+ ) {
+ font_css_url = this.options.font;
} else if (this.options.font) {
- let fragment = '../css/fonts/font.' + this.options.font.toLowerCase() + '.css'
- font_css_url = new URL(fragment, this.options.script_path).toString()
+ let fragment =
+ "../css/fonts/font." + this.options.font.toLowerCase() + ".css";
+ font_css_url = new URL(
+ fragment,
+ this.options.script_path
+ ).toString();
}
if (font_css_url) {
- loadCSS(font_css_url)
+ loadCSS(font_css_url);
}
- if (this.options.theme && (
- this.options.theme.indexOf('http') == 0 ||
- this.options.theme.match(/\.css$/))) {
- theme_css_url = this.options.theme
+ if (
+ this.options.theme &&
+ (this.options.theme.indexOf("http") == 0 ||
+ this.options.theme.match(/\.css$/))
+ ) {
+ theme_css_url = this.options.theme;
} else if (this.options.theme) {
- let fragment = '../css/themes/timeline.theme.' + this.options.theme.toLowerCase() + '.css'
- theme_css_url = new URL(fragment, this.options.script_path).toString()
+ let fragment =
+ "../css/themes/timeline.theme." +
+ this.options.theme.toLowerCase() +
+ ".css";
+ theme_css_url = new URL(
+ fragment,
+ this.options.script_path
+ ).toString();
}
if (theme_css_url) {
- loadCSS(theme_css_url)
+ loadCSS(theme_css_url);
}
-
-
}
-
_loadLanguage(data) {
try {
- var lang = this.options.language
- var script_path = this.options.script_path
+ var lang = this.options.language;
+ var script_path = this.options.script_path;
loadLanguage(lang, script_path).then((language) => {
if (language) {
- this.language = language
- this.message.setLanguage(this.language)
- this.showMessage(this._('loading_timeline'))
+ this.language = language;
+ this.message.setLanguage(this.language);
+ this.showMessage(this._("loading_timeline"));
} else {
- this.showMessage(`Error loading ${lang}`) // but we will carry on using the fallback
+ this.showMessage(`Error loading ${lang}`); // but we will carry on using the fallback
}
- this._initData(data)
- })
+ this._initData(data);
+ });
} catch (e) {
- this.showMessage(this._translateError(e))
+ this.showMessage(this._translateError(e));
}
}
/**
* Initialize the data for this timeline. If data is a URL, pass it to ConfigFactory
- * to get a TimelineConfig; if data is a TimelineConfig, just use it; otherwise,
+ * to get a TimelineConfig; if data is a TimelineConfig, just use it; otherwise,
* assume it's a JSON object in the right format, and wrap it in a new TimelineConfig.
* @param {string|TimelineConfig|object} data
*/
_initData(data) {
- if (typeof data == 'string') {
+ if (typeof data == "string") {
makeConfig(data, {
- callback: function(config) {
+ callback: function (config) {
this.setConfig(config);
}.bind(this),
- sheets_proxy: this.options.sheets_proxy
+ sheets_proxy: this.options.sheets_proxy,
});
} else if (TimelineConfig == data.constructor) {
this.setConfig(data);
@@ -283,71 +333,86 @@ class Timeline {
}
}
+ _initFilteredData(data, filter) {
+ if (typeof data === "string") {
+ makeConfig(data, {
+ callback: function (config) {
+ this.setConfigFilter(config, filter);
+ }.bind(this),
+ sheets_proxy: this.options.sheets_proxy,
+ });
+ } else if (data instanceof TimelineConfig) {
+ this.setConfigFilter(data, filter);
+ } else {
+ this.setConfigFilter(new TimelineConfig(data), filter);
+ }
+ }
+
/**
* Given an input, if it is a Timeline Error object, look up the
- * appropriate error in the current language and return it, optionally
+ * appropriate error in the current language and return it, optionally
* with detail that also comes in the object. Alternatively, pass back
* the input, which is expected to be a string ready to display.
- * @param {Error|string} e - an Error object which can be localized,
+ * @param {Error|string} e - an Error object which can be localized,
* or a string message
*/
_translateError(e) {
-
- if (e.hasOwnProperty('stack')) {
+ if (e.hasOwnProperty("stack")) {
trace(e.stack);
}
if (e.message_key) {
- return this._(e.message_key) + (e.detail ? ' [' + e.detail + ']' : '')
+ return (
+ this._(e.message_key) + (e.detail ? " [" + e.detail + "]" : "")
+ );
}
return e;
-
}
/**
* Display a message in the Timeline window.
- * @param {string} msg
+ * @param {string} msg
*/
showMessage(msg) {
- if (this.message) {
- this.message.updateMessage(msg);
- } else {
- trace("No message display available.")
- trace(msg);
- }
+ if (this.message) {
+ this.message.updateMessage(msg);
+ } else {
+ trace("No message display available.");
+ trace(msg);
}
- /**
- * Not ideal, but if users don't specify the script path, we try to figure it out.
- * The script path is needed to load other languages
- */
+ }
+ /**
+ * Not ideal, but if users don't specify the script path, we try to figure it out.
+ * The script path is needed to load other languages
+ */
determineScriptPath() {
let src = null;
- if (script_src_url) { // did we get it when this loaded?
+ if (script_src_url) {
+ // did we get it when this loaded?
src = script_src_url;
} else {
- let script_tag = document.getElementById('timeline-script-tag')
+ let script_tag = document.getElementById("timeline-script-tag");
if (script_tag) {
- src = script_tag.src
+ src = script_tag.src;
}
}
if (!src) {
- let script_tags = document.getElementsByTagName('script');
+ let script_tags = document.getElementsByTagName("script");
for (let index = script_tags.length - 1; index >= 0; index--) {
if (script_tags[index].src) {
- src = script_tags[index].src
- break // if we haven't found anything else, use the latest loaded script
+ src = script_tags[index].src;
+ break; // if we haven't found anything else, use the latest loaded script
}
}
}
if (src) {
// +1 to include the trailing slash or concatting for dynamic CSS load won't work.
- return src.substr(0, src.lastIndexOf('/') + 1);
+ return src.substr(0, src.lastIndexOf("/") + 1);
}
- return '';
+ return "";
}
-
setConfig(config) {
this.config = config;
if (this.config.isValid()) {
@@ -357,22 +422,131 @@ class Timeline {
}
if (this.config.isValid()) {
try {
- if (document.readyState === 'loading') { // Loading hasn't finished yet
- document.addEventListener('DOMContentLoaded', this._onDataLoaded.bind(this));
+ if (document.readyState === "loading") {
+ // Loading hasn't finished yet
+ document.addEventListener(
+ "DOMContentLoaded",
+ this._onDataLoaded.bind(this)
+ );
+ } else {
+ this._onDataLoaded();
+ }
+ } catch (e) {
+ this.showMessage(
+ "" +
+ this._("error") +
+ ": " +
+ this._translateError(e)
+ );
+ }
+ } else {
+ var translated_errs = [];
+
+ for (
+ var i = 0, errs = this.config.getErrors();
+ i < errs.length;
+ i++
+ ) {
+ translated_errs.push(this._translateError(errs[i]));
+ }
+
+ this.showMessage(
+ "" +
+ this._("error") +
+ ": " +
+ translated_errs.join("
")
+ );
+ // should we set 'self.ready'? if not, it won't resize,
+ // but most resizing would only work
+ // if more setup happens
+ }
+ }
+
+ setConfigFilter(config, filter) {
+ config.events = this.config.filtered_events;
+ const keyword = filter.keyword;
+
+ let filtered_events = config.events.filter((event) => {
+ // Always include timeline events
+ if (event.unique_id.startsWith("tl-")) {
+ return true;
+ }
+
+ let passes_keyword = true;
+ let passes_date_range = true;
+ let passes_theme = true;
+
+ // Keyword filter
+ if (keyword) {
+ let headline = event.text.headline.toLowerCase();
+ let text = event.text.text.toLowerCase();
+ passes_keyword =
+ headline.includes(keyword.toLowerCase()) ||
+ text.includes(keyword.toLowerCase());
+ }
+
+ // Theme filter
+ if (filter.theme) {
+ let theme = event.group.toLowerCase();
+ passes_theme = theme.includes(filter.theme.toLowerCase());
+ }
+
+ //Date Filter
+ if (filter.date.debut && filter.date.fin) {
+ let debut = new Date(filter.date.debut);
+ let fin = new Date(filter.date.fin);
+ let start_date = new Date(event.start_date.data.date_obj);
+ passes_date_range = start_date >= debut && start_date <= fin;
+ }
+
+ // Return true only if all active filters pass
+ return passes_keyword && passes_date_range && passes_theme;
+ });
+
+ config.events = filtered_events;
+
+ this.config = config;
+ if (this.config.isValid()) {
+ // don't validate if it's already problematic to avoid clutter
+ this.config.validate();
+ this._validateOptions();
+ }
+ if (this.config.isValid()) {
+ try {
+ if (document.readyState === "loading") {
+ // Loading hasn't finished yet
+ document.addEventListener(
+ "DOMContentLoaded",
+ this._onDataLoaded.bind(this)
+ );
} else {
this._onDataLoaded();
}
} catch (e) {
- this.showMessage("" + this._('error') + ": " + this._translateError(e));
+ this.showMessage(
+ "" +
+ this._("error") +
+ ": " +
+ this._translateError(e)
+ );
}
} else {
var translated_errs = [];
- for (var i = 0, errs = this.config.getErrors(); i < errs.length; i++) {
+ for (
+ var i = 0, errs = this.config.getErrors();
+ i < errs.length;
+ i++
+ ) {
translated_errs.push(this._translateError(errs[i]));
}
- this.showMessage("" + this._('error') + ": " + translated_errs.join('
'));
+ this.showMessage(
+ "" +
+ this._("error") +
+ ": " +
+ translated_errs.join("
")
+ );
// should we set 'self.ready'? if not, it won't resize,
// but most resizing would only work
// if more setup happens
@@ -388,36 +562,125 @@ class Timeline {
this.message.hide();
}
let callback = (entries, observer) => {
- if (entries.reduce((accum, curr) => accum || curr.isIntersecting, false)) {
- this.updateDisplay()
+ if (
+ entries.reduce(
+ (accum, curr) => accum || curr.isIntersecting,
+ false
+ )
+ ) {
+ this.updateDisplay();
}
- }
- let observer = new IntersectionObserver(callback.bind(this))
- observer.observe(this._el.container)
+ };
+ let observer = new IntersectionObserver(callback.bind(this));
+ observer.observe(this._el.container);
this.ready = true;
- this.fire("ready")
-
+ this.fire("ready");
}
_initLayout() {
-
- this.message.removeFrom(this._el.container);
+ try {
+ this.message.removeFrom(this._el.container);
+ } catch (e) {
+ console.log("Error removing message", e);
+ }
this._el.container.innerHTML = "";
// Create Layout
if (this.options.timenav_position == "top") {
- this._el.timenav = DOM.create('div', 'tl-timenav', this._el.container);
- this._el.menubar = DOM.create('div', 'tl-menubar', this._el.container);
- this._el.storyslider = DOM.create('div', 'tl-storyslider', this._el.container);
+ this._el.timenav = DOM.create(
+ "div",
+ "tl-timenav",
+ this._el.container
+ );
+ // Filter bar with date range
+ this._el.filterbar = DOM.create(
+ "div",
+ "tl-filterbar",
+ this._el.container
+ );
+
+ this._el.menubar = DOM.create(
+ "div",
+ "tl-menubar",
+ this._el.container
+ );
+ this._el.storyslider = DOM.create(
+ "div",
+ "tl-storyslider",
+ this._el.container
+ );
} else {
- this._el.storyslider = DOM.create('div', 'tl-storyslider', this._el.container);
- this._el.timenav = DOM.create('div', 'tl-timenav', this._el.container);
- this._el.menubar = DOM.create('div', 'tl-menubar', this._el.container);
+ this._el.storyslider = DOM.create(
+ "div",
+ "tl-storyslider",
+ this._el.container
+ );
+ this._el.filterbar = DOM.create(
+ "div",
+ "tl-filterbar",
+ this._el.container
+ );
+ this._el.filterbar.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
+
+ this._el.timenav = DOM.create(
+ "div",
+ "tl-timenav",
+ this._el.container
+ );
+ this._el.menubar = DOM.create(
+ "div",
+ "tl-menubar",
+ this._el.container
+ );
}
// Knight Lab Logo
- this._el.attribution = DOM.create('div', 'tl-attribution', this._el.container);
- this._el.attribution.innerHTML = "TimelineJS"
+ this._el.attribution = DOM.create(
+ "div",
+ "tl-attribution",
+ this._el.container
+ );
+ this._el.attribution.innerHTML =
+ "TimelineJS";
// Initial Default Layout
this.options.width = this._el.container.offsetWidth;
@@ -425,11 +688,18 @@ class Timeline {
// this._el.storyslider.style.top = "1px";
// Set TimeNav Height
- this.options.timenav_height = this._calculateTimeNavHeight(this.options.timenav_height);
+ this.options.timenav_height = this._calculateTimeNavHeight(
+ this.options.timenav_height
+ );
// Create TimeNav
- this._timenav = new TimeNav(this._el.timenav, this.config, this.options, this.language);
- this._timenav.on('loaded', this._onTimeNavLoaded, this);
+ this._timenav = new TimeNav(
+ this._el.timenav,
+ this.config,
+ this.options,
+ this.language
+ );
+ this._timenav.on("loaded", this._onTimeNavLoaded, this);
this._timenav.options.height = this.options.timenav_height;
this._timenav.init();
@@ -440,46 +710,167 @@ class Timeline {
}
// Create StorySlider
- this._storyslider = new StorySlider(this._el.storyslider, this.config, this.options, this.language);
- this._el.storyslider.setAttribute('role', 'group');
- this._el.storyslider.setAttribute('aria-label', this._('aria_label_timeline_content'));
- this._storyslider.on('loaded', this._onStorySliderLoaded, this);
+ this._storyslider = new StorySlider(
+ this._el.storyslider,
+ this.config,
+ this.options,
+ this.language
+ );
+ this._el.storyslider.setAttribute("role", "group");
+ this._el.storyslider.setAttribute(
+ "aria-label",
+ this._("aria_label_timeline_content")
+ );
+ this._storyslider.on("loaded", this._onStorySliderLoaded, this);
this._storyslider.init();
// Create Menu Bar
- this._menubar = new MenuBar(this._el.menubar, this._el.container, this.options, this.getLanguage());
+ this._menubar = new MenuBar(
+ this._el.menubar,
+ this._el.container,
+ this.options,
+ this.getLanguage()
+ );
// LAYOUT
if (this.options.layout == "portrait") {
- this.options.storyslider_height = (this.options.height - this.options.timenav_height - 1);
+ this.options.storyslider_height =
+ this.options.height - this.options.timenav_height - 1;
} else {
- this.options.storyslider_height = (this.options.height - 1);
+ this.options.storyslider_height = this.options.height - 1;
}
+ // from this_timenav._group[0].data.label
+ // add to select theme filter all the group
+ let select = this._el.filterbar.querySelector("#FilterTheme");
+ let themes = this._timenav._groups.map((group) => group.data.label);
+ themes.forEach((theme) => {
+ let option = document.createElement("option");
+ option.text = theme;
+ option.value = theme;
+ if (inputFilter.theme === theme) {
+ option.selected = true;
+ }
+ select.add(option);
+ });
// Update Display
this._updateDisplay(this._timenav.options.height, true, 2000);
-
}
_initEvents() {
// TimeNav Events
- this._timenav.on('change', this._onTimeNavChange, this);
- this._timenav.on('zoomtoggle', this._onZoomToggle, this);
- this._timenav.on('visible_ticks_change', this._onVisibleTicksChange, this);
+ this._timenav.on("change", this._onTimeNavChange, this);
+ this._timenav.on("zoomtoggle", this._onZoomToggle, this);
+ this._timenav.on(
+ "visible_ticks_change",
+ this._onVisibleTicksChange,
+ this
+ );
// StorySlider Events
- this._storyslider.on('change', this._onSlideChange, this);
- this._storyslider.on('colorchange', this._onColorChange, this);
- this._storyslider.on('nav_next', this._onStorySliderNext, this);
- this._storyslider.on('nav_previous', this._onStorySliderPrevious, this);
+ this._storyslider.on("change", this._onSlideChange, this);
+ this._storyslider.on("colorchange", this._onColorChange, this);
+ this._storyslider.on("nav_next", this._onStorySliderNext, this);
+ this._storyslider.on("nav_previous", this._onStorySliderPrevious, this);
// Menubar Events
- this._menubar.on('zoom_in', this._onZoomIn, this);
- this._menubar.on('zoom_out', this._onZoomOut, this);
- this._menubar.on('forward_to_end', this._onForwardToEnd, this);
- this._menubar.on('back_to_start', this._onBackToStart, this);
+ this._menubar.on("zoom_in", this._onZoomIn, this);
+ this._menubar.on("zoom_out", this._onZoomOut, this);
+ this._menubar.on("forward_to_end", this._onForwardToEnd, this);
+ this._menubar.on("back_to_start", this._onBackToStart, this);
+
+ // Filter Events
+ this._el.filterbar
+ .querySelector("#filter-button")
+ .addEventListener("click", this._onFilter.bind(this));
+ this._el.filterbar
+ .querySelector("#filter-button-reset")
+ .addEventListener("click", this._onResetFilter.bind(this));
+ document
+ .getElementById("FilterKeyword")
+ .addEventListener("change", function () {
+ inputFilter.keyword = this.value;
+ console.log(inputFilter.keyword); // For debugging
+ });
+ document
+ .getElementById("FilterDateDebut")
+ .addEventListener("change", function () {
+ inputFilter.date.debut = this.value;
+ console.log(inputFilter.date.debut); // For debugging
+ });
+ document
+ .getElementById("FilterDateFin")
+ .addEventListener("change", function () {
+ inputFilter.date.fin = this.value;
+ console.log(inputFilter.date.fin); // For debugging
+ });
+ document
+ .getElementById("FilterTheme")
+ .addEventListener("change", function () {
+ inputFilter.theme = this.value;
+ });
+ }
+
+ _onFilter() {
+ const keyword = this._el.filterbar
+ .querySelector("#FilterKeyword")
+ .value.toLowerCase();
+ const date_debut = this._el.filterbar
+ .querySelector("#FilterDateDebut")
+ .value.toLowerCase();
+
+ const date_fin = this._el.filterbar
+ .querySelector("#FilterDateFin")
+ .value.toLowerCase();
+
+ const theme = this._el.filterbar
+ .querySelector("#FilterTheme")
+ .value.toLowerCase();
+
+ if (
+ keyword === "" &&
+ date_debut === "" &&
+ date_fin === "" &&
+ theme === ""
+ ) {
+ this._initData(this.options.url);
+ return;
+ }
+
+ this._initFilteredData(this.config, {
+ keyword: keyword,
+ date: {
+ debut: date_debut,
+ fin: date_fin,
+ },
+ theme: theme,
+ });
+
+ const events = this.config.events;
+ const firstIndex = events.findIndex(
+ (event) => !event.unique_id.startsWith("tl-")
+ );
+
+ if (firstIndex !== -1) {
+ this.goToId(events[firstIndex].unique_id);
+ }
+ }
+
+ _onResetFilter() {
+ // Clear filter
+ inputFilter = {
+ keyword: "",
+ theme: "",
+ date: {
+ debut: "",
+ fin: "",
+
+ },
+ };
+ this._initData(this.options.url);
+ return;
}
_onColorChange(e) {
@@ -508,11 +899,8 @@ class Timeline {
} else if (e.zoom == "out") {
this._menubar.toogleZoomOut(e.show);
}
-
}
-
-
_onChange(e) {
this.fire("change", { unique_id: this.current_id }, this);
if (this.options.hash_bookmark && this.current_id) {
@@ -536,12 +924,20 @@ class Timeline {
_onZoomIn(e) {
this._timenav.zoomIn();
- this.fire("zoom_in", { zoom_level: this._timenav.options.scale_factor }, this);
+ this.fire(
+ "zoom_in",
+ { zoom_level: this._timenav.options.scale_factor },
+ this
+ );
}
_onZoomOut(e) {
this._timenav.zoomOut();
- this.fire("zoom_out", { zoom_level: this._timenav.options.scale_factor }, this);
+ this.fire(
+ "zoom_out",
+ { zoom_level: this._timenav.options.scale_factor },
+ this
+ );
}
_onTimeNavLoaded() {
@@ -562,7 +958,6 @@ class Timeline {
this.fire("nav_previous", e);
}
-
_updateDisplay(timenav_height, animate, d) {
var duration = this.options.duration,
display_class = this.options.base_class,
@@ -596,37 +991,48 @@ class Timeline {
if (Browser.mobile) {
display_class += " tl-mobile";
// Set TimeNav Height
- this.options.timenav_height = this._calculateTimeNavHeight(timenav_height, this.options.timenav_mobile_height_percentage);
+ this.options.timenav_height = this._calculateTimeNavHeight(
+ timenav_height,
+ this.options.timenav_mobile_height_percentage
+ );
} else {
// Set TimeNav Height
- this.options.timenav_height = this._calculateTimeNavHeight(timenav_height);
+ this.options.timenav_height =
+ this._calculateTimeNavHeight(timenav_height);
}
// LAYOUT
if (this.options.layout == "portrait") {
// Portrait
display_class += " tl-layout-portrait";
-
} else {
// Landscape
display_class += " tl-layout-landscape";
-
}
// Set StorySlider Height
- this.options.storyslider_height = (this.options.height - this.options.timenav_height);
+ this.options.storyslider_height =
+ this.options.height - this.options.timenav_height;
// Positon Menu
if (this.options.timenav_position == "top") {
- menu_position = (Math.ceil(this.options.timenav_height) / 2) - (this._el.menubar.offsetHeight / 2) - (39 / 2);
+ menu_position =
+ Math.ceil(this.options.timenav_height) / 2 -
+ this._el.menubar.offsetHeight / 2 -
+ 39 / 2;
} else {
- menu_position = Math.round(this.options.storyslider_height + 1 + (Math.ceil(this.options.timenav_height) / 2) - (this._el.menubar.offsetHeight / 2) - (35 / 2));
+ menu_position = Math.round(
+ this.options.storyslider_height +
+ 1 +
+ Math.ceil(this.options.timenav_height) / 2 -
+ this._el.menubar.offsetHeight / 2 -
+ 35 / 2
+ );
}
-
if (animate) {
-
- this._el.timenav.style.height = Math.ceil(this.options.timenav_height) + "px";
+ this._el.timenav.style.height =
+ Math.ceil(this.options.timenav_height) + "px";
// Animate StorySlider
if (this.animator_storyslider) {
@@ -635,7 +1041,7 @@ class Timeline {
this.animator_storyslider = Animate(this._el.storyslider, {
height: this.options.storyslider_height + "px",
duration: duration / 2,
- easing: easeOutStrong
+ easing: easeOutStrong,
});
// Animate Menubar
@@ -646,15 +1052,16 @@ class Timeline {
this.animator_menubar = Animate(this._el.menubar, {
top: menu_position + "px",
duration: duration / 2,
- easing: easeOutStrong
+ easing: easeOutStrong,
});
-
} else {
// TimeNav
- this._el.timenav.style.height = Math.ceil(this.options.timenav_height) + "px";
+ this._el.timenav.style.height =
+ Math.ceil(this.options.timenav_height) + "px";
// StorySlider
- this._el.storyslider.style.height = this.options.storyslider_height + "px";
+ this._el.storyslider.style.height =
+ this.options.storyslider_height + "px";
// Menubar
this._el.menubar.style.top = menu_position + "px";
@@ -664,54 +1071,71 @@ class Timeline {
this.message.updateDisplay(this.options.width, this.options.height);
}
// Update Component Displays
- this._timenav.updateDisplay(this.options.width, this.options.timenav_height, animate);
- this._storyslider.updateDisplay(this.options.width, this.options.storyslider_height, animate, this.options.layout);
-
- if (this.language.direction == 'rtl') {
- display_class += ' tl-rtl';
+ this._timenav.updateDisplay(
+ this.options.width,
+ this.options.timenav_height,
+ animate
+ );
+ this._storyslider.updateDisplay(
+ this.options.width,
+ this.options.storyslider_height,
+ animate,
+ this.options.layout
+ );
+
+ if (this.language.direction == "rtl") {
+ display_class += " tl-rtl";
}
-
// Apply class
this._el.container.className = display_class;
-
}
/**
- * Compute the height of the navigation section of the Timeline, taking
- * into account the possibility of an explicit height or height
- * percentage, but also honoring the `timenav_height_min` option
- * value. If `timenav_height` is specified it takes precedence over
- * `timenav_height_percentage` but in either case, if the resultant
- * pixel height is less than `options.timenav_height_min` then the
- * value of `options.timenav_height_min` will be returned. (A minor
- * adjustment is made to the returned value to account for marker
+ * Compute the height of the navigation section of the Timeline, taking
+ * into account the possibility of an explicit height or height
+ * percentage, but also honoring the `timenav_height_min` option
+ * value. If `timenav_height` is specified it takes precedence over
+ * `timenav_height_percentage` but in either case, if the resultant
+ * pixel height is less than `options.timenav_height_min` then the
+ * value of `options.timenav_height_min` will be returned. (A minor
+ * adjustment is made to the returned value to account for marker
* padding.)
- *
+ *
* @param {number} [timenav_height] - an integer value for the desired height in pixels
* @param {number} [timenav_height_percentage] - an integer between 1 and 100
*/
_calculateTimeNavHeight(timenav_height, timenav_height_percentage) {
-
var height = 0;
if (timenav_height) {
height = timenav_height;
} else {
- if (this.options.timenav_height_percentage || timenav_height_percentage) {
+ if (
+ this.options.timenav_height_percentage ||
+ timenav_height_percentage
+ ) {
if (timenav_height_percentage) {
- height = Math.round((this.options.height / 100) * timenav_height_percentage);
+ height = Math.round(
+ (this.options.height / 100) * timenav_height_percentage
+ );
} else {
- height = Math.round((this.options.height / 100) * this.options.timenav_height_percentage);
+ height = Math.round(
+ (this.options.height / 100) *
+ this.options.timenav_height_percentage
+ );
}
-
}
}
// Set new minimum based on how many rows needed
if (this._timenav.ready) {
- if (this.options.timenav_height_min < this._timenav.getMinimumHeight()) {
- this.options.timenav_height_min = this._timenav.getMinimumHeight();
+ if (
+ this.options.timenav_height_min <
+ this._timenav.getMinimumHeight()
+ ) {
+ this.options.timenav_height_min =
+ this._timenav.getMinimumHeight();
}
}
@@ -720,26 +1144,37 @@ class Timeline {
height = this.options.timenav_height_min;
}
- height = height - (this.options.marker_padding * 2);
+ height = height - this.options.marker_padding * 2;
return height;
}
_validateOptions() {
// assumes that this.options and this.config have been set.
- var INTEGER_PROPERTIES = ['timenav_height', 'timenav_height_min', 'marker_height_min', 'marker_width_min', 'marker_padding', 'start_at_slide', 'slide_padding_lr'];
+ var INTEGER_PROPERTIES = [
+ "timenav_height",
+ "timenav_height_min",
+ "marker_height_min",
+ "marker_width_min",
+ "marker_padding",
+ "start_at_slide",
+ "slide_padding_lr",
+ ];
for (var i = 0; i < INTEGER_PROPERTIES.length; i++) {
var opt = INTEGER_PROPERTIES[i];
var value = this.options[opt];
let valid = true;
- if (typeof(value) == 'number') {
- valid = (value == parseInt(value))
- } else if (typeof(value) == "string") {
- valid = (value.match(/^\s*(\-?\d+)?\s*$/));
+ if (typeof value == "number") {
+ valid = value == parseInt(value);
+ } else if (typeof value == "string") {
+ valid = value.match(/^\s*(\-?\d+)?\s*$/);
}
if (!valid) {
- this.config.logError({ message_key: 'invalid_integer_option', detail: opt });
+ this.config.logError({
+ message_key: "invalid_integer_option",
+ detail: opt,
+ });
}
}
}
@@ -747,9 +1182,9 @@ class Timeline {
/**
* Given a slide identifier, return the zero-based positional index of
* that slide. If this timeline has a 'title' slide, it is at position 0
- * and all other slides are numbered after that. If there is no 'title'
+ * and all other slides are numbered after that. If there is no 'title'
* slide, then the first event slide is at position 0.
- * @param {String} id
+ * @param {String} id
*/
_getSlideIndex(id) {
if (this.config) {
@@ -769,10 +1204,10 @@ class Timeline {
* Given a slide identifier, return the zero-based positional index of that slide.
* Does not take the existence of a 'title' slide into account, so if there is a title
* slide, this value should be one less than calling `_getSlideIndex` with the same
- * identifier. If there is no title slide, `_getSlideIndex` and `_getEventIndex`
+ * identifier. If there is no title slide, `_getSlideIndex` and `_getEventIndex`
* should return the same value.
* TODO: does it really make sense to have both `_getSlideIndex` and `_getEventIndex`?
- * @param {String} id
+ * @param {String} id
*/
_getEventIndex(id) {
for (var i = 0; i < this.config.events.length; i++) {
@@ -787,7 +1222,10 @@ class Timeline {
if (this._loaded.storyslider && this._loaded.timenav) {
this.fire("loaded", this.config);
// Go to proper slide
- if (isTrue(this.options.start_at_end) || this.options.start_at_slide > this.config.events.length) {
+ if (
+ isTrue(this.options.start_at_end) ||
+ this.options.start_at_slide > this.config.events.length
+ ) {
this.goToEnd();
} else {
this.goTo(this.options.start_at_slide);
@@ -799,26 +1237,38 @@ class Timeline {
this._updateHashBookmark(this.current_id);
}
let the_timeline = this;
- window.addEventListener('hashchange', function() {
- if (window.location.hash.indexOf('#event-') == 0) {
- the_timeline.goToId(window.location.hash.replace("#event-", ""));
- }
- }, false);
+ window.addEventListener(
+ "hashchange",
+ function () {
+ if (window.location.hash.indexOf("#event-") == 0) {
+ the_timeline.goToId(
+ window.location.hash.replace("#event-", "")
+ );
+ }
+ },
+ false
+ );
}
-
}
}
// Update hashbookmark in the url bar
_updateHashBookmark(id) {
- if (id) { // TODO: validate the id...
+ if (id) {
+ // TODO: validate the id...
var hash = "#" + "event-" + id.toString();
window.history.replaceState(null, "Browsing TimelineJS", hash);
- this.fire("hash_updated", { unique_id: this.current_id, hashbookmark: "#" + "event-" + id.toString() }, this);
+ this.fire(
+ "hash_updated",
+ {
+ unique_id: this.current_id,
+ hashbookmark: "#" + "event-" + id.toString(),
+ },
+ this
+ );
}
}
-
/*
PUBLIC API
This has been minimally tested since most people use TimelineJS as an embed.
@@ -840,7 +1290,6 @@ class Timeline {
// Goto slide with id
goToId(id) {
if (this.current_id != id) {
-
this.current_id = id;
this._timenav.goToId(this.current_id);
this._storyslider.goToId(this.current_id, false, true);
@@ -865,10 +1314,10 @@ class Timeline {
this.goToId(this.config.events[n].unique_id);
}
} catch {
- // because n is interpreted differently depending on
+ // because n is interpreted differently depending on
// whether there's a title slide, easier to use catch
// to handle navigating beyond end instead of test before
- return
+ return;
}
}
@@ -984,7 +1433,7 @@ class Timeline {
if (this.ready) {
this._updateDisplay();
} else {
- trace('updateDisplay called but timeline is not in ready state')
+ trace("updateDisplay called but timeline is not in ready state");
}
}
@@ -993,37 +1442,48 @@ class Timeline {
}
_initGoogleAnalytics() {
- (function(i, s, o, g, r, a, m) {
- i['GoogleAnalyticsObject'] = r;
- i[r] = i[r] || function() {
- (i[r].q = i[r].q || []).push(arguments)
- }, i[r].l = 1 * new Date();
- a = s.createElement(o), m = s.getElementsByTagName(o)[0];
+ (function (i, s, o, g, r, a, m) {
+ i["GoogleAnalyticsObject"] = r;
+ (i[r] =
+ i[r] ||
+ function () {
+ (i[r].q = i[r].q || []).push(arguments);
+ }),
+ (i[r].l = 1 * new Date());
+ (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
- m.parentNode.insertBefore(a, m)
- })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-
- ga('create', this.options.ga_property_id, 'auto');
- ga('set', 'anonymizeIp', true);
+ m.parentNode.insertBefore(a, m);
+ })(
+ window,
+ document,
+ "script",
+ "//www.google-analytics.com/analytics.js",
+ "ga"
+ );
+
+ ga("create", this.options.ga_property_id, "auto");
+ ga("set", "anonymizeIp", true);
}
_initAnalytics() {
- if (this.options.ga_property_id === null) { return; }
+ if (this.options.ga_property_id === null) {
+ return;
+ }
this._initGoogleAnalytics();
- ga('send', 'pageview');
+ ga("send", "pageview");
var events = this.options.track_events;
for (let i = 0; i < events.length; i++) {
var event_ = events[i];
- this.addEventListener(event_, function(e) {
- ga('send', 'event', e.type, 'clicked');
+ this.addEventListener(event_, function (e) {
+ ga("send", "event", e.type, "clicked");
});
}
- }
+ }
}
-classMixin(Timeline, I18NMixins, Events)
+classMixin(Timeline, I18NMixins, Events);
-export { Timeline }
+export { Timeline };
diff --git a/src/js/timenav/AxisHelper.js b/src/js/timenav/AxisHelper.js
old mode 100644
new mode 100755
index 2a179204e..dca8a86c8
--- a/src/js/timenav/AxisHelper.js
+++ b/src/js/timenav/AxisHelper.js
@@ -32,7 +32,6 @@ class AxisHelper {
}
_getTicks(timescale, option) {
-
var factor_scale = timescale._scaled_padding * option.factor;
var first_tick_time = timescale._earliest - factor_scale;
var last_tick_time = timescale._latest + factor_scale;
diff --git a/src/js/timenav/TimeAxis.js b/src/js/timenav/TimeAxis.js
old mode 100644
new mode 100755
index 810cd7043..f4009d1c0
--- a/src/js/timenav/TimeAxis.js
+++ b/src/js/timenav/TimeAxis.js
@@ -1,23 +1,23 @@
-import { classMixin, mergeData } from "../core/Util"
-import Events from "../core/Events"
-import { DOMMixins } from "../dom/DOMMixins"
-import { I18NMixins } from "../language/I18NMixins"
+import { classMixin, mergeData } from "../core/Util";
+import Events from "../core/Events";
+import { DOMMixins } from "../dom/DOMMixins";
+import { I18NMixins } from "../language/I18NMixins";
import { easeInSpline } from "../animation/Ease";
-import * as DOM from "../dom/DOM"
+import * as DOM from "../dom/DOM";
function isInHorizontalViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.left >= 0 &&
- rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+ rect.right <=
+ (window.innerWidth || document.documentElement.clientWidth)
);
}
export class TimeAxis {
constructor(elem, options, language) {
-
if (language) {
- this.setLanguage(language)
+ this.setLanguage(language);
}
// DOM Elements
this._el = {
@@ -32,10 +32,9 @@ export class TimeAxis {
// State
this._state = {
- loaded: false
+ loaded: false,
};
-
// Data
this.data = {};
@@ -44,7 +43,7 @@ export class TimeAxis {
duration: 1000,
ease: easeInSpline,
width: 600,
- height: 600
+ height: 600,
};
// Actively Displaying
@@ -62,8 +61,10 @@ export class TimeAxis {
// Minor tick dom element array
this.major_ticks = [];
+ this.max_scale = false;
+
// Main element
- if (typeof elem === 'object') {
+ if (typeof elem === "object") {
this._el.container = elem;
} else {
this._el.container = DOM.get(elem);
@@ -74,18 +75,13 @@ export class TimeAxis {
this._initLayout();
this._initEvents();
-
}
/* Adding, Hiding, Showing etc
================================================== */
- show() {
+ show() {}
- }
-
- hide() {
-
- }
+ hide() {}
addTo(container) {
container.appendChild(this._el.container);
@@ -104,7 +100,6 @@ export class TimeAxis {
}
drawTicks(timescale, optimal_tick_width) {
-
var ticks = timescale.getTicks();
// FADE OUT
@@ -114,25 +109,36 @@ export class TimeAxis {
this._el.minor.style.opacity = 0;
// CREATE MAJOR TICKS
- this.major_ticks = this._createTickElements(
- ticks['major'].ticks,
- this._el.major,
- timescale.getAxisTickDateFormat(ticks['major'].name)
- );
+ if (!this.max_scale) {
+ this.major_ticks = this._createTickElements(
+ ticks["major"].ticks,
+ this._el.major,
+ timescale.getAxisTickDateFormat(ticks["major"].name)
+ );
+
+ // CREATE MINOR TICKS
+
+ this.minor_ticks = this._createTickElements(
+ ticks["minor"].ticks,
+ this._el.minor,
+ timescale.getAxisTickDateFormat(ticks["minor"].name),
+ ticks["major"].ticks
+ );
+ }
- // CREATE MINOR TICKS
- this.minor_ticks = this._createTickElements(
- ticks['minor'].ticks,
- this._el.minor,
- timescale.getAxisTickDateFormat(ticks['minor'].name),
- ticks['major'].ticks
- );
+ if (this.options) {
+ if (timescale._axis_helper.minor.name == this.options.max_range) {
+ this.max_scale = true;
+ }
+ }
this.positionTicks(timescale, optimal_tick_width, true);
// FADE IN
- this._el.major.className = "tl-timeaxis-major tl-animate-opacity tl-timeaxis-animate-opacity";
- this._el.minor.className = "tl-timeaxis-minor tl-animate-opacity tl-timeaxis-animate-opacity";
+ this._el.major.className =
+ "tl-timeaxis-major tl-animate-opacity tl-timeaxis-animate-opacity";
+ this._el.minor.className =
+ "tl-timeaxis-minor tl-animate-opacity tl-timeaxis-animate-opacity";
this._el.major.style.opacity = 1;
this._el.minor.style.opacity = 1;
}
@@ -140,7 +146,6 @@ export class TimeAxis {
_createTickElements(ts_ticks, tick_element, dateformat, ticks_to_skip) {
tick_element.innerHTML = "";
var skip_times = {};
-
var yearZero = new Date(-1, 13, -30);
skip_times[yearZero.getTime()] = true;
@@ -150,21 +155,28 @@ export class TimeAxis {
}
}
- var tick_elements = []
+ var tick_elements = [];
for (var i = 0; i < ts_ticks.length; i++) {
var ts_tick = ts_ticks[i];
if (!(ts_tick.getTime() in skip_times)) {
var tick = DOM.create("div", "tl-timeaxis-tick", tick_element),
- tick_text = DOM.create("span", "tl-timeaxis-tick-text tl-animate-opacity", tick);
-
- let tick_display_date = ts_tick.getDisplayDate(this.getLanguage(), dateformat)
+ tick_text = DOM.create(
+ "span",
+ "tl-timeaxis-tick-text tl-animate-opacity",
+ tick
+ );
+
+ let tick_display_date = ts_tick.getDisplayDate(
+ this.getLanguage(),
+ dateformat
+ );
tick_text.innerHTML = tick_display_date;
tick_elements.push({
tick: tick,
tick_text: tick_text,
display_date: tick_display_date,
- date: ts_tick
+ date: ts_tick,
});
}
}
@@ -172,7 +184,6 @@ export class TimeAxis {
}
positionTicks(timescale, optimal_tick_width, no_animate) {
-
// Handle Animation
if (no_animate) {
this._el.major.className = "tl-timeaxis-major";
@@ -182,31 +193,43 @@ export class TimeAxis {
this._el.minor.className = "tl-timeaxis-minor tl-timeaxis-animate";
}
- this._positionTickArray(this.major_ticks, timescale, optimal_tick_width);
- this._positionTickArray(this.minor_ticks, timescale, optimal_tick_width);
-
+ this._positionTickArray(
+ this.major_ticks,
+ timescale,
+ optimal_tick_width
+ );
+ this._positionTickArray(
+ this.minor_ticks,
+ timescale,
+ optimal_tick_width
+ );
}
_positionTickArray(tick_array, timescale, optimal_tick_width) {
// Poition Ticks & Handle density of ticks
if (tick_array[1] && tick_array[0]) {
- var distance = (timescale.getPosition(tick_array[1].date.getMillisecond()) - timescale.getPosition(tick_array[0].date.getMillisecond())),
+ var distance =
+ timescale.getPosition(tick_array[1].date.getMillisecond()) -
+ timescale.getPosition(tick_array[0].date.getMillisecond()),
fraction_of_array = 1;
-
if (distance < optimal_tick_width) {
- fraction_of_array = Math.round(optimal_tick_width / timescale.getPixelsPerTick());
+ fraction_of_array = Math.round(
+ optimal_tick_width / timescale.getPixelsPerTick()
+ );
}
var show = 1;
for (var i = 0; i < tick_array.length; i++) {
-
var tick = tick_array[i];
// Poition Ticks
- tick.tick.style.left = timescale.getPosition(tick.date.getMillisecond()) + "px";
- tick.tick_text.innerHTML = tick.display_date;
+ tick.tick.style.left =
+ timescale.getPosition(tick.date.getMillisecond()) + "px";
+ if (tick.tick_text.innerHTML != tick.display_date) {
+ tick.tick_text.innerHTML = tick.display_date;
+ }
// Handle density of ticks
if (fraction_of_array > 1) {
@@ -217,13 +240,13 @@ export class TimeAxis {
} else {
show++;
tick.tick_text.style.opacity = 0;
- tick.tick.className = "tl-timeaxis-tick tl-timeaxis-tick-hidden";
+ tick.tick.className =
+ "tl-timeaxis-tick tl-timeaxis-tick-hidden";
}
} else {
tick.tick_text.style.opacity = 1;
tick.tick.className = "tl-timeaxis-tick";
}
-
}
}
}
@@ -231,36 +254,44 @@ export class TimeAxis {
getVisibleTicks() {
return {
major: this._getVisibleTickArray(this.major_ticks),
- minor: this._getVisibleTickArray(this.minor_ticks)
- }
+ minor: this._getVisibleTickArray(this.minor_ticks),
+ };
}
_getVisibleTickArray(tick_array) {
- return tick_array.filter(({ tick }) => isInHorizontalViewport(tick))
+ return tick_array.filter(({ tick }) => isInHorizontalViewport(tick));
}
/* Events
================================================== */
-
/* Private Methods
================================================== */
_initLayout() {
- this._el.content_container = DOM.create("div", "tl-timeaxis-content-container", this._el.container);
- this._el.major = DOM.create("div", "tl-timeaxis-major", this._el.content_container);
- this._el.minor = DOM.create("div", "tl-timeaxis-minor", this._el.content_container);
+ this._el.content_container = DOM.create(
+ "div",
+ "tl-timeaxis-content-container",
+ this._el.container
+ );
+ this._el.major = DOM.create(
+ "div",
+ "tl-timeaxis-major",
+ this._el.content_container
+ );
+ this._el.minor = DOM.create(
+ "div",
+ "tl-timeaxis-minor",
+ this._el.content_container
+ );
// Fire event that the slide is loaded
this.onLoaded();
}
- _initEvents() {
-
- }
+ _initEvents() {}
// Update Display
_updateDisplay(width, height, layout) {
-
if (width) {
this.options.width = width;
}
@@ -268,9 +299,7 @@ export class TimeAxis {
if (height) {
this.options.height = height;
}
-
}
-
}
-classMixin(TimeAxis, Events, DOMMixins, I18NMixins)
\ No newline at end of file
+classMixin(TimeAxis, Events, DOMMixins, I18NMixins);
diff --git a/src/js/timenav/TimeEra.js b/src/js/timenav/TimeEra.js
old mode 100644
new mode 100755
diff --git a/src/js/timenav/TimeGroup.js b/src/js/timenav/TimeGroup.js
old mode 100644
new mode 100755
index 229aa8ded..1d120223b
--- a/src/js/timenav/TimeGroup.js
+++ b/src/js/timenav/TimeGroup.js
@@ -1,103 +1,102 @@
-import { classMixin, mergeData } from "../core/Util"
-import Events from "../core/Events"
-import { DOMMixins } from "../dom/DOMMixins"
-import { DOMEvent } from "../dom/DOMEvent"
-import * as DOM from "../dom/DOM"
+import { classMixin, mergeData } from "../core/Util";
+import Events from "../core/Events";
+import { DOMMixins } from "../dom/DOMMixins";
+import { DOMEvent } from "../dom/DOMEvent";
+import * as DOM from "../dom/DOM";
export class TimeGroup {
- constructor(data) {
-
- // DOM ELEMENTS
- this._el = {
- parent: {},
- container: {},
- message: {}
- };
-
- //Options
- this.options = {
- width: 600,
- height: 600
- };
-
- // Data
- this.data = {
- label: "",
- rows: 1
- };
-
-
- this._el.container = DOM.create("div", "tl-timegroup");
-
- // Merge Data
- mergeData(this.data, data);
-
- // Animation
- this.animator = {};
-
-
- this._initLayout();
- this._initEvents();
- }
-
- /* Public
+ constructor(data) {
+ // DOM ELEMENTS
+ this._el = {
+ parent: {},
+ container: {},
+ message: {},
+ };
+
+ //Options
+ this.options = {
+ width: 600,
+ height: 600,
+ };
+
+ // Data
+ this.data = {
+ label: "",
+ rows: 1,
+ color: "",
+ };
+
+ this._el.container = DOM.create("div", "tl-timegroup");
+
+ // Merge Data
+ mergeData(this.data, data);
+
+ // Animation
+ this.animator = {};
+
+ this._initLayout();
+ this._initEvents();
+
+ this._el.container.style.backgroundColor = this.data.color;
+ }
+
+ /* Public
================================================== */
-
-
-
- /* Update Display
+
+ /* Update Display
================================================== */
- updateDisplay(w, h) {
-
- }
-
- setRowPosition(n, h) {
- this.options.height = h * this.data.rows;
- this.setPosition({top:n});
- this._el.container.style.height = this.options.height + "px";
-
- }
-
- setAlternateRowColor(alternate, hide) {
- var class_name = "tl-timegroup";
- if (alternate) {
- class_name += " tl-timegroup-alternate";
- }
- if (hide) {
- class_name += " tl-timegroup-hidden";
- }
- this._el.container.className = class_name;
- }
-
- /* Events
+ updateDisplay(w, h) {}
+
+ setRowPosition(n, h) {
+ this.options.height = h * this.data.rows;
+ this.setPosition({ top: n });
+ this._el.container.style.height = this.options.height + "px";
+ }
+
+ setAlternateRowColor(alternate, hide) {
+ var class_name = "tl-timegroup";
+ if (alternate) {
+ class_name += " tl-timegroup-alternate";
+ }
+ if (hide) {
+ class_name += " tl-timegroup-hidden";
+ }
+ this._el.container.className = class_name;
+ }
+
+ /* Events
================================================== */
-
- _onMouseClick() {
- this.fire("clicked", this.options);
- }
+ _onMouseClick() {
+ this.fire("clicked", this.options);
+ }
-
- /* Private Methods
+ /* Private Methods
================================================== */
- _initLayout () {
-
- // Create Layout
- this._el.message = DOM.create("div", "tl-timegroup-message", this._el.container);
- this._el.message.innerHTML = this.data.label;
-
-
- }
-
- _initEvents () {
- DOMEvent.addListener(this._el.container, 'click', this._onMouseClick, this);
- }
-
- // Update Display
- _updateDisplay(width, height, animate) {
-
- }
-
+ _initLayout() {
+ // Create Layout
+ this._el.message = DOM.create(
+ "div",
+ "tl-timegroup-message ",
+ this._el.container
+ );
+
+ //set background color and hover
+ this._el.message.style.backgroundColor = this.data.color;
+ this._el.message.innerHTML = this.data.label;
+ }
+
+ _initEvents() {
+ DOMEvent.addListener(
+ this._el.container,
+ "click",
+ this._onMouseClick,
+ this
+ );
+ }
+
+ // Update Display
+ _updateDisplay(width, height, animate) {}
}
-classMixin(TimeGroup, Events, DOMMixins)
+classMixin(TimeGroup, Events, DOMMixins);
diff --git a/src/js/timenav/TimeMarker.js b/src/js/timenav/TimeMarker.js
old mode 100644
new mode 100755
index f8a1d5b3b..d0b6a251c
--- a/src/js/timenav/TimeMarker.js
+++ b/src/js/timenav/TimeMarker.js
@@ -92,7 +92,6 @@ export class TimeMarker {
/* Adding, Hiding, Showing etc
================================================== */
show() {
-
}
hide() {
@@ -159,7 +158,6 @@ export class TimeMarker {
}
getEndTime() {
-
if (this.data.end_date) {
return this.data.end_date.getTime();
} else {
@@ -210,13 +208,12 @@ export class TimeMarker {
setWidth(w) {
if (this.data.end_date) {
this._el.container.style.width = w + "px";
-
if (w > this.options.marker_width_min) {
this._el.content_container.style.width = w + "px";
- this._el.content_container.className = "tl-timemarker-content-container tl-timemarker-content-container-long";
+ this._el.content_container.className = `tl-timemarker-content-container tl-timemarker-content-container-long ${this.data.id}`;
} else {
this._el.content_container.style.width = this.options.marker_width_min + "px";
- this._el.content_container.className = "tl-timemarker-content-container";
+ this._el.content_container.className = `tl-timemarker-content-container ${this.data.id}`;
}
}
@@ -231,43 +228,69 @@ export class TimeMarker {
this._el.timespan.style.height = remainder + "px";
}
- getFormattedDate() {
- if (trim(this.data.display_date).length > 0) {
- return this.data.display_date;
- }
+ getFormattedDate() {
+ if (trim(this.data.display_date).length > 0) {
+ return this.data.display_date;
+ }
- let date_text = "";
- if (this.data.end_date) {
- date_text = " to " + this.data.end_date.getDisplayDate(this.getLanguage());
- }
- if (this.data.start_date) {
- date_text = (date_text ? "from " : "") + this.data.start_date.getDisplayDate(this.getLanguage()) + date_text;
- }
- return date_text;
- }
+
+ let date_text = "";
+ if (this.data.end_date) {
+ date_text = " to " + this.data.end_date.getDisplayDate(this.getLanguage());
+ }
+ if (this.data.start_date) {
+ date_text = (date_text ? "from " : "") + this.data.start_date.getDisplayDate(this.getLanguage()) + date_text;
+ }
+ return date_text;
+ }
/* Events
================================================== */
_onMarkerClick(e) {
- this.fire("markerclick", { unique_id: this.data.unique_id });
+ $(".tl-timemarker-content-container").removeClass('highlighted');
+ $(this._el.content_container).addClass('highlighted');
+ this.fire("markerclick", { unique_id: this.data.unique_id, zoomLevel: this.data.ZoomOnClick ,parent: this.data.childOf });
+
+ this._setHighlight(this.data.parentOf);
+ this._setHighlight(this.data.childOf);
+ this._initiateTooltip(this.data.parentOf);
+ this._initiateTooltip(this.data.childOf);
+
+ //Change opacity if marker has childs or parents
+ if (!this.data.parentOf.includes('') || !this.data.childOf.includes('')) {
+ $(".tl-timemarker-content-container").not('.highlighted').not('.tl-timemarker-active').css('opacity', 0.1);
+ }
}
- _onMarkerKeydown(e) {
- if (/Space|Enter/.test(e.code)) {
- this.fire("markerclick", { unique_id: this.data.unique_id });
- }
- }
+ _onMarkerKeydown(e) {
+ if (/Space|Enter/.test(e.code)) {
+ this.fire("markerclick", { unique_id: this.data.unique_id });
+ }
+ }
- _onMarkerBlur(e) {
- this.fire("markerblur", { unique_id: this.data.unique_id });
- }
+ _onMarkerBlur(e) {
+ this.fire("markerblur", { unique_id: this.data.unique_id });
+ $(".tl-timemarker-content-container").css('opacity', 1);
+ $(".tl-timemarker-content-container").removeClass('highlighted');
+ this._deinitiateTooltip(this.data.parentOf);
+ this._deinitiateTooltip(this.data.childOf);
+ }
/* Private Methods
================================================== */
_initLayout() {
+
// Create Layout
- this._el.container = DOM.create("div", "tl-timemarker");
- this._el.container.setAttribute('tabindex', '-1');
+ let isHidden = this.data.GroupOrder ? 'hidden' : '';
+ let hasChild = this.data.childOf.includes('') ? '' : 'has-child';
+ let hasParent = this.data.parentOf.includes('') ? '' : 'has-parent';
+ let idMarker = this.data.id;
+ idMarker = idMarker.replace(/\s/g, '');
+
+ this._el.container = DOM.create("div", `tl-timemarker ${isHidden}`);
+ this._el.container.setAttribute('tabindex', '-1');
+
+
if (this.data.unique_id) {
this._el.container.id = this.data.unique_id + "-marker";
@@ -275,12 +298,24 @@ export class TimeMarker {
if (this.data.end_date) {
this.has_end_date = true;
- this._el.container.className = 'tl-timemarker tl-timemarker-with-end';
+ this._el.container.className = `tl-timemarker tl-timemarker-with-end`;
+ }
+
+ this._el.timespan = DOM.create("div", `tl-timemarker-timespan ${isHidden}`, this._el.container);
+ this._el.timespan_content = DOM.create("div", `tl-timemarker-timespan-content ${isHidden} `, this._el.timespan);
+ if (this.data.typeOfLink != "") {
+
+ this._el.tooltip = DOM.create("div", `tl-tooltip-hidden tooltip-${this.data.id}`, this._el.timespan);
+ this._el.tooltip.innerHTML = this.data.typeOfLink;
}
- this._el.timespan = DOM.create("div", "tl-timemarker-timespan", this._el.container);
- this._el.timespan_content = DOM.create("div", "tl-timemarker-timespan-content", this._el.timespan);
- this._el.content_container = DOM.create("div", "tl-timemarker-content-container", this._el.container);
+
+ //Add id to marker
+
+ this._el.content_container = DOM.create("div", `tl-timemarker-content-container ${idMarker} ${hasChild} ${hasParent} ${isHidden} `, this._el.container);
+
+ // Handle color
+ this.data.markerColor != "" ? this._el.content_container.style.backgroundColor = this.data.markerColor : "";
this._el.content = DOM.create("div", "tl-timemarker-content", this._el.content_container);
@@ -304,13 +339,14 @@ export class TimeMarker {
var media_type = lookupMediaType(this.data.media).type;
this._el.media = DOM.create("span", "tl-icon-" + media_type, this._el.media_container);
}
-
}
-
// Text
this._el.text = DOM.create("div", "tl-timemarker-text", this._el.content);
this._text = DOM.create("h2", "tl-headline", this._el.text);
+
+ this.data.markerColor ? this._text.style.color = 'white' : this._text.style.color = 'grey';
+
if (this.data.text.headline && this.data.text.headline != "") {
this._text.innerHTML = unlinkify(this.data.text.headline);
} else if (this.data.text.text && this.data.text.text != "") {
@@ -346,7 +382,57 @@ export class TimeMarker {
}
+ // Handle Hierarchy of highlight
+ _setHighlight(data) {
+ //Handle parent
+ var test =[]
+ for (var i = 0; i < data.length; i++) {
+ //remove space
+ var str = data[i].replace(/\s/g, '');
+ test.push(str)
+ $("." + str).addClass("highlighted");
+ }
+
+
+ }
+ _initiateTooltip(data) {
+ if (!Array.isArray(data)) {
+ return;
+ }
+
+ data.forEach(element => {
+ var str = element.replace(/\s/g, '');
+ $("." + str).mouseenter(function () {
+ $(".tooltip-" + str).removeClass('tl-tooltip-hidden').addClass('tl-tooltip');
+ })
+ $("." + str).mouseleave(function () {
+ setTimeout(function () {
+ $(".tooltip-" + str).removeClass('tl-tooltip').addClass('tl-tooltip-hidden');
+ }, 1000);
+ }
+ )
+ });
+
+ }
+
+ _deinitiateTooltip(data) {
+ if (!Array.isArray(data)) {
+ return;
+ }
+
+ data.forEach(element => {
+ data.forEach(element => {
+ var str = element.replace(/\s/g, '');
+ $("." + str).unbind('mouseenter');
+ })
+ });
+ }
+
+
}
+
+
+
classMixin(TimeMarker, I18NMixins, Events, DOMMixins)
diff --git a/src/js/timenav/TimeNav.js b/src/js/timenav/TimeNav.js
old mode 100644
new mode 100755
index 4d9c90dce..248933a73
--- a/src/js/timenav/TimeNav.js
+++ b/src/js/timenav/TimeNav.js
@@ -1,25 +1,30 @@
-import { classMixin, mergeData, findNextGreater, findNextLesser, isEven, findArrayNumberByUniqueID, trace } from "../core/Util"
-import Events from "../core/Events"
-import { DOMMixins } from "../dom/DOMMixins"
-import { DOMEvent } from "../dom/DOMEvent"
-import * as DOM from "../dom/DOM"
+import {
+ classMixin,
+ mergeData,
+ findNextGreater,
+ findNextLesser,
+ isEven,
+ findArrayNumberByUniqueID,
+ trace,
+} from "../core/Util";
+import Events from "../core/Events";
+import { DOMMixins } from "../dom/DOMMixins";
+import { DOMEvent } from "../dom/DOMEvent";
+import * as DOM from "../dom/DOM";
import { easeInOutQuint } from "../animation/Ease";
-import { TimeScale } from "./TimeScale"
-import { TimeGroup } from "./TimeGroup"
-import { TimeEra } from "./TimeEra"
-import { TimeAxis } from "./TimeAxis"
-import { TimeMarker } from "./TimeMarker"
-import Swipable from "../ui/Swipable"
-import { Animate } from "../animation/Animate"
-import { I18NMixins } from "../language/I18NMixins"
-
-
+import { TimeScale } from "./TimeScale";
+import { TimeGroup } from "./TimeGroup";
+import { TimeEra } from "./TimeEra";
+import { TimeAxis } from "./TimeAxis";
+import { TimeMarker } from "./TimeMarker";
+import Swipable from "../ui/Swipable";
+import { Animate } from "../animation/Animate";
+import { I18NMixins } from "../language/I18NMixins";
export class TimeNav {
-
constructor(elem, timeline_config, options, language) {
- this.language = language
- // DOM ELEMENTS
+ this.language = language;
+ // DOM ELEMENTS
this._el = {
parent: {},
container: {},
@@ -30,22 +35,26 @@ export class TimeNav {
marker_container: {},
marker_item_container: {},
timeaxis: {},
- timeaxis_background: {}
+ timeaxis_background: {},
};
this.collapsed = false;
- if (typeof elem === 'object') {
+ if (typeof elem === "object") {
this._el.container = elem;
} else {
this._el.container = DOM.get(elem);
}
- this._el.container.setAttribute('tabindex', '0');
+ this._el.container.setAttribute("tabindex", "0");
// 'application' role supports predictable control of keyboard input in a complex component
- this._el.container.setAttribute('role', 'application');
- this._el.container.setAttribute('aria-label', this._('aria_label_timeline_navigation'));
- this._el.container.setAttribute('aria-description',
+ this._el.container.setAttribute("role", "application");
+ this._el.container.setAttribute(
+ "aria-label",
+ this._("aria_label_timeline_navigation")
+ );
+ this._el.container.setAttribute(
+ "aria-description",
'Navigate between markers with arrow keys. Press "Home" for the first and "End" for the last markers'
);
@@ -64,7 +73,7 @@ export class TimeNav {
timenav_height_min: 150, // Minimum timenav height
marker_height_min: 30, // Minimum Marker Height
marker_width_min: 100, // Minimum Marker Width
- zoom_sequence: [0.5, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89] // Array of Fibonacci numbers for TimeNav zoom levels http://www.maths.surrey.ac.uk/hosted-sites/R.Knott/Fibonacci/fibtable.html
+ zoom_sequence: [0.5, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89], // Array of Fibonacci numbers for TimeNav zoom levels http://www.maths.surrey.ac.uk/hosted-sites/R.Knott/Fibonacci/fibtable.html
};
// Animation
@@ -111,7 +120,6 @@ export class TimeNav {
// Merge Data and Options
mergeData(this.options, options);
-
}
init() {
@@ -136,7 +144,7 @@ export class TimeNav {
}
this._markers[i].setPosition({ left: pos.start });
this._markers[i].setWidth(pos.width);
- };
+ }
}
/* Update Display
@@ -158,20 +166,28 @@ export class TimeNav {
this._assignRowsToMarkers();
// Size swipable area
- this._el.slider_background.style.width = this.timescale.getPixelWidth() + this.options.width + "px";
- this._el.slider_background.style.left = -(this.options.width / 2) + "px";
- this._el.slider.style.width = this.timescale.getPixelWidth() + this.options.width + "px";
+ this._el.slider_background.style.width =
+ this.timescale.getPixelWidth() + this.options.width + "px";
+ this._el.slider_background.style.left =
+ -(this.options.width / 2) + "px";
+ this._el.slider.style.width =
+ this.timescale.getPixelWidth() + this.options.width + "px";
// Update Swipable constraint
- this._swipable.updateConstraint({ top: false, bottom: false, left: (this.options.width / 2), right: -(this.timescale.getPixelWidth() - (this.options.width / 2)) });
+ this._swipable.updateConstraint({
+ top: false,
+ bottom: false,
+ left: this.options.width / 2,
+ right: -(this.timescale.getPixelWidth() - this.options.width / 2),
+ });
if (reposition_markers) {
- this._drawTimeline()
+ this._drawTimeline();
}
// Go to the current slide
this.goToId(this.current_id, true);
- }
+ }
/* TimeScale
================================================== */
@@ -187,18 +203,22 @@ export class TimeNav {
marker_height_min = 30;
}
if (marker_height_min == 0) {
- trace("marker_height_min option must not be zero.")
+ trace("marker_height_min option must not be zero.");
marker_height_min = 30;
}
- this.max_rows = Math.round((this.options.height - this._el.timeaxis_background.offsetHeight - (this.options.marker_padding)) / marker_height_min);
+ this.max_rows = Math.round(
+ (this.options.height -
+ this._el.timeaxis_background.offsetHeight -
+ this.options.marker_padding) /
+ marker_height_min
+ );
if (this.max_rows < 1) {
this.max_rows = 1;
}
return new TimeScale(this.config, {
display_width: this._el.container.offsetWidth,
screen_multiplier: this.options.scale_factor,
- max_rows: this.max_rows
-
+ max_rows: this.max_rows,
});
}
@@ -207,22 +227,37 @@ export class TimeNav {
this._updateDrawTimeline();
}
- zoomIn() { // move the the next "higher" scale factor
- var new_scale = findNextGreater(this.options.zoom_sequence, this.options.scale_factor);
+ zoomIn() {
+ // move the the next "higher" scale factor
+ var new_scale = findNextGreater(
+ this.options.zoom_sequence,
+ this.options.scale_factor
+ );
this.setZoomFactor(new_scale);
}
- zoomOut() { // move the the next "lower" scale factor
- var new_scale = findNextLesser(this.options.zoom_sequence, this.options.scale_factor);
+ zoomOut() {
+ // move the the next "lower" scale factor
+ var new_scale = findNextLesser(
+ this.options.zoom_sequence,
+ this.options.scale_factor
+ );
this.setZoomFactor(new_scale);
}
setZoom(level) {
var zoom_factor = this.options.zoom_sequence[level];
- if (typeof(zoom_factor) == 'number') {
+
+ if (typeof zoom_factor == "number") {
+ if (this.options.scale_factor != zoom_factor) {
+ this._zoomAnim(zoom_factor);
+ }
this.setZoomFactor(zoom_factor);
} else {
- console.warn("Invalid zoom level. Please use an index number between 0 and " + (this.options.zoom_sequence.length - 1));
+ console.warn(
+ "Invalid zoom level. Please use an index number between 0 and " +
+ (this.options.zoom_sequence.length - 1)
+ );
}
}
@@ -233,7 +268,10 @@ export class TimeNav {
this.fire("zoomtoggle", { zoom: "out", show: true });
}
- if (factor >= this.options.zoom_sequence[this.options.zoom_sequence.length - 1]) {
+ if (
+ factor >=
+ this.options.zoom_sequence[this.options.zoom_sequence.length - 1]
+ ) {
this.fire("zoomtoggle", { zoom: "in", show: false });
} else {
this.fire("zoomtoggle", { zoom: "in", show: true });
@@ -243,24 +281,56 @@ export class TimeNav {
console.warn("Zoom factor must be greater than zero. Using 0.1");
factor = 0.1;
}
+
this.options.scale_factor = factor;
//this._updateDrawTimeline(true);
+
this.goToId(this.current_id, !this._updateDrawTimeline(true), true);
}
+ _zoomAnim(factor) {
+ var loader_background = document.createElement("div");
+ var loader = document.createElement("div");
+ var loader_text = document.createElement("h1");
+ loader_background.className = "loader_background";
+ loader.className = "loader";
+ loader_text.className = "loader_text";
+ loader_text.innerHTML = `Zooming... ${factor}%`;
+ loader_text.appendChild(loader);
+ loader_background.appendChild(loader_text);
+ document.body.appendChild(loader_background);
+
+ //remove after 1 second
+ setTimeout(function () {
+ document.body.removeChild(loader_background);
+ }, 1000);
+ }
+
/* Groups
================================================== */
_createGroups() {
this._groups = [];
var group_labels = this.timescale.getGroupLabels();
+ var group_ordered = this._reorderGroup(group_labels);
if (group_labels) {
this.options.has_groups = true;
- for (var i = 0; i < group_labels.length; i++) {
- this._createGroup(group_labels[i]);
+ for (var i = 0; i < group_ordered.length; i++) {
+ this._createGroup(group_ordered[i]);
}
}
+ }
+ _reorderGroup(groups) {
+ var group_ordered = [];
+ //sort groups by group_order and set the null on to last
+ for (var i = 0; i < groups.length; i++) {
+ var group = groups[i];
+ if (group.group_order) {
+ group_ordered[group.group_order - 1] = group;
+ }
+ }
+ return group_ordered;
}
_createGroup(group_label) {
@@ -271,23 +341,32 @@ export class TimeNav {
_addGroup(group) {
group.addTo(this._el.container);
-
}
_positionGroups() {
if (this.options.has_groups) {
- var available_height = (this.options.height - this._el.timeaxis_background.offsetHeight),
- group_height = Math.floor((available_height / this.timescale.getNumberOfRows()) - this.options.marker_padding),
+ var available_height =
+ this.options.height -
+ this._el.timeaxis_background.offsetHeight,
+ group_height = Math.floor(
+ available_height / this.timescale.getNumberOfRows() -
+ this.options.marker_padding
+ ),
group_labels = this.timescale.getGroupLabels();
-
for (var i = 0, group_rows = 0; i < this._groups.length; i++) {
- var group_y = Math.floor(group_rows * (group_height + this.options.marker_padding));
+ var group_y = Math.floor(
+ group_rows * (group_height + this.options.marker_padding)
+ );
var group_hide = false;
- if (group_y > (available_height - this.options.marker_padding)) {
+ if (group_y > available_height - this.options.marker_padding) {
group_hide = true;
}
- this._groups[i].setRowPosition(group_y, this._calculated_row_height + this.options.marker_padding / 2);
+ this._groups[i].setRowPosition(
+ group_y,
+ this._calculated_row_height +
+ this.options.marker_padding / 2
+ );
this._groups[i].setAlternateRowColor(isEven(i), group_hide);
group_rows += this._groups[i].data.rows; // account for groups spanning multiple rows
@@ -299,8 +378,13 @@ export class TimeNav {
================================================== */
_addMarker(marker) {
marker.addTo(this._el.marker_item_container);
- marker.on('markerclick', this._onMarkerClick, this);
- marker.on('added', this._onMarkerAdded, this);
+ marker.on("markerclick", this._onMarkerClick, this);
+ marker.on("added", this._onMarkerAdded, this);
+ marker.on("filter", this._onMarkerFilter, this);
+ }
+
+ _onMarkerFilter(e) {
+ console.log(e);
}
_createMarker(data, n) {
@@ -330,20 +414,29 @@ export class TimeNav {
}
_calculateMarkerHeight(h) {
- return ((h / this.timescale.getNumberOfRows()) - this.options.marker_padding);
+ return (
+ h / this.timescale.getNumberOfRows() - this.options.marker_padding
+ );
}
_calculateRowHeight(h) {
- return (h / this.timescale.getNumberOfRows());
+ return h / this.timescale.getNumberOfRows();
}
_calculateAvailableHeight() {
- return (this.options.height - this._el.timeaxis_background.offsetHeight - (this.options.marker_padding));
+ return (
+ this.options.height -
+ this._el.timeaxis_background.offsetHeight -
+ this.options.marker_padding
+ );
}
_calculateMinimumTimeNavHeight() {
- return (this.timescale.getNumberOfRows() * this.options.marker_height_min) + this._el.timeaxis_background.offsetHeight + (this.options.marker_padding);
-
+ return (
+ this.timescale.getNumberOfRows() * this.options.marker_height_min +
+ this._el.timeaxis_background.offsetHeight +
+ this.options.marker_padding
+ );
}
getMinimumHeight() {
@@ -354,25 +447,27 @@ export class TimeNav {
var available_height = this._calculateAvailableHeight(),
marker_height = this._calculateMarkerHeight(available_height);
-
this._positionGroups();
- this._calculated_row_height = this._calculateRowHeight(available_height);
+ this._calculated_row_height =
+ this._calculateRowHeight(available_height);
for (var i = 0; i < this._markers.length; i++) {
-
// Set Height
this._markers[i].setHeight(marker_height);
//Position by Row
var row = this.timescale.getPositionInfo(i).row;
- var marker_y = Math.floor(row * (marker_height + this.options.marker_padding)) + this.options.marker_padding;
+ var marker_y =
+ Math.floor(
+ row * (marker_height + this.options.marker_padding)
+ ) + this.options.marker_padding;
- var remainder_height = available_height - marker_y + this.options.marker_padding;
+ var remainder_height =
+ available_height - marker_y + this.options.marker_padding;
this._markers[i].setRowPosition(marker_y, remainder_height);
- };
-
+ }
}
_resetMarkersActive() {
@@ -383,13 +478,13 @@ export class TimeNav {
_resetMarkersBlurListeners() {
for (var i = 0; i < this._markers.length; i++) {
- this._markers[i].off('markerblur', this._onMarkerBlur, this);
+ this._markers[i].off("markerblur", this._onMarkerBlur, this);
}
}
_findMarkerIndex(n) {
var _n = -1;
- if (typeof n == 'string' || n instanceof String) {
+ if (typeof n == "string" || n instanceof String) {
_n = findArrayNumberByUniqueID(n, this._markers, "unique_id", _n);
}
return _n;
@@ -400,29 +495,34 @@ export class TimeNav {
_createEras(array) {
for (var i = 0; i < array.length; i++) {
var data = array[i];
- var era = new TimeEra(data.start_date,
+ var era = new TimeEra(
+ data.start_date,
data.end_date,
data.headline,
- this.options);
+ this.options
+ );
this._eras.push(era);
era.addTo(this._el.marker_item_container);
- era.on('added', this._onEraAdded, this);
+ era.on("added", this._onEraAdded, this);
}
}
_positionEras(fast) {
-
var era_color = 0;
// POSITION X
for (var i = 0; i < this._eras.length; i++) {
var pos = {
start: 0,
end: 0,
- width: 0
+ width: 0,
};
- pos.start = this.timescale.getPosition(this._eras[i].start_date.getTime());
- pos.end = this.timescale.getPosition(this._eras[i].end_date.getTime());
+ pos.start = this.timescale.getPosition(
+ this._eras[i].start_date.getTime()
+ );
+ pos.end = this.timescale.getPosition(
+ this._eras[i].end_date.getTime()
+ );
pos.width = pos.end - pos.start;
if (fast) {
@@ -438,8 +538,7 @@ export class TimeNav {
era_color = 0;
}
this._eras[i].setColor(era_color);
- };
-
+ }
}
/* Public
@@ -471,7 +570,7 @@ export class TimeNav {
var self = this,
_ease = this.options.ease,
_duration = this.options.duration,
- _n = (n < 0) ? 0 : n;
+ _n = n < 0 ? 0 : n;
// Set Marker active state
this._resetMarkersActive();
@@ -482,9 +581,10 @@ export class TimeNav {
this.animateMovement(_n, fast, css_animation, _duration, _ease);
if (n >= 0 && n < this._markers.length) {
- this.current_id = this.current_focused_id = this._markers[n].data.unique_id;
+ this.current_id = this.current_focused_id =
+ this._markers[n].data.unique_id;
} else {
- this.current_id = this.current_focused_id = '';
+ this.current_id = this.current_focused_id = "";
}
this._setLabelWithCurrentMarker();
@@ -497,7 +597,7 @@ export class TimeNav {
focusOn(n, fast, css_animation) {
const _ease = this.options.ease,
_duration = this.options.duration,
- _n = (n < 0) ? 0 : n;
+ _n = n < 0 ? 0 : n;
this.animateMovement(_n, fast, css_animation, _duration, _ease);
@@ -505,13 +605,13 @@ export class TimeNav {
if (n >= 0 && n < this._markers.length) {
this._markers[n].setFocus();
this.current_focused_id = this._markers[n].data.unique_id;
- this._markers[n].on('markerblur', this._onMarkerBlur, this);
+ this._markers[n].on("markerblur", this._onMarkerBlur, this);
}
}
focusNext() {
const n = this._findMarkerIndex(this.current_focused_id);
- if ((n + 1) < this._markers.length) {
+ if (n + 1 < this._markers.length) {
this.focusOn(n + 1);
} else {
this.focusOn(n);
@@ -535,21 +635,24 @@ export class TimeNav {
if (fast) {
this._el.slider.className = "tl-timenav-slider";
- this._el.slider.style.left = -this._markers[n].getLeft() +
- (this.options.width / 2) + "px";
+ this._el.slider.style.left =
+ -this._markers[n].getLeft() + this.options.width / 2 + "px";
} else {
if (css_animation) {
- this._el.slider.className = "tl-timenav-slider tl-timenav-slider-animate";
+ this._el.slider.className =
+ "tl-timenav-slider tl-timenav-slider-animate";
this.animate_css = true;
- this._el.slider.style.left = -this._markers[n].getLeft() +
- (this.options.width / 2) + "px";
+ this._el.slider.style.left =
+ -this._markers[n].getLeft() + this.options.width / 2 + "px";
} else {
this._el.slider.className = "tl-timenav-slider";
this.animator = Animate(this._el.slider, {
- left: -this._markers[n].getLeft() +
- (this.options.width / 2) + "px",
+ left:
+ -this._markers[n].getLeft() +
+ this.options.width / 2 +
+ "px",
duration: duration,
- easing: ease
+ easing: ease,
});
}
}
@@ -557,7 +660,7 @@ export class TimeNav {
if (n >= 0 && n < this._markers.length) {
this.current_id = this._markers[n].data.unique_id;
} else {
- this.current_id = '';
+ this.current_id = "";
}
this._dispatchVisibleTicksChange();
@@ -601,10 +704,44 @@ export class TimeNav {
this.fire("dateRemoved", this.config);
}
+ _removeBlankSpace(data) {
+ let parents = [];
+ for (var i = 0; i < data.length; i++) {
+ let parent = data[i].replace(/\s/g, "");
+ parents.push(parent);
+ }
+ return parents;
+ }
+
_onMarkerClick(e) {
- // Go to the clicked marker
+ if (e.parent) {
+ let parents = this._removeBlankSpace(e.parent);
+
+ for (var i = 0; i < parents.length; i++) {
+ let index = this._markers.findIndex(
+ (x) => x.data.id == parents[i]
+ );
+ if (index == -1) {
+ //skip loop
+ continue;
+ }
+
+ let childs = this._markers[index].data.parentOf;
+ if (childs.length > 0) {
+ childs.map((child) => {
+ //clear space
+ var str = child.replace(/\s/g, "");
+ $("." + str).addClass("highlighted");
+ });
+ }
+ }
+ }
this.goToId(e.unique_id);
this.fire("change", { unique_id: e.unique_id });
+
+ if (e.zoomLevel != "") {
+ this.setZoom(e.zoomLevel);
+ }
}
_onMarkerBlur(e) {
@@ -614,12 +751,14 @@ export class TimeNav {
}
_onMouseScroll(e) {
-
var delta = 0,
scroll_to = 0,
constraint = {
- right: -(this.timescale.getPixelWidth() - (this.options.width / 2)),
- left: this.options.width / 2
+ right: -(
+ this.timescale.getPixelWidth() -
+ this.options.width / 2
+ ),
+ left: this.options.width / 2,
};
if (!e) {
e = window.event;
@@ -629,7 +768,7 @@ export class TimeNav {
}
// Webkit and browsers able to differntiate between up/down and left/right scrolling
- if (typeof e.wheelDeltaX != 'undefined') {
+ if (typeof e.wheelDeltaX != "undefined") {
delta = e.wheelDeltaY / 6;
if (Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY)) {
delta = e.wheelDeltaX / 6;
@@ -645,8 +784,8 @@ export class TimeNav {
e.returnValue = false;
}
// Stop from scrolling too far
- scroll_to = parseInt(this._el.slider.style.left.replace("px", "")) + delta;
-
+ scroll_to =
+ parseInt(this._el.slider.style.left.replace("px", "")) + delta;
if (scroll_to > constraint.left) {
scroll_to = constraint.left;
@@ -660,7 +799,6 @@ export class TimeNav {
}
this._el.slider.style.left = scroll_to + "px";
-
}
_onDragMove(e) {
@@ -668,7 +806,6 @@ export class TimeNav {
this._el.slider.className = "tl-timenav-slider";
this.animate_css = false;
}
-
}
_onKeydown(e) {
@@ -676,27 +813,23 @@ export class TimeNav {
switch (e.key) {
case "ArrowUp":
- case "ArrowRight":
- {
- this.focusNext();
- break;
- }
+ case "ArrowRight": {
+ this.focusNext();
+ break;
+ }
case "ArrowDown":
- case "ArrowLeft":
- {
- this.focusPrevious();
- break;
- }
- case "Home":
- {
- this.focusOn(0);
- break;
- }
- case "End":
- {
- this.focusOn(this._markers.length - 1);
- break;
- }
+ case "ArrowLeft": {
+ this.focusPrevious();
+ break;
+ }
+ case "Home": {
+ this.focusOn(0);
+ break;
+ }
+ case "End": {
+ this.focusOn(this._markers.length - 1);
+ break;
+ }
}
}
@@ -705,14 +838,16 @@ export class TimeNav {
_drawTimeline(fast) {
this.timescale = this._getTimeScale();
- this.timeaxis.drawTicks(this.timescale, this.options.optimal_tick_width);
+ this.timeaxis.drawTicks(
+ this.timescale,
+ this.options.optimal_tick_width
+ );
this.positionMarkers(fast);
this._assignRowsToMarkers();
this._createGroups();
this._positionGroups();
if (this.has_eras) {
-
this._positionEras(fast);
}
}
@@ -726,12 +861,14 @@ export class TimeNav {
var temp_timescale = new TimeScale(this.config, {
display_width: this._el.container.offsetWidth,
screen_multiplier: this.options.scale_factor,
- max_rows: this.max_rows
-
+ max_rows: this.max_rows,
});
- if (this.timescale.getMajorScale() == temp_timescale.getMajorScale() &&
- this.timescale.getMinorScale() == temp_timescale.getMinorScale()) {
+ if (
+ this.timescale.getMajorScale() ==
+ temp_timescale.getMajorScale() &&
+ this.timescale.getMinorScale() == temp_timescale.getMinorScale()
+ ) {
do_update = true;
}
} else {
@@ -741,7 +878,10 @@ export class TimeNav {
// Perform update or redraw
if (do_update) {
this.timescale = this._getTimeScale();
- this.timeaxis.positionTicks(this.timescale, this.options.optimal_tick_width);
+ this.timeaxis.positionTicks(
+ this.timescale,
+ this.options.optimal_tick_width
+ );
this.positionMarkers();
this._assignRowsToMarkers();
this._positionGroups();
@@ -754,51 +894,110 @@ export class TimeNav {
}
return do_update;
-
}
_setLabelWithCurrentMarker() {
- const currentMarker = this._markers[this._findMarkerIndex(this.current_focused_id)];
- const currentMarkerText = currentMarker && currentMarker.ariaLabel ?
- `, ${currentMarker.ariaLabel}, shown` :
- '';
- this._el.container.setAttribute('aria-label', `Timeline navigation ${currentMarkerText}`);
+ const currentMarker =
+ this._markers[this._findMarkerIndex(this.current_focused_id)];
+ const currentMarkerText =
+ currentMarker && currentMarker.ariaLabel
+ ? `, ${currentMarker.ariaLabel}, shown`
+ : "";
+ this._el.container.setAttribute(
+ "aria-label",
+ `Timeline navigation ${currentMarkerText}`
+ );
}
/* Init
================================================== */
_initLayout() {
// Create Layout
- this._el.line = DOM.create('div', 'tl-timenav-line', this._el.container);
- this._el.slider = DOM.create('div', 'tl-timenav-slider', this._el.container);
- this._el.slider_background = DOM.create('div', 'tl-timenav-slider-background', this._el.slider);
- this._el.marker_container_mask = DOM.create('div', 'tl-timenav-container-mask', this._el.slider);
- this._el.marker_container = DOM.create('div', 'tl-timenav-container', this._el.marker_container_mask);
- this._el.marker_item_container = DOM.create('div', 'tl-timenav-item-container', this._el.marker_container);
- this._el.timeaxis = DOM.create('div', 'tl-timeaxis', this._el.slider);
- this._el.timeaxis_background = DOM.create('div', 'tl-timeaxis-background', this._el.container);
+ this._el.line = DOM.create(
+ "div",
+ "tl-timenav-line",
+ this._el.container
+ );
+ this._el.slider = DOM.create(
+ "div",
+ "tl-timenav-slider",
+ this._el.container
+ );
+ this._el.slider_background = DOM.create(
+ "div",
+ "tl-timenav-slider-background",
+ this._el.slider
+ );
+ this._el.marker_container_mask = DOM.create(
+ "div",
+ "tl-timenav-container-mask",
+ this._el.slider
+ );
+ this._el.marker_container = DOM.create(
+ "div",
+ "tl-timenav-container",
+ this._el.marker_container_mask
+ );
+ this._el.marker_item_container = DOM.create(
+ "div",
+ "tl-timenav-item-container",
+ this._el.marker_container
+ );
+ this._el.timeaxis = DOM.create("div", "tl-timeaxis", this._el.slider);
+ this._el.timeaxis_background = DOM.create(
+ "div",
+ "tl-timeaxis-background",
+ this._el.container
+ );
// Time Axis
- this.timeaxis = new TimeAxis(this._el.timeaxis, this.options, this.language);
+ this.timeaxis = new TimeAxis(
+ this._el.timeaxis,
+ this.options,
+ this.language
+ );
// Swipable
- this._swipable = new Swipable(this._el.slider_background, this._el.slider, {
- enable: { x: true, y: false },
- constraint: { top: false, bottom: false, left: (this.options.width / 2), right: false },
- snap: false
- });
+ this._swipable = new Swipable(
+ this._el.slider_background,
+ this._el.slider,
+ {
+ enable: { x: true, y: false },
+ constraint: {
+ top: false,
+ bottom: false,
+ left: this.options.width / 2,
+ right: false,
+ },
+ snap: false,
+ }
+ );
this._swipable.enable();
-
}
_initEvents() {
// Drag Events
- this._swipable.on('dragmove', this._onDragMove, this);
+ this._swipable.on("dragmove", this._onDragMove, this);
// Scroll Events
- DOMEvent.addListener(this._el.container, 'mousewheel', this._onMouseScroll, this);
- DOMEvent.addListener(this._el.container, 'DOMMouseScroll', this._onMouseScroll, this);
- DOMEvent.addListener(this._el.container, 'keydown', this._onKeydown, this);
+ DOMEvent.addListener(
+ this._el.container,
+ "mousewheel",
+ this._onMouseScroll,
+ this
+ );
+ DOMEvent.addListener(
+ this._el.container,
+ "DOMMouseScroll",
+ this._onMouseScroll,
+ this
+ );
+ DOMEvent.addListener(
+ this._el.container,
+ "keydown",
+ this._onKeydown,
+ this
+ );
}
_initData() {
@@ -811,8 +1010,24 @@ export class TimeNav {
}
this._drawTimeline();
+ var messages = this._el.container.getElementsByClassName(
+ "tl-timegroup-message"
+ );
+
+ let highest_width = 0;
+ for (var i = 0; i < messages.length; i++) {
+ const messageWidth = messages[i].clientWidth;
+ console.log("messageWidth", messageWidth);
+ if (messageWidth > highest_width) {
+ highest_width = messageWidth;
+ }
+ }
+ for (var i = 0; i < messages.length; i++) {
+ const size = highest_width;
+ messages[i].style.width = size + "px";
+ }
}
}
-classMixin(TimeNav, Events, DOMMixins, I18NMixins)
\ No newline at end of file
+classMixin(TimeNav, Events, DOMMixins, I18NMixins);
diff --git a/src/js/timenav/TimeScale.js b/src/js/timenav/TimeScale.js
old mode 100644
new mode 100755
index 1fc26926f..ab0152784
--- a/src/js/timenav/TimeScale.js
+++ b/src/js/timenav/TimeScale.js
@@ -41,6 +41,9 @@ export class TimeScale {
this._pixel_width = this._screen_multiplier * this._display_width;
this._group_labels = undefined;
+ this._group_colors = undefined;
+ this._group_orders = undefined;
+
this._positions = [];
this._pixels_per_milli = 0;
@@ -84,14 +87,24 @@ export class TimeScale {
return 200000; // what is the right handling for cosmo dates?
}
+
+ getGroupOrder(){
+ return this._group_orders;
+ }
+ getGroupColor() {
+ return this._row_colors;
+ }
+
getGroupLabels() {
/*
return an array of objects, one per group, in the order (top to bottom) that the groups are expected to appear. Each object will have two properties:
* label (the string as specified in one or more 'group' properties of events in the configuration)
* rows (the number of rows occupied by events associated with the label. )
*/
+
return (this._group_labels || []);
}
+
getScale() {
return this._scale;
@@ -227,9 +240,12 @@ export class TimeScale {
default_marker_width = default_marker_width || 100;
var groups = [];
+ var colors = [];
+ var group_orders = [];
var empty_group = false;
// Set start/end/width; enumerate groups
+
for (var i = 0; i < slides.length; i++) {
var pos_info = {
start: this.getPosition(slides[i].start_date.getTime())
@@ -251,7 +267,13 @@ export class TimeScale {
if (slides[i].group) {
if (groups.indexOf(slides[i].group) < 0) {
+ var colorLigne = slides[i].GroupColor;
+ var group_order = slides[i].GroupOrder;
+ colors.push(colorLigne);
+ group_orders.push(group_order);
groups.push(slides[i].group);
+
+
}
} else {
empty_group = true;
@@ -268,10 +290,12 @@ export class TimeScale {
// Init group info
var group_info = [];
-
+
for (var i = 0; i < groups.length; i++) {
group_info[i] = {
label: groups[i],
+ color: colors[i],
+ order: group_orders[i],
idx: i,
positions: [],
n_rows: 1, // default
@@ -338,13 +362,14 @@ export class TimeScale {
// Set group labels; offset row positions
this._group_labels = [];
-
+
group_info.sort(function(a, b) { return a.idx - b.idx; });
-
for (var i = 0, row_offset = 0; i < group_info.length; i++) {
this._group_labels.push({
label: group_info[i].label,
- rows: group_info[i].n_rows
+ rows: group_info[i].n_rows,
+ color: group_info[i].color,
+ group_order: group_info[i].order
});
for (var j = 0; j < group_info[i].positions.length; j++) {
diff --git a/src/js/ui/Draggable.js b/src/js/ui/Draggable.js
old mode 100644
new mode 100755
diff --git a/src/js/ui/MenuBar.js b/src/js/ui/MenuBar.js
old mode 100644
new mode 100755
index eec6477d3..2a12a045e
--- a/src/js/ui/MenuBar.js
+++ b/src/js/ui/MenuBar.js
@@ -97,10 +97,10 @@ export class MenuBar {
}
const firstTick = minor_ticks[0];
- const firstYear = firstTick.date.getFullYear();
+ const firstYear = this._getTickYear(firstTick);
const lastTick = minor_ticks[minor_ticks.length - 1];
- const lastYear = lastTick.date.getFullYear();
+ const lastYear = this._getTickYear(lastTick);
this.data.visible_ticks_dates = {
start: firstYear,
@@ -110,6 +110,10 @@ export class MenuBar {
this._updateZoomAriaLabels()
}
+ _getTickYear(tick) {
+ return tick.date.data.date_obj.getFullYear();
+ }
+
setSticky(y) {
this.options.menubar_default_y = y;
}
diff --git a/src/js/ui/Message.js b/src/js/ui/Message.js
old mode 100644
new mode 100755
diff --git a/src/js/ui/Swipable.js b/src/js/ui/Swipable.js
old mode 100644
new mode 100755
diff --git a/src/less/TL.Timeline.Base.less b/src/less/TL.Timeline.Base.less
old mode 100644
new mode 100755
index 64a1f72e6..5cac43986
--- a/src/less/TL.Timeline.Base.less
+++ b/src/less/TL.Timeline.Base.less
@@ -12,7 +12,7 @@
/* Includes
================================================== */
-@import "core/Mixins.less"; // Less shortcuts and functions
+@import "core/Mixins.less"; // Less shortcuts and functions
@import "Typography.less";
// Icons
@@ -27,6 +27,7 @@
@import "ui/TL.Message.less";
@import "timenav/TL.TimeNav.less";
+@import "timenav/TL.TimeFilter.less";
@import "timenav/TL.TimeMarker.less";
@import "timenav/TL.TimeEra.less";
@import "timenav/TL.TimeGroup.less";
@@ -55,48 +56,49 @@
================================================== */
.tl-timeline {
- width:100%;
- height:100%;
- font-size: 16px;
- line-height: normal;
- overflow:hidden;
- position: relative;
- .user-select(none);
- background-color:@color-background;
- color:@color-text;
- -webkit-box-sizing: content-box;
- -moz-box-sizing: content-box;
- box-sizing: content-box;
-
- &.tl-timeline-embed {
- box-sizing:border-box;
- border-top: 1px solid darken(@ui-background-color-darker, 10);
- border-bottom: 1px solid darken(@ui-background-color-darker, 10);
- border-radius: 0;
- }
-
- &.tl-timeline-full-embed {
- box-sizing:border-box;
- border: 1px solid darken(@ui-background-color-darker, 10);
- border-radius: 8px;
- }
+ width: 100%;
+ height: 100%;
+ font-size: 16px;
+ line-height: normal;
+ overflow: hidden;
+ position: relative;
+ .user-select(none);
+ background-color: @color-background;
+ color: @color-text;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+
+ &.tl-timeline-embed {
+ box-sizing: border-box;
+ border-top: 1px solid darken(@ui-background-color-darker, 10);
+ border-bottom: 1px solid darken(@ui-background-color-darker, 10);
+ border-radius: 0;
+ }
+
+ &.tl-timeline-full-embed {
+ box-sizing: border-box;
+ border: 1px solid darken(@ui-background-color-darker, 10);
+ border-radius: 8px;
+ }
.tl-attribution {
cursor: pointer;
- z-index:9;
- position:absolute;
- bottom:2px;
- left:0px;
- font-size:10px;
- line-height:10px;
- font-family:@font-sanserif !important;
+ z-index: 9;
+ position: absolute;
+ bottom: 2px;
+ left: 0px;
+ font-size: 10px;
+ line-height: 10px;
+ font-family: @font-sanserif !important;
background-color: fadeout(@color-background, 15%);
- padding:3px;
+ padding: 3px;
a {
- color:@brand-color;
- &:hover, &:focus-visible {
- color:@color-dark;
+ color: @brand-color;
+ &:hover,
+ &:focus-visible {
+ color: @color-dark;
text-decoration: none;
.tl-knightlab-logo {
background-color: #c34528;
@@ -109,52 +111,63 @@
vertical-align: middle;
height: 8px;
width: 8px;
- margin-right:3px;
- background-color:#c34528;
- background-color:@brand-color;
+ margin-right: 3px;
+ background-color: #c34528;
+ background-color: @brand-color;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
-
}
}
/* Portrait
================================================== */
.tl-layout-portrait {
- .tl-storyslider {
- //padding-top:10px;
- .box-shadow(0px -3px 6px rgba(0,0,0,.20));
- }
+ .tl-storyslider {
+ //padding-top:10px;
+ .box-shadow(0px -3px 6px rgba(0,0,0,0.2));
+ }
}
-.tl-rtl{
- .tl-text-content, .tl-headline, .tl-media-blockquote, .tl-headline-date, .tl-timeline blockquote p, .tl-media-website, .tl-media-wikipedia, .tl-media .tl-media-blockquote blockquote, .blockquote, blockquote p, .tl-text-content p{
- text-align: right;
- direction: rtl;
- }
-
- .tl-slide-media-only{
- .tl-headline, .tl-headline-date{
- text-align: center;
- }
- }
+.tl-rtl {
+ .tl-text-content,
+ .tl-headline,
+ .tl-media-blockquote,
+ .tl-headline-date,
+ .tl-timeline blockquote p,
+ .tl-media-website,
+ .tl-media-wikipedia,
+ .tl-media .tl-media-blockquote blockquote,
+ .blockquote,
+ blockquote p,
+ .tl-text-content p {
+ text-align: right;
+ direction: rtl;
+ }
- .tl-timemarker-text{
- margin-right: 35px;
- }
+ .tl-slide-media-only {
+ .tl-headline,
+ .tl-headline-date {
+ text-align: center;
+ }
+ }
- .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-media-container{
- float:right;
- }
+ .tl-timemarker-text {
+ margin-right: 35px;
+ }
- .tl-caption {
- text-align: right;
- }
+ .tl-timemarker-content-container
+ .tl-timemarker-content
+ .tl-timemarker-media-container {
+ float: right;
+ }
- .tl-credit {
- text-align: left;
- }
+ .tl-caption {
+ text-align: right;
+ }
+ .tl-credit {
+ text-align: left;
+ }
}
diff --git a/src/less/TL.Timeline.less b/src/less/TL.Timeline.less
old mode 100644
new mode 100755
diff --git a/src/less/Typography.less b/src/less/Typography.less
old mode 100644
new mode 100755
index 0ed19ffb9..0de7edd33
--- a/src/less/Typography.less
+++ b/src/less/Typography.less
@@ -4,7 +4,14 @@
h1, h2, h3, h4, h5, h6 {
color:@color-header-text;
}
-
+ h2:hover{
+ color:white!important;
+ }
+ .highlighted h2{
+ color: white !important;
+ }
+
+
h1, h2, h3 {
font-size: @base-font-size-xlarge;
line-height:@base-font-size-xlarge;
@@ -260,12 +267,13 @@
display:block;
font-family: @font-main;
font-style: italic;
- background-color:@note-color-background;
+ background-color:lighten(@color-dark, 90%);
font-size:@base-font-size;
line-height:@base-font-size+2;
padding:10px;
.border-radius(7px);
color: #8a6d3b;
+ background-color: #fcf8e3;
border: 1px solid #faebcc;
text-shadow: none;
}
diff --git a/src/less/Variables.less b/src/less/Variables.less
old mode 100644
new mode 100755
index 051779177..7f0af3bc9
--- a/src/less/Variables.less
+++ b/src/less/Variables.less
@@ -4,112 +4,114 @@
/* ICON PATH
================================================== */
-@icon-path: "../../css/icons/";
+@icon-path: "../../css/icons/";
/* TYPEFACE
================================================== */
-@font-serif: "Georgia", "Times New Roman", Times, serif;
-@font-sanserif: "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-serif: "Georgia", "Times New Roman", Times, serif;
+@font-sanserif: "Helvetica Neue", Helvetica, Arial, sans-serif;
-@font-main: @font-sanserif;
-@font-secondary: @font-serif;
+@font-main: @font-sanserif;
+@font-secondary: @font-serif;
-@base-font-size: 15px;
-@base-font-size-small: 11px;
-@base-font-size-large: 24px;
-@base-font-size-xlarge: 28px;
+@base-font-size: 15px;
+@base-font-size-small: 11px;
+@base-font-size-large: 24px;
+@base-font-size-xlarge: 28px;
-@base-line-height: 1.428571429;
-@base-line-height-computed: floor(@base-font-size * @base-line-height);
+@base-line-height: 1.428571429;
+@base-line-height-computed: floor(@base-font-size * @base-line-height);
/* COLOR SCHEME
================================================== */
-@color-background: #FFF;
-@color-foreground: #333;
-@color-dark: #000;
+@color-background: #fff;
+@color-foreground: #333;
+@color-dark: #000;
+@color-main: #b17669;
-@color-theme: #c34528; //#DA0000;
+@color-theme: #c34528; //#DA0000;
-@color-theme-dark: darken(@color-theme, 15);
+@color-theme-dark: darken(@color-theme, 15);
-@color-theme-complement: spin(@color-theme, 180);
+@color-theme-complement: spin(@color-theme, 180);
-@color-theme-triad1: spin(@color-theme, -135);
-@color-theme-triad2: spin(@color-theme, 135);
+@color-theme-triad1: spin(@color-theme, -135);
+@color-theme-triad2: spin(@color-theme, 135);
-@color-theme-split1: spin(@color-theme, -158);
-@color-theme-split2: spin(@color-theme, 158);
+@color-theme-split1: spin(@color-theme, -158);
+@color-theme-split2: spin(@color-theme, 158);
-@color-text: lighten(@color-foreground,25);
-@color-header-text: @color-dark;
+@color-text: lighten(@color-foreground, 25);
+@color-header-text: @color-dark;
-@color-text-inverted: darken(@color-background,5);
-@color-header-text-inverted: @color-background;
+@color-text-inverted: darken(@color-background, 5);
+@color-header-text-inverted: @color-background;
-@color-text-credit: #999999;
+@color-text-credit: #999999;
/* UI COLOR
================================================== */
-@ui-background-color: darken(@color-background, 5);
-@ui-background-color-darker: darken(@color-background, 10);
-@marker-color: darken(@ui-background-color,5);
-@marker-outline-color: darken(@ui-background-color,10);
-@marker-selected-text-color: @color-background;
-@marker-text-color: darken(@marker-color,15);
-@marker-dot-color: darken(@marker-color, 33);
-@marker-dot-hover-color: darken(@marker-dot-color, 33);
+@ui-background-color: darken(@color-background, 5);
+@ui-background-color-darker: darken(@color-background, 10);
+@marker-color: darken(@ui-background-color, 5);
+@marker-outline-color: darken(@ui-background-color, 10);
+@marker-selected-text-color: @color-background;
+@marker-text-color: darken(@marker-color, 15);
+@marker-dot-color: darken(@marker-color, 33);
+@marker-dot-hover-color: darken(@marker-dot-color, 33);
-@marker-color-menubar-button: darken(@marker-color,15);
+@marker-color-menubar-button: darken(@marker-color, 15);
-@minor-ticks-color: darken(@ui-background-color,20);
-@major-ticks-color: darken(@minor-ticks-color,30);
+@minor-ticks-color: darken(@ui-background-color, 20);
+@major-ticks-color: darken(@minor-ticks-color, 30);
-@minor-ticks-line-color: @minor-ticks-color;
-@major-ticks-line-color: darken(@minor-ticks-line-color,10);
+@minor-ticks-line-color: @minor-ticks-color;
+@major-ticks-line-color: darken(@minor-ticks-line-color, 10);
-@brand-color: darken(@ui-background-color,15);
+@brand-color: darken(@ui-background-color, 15);
-@era-color-1: @color-theme-complement;
-@era-color-2: @color-theme-triad1;
-@era-color-3: @color-theme-triad2;
-@era-color-4: @color-theme-split1;
-@era-color-5: @color-theme-split2;
-@era-color-0: @color-theme;
+@era-color-1: @color-theme-complement;
+@era-color-2: @color-theme-triad1;
+@era-color-3: @color-theme-triad2;
+@era-color-4: @color-theme-split1;
+@era-color-5: @color-theme-split2;
+@era-color-0: @color-theme;
/* UI
================================================== */
-@base-spacing: 15px;
-@arrow-size: 20px;
+@base-spacing: 15px;
+@arrow-size: 20px;
// Note
-@note-color-background: #fcf8e3;
+@note-color-background: #fcf8e3;
// Marker
-@time-marker-border-radius: 4px;
-@marker-icon-size: 24px;
-@marker-dot-offset: 7px;
+@time-marker-border-radius: 4px;
+@marker-icon-size: 24px;
+@marker-dot-offset: 7px;
// Time Axis
-@minor-ticks-width: 50px;
-@major-ticks-width: 100px;
-@minor-ticks-font-size: 11px;
-@major-ticks-font-size: 12px;
-@tick-padding: 2px;
-@axis-height: @minor-ticks-font-size + (@major-ticks-font-size*2) + (@tick-padding*2);
+@minor-ticks-width: 50px;
+@major-ticks-width: 100px;
+@minor-ticks-font-size: 11px;
+@major-ticks-font-size: 12px;
+@tick-padding: 2px;
+@axis-height: @minor-ticks-font-size + (@major-ticks-font-size*2) +
+ (@tick-padding*2);
// SlideNav
-@opacity-slide-nav-title: 15;
-@opacity-slide-nav-desc: 0;
-@opacity-slide-nav-desc-hover: 50;
+@opacity-slide-nav-title: 15;
+@opacity-slide-nav-desc: 0;
+@opacity-slide-nav-desc-hover: 50;
/* Animation
================================================== */
-@animation-ease: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-@animation-duration: 1000ms;
-@animation-duration-fast: 500ms;
+@animation-ease: cubic-bezier(0.77, 0, 0.175, 1);
+@animation-duration: 1000ms;
+@animation-duration-fast: 500ms;
/* GFX
================================================== */
.base-sprite() {
- background-image: url(storymap.png?v1.0);
+ background-image: url(storymap.png?v1.0);
}
diff --git a/src/less/animation/TL.Animate.less b/src/less/animation/TL.Animate.less
old mode 100644
new mode 100755
diff --git a/src/less/core/Mixins.less b/src/less/core/Mixins.less
old mode 100644
new mode 100755
diff --git a/src/less/core/TL.less b/src/less/core/TL.less
old mode 100644
new mode 100755
index 8fdec44c9..386b60325
--- a/src/less/core/TL.less
+++ b/src/less/core/TL.less
@@ -2,6 +2,6 @@
================================================== */
.tl-dragging {
-webkit-touch-callout: none;
-
+
.user-select(none);
-}
\ No newline at end of file
+}
diff --git a/src/less/fonts/_font.base.less b/src/less/fonts/_font.base.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.abril-droidsans.less b/src/less/fonts/font.abril-droidsans.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.amatic-andika.less b/src/less/fonts/font.amatic-andika.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.bevan-pontanosans.less b/src/less/fonts/font.bevan-pontanosans.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.bitter-raleway.less b/src/less/fonts/font.bitter-raleway.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.clicker-garamond.less b/src/less/fonts/font.clicker-garamond.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.dancing-ledger.less b/src/less/fonts/font.dancing-ledger.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.default.less b/src/less/fonts/font.default.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.fjalla-average.less b/src/less/fonts/font.fjalla-average.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.georgia-helvetica.less b/src/less/fonts/font.georgia-helvetica.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.knightlab.less b/src/less/fonts/font.knightlab.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.lustria-lato.less b/src/less/fonts/font.lustria-lato.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.medula-lato.less b/src/less/fonts/font.medula-lato.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.oldstandard.less b/src/less/fonts/font.oldstandard.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.opensans-gentiumbook.less b/src/less/fonts/font.opensans-gentiumbook.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.playfair-faunaone.less b/src/less/fonts/font.playfair-faunaone.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.playfair.less b/src/less/fonts/font.playfair.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.pt.less b/src/less/fonts/font.pt.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.roboto-megrim.less b/src/less/fonts/font.roboto-megrim.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.rufina-sintony.less b/src/less/fonts/font.rufina-sintony.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.ubuntu.less b/src/less/fonts/font.ubuntu.less
old mode 100644
new mode 100755
diff --git a/src/less/fonts/font.unicaone-vollkorn.less b/src/less/fonts/font.unicaone-vollkorn.less
old mode 100644
new mode 100755
diff --git a/src/less/icons/Icons.less b/src/less/icons/Icons.less
old mode 100644
new mode 100755
diff --git a/src/less/media/TL.Media.less b/src/less/media/TL.Media.less
old mode 100644
new mode 100755
diff --git a/src/less/media/types/TL.Media.Blockquote.less b/src/less/media/types/TL.Media.Blockquote.less
old mode 100644
new mode 100755
diff --git a/src/less/media/types/TL.Media.Flickr.less b/src/less/media/types/TL.Media.Flickr.less
old mode 100644
new mode 100755
diff --git a/src/less/media/types/TL.Media.IFrame.less b/src/less/media/types/TL.Media.IFrame.less
old mode 100644
new mode 100755
diff --git a/src/less/media/types/TL.Media.Image.less b/src/less/media/types/TL.Media.Image.less
old mode 100644
new mode 100755
diff --git a/src/less/media/types/TL.Media.Instagram.less b/src/less/media/types/TL.Media.Instagram.less
old mode 100644
new mode 100755
diff --git a/src/less/media/types/TL.Media.Profile.less b/src/less/media/types/TL.Media.Profile.less
old mode 100644
new mode 100755
diff --git a/src/less/media/types/TL.Media.Text.less b/src/less/media/types/TL.Media.Text.less
old mode 100644
new mode 100755
diff --git a/src/less/media/types/TL.Media.Twitter.less b/src/less/media/types/TL.Media.Twitter.less
old mode 100644
new mode 100755
diff --git a/src/less/media/types/TL.Media.Website.less b/src/less/media/types/TL.Media.Website.less
old mode 100644
new mode 100755
diff --git a/src/less/media/types/TL.Media.Wikipedia.less b/src/less/media/types/TL.Media.Wikipedia.less
old mode 100644
new mode 100755
diff --git a/src/less/media/types/TL.Media.YouTube.less b/src/less/media/types/TL.Media.YouTube.less
old mode 100644
new mode 100755
diff --git a/src/less/slider/TL.Slide.less b/src/less/slider/TL.Slide.less
old mode 100644
new mode 100755
index 3c2b0e1e5..fac8791ff
--- a/src/less/slider/TL.Slide.less
+++ b/src/less/slider/TL.Slide.less
@@ -341,3 +341,8 @@
}
}
}
+
+//Custom
+.tl-slidenav-previous,.tl-slidenav-next {
+ z-index: 1050 !important;
+}
diff --git a/src/less/slider/TL.SlideNav.less b/src/less/slider/TL.SlideNav.less
old mode 100644
new mode 100755
diff --git a/src/less/slider/TL.StorySlider.less b/src/less/slider/TL.StorySlider.less
old mode 100644
new mode 100755
index cfa76bb44..9eb3c0af0
--- a/src/less/slider/TL.StorySlider.less
+++ b/src/less/slider/TL.StorySlider.less
@@ -12,7 +12,7 @@
box-sizing:content-box;
//.box-shadow(1px 1px 7px rgba(0,0,0,.30));
- z-index:8;
+ z-index:103 !important;
img, embed, object, video, iframe {
max-width: 100%;
position:relative;
@@ -41,7 +41,7 @@
height: 100%;
//overflow: scroll;
position: relative;
- z-index:5;
+ z-index:500;
.tl-slider-container {
position: absolute;
top: 0px;
diff --git a/src/less/themes/contrast/TL.Theme.Contrast.less b/src/less/themes/contrast/TL.Theme.Contrast.less
old mode 100644
new mode 100755
diff --git a/src/less/themes/contrast/Variables.less b/src/less/themes/contrast/Variables.less
old mode 100644
new mode 100755
index 8e2cc0275..f56106a80
--- a/src/less/themes/contrast/Variables.less
+++ b/src/less/themes/contrast/Variables.less
@@ -48,6 +48,9 @@
@color-text-credit: #686868;
+@color-tooltip-background: #B17669;
+@color-main: #B17669;
+
/* UI COLOR
================================================== */
@ui-background-color: darken(@color-background, 5);
@@ -81,9 +84,6 @@
@base-spacing: 15px;
@arrow-size: 20px;
-// Note
-@note-color-background: #fcf8e3;
-
// Marker
@time-marker-border-radius: 4px;
@marker-icon-size: 24px;
diff --git a/src/less/themes/dark/TL.Theme.Dark.less b/src/less/themes/dark/TL.Theme.Dark.less
old mode 100644
new mode 100755
index 601cfca9d..32e043c0e
--- a/src/less/themes/dark/TL.Theme.Dark.less
+++ b/src/less/themes/dark/TL.Theme.Dark.less
@@ -11,6 +11,6 @@
/* Includes
================================================== */
-@import "Variables.less"; // Variables (easy way to make style changes)
+@import "Variables.less"; // Variables (easy way to make style changes)
@import "../../TL.Timeline.Base.less"; // Base Less File
diff --git a/src/less/themes/dark/Variables.less b/src/less/themes/dark/Variables.less
old mode 100644
new mode 100755
index 46eca718e..de0cff4dc
--- a/src/less/themes/dark/Variables.less
+++ b/src/less/themes/dark/Variables.less
@@ -27,7 +27,7 @@
@color-background: #333;
@color-foreground: #CCC;
@color-dark: #FFF;
-
+@color-main: #B17669;
@color-theme: #c34528; //#DA0000;
@color-theme-dark: darken(@color-theme, 15);
@@ -48,6 +48,10 @@
@color-text-credit: #999999;
+@color-tooltip-background: #B17669;
+@color-main: #B17669;
+
+
/* UI COLOR
================================================== */
@ui-background-color: darken(@color-foreground,50);
diff --git a/src/less/timenav/TL.TimeAxis.less b/src/less/timenav/TL.TimeAxis.less
old mode 100644
new mode 100755
index e783799d7..22f22ccd8
--- a/src/less/timenav/TL.TimeAxis.less
+++ b/src/less/timenav/TL.TimeAxis.less
@@ -6,7 +6,7 @@
position:absolute;
bottom:0;
left:0;
- background-color:@color-background;
+ background-color: @color-main;
border-top: 1px solid darken(@ui-background-color,5);
z-index:2;
}
@@ -73,9 +73,10 @@
z-index:1;
background-color:@color-background;
.tl-timeaxis-tick {
- font-size:@major-ticks-font-size;
+ font-size:15px;
line-height:@major-ticks-font-size + @tick-padding;
- color:@major-ticks-color;
+ font-family: 'PT Sans Narrow', sans-serif;
+ color:white;
width:@major-ticks-width;
margin-left:-(@major-ticks-width/2);
@@ -99,11 +100,11 @@
.tl-timeaxis-tick {
font-size:@minor-ticks-font-size;
line-height:@minor-ticks-font-size + @tick-padding;
- color:@minor-ticks-color;
+ color:white;
width:@minor-ticks-width;
margin-left:-(@minor-ticks-width/2);
.tl-timeaxis-tick-text {
- opacity:0;
+ opacity:100;
white-space: normal;
padding-left:2px;
padding-right:2px;
diff --git a/src/less/timenav/TL.TimeEra.less b/src/less/timenav/TL.TimeEra.less
old mode 100644
new mode 100755
diff --git a/src/less/timenav/TL.TimeFilter.less b/src/less/timenav/TL.TimeFilter.less
new file mode 100755
index 000000000..66f9b4e9a
--- /dev/null
+++ b/src/less/timenav/TL.TimeFilter.less
@@ -0,0 +1,99 @@
+/* TL.TimeFilter
+================================================== */
+
+.tl-filterbar {
+ position: absolute;
+ width: 100%;
+ z-index: 9999;
+ background-color: #4e4e4e;
+ color: #fff;
+ font-family: "PT Sans Narrow", sans-serif;
+ margin-top: -86px;
+ @media (min-width: 1024px) {
+ margin-top: -45px;
+ }
+ .container {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 6px 10px;
+ }
+ .flexbox {
+ display: flex;
+ }
+ .flexWrap {
+ flex-wrap: wrap;
+ }
+ .flex1 {
+ flex: 1;
+ }
+ .field-group {
+ display: flex;
+ flex: 1;
+ }
+ .field {
+ display: flex;
+ align-items: center;
+ margin-right: 10px;
+ label {
+ margin-right: 6px;
+ }
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ .field-keyword {
+ min-width: 260px;
+ width: 100%;
+ }
+ input,
+ select {
+ color: #fff;
+ font-family: "PT Sans Narrow", sans-serif;
+ font-size: 16px;
+ padding: 4px 6px;
+ border: 1px solid rgba(#fff, 0.4);
+ background-color: rgba(#fff, 0.1);
+ border-radius: 4px;
+ color-scheme: dark;
+ &:focus {
+ outline: none;
+ }
+ &::placeholder {
+ color: rgba(#fff, 0.4);
+ }
+ &[type="month"] {
+ width: 134px;
+ }
+ option {
+ background-color: #323232;
+ }
+ }
+ .btn {
+ font-family: "PT Sans Narrow", sans-serif;
+ font-size: 17px;
+ padding-left: 12px;
+ padding-right: 12px;
+ color: #fff;
+ background-color: rgba(#fff, 0.3);
+ border-radius: 4px;
+ border: none;
+ cursor: pointer;
+ margin: 0 4px;
+ display: flex;
+ align-items: center;
+ svg + span {
+ margin-left: 8px;
+ display: none;
+ @media (min-width: 1024px) {
+ display: inline-flex;
+ }
+ }
+ }
+ .btn:focus {
+ outline: none;
+ background-color: rgba(#fff, 0.4);
+ }
+ .btn-group {
+ display: flex;
+ }
+}
diff --git a/src/less/timenav/TL.TimeGroup.less b/src/less/timenav/TL.TimeGroup.less
old mode 100644
new mode 100755
index 38f0efbe9..223e7aed7
--- a/src/less/timenav/TL.TimeGroup.less
+++ b/src/less/timenav/TL.TimeGroup.less
@@ -2,73 +2,72 @@
================================================== */
.tl-timegroup {
- //height:100%;
- width:100%;
- position:absolute;
- top:0;
- left:0;
-
- background-color:@ui-background-color;
-
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- align-items: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
-
+ //height:100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
-
- .tl-timegroup-message {
- //z-index:6;
- color:darken(@ui-background-color-darker,2);
- text-shadow: @color-background 0px 2px 2px;
- margin-left:80px;
- //background-color:@ui-background-color;
-
- }
-
- &.tl-timegroup-alternate {
- background-color:lighten(@ui-background-color,3);
- .tl-timegroup-message {
- //background-color:lighten(@ui-background-color,3);
- }
- }
- &.tl-timegroup-hidden {
- display:none;
- }
-
- /* Animate Left Width and Top
+ background-color: @ui-background-color;
+
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ align-items: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+
+ .tl-timegroup-message {
+ //z-index:6;
+ // color:@color-main;
+ box-sizing: border-box;
+ padding-left: 64px;
+ padding-right: 10px;
+ display: flex;
+ align-items: center;
+ height: 100%;
+ background-color: @ui-background-color;
+ z-index: 10;
+ white-space: nowrap;
+ }
+
+ &.tl-timegroup-alternate {
+ background-color: lighten(@ui-background-color, 3);
+ .tl-timegroup-message {
+ //background-color:lighten(@ui-background-color,3);
+ }
+ }
+ &.tl-timegroup-hidden {
+ display: none;
+ }
+
+ /* Animate Left Width and Top
================================================== */
- .property-animation(left, @animation-duration, @animation-ease);
- .property-animation(top, @animation-duration-fast, @animation-ease);
- .property-animation(height, @animation-duration-fast, @animation-ease);
- .property-animation(width, @animation-duration, @animation-ease);
- .animation-timing-cubic-bezier();
-
+ .property-animation(left, @animation-duration, @animation-ease);
+ .property-animation(top, @animation-duration-fast, @animation-ease);
+ .property-animation(height, @animation-duration-fast, @animation-ease);
+ .property-animation(width, @animation-duration, @animation-ease);
+ .animation-timing-cubic-bezier();
}
/* Skinny
================================================== */
.tl-skinny {
- .tl-timegroup {
-
- }
+ .tl-timegroup {
+ }
}
/* Mobile, iPhone
================================================== */
.tl-mobile {
- .tl-timegroup {
-
- }
+ .tl-timegroup {
+ }
}
/* Mobile, iPhone and skinny
================================================== */
.tl-mobile.tl-skinny {
- .tl-timegroup {
-
- }
+ .tl-timegroup {
+ }
}
diff --git a/src/less/timenav/TL.TimeMarker.less b/src/less/timenav/TL.TimeMarker.less
old mode 100644
new mode 100755
index 5481ee4c5..924089a4c
--- a/src/less/timenav/TL.TimeMarker.less
+++ b/src/less/timenav/TL.TimeMarker.less
@@ -129,6 +129,7 @@
z-index:6;
&:hover {
z-index: 9;
+ opacity: 1 !important;
}
.property-animation(height, @animation-duration-fast, @animation-ease);
.property-animation(width, @animation-duration, @animation-ease);
@@ -164,7 +165,7 @@
overflow:hidden;
font-weight:normal;
margin:0;
- color:@marker-text-color;
+ color: #eae8e8c1 ;
position: relative;
&.tl-headline-fadeout {
&:after {
@@ -372,7 +373,7 @@
.tl-timemarker-content-container {
//background-color:@color-theme;
- background-color:@color-background;
+ background-color: #E8B755 !important;
//color:@color-background;
color:@color-foreground;
z-index:9;
@@ -545,3 +546,47 @@
}
}
+
+//Custom
+
+.highlighted {
+ box-shadow: 0 0 15px #999 !important;
+ border: 1px solid black !important;
+ background-color: grey !important;
+ z-index: 10 !important;
+}
+.highlighted:hover{
+ z-index: 51 !important;
+}
+.hidden{
+ display: none !important;
+}
+
+.has-parent{
+ outline: #2f9d9d solid 3px !important;
+}
+
+.tl-tooltip{
+ position: absolute;
+ text-align: center;
+ z-index: 101 !important;
+ border-bottom-right-radius: 25px;
+ border-top-right-radius: 25px;
+ border: black 1px solid;
+ margin-right: 10px;
+ right: 0;
+ color: white;
+ width: max-content;
+ padding: 1px;
+ padding-left: 20px;
+ padding-right: 20px;
+ background-color:@color-main;
+
+ font-family: "arial";
+ font-size: 13px;
+
+}
+
+.tl-tooltip-hidden{
+ display: none !important;
+}
diff --git a/src/less/timenav/TL.TimeNav.less b/src/less/timenav/TL.TimeNav.less
old mode 100644
new mode 100755
index 799dfef93..be904a153
--- a/src/less/timenav/TL.TimeNav.less
+++ b/src/less/timenav/TL.TimeNav.less
@@ -115,3 +115,27 @@
}
}
+
+
+//custom
+.loader_background{
+ background-color: #000;
+ opacity: 0.5;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 102;
+}
+
+.loader_text{
+ position: absolute;
+ top: 70%;
+ left: 50%;
+ transform: translate(-50%, -70%);
+ z-index: 104;
+ color: #fff;
+ font-size: 30px;
+ font-weight: bold;
+}
diff --git a/src/less/ui/TL.MenuBar.Button.less b/src/less/ui/TL.MenuBar.Button.less
old mode 100644
new mode 100755
index 75c86c43a..181a2d41a
--- a/src/less/ui/TL.MenuBar.Button.less
+++ b/src/less/ui/TL.MenuBar.Button.less
@@ -10,7 +10,7 @@
//padding:12px;
background-color:fadeout(@ui-background-color, 10%);
cursor:pointer;
- padding: 5px 10px 5px 10px;
+ padding: 6px 12px 6px 12px;
display:inline-block;
display:block;
//color:@color-text;
diff --git a/src/less/ui/TL.MenuBar.less b/src/less/ui/TL.MenuBar.less
old mode 100644
new mode 100755
diff --git a/src/less/ui/TL.Message.less b/src/less/ui/TL.Message.less
old mode 100644
new mode 100755
diff --git a/src/template/all-media-types.json b/src/template/all-media-types.json
old mode 100644
new mode 100755
index 7dba85a62..4408e8ea2
--- a/src/template/all-media-types.json
+++ b/src/template/all-media-types.json
@@ -15,7 +15,7 @@
},
"events": [{
"media": {
- "url": "https://m.youtube.com/watch?v=pi2v1m6gmD8&t=5m21s",
+ "url": "https://www.youtube.com/watch?v=pi2v1m6gmD8&t=5m21s",
"caption": "the Monkey section of David Van Tieghem's Ear Drums"
},
"start_date": {
diff --git a/src/template/cosmo.json b/src/template/cosmo.json
deleted file mode 100644
index 96ec6266f..000000000
--- a/src/template/cosmo.json
+++ /dev/null
@@ -1,113 +0,0 @@
-{
- "title": {
- "media": {
- "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/CMB_Timeline300_no_WMAP.jpg/1280px-CMB_Timeline300_no_WMAP.jpg",
- "caption": "Timeline of the universe.",
- "credit": "NASA with modifications by Cherkash via Wikipedia"
- },
- "text": {
- "headline": "Cosmological Scale Timeline",
- "text": "A test case for looking at how TimelineJS handles dates beyond those supported by the JS Date class"
- },
- "background": {
- "color": "papayawhip"
- }
- },
- "events": [{
- "media": {
- "url": "https://en.wikipedia.org/wiki/Big_Bang"
- },
- "start_date": {
- "year": "-13800000000"
- },
- "text": {
- "headline": "The Big Bang",
- "text": "As far back as we can go"
- },
- "background": {
- "color": "#F45B69"
- }
- },
- {
- "start_date": {
- "year": "-13799630000"
- },
- "text": {
- "headline": "The Dark Ages and large-scale structure emergence",
- "text": "I guess this image shows things that are 13.1 billion years old? Not sure I followed tbh."
- },
- "background": {
- "url": "https://upload.wikimedia.org/wikipedia/commons/b/bf/Webb%27s_First_Deep_Field.jpg"
- }
- },
- {
- "start_date": {
- "year": "-12800000000"
- },
- "text": {
- "headline": "The universe as it appears today"
- },
- "background": {
- "url": "https://upload.wikimedia.org/wikipedia/commons/b/bf/Webb%27s_First_Deep_Field.jpg"
- }
- },
- {
- "start_date": {
- "year": "-4600000000"
- },
- "text": {
- "headline": "The formation of the Solar System"
- },
- "background": {
- "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/The_Mysterious_Case_of_the_Disappearing_Dust.jpg/1280px-The_Mysterious_Case_of_the_Disappearing_Dust.jpg"
- }
- },
- {
- "start_date": {
- "year": "-538800000"
- },
-
- "end_date": {
- "year": "-251902000"
- },
- "text": {
- "headline": "Paleozoic era"
- },
- "background": {
- "url": "https://upload.wikimedia.org/wikipedia/commons/4/49/Trilobite_Heinrich_Harder.jpg"
- }
- },
- {
- "media": {
- "url": "https://commons.wikimedia.org/wiki/File:Ape_skeletons.png",
- "caption": "The hominoids are descendants of a common ancestor.",
- "credit": "Wikipedia"
- },
- "start_date": {
- "year": "-315000"
- },
- "text": {
- "headline": "approximate date of appearance of Homo sapiens"
- },
- "background": {
- "color": "white"
- }
- },
- {
- "media": {
- "url": "https://commons.wikimedia.org/wiki/File:0854_Ein_Krug_aus_Bronocice,_3.550_v._Chr..JPG",
- "caption": "Bronocice pot",
- "credit": "Wikipedia"
- },
- "start_date": {
- "year": "-3500"
- },
- "text": {
- "headline": "oldest known depiction of a wheeled vehicle"
- },
- "background": {
- "color": "black"
- }
- }
- ]
-}
\ No newline at end of file
diff --git a/src/template/eras.json b/src/template/eras.json
old mode 100644
new mode 100755
diff --git a/src/template/index.html b/src/template/index.html
old mode 100644
new mode 100755
index ac93237bf..c4f85c678
--- a/src/template/index.html
+++ b/src/template/index.html
@@ -2,18 +2,21 @@
Bundled TimelineJS test page
-
- Timeline Development
-
-
-
-
+
-
+