").addClass(
- this.classPrefix + "spinner-rotate"
- ))
- );
+ this._rotate.html("");
- this.build();
- this.start();
- },
+ var d = (this.options.length + this.options.radius) * 2,
+ dimensions = { height: d, width: d };
- setOptions: function(options) {
- this.options = $.extend(
- {
- show: 200,
- hide: 200
- },
- options || {}
- );
- },
+ // we parse stuff below so make sure that happens with a visible spinner
+ var is_vis = this.element.is(":visible");
+ if (!is_vis) this.element.show();
- build: function() {
- if (this._build) return;
+ // 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.html("");
+ var lines = parseInt($(line).css("z-index"));
+ this.lines = lines;
+ // now reset that z-index
+ line.css({ "z-index": "inherit" });
- var d = (this.options.length + this.options.radius) * 2,
- dimensions = { height: d, width: d };
+ frame.remove();
- // we parse stuff below so make sure that happens with a visible spinner
- var is_vis = this.element.is(":visible");
- if (!is_vis) this.element.show();
+ // reset visibility
+ if (!is_vis) this.element.hide();
- // find the amount of lines
+ // insert frames
+ var color;
+ for (var i = 0; i < lines; i++) {
var frame, line;
this._rotate.append(
(frame = $("
")
@@ -565,2656 +586,2618 @@
))
);
- var lines = parseInt($(line).css("z-index"));
- this.lines = lines;
- // now reset that z-index
- line.css({ "z-index": "inherit" });
+ color = color || line.css("color");
+ line.css({ background: color });
- frame.remove();
+ frame.css({ opacity: ((1 / lines) * (i + 1)).toFixed(2) });
- // reset visibility
- if (!is_vis) this.element.hide();
-
- // insert frames
- var color;
- for (var i = 0; i < lines; i++) {
- var frame, line;
- this._rotate.append(
- (frame = $("
")
- .addClass(this.classPrefix + "spinner-frame")
- .append(
- (line = $("
").addClass(this.classPrefix + "spinner-line"))
- ))
- );
-
- color = color || line.css("color");
- line.css({ background: color });
+ var transformCSS = {};
+ transformCSS[Support.css.prefixed("transform")] =
+ "rotate(" + (360 / lines) * (i + 1) + "deg)";
+ frame.css(transformCSS);
+ }
- frame.css({ opacity: ((1 / lines) * (i + 1)).toFixed(2) });
+ this._build = true;
+ },
+
+ start: function () {
+ var rotateCSS = {};
+ rotateCSS[Support.css.prefixed("animation")] =
+ this.classPrefix + "spinner-spin 1s infinite steps(" + this.lines + ")";
+ this._rotate.css(rotateCSS);
+ },
+
+ stop: function () {
+ var rotateCSS = {};
+ rotateCSS[Support.css.prefixed("animation")] = "none";
+ this._rotate.css(rotateCSS);
+ },
+
+ show: function (callback) {
+ this.build();
+ this.start();
+
+ this.element.stop(true).fadeTo(this.options.show, 1, callback); //deferred.resolve);
+ },
+
+ hide: function (callback) {
+ this.element.stop(true).fadeOut(
+ this.options.hide,
+ function () {
+ this.stop();
+ if (callback) callback();
+ }.bind(this)
+ );
+ },
+
+ refresh: function () {
+ this._build = false;
+ this.build();
+ },
+});
- var transformCSS = {};
- transformCSS[Support.css.prefixed("transform")] =
- "rotate(" + (360 / lines) * (i + 1) + "deg)";
- frame.css(transformCSS);
+function Timers() {
+ return this.initialize.apply(this, _slice.call(arguments));
+}
+$.extend(Timers.prototype, {
+ initialize: function () {
+ this._timers = {};
+ },
+
+ set: function (name, handler, ms) {
+ this._timers[name] = setTimeout(handler, ms);
+ },
+
+ get: function (name) {
+ return this._timers[name];
+ },
+
+ clear: function (name) {
+ if (name) {
+ if (this._timers[name]) {
+ clearTimeout(this._timers[name]);
+ delete this._timers[name];
}
-
- this._build = true;
- },
-
- start: function() {
- var rotateCSS = {};
- rotateCSS[Support.css.prefixed("animation")] =
- this.classPrefix + "spinner-spin 1s infinite steps(" + this.lines + ")";
- this._rotate.css(rotateCSS);
- },
-
- stop: function() {
- var rotateCSS = {};
- rotateCSS[Support.css.prefixed("animation")] = "none";
- this._rotate.css(rotateCSS);
- },
-
- show: function(callback) {
- this.build();
- this.start();
-
- 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)
- );
- },
-
- refresh: function() {
- this._build = false;
- this.build();
+ } else {
+ this.clearAll();
}
- });
-
- function Timers() {
- return this.initialize.apply(this, _slice.call(arguments));
- }
- $.extend(Timers.prototype, {
- initialize: function() {
- this._timers = {};
- },
-
- set: function(name, handler, ms) {
- this._timers[name] = setTimeout(handler, ms);
- },
+ },
- get: function(name) {
- return this._timers[name];
- },
-
- clear: function(name) {
- if (name) {
- if (this._timers[name]) {
- clearTimeout(this._timers[name]);
- delete this._timers[name];
- }
- } else {
- this.clearAll();
- }
- },
+ clearAll: function () {
+ $.each(this._timers, function (_i, timer) {
+ clearTimeout(timer);
+ });
+ this._timers = {};
+ },
+});
- 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 data = type.data(url);
+ if (data) {
+ result = data;
+ result.type = i;
+ result.url = url;
}
});
- // uses Types to scan a URI for info
- function getURIData(url) {
- var result = { type: "image" };
- $.each(Types, function(i, type) {
- var data = type.data(url);
- if (data) {
- result = data;
- result.type = i;
- result.url = url;
- }
- });
-
- return result;
- }
+ return result;
+}
- function detectExtension(url) {
- var ext = (url || "").replace(/\?.*/g, "").match(/\.([^.]{3,4})$/);
- return ext ? ext[1].toLowerCase() : null;
- }
+function detectExtension(url) {
+ 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;
- },
- data: function(url) {
- if (!this.detect()) return false;
+var Types = {
+ image: {
+ extensions: "bmp gif jpeg jpg png webp",
+ detect: function (url) {
+ return $.inArray(detectExtension(url), this.extensions.split(" ")) > -1;
+ },
+ data: function (url) {
+ if (!this.detect()) return false;
- return {
- extension: detectExtension(url)
- };
- }
+ return {
+ extension: detectExtension(url),
+ };
},
+ },
- youtube: {
- detect: function(url) {
- var res = /(youtube\.com|youtu\.be)\/watch\?(?=.*vi?=([a-zA-Z0-9-_]+))(?:\S+)?$/.exec(
+ 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];
+ if (res && res[2]) return res[2];
- res = /(youtube\.com|youtu\.be)\/(vi?\/|u\/|embed\/)?([a-zA-Z0-9-_]+)(?:\S+)?$/i.exec(
+ res =
+ /(youtube\.com|youtu\.be)\/(vi?\/|u\/|embed\/)?([a-zA-Z0-9-_]+)(?:\S+)?$/i.exec(
url
);
- if (res && res[3]) return res[3];
+ if (res && res[3]) return res[3];
- return false;
- },
- data: function(url) {
- var id = this.detect(url);
- if (!id) return false;
+ return false;
+ },
+ data: function (url) {
+ var id = this.detect(url);
+ if (!id) return false;
- return {
- id: id
- };
- }
+ return {
+ id: id,
+ };
},
+ },
- vimeo: {
- detect: function(url) {
- var res = /(vimeo\.com)\/([a-zA-Z0-9-_]+)(?:\S+)?$/i.exec(url);
- if (res && res[2]) return res[2];
+ 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) {
- var id = this.detect(url);
- if (!id) return false;
+ return false;
+ },
+ data: function (url) {
+ var id = this.detect(url);
+ if (!id) return false;
- return {
- id: id
- };
- }
- }
- };
+ return {
+ 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"
- : "") +
- ":",
- video_id = getURIData(this.url).id;
+ var protocol =
+ "http" +
+ (window.location && window.location.protocol == "https:" ? "s" : "") +
+ ":",
+ video_id = getURIData(this.url).id;
- this._xhr = $.getJSON(
+ this._xhr = $.getJSON(
+ protocol +
+ "//vimeo.com/api/oembed.json?url=" +
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);
-
- if (this.callback) this.callback(data);
- }, this)
- );
- },
+ "//vimeo.com/" +
+ video_id +
+ "&maxwidth=9999999&maxheight=9999999&callback=?",
+ function (_data) {
+ var data = {
+ dimensions: {
+ width: _data.width,
+ height: _data.height,
+ },
+ };
+
+ Cache.set(this.url, data);
+
+ if (this.callback) this.callback(data);
+ }.bind(this)
+ );
+ },
- abort: function() {
- if (this._xhr) {
- this._xhr.abort();
- this._xhr = null;
- }
+ abort: function () {
+ if (this._xhr) {
+ this._xhr.abort();
+ this._xhr = null;
}
- });
+ },
+ });
- var Cache = {
- cache: [],
+ var Cache = {
+ cache: [],
- get: function(url) {
- var entry = null;
- for (var i = 0; i < this.cache.length; i++) {
- if (this.cache[i] && this.cache[i].url == url) entry = this.cache[i];
- }
- return entry;
- },
+ get: function (url) {
+ var entry = null;
+ for (var i = 0; i < this.cache.length; i++) {
+ if (this.cache[i] && this.cache[i].url == url) entry = this.cache[i];
+ }
+ return entry;
+ },
- set: function(url, data) {
- this.remove(url);
- this.cache.push({ url: url, data: data });
- },
+ set: function (url, data) {
+ this.remove(url);
+ this.cache.push({ url: url, data: data });
+ },
- remove: function(url) {
- for (var i = 0; i < this.cache.length; i++) {
- if (this.cache[i] && this.cache[i].url == url) {
- delete this.cache[i];
- }
+ remove: function (url) {
+ for (var i = 0; i < this.cache.length; i++) {
+ if (this.cache[i] && this.cache[i].url == url) {
+ delete this.cache[i];
}
}
- };
-
- return VimeoReady;
- })();
+ },
+ };
- var Options = {
- defaults: {
- effects: {
- spinner: { show: 200, hide: 200 },
- transition: { min: 175, max: 250 },
- ui: { show: 0, hide: 200 },
- window: { show: 300, hide: 300 }
- },
- hideOnClickOutside: true,
- keyboard: {
- left: true,
- right: true,
- esc: true
- },
- loop: true,
- overlap: true,
- preload: [1, 2],
- position: true,
- skin: "strip",
- side: "right",
- spinner: true,
- toggle: true,
- uiDelay: 3000,
+ return VimeoReady;
+})();
+
+var Options = {
+ defaults: {
+ effects: {
+ spinner: { show: 200, hide: 200 },
+ transition: { min: 175, max: 250 },
+ ui: { show: 0, hide: 200 },
+ window: { show: 300, hide: 300 },
+ },
+ hideOnClickOutside: true,
+ keyboard: {
+ left: true,
+ right: true,
+ esc: true,
+ },
+ loop: true,
+ overlap: true,
+ preload: [1, 2],
+ position: true,
+ skin: "strip",
+ side: "right",
+ spinner: true,
+ toggle: true,
+ uiDelay: 3000,
+ vimeo: {
+ autoplay: 1,
+ api: 1,
+ title: 1,
+ byline: 1,
+ portrait: 0,
+ loop: 0,
+ },
+ youtube: {
+ autoplay: 1,
+ controls: 1,
+ enablejsapi: 1,
+ hd: 1,
+ iv_load_policy: 3,
+ loop: 0,
+ modestbranding: 1,
+ rel: 0,
+ vq: "hd1080", // force hd: http://stackoverflow.com/a/12467865
+ },
+
+ initialTypeOptions: {
+ image: {},
vimeo: {
- autoplay: 1,
- api: 1,
- title: 1,
- byline: 1,
- portrait: 0,
- loop: 0
+ width: 1280,
},
+ // Youtube needs both dimensions, it doesn't support fetching video dimensions like Vimeo yet.
+ // Star this ticket if you'd like to get support for it at some point:
+ // https://code.google.com/p/gdata-issues/issues/detail?id=4329
youtube: {
- autoplay: 1,
- controls: 1,
- enablejsapi: 1,
- hd: 1,
- iv_load_policy: 3,
- loop: 0,
- modestbranding: 1,
- rel: 0,
- vq: "hd1080" // force hd: http://stackoverflow.com/a/12467865
+ width: 1280,
+ height: 720,
},
-
- initialTypeOptions: {
- image: {},
- vimeo: {
- width: 1280
- },
- // Youtube needs both dimensions, it doesn't support fetching video dimensions like Vimeo yet.
- // Star this ticket if you'd like to get support for it at some point:
- // https://code.google.com/p/gdata-issues/issues/detail?id=4329
- youtube: {
- width: 1280,
- height: 720
- }
- }
},
+ },
- create: function(opts, type, data) {
- opts = opts || {};
- data = data || {};
+ create: function (opts, type, data) {
+ opts = opts || {};
+ data = data || {};
- opts.skin = opts.skin || this.defaults.skin;
+ opts.skin = opts.skin || this.defaults.skin;
- var selected = opts.skin
- ? $.extend(
- {},
- Strip.Skins[opts.skin] || Strip.Skins[this.defaults.skin]
- )
- : {},
- merged = $.extend(true, {}, this.defaults, selected);
+ var selected = opts.skin
+ ? $.extend(
+ {},
+ Strip.Skins[opts.skin] || Strip.Skins[this.defaults.skin]
+ )
+ : {},
+ merged = $.extend(true, {}, this.defaults, selected);
- // merge initial type options
- if (merged.initialTypeOptions) {
- if (type && merged.initialTypeOptions[type]) {
- merged = $.extend(true, {}, merged.initialTypeOptions[type], merged);
- }
- // these aren't used further, so remove them
- delete merged.initialTypeOptions;
+ // merge initial type options
+ if (merged.initialTypeOptions) {
+ if (type && merged.initialTypeOptions[type]) {
+ merged = $.extend(true, {}, merged.initialTypeOptions[type], merged);
}
+ // these aren't used further, so remove them
+ delete merged.initialTypeOptions;
+ }
- // safe options to work with
- var options = $.extend(true, {}, merged, opts);
+ // safe options to work with
+ var options = $.extend(true, {}, merged, opts);
- // set all effect duration to 0 for effects: false
- // IE8 and below never use effects
- if (!options.effects || (Browser.IE && Browser.IE < 9)) {
- options.effects = {};
- $.each(this.defaults.effects, function(name, effect) {
- $.each((options.effects[name] = $.extend({}, effect)), function(
- option
- ) {
+ // set all effect duration to 0 for effects: false
+ // IE8 and below never use effects
+ if (!options.effects || (Browser.IE && Browser.IE < 9)) {
+ options.effects = {};
+ $.each(this.defaults.effects, function (name, effect) {
+ $.each(
+ (options.effects[name] = $.extend({}, effect)),
+ function (option) {
options.effects[name][option] = 0;
- });
- });
-
- // disable the spinner when effects are disabled
- options.spinner = false;
- }
+ }
+ );
+ });
- // keyboard
- if (options.keyboard) {
- // when keyboard is true, enable all keys
- if ($.type(options.keyboard) === "boolean") {
- options.keyboard = {};
- $.each(this.defaults.keyboard, function(key, bool) {
- options.keyboard[key] = true;
- });
- }
+ // disable the spinner when effects are disabled
+ options.spinner = false;
+ }
- // disable left and right keys for video, because players like
- // youtube use these keys
- if (type === "vimeo" || type === "youtube") {
- $.extend(options.keyboard, { left: false, right: false });
- }
+ // keyboard
+ if (options.keyboard) {
+ // when keyboard is true, enable all keys
+ if (typeof options.keyboard === "boolean") {
+ options.keyboard = {};
+ $.each(this.defaults.keyboard, function (key, bool) {
+ options.keyboard[key] = true;
+ });
}
- // vimeo & youtube always have no overlap
+ // disable left and right keys for video, because players like
+ // youtube use these keys
if (type === "vimeo" || type === "youtube") {
- options.overlap = false;
+ $.extend(options.keyboard, { left: false, right: false });
}
-
- return options;
}
- };
-
- function View() {
- this.initialize.apply(this, _slice.call(arguments));
- }
- $.extend(View.prototype, {
- initialize: function(object) {
- var options = arguments[1] || {},
- data = {};
-
- // string -> 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.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") + "})")) ||
- {}
- };
- }
+ // vimeo & youtube always have no overlap
+ if (type === "vimeo" || type === "youtube") {
+ options.overlap = false;
+ }
- if (object) {
- // detect type if none is set
- if (!object.extension) {
- object.extension = detectExtension(object.url);
- }
+ return options;
+ },
+};
+
+function View() {
+ this.initialize.apply(this, _slice.call(arguments));
+}
+$.extend(View.prototype, {
+ initialize: function (object) {
+ var options = arguments[1] || {},
+ data = {};
+
+ // string -> element
+ if (typeof object === "string") {
+ // turn the string into an element
+ object = { url: object };
+ }
- if (!object.type) {
- var data = getURIData(object.url);
- object._data = data;
- object.type = data.type;
- }
- }
+ // 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._data) {
- object._data = getURIData(object.url);
+ if (object) {
+ // detect type if none is set
+ if (!object.extension) {
+ object.extension = detectExtension(object.url);
}
- if (object && object.options) {
- object.options = $.extend(
- true,
- $.extend({}, options),
- $.extend({}, object.options)
- );
- } else {
- object.options = $.extend({}, options);
+ if (!object.type) {
+ var data = getURIData(object.url);
+ object._data = data;
+ object.type = data.type;
}
- // 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) {
- this.element = element;
- this.pages = {};
- this.uid = 1;
- },
-
- add: function(views) {
- this.uid++;
-
- this.views = views;
-
- this.pages[this.uid] = []; // create room for these pages
- // switched pages, so show the UI on the next resize
- Window._showUIOnResize = true;
+ if (!object._data) {
+ object._data = getURIData(object.url);
+ }
- // 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)
+ 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);
- show: function(position, callback) {
- var page = this.pages[this.uid][position - 1];
-
- // never try to reload the exact same frame
- if (this.page && this.page.uid == page.uid) {
- // also hide the window if toggle is enabled
- if (page.view.options.toggle) {
- Window.hide();
- // clear the page so double clicking when hiding will
- // re-open the window even if it's in a hide animation
- this.page = null;
- }
+ // extend this with data
+ $.extend(this, object);
- return;
+ return this;
+ },
+});
+
+var Pages = {
+ initialize: function (element) {
+ this.element = element;
+ this.pages = {};
+ this.uid = 1;
+ },
+
+ add: function (views) {
+ this.uid++;
+
+ this.views = views;
+
+ this.pages[this.uid] = []; // create room for these pages
+
+ // switched pages, so show the UI on the next resize
+ Window._showUIOnResize = true;
+
+ // add pages for all these views
+ $.each(
+ views,
+ function (i, view) {
+ this.pages[this.uid].push(new Page(view, i + 1, this.views.length));
+ }.bind(this)
+ );
+ },
+
+ show: function (position, callback) {
+ var page = this.pages[this.uid][position - 1];
+
+ // never try to reload the exact same frame
+ if (this.page && this.page.uid == page.uid) {
+ // also hide the window if toggle is enabled
+ if (page.view.options.toggle) {
+ Window.hide();
+ // clear the page so double clicking when hiding will
+ // re-open the window even if it's in a hide animation
+ this.page = null;
}
- // set class names to indicate active state
- Pages.setActiveClass(page);
+ return;
+ }
- // update the page
- this.page = page;
+ // set class names to indicate active state
+ Pages.setActiveClass(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)
- );
- },
+ // update the page
+ this.page = page;
- 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) {
- if (page.loading) count++;
- });
+ this.removeHiddenAndLoadingInactive();
+ 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 () {
+ // 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) {
+ if (page.loading) count++;
});
- return count;
- },
-
- // used by the API when opening
- // checks if the page is in the currently open group
- getPositionInActivePageGroup: function(element) {
- var position = 0,
- activeGroup = this.pages[this.uid];
-
- if (activeGroup) {
- $.each(activeGroup, function(i, page) {
- if (page.view.element && page.view.element == element) {
- position = i + 1;
- }
- });
- }
-
- return position;
- },
-
- // remove pages not matching the current id
- removeExpired: function(instantly) {
- $.each(this.pages, function(id, pages) {
- if (id != this._id) {
- $.each(pages, function(j, page) {
- page.remove(instantly);
- });
+ });
+ return count;
+ },
+
+ // used by the API when opening
+ // checks if the page is in the currently open group
+ getPositionInActivePageGroup: function (element) {
+ var position = 0,
+ activeGroup = this.pages[this.uid];
+
+ if (activeGroup) {
+ $.each(activeGroup, function (i, page) {
+ if (page.view.element && page.view.element == element) {
+ position = i + 1;
}
});
- },
-
- // Window.hide will call this when fully closed
- removeAll: function() {
- $.each(this.pages, function(id, pages) {
- $.each(pages, function(j, page) {
- page.remove();
- });
- });
-
- // empty out 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)
- );
- },
-
- 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)
- );
- },
-
- // TODO: might be nice to have a hide animation before removal, it's instant now
- 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);
- }
- }
- }, this)
- );
+ return position;
+ },
- // now remove all empty page groups
- $.each(
- empty,
- $.proxy(function(i, uid) {
- delete this.pages[uid];
- }, this)
- );
- },
-
- stop: function() {
- $.each(this.pages, function(id, pages) {
- $.each(pages, function(j, page) {
- page.stop();
+ // remove pages not matching the current id
+ removeExpired: function (instantly) {
+ $.each(this.pages, function (id, pages) {
+ if (id != this._id) {
+ $.each(pages, function (_j, page) {
+ page.remove(instantly);
});
- });
- },
-
- 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");
-
- // also give other items in the group the active group class
- var group = $(element).attr("data-strip-group");
- if (group) {
- $('.strip[data-strip-group="' + group + '"]').addClass(
- "strip-active-group"
- );
- }
}
- },
-
- removeActiveClasses: function() {
- $(".strip-active-group").removeClass(
- "strip-active-group strip-active-element"
- );
- }
- };
-
- 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++;
-
- // store position/total views for later use
- this._position = position;
- this._total = total;
-
- this.animated = false;
- this.visible = false;
-
- this.queues = {};
- this.queues.showhide = $({});
- },
-
- // 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())
- );
-
- 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");
-
- 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))
- );
- }
- }
-
- 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"
- );
-
- // no sides
- if (this._total < 2) {
- this.element.addClass("strp-no-sides");
- }
-
- this.content.addClass("strp-content-element");
-
- this._created = true;
- },
-
- // surrounding
- _getSurroundingPages: function() {
- var preload;
- if (!(preload = this.view.options.preload)) return [];
-
- 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;
- },
+ // Window.hide will call this when fully closed
+ removeAll: function () {
+ $.each(this.pages, function (_id, pages) {
+ $.each(pages, function (_j, page) {
+ page.remove();
+ });
+ });
- preloadSurroundingImages: function() {
- var pages = this._getSurroundingPages();
+ // empty out pages
+ this.pages = {};
+ },
+ hideVisibleInactive: function (alternateDuration) {
+ $.each(
+ this.pages,
+ function (_id, pages) {
$.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" }
+ function (_j, page) {
+ if (page.uid != this.page.uid) {
+ page.hide(null, alternateDuration);
+ }
+ }.bind(this)
);
- },
-
- // 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();
-
- // exit early if already loaded
- if (this.loaded) {
- if (callback) callback();
- return;
- }
-
- // abort possible previous (pre)load
- this.abort();
-
- // loading indicator, we don't show it when preloading frames
- this.loading = true;
-
- // start spinner
- // only when this url hasn't been loaded before
- if (this.view.options.spinner && !loadedUrlCache[this.view.url]) {
- Window.startLoading();
- }
-
- switch (this.view.type) {
- case "image":
- // if we had an error before just go through
- if (this.error) {
- if (callback) callback();
- return;
+ }.bind(this)
+ );
+ },
+
+ stopInactive: function () {
+ $.each(
+ this.pages,
+ function (_id, pages) {
+ $.each(
+ pages,
+ function (_j, page) {
+ if (page.uid != this.page.uid && !page.preloading) {
+ page.stop();
}
-
- this.imageReady = new ImageReady(
- this.content[0],
- $.proxy(function(imageReady) {
- // mark as loaded
- this._markAsLoaded();
-
- this.dimensions = {
- width: imageReady.img.naturalWidth,
- height: imageReady.img.naturalHeight
- };
-
- if (callback) callback();
- }, this),
- $.proxy(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();
- }, this),
- { method: "naturalWidth" }
- );
-
- break;
-
- case "vimeo":
- this.vimeoReady = new VimeoReady(
- this.view.url,
- $.proxy(function(data) {
- // mark as loaded
- this._markAsLoaded();
-
- this.dimensions = {
- width: data.dimensions.width,
- height: data.dimensions.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;
- }
- },
-
- // 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;
-
- Window.stopLoading();
- },
-
- 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;
- }
-
- 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}"
- },
- src = urls[this.view.type]
- .replace("{id}", this.view._data.id)
- .replace("{queryString}", queryString);
-
- this.content.append(
- (this.playerIframe = $(
- "