").addClass(this.classPrefix + "spinner-rotate"))
+ );
this.build();
this.start();
},
- setOptions: function(options) {
- this.options = $.extend({
- show: 200,
- hide: 200
- }, options || {});
+ setOptions: function (options) {
+ this.options = $.extend(
+ {
+ show: 200,
+ hide: 200,
+ },
+ options || {}
+ );
},
- build: function() {
+ build: function () {
if (this._build) return;
- this._rotate.html('');
+ this._rotate.html("");
var d = (this.options.length + this.options.radius) * 2,
- dimensions = { height: d, width: d };
+ dimensions = { height: d, width: d };
// we parse stuff below so make sure that happens with a visible spinner
- var is_vis = this.element.is(':visible');
+ var is_vis = this.element.is(":visible");
if (!is_vis) this.element.show();
// find the amount of lines
var frame, line;
- this._rotate.append(frame = $('
').addClass(this.classPrefix + 'spinner-frame')
- .append(line = $('
').addClass(this.classPrefix + 'spinner-line'))
+ this._rotate.append(
+ (frame = $("
")
+ .addClass(this.classPrefix + "spinner-frame")
+ .append(
+ (line = $("
").addClass(this.classPrefix + "spinner-line"))
+ ))
);
- var lines = parseInt($(line).css('z-index'));
+ var lines = parseInt($(line).css("z-index"));
this.lines = lines;
// now reset that z-index
- line.css({ 'z-index': 'inherit' });
+ line.css({ "z-index": "inherit" });
frame.remove();
@@ -523,72 +576,83 @@ $.extend(Spinner.prototype, {
// insert frames
var color;
- for (var i = 0;i').addClass(this.classPrefix + 'spinner-frame')
- .append(line = $('
').addClass(this.classPrefix + 'spinner-line'))
+ this._rotate.append(
+ (frame = $("
")
+ .addClass(this.classPrefix + "spinner-frame")
+ .append(
+ (line = $("
").addClass(this.classPrefix + "spinner-line"))
+ ))
);
- color = color || line.css('color');
+ color = color || line.css("color");
line.css({ background: color });
- frame.css({ opacity: ((1 / lines) * (i+1)).toFixed(2) });
+ frame.css({ opacity: ((1 / lines) * (i + 1)).toFixed(2) });
var transformCSS = {};
- transformCSS[Support.css.prefixed('transform')] = 'rotate(' + ((360 / lines) * (i + 1)) + 'deg)';
+ transformCSS[Support.css.prefixed("transform")] =
+ "rotate(" + (360 / lines) * (i + 1) + "deg)";
frame.css(transformCSS);
}
this._build = true;
},
- start: function() {
+ start: function () {
var rotateCSS = {};
- rotateCSS[Support.css.prefixed('animation')] = this.classPrefix + 'spinner-spin 1s infinite steps(' + this.lines + ')';
+ rotateCSS[Support.css.prefixed("animation")] =
+ this.classPrefix + "spinner-spin 1s infinite steps(" + this.lines + ")";
this._rotate.css(rotateCSS);
},
- stop: function() {
+ stop: function () {
var rotateCSS = {};
- rotateCSS[Support.css.prefixed('animation')] = 'none';
+ rotateCSS[Support.css.prefixed("animation")] = "none";
this._rotate.css(rotateCSS);
},
- show: function(callback) {
+ show: function (callback) {
this.build();
this.start();
- this.element.stop(true).fadeTo(this.options.show, 1, callback);//deferred.resolve);
+ this.element.stop(true).fadeTo(this.options.show, 1, callback); //deferred.resolve);
},
- hide: function(callback) {
- this.element.stop(true).fadeOut(this.options.hide, $.proxy(function() {
- this.stop();
- if (callback) callback();
- }, this));
+ hide: function (callback) {
+ this.element.stop(true).fadeOut(
+ this.options.hide,
+ function () {
+ this.stop();
+ if (callback) callback();
+ }.bind(this)
+ );
},
- refresh: function() {
+ refresh: function () {
this._build = false;
this.build();
- }
+ },
});
-function Timers() { return this.initialize.apply(this, _slice.call(arguments)); };
+function Timers() {
+ return this.initialize.apply(this, _slice.call(arguments));
+}
$.extend(Timers.prototype, {
- initialize: function() {
+ initialize: function () {
this._timers = {};
},
- set: function(name, handler, ms) {
+ set: function (name, handler, ms) {
this._timers[name] = setTimeout(handler, ms);
},
- get: function(name) {
+ get: function (name) {
return this._timers[name];
},
- clear: function(name) {
+ clear: function (name) {
if (name) {
if (this._timers[name]) {
clearTimeout(this._timers[name]);
@@ -599,18 +663,18 @@ $.extend(Timers.prototype, {
}
},
- clearAll: function() {
- $.each(this._timers, function(i, timer) {
+ clearAll: function () {
+ $.each(this._timers, function (_i, timer) {
clearTimeout(timer);
});
this._timers = {};
- }
+ },
});
// uses Types to scan a URI for info
function getURIData(url) {
- var result = { type: 'image' };
- $.each(Types, function(i, type) {
+ var result = { type: "image" };
+ $.each(Types, function (i, type) {
var data = type.data(url);
if (data) {
result = data;
@@ -623,137 +687,151 @@ function getURIData(url) {
}
function detectExtension(url) {
- var ext = (url || '').replace(/\?.*/g, '').match(/\.([^.]{3,4})$/);
+ var ext = (url || "").replace(/\?.*/g, "").match(/\.([^.]{3,4})$/);
return ext ? ext[1].toLowerCase() : null;
}
-
var Types = {
- 'image': {
- extensions: 'bmp gif jpeg jpg png webp',
- detect: function(url) {
- return $.inArray(detectExtension(url), this.extensions.split(' ')) > -1;
+ image: {
+ extensions: "bmp gif jpeg jpg png webp",
+ detect: function (url) {
+ return $.inArray(detectExtension(url), this.extensions.split(" ")) > -1;
},
- data: function(url) {
+ data: function (url) {
if (!this.detect()) return false;
return {
- extension: detectExtension(url)
+ extension: detectExtension(url),
};
- }
+ },
},
- 'youtube': {
- detect: function(url) {
- var res = /(youtube\.com|youtu\.be)\/watch\?(?=.*vi?=([a-zA-Z0-9-_]+))(?:\S+)?$/.exec(url);
+ youtube: {
+ detect: function (url) {
+ var res =
+ /(youtube\.com|youtu\.be)\/watch\?(?=.*vi?=([a-zA-Z0-9-_]+))(?:\S+)?$/.exec(
+ url
+ );
if (res && res[2]) return res[2];
- res = /(youtube\.com|youtu\.be)\/(vi?\/|u\/|embed\/)?([a-zA-Z0-9-_]+)(?:\S+)?$/i.exec(url);
+ res =
+ /(youtube\.com|youtu\.be)\/(vi?\/|u\/|embed\/)?([a-zA-Z0-9-_]+)(?:\S+)?$/i.exec(
+ url
+ );
if (res && res[3]) return res[3];
return false;
},
- data: function(url) {
+ data: function (url) {
var id = this.detect(url);
if (!id) return false;
return {
- id: id
+ id: id,
};
- }
+ },
},
- 'vimeo': {
- detect: function(url) {
+ vimeo: {
+ detect: function (url) {
var res = /(vimeo\.com)\/([a-zA-Z0-9-_]+)(?:\S+)?$/i.exec(url);
if (res && res[2]) return res[2];
return false;
},
- data: function(url) {
+ data: function (url) {
var id = this.detect(url);
if (!id) return false;
return {
- id: id
+ id: id,
};
- }
- }
+ },
+ },
};
+var VimeoReady = (function () {
+ var VimeoReady = function () {
+ return this.initialize.apply(this, _slice.call(arguments));
+ };
+ $.extend(VimeoReady.prototype, {
+ initialize: function (url, callback) {
+ this.url = url;
+ this.callback = callback;
-var VimeoReady = (function() {
-
-var VimeoReady = function() { return this.initialize.apply(this, _slice.call(arguments)); };
-$.extend(VimeoReady.prototype, {
- initialize: function(url, callback) {
- this.url = url;
- this.callback = callback;
-
- this.load();
- },
+ this.load();
+ },
- load: function() {
- // first try the cache
- var cache = Cache.get(this.url);
+ load: function () {
+ // first try the cache
+ var cache = Cache.get(this.url);
- if (cache) {
- return this.callback(cache.data);
- }
+ if (cache) {
+ return this.callback(cache.data);
+ }
- var protocol = 'http' + (window.location && window.location.protocol == 'https:' ? 's' : '') + ':',
+ var protocol =
+ "http" +
+ (window.location && window.location.protocol == "https:" ? "s" : "") +
+ ":",
video_id = getURIData(this.url).id;
- this._xhr = $.getJSON(protocol + '//vimeo.com/api/oembed.json?url=' + protocol + '//vimeo.com/' + video_id + '&maxwidth=9999999&maxheight=9999999&callback=?', $.proxy(function(_data) {
- var data = {
- dimensions: {
- width: _data.width,
- height: _data.height
- }
- };
-
- Cache.set(this.url, data);
+ this._xhr = $.getJSON(
+ protocol +
+ "//vimeo.com/api/oembed.json?url=" +
+ protocol +
+ "//vimeo.com/" +
+ video_id +
+ "&maxwidth=9999999&maxheight=9999999&callback=?",
+ function (_data) {
+ var data = {
+ dimensions: {
+ width: _data.width,
+ height: _data.height,
+ },
+ };
- if (this.callback) this.callback(data);
- }, this));
- },
-
- abort: function() {
- if (this._xhr) {
- this._xhr.abort();
- this._xhr = null;
- }
- }
-});
+ Cache.set(this.url, data);
+ if (this.callback) this.callback(data);
+ }.bind(this)
+ );
+ },
-var Cache = {
- cache: [],
+ abort: function () {
+ if (this._xhr) {
+ this._xhr.abort();
+ this._xhr = null;
+ }
+ },
+ });
- get: function(url) {
- var entry = null;
- for(var i=0;i element
- if ($.type(object) == 'string') {
- // turn the string into an element
- object = { url: object };
- }
-
- // element -> object
- else if (object && object.nodeType == 1) {
- var element = $(object);
-
- object = {
- element: element[0],
- url: element.attr('href'),
- caption: element.data('strip-caption'),
- group: element.data('strip-group'),
- extension: element.data('strip-extension'),
- type: element.data('strip-type'),
- options: (element.data('strip-options') && eval('({' + element.data('strip-options') + '})')) || {}
- };
- }
-
- if (object) {
- // detect type if none is set
- if (!object.extension) {
- object.extension = detectExtension(object.url);
- }
-
- if (!object.type) {
- var data = getURIData(object.url);
- object._data = data;
- object.type = data.type;
- }
- }
-
- if (!object._data) {
- object._data = getURIData(object.url);
- }
-
- if (object && object.options) {
- object.options = $.extend(true, $.extend({}, options), $.extend({}, object.options));
- } else {
- object.options = $.extend({}, options);
- }
- // extend the options
- object.options = Options.create(object.options, object.type, object._data);
-
- // extend this with data
- $.extend(this, object);
-
- return this;
- }
+ initialize: function (object) {
+ var options = arguments[1] || {},
+ data = {};
+
+ // string -> element
+ if (typeof object === "string") {
+ // turn the string into an element
+ object = { url: object };
+ }
+
+ // element -> object
+ else if (object && object.nodeType === 1) {
+ var element = $(object);
+
+ object = {
+ element: element[0],
+ url: element.attr("href"),
+ caption: element.attr("data-strip-caption"),
+ group: element.attr("data-strip-group"),
+ extension: element.attr("data-strip-extension"),
+ type: element.attr("data-strip-type"),
+ options:
+ (element.attr("data-strip-options") &&
+ eval("({" + element.attr("data-strip-options") + "})")) ||
+ {},
+ };
+ }
+
+ if (object) {
+ // detect type if none is set
+ if (!object.extension) {
+ object.extension = detectExtension(object.url);
+ }
+
+ if (!object.type) {
+ var data = getURIData(object.url);
+ object._data = data;
+ object.type = data.type;
+ }
+ }
+
+ if (!object._data) {
+ object._data = getURIData(object.url);
+ }
+
+ if (object && object.options) {
+ object.options = $.extend(
+ true,
+ $.extend({}, options),
+ $.extend({}, object.options)
+ );
+ } else {
+ object.options = $.extend({}, options);
+ }
+ // extend the options
+ object.options = Options.create(object.options, object.type, object._data);
+
+ // extend this with data
+ $.extend(this, object);
+
+ return this;
+ },
});
var Pages = {
- initialize: function(element) {
+ initialize: function (element) {
this.element = element;
this.pages = {};
this.uid = 1;
},
- add: function(views) {
+ add: function (views) {
this.uid++;
this.views = views;
@@ -952,12 +1047,15 @@ var Pages = {
Window._showUIOnResize = true;
// add pages for all these views
- $.each(views, $.proxy(function(i, view) {
- this.pages[this.uid].push(new Page(view, i + 1, this.views.length));
- }, this));
+ $.each(
+ views,
+ function (i, view) {
+ this.pages[this.uid].push(new Page(view, i + 1, this.views.length));
+ }.bind(this)
+ );
},
- show: function(position, callback) {
+ show: function (position, callback) {
var page = this.pages[this.uid][position - 1];
// never try to reload the exact same frame
@@ -980,18 +1078,20 @@ var Pages = {
this.page = page;
this.removeHiddenAndLoadingInactive();
- page.show($.proxy(function() {
- // once a page has been fully shown we mark Pages as not being switched anymore
- this._switched = false;
- if (callback) callback();
- }, this));
+ page.show(
+ function () {
+ // once a page has been fully shown we mark Pages as not being switched anymore
+ this._switched = false;
+ if (callback) callback();
+ }.bind(this)
+ );
},
- getLoadingCount: function() {
+ getLoadingCount: function () {
// we only stop loading if all the frames we have are not loading anymore
var count = 0;
- $.each(this.pages, function(id, pages) {
- $.each(pages, function(j, page) {
+ $.each(this.pages, function (_id, pages) {
+ $.each(pages, function (_j, page) {
if (page.loading) count++;
});
});
@@ -1000,37 +1100,36 @@ var Pages = {
// used by the API when opening
// checks if the page is in the currently open group
- getPositionInActivePageGroup: function(element) {
+ getPositionInActivePageGroup: function (element) {
var position = 0,
- activeGroup = this.pages[this.uid];
+ activeGroup = this.pages[this.uid];
if (activeGroup) {
- $.each(activeGroup, function(i, page) {
+ $.each(activeGroup, function (i, page) {
if (page.view.element && page.view.element == element) {
position = i + 1;
}
});
}
- return position
+ return position;
},
// remove pages not matching the current id
- removeExpired: function(instantly) {
- $.each(this.pages, function(id, pages) {
+ removeExpired: function (instantly) {
+ $.each(this.pages, function (id, pages) {
if (id != this._id) {
- $.each(pages, function(j, page) {
+ $.each(pages, function (_j, page) {
page.remove(instantly);
});
}
});
},
-
// Window.hide will call this when fully closed
- removeAll: function() {
- $.each(this.pages, function(id, pages) {
- $.each(pages, function(j, page) {
+ removeAll: function () {
+ $.each(this.pages, function (_id, pages) {
+ $.each(pages, function (_j, page) {
page.remove();
});
});
@@ -1039,783 +1138,892 @@ var Pages = {
this.pages = {};
},
- hideVisibleInactive: function(alternateDuration) {
- $.each(this.pages, $.proxy(function(id, pages) {
- $.each(pages, $.proxy(function(j, page) {
- if (page.uid != this.page.uid) {
- page.hide(null, alternateDuration);
- }
- }, this));
- }, this));
+ hideVisibleInactive: function (alternateDuration) {
+ $.each(
+ this.pages,
+ function (_id, pages) {
+ $.each(
+ pages,
+ function (_j, page) {
+ if (page.uid != this.page.uid) {
+ page.hide(null, alternateDuration);
+ }
+ }.bind(this)
+ );
+ }.bind(this)
+ );
},
- stopInactive: function() {
- $.each(this.pages, $.proxy(function(id, pages) {
- $.each(pages, $.proxy(function(j, page) {
- if (page.uid != this.page.uid && !page.preloading) {
- page.stop();
- }
- }, this));
- }, this));
+ stopInactive: function () {
+ $.each(
+ this.pages,
+ function (_id, pages) {
+ $.each(
+ pages,
+ function (_j, page) {
+ if (page.uid != this.page.uid && !page.preloading) {
+ page.stop();
+ }
+ }.bind(this)
+ );
+ }.bind(this)
+ );
},
// TODO: might be nice to have a hide animation before removal, it's instant now
- removeHiddenAndLoadingInactive: function() {
+ removeHiddenAndLoadingInactive: function () {
// track which inactive page groups are empty
var empty = [];
- $.each(this.pages, $.proxy(function(uid, pages) {
- // only remove pages in the groups that are currently not active
- if (uid != this.uid) {
- var removed = 0;
-
- $.each(pages, $.proxy(function(j, page) {
- // remove hidden or loading, but dont'remove frames in animation
- if ((!page.visible || page.loading) && !page.animatingWindow) {
- page.remove();
- }
-
- if (page.removed) removed++; // count all, not those we remove now
- }, this));
-
- // if we've removed all pages from this group it's safe to remove it
- // we don't do this in the loop but below
- if (removed == pages.length) {
- empty.push(uid);
+ $.each(
+ this.pages,
+ function (uid, pages) {
+ // only remove pages in the groups that are currently not active
+ if (uid != this.uid) {
+ var removed = 0;
+
+ $.each(
+ pages,
+ function (_j, page) {
+ // remove hidden or loading, but dont'remove frames in animation
+ if ((!page.visible || page.loading) && !page.animatingWindow) {
+ page.remove();
+ }
+
+ if (page.removed) removed++; // count all, not those we remove now
+ }.bind(this)
+ );
+
+ // if we've removed all pages from this group it's safe to remove it
+ // we don't do this in the loop but below
+ if (removed == pages.length) {
+ empty.push(uid);
+ }
}
- }
- }, this));
+ }.bind(this)
+ );
// now remove all empty page groups
- $.each(empty, $.proxy(function(i, uid) {
- delete this.pages[uid];
- }, this));
-
+ $.each(
+ empty,
+ function (_i, uid) {
+ delete this.pages[uid];
+ }.bind(this)
+ );
},
- stop: function() {
- $.each(this.pages, function(id, pages) {
- $.each(pages, function(j, page) {
+ stop: function () {
+ $.each(this.pages, function (id, pages) {
+ $.each(pages, function (_j, page) {
page.stop();
});
});
},
- setActiveClass: function(page) {
+ setActiveClass: function (page) {
// switch the active element class
this.removeActiveClasses();
// add the active class if the new page is bound to an element
var element = page.view.element;
if (element) {
- $(element).addClass('strip-active-element strip-active-group');
+ $(element).addClass("strip-active-element strip-active-group");
// also give other items in the group the active group class
- var group = $(element).data('strip-group');
+ var group = $(element).attr("data-strip-group");
if (group) {
- $('.strip[data-strip-group="' + group + '"]').addClass('strip-active-group');
+ $('.strip[data-strip-group="' + group + '"]').addClass(
+ "strip-active-group"
+ );
}
}
},
- removeActiveClasses: function() {
- $('.strip-active-group').removeClass('strip-active-group strip-active-element');
- }
+ removeActiveClasses: function () {
+ $(".strip-active-group").removeClass(
+ "strip-active-group strip-active-element"
+ );
+ },
};
-var Page = (function() {
-var uid = 0,
+var Page = (function () {
+ var uid = 0,
loadedUrlCache = {};
-function Page() { return this.initialize.apply(this, _slice.call(arguments)); };
-$.extend(Page.prototype, {
- initialize: function(view, position, total) {
- this.view = view;
- this.dimensions = { width: 0, height: 0 };
- this.uid = uid++;
+ function Page() {
+ return this.initialize.apply(this, _slice.call(arguments));
+ }
+ $.extend(Page.prototype, {
+ initialize: function (view, position, total) {
+ this.view = view;
+ this.dimensions = { width: 0, height: 0 };
+ this.uid = uid++;
- // store position/total views for later use
- this._position = position;
- this._total = total;
+ // store position/total views for later use
+ this._position = position;
+ this._total = total;
- this.animated = false;
- this.visible = false;
+ this.animated = false;
+ this.visible = false;
- this.queues = {};
- this.queues.showhide = $({});
- },
+ this.queues = {};
+ this.queues.showhide = $({});
+ },
- // create the page, this doesn't mean it's loaded
- // should happen instantly
- create: function() {
- if (this._created) return;
+ // create the page, this doesn't mean it's loaded
+ // should happen instantly
+ create: function () {
+ if (this._created) return;
+
+ Pages.element.append(
+ (this.element = $("
")
+ .addClass("strp-page")
+ .append((this.container = $("
").addClass("strp-container")))
+ .css({ opacity: 0 })
+ .hide())
+ );
- Pages.element.append(this.element = $('
').addClass('strp-page')
- .append(this.container = $('
').addClass('strp-container'))
- .css({ opacity: 0 })
- .hide()
- );
+ var hasPosition = this.view.options.position && this._total > 1;
+ if (this.view.caption || hasPosition) {
+ this.element.append(
+ (this.info = $("
")
+ .addClass("strp-info")
+ .append(
+ (this.info_padder = $("
").addClass("strp-info-padder"))
+ ))
+ );
- var hasPosition = (this.view.options.position && this._total > 1);
- if (this.view.caption || hasPosition) {
- this.element.append(this.info = $('
').addClass('strp-info')
- .append(this.info_padder = $('
').addClass('strp-info-padder'))
- );
+ // insert caption first because it floats right
+ if (hasPosition) {
+ this.element.addClass("strp-has-position");
- // insert caption first because it floats right
- if (hasPosition) {
- this.element.addClass('strp-has-position');
+ this.info_padder.append(
+ $("
")
+ .addClass("strp-position")
+ .html(this._position + " / " + this._total)
+ );
+ }
- this.info_padder.append($('
').addClass('strp-position')
- .html(this._position + ' / ' + this._total)
- );
+ if (this.view.caption) {
+ this.info_padder.append(
+ (this.caption = $("
")
+ .addClass("strp-caption")
+ .html(this.view.caption))
+ );
+ }
}
- if (this.view.caption) {
- this.info_padder.append(this.caption = $('
').addClass('strp-caption')
- .html(this.view.caption)
- );
+ switch (this.view.type) {
+ case "image":
+ this.container.append(
+ (this.content = $("![]()
").attr({ src: this.view.url }))
+ );
+ break;
+
+ case "vimeo":
+ case "youtube":
+ this.container.append((this.content = $("
")));
+ break;
}
- }
- switch (this.view.type) {
- case 'image':
- this.container.append(this.content = $('![]()
')
- .attr({ src: this.view.url })
- );
- break;
-
- case 'vimeo':
- case 'youtube':
- this.container.append(this.content = $('
'));
- break;
- }
-
- // ui
- this.element.addClass('strp' + (this.view.options.overlap ? '' : '-no') + '-overlap');
+ // ui
+ this.element.addClass(
+ "strp" + (this.view.options.overlap ? "" : "-no") + "-overlap"
+ );
- // no sides
- if (this._total < 2) {
- this.element.addClass('strp-no-sides');
- }
+ // no sides
+ if (this._total < 2) {
+ this.element.addClass("strp-no-sides");
+ }
- this.content.addClass('strp-content-element');
+ this.content.addClass("strp-content-element");
- this._created = true;
- },
+ this._created = true;
+ },
- // surrounding
- _getSurroundingPages: function() {
- var preload;
- if (!(preload = this.view.options.preload)) return [];
+ // surrounding
+ _getSurroundingPages: function () {
+ var preload;
+ if (!(preload = this.view.options.preload)) return [];
- var pages = [],
+ var pages = [],
begin = Math.max(1, this._position - preload[0]),
end = Math.min(this._position + preload[1], this._total),
pos = this._position;
- // add the pages after this one first for the preloading order
- for (var i = pos;i<=end;i++) {
- var page = Pages.pages[Pages.uid][i-1];
- if (page._position != pos) pages.push(page);
- }
-
- for (var i = pos;i>=begin;i--) {
- var page = Pages.pages[Pages.uid][i-1];
- if (page._position != pos) pages.push(page);
- }
-
- return pages;
- },
-
- preloadSurroundingImages: function() {
- var pages = this._getSurroundingPages();
-
- $.each(pages, $.proxy(function(i, page) {
- page.preload();
- }, this));
- },
-
- // preload is a non-abortable preloader,
- // so that it doesn't interfere with our regular load
- preload: function() {
- if (this.preloading || this.preloaded
- || this.view.type != 'image'
- || !this.view.options.preload
- || this.loaded // page might be loaded before it's preloaded so also stop there
- ) {
- return;
- }
-
- // make sure the page is created
- this.create();
-
- this.preloading = true;
-
- new ImageReady(this.content[0], $.proxy(function(imageReady) {
- this.loaded = true;
- this.preloading = false;
- this.preloaded = true;
-
- this.dimensions = {
- width: imageReady.img.naturalWidth,
- height: imageReady.img.naturalHeight
- };
- }, this), null, { method: 'naturalWidth' });
- },
+ // add the pages after this one first for the preloading order
+ for (var i = pos; i <= end; i++) {
+ var page = Pages.pages[Pages.uid][i - 1];
+ if (page._position != pos) pages.push(page);
+ }
- // the purpose of load is to set dimensions
- // we use it to set dimensions even for content that doesn't load like youtube
- load: function(callback, isPreload) {
- // make sure the page is created
- this.create();
+ for (var i = pos; i >= begin; i--) {
+ var page = Pages.pages[Pages.uid][i - 1];
+ if (page._position != pos) pages.push(page);
+ }
- // exit early if already loaded
- if (this.loaded) {
- if (callback) callback();
- return;
- }
+ return pages;
+ },
- // abort possible previous (pre)load
- this.abort();
+ preloadSurroundingImages: function () {
+ var pages = this._getSurroundingPages();
- // loading indicator, we don't show it when preloading frames
- this.loading = true;
+ $.each(
+ pages,
+ function (_i, page) {
+ page.preload();
+ }.bind(this)
+ );
+ },
- // start spinner
- // only when this url hasn't been loaded before
- if (this.view.options.spinner && !loadedUrlCache[this.view.url]) {
- Window.startLoading();
- }
+ // preload is a non-abortable preloader,
+ // so that it doesn't interfere with our regular load
+ preload: function () {
+ if (
+ this.preloading ||
+ this.preloaded ||
+ this.view.type !== "image" ||
+ !this.view.options.preload ||
+ this.loaded // page might be loaded before it's preloaded so also stop there
+ ) {
+ return;
+ }
- switch(this.view.type) {
- case 'image':
+ // make sure the page is created
+ this.create();
- // if we had an error before just go through
- if (this.error) {
- if (callback) callback();
- return;
- }
+ this.preloading = true;
- this.imageReady = new ImageReady(this.content[0], $.proxy(function(imageReady) {
- // mark as loaded
- this._markAsLoaded();
+ new ImageReady(
+ this.content[0],
+ function (imageReady) {
+ this.loaded = true;
+ this.preloading = false;
+ this.preloaded = true;
this.dimensions = {
width: imageReady.img.naturalWidth,
- height: imageReady.img.naturalHeight
+ height: imageReady.img.naturalHeight,
};
+ }.bind(this),
+ null,
+ { method: "naturalWidth" }
+ );
+ },
- if (callback) callback();
- }, this), $.proxy(function() {
- // mark as loaded
- this._markAsLoaded();
+ // the purpose of load is to set dimensions
+ // we use it to set dimensions even for content that doesn't load like youtube
+ load: function (callback, isPreload) {
+ // make sure the page is created
+ this.create();
- this.content.hide();
- this.container.append(this.error = $('
').addClass('strp-error'));
- this.element.addClass('strp-has-error');
+ // exit early if already loaded
+ if (this.loaded) {
+ if (callback) callback();
+ return;
+ }
- this.dimensions = {
- width: this.error.outerWidth(),
- height: this.error.outerHeight()
- };
+ // abort possible previous (pre)load
+ this.abort();
- if (callback) callback();
- }, this), { method: 'naturalWidth' });
+ // loading indicator, we don't show it when preloading frames
+ this.loading = true;
- break;
+ // start spinner
+ // only when this url hasn't been loaded before
+ if (this.view.options.spinner && !loadedUrlCache[this.view.url]) {
+ Window.startLoading();
+ }
- case 'vimeo':
+ switch (this.view.type) {
+ case "image":
+ // if we had an error before just go through
+ if (this.error) {
+ if (callback) callback();
+ return;
+ }
- this.vimeoReady = new VimeoReady(this.view.url, $.proxy(function(data) {
+ this.imageReady = new ImageReady(
+ this.content[0],
+ function (imageReady) {
+ // mark as loaded
+ this._markAsLoaded();
+
+ this.dimensions = {
+ width: imageReady.img.naturalWidth,
+ height: imageReady.img.naturalHeight,
+ };
+
+ if (callback) callback();
+ }.bind(this),
+ function () {
+ // mark as loaded
+ this._markAsLoaded();
+
+ this.content.hide();
+ this.container.append(
+ (this.error = $("
").addClass("strp-error"))
+ );
+ this.element.addClass("strp-has-error");
+
+ this.dimensions = {
+ width: this.error.outerWidth(),
+ height: this.error.outerHeight(),
+ };
+
+ if (callback) callback();
+ }.bind(this),
+ { method: "naturalWidth" }
+ );
+
+ break;
+
+ case "vimeo":
+ this.vimeoReady = new VimeoReady(
+ this.view.url,
+ function (data) {
+ // mark as loaded
+ this._markAsLoaded();
+
+ this.dimensions = {
+ width: data.dimensions.width,
+ height: data.dimensions.height,
+ };
+
+ if (callback) callback();
+ }.bind(this)
+ );
+
+ break;
+
+ case "youtube":
// mark as loaded
this._markAsLoaded();
this.dimensions = {
- width: data.dimensions.width,
- height: data.dimensions.height
+ width: this.view.options.width,
+ height: this.view.options.height,
};
if (callback) callback();
- }, this));
-
- break;
-
- case 'youtube':
- // mark as loaded
- this._markAsLoaded();
-
- this.dimensions = {
- width: this.view.options.width,
- height: this.view.options.height
- };
-
- if (callback) callback();
- break;
- }
- },
+ break;
+ }
+ },
- // helper for load()
- _markAsLoaded: function() {
- this.loading = false;
- this.loaded = true;
+ // helper for load()
+ _markAsLoaded: function () {
+ this.loading = false;
+ this.loaded = true;
- // mark url as loaded so we can avoid
- // showing the spinner again
- loadedUrlCache[this.view.url] = true;
+ // mark url as loaded so we can avoid
+ // showing the spinner again
+ loadedUrlCache[this.view.url] = true;
- Window.stopLoading();
- },
+ Window.stopLoading();
+ },
- isVideo: function() {
- return /^(youtube|vimeo)$/.test(this.view.type);
- },
+ isVideo: function () {
+ return /^(youtube|vimeo)$/.test(this.view.type);
+ },
- insertVideo: function(callback) {
- // don't insert a video twice
- // and stop if not a video
- if (this.playerIframe || !this.isVideo()) {
- if (callback) callback();
- return;
- }
+ insertVideo: function (callback) {
+ // don't insert a video twice
+ // and stop if not a video
+ if (this.playerIframe || !this.isVideo()) {
+ if (callback) callback();
+ return;
+ }
- var protocol = 'http' + (window.location && window.location.protocol == 'https:' ? 's' : '') + ':',
+ var protocol =
+ "http" +
+ (window.location && window.location.protocol === "https:"
+ ? "s"
+ : "") +
+ ":",
playerVars = $.extend({}, this.view.options[this.view.type] || {}),
queryString = $.param(playerVars),
urls = {
- vimeo: protocol + '//player.vimeo.com/video/{id}?{queryString}',
- youtube: protocol + '//www.youtube.com/embed/{id}?{queryString}'
+ vimeo: protocol + "//player.vimeo.com/video/{id}?{queryString}",
+ youtube: protocol + "//www.youtube.com/embed/{id}?{queryString}",
},
src = urls[this.view.type]
- .replace('{id}', this.view._data.id)
- .replace('{queryString}', queryString);
-
- this.content.append(this.playerIframe = $('