Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@knight-lab/timelinejs
Advanced tools
@knight-lab/timelinejs - npm Package Compare versions
Comparing version 3.7.8 to 3.7.9
| { | ||
| "name": "@knight-lab/timelinejs", | ||
| "version": "3.7.8", | ||
| "version": "3.7.9", | ||
| "license": "MPL-2.0", | ||
@@ -5,0 +5,0 @@ "description": "TimelineJS v3: A Storytelling Timeline built in JavaScript, made by Northwestern University Knight Lab.", |
@@ -190,6 +190,6 @@ import { TimelineConfig } from "../core/TimelineConfig" | ||
| if (response.status != 200) { | ||
| console.log("Error fetching data " + api_version + ": " + response.status + " - " + response.statusText); | ||
| trace("Error fetching data " + api_version + ": " + response.status + " - " + response.statusText); | ||
| api_version = 'v4'; | ||
| var url = buildGoogleFeedURL(spreadsheet_key, api_version); | ||
| console.log("trying v4 - " + google_url); | ||
| trace("trying v4 - " + google_url); | ||
| var response = ajax({ | ||
@@ -204,3 +204,3 @@ url: url, | ||
| var msg = "Error fetching data " + api_version + ": " + response.status + " - " + response.statusText; | ||
| console.log(msg); | ||
| trace(msg); | ||
| throw new TLError("google_error", msg); | ||
@@ -215,4 +215,4 @@ } | ||
| var msg = "Error fetching data " + api_version + ": " + response.status + " - " + response.statusText; | ||
| console.log(msg); | ||
| console.log(data.error); | ||
| trace(msg); | ||
| trace(data.error); | ||
| throw new TLError("google_error", msg); | ||
@@ -219,0 +219,0 @@ } |
@@ -5,3 +5,3 @@ /* Events | ||
| import { mergeData } from "../core/Util" | ||
| import { mergeData, trace } from "../core/Util" | ||
| import TLError from "../core/TLError" | ||
@@ -113,3 +113,3 @@ | ||
| } else { | ||
| console.log('no action defined for listener') | ||
| trace('no action defined for listener') | ||
| } | ||
@@ -116,0 +116,0 @@ } |
@@ -238,3 +238,2 @@ import { sortByDate, SCALE_DATE_CLASSES } from "../date/DateUtil" | ||
| if (!this.scale) { | ||
| trace("Determining scale dynamically"); | ||
| this.scale = "human"; // default to human unless there's a slide which is explicitly 'cosmological' or one which has a cosmological year | ||
@@ -256,2 +255,3 @@ | ||
| } | ||
| trace(`Determining scale dynamically: ${this.scale}`); | ||
| } | ||
@@ -258,0 +258,0 @@ var dateCls = SCALE_DATE_CLASSES[this.scale]; |
| import { classMixin, mergeData, linkify, } from "../core/Util" | ||
| import { I18NMixins } from "../language/I18NMixins"; | ||
| import Events from "../core/Events" | ||
| import Events from "../core/Events" | ||
| import * as DOM from "../dom/DOM" | ||
@@ -11,360 +11,358 @@ import * as Browser from "../core/Browser" | ||
| class Media { | ||
| constructor(data, options, language) {//add_to_container) { | ||
| if (language) { | ||
| this.setLanguage(language) | ||
| // } else { | ||
| // console.log("no language for this Media", this) | ||
| } | ||
| // DOM ELEMENTS | ||
| this._el = { | ||
| container: {}, | ||
| content_container: {}, | ||
| content: {}, | ||
| content_item: {}, | ||
| content_link: {}, | ||
| caption: null, | ||
| credit: null, | ||
| parent: {}, | ||
| link: null | ||
| }; | ||
| constructor(data, options, language) { //add_to_container) { | ||
| if (language) { | ||
| this.setLanguage(language) | ||
| } | ||
| // DOM ELEMENTS | ||
| this._el = { | ||
| container: {}, | ||
| content_container: {}, | ||
| content: {}, | ||
| content_item: {}, | ||
| content_link: {}, | ||
| caption: null, | ||
| credit: null, | ||
| parent: {}, | ||
| link: null | ||
| }; | ||
| // Player (If Needed) | ||
| this.player = null; | ||
| // Player (If Needed) | ||
| this.player = null; | ||
| // Timer (If Needed) | ||
| this.timer = null; | ||
| this.load_timer = null; | ||
| // Timer (If Needed) | ||
| this.timer = null; | ||
| this.load_timer = null; | ||
| // Message | ||
| this.message = null; | ||
| // Message | ||
| this.message = null; | ||
| // Media ID | ||
| this.media_id = null; | ||
| // Media ID | ||
| this.media_id = null; | ||
| // State | ||
| this._state = { | ||
| loaded: false, | ||
| show_meta: false, | ||
| media_loaded: false | ||
| }; | ||
| // State | ||
| this._state = { | ||
| loaded: false, | ||
| show_meta: false, | ||
| media_loaded: false | ||
| }; | ||
| // Data | ||
| this.data = { | ||
| unique_id: null, | ||
| url: null, | ||
| credit: null, | ||
| caption: null, | ||
| credit_alternate: null, | ||
| caption_alternate: null, | ||
| link: null, | ||
| link_target: null | ||
| }; | ||
| // Data | ||
| this.data = { | ||
| unique_id: null, | ||
| url: null, | ||
| credit: null, | ||
| caption: null, | ||
| credit_alternate: null, | ||
| caption_alternate: null, | ||
| link: null, | ||
| link_target: null | ||
| }; | ||
| //Options | ||
| this.options = { | ||
| api_key_flickr: "bd3a7c45ddd52f3101825d41563a6125", | ||
| api_key_googlemaps: "AIzaSyB9dW8e_iRrATFa8g24qB6BDBGdkrLDZYI", | ||
| api_key_embedly: "", // ae2da610d1454b66abdf2e6a4c44026d | ||
| credit_height: 0, | ||
| caption_height: 0, | ||
| background: 0 // is background media (for slide) | ||
| }; | ||
| //Options | ||
| this.options = { | ||
| api_key_flickr: "bd3a7c45ddd52f3101825d41563a6125", | ||
| api_key_googlemaps: "AIzaSyB9dW8e_iRrATFa8g24qB6BDBGdkrLDZYI", | ||
| api_key_embedly: "", // ae2da610d1454b66abdf2e6a4c44026d | ||
| credit_height: 0, | ||
| caption_height: 0, | ||
| background: 0 // is background media (for slide) | ||
| }; | ||
| this.animator = {}; | ||
| this.animator = {}; | ||
| // Merge Data and Options | ||
| mergeData(this.options, options); | ||
| mergeData(this.data, data); | ||
| // Merge Data and Options | ||
| mergeData(this.options, options); | ||
| mergeData(this.data, data); | ||
| // Don't create DOM elements if this is background media | ||
| if (!this.options.background) { | ||
| this._el.container = DOM.create("div", "tl-media"); | ||
| // Don't create DOM elements if this is background media | ||
| if (!this.options.background) { | ||
| this._el.container = DOM.create("div", "tl-media"); | ||
| if (this.data.unique_id) { | ||
| this._el.container.id = this.data.unique_id; | ||
| } | ||
| if (this.data.unique_id) { | ||
| this._el.container.id = this.data.unique_id; | ||
| } | ||
| this._initLayout(); | ||
| this._initLayout(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| loadMedia() { | ||
| var self = this; | ||
| loadMedia() { | ||
| var self = this; | ||
| if (!this._state.loaded) { | ||
| try { | ||
| this.load_timer = setTimeout(function () { | ||
| self.loadingMessage(); | ||
| self._loadMedia(); | ||
| // self._state.loaded = true; handled in onLoaded() | ||
| self._updateDisplay(); | ||
| }, 1200); | ||
| } catch (e) { | ||
| trace("Error loading media for ", this._media); | ||
| trace(e); | ||
| } | ||
| } | ||
| } | ||
| if (!this._state.loaded) { | ||
| try { | ||
| this.load_timer = setTimeout(function() { | ||
| self.loadingMessage(); | ||
| self._loadMedia(); | ||
| // self._state.loaded = true; handled in onLoaded() | ||
| self._updateDisplay(); | ||
| }, 1200); | ||
| } catch (e) { | ||
| trace("Error loading media for ", this._media); | ||
| trace(e); | ||
| } | ||
| } | ||
| } | ||
| _updateMessage(msg) { | ||
| if (this.message) { | ||
| this.message.updateMessage(msg); | ||
| } | ||
| } | ||
| _updateMessage(msg) { | ||
| if (this.message) { | ||
| this.message.updateMessage(msg); | ||
| } | ||
| } | ||
| loadingMessage() { | ||
| this._updateMessage(this._('loading') + " " + this.options.media_name); | ||
| } | ||
| loadingMessage() { | ||
| this._updateMessage(this._('loading') + " " + this.options.media_name); | ||
| } | ||
| errorMessage(msg) { | ||
| if (msg) { | ||
| msg = this._('error') + ": " + msg; | ||
| } else { | ||
| msg = this._('error'); | ||
| } | ||
| this._updateMessage(msg); | ||
| } | ||
| errorMessage(msg) { | ||
| if (msg) { | ||
| msg = this._('error') + ": " + msg; | ||
| } else { | ||
| msg = this._('error'); | ||
| } | ||
| this._updateMessage(msg); | ||
| } | ||
| updateMediaDisplay(layout) { | ||
| if (this._state.loaded && !this.options.background) { | ||
| updateMediaDisplay(layout) { | ||
| if (this._state.loaded && !this.options.background) { | ||
| if (Browser.mobile) { | ||
| this._el.content_item.style.maxHeight = (this.options.height / 2) + "px"; | ||
| } else { | ||
| this._el.content_item.style.maxHeight = this.options.height - this.options.credit_height - this.options.caption_height - 30 + "px"; | ||
| } | ||
| if (Browser.mobile) { | ||
| this._el.content_item.style.maxHeight = (this.options.height / 2) + "px"; | ||
| } else { | ||
| this._el.content_item.style.maxHeight = this.options.height - this.options.credit_height - this.options.caption_height - 30 + "px"; | ||
| } | ||
| //this._el.content_item.style.maxWidth = this.options.width + "px"; | ||
| this._el.container.style.maxWidth = this.options.width + "px"; | ||
| // Fix for max-width issues in Firefox | ||
| if (Browser.firefox) { | ||
| if (this._el.content_item.offsetWidth > this._el.content_item.offsetHeight) { | ||
| //this._el.content_item.style.width = "100%"; | ||
| } | ||
| } | ||
| //this._el.content_item.style.maxWidth = this.options.width + "px"; | ||
| this._el.container.style.maxWidth = this.options.width + "px"; | ||
| // Fix for max-width issues in Firefox | ||
| if (Browser.firefox) { | ||
| if (this._el.content_item.offsetWidth > this._el.content_item.offsetHeight) { | ||
| //this._el.content_item.style.width = "100%"; | ||
| } | ||
| } | ||
| this._updateMediaDisplay(layout); | ||
| this._updateMediaDisplay(layout); | ||
| if (this._state.media_loaded) { | ||
| if (this._el.credit) { | ||
| this._el.credit.style.width = this._el.content_item.offsetWidth + "px"; | ||
| } | ||
| if (this._el.caption) { | ||
| this._el.caption.style.width = this._el.content_item.offsetWidth + "px"; | ||
| } | ||
| } | ||
| if (this._state.media_loaded) { | ||
| if (this._el.credit) { | ||
| this._el.credit.style.width = this._el.content_item.offsetWidth + "px"; | ||
| } | ||
| if (this._el.caption) { | ||
| this._el.caption.style.width = this._el.content_item.offsetWidth + "px"; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| /* Media Specific | ||
| ================================================== */ | ||
| _loadMedia() { | ||
| // All overrides must call this.onLoaded() to set state | ||
| this.onLoaded(); | ||
| } | ||
| /* Media Specific | ||
| ================================================== */ | ||
| _loadMedia() { | ||
| // All overrides must call this.onLoaded() to set state | ||
| this.onLoaded(); | ||
| } | ||
| _updateMediaDisplay(l) { | ||
| //this._el.content_item.style.maxHeight = (this.options.height - this.options.credit_height - this.options.caption_height - 16) + "px"; | ||
| if (Browser.firefox) { | ||
| this._el.content_item.style.maxWidth = this.options.width + "px"; | ||
| this._el.content_item.style.width = "auto"; | ||
| } | ||
| } | ||
| _updateMediaDisplay(l) { | ||
| //this._el.content_item.style.maxHeight = (this.options.height - this.options.credit_height - this.options.caption_height - 16) + "px"; | ||
| if (Browser.firefox) { | ||
| this._el.content_item.style.maxWidth = this.options.width + "px"; | ||
| this._el.content_item.style.width = "auto"; | ||
| } | ||
| } | ||
| _getMeta() { | ||
| _getMeta() { | ||
| } | ||
| } | ||
| _getImageURL(w, h) { | ||
| // Image-based media types should return <img>-compatible src url | ||
| return ""; | ||
| } | ||
| _getImageURL(w, h) { | ||
| // Image-based media types should return <img>-compatible src url | ||
| return ""; | ||
| } | ||
| /* Public | ||
| ================================================== */ | ||
| show() { | ||
| /* Public | ||
| ================================================== */ | ||
| show() { | ||
| } | ||
| } | ||
| hide() { | ||
| hide() { | ||
| } | ||
| } | ||
| addTo(container) { | ||
| container.appendChild(this._el.container); | ||
| this.onAdd(); | ||
| } | ||
| addTo(container) { | ||
| container.appendChild(this._el.container); | ||
| this.onAdd(); | ||
| } | ||
| removeFrom(container) { | ||
| container.removeChild(this._el.container); | ||
| this.onRemove(); | ||
| } | ||
| removeFrom(container) { | ||
| container.removeChild(this._el.container); | ||
| this.onRemove(); | ||
| } | ||
| getImageURL(w, h) { | ||
| return this._getImageURL(w, h); | ||
| } | ||
| getImageURL(w, h) { | ||
| return this._getImageURL(w, h); | ||
| } | ||
| // Update Display | ||
| updateDisplay(w, h, l) { | ||
| this._updateDisplay(w, h, l); | ||
| } | ||
| // Update Display | ||
| updateDisplay(w, h, l) { | ||
| this._updateDisplay(w, h, l); | ||
| } | ||
| stopMedia() { | ||
| this._stopMedia(); | ||
| } | ||
| stopMedia() { | ||
| this._stopMedia(); | ||
| } | ||
| loadErrorDisplay(message) { | ||
| try { | ||
| this._el.content.removeChild(this._el.content_item); | ||
| } catch (e) { | ||
| // if this._el.content_item isn't a child of this._el then just keep truckin | ||
| } | ||
| this._el.content_item = DOM.create("div", "tl-media-item tl-media-loaderror", this._el.content); | ||
| this._el.content_item.innerHTML = "<div class='tl-icon-" + this.options.media_type + "'></div><p>" + message + "</p>"; | ||
| loadErrorDisplay(message) { | ||
| try { | ||
| this._el.content.removeChild(this._el.content_item); | ||
| } catch (e) { | ||
| // if this._el.content_item isn't a child of this._el then just keep truckin | ||
| } | ||
| this._el.content_item = DOM.create("div", "tl-media-item tl-media-loaderror", this._el.content); | ||
| this._el.content_item.innerHTML = "<div class='tl-icon-" + this.options.media_type + "'></div><p>" + message + "</p>"; | ||
| // After Loaded | ||
| this.onLoaded(true); | ||
| } | ||
| // After Loaded | ||
| this.onLoaded(true); | ||
| } | ||
| /* Events | ||
| ================================================== */ | ||
| onLoaded(error) { | ||
| this._state.loaded = true; | ||
| this.fire("loaded", this.data); | ||
| if (this.message) { | ||
| this.message.hide(); | ||
| } | ||
| if (!(error || this.options.background)) { | ||
| this.showMeta(); | ||
| } | ||
| this.updateDisplay(); | ||
| } | ||
| /* Events | ||
| ================================================== */ | ||
| onLoaded(error) { | ||
| this._state.loaded = true; | ||
| this.fire("loaded", this.data); | ||
| if (this.message) { | ||
| this.message.hide(); | ||
| } | ||
| if (!(error || this.options.background)) { | ||
| this.showMeta(); | ||
| } | ||
| this.updateDisplay(); | ||
| } | ||
| onMediaLoaded(e) { | ||
| this._state.media_loaded = true; | ||
| this.fire("media_loaded", this.data); | ||
| if (this._el.credit) { | ||
| this._el.credit.style.width = this._el.content_item.offsetWidth + "px"; | ||
| } | ||
| if (this._el.caption) { | ||
| this._el.caption.style.width = this._el.content_item.offsetWidth + "px"; | ||
| } | ||
| } | ||
| onMediaLoaded(e) { | ||
| this._state.media_loaded = true; | ||
| this.fire("media_loaded", this.data); | ||
| if (this._el.credit) { | ||
| this._el.credit.style.width = this._el.content_item.offsetWidth + "px"; | ||
| } | ||
| if (this._el.caption) { | ||
| this._el.caption.style.width = this._el.content_item.offsetWidth + "px"; | ||
| } | ||
| } | ||
| showMeta(credit, caption) { | ||
| this._state.show_meta = true; | ||
| // Credit | ||
| if (this.data.credit && this.data.credit != "") { | ||
| this._el.credit = DOM.create("div", "tl-credit", this._el.content_container); | ||
| this._el.credit.innerHTML = this.options.autolink == true ? linkify(this.data.credit) : this.data.credit; | ||
| this.options.credit_height = this._el.credit.offsetHeight; | ||
| } | ||
| showMeta(credit, caption) { | ||
| this._state.show_meta = true; | ||
| // Credit | ||
| if (this.data.credit && this.data.credit != "") { | ||
| this._el.credit = DOM.create("div", "tl-credit", this._el.content_container); | ||
| this._el.credit.innerHTML = this.options.autolink == true ? linkify(this.data.credit) : this.data.credit; | ||
| this.options.credit_height = this._el.credit.offsetHeight; | ||
| } | ||
| // Caption | ||
| if (this.data.caption && this.data.caption != "") { | ||
| this._el.caption = DOM.create("div", "tl-caption", this._el.content_container); | ||
| this._el.caption.innerHTML = this.options.autolink == true ? linkify(this.data.caption) : this.data.caption; | ||
| this.options.caption_height = this._el.caption.offsetHeight; | ||
| } | ||
| // Caption | ||
| if (this.data.caption && this.data.caption != "") { | ||
| this._el.caption = DOM.create("div", "tl-caption", this._el.content_container); | ||
| this._el.caption.innerHTML = this.options.autolink == true ? linkify(this.data.caption) : this.data.caption; | ||
| this.options.caption_height = this._el.caption.offsetHeight; | ||
| } | ||
| if (!this.data.caption || !this.data.credit) { | ||
| this.getMeta(); | ||
| } | ||
| if (!this.data.caption || !this.data.credit) { | ||
| this.getMeta(); | ||
| } | ||
| } | ||
| } | ||
| getMeta() { | ||
| this._getMeta(); | ||
| } | ||
| getMeta() { | ||
| this._getMeta(); | ||
| } | ||
| updateMeta() { | ||
| if (!this.data.credit && this.data.credit_alternate) { | ||
| this._el.credit = DOM.create("div", "tl-credit", this._el.content_container); | ||
| this._el.credit.innerHTML = this.data.credit_alternate; | ||
| this.options.credit_height = this._el.credit.offsetHeight; | ||
| } | ||
| updateMeta() { | ||
| if (!this.data.credit && this.data.credit_alternate) { | ||
| this._el.credit = DOM.create("div", "tl-credit", this._el.content_container); | ||
| this._el.credit.innerHTML = this.data.credit_alternate; | ||
| this.options.credit_height = this._el.credit.offsetHeight; | ||
| } | ||
| if (!this.data.caption && this.data.caption_alternate) { | ||
| this._el.caption = DOM.create("div", "tl-caption", this._el.content_container); | ||
| this._el.caption.innerHTML = this.data.caption_alternate; | ||
| this.options.caption_height = this._el.caption.offsetHeight; | ||
| } | ||
| if (!this.data.caption && this.data.caption_alternate) { | ||
| this._el.caption = DOM.create("div", "tl-caption", this._el.content_container); | ||
| this._el.caption.innerHTML = this.data.caption_alternate; | ||
| this.options.caption_height = this._el.caption.offsetHeight; | ||
| } | ||
| this.updateDisplay(); | ||
| } | ||
| this.updateDisplay(); | ||
| } | ||
| onAdd() { | ||
| this.fire("added", this.data); | ||
| } | ||
| onAdd() { | ||
| this.fire("added", this.data); | ||
| } | ||
| onRemove() { | ||
| this.fire("removed", this.data); | ||
| } | ||
| onRemove() { | ||
| this.fire("removed", this.data); | ||
| } | ||
| /* Private Methods | ||
| ================================================== */ | ||
| _initLayout() { | ||
| /* Private Methods | ||
| ================================================== */ | ||
| _initLayout() { | ||
| // Message | ||
| this.message = new Message(this._el.container, this.options, this.getLanguage()); | ||
| // this.message.addTo(this._el.container); | ||
| // Message | ||
| this.message = new Message(this._el.container, this.options, this.getLanguage()); | ||
| // this.message.addTo(this._el.container); | ||
| // Create Layout | ||
| this._el.content_container = DOM.create("div", "tl-media-content-container", this._el.container); | ||
| // Create Layout | ||
| this._el.content_container = DOM.create("div", "tl-media-content-container", this._el.container); | ||
| // Link | ||
| if (this.data.link && this.data.link != "") { | ||
| // Link | ||
| if (this.data.link && this.data.link != "") { | ||
| this._el.link = DOM.create("a", "tl-media-link", this._el.content_container); | ||
| this._el.link.href = this.data.link; | ||
| if (this.data.link_target && this.data.link_target != "") { | ||
| this._el.link.target = this.data.link_target; | ||
| } else { | ||
| this._el.link.target = "_blank"; | ||
| } | ||
| this._el.link = DOM.create("a", "tl-media-link", this._el.content_container); | ||
| this._el.link.href = this.data.link; | ||
| if (this.data.link_target && this.data.link_target != "") { | ||
| this._el.link.target = this.data.link_target; | ||
| } else { | ||
| this._el.link.target = "_blank"; | ||
| } | ||
| this._el.content = DOM.create("div", "tl-media-content", this._el.link); | ||
| this._el.content = DOM.create("div", "tl-media-content", this._el.link); | ||
| } else { | ||
| this._el.content = DOM.create("div", "tl-media-content", this._el.content_container); | ||
| } | ||
| } else { | ||
| this._el.content = DOM.create("div", "tl-media-content", this._el.content_container); | ||
| } | ||
| } | ||
| } | ||
| // Update Display | ||
| _updateDisplay(w, h, l) { | ||
| if (w) { | ||
| this.options.width = w; | ||
| // Update Display | ||
| _updateDisplay(w, h, l) { | ||
| if (w) { | ||
| this.options.width = w; | ||
| } | ||
| //this._el.container.style.width = this.options.width + "px"; | ||
| if (h) { | ||
| this.options.height = h; | ||
| } | ||
| } | ||
| //this._el.container.style.width = this.options.width + "px"; | ||
| if (h) { | ||
| this.options.height = h; | ||
| } | ||
| if (l) { | ||
| this.options.layout = l; | ||
| } | ||
| if (l) { | ||
| this.options.layout = l; | ||
| } | ||
| if (this._el.credit) { | ||
| this.options.credit_height = this._el.credit.offsetHeight; | ||
| } | ||
| if (this._el.caption) { | ||
| this.options.caption_height = this._el.caption.offsetHeight + 5; | ||
| } | ||
| if (this._el.credit) { | ||
| this.options.credit_height = this._el.credit.offsetHeight; | ||
| } | ||
| if (this._el.caption) { | ||
| this.options.caption_height = this._el.caption.offsetHeight + 5; | ||
| } | ||
| this.updateMediaDisplay(this.options.layout); | ||
| this.updateMediaDisplay(this.options.layout); | ||
| } | ||
| } | ||
| domCreate(...params) { | ||
| return DOM.create(...params) | ||
| } | ||
| domCreate(...params) { | ||
| return DOM.create(...params) | ||
| } | ||
| _stopMedia() { | ||
| _stopMedia() { | ||
| } | ||
| } | ||
@@ -371,0 +369,0 @@ } |
| import { Media } from "../Media"; | ||
| import { ratio, getParamString} from "../../core/Util" | ||
| import { ratio, getParamString } from "../../core/Util" | ||
@@ -7,145 +7,145 @@ | ||
| /* Load the media | ||
| ================================================== */ | ||
| _loadMedia() { | ||
| /* Load the media | ||
| ================================================== */ | ||
| _loadMedia() { | ||
| // Create Dom element | ||
| this._el.content_item = this.domCreate("div", "tl-media-item tl-media-map tl-media-shadow", this._el.content); | ||
| // Create Dom element | ||
| this._el.content_item = this.domCreate("div", "tl-media-item tl-media-map tl-media-shadow", this._el.content); | ||
| // Get Media ID | ||
| this.media_id = this.data.url; | ||
| // Get Media ID | ||
| this.media_id = this.data.url; | ||
| // API Call | ||
| this.mapframe = this.domCreate("iframe", "", this._el.content_item); | ||
| window.stash = this; | ||
| this.mapframe.width = "100%"; | ||
| this.mapframe.height = "100%"; | ||
| this.mapframe.frameBorder = "0"; | ||
| this.mapframe.src = this.makeGoogleMapsEmbedURL(this.media_id, this.options.api_key_googlemaps); | ||
| // After Loaded | ||
| this.onLoaded(); | ||
| } | ||
| // API Call | ||
| this.mapframe = this.domCreate("iframe", "", this._el.content_item); | ||
| this.mapframe.width = "100%"; | ||
| this.mapframe.height = "100%"; | ||
| this.mapframe.frameBorder = "0"; | ||
| this.mapframe.src = this.makeGoogleMapsEmbedURL(this.media_id, this.options.api_key_googlemaps); | ||
| _updateMediaDisplay() { | ||
| if (this._state.loaded) { | ||
| var dimensions = ratio.square({w:this._el.content_item.offsetWidth}); | ||
| this._el.content_item.style.height = dimensions.h + "px"; | ||
| } | ||
| } | ||
| makeGoogleMapsEmbedURL(url,api_key) { | ||
| // Test with https://docs.google.com/spreadsheets/d/1zCpvtRdftlR5fBPppmy_-SkGIo7RMwoPUiGFZDAXbTc/edit | ||
| var Streetview = false; | ||
| function determineMapMode(url){ | ||
| function parseDisplayMode(display_mode, param_string) { | ||
| // Set the zoom param | ||
| if (display_mode.slice(-1) == "z") { | ||
| param_string["zoom"] = display_mode; | ||
| // Set the maptype to something other than "roadmap" | ||
| } else if (display_mode.slice(-1) == "m") { | ||
| // TODO: make this somehow interpret the correct zoom level | ||
| // until then fake it by using Google's default zoom level | ||
| param_string["zoom"] = 14; | ||
| param_string["maptype"] = "satellite"; | ||
| // Set all the fun streetview params | ||
| } else if (display_mode.slice(-1) == "t") { | ||
| Streetview = true; | ||
| // streetview uses "location" instead of "center" | ||
| // "place" mode doesn't have the center param, so we may need to grab that now | ||
| if (mapmode == "place") { | ||
| var center = url.match(regexes["place"])[3] + "," + url.match(regexes["place"])[4]; | ||
| } else { | ||
| var center = param_string["center"]; | ||
| delete param_string["center"]; | ||
| } | ||
| // Clear out all the other params -- this is so hacky | ||
| param_string = {}; | ||
| param_string["location"] = center; | ||
| streetview_params = display_mode.split(","); | ||
| for (let param in param_defs["streetview"]) { | ||
| var i = parseInt(param) + 1; | ||
| if (param_defs["streetview"][param] == "pitch" && streetview_params[i] == "90t"){ | ||
| // Although 90deg is the horizontal default in the URL, 0 is horizontal default for embed URL. WHY?? | ||
| // https://developers.google.com/maps/documentation/javascript/streetview | ||
| param_string[param_defs["streetview"][param]] = 0; | ||
| } else { | ||
| param_string[param_defs["streetview"][param]] = streetview_params[i].slice(0,-1); | ||
| } | ||
| } | ||
| // After Loaded | ||
| this.onLoaded(); | ||
| } | ||
| } | ||
| return param_string; | ||
| } | ||
| function determineMapModeURL(mapmode, match) { | ||
| var param_string = {}; | ||
| var url_root = match[1], display_mode = match[match.length - 1]; | ||
| for (let param in param_defs[mapmode]) { | ||
| // skip first 2 matches, because they reflect the URL and not params | ||
| var i = parseInt(param)+2; | ||
| if (param_defs[mapmode][param] == "center") { | ||
| param_string[param_defs[mapmode][param]] = match[i] + "," + match[++i]; | ||
| } else { | ||
| param_string[param_defs[mapmode][param]] = match[i]; | ||
| } | ||
| } | ||
| _updateMediaDisplay() { | ||
| if (this._state.loaded) { | ||
| var dimensions = ratio.square({ w: this._el.content_item.offsetWidth }); | ||
| this._el.content_item.style.height = dimensions.h + "px"; | ||
| } | ||
| } | ||
| param_string = parseDisplayMode(display_mode, param_string); | ||
| param_string["key"] = api_key; | ||
| if (Streetview == true) { | ||
| mapmode = "streetview"; | ||
| } else { | ||
| } | ||
| return (url_root + "/embed/v1/" + mapmode + getParamString(param_string)); | ||
| } | ||
| makeGoogleMapsEmbedURL(url, api_key) { | ||
| // Test with https://docs.google.com/spreadsheets/d/1zCpvtRdftlR5fBPppmy_-SkGIo7RMwoPUiGFZDAXbTc/edit | ||
| var Streetview = false; | ||
| function determineMapMode(url) { | ||
| function parseDisplayMode(display_mode, param_string) { | ||
| // Set the zoom param | ||
| if (display_mode.slice(-1) == "z") { | ||
| param_string["zoom"] = display_mode; | ||
| // Set the maptype to something other than "roadmap" | ||
| } else if (display_mode.slice(-1) == "m") { | ||
| // TODO: make this somehow interpret the correct zoom level | ||
| // until then fake it by using Google's default zoom level | ||
| param_string["zoom"] = 14; | ||
| param_string["maptype"] = "satellite"; | ||
| // Set all the fun streetview params | ||
| } else if (display_mode.slice(-1) == "t") { | ||
| Streetview = true; | ||
| // streetview uses "location" instead of "center" | ||
| // "place" mode doesn't have the center param, so we may need to grab that now | ||
| if (mapmode == "place") { | ||
| var center = url.match(regexes["place"])[3] + "," + url.match(regexes["place"])[4]; | ||
| } else { | ||
| var center = param_string["center"]; | ||
| delete param_string["center"]; | ||
| } | ||
| // Clear out all the other params -- this is so hacky | ||
| param_string = {}; | ||
| param_string["location"] = center; | ||
| streetview_params = display_mode.split(","); | ||
| for (let param in param_defs["streetview"]) { | ||
| var i = parseInt(param) + 1; | ||
| if (param_defs["streetview"][param] == "pitch" && streetview_params[i] == "90t") { | ||
| // Although 90deg is the horizontal default in the URL, 0 is horizontal default for embed URL. WHY?? | ||
| // https://developers.google.com/maps/documentation/javascript/streetview | ||
| param_string[param_defs["streetview"][param]] = 0; | ||
| } else { | ||
| param_string[param_defs["streetview"][param]] = streetview_params[i].slice(0, -1); | ||
| } | ||
| } | ||
| let mapmode = "view"; | ||
| if (url.match(regexes["place"])) { | ||
| mapmode = "place"; | ||
| } else if (url.match(regexes["directions"])) { | ||
| mapmode = "directions"; | ||
| } else if (url.match(regexes["search"])) { | ||
| mapmode = "search"; | ||
| } | ||
| return determineMapModeURL(mapmode, url.match(regexes[mapmode])); | ||
| } | ||
| return param_string; | ||
| } | ||
| } | ||
| function determineMapModeURL(mapmode, match) { | ||
| var param_string = {}; | ||
| var url_root = match[1], | ||
| display_mode = match[match.length - 1]; | ||
| for (let param in param_defs[mapmode]) { | ||
| // skip first 2 matches, because they reflect the URL and not params | ||
| var i = parseInt(param) + 2; | ||
| if (param_defs[mapmode][param] == "center") { | ||
| param_string[param_defs[mapmode][param]] = match[i] + "," + match[++i]; | ||
| } else { | ||
| param_string[param_defs[mapmode][param]] = match[i]; | ||
| } | ||
| } | ||
| // These must be in the order they appear in the original URL | ||
| // "key" param not included since it's not in the URL structure | ||
| // Streetview "location" param not included since it's captured as "center" | ||
| // Place "center" param ...um... | ||
| var param_defs = { | ||
| "view": ["center"], | ||
| "place": ["q", "center"], | ||
| "directions": ["origin", "destination", "center"], | ||
| "search": ["q", "center"], | ||
| "streetview": ["fov", "heading", "pitch"] | ||
| }; | ||
| // Set up regex parts to make updating these easier if Google changes them | ||
| var root_url_regex = /(https:\/\/.+google.+?\/maps)/; | ||
| var coords_regex = /@([-\d.]+),([-\d.]+)/; | ||
| var address_regex = /([\w\W]+)/; | ||
| param_string = parseDisplayMode(display_mode, param_string); | ||
| param_string["key"] = api_key; | ||
| if (Streetview == true) { | ||
| mapmode = "streetview"; | ||
| } else {} | ||
| return (url_root + "/embed/v1/" + mapmode + getParamString(param_string)); | ||
| } | ||
| // Data doesn't seem to get used for anything | ||
| var data_regex = /data=[\S]*/; | ||
| // Capture the parameters that determine what map tiles to use | ||
| // In roadmap view, mode URLs include zoom paramater (e.g. "14z") | ||
| // In satellite (or "earth") view, URLs include a distance parameter (e.g. "84511m") | ||
| // In streetview, URLs include paramaters like "3a,75y,49.76h,90t" -- see http://stackoverflow.com/a/22988073 | ||
| var display_mode_regex = /,((?:[-\d.]+[zmayht],?)*)/; | ||
| let mapmode = "view"; | ||
| if (url.match(regexes["place"])) { | ||
| mapmode = "place"; | ||
| } else if (url.match(regexes["directions"])) { | ||
| mapmode = "directions"; | ||
| } else if (url.match(regexes["search"])) { | ||
| mapmode = "search"; | ||
| } | ||
| return determineMapModeURL(mapmode, url.match(regexes[mapmode])); | ||
| var regexes = { | ||
| view: new RegExp(root_url_regex.source + "/" + coords_regex.source + display_mode_regex.source), | ||
| place: new RegExp(root_url_regex.source + "/place/" + address_regex.source + "/" + coords_regex.source + display_mode_regex.source), | ||
| directions: new RegExp(root_url_regex.source + "/dir/" + address_regex.source + "/" + address_regex.source + "/" + coords_regex.source + display_mode_regex.source), | ||
| search: new RegExp(root_url_regex.source + "/search/" + address_regex.source + "/" + coords_regex.source + display_mode_regex.source) | ||
| }; | ||
| return determineMapMode(url); | ||
| } | ||
| } | ||
| } | ||
| // These must be in the order they appear in the original URL | ||
| // "key" param not included since it's not in the URL structure | ||
| // Streetview "location" param not included since it's captured as "center" | ||
| // Place "center" param ...um... | ||
| var param_defs = { | ||
| "view": ["center"], | ||
| "place": ["q", "center"], | ||
| "directions": ["origin", "destination", "center"], | ||
| "search": ["q", "center"], | ||
| "streetview": ["fov", "heading", "pitch"] | ||
| }; | ||
| // Set up regex parts to make updating these easier if Google changes them | ||
| var root_url_regex = /(https:\/\/.+google.+?\/maps)/; | ||
| var coords_regex = /@([-\d.]+),([-\d.]+)/; | ||
| var address_regex = /([\w\W]+)/; | ||
| // Data doesn't seem to get used for anything | ||
| var data_regex = /data=[\S]*/; | ||
| // Capture the parameters that determine what map tiles to use | ||
| // In roadmap view, mode URLs include zoom paramater (e.g. "14z") | ||
| // In satellite (or "earth") view, URLs include a distance parameter (e.g. "84511m") | ||
| // In streetview, URLs include paramaters like "3a,75y,49.76h,90t" -- see http://stackoverflow.com/a/22988073 | ||
| var display_mode_regex = /,((?:[-\d.]+[zmayht],?)*)/; | ||
| var regexes = { | ||
| view: new RegExp(root_url_regex.source + "/" + coords_regex.source + display_mode_regex.source), | ||
| place: new RegExp(root_url_regex.source + "/place/" + address_regex.source + "/" + coords_regex.source + display_mode_regex.source), | ||
| directions: new RegExp(root_url_regex.source + "/dir/" + address_regex.source + "/" + address_regex.source + "/" + coords_regex.source + display_mode_regex.source), | ||
| search: new RegExp(root_url_regex.source + "/search/" + address_regex.source + "/" + coords_regex.source + display_mode_regex.source) | ||
| }; | ||
| return determineMapMode(url); | ||
| } | ||
| } |
| import { Media } from "../Media"; | ||
| import { loadJS } from "../../core/Load"; | ||
| import { ajax } from "../../net/Net"; | ||
| import { ratio } from "../../core/Util"; | ||
| import { ratio, trace } from "../../core/Util"; | ||
| import TLError from "../../core/TLError"; | ||
@@ -61,3 +61,3 @@ | ||
| } catch (e) { | ||
| console.log("Error processing imgur ajax response", e) | ||
| trace("Error processing imgur ajax response", e) | ||
| } | ||
@@ -64,0 +64,0 @@ }, |
@@ -1,2 +0,2 @@ | ||
| import { unhtmlify } from "../../core/Util"; | ||
| import { unhtmlify, trace } from "../../core/Util"; | ||
| import { getJSON } from "../../net/Net"; | ||
@@ -51,3 +51,3 @@ import { Media } from "../Media"; | ||
| let img_url = "https://instagram.com/p/" + this.media_id + "/media/?size=" + this.sizes(w) | ||
| console.log('insta URL', img_url) | ||
| trace('insta URL', img_url) | ||
| return img_url; | ||
@@ -54,0 +54,0 @@ } |
@@ -15,3 +15,3 @@ import { Media } from "../Media"; | ||
| this.media_id = this.data.url.split(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/medias\/(.*)/)[3]; | ||
| console.log(`Wistia: media_id: ${this.media_id}`) | ||
| trace(`Wistia: media_id: ${this.media_id}`) | ||
| // API URL | ||
@@ -18,0 +18,0 @@ api_url = "https://fast.wistia.com/embed/iframe/" + this.media_id + "?version=v1&controlsVisibleOnLoad=true&playerColor=aae3d8"; |
@@ -130,4 +130,55 @@ import { addClass } from "../dom/DOMUtil" | ||
| updateDisplay(w, h, l) { | ||
| this._updateDisplay(w, h, l); | ||
| updateDisplay(width, height, layout) { | ||
| var content_width, | ||
| content_padding_left = this.options.slide_padding_lr, | ||
| content_padding_right = this.options.slide_padding_lr; | ||
| if (width) { | ||
| this.options.width = width; | ||
| } else { | ||
| this.options.width = this._el.container.offsetWidth; | ||
| } | ||
| content_width = this.options.width - (this.options.slide_padding_lr * 2); | ||
| if (Browser.mobile && (this.options.width <= this.options.skinny_size)) { | ||
| content_padding_left = 0; | ||
| content_padding_right = 0; | ||
| content_width = this.options.width; | ||
| } else if (layout == "landscape") { | ||
| } else if (this.options.width <= this.options.skinny_size) { | ||
| content_padding_left = 50; | ||
| content_padding_right = 50; | ||
| content_width = this.options.width - content_padding_left - content_padding_right; | ||
| } else { | ||
| } | ||
| this._el.content.style.paddingLeft = content_padding_left + "px"; | ||
| this._el.content.style.paddingRight = content_padding_right + "px"; | ||
| this._el.content.style.width = content_width + "px"; | ||
| if (height) { | ||
| this.options.height = height; | ||
| //this._el.scroll_container.style.height = this.options.height + "px"; | ||
| } else { | ||
| this.options.height = this._el.container.offsetHeight; | ||
| } | ||
| if (this._media) { | ||
| if (!this.has.text && this.has.headline) { | ||
| this._media.updateDisplay(content_width, (this.options.height - this._text.headlineHeight()), layout); | ||
| } else if (!this.has.text && !this.has.headline) { | ||
| this._media.updateDisplay(content_width, this.options.height, layout); | ||
| } else if (this.options.width <= this.options.skinny_size) { | ||
| this._media.updateDisplay(content_width, this.options.height, layout); | ||
| } else { | ||
| this._media.updateDisplay(content_width / 2, this.options.height, layout); | ||
| } | ||
| } | ||
| this._updateBackgroundDisplay(); | ||
| } | ||
@@ -289,58 +340,2 @@ | ||
| // Update Display | ||
| _updateDisplay(width, height, layout) { | ||
| var content_width, | ||
| content_padding_left = this.options.slide_padding_lr, | ||
| content_padding_right = this.options.slide_padding_lr; | ||
| if (width) { | ||
| this.options.width = width; | ||
| } else { | ||
| this.options.width = this._el.container.offsetWidth; | ||
| } | ||
| content_width = this.options.width - (this.options.slide_padding_lr * 2); | ||
| if (Browser.mobile && (this.options.width <= this.options.skinny_size)) { | ||
| content_padding_left = 0; | ||
| content_padding_right = 0; | ||
| content_width = this.options.width; | ||
| } else if (layout == "landscape") { | ||
| } else if (this.options.width <= this.options.skinny_size) { | ||
| content_padding_left = 50; | ||
| content_padding_right = 50; | ||
| content_width = this.options.width - content_padding_left - content_padding_right; | ||
| } else { | ||
| } | ||
| this._el.content.style.paddingLeft = content_padding_left + "px"; | ||
| this._el.content.style.paddingRight = content_padding_right + "px"; | ||
| this._el.content.style.width = content_width + "px"; | ||
| if (height) { | ||
| this.options.height = height; | ||
| //this._el.scroll_container.style.height = this.options.height + "px"; | ||
| } else { | ||
| this.options.height = this._el.container.offsetHeight; | ||
| } | ||
| if (this._media) { | ||
| if (!this.has.text && this.has.headline) { | ||
| this._media.updateDisplay(content_width, (this.options.height - this._text.headlineHeight()), layout); | ||
| } else if (!this.has.text && !this.has.headline) { | ||
| this._media.updateDisplay(content_width, this.options.height, layout); | ||
| } else if (this.options.width <= this.options.skinny_size) { | ||
| this._media.updateDisplay(content_width, this.options.height, layout); | ||
| } else { | ||
| this._media.updateDisplay(content_width / 2, this.options.height, layout); | ||
| } | ||
| } | ||
| this._updateBackgroundDisplay(); | ||
| } | ||
| _updateBackgroundDisplay() { | ||
@@ -347,0 +342,0 @@ if (this._background_media && this._background_media._state.loaded) { |
@@ -16,527 +16,523 @@ import { I18NMixins } from "../language/I18NMixins"; | ||
| export class StorySlider { | ||
| constructor(elem, data, options, language) { | ||
| constructor(elem, data, options, language) { | ||
| if (language) { | ||
| this.setLanguage(language) | ||
| } | ||
| if (language) { | ||
| this.setLanguage(language) | ||
| } | ||
| // DOM ELEMENTS | ||
| this._el = { | ||
| container: {}, | ||
| background: {}, | ||
| slider_container_mask: {}, | ||
| slider_container: {}, | ||
| slider_item_container: {} | ||
| }; | ||
| // DOM ELEMENTS | ||
| this._el = { | ||
| container: {}, | ||
| background: {}, | ||
| slider_container_mask: {}, | ||
| slider_container: {}, | ||
| slider_item_container: {} | ||
| }; | ||
| this._nav = {}; | ||
| this._nav.previous = {}; | ||
| this._nav.next = {}; | ||
| this._nav = {}; | ||
| this._nav.previous = {}; | ||
| this._nav.next = {}; | ||
| // Slide Spacing | ||
| this.slide_spacing = 0; | ||
| // Slide Spacing | ||
| this.slide_spacing = 0; | ||
| // Slides Array | ||
| this._slides = []; | ||
| // Slides Array | ||
| this._slides = []; | ||
| // Swipe Object | ||
| this._swipable; | ||
| // Swipe Object | ||
| this._swipable; | ||
| // Preload Timer | ||
| this.preloadTimer; | ||
| // Preload Timer | ||
| this.preloadTimer; | ||
| // Message | ||
| this._message; | ||
| // Message | ||
| this._message; | ||
| // Current Slide | ||
| this.current_id = ''; | ||
| // Current Slide | ||
| this.current_id = ''; | ||
| // Data Object | ||
| this.data = {}; | ||
| // Data Object | ||
| this.data = {}; | ||
| this.options = { | ||
| id: "", | ||
| layout: "portrait", | ||
| width: 600, | ||
| height: 600, | ||
| default_bg_color: {r:255, g:255, b:255}, | ||
| slide_padding_lr: 40, // padding on slide of slide | ||
| start_at_slide: 1, | ||
| slide_default_fade: "0%", // landscape fade | ||
| // animation | ||
| duration: 1000, | ||
| ease: easeInOutQuint, | ||
| // interaction | ||
| dragging: true, | ||
| trackResize: true | ||
| }; | ||
| this.options = { | ||
| id: "", | ||
| layout: "portrait", | ||
| width: 600, | ||
| height: 600, | ||
| default_bg_color: { r: 255, g: 255, b: 255 }, | ||
| slide_padding_lr: 40, // padding on slide of slide | ||
| start_at_slide: 1, | ||
| slide_default_fade: "0%", // landscape fade | ||
| // animation | ||
| duration: 1000, | ||
| ease: easeInOutQuint, | ||
| // interaction | ||
| dragging: true, | ||
| trackResize: true | ||
| }; | ||
| // Main element ID | ||
| if (typeof elem === 'object') { | ||
| this._el.container = elem; | ||
| this.options.id = unique_ID(6, "tl"); | ||
| } else { | ||
| this.options.id = elem; | ||
| this._el.container = DOM.get(elem); | ||
| } | ||
| // Main element ID | ||
| if (typeof elem === 'object') { | ||
| this._el.container = elem; | ||
| this.options.id = unique_ID(6, "tl"); | ||
| } else { | ||
| this.options.id = elem; | ||
| this._el.container = DOM.get(elem); | ||
| } | ||
| if (!this._el.container.id) { | ||
| this._el.container.id = this.options.id; | ||
| } | ||
| if (!this._el.container.id) { | ||
| this._el.container.id = this.options.id; | ||
| } | ||
| // Animation Object | ||
| this.animator = null; | ||
| // Animation Object | ||
| this.animator = null; | ||
| // Merge Data and Options | ||
| mergeData(this.options, options); | ||
| mergeData(this.data, data); | ||
| // Merge Data and Options | ||
| mergeData(this.options, options); | ||
| mergeData(this.data, data); | ||
| } | ||
| } | ||
| init() { | ||
| this._initLayout(); | ||
| this._initEvents(); | ||
| this._initData(); | ||
| this._updateDisplay(); | ||
| init() { | ||
| this._initLayout(); | ||
| this._initEvents(); | ||
| this._initData(); | ||
| this.updateDisplay(); | ||
| // Go to initial slide | ||
| this.goTo(this.options.start_at_slide); | ||
| // Go to initial slide | ||
| this.goTo(this.options.start_at_slide); | ||
| this._onLoaded(); | ||
| } | ||
| this._onLoaded(); | ||
| } | ||
| /* Slides | ||
| ================================================== */ | ||
| _addSlide(slide) { | ||
| slide.addTo(this._el.slider_item_container); | ||
| slide.on('added', this._onSlideAdded, this); | ||
| slide.on('background_change', this._onBackgroundChange, this); | ||
| } | ||
| /* Slides | ||
| ================================================== */ | ||
| _addSlide(slide) { | ||
| slide.addTo(this._el.slider_item_container); | ||
| slide.on('added', this._onSlideAdded, this); | ||
| slide.on('background_change', this._onBackgroundChange, this); | ||
| } | ||
| _createSlide(d, title_slide, n) { | ||
| var slide = new Slide(d, this.options, title_slide, this.getLanguage()); | ||
| this._addSlide(slide); | ||
| if(n < 0) { | ||
| this._slides.push(slide); | ||
| } else { | ||
| this._slides.splice(n, 0, slide); | ||
| } | ||
| } | ||
| _createSlide(d, title_slide, n) { | ||
| var slide = new Slide(d, this.options, title_slide, this.getLanguage()); | ||
| this._addSlide(slide); | ||
| if (n < 0) { | ||
| this._slides.push(slide); | ||
| } else { | ||
| this._slides.splice(n, 0, slide); | ||
| } | ||
| } | ||
| _createSlides(array) { | ||
| for (var i = 0; i < array.length; i++) { | ||
| if (array[i].unique_id == "") { | ||
| array[i].unique_id = unique_ID(6, "tl-slide"); | ||
| } | ||
| _createSlides(array) { | ||
| for (var i = 0; i < array.length; i++) { | ||
| if (array[i].unique_id == "") { | ||
| array[i].unique_id = unique_ID(6, "tl-slide"); | ||
| } | ||
| this._createSlide(array[i], false, -1); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| _removeSlide(slide) { | ||
| slide.removeFrom(this._el.slider_item_container); | ||
| slide.off('added', this._onSlideRemoved, this); | ||
| slide.off('background_change', this._onBackgroundChange); | ||
| } | ||
| _removeSlide(slide) { | ||
| slide.removeFrom(this._el.slider_item_container); | ||
| slide.off('added', this._onSlideRemoved, this); | ||
| slide.off('background_change', this._onBackgroundChange); | ||
| } | ||
| _destroySlide(n) { | ||
| this._removeSlide(this._slides[n]); | ||
| this._slides.splice(n, 1); | ||
| } | ||
| _destroySlide(n) { | ||
| this._removeSlide(this._slides[n]); | ||
| this._slides.splice(n, 1); | ||
| } | ||
| _findSlideIndex(n) { | ||
| var _n = n; | ||
| if (typeof n == 'string' || n instanceof String) { | ||
| _n = findArrayNumberByUniqueID(n, this._slides, "unique_id"); | ||
| } | ||
| return _n; | ||
| if (typeof n == 'string' || n instanceof String) { | ||
| _n = findArrayNumberByUniqueID(n, this._slides, "unique_id"); | ||
| } | ||
| return _n; | ||
| } | ||
| /* Public | ||
| ================================================== */ | ||
| updateDisplay(w, h, a, l) { | ||
| this._updateDisplay(w, h, a, l); | ||
| } | ||
| /* Public | ||
| ================================================== */ | ||
| updateDisplay(width, height, animate, layout) { | ||
| var nav_pos, _layout; | ||
| // Create a slide | ||
| createSlide(d, n) { | ||
| this._createSlide(d, false, n); | ||
| } | ||
| if (typeof layout === 'undefined') { | ||
| _layout = this.options.layout; | ||
| } else { | ||
| _layout = layout; | ||
| } | ||
| // Create Many Slides from an array | ||
| createSlides(array) { | ||
| this._createSlides(array); | ||
| } | ||
| this.options.layout = _layout; | ||
| // Destroy slide by index | ||
| destroySlide(n) { | ||
| this._destroySlide(n); | ||
| } | ||
| if (width) { | ||
| this.options.width = width; | ||
| } else { | ||
| this.options.width = this._el.container.offsetWidth; | ||
| } | ||
| // Destroy slide by id | ||
| destroySlideId(id) { | ||
| this.destroySlide(this._findSlideIndex(id)); | ||
| } | ||
| if (height) { | ||
| this.options.height = height; | ||
| } else { | ||
| this.options.height = this._el.container.offsetHeight; | ||
| } | ||
| /* Navigation | ||
| ================================================== */ | ||
| goTo(n, fast, displayupdate) { | ||
| n = parseInt(n); | ||
| if (isNaN(n)) n = 0; | ||
| this.slide_spacing = this.options.width * 2; | ||
| var self = this; | ||
| // position navigation | ||
| nav_pos = (this.options.height / 2); | ||
| this._nav.next.setPosition({ top: nav_pos }); | ||
| this._nav.previous.setPosition({ top: nav_pos }); | ||
| this.changeBackground({color_value:"", image:false}); | ||
| // Clear Preloader Timer | ||
| if (this.preloadTimer) { | ||
| clearTimeout(this.preloadTimer); | ||
| } | ||
| // Position slides | ||
| for (var i = 0; i < this._slides.length; i++) { | ||
| this._slides[i].updateDisplay(this.options.width, this.options.height, _layout); | ||
| this._slides[i].setPosition({ left: (this.slide_spacing * i), top: 0 }); | ||
| // Set Slide Active State | ||
| for (var i = 0; i < this._slides.length; i++) { | ||
| this._slides[i].setActive(false); | ||
| } | ||
| }; | ||
| if (n < this._slides.length && n >= 0) { | ||
| this.current_id = this._slides[n].data.unique_id; | ||
| // Go to the current slide | ||
| this.goToId(this.current_id, true, true); | ||
| } | ||
| // Stop animation | ||
| if (this.animator) { | ||
| this.animator.stop(); | ||
| } | ||
| if (this._swipable) { | ||
| this._swipable.stopMomentum(); | ||
| } | ||
| if (fast) { | ||
| this._el.slider_container.style.left = -(this.slide_spacing * n) + "px"; | ||
| this._onSlideChange(displayupdate); | ||
| } else { | ||
| this.animator = Animate(this._el.slider_container, { | ||
| left: -(this.slide_spacing * n) + "px", | ||
| duration: this.options.duration, | ||
| easing: this.options.ease, | ||
| complete: this._onSlideChange(displayupdate) | ||
| }); | ||
| } | ||
| // Create a slide | ||
| createSlide(d, n) { | ||
| this._createSlide(d, false, n); | ||
| } | ||
| // Set Slide Active State | ||
| this._slides[n].setActive(true); | ||
| // Create Many Slides from an array | ||
| createSlides(array) { | ||
| this._createSlides(array); | ||
| } | ||
| // Update Navigation and Info | ||
| if (this._slides[n + 1]) { | ||
| this.showNav(this._nav.next, true); | ||
| this._nav.next.update(this._slides[n + 1]); | ||
| } else { | ||
| this.showNav(this._nav.next, false); | ||
| } | ||
| if (this._slides[n - 1]) { | ||
| this.showNav(this._nav.previous, true); | ||
| this._nav.previous.update(this._slides[n - 1]); | ||
| } else { | ||
| this.showNav(this._nav.previous, false); | ||
| } | ||
| // Destroy slide by index | ||
| destroySlide(n) { | ||
| this._destroySlide(n); | ||
| } | ||
| // Preload Slides | ||
| this.preloadTimer = setTimeout(function() { | ||
| self.preloadSlides(n); | ||
| }, this.options.duration); | ||
| } | ||
| } | ||
| // Destroy slide by id | ||
| destroySlideId(id) { | ||
| this.destroySlide(this._findSlideIndex(id)); | ||
| } | ||
| goToId(id, fast, displayupdate) { | ||
| this.goTo(this._findSlideIndex(id), fast, displayupdate); | ||
| } | ||
| /* Navigation | ||
| ================================================== */ | ||
| goTo(n, fast, displayupdate) { | ||
| n = parseInt(n); | ||
| if (isNaN(n)) n = 0; | ||
| preloadSlides(n) { | ||
| if (this._slides[n + 1]) { | ||
| this._slides[n + 1].loadMedia(); | ||
| this._slides[n + 1].scrollToTop(); | ||
| } | ||
| if (this._slides[n + 2]) { | ||
| this._slides[n + 2].loadMedia(); | ||
| this._slides[n + 2].scrollToTop(); | ||
| } | ||
| if (this._slides[n - 1]) { | ||
| this._slides[n - 1].loadMedia(); | ||
| this._slides[n - 1].scrollToTop(); | ||
| } | ||
| if (this._slides[n - 2]) { | ||
| this._slides[n - 2].loadMedia(); | ||
| this._slides[n - 2].scrollToTop(); | ||
| } | ||
| } | ||
| var self = this; | ||
| next() { | ||
| var n = this._findSlideIndex(this.current_id); | ||
| if ((n + 1) < (this._slides.length)) { | ||
| this.goTo(n + 1); | ||
| } else { | ||
| this.goTo(n); | ||
| } | ||
| } | ||
| this.changeBackground({ color_value: "", image: false }); | ||
| previous() { | ||
| var n = this._findSlideIndex(this.current_id); | ||
| if (n - 1 >= 0) { | ||
| this.goTo(n - 1); | ||
| } else { | ||
| this.goTo(n); | ||
| } | ||
| } | ||
| // Clear Preloader Timer | ||
| if (this.preloadTimer) { | ||
| clearTimeout(this.preloadTimer); | ||
| } | ||
| showNav(nav_obj, show) { | ||
| // Set Slide Active State | ||
| for (var i = 0; i < this._slides.length; i++) { | ||
| this._slides[i].setActive(false); | ||
| } | ||
| if (this.options.width <= 500 && Browser.mobile) { | ||
| if (n < this._slides.length && n >= 0) { | ||
| this.current_id = this._slides[n].data.unique_id; | ||
| } else { | ||
| if (show) { | ||
| nav_obj.show(); | ||
| } else { | ||
| nav_obj.hide(); | ||
| } | ||
| // Stop animation | ||
| if (this.animator) { | ||
| this.animator.stop(); | ||
| } | ||
| if (this._swipable) { | ||
| this._swipable.stopMomentum(); | ||
| } | ||
| } | ||
| } | ||
| if (fast) { | ||
| this._el.slider_container.style.left = -(this.slide_spacing * n) + "px"; | ||
| this._onSlideChange(displayupdate); | ||
| } else { | ||
| this.animator = Animate(this._el.slider_container, { | ||
| left: -(this.slide_spacing * n) + "px", | ||
| duration: this.options.duration, | ||
| easing: this.options.ease, | ||
| complete: this._onSlideChange(displayupdate) | ||
| }); | ||
| } | ||
| // Set Slide Active State | ||
| this._slides[n].setActive(true); | ||
| // Update Navigation and Info | ||
| if (this._slides[n + 1]) { | ||
| this.showNav(this._nav.next, true); | ||
| this._nav.next.update(this._slides[n + 1]); | ||
| } else { | ||
| this.showNav(this._nav.next, false); | ||
| } | ||
| if (this._slides[n - 1]) { | ||
| this.showNav(this._nav.previous, true); | ||
| this._nav.previous.update(this._slides[n - 1]); | ||
| } else { | ||
| this.showNav(this._nav.previous, false); | ||
| } | ||
| changeBackground(bg) { | ||
| var bg_color = {r:256, g:256, b:256}, | ||
| bg_color_rgb; | ||
| // Preload Slides | ||
| this.preloadTimer = setTimeout(function() { | ||
| self.preloadSlides(n); | ||
| }, this.options.duration); | ||
| } | ||
| } | ||
| if (bg.color_value && bg.color_value != "") { | ||
| bg_color = hexToRgb(bg.color_value); | ||
| if (!bg_color) { | ||
| trace("Invalid color value " + bg.color_value); | ||
| bg_color = this.options.default_bg_color; | ||
| } | ||
| } else { | ||
| bg_color = this.options.default_bg_color; | ||
| bg.color_value = "rgb(" + bg_color.r + " , " + bg_color.g + ", " + bg_color.b + ")"; | ||
| } | ||
| goToId(id, fast, displayupdate) { | ||
| this.goTo(this._findSlideIndex(id), fast, displayupdate); | ||
| } | ||
| bg_color_rgb = bg_color.r + "," + bg_color.g + "," + bg_color.b; | ||
| this._el.background.style.backgroundImage = "none"; | ||
| preloadSlides(n) { | ||
| if (this._slides[n + 1]) { | ||
| this._slides[n + 1].loadMedia(); | ||
| this._slides[n + 1].scrollToTop(); | ||
| } | ||
| if (this._slides[n + 2]) { | ||
| this._slides[n + 2].loadMedia(); | ||
| this._slides[n + 2].scrollToTop(); | ||
| } | ||
| if (this._slides[n - 1]) { | ||
| this._slides[n - 1].loadMedia(); | ||
| this._slides[n - 1].scrollToTop(); | ||
| } | ||
| if (this._slides[n - 2]) { | ||
| this._slides[n - 2].loadMedia(); | ||
| this._slides[n - 2].scrollToTop(); | ||
| } | ||
| } | ||
| next() { | ||
| var n = this._findSlideIndex(this.current_id); | ||
| if ((n + 1) < (this._slides.length)) { | ||
| this.goTo(n + 1); | ||
| } else { | ||
| this.goTo(n); | ||
| } | ||
| } | ||
| if (bg.color_value) { | ||
| this._el.background.style.backgroundColor = bg.color_value; | ||
| } else { | ||
| this._el.background.style.backgroundColor = "transparent"; | ||
| } | ||
| previous() { | ||
| var n = this._findSlideIndex(this.current_id); | ||
| if (n - 1 >= 0) { | ||
| this.goTo(n - 1); | ||
| } else { | ||
| this.goTo(n); | ||
| } | ||
| } | ||
| if (bg_color.r < 255 || bg_color.g < 255 || bg_color.b < 255 || bg.image) { | ||
| this._nav.next.setColor(true); | ||
| this._nav.previous.setColor(true); | ||
| } else { | ||
| this._nav.next.setColor(false); | ||
| this._nav.previous.setColor(false); | ||
| } | ||
| } | ||
| /* Private Methods | ||
| ================================================== */ | ||
| showNav(nav_obj, show) { | ||
| // Update Display | ||
| _updateDisplay(width, height, animate, layout) { | ||
| var nav_pos, _layout; | ||
| if (this.options.width <= 500 && Browser.mobile) { | ||
| if(typeof layout === 'undefined'){ | ||
| _layout = this.options.layout; | ||
| } else { | ||
| _layout = layout; | ||
| } | ||
| } else { | ||
| if (show) { | ||
| nav_obj.show(); | ||
| } else { | ||
| nav_obj.hide(); | ||
| } | ||
| this.options.layout = _layout; | ||
| } | ||
| } | ||
| this.slide_spacing = this.options.width*2; | ||
| if (width) { | ||
| this.options.width = width; | ||
| } else { | ||
| this.options.width = this._el.container.offsetWidth; | ||
| } | ||
| if (height) { | ||
| this.options.height = height; | ||
| } else { | ||
| this.options.height = this._el.container.offsetHeight; | ||
| } | ||
| changeBackground(bg) { | ||
| var bg_color = { r: 256, g: 256, b: 256 }, | ||
| bg_color_rgb; | ||
| //this._el.container.style.height = this.options.height; | ||
| if (bg.color_value && bg.color_value != "") { | ||
| bg_color = hexToRgb(bg.color_value); | ||
| if (!bg_color) { | ||
| trace("Invalid color value " + bg.color_value); | ||
| bg_color = this.options.default_bg_color; | ||
| } | ||
| } else { | ||
| bg_color = this.options.default_bg_color; | ||
| bg.color_value = "rgb(" + bg_color.r + " , " + bg_color.g + ", " + bg_color.b + ")"; | ||
| } | ||
| // position navigation | ||
| nav_pos = (this.options.height/2); | ||
| this._nav.next.setPosition({top:nav_pos}); | ||
| this._nav.previous.setPosition({top:nav_pos}); | ||
| bg_color_rgb = bg_color.r + "," + bg_color.g + "," + bg_color.b; | ||
| this._el.background.style.backgroundImage = "none"; | ||
| // Position slides | ||
| for (var i = 0; i < this._slides.length; i++) { | ||
| this._slides[i].updateDisplay(this.options.width, this.options.height, _layout); | ||
| this._slides[i].setPosition({left:(this.slide_spacing * i), top:0}); | ||
| if (bg.color_value) { | ||
| this._el.background.style.backgroundColor = bg.color_value; | ||
| } else { | ||
| this._el.background.style.backgroundColor = "transparent"; | ||
| } | ||
| }; | ||
| if (bg_color.r < 255 || bg_color.g < 255 || bg_color.b < 255 || bg.image) { | ||
| this._nav.next.setColor(true); | ||
| this._nav.previous.setColor(true); | ||
| } else { | ||
| this._nav.next.setColor(false); | ||
| this._nav.previous.setColor(false); | ||
| } | ||
| } | ||
| /* Private Methods | ||
| ================================================== */ | ||
| // Go to the current slide | ||
| this.goToId(this.current_id, true, true); | ||
| } | ||
| // Update Display | ||
| // Reposition and redraw slides | ||
| // Reposition and redraw slides | ||
| _updateDrawSlides() { | ||
| var _layout = this.options.layout; | ||
| var _layout = this.options.layout; | ||
| for (var i = 0; i < this._slides.length; i++) { | ||
| this._slides[i].updateDisplay(this.options.width, this.options.height, _layout); | ||
| this._slides[i].setPosition({left:(this.slide_spacing * i), top:0}); | ||
| }; | ||
| for (var i = 0; i < this._slides.length; i++) { | ||
| this._slides[i].updateDisplay(this.options.width, this.options.height, _layout); | ||
| this._slides[i].setPosition({ left: (this.slide_spacing * i), top: 0 }); | ||
| }; | ||
| this.goToId(this.current_id, true, false); | ||
| } | ||
| this.goToId(this.current_id, true, false); | ||
| } | ||
| /* Init | ||
| ================================================== */ | ||
| _initLayout () { | ||
| /* Init | ||
| ================================================== */ | ||
| _initLayout() { | ||
| addClass(this._el.container, 'tl-storyslider'); | ||
| addClass(this._el.container, 'tl-storyslider'); | ||
| // Create Layout | ||
| this._el.slider_container_mask = DOM.create('div', 'tl-slider-container-mask', this._el.container); | ||
| this._el.background = DOM.create('div', 'tl-slider-background tl-animate', this._el.container); | ||
| this._el.slider_container = DOM.create('div', 'tl-slider-container tlanimate', this._el.slider_container_mask); | ||
| this._el.slider_item_container = DOM.create('div', 'tl-slider-item-container', this._el.slider_container); | ||
| // Create Layout | ||
| this._el.slider_container_mask = DOM.create('div', 'tl-slider-container-mask', this._el.container); | ||
| this._el.background = DOM.create('div', 'tl-slider-background tl-animate', this._el.container); | ||
| this._el.slider_container = DOM.create('div', 'tl-slider-container tlanimate', this._el.slider_container_mask); | ||
| this._el.slider_item_container = DOM.create('div', 'tl-slider-item-container', this._el.slider_container); | ||
| // Update Size | ||
| this.options.width = this._el.container.offsetWidth; | ||
| this.options.height = this._el.container.offsetHeight; | ||
| // Update Size | ||
| this.options.width = this._el.container.offsetWidth; | ||
| this.options.height = this._el.container.offsetHeight; | ||
| // Create Navigation | ||
| this._nav.previous = new SlideNav({title: "Previous", description: "description"}, {direction:"previous"}); | ||
| this._nav.next = new SlideNav({title: "Next",description: "description"}, {direction:"next"}); | ||
| // Create Navigation | ||
| this._nav.previous = new SlideNav({ title: "Previous", description: "description" }, { direction: "previous" }); | ||
| this._nav.next = new SlideNav({ title: "Next", description: "description" }, { direction: "next" }); | ||
| // add the navigation to the dom | ||
| this._nav.next.addTo(this._el.container); | ||
| this._nav.previous.addTo(this._el.container); | ||
| // add the navigation to the dom | ||
| this._nav.next.addTo(this._el.container); | ||
| this._nav.previous.addTo(this._el.container); | ||
| this._el.slider_container.style.left="0px"; | ||
| this._el.slider_container.style.left = "0px"; | ||
| if (Browser.touch) { | ||
| //this._el.slider_touch_mask = DOM.create('div', 'tl-slider-touch-mask', this._el.slider_container_mask); | ||
| this._swipable = new Swipable(this._el.slider_container_mask, this._el.slider_container, { | ||
| enable: {x:true, y:false}, | ||
| snap: true | ||
| }); | ||
| this._swipable.enable(); | ||
| if (Browser.touch) { | ||
| //this._el.slider_touch_mask = DOM.create('div', 'tl-slider-touch-mask', this._el.slider_container_mask); | ||
| this._swipable = new Swipable(this._el.slider_container_mask, this._el.slider_container, { | ||
| enable: { x: true, y: false }, | ||
| snap: true | ||
| }); | ||
| this._swipable.enable(); | ||
| // Message | ||
| this._message = new Message(this._el.container, { | ||
| message_class: "tl-message-full", | ||
| message_icon_class: "tl-icon-swipe-left" | ||
| }, | ||
| this.getLanguage()); | ||
| this._message.updateMessage(this._("swipe_to_navigate")); | ||
| this._message.addTo(this._el.container); | ||
| } | ||
| // Message | ||
| this._message = new Message(this._el.container, { | ||
| message_class: "tl-message-full", | ||
| message_icon_class: "tl-icon-swipe-left" | ||
| }, | ||
| this.getLanguage()); | ||
| this._message.updateMessage(this._("swipe_to_navigate")); | ||
| this._message.addTo(this._el.container); | ||
| } | ||
| } | ||
| } | ||
| _initEvents () { | ||
| this._nav.next.on('clicked', this._onNavigation, this); | ||
| this._nav.previous.on('clicked', this._onNavigation, this); | ||
| _initEvents() { | ||
| this._nav.next.on('clicked', this._onNavigation, this); | ||
| this._nav.previous.on('clicked', this._onNavigation, this); | ||
| if (this._message) { | ||
| this._message.on('clicked', this._onMessageClick, this); | ||
| } | ||
| if (this._message) { | ||
| this._message.on('clicked', this._onMessageClick, this); | ||
| } | ||
| if (this._swipable) { | ||
| this._swipable.on('swipe_left', this._onNavigation, this); | ||
| this._swipable.on('swipe_right', this._onNavigation, this); | ||
| this._swipable.on('swipe_nodirection', this._onSwipeNoDirection, this); | ||
| } | ||
| if (this._swipable) { | ||
| this._swipable.on('swipe_left', this._onNavigation, this); | ||
| this._swipable.on('swipe_right', this._onNavigation, this); | ||
| this._swipable.on('swipe_nodirection', this._onSwipeNoDirection, this); | ||
| } | ||
| } | ||
| } | ||
| _initData() { | ||
| if(this.data.title) { | ||
| this._createSlide(this.data.title, true, -1); | ||
| } | ||
| _initData() { | ||
| if (this.data.title) { | ||
| this._createSlide(this.data.title, true, -1); | ||
| } | ||
| this._createSlides(this.data.events); | ||
| } | ||
| } | ||
| /* Events | ||
| ================================================== */ | ||
| _onBackgroundChange(e) { | ||
| var n = this._findSlideIndex(this.current_id); | ||
| var slide_background = this._slides[n].getBackground(); | ||
| this.changeBackground(e); | ||
| this.fire("colorchange", slide_background); | ||
| } | ||
| /* Events | ||
| ================================================== */ | ||
| _onBackgroundChange(e) { | ||
| var n = this._findSlideIndex(this.current_id); | ||
| var slide_background = this._slides[n].getBackground(); | ||
| this.changeBackground(e); | ||
| this.fire("colorchange", slide_background); | ||
| } | ||
| _onMessageClick(e) { | ||
| this._message.hide(); | ||
| } | ||
| _onMessageClick(e) { | ||
| this._message.hide(); | ||
| } | ||
| _onSwipeNoDirection(e) { | ||
| this.goToId(this.current_id); | ||
| } | ||
| _onSwipeNoDirection(e) { | ||
| this.goToId(this.current_id); | ||
| } | ||
| _onNavigation(e) { | ||
| _onNavigation(e) { | ||
| if (e.direction == "next" || e.direction == "left") { | ||
| this.next(); | ||
| } else if (e.direction == "previous" || e.direction == "right") { | ||
| this.previous(); | ||
| } | ||
| this.fire("nav_" + e.direction, this.data); | ||
| } | ||
| if (e.direction == "next" || e.direction == "left") { | ||
| this.next(); | ||
| } else if (e.direction == "previous" || e.direction == "right") { | ||
| this.previous(); | ||
| } | ||
| this.fire("nav_" + e.direction, this.data); | ||
| } | ||
| _onSlideAdded(e) { | ||
| trace("slideadded") | ||
| this.fire("slideAdded", this.data); | ||
| } | ||
| _onSlideAdded(e) { | ||
| trace("slideadded") | ||
| this.fire("slideAdded", this.data); | ||
| } | ||
| _onSlideRemoved(e) { | ||
| this.fire("slideRemoved", this.data); | ||
| } | ||
| _onSlideRemoved(e) { | ||
| this.fire("slideRemoved", this.data); | ||
| } | ||
| _onSlideChange(displayupdate) { | ||
| if (!displayupdate) { | ||
| this.fire("change", {unique_id: this.current_id}); | ||
| } | ||
| } | ||
| _onSlideChange(displayupdate) { | ||
| if (!displayupdate) { | ||
| this.fire("change", { unique_id: this.current_id }); | ||
| } | ||
| } | ||
| _onMouseClick(e) { | ||
| _onMouseClick(e) { | ||
| } | ||
| } | ||
| _fireMouseEvent(e) { | ||
| if (!this._loaded) { | ||
| return; | ||
| } | ||
| _fireMouseEvent(e) { | ||
| if (!this._loaded) { | ||
| return; | ||
| } | ||
| var type = e.type; | ||
| type = (type === 'mouseenter' ? 'mouseover' : (type === 'mouseleave' ? 'mouseout' : type)); | ||
| var type = e.type; | ||
| type = (type === 'mouseenter' ? 'mouseover' : (type === 'mouseleave' ? 'mouseout' : type)); | ||
| if (!this.hasEventListeners(type)) { | ||
| return; | ||
| } | ||
| if (!this.hasEventListeners(type)) { | ||
| return; | ||
| } | ||
| if (type === 'contextmenu') { | ||
| DOMEvent.preventDefault(e); | ||
| } | ||
| if (type === 'contextmenu') { | ||
| DOMEvent.preventDefault(e); | ||
| } | ||
| this.fire(type, { | ||
| latlng: "something", //this.mouseEventToLatLng(e), | ||
| layerPoint: "something else" //this.mouseEventToLayerPoint(e) | ||
| }); | ||
| } | ||
| this.fire(type, { | ||
| latlng: "something", //this.mouseEventToLatLng(e), | ||
| layerPoint: "something else" //this.mouseEventToLayerPoint(e) | ||
| }); | ||
| } | ||
| _onLoaded() { | ||
| this.fire("loaded", this.data); | ||
| } | ||
| _onLoaded() { | ||
| this.fire("loaded", this.data); | ||
| } | ||
@@ -546,2 +542,2 @@ | ||
| classMixin(StorySlider, I18NMixins, Events) | ||
| classMixin(StorySlider, I18NMixins, Events) |
@@ -361,3 +361,9 @@ import * as DOM from "../dom/DOM" | ||
| } | ||
| let callback = (entries, observer) => { | ||
| if (entries.reduce((accum, curr) => accum || curr.isIntersecting, false)) { | ||
| this.updateDisplay() | ||
| } | ||
| } | ||
| let observer = new IntersectionObserver(callback.bind(this)) | ||
| observer.observe(this._el.container) | ||
| this.ready = true; | ||
@@ -923,2 +929,4 @@ this.fire("ready") | ||
| this._updateDisplay(); | ||
| } else { | ||
| trace('updateDisplay called but timeline is not in ready state') | ||
| } | ||
@@ -925,0 +933,0 @@ } |
@@ -108,3 +108,3 @@ import { classMixin, mergeData, findNextGreater, findNextLesser, isEven, findArrayNumberByUniqueID, trace } from "../core/Util" | ||
| this._initData(); | ||
| this._updateDisplay(); | ||
| this.updateDisplay(); | ||
@@ -116,4 +116,14 @@ this._onLoaded(); | ||
| ================================================== */ | ||
| positionMarkers() { | ||
| this._positionMarkers(); | ||
| positionMarkers(fast) { | ||
| // POSITION X | ||
| for (var i = 0; i < this._markers.length; i++) { | ||
| var pos = this.timescale.getPositionInfo(i); | ||
| if (fast) { | ||
| this._markers[i].setClass("tl-timemarker tl-timemarker-fast"); | ||
| } else { | ||
| this._markers[i].setClass("tl-timemarker"); | ||
| } | ||
| this._markers[i].setPosition({ left: pos.start }); | ||
| this._markers[i].setWidth(pos.width); | ||
| }; | ||
| } | ||
@@ -123,4 +133,32 @@ | ||
| ================================================== */ | ||
| updateDisplay(w, h, a, l) { | ||
| this._updateDisplay(w, h, a, l); | ||
| updateDisplay(width, height, animate) { | ||
| console.log(`TimeNav.updateDisplay(w: ${width}, h: ${height}, a: ${animate})`) | ||
| let reposition_markers = false; | ||
| if (width) { | ||
| if (this.options.width == 0 && width > 0) { | ||
| reposition_markers = true; | ||
| } | ||
| this.options.width = width; | ||
| } | ||
| if (height && height != this.options.height) { | ||
| this.options.height = height; | ||
| this.timescale = this._getTimeScale(); | ||
| } | ||
| // Size Markers | ||
| 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"; | ||
| // Update Swipable constraint | ||
| 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() | ||
| } | ||
| // Go to the current slide | ||
| this.goToId(this.current_id, true); | ||
| } | ||
@@ -285,17 +323,2 @@ | ||
| _positionMarkers(fast) { | ||
| // POSITION X | ||
| for (var i = 0; i < this._markers.length; i++) { | ||
| var pos = this.timescale.getPositionInfo(i); | ||
| if (fast) { | ||
| this._markers[i].setClass("tl-timemarker tl-timemarker-fast"); | ||
| } else { | ||
| this._markers[i].setClass("tl-timemarker"); | ||
| } | ||
| this._markers[i].setPosition({ left: pos.start }); | ||
| this._markers[i].setWidth(pos.width); | ||
| }; | ||
| } | ||
| _calculateMarkerHeight(h) { | ||
@@ -563,32 +586,8 @@ return ((h / this.timescale.getNumberOfRows()) - this.options.marker_padding); | ||
| ================================================== */ | ||
| // Update Display | ||
| _updateDisplay(width, height, animate) { | ||
| if (width) { | ||
| this.options.width = width; | ||
| } | ||
| if (height && height != this.options.height) { | ||
| this.options.height = height; | ||
| this.timescale = this._getTimeScale(); | ||
| } | ||
| // Size Markers | ||
| 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"; | ||
| // Update Swipable constraint | ||
| this._swipable.updateConstraint({ top: false, bottom: false, left: (this.options.width / 2), right: -(this.timescale.getPixelWidth() - (this.options.width / 2)) }); | ||
| // Go to the current slide | ||
| this.goToId(this.current_id, true); | ||
| } | ||
| _drawTimeline(fast) { | ||
| console.log(`TimeNav._drawTimeline(${fast})`) | ||
| this.timescale = this._getTimeScale(); | ||
| this.timeaxis.drawTicks(this.timescale, this.options.optimal_tick_width); | ||
| this._positionMarkers(fast); | ||
| this.positionMarkers(fast); | ||
| this._assignRowsToMarkers(); | ||
@@ -605,2 +604,3 @@ this._createGroups(); | ||
| _updateDrawTimeline(check_update) { | ||
| console.log(`TimeNav._updateDrawTimeline(${check_update})`) | ||
| var do_update = false; | ||
@@ -630,3 +630,3 @@ | ||
| this.timeaxis.positionTicks(this.timescale, this.options.optimal_tick_width); | ||
| this._positionMarkers(); | ||
| this.positionMarkers(); | ||
| this._assignRowsToMarkers(); | ||
@@ -637,3 +637,3 @@ this._positionGroups(); | ||
| } | ||
| this._updateDisplay(); | ||
| this.updateDisplay(); | ||
| } else { | ||
@@ -664,3 +664,3 @@ this._drawTimeline(true); | ||
| // Knight Lab Logo | ||
| this._el.attribution.innerHTML = "<a href='http://timeline.knightlab.com' target='_blank'><span class='tl-knightlab-logo'></span>Timeline JS</a>" | ||
| this._el.attribution.innerHTML = "<a href='http://timeline.knightlab.com' target='_blank'><span class='tl-knightlab-logo'></span>TimelineJS</a>" | ||
@@ -667,0 +667,0 @@ // Time Axis |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.58%
5336026
- Number of package files
- increased by1.23%
412
- Lines of code
- increased by1.18%
22887
No dependency changes