diff --git a/client/app/main.controller.js b/client/app/main.controller.js index d442efd..1ccbfd8 100755 --- a/client/app/main.controller.js +++ b/client/app/main.controller.js @@ -123,10 +123,17 @@ angular.module('dssWebApp') }; $scope.deleteMix = function (mix) { - var dlg = dialogs.create('app/dialogs/confirm/confirmDialog.html', 'confirmDialogCtrl', { - title: "Delete this mix?", - body: mix.title - }); + var dlg = dialogs.create( + 'app/dialogs/confirm/confirmDialog.html', + 'confirmDialogCtrl', + { + title: "Delete this mix?", + body: mix.title + }, + { + size: "sm" + } + ); dlg.result.then(function (result) { if (result) { MixModel.destroy(mix.slug).then(function () { diff --git a/client/app/views/templates/audioGallery.html b/client/app/views/templates/audioGallery.html index f3f3417..1c88ee3 100644 --- a/client/app/views/templates/audioGallery.html +++ b/client/app/views/templates/audioGallery.html @@ -1,4 +1,4 @@ -
+
-
{{mix.title}}
+
{{mix.title}}
diff --git a/client/app/views/user/item/userItem.html b/client/app/views/user/item/userItem.html index 4b05cf9..332b8f8 100755 --- a/client/app/views/user/item/userItem.html +++ b/client/app/views/user/item/userItem.html @@ -13,63 +13,38 @@
-
-
-

About

-
- -
-
-
-
-
-
-
-
-

Followers

-
-
-
- - - -
-
+
+
About
+
-
-
-

{{mixTitle}} - Mixes -

-
- - - - - - -
-
-
-
-
-
- +
+
+
+ +
+
+ +
+
+
+
    + +
+
+
-
+
\ No newline at end of file diff --git a/client/app/views/user/item/userItemCtrl.js b/client/app/views/user/item/userItemCtrl.js index fdb5875..ad4876a 100755 --- a/client/app/views/user/item/userItemCtrl.js +++ b/client/app/views/user/item/userItemCtrl.js @@ -4,27 +4,22 @@ angular.module('dssWebApp') .controller('UserItemCtrl', function ($scope, UserModel, MixModel, user, logger) { logger.logSuccess('UserItemCtrl', $scope); $scope.user = user; - $scope.showLatest = function () { + function _getMixes (ordering) { $scope.mixTitle = "Latest"; MixModel.findAll({ user__slug: user.slug, waveform_generated: "True", - ordering: "-id" + limit: 6, + ordering: ordering }).then(function (mixes) { $scope.mixes = mixes; $scope.mixPage = 1; }); - }; - $scope.showPopular = function () { - $scope.mixTitle = "Popular"; - MixModel.findAll({ - user__slug: user.slug, - waveform_generated: "True", - ordering: "-play_count" - }).then(function (mixes) { - $scope.mixes = mixes; - $scope.mixPage = 1; - }); - }; - $scope.showLatest(); + } + _getMixes("-id"); + $('#mixes-tabs').find('a').click(function (e) { + console.log("Tabbing"); + e.preventDefault(); + _getMixes($(e.target).data("dss-ordering")); + }); }); \ No newline at end of file diff --git a/client/app/views/user/user.html b/client/app/views/user/user.html index 04158b9..9daa98c 100755 --- a/client/app/views/user/user.html +++ b/client/app/views/user/user.html @@ -16,62 +16,3 @@
- \ No newline at end of file diff --git a/client/assets/jquery.ellipsis.js b/client/assets/jquery.ellipsis.js deleted file mode 100644 index 25516f7..0000000 --- a/client/assets/jquery.ellipsis.js +++ /dev/null @@ -1,640 +0,0 @@ -(function ($, undef) { - if ($.fn.dotdotdot) { - return; - } - - $.fn.dotdotdot = function (o) { - if (this.length == 0) { - $.fn.dotdotdot.debug('No element found for "' + this.selector + '".'); - return this; - } - if (this.length > 1) { - return this.each( - function () { - $(this).dotdotdot(o); - } - ); - } - - var $dot = this; - var orgContent = $dot.contents(); - - if ($dot.data('dotdotdot')) { - $dot.trigger('destroy.dot'); - } - - $dot.data('dotdotdot-style', $dot.attr('style') || ''); - $dot.css('word-wrap', 'break-word'); - if ($dot.css('white-space') === 'nowrap') { - $dot.css('white-space', 'normal'); - } - - $dot.bind_events = function () { - $dot.bind( - 'update.dot', - function (e, c) { - $dot.removeClass("is-truncated"); - e.preventDefault(); - e.stopPropagation(); - - switch (typeof opts.height) { - case 'number': - opts.maxHeight = opts.height; - break; - - case 'function': - opts.maxHeight = opts.height.call($dot[0]); - break; - - default: - opts.maxHeight = getTrueInnerHeight($dot); - break; - } - - opts.maxHeight += opts.tolerance; - - if (typeof c != 'undefined') { - if (typeof c == 'string' || ('nodeType' in c && c.nodeType === 1)) { - c = $('
').append(c).contents(); - } - if (c instanceof $) { - orgContent = c; - } - } - - $inr = $dot.wrapInner('
').children(); - $inr.contents() - .detach() - .end() - .append(orgContent.clone(true)) - .find('br') - .replaceWith('
') - .end() - .css({ - 'height': 'auto', - 'width': 'auto', - 'border': 'none', - 'padding': 0, - 'margin': 0 - }); - - var after = false, - trunc = false; - - if (conf.afterElement) { - after = conf.afterElement.clone(true); - after.show(); - conf.afterElement.detach(); - } - - if (test($inr, opts)) { - if (opts.wrap == 'children') { - trunc = children($inr, opts, after); - } - else { - trunc = ellipsis($inr, $dot, $inr, opts, after); - } - } - $inr.replaceWith($inr.contents()); - $inr = null; - - if ($.isFunction(opts.callback)) { - opts.callback.call($dot[0], trunc, orgContent); - } - - conf.isTruncated = trunc; - return trunc; - } - ).bind( - 'isTruncated.dot', - function (e, fn) { - e.preventDefault(); - e.stopPropagation(); - - if (typeof fn == 'function') { - fn.call($dot[0], conf.isTruncated); - } - return conf.isTruncated; - } - ).bind( - 'originalContent.dot', - function (e, fn) { - e.preventDefault(); - e.stopPropagation(); - - if (typeof fn == 'function') { - fn.call($dot[0], orgContent); - } - return orgContent; - } - ).bind( - 'destroy.dot', - function (e) { - e.preventDefault(); - e.stopPropagation(); - - $dot.unwatch() - .unbind_events() - .contents() - .detach() - .end() - .append(orgContent) - .attr('style', $dot.data('dotdotdot-style') || '') - .removeClass('is-truncated') - .data('dotdotdot', false); - } - ); - return $dot; - }; // /bind_events - - $dot.unbind_events = function () { - $dot.unbind('.dot'); - return $dot; - }; // /unbind_events - - $dot.watch = function () { - $dot.unwatch(); - if (opts.watch == 'window') { - var $window = $(window), - _wWidth = $window.width(), - _wHeight = $window.height(); - - $window.bind( - 'resize.dot' + conf.dotId, - function () { - if (_wWidth != $window.width() || _wHeight != $window.height() || !opts.windowResizeFix) { - _wWidth = $window.width(); - _wHeight = $window.height(); - - if (watchInt) { - clearInterval(watchInt); - } - watchInt = setTimeout( - function () { - $dot.trigger('update.dot'); - }, 100 - ); - } - } - ); - } - else { - watchOrg = getSizes($dot); - watchInt = setInterval( - function () { - if ($dot.is(':visible')) { - var watchNew = getSizes($dot); - if (watchOrg.width != watchNew.width || - watchOrg.height != watchNew.height) { - $dot.trigger('update.dot'); - watchOrg = watchNew; - } - } - }, 500 - ); - } - return $dot; - }; - $dot.unwatch = function () { - $(window).unbind('resize.dot' + conf.dotId); - if (watchInt) { - clearInterval(watchInt); - } - return $dot; - }; - - var opts = $.extend(true, {}, $.fn.dotdotdot.defaults, o), - conf = {}, - watchOrg = {}, - watchInt = null, - $inr = null; - - - if (!( opts.lastCharacter.remove instanceof Array )) { - opts.lastCharacter.remove = $.fn.dotdotdot.defaultArrays.lastCharacter.remove; - } - if (!( opts.lastCharacter.noEllipsis instanceof Array )) { - opts.lastCharacter.noEllipsis = $.fn.dotdotdot.defaultArrays.lastCharacter.noEllipsis; - } - - - conf.afterElement = getElement(opts.after, $dot); - conf.isTruncated = false; - conf.dotId = dotId++; - - - $dot.data('dotdotdot', true) - .bind_events() - .trigger('update.dot'); - - if (opts.watch) { - $dot.watch(); - } - - return $dot; - }; - - // public - $.fn.dotdotdot.defaults = { - 'ellipsis': '... ', - 'wrap': 'word', - 'fallbackToLetter': true, - 'lastCharacter': {}, - 'tolerance': 0, - 'callback': null, - 'after': null, - 'height': null, - 'watch': false, - 'windowResizeFix': true - }; - $.fn.dotdotdot.defaultArrays = { - 'lastCharacter': { - 'remove': [' ', '\u3000', ',', ';', '.', '!', '?'], - 'noEllipsis': [] - } - }; - $.fn.dotdotdot.debug = function (msg) { - }; - - - // private - var dotId = 1; - - function children($elem, o, after) { - var $elements = $elem.children(), - isTruncated = false; - - $elem.empty(); - - for (var a = 0, l = $elements.length; a < l; a++) { - var $e = $elements.eq(a); - $elem.append($e); - if (after) { - $elem.append(after); - } - if (test($elem, o)) { - $e.remove(); - isTruncated = true; - break; - } - else { - if (after) { - after.detach(); - } - } - } - return isTruncated; - } - - function ellipsis($elem, $d, $i, o, after) { - var isTruncated = false; - - // Don't put the ellipsis directly inside these elements - var notx = 'a, table, thead, tbody, tfoot, tr, col, colgroup, object, embed, param, ol, ul, dl, blockquote, select, optgroup, option, textarea, script, style'; - - // Don't remove these elements even if they are after the ellipsis - var noty = 'script, .dotdotdot-keep'; - - $elem - .contents() - .detach() - .each( - function () { - - var e = this, - $e = $(e); - - if (typeof e == 'undefined') { - return true; - } - else if ($e.is(noty)) { - $elem.append($e); - } - else if (isTruncated) { - return true; - } - else { - $elem.append($e); - if (after && !$e.is(o.after) && !$e.find(o.after).length) { - $elem[$elem.is(notx) ? 'after' : 'append'](after); - } - if (test($i, o)) { - if (e.nodeType == 3) // node is TEXT - { - isTruncated = ellipsisElement($e, $d, $i, o, after); - } - else { - isTruncated = ellipsis($e, $d, $i, o, after); - } - } - - if (!isTruncated) { - if (after) { - after.detach(); - } - } - } - } - ); - $d.addClass("is-truncated"); - return isTruncated; - } - - function ellipsisElement($e, $d, $i, o, after) { - var e = $e[0]; - - if (!e) { - return false; - } - - var txt = getTextContent(e), - space = ( txt.indexOf(' ') !== -1 ) ? ' ' : '\u3000', - separator = ( o.wrap == 'letter' ) ? '' : space, - textArr = txt.split(separator), - position = -1, - midPos = -1, - startPos = 0, - endPos = textArr.length - 1; - - - // Only one word - if (o.fallbackToLetter && startPos == 0 && endPos == 0) { - separator = ''; - textArr = txt.split(separator); - endPos = textArr.length - 1; - } - - while (startPos <= endPos && !( startPos == 0 && endPos == 0 )) { - var m = Math.floor(( startPos + endPos ) / 2); - if (m == midPos) { - break; - } - midPos = m; - - setTextContent(e, textArr.slice(0, midPos + 1).join(separator) + o.ellipsis); - $i.children() - .each( - function () { - $(this).toggle().toggle(); - } - ); - - if (!test($i, o)) { - position = midPos; - startPos = midPos; - } - else { - endPos = midPos; - - // Fallback to letter - if (o.fallbackToLetter && startPos == 0 && endPos == 0) { - separator = ''; - textArr = textArr[0].split(separator); - position = -1; - midPos = -1; - startPos = 0; - endPos = textArr.length - 1; - } - } - } - - if (position != -1 && !( textArr.length == 1 && textArr[0].length == 0 )) { - txt = addEllipsis(textArr.slice(0, position + 1).join(separator), o); - setTextContent(e, txt); - } - else { - var $w = $e.parent(); - $e.detach(); - - var afterLength = ( after && after.closest($w).length ) ? after.length : 0; - - if ($w.contents().length > afterLength) { - e = findLastTextNode($w.contents().eq(-1 - afterLength), $d); - } - else { - e = findLastTextNode($w, $d, true); - if (!afterLength) { - $w.detach(); - } - } - if (e) { - txt = addEllipsis(getTextContent(e), o); - setTextContent(e, txt); - if (afterLength && after) { - $(e).parent().append(after); - } - } - } - - return true; - } - - function test($i, o) { - return $i.innerHeight() > o.maxHeight; - } - - function addEllipsis(txt, o) { - while ($.inArray(txt.slice(-1), o.lastCharacter.remove) > -1) { - txt = txt.slice(0, -1); - } - if ($.inArray(txt.slice(-1), o.lastCharacter.noEllipsis) < 0) { - txt += o.ellipsis; - } - return txt; - } - - function getSizes($d) { - return { - 'width': $d.innerWidth(), - 'height': $d.innerHeight() - }; - } - - function setTextContent(e, content) { - if (e.innerText) { - e.innerText = content; - } - else if (e.nodeValue) { - e.nodeValue = content; - } - else if (e.textContent) { - e.textContent = content; - } - - } - - function getTextContent(e) { - if (e.innerText) { - return e.innerText; - } - else if (e.nodeValue) { - return e.nodeValue; - } - else if (e.textContent) { - return e.textContent; - } - else { - return ""; - } - } - - function getPrevNode(n) { - do - { - n = n.previousSibling; - } - while (n && n.nodeType !== 1 && n.nodeType !== 3); - - return n; - } - - function findLastTextNode($el, $top, excludeCurrent) { - var e = $el && $el[0], p; - if (e) { - if (!excludeCurrent) { - if (e.nodeType === 3) { - return e; - } - if ($.trim($el.text())) { - return findLastTextNode($el.contents().last(), $top); - } - } - p = getPrevNode(e); - while (!p) { - $el = $el.parent(); - if ($el.is($top) || !$el.length) { - return false; - } - p = getPrevNode($el[0]); - } - if (p) { - return findLastTextNode($(p), $top); - } - } - return false; - } - - function getElement(e, $i) { - if (!e) { - return false; - } - if (typeof e === 'string') { - e = $(e, $i); - return ( e.length ) - ? e - : false; - } - return !e.jquery - ? false - : e; - } - - function getTrueInnerHeight($el) { - var h = $el.innerHeight(), - a = ['paddingTop', 'paddingBottom']; - - for (var z = 0, l = a.length; z < l; z++) { - var m = parseInt($el.css(a[z]), 10); - if (isNaN(m)) { - m = 0; - } - h -= m; - } - return h; - } - - - // override jQuery.html - var _orgHtml = $.fn.html; - $.fn.html = function (str) { - if (str != undef && !$.isFunction(str) && this.data('dotdotdot')) { - return this.trigger('update', [str]); - } - return _orgHtml.apply(this, arguments); - }; - - - // override jQuery.text - var _orgText = $.fn.text; - $.fn.text = function (str) { - if (str != undef && !$.isFunction(str) && this.data('dotdotdot')) { - str = $('
').text(str).html(); - return this.trigger('update', [str]); - } - return _orgText.apply(this, arguments); - }; - - -})(jQuery); - -/* - - ## Automatic parsing for CSS classes - Contributed by [Ramil Valitov](https://github.com/rvalitov) - - ### The idea - You can add one or several CSS classes to HTML elements to automatically invoke "jQuery.dotdotdot functionality" and some extra features. It allows to use jQuery.dotdotdot only by adding appropriate CSS classes without JS programming. - - ### Available classes and their description - * dot-ellipsis - automatically invoke jQuery.dotdotdot to this element. This class must be included if you plan to use other classes below. - * dot-resize-update - automatically update if window resize event occurs. It's equivalent to option `watch:'window'`. - * dot-timer-update - automatically update if window resize event occurs. It's equivalent to option `watch:true`. - * dot-load-update - automatically update after the window has beem completely rendered. Can be useful if your content is generated dynamically using using JS and, hence, jQuery.dotdotdot can't correctly detect the height of the element before it's rendered completely. - * dot-height-XXX - available height of content area in pixels, where XXX is a number, e.g. can be `dot-height-35` if you want to set maximum height for 35 pixels. It's equivalent to option `height:'XXX'`. - - ### Usage examples - *Adding jQuery.dotdotdot to element* - -
-

Lorem Ipsum is simply dummy text.

-
- - *Adding jQuery.dotdotdot to element with update on window resize* - -
-

Lorem Ipsum is simply dummy text.

-
- - *Adding jQuery.dotdotdot to element with predefined height of 50px* - -
-

Lorem Ipsum is simply dummy text.

-
- - */ - -jQuery(document).ready(function ($) { - //We only invoke jQuery.dotdotdot on elements that have dot-ellipsis class - $(".dot-ellipsis").each(function () { - //Checking if update on window resize required - var watch_window = $(this).hasClass("dot-resize-update"); - - //Checking if update on timer required - var watch_timer = $(this).hasClass("dot-timer-update"); - - //Checking if height set - var height = 0; - var classList = $(this).attr('class').split(/\s+/); - $.each(classList, function (index, item) { - var matchResult = item.match(/^dot-height-(\d+)$/); - if (matchResult !== null) - height = Number(matchResult[1]); - }); - - //Invoking jQuery.dotdotdot - var x = new Object(); - if (watch_timer) - x.watch = true; - if (watch_window) - x.watch = 'window'; - if (height > 0) - x.height = height; - $(this).dotdotdot(x); - }); - -}); - -//Updating elements (if any) on window.load event -jQuery(window).on('load', function () { - jQuery(".dot-ellipsis.dot-load-update").trigger("update.dot"); -}); \ No newline at end of file diff --git a/client/assets/jquery.fancybox.js b/client/assets/jquery.fancybox.js new file mode 100644 index 0000000..0eb3a8b --- /dev/null +++ b/client/assets/jquery.fancybox.js @@ -0,0 +1,2022 @@ +/*! + * fancyBox - jQuery Plugin + * version: 2.1.5 (Fri, 14 Jun 2013) + * @requires jQuery v1.6 or later + * + * Examples at http://fancyapps.com/fancybox/ + * License: www.fancyapps.com/fancybox/#license + * + * Copyright 2012 Janis Skarnelis - janis@fancyapps.com + * + */ + +(function (window, document, $, undefined) { + "use strict"; + + var H = $("html"), + W = $(window), + D = $(document), + F = $.fancybox = function () { + F.open.apply(this, arguments); + }, + IE = navigator.userAgent.match(/msie/i), + didUpdate = null, + isTouch = document.createTouch !== undefined, + + isQuery = function (obj) { + return obj && obj.hasOwnProperty && obj instanceof $; + }, + isString = function (str) { + return str && $.type(str) === "string"; + }, + isPercentage = function (str) { + return isString(str) && str.indexOf('%') > 0; + }, + isScrollable = function (el) { + return (el && !(el.style.overflow && el.style.overflow === 'hidden') && ((el.clientWidth && el.scrollWidth > el.clientWidth) || (el.clientHeight && el.scrollHeight > el.clientHeight))); + }, + getScalar = function (orig, dim) { + var value = parseInt(orig, 10) || 0; + + if (dim && isPercentage(orig)) { + value = F.getViewport()[dim] / 100 * value; + } + + return Math.ceil(value); + }, + getValue = function (value, dim) { + return getScalar(value, dim) + 'px'; + }; + + $.extend(F, { + // The current version of fancyBox + version: '2.1.5', + + defaults: { + padding: 15, + margin: 20, + + width: 800, + height: 600, + minWidth: 100, + minHeight: 100, + maxWidth: 9999, + maxHeight: 9999, + pixelRatio: 1, // Set to 2 for retina display support + + autoSize: true, + autoHeight: false, + autoWidth: false, + + autoResize: true, + autoCenter: !isTouch, + fitToView: true, + aspectRatio: false, + topRatio: 0.5, + leftRatio: 0.5, + + scrolling: 'auto', // 'auto', 'yes' or 'no' + wrapCSS: '', + + arrows: true, + closeBtn: true, + closeClick: false, + nextClick: false, + mouseWheel: true, + autoPlay: false, + playSpeed: 3000, + preload: 3, + modal: false, + loop: true, + + ajax: { + dataType: 'html', + headers: {'X-fancyBox': true} + }, + iframe: { + scrolling: 'auto', + preload: true + }, + swf: { + wmode: 'transparent', + allowfullscreen: 'true', + allowscriptaccess: 'always' + }, + + keys: { + next: { + 13: 'left', // enter + 34: 'up', // page down + 39: 'left', // right arrow + 40: 'up' // down arrow + }, + prev: { + 8: 'right', // backspace + 33: 'down', // page up + 37: 'right', // left arrow + 38: 'down' // up arrow + }, + close: [27], // escape key + play: [32], // space - start/stop slideshow + toggle: [70] // letter "f" - toggle fullscreen + }, + + direction: { + next: 'left', + prev: 'right' + }, + + scrollOutside: true, + + // Override some properties + index: 0, + type: null, + href: null, + content: null, + title: null, + + // HTML templates + tpl: { + wrap: '
', + image: '', + iframe: '', + error: '

The requested content cannot be loaded.
Please try again later.

', + closeBtn: '', + next: '', + prev: '' + }, + + // Properties for each animation type + // Opening fancyBox + openEffect: 'fade', // 'elastic', 'fade' or 'none' + openSpeed: 250, + openEasing: 'swing', + openOpacity: true, + openMethod: 'zoomIn', + + // Closing fancyBox + closeEffect: 'fade', // 'elastic', 'fade' or 'none' + closeSpeed: 250, + closeEasing: 'swing', + closeOpacity: true, + closeMethod: 'zoomOut', + + // Changing next gallery item + nextEffect: 'elastic', // 'elastic', 'fade' or 'none' + nextSpeed: 250, + nextEasing: 'swing', + nextMethod: 'changeIn', + + // Changing previous gallery item + prevEffect: 'elastic', // 'elastic', 'fade' or 'none' + prevSpeed: 250, + prevEasing: 'swing', + prevMethod: 'changeOut', + + // Enable default helpers + helpers: { + overlay: true, + title: true + }, + + // Callbacks + onCancel: $.noop, // If canceling + beforeLoad: $.noop, // Before loading + afterLoad: $.noop, // After loading + beforeShow: $.noop, // Before changing in current item + afterShow: $.noop, // After opening + beforeChange: $.noop, // Before changing gallery item + beforeClose: $.noop, // Before closing + afterClose: $.noop // After closing + }, + + //Current state + group: {}, // Selected group + opts: {}, // Group options + previous: null, // Previous element + coming: null, // Element being loaded + current: null, // Currently loaded element + isActive: false, // Is activated + isOpen: false, // Is currently open + isOpened: false, // Have been fully opened at least once + + wrap: null, + skin: null, + outer: null, + inner: null, + + player: { + timer: null, + isActive: false + }, + + // Loaders + ajaxLoad: null, + imgPreload: null, + + // Some collections + transitions: {}, + helpers: {}, + + /* + * Static methods + */ + + open: function (group, opts) { + if (!group) { + return; + } + + if (!$.isPlainObject(opts)) { + opts = {}; + } + + // Close if already active + if (false === F.close(true)) { + return; + } + + // Normalize group + if (!$.isArray(group)) { + group = isQuery(group) ? $(group).get() : [group]; + } + + // Recheck if the type of each element is `object` and set content type (image, ajax, etc) + $.each(group, function (i, element) { + var obj = {}, + href, + title, + content, + type, + rez, + hrefParts, + selector; + + if ($.type(element) === "object") { + // Check if is DOM element + if (element.nodeType) { + element = $(element); + } + + if (isQuery(element)) { + obj = { + href: element.data('fancybox-href') || element.attr('href'), + title: element.data('fancybox-title') || element.attr('title'), + isDom: true, + element: element + }; + + if ($.metadata) { + $.extend(true, obj, element.metadata()); + } + + } else { + obj = element; + } + } + + href = opts.href || obj.href || (isString(element) ? element : null); + title = opts.title !== undefined ? opts.title : obj.title || ''; + + content = opts.content || obj.content; + type = content ? 'html' : (opts.type || obj.type); + + if (!type && obj.isDom) { + type = element.data('fancybox-type'); + + if (!type) { + rez = element.prop('class').match(/fancybox\.(\w+)/); + type = rez ? rez[1] : null; + } + } + + if (isString(href)) { + // Try to guess the content type + if (!type) { + if (F.isImage(href)) { + type = 'image'; + + } else if (F.isSWF(href)) { + type = 'swf'; + + } else if (href.charAt(0) === '#') { + type = 'inline'; + + } else if (isString(element)) { + type = 'html'; + content = element; + } + } + + // Split url into two pieces with source url and content selector, e.g, + // "/mypage.html #my_id" will load "/mypage.html" and display element having id "my_id" + if (type === 'ajax') { + hrefParts = href.split(/\s+/, 2); + href = hrefParts.shift(); + selector = hrefParts.shift(); + } + } + + if (!content) { + if (type === 'inline') { + if (href) { + content = $(isString(href) ? href.replace(/.*(?=#[^\s]+$)/, '') : href); //strip for ie7 + + } else if (obj.isDom) { + content = element; + } + + } else if (type === 'html') { + content = href; + + } else if (!type && !href && obj.isDom) { + type = 'inline'; + content = element; + } + } + + $.extend(obj, { + href: href, + type: type, + content: content, + title: title, + selector: selector + }); + + group[i] = obj; + }); + + // Extend the defaults + F.opts = $.extend(true, {}, F.defaults, opts); + + // All options are merged recursive except keys + if (opts.keys !== undefined) { + F.opts.keys = opts.keys ? $.extend({}, F.defaults.keys, opts.keys) : false; + } + + F.group = group; + + return F._start(F.opts.index); + }, + + // Cancel image loading or abort ajax request + cancel: function () { + var coming = F.coming; + + if (!coming || false === F.trigger('onCancel')) { + return; + } + + F.hideLoading(); + + if (F.ajaxLoad) { + F.ajaxLoad.abort(); + } + + F.ajaxLoad = null; + + if (F.imgPreload) { + F.imgPreload.onload = F.imgPreload.onerror = null; + } + + if (coming.wrap) { + coming.wrap.stop(true, true).trigger('onReset').remove(); + } + + F.coming = null; + + // If the first item has been canceled, then clear everything + if (!F.current) { + F._afterZoomOut(coming); + } + }, + + // Start closing animation if is open; remove immediately if opening/closing + close: function (event) { + F.cancel(); + + if (false === F.trigger('beforeClose')) { + return; + } + + F.unbindEvents(); + + if (!F.isActive) { + return; + } + + if (!F.isOpen || event === true) { + $('.fancybox-wrap').stop(true).trigger('onReset').remove(); + + F._afterZoomOut(); + + } else { + F.isOpen = F.isOpened = false; + F.isClosing = true; + + $('.fancybox-item, .fancybox-nav').remove(); + + F.wrap.stop(true, true).removeClass('fancybox-opened'); + + F.transitions[F.current.closeMethod](); + } + }, + + // Manage slideshow: + // $.fancybox.play(); - toggle slideshow + // $.fancybox.play( true ); - start + // $.fancybox.play( false ); - stop + play: function (action) { + var clear = function () { + clearTimeout(F.player.timer); + }, + set = function () { + clear(); + + if (F.current && F.player.isActive) { + F.player.timer = setTimeout(F.next, F.current.playSpeed); + } + }, + stop = function () { + clear(); + + D.unbind('.player'); + + F.player.isActive = false; + + F.trigger('onPlayEnd'); + }, + start = function () { + if (F.current && (F.current.loop || F.current.index < F.group.length - 1)) { + F.player.isActive = true; + + D.bind({ + 'onCancel.player beforeClose.player': stop, + 'onUpdate.player': set, + 'beforeLoad.player': clear + }); + + set(); + + F.trigger('onPlayStart'); + } + }; + + if (action === true || (!F.player.isActive && action !== false)) { + start(); + } else { + stop(); + } + }, + + // Navigate to next gallery item + next: function (direction) { + var current = F.current; + + if (current) { + if (!isString(direction)) { + direction = current.direction.next; + } + + F.jumpto(current.index + 1, direction, 'next'); + } + }, + + // Navigate to previous gallery item + prev: function (direction) { + var current = F.current; + + if (current) { + if (!isString(direction)) { + direction = current.direction.prev; + } + + F.jumpto(current.index - 1, direction, 'prev'); + } + }, + + // Navigate to gallery item by index + jumpto: function (index, direction, router) { + var current = F.current; + + if (!current) { + return; + } + + index = getScalar(index); + + F.direction = direction || current.direction[(index >= current.index ? 'next' : 'prev')]; + F.router = router || 'jumpto'; + + if (current.loop) { + if (index < 0) { + index = current.group.length + (index % current.group.length); + } + + index = index % current.group.length; + } + + if (current.group[index] !== undefined) { + F.cancel(); + + F._start(index); + } + }, + + // Center inside viewport and toggle position type to fixed or absolute if needed + reposition: function (e, onlyAbsolute) { + var current = F.current, + wrap = current ? current.wrap : null, + pos; + + if (wrap) { + pos = F._getPosition(onlyAbsolute); + + if (e && e.type === 'scroll') { + delete pos.position; + + wrap.stop(true, true).animate(pos, 200); + + } else { + wrap.css(pos); + + current.pos = $.extend({}, current.dim, pos); + } + } + }, + + update: function (e) { + var type = (e && e.type), + anyway = !type || type === 'orientationchange'; + + if (anyway) { + clearTimeout(didUpdate); + + didUpdate = null; + } + + if (!F.isOpen || didUpdate) { + return; + } + + didUpdate = setTimeout(function () { + var current = F.current; + + if (!current || F.isClosing) { + return; + } + + F.wrap.removeClass('fancybox-tmp'); + + if (anyway || type === 'load' || (type === 'resize' && current.autoResize)) { + F._setDimension(); + } + + if (!(type === 'scroll' && current.canShrink)) { + F.reposition(e); + } + + F.trigger('onUpdate'); + + didUpdate = null; + + }, (anyway && !isTouch ? 0 : 300)); + }, + + // Shrink content to fit inside viewport or restore if resized + toggle: function (action) { + if (F.isOpen) { + F.current.fitToView = $.type(action) === "boolean" ? action : !F.current.fitToView; + + // Help browser to restore document dimensions + if (isTouch) { + F.wrap.removeAttr('style').addClass('fancybox-tmp'); + + F.trigger('onUpdate'); + } + + F.update(); + } + }, + + hideLoading: function () { + D.unbind('.loading'); + + $('#fancybox-loading').remove(); + }, + + showLoading: function () { + var el, viewport; + + F.hideLoading(); + + el = $('
').click(F.cancel).appendTo('body'); + + // If user will press the escape-button, the request will be canceled + D.bind('keydown.loading', function (e) { + if ((e.which || e.keyCode) === 27) { + e.preventDefault(); + + F.cancel(); + } + }); + + if (!F.defaults.fixed) { + viewport = F.getViewport(); + + el.css({ + position: 'absolute', + top: (viewport.h * 0.5) + viewport.y, + left: (viewport.w * 0.5) + viewport.x + }); + } + }, + + getViewport: function () { + var locked = (F.current && F.current.locked) || false, + rez = { + x: W.scrollLeft(), + y: W.scrollTop() + }; + + if (locked) { + rez.w = locked[0].clientWidth; + rez.h = locked[0].clientHeight; + + } else { + // See http://bugs.jquery.com/ticket/6724 + rez.w = isTouch && window.innerWidth ? window.innerWidth : W.width(); + rez.h = isTouch && window.innerHeight ? window.innerHeight : W.height(); + } + + return rez; + }, + + // Unbind the keyboard / clicking actions + unbindEvents: function () { + if (F.wrap && isQuery(F.wrap)) { + F.wrap.unbind('.fb'); + } + + D.unbind('.fb'); + W.unbind('.fb'); + }, + + bindEvents: function () { + var current = F.current, + keys; + + if (!current) { + return; + } + + // Changing document height on iOS devices triggers a 'resize' event, + // that can change document height... repeating infinitely + W.bind('orientationchange.fb' + (isTouch ? '' : ' resize.fb') + (current.autoCenter && !current.locked ? ' scroll.fb' : ''), F.update); + + keys = current.keys; + + if (keys) { + D.bind('keydown.fb', function (e) { + var code = e.which || e.keyCode, + target = e.target || e.srcElement; + + // Skip esc key if loading, because showLoading will cancel preloading + if (code === 27 && F.coming) { + return false; + } + + // Ignore key combinations and key events within form elements + if (!e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && !(target && (target.type || $(target).is('[contenteditable]')))) { + $.each(keys, function (i, val) { + if (current.group.length > 1 && val[code] !== undefined) { + F[i](val[code]); + + e.preventDefault(); + return false; + } + + if ($.inArray(code, val) > -1) { + F[i](); + + e.preventDefault(); + return false; + } + }); + } + }); + } + + if ($.fn.mousewheel && current.mouseWheel) { + F.wrap.bind('mousewheel.fb', function (e, delta, deltaX, deltaY) { + var target = e.target || null, + parent = $(target), + canScroll = false; + + while (parent.length) { + if (canScroll || parent.is('.fancybox-skin') || parent.is('.fancybox-wrap')) { + break; + } + + canScroll = isScrollable(parent[0]); + parent = $(parent).parent(); + } + + if (delta !== 0 && !canScroll) { + if (F.group.length > 1 && !current.canShrink) { + if (deltaY > 0 || deltaX > 0) { + F.prev(deltaY > 0 ? 'down' : 'left'); + + } else if (deltaY < 0 || deltaX < 0) { + F.next(deltaY < 0 ? 'up' : 'right'); + } + + e.preventDefault(); + } + } + }); + } + }, + + trigger: function (event, o) { + var ret, obj = o || F.coming || F.current; + + if (!obj) { + return; + } + + if ($.isFunction(obj[event])) { + ret = obj[event].apply(obj, Array.prototype.slice.call(arguments, 1)); + } + + if (ret === false) { + return false; + } + + if (obj.helpers) { + $.each(obj.helpers, function (helper, opts) { + if (opts && F.helpers[helper] && $.isFunction(F.helpers[helper][event])) { + F.helpers[helper][event]($.extend(true, {}, F.helpers[helper].defaults, opts), obj); + } + }); + } + + D.trigger(event); + }, + + isImage: function (str) { + return isString(str) && str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i); + }, + + isSWF: function (str) { + return isString(str) && str.match(/\.(swf)((\?|#).*)?$/i); + }, + + _start: function (index) { + var coming = {}, + obj, + href, + type, + margin, + padding; + + index = getScalar(index); + obj = F.group[index] || null; + + if (!obj) { + return false; + } + + coming = $.extend(true, {}, F.opts, obj); + + // Convert margin and padding properties to array - top, right, bottom, left + margin = coming.margin; + padding = coming.padding; + + if ($.type(margin) === 'number') { + coming.margin = [margin, margin, margin, margin]; + } + + if ($.type(padding) === 'number') { + coming.padding = [padding, padding, padding, padding]; + } + + // 'modal' propery is just a shortcut + if (coming.modal) { + $.extend(true, coming, { + closeBtn: false, + closeClick: false, + nextClick: false, + arrows: false, + mouseWheel: false, + keys: null, + helpers: { + overlay: { + closeClick: false + } + } + }); + } + + // 'autoSize' property is a shortcut, too + if (coming.autoSize) { + coming.autoWidth = coming.autoHeight = true; + } + + if (coming.width === 'auto') { + coming.autoWidth = true; + } + + if (coming.height === 'auto') { + coming.autoHeight = true; + } + + /* + * Add reference to the group, so it`s possible to access from callbacks, example: + * afterLoad : function() { + * this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); + * } + */ + + coming.group = F.group; + coming.index = index; + + // Give a chance for callback or helpers to update coming item (type, title, etc) + F.coming = coming; + + if (false === F.trigger('beforeLoad')) { + F.coming = null; + + return; + } + + type = coming.type; + href = coming.href; + + if (!type) { + F.coming = null; + + //If we can not determine content type then drop silently or display next/prev item if looping through gallery + if (F.current && F.router && F.router !== 'jumpto') { + F.current.index = index; + + return F[F.router](F.direction); + } + + return false; + } + + F.isActive = true; + + if (type === 'image' || type === 'swf') { + coming.autoHeight = coming.autoWidth = false; + coming.scrolling = 'visible'; + } + + if (type === 'image') { + coming.aspectRatio = true; + } + + if (type === 'iframe' && isTouch) { + coming.scrolling = 'scroll'; + } + + // Build the neccessary markup + coming.wrap = $(coming.tpl.wrap).addClass('fancybox-' + (isTouch ? 'mobile' : 'desktop') + ' fancybox-type-' + type + ' fancybox-tmp ' + coming.wrapCSS).appendTo(coming.parent || 'body'); + + $.extend(coming, { + skin: $('.fancybox-skin', coming.wrap), + outer: $('.fancybox-outer', coming.wrap), + inner: $('.fancybox-inner', coming.wrap) + }); + + $.each(["Top", "Right", "Bottom", "Left"], function (i, v) { + coming.skin.css('padding' + v, getValue(coming.padding[i])); + }); + + F.trigger('onReady'); + + // Check before try to load; 'inline' and 'html' types need content, others - href + if (type === 'inline' || type === 'html') { + if (!coming.content || !coming.content.length) { + return F._error('content'); + } + + } else if (!href) { + return F._error('href'); + } + + if (type === 'image') { + F._loadImage(); + + } else if (type === 'ajax') { + F._loadAjax(); + + } else if (type === 'iframe') { + F._loadIframe(); + + } else { + F._afterLoad(); + } + }, + + _error: function (type) { + $.extend(F.coming, { + type: 'html', + autoWidth: true, + autoHeight: true, + minWidth: 0, + minHeight: 0, + scrolling: 'no', + hasError: type, + content: F.coming.tpl.error + }); + + F._afterLoad(); + }, + + _loadImage: function () { + // Reset preload image so it is later possible to check "complete" property + var img = F.imgPreload = new Image(); + + img.onload = function () { + this.onload = this.onerror = null; + + F.coming.width = this.width / F.opts.pixelRatio; + F.coming.height = this.height / F.opts.pixelRatio; + + F._afterLoad(); + }; + + img.onerror = function () { + this.onload = this.onerror = null; + + F._error('image'); + }; + + img.src = F.coming.href; + + if (img.complete !== true) { + F.showLoading(); + } + }, + + _loadAjax: function () { + var coming = F.coming; + + F.showLoading(); + + F.ajaxLoad = $.ajax($.extend({}, coming.ajax, { + url: coming.href, + error: function (jqXHR, textStatus) { + if (F.coming && textStatus !== 'abort') { + F._error('ajax', jqXHR); + + } else { + F.hideLoading(); + } + }, + success: function (data, textStatus) { + if (textStatus === 'success') { + coming.content = data; + + F._afterLoad(); + } + } + })); + }, + + _loadIframe: function () { + var coming = F.coming, + iframe = $(coming.tpl.iframe.replace(/\{rnd\}/g, new Date().getTime())) + .attr('scrolling', isTouch ? 'auto' : coming.iframe.scrolling) + .attr('src', coming.href); + + // This helps IE + $(coming.wrap).bind('onReset', function () { + try { + $(this).find('iframe').hide().attr('src', '//about:blank').end().empty(); + } catch (e) { + } + }); + + if (coming.iframe.preload) { + F.showLoading(); + + iframe.one('load', function () { + $(this).data('ready', 1); + + // iOS will lose scrolling if we resize + if (!isTouch) { + $(this).bind('load.fb', F.update); + } + + // Without this trick: + // - iframe won't scroll on iOS devices + // - IE7 sometimes displays empty iframe + $(this).parents('.fancybox-wrap').width('100%').removeClass('fancybox-tmp').show(); + + F._afterLoad(); + }); + } + + coming.content = iframe.appendTo(coming.inner); + + if (!coming.iframe.preload) { + F._afterLoad(); + } + }, + + _preloadImages: function () { + var group = F.group, + current = F.current, + len = group.length, + cnt = current.preload ? Math.min(current.preload, len - 1) : 0, + item, + i; + + for (i = 1; i <= cnt; i += 1) { + item = group[(current.index + i ) % len]; + + if (item.type === 'image' && item.href) { + new Image().src = item.href; + } + } + }, + + _afterLoad: function () { + var coming = F.coming, + previous = F.current, + placeholder = 'fancybox-placeholder', + current, + content, + type, + scrolling, + href, + embed; + + F.hideLoading(); + + if (!coming || F.isActive === false) { + return; + } + + if (false === F.trigger('afterLoad', coming, previous)) { + coming.wrap.stop(true).trigger('onReset').remove(); + + F.coming = null; + + return; + } + + if (previous) { + F.trigger('beforeChange', previous); + + previous.wrap.stop(true).removeClass('fancybox-opened') + .find('.fancybox-item, .fancybox-nav') + .remove(); + } + + F.unbindEvents(); + + current = coming; + content = coming.content; + type = coming.type; + scrolling = coming.scrolling; + + $.extend(F, { + wrap: current.wrap, + skin: current.skin, + outer: current.outer, + inner: current.inner, + current: current, + previous: previous + }); + + href = current.href; + + switch (type) { + case 'inline': + case 'ajax': + case 'html': + if (current.selector) { + content = $('
').html(content).find(current.selector); + + } else if (isQuery(content)) { + if (!content.data(placeholder)) { + content.data(placeholder, $('
').insertAfter(content).hide()); + } + + content = content.show().detach(); + + current.wrap.bind('onReset', function () { + if ($(this).find(content).length) { + content.hide().replaceAll(content.data(placeholder)).data(placeholder, false); + } + }); + } + break; + + case 'image': + content = current.tpl.image.replace('{href}', href); + break; + + case 'swf': + content = ''; + embed = ''; + + $.each(current.swf, function (name, val) { + content += ''; + embed += ' ' + name + '="' + val + '"'; + }); + + content += ''; + break; + } + + if (!(isQuery(content) && content.parent().is(current.inner))) { + current.inner.append(content); + } + + // Give a chance for helpers or callbacks to update elements + F.trigger('beforeShow'); + + // Set scrolling before calculating dimensions + current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling)); + + // Set initial dimensions and start position + F._setDimension(); + + F.reposition(); + + F.isOpen = false; + F.coming = null; + + F.bindEvents(); + + if (!F.isOpened) { + $('.fancybox-wrap').not(current.wrap).stop(true).trigger('onReset').remove(); + + } else if (previous.prevMethod) { + F.transitions[previous.prevMethod](); + } + + F.transitions[F.isOpened ? current.nextMethod : current.openMethod](); + + F._preloadImages(); + }, + + _setDimension: function () { + var viewport = F.getViewport(), + steps = 0, + canShrink = false, + canExpand = false, + wrap = F.wrap, + skin = F.skin, + inner = F.inner, + current = F.current, + width = current.width, + height = current.height, + minWidth = current.minWidth, + minHeight = current.minHeight, + maxWidth = current.maxWidth, + maxHeight = current.maxHeight, + scrolling = current.scrolling, + scrollOut = current.scrollOutside ? current.scrollbarWidth : 0, + margin = current.margin, + wMargin = getScalar(margin[1] + margin[3]), + hMargin = getScalar(margin[0] + margin[2]), + wPadding, + hPadding, + wSpace, + hSpace, + origWidth, + origHeight, + origMaxWidth, + origMaxHeight, + ratio, + width_, + height_, + maxWidth_, + maxHeight_, + iframe, + body; + + // Reset dimensions so we could re-check actual size + wrap.add(skin).add(inner).width('auto').height('auto').removeClass('fancybox-tmp'); + + wPadding = getScalar(skin.outerWidth(true) - skin.width()); + hPadding = getScalar(skin.outerHeight(true) - skin.height()); + + // Any space between content and viewport (margin, padding, border, title) + wSpace = wMargin + wPadding; + hSpace = hMargin + hPadding; + + origWidth = isPercentage(width) ? (viewport.w - wSpace) * getScalar(width) / 100 : width; + origHeight = isPercentage(height) ? (viewport.h - hSpace) * getScalar(height) / 100 : height; + + if (current.type === 'iframe') { + iframe = current.content; + + if (current.autoHeight && iframe.data('ready') === 1) { + try { + if (iframe[0].contentWindow.document.location) { + inner.width(origWidth).height(9999); + + body = iframe.contents().find('body'); + + if (scrollOut) { + body.css('overflow-x', 'hidden'); + } + + origHeight = body.outerHeight(true); + } + + } catch (e) { + } + } + + } else if (current.autoWidth || current.autoHeight) { + inner.addClass('fancybox-tmp'); + + // Set width or height in case we need to calculate only one dimension + if (!current.autoWidth) { + inner.width(origWidth); + } + + if (!current.autoHeight) { + inner.height(origHeight); + } + + if (current.autoWidth) { + origWidth = inner.width(); + } + + if (current.autoHeight) { + origHeight = inner.height(); + } + + inner.removeClass('fancybox-tmp'); + } + + width = getScalar(origWidth); + height = getScalar(origHeight); + + ratio = origWidth / origHeight; + + // Calculations for the content + minWidth = getScalar(isPercentage(minWidth) ? getScalar(minWidth, 'w') - wSpace : minWidth); + maxWidth = getScalar(isPercentage(maxWidth) ? getScalar(maxWidth, 'w') - wSpace : maxWidth); + + minHeight = getScalar(isPercentage(minHeight) ? getScalar(minHeight, 'h') - hSpace : minHeight); + maxHeight = getScalar(isPercentage(maxHeight) ? getScalar(maxHeight, 'h') - hSpace : maxHeight); + + // These will be used to determine if wrap can fit in the viewport + origMaxWidth = maxWidth; + origMaxHeight = maxHeight; + + if (current.fitToView) { + maxWidth = Math.min(viewport.w - wSpace, maxWidth); + maxHeight = Math.min(viewport.h - hSpace, maxHeight); + } + + maxWidth_ = viewport.w - wMargin; + maxHeight_ = viewport.h - hMargin; + + if (current.aspectRatio) { + if (width > maxWidth) { + width = maxWidth; + height = getScalar(width / ratio); + } + + if (height > maxHeight) { + height = maxHeight; + width = getScalar(height * ratio); + } + + if (width < minWidth) { + width = minWidth; + height = getScalar(width / ratio); + } + + if (height < minHeight) { + height = minHeight; + width = getScalar(height * ratio); + } + + } else { + width = Math.max(minWidth, Math.min(width, maxWidth)); + + if (current.autoHeight && current.type !== 'iframe') { + inner.width(width); + + height = inner.height(); + } + + height = Math.max(minHeight, Math.min(height, maxHeight)); + } + + // Try to fit inside viewport (including the title) + if (current.fitToView) { + inner.width(width).height(height); + + wrap.width(width + wPadding); + + // Real wrap dimensions + width_ = wrap.width(); + height_ = wrap.height(); + + if (current.aspectRatio) { + while ((width_ > maxWidth_ || height_ > maxHeight_) && width > minWidth && height > minHeight) { + if (steps++ > 19) { + break; + } + + height = Math.max(minHeight, Math.min(maxHeight, height - 10)); + width = getScalar(height * ratio); + + if (width < minWidth) { + width = minWidth; + height = getScalar(width / ratio); + } + + if (width > maxWidth) { + width = maxWidth; + height = getScalar(width / ratio); + } + + inner.width(width).height(height); + + wrap.width(width + wPadding); + + width_ = wrap.width(); + height_ = wrap.height(); + } + + } else { + width = Math.max(minWidth, Math.min(width, width - (width_ - maxWidth_))); + height = Math.max(minHeight, Math.min(height, height - (height_ - maxHeight_))); + } + } + + if (scrollOut && scrolling === 'auto' && height < origHeight && (width + wPadding + scrollOut) < maxWidth_) { + width += scrollOut; + } + + inner.width(width).height(height); + + wrap.width(width + wPadding); + + width_ = wrap.width(); + height_ = wrap.height(); + + canShrink = (width_ > maxWidth_ || height_ > maxHeight_) && width > minWidth && height > minHeight; + canExpand = current.aspectRatio ? (width < origMaxWidth && height < origMaxHeight && width < origWidth && height < origHeight) : ((width < origMaxWidth || height < origMaxHeight) && (width < origWidth || height < origHeight)); + + $.extend(current, { + dim: { + width: getValue(width_), + height: getValue(height_) + }, + origWidth: origWidth, + origHeight: origHeight, + canShrink: canShrink, + canExpand: canExpand, + wPadding: wPadding, + hPadding: hPadding, + wrapSpace: height_ - skin.outerHeight(true), + skinSpace: skin.height() - height + }); + + if (!iframe && current.autoHeight && height > minHeight && height < maxHeight && !canExpand) { + inner.height('auto'); + } + }, + + _getPosition: function (onlyAbsolute) { + var current = F.current, + viewport = F.getViewport(), + margin = current.margin, + width = F.wrap.width() + margin[1] + margin[3], + height = F.wrap.height() + margin[0] + margin[2], + rez = { + position: 'absolute', + top: margin[0], + left: margin[3] + }; + + if (current.autoCenter && current.fixed && !onlyAbsolute && height <= viewport.h && width <= viewport.w) { + rez.position = 'fixed'; + + } else if (!current.locked) { + rez.top += viewport.y; + rez.left += viewport.x; + } + + rez.top = getValue(Math.max(rez.top, rez.top + ((viewport.h - height) * current.topRatio))); + rez.left = getValue(Math.max(rez.left, rez.left + ((viewport.w - width) * current.leftRatio))); + + return rez; + }, + + _afterZoomIn: function () { + var current = F.current; + + if (!current) { + return; + } + + F.isOpen = F.isOpened = true; + + F.wrap.css('overflow', 'visible').addClass('fancybox-opened'); + + F.update(); + + // Assign a click event + if (current.closeClick || (current.nextClick && F.group.length > 1)) { + F.inner.css('cursor', 'pointer').bind('click.fb', function (e) { + if (!$(e.target).is('a') && !$(e.target).parent().is('a')) { + e.preventDefault(); + + F[current.closeClick ? 'close' : 'next'](); + } + }); + } + + // Create a close button + if (current.closeBtn) { + $(current.tpl.closeBtn).appendTo(F.skin).bind('click.fb', function (e) { + e.preventDefault(); + + F.close(); + }); + } + + // Create navigation arrows + if (current.arrows && F.group.length > 1) { + if (current.loop || current.index > 0) { + $(current.tpl.prev).appendTo(F.outer).bind('click.fb', F.prev); + } + + if (current.loop || current.index < F.group.length - 1) { + $(current.tpl.next).appendTo(F.outer).bind('click.fb', F.next); + } + } + + F.trigger('afterShow'); + + // Stop the slideshow if this is the last item + if (!current.loop && current.index === current.group.length - 1) { + F.play(false); + + } else if (F.opts.autoPlay && !F.player.isActive) { + F.opts.autoPlay = false; + + F.play(); + } + }, + + _afterZoomOut: function (obj) { + obj = obj || F.current; + + $('.fancybox-wrap').trigger('onReset').remove(); + + $.extend(F, { + group: {}, + opts: {}, + router: false, + current: null, + isActive: false, + isOpened: false, + isOpen: false, + isClosing: false, + wrap: null, + skin: null, + outer: null, + inner: null + }); + + F.trigger('afterClose', obj); + } + }); + + /* + * Default transitions + */ + + F.transitions = { + getOrigPosition: function () { + var current = F.current, + element = current.element, + orig = current.orig, + pos = {}, + width = 50, + height = 50, + hPadding = current.hPadding, + wPadding = current.wPadding, + viewport = F.getViewport(); + + if (!orig && current.isDom && element.is(':visible')) { + orig = element.find('img:first'); + + if (!orig.length) { + orig = element; + } + } + + if (isQuery(orig)) { + pos = orig.offset(); + + if (orig.is('img')) { + width = orig.outerWidth(); + height = orig.outerHeight(); + } + + } else { + pos.top = viewport.y + (viewport.h - height) * current.topRatio; + pos.left = viewport.x + (viewport.w - width) * current.leftRatio; + } + + if (F.wrap.css('position') === 'fixed' || current.locked) { + pos.top -= viewport.y; + pos.left -= viewport.x; + } + + pos = { + top: getValue(pos.top - hPadding * current.topRatio), + left: getValue(pos.left - wPadding * current.leftRatio), + width: getValue(width + wPadding), + height: getValue(height + hPadding) + }; + + return pos; + }, + + step: function (now, fx) { + var ratio, + padding, + value, + prop = fx.prop, + current = F.current, + wrapSpace = current.wrapSpace, + skinSpace = current.skinSpace; + + if (prop === 'width' || prop === 'height') { + ratio = fx.end === fx.start ? 1 : (now - fx.start) / (fx.end - fx.start); + + if (F.isClosing) { + ratio = 1 - ratio; + } + + padding = prop === 'width' ? current.wPadding : current.hPadding; + value = now - padding; + + F.skin[prop](getScalar(prop === 'width' ? value : value - (wrapSpace * ratio))); + F.inner[prop](getScalar(prop === 'width' ? value : value - (wrapSpace * ratio) - (skinSpace * ratio))); + } + }, + + zoomIn: function () { + var current = F.current, + startPos = current.pos, + effect = current.openEffect, + elastic = effect === 'elastic', + endPos = $.extend({opacity: 1}, startPos); + + // Remove "position" property that breaks older IE + delete endPos.position; + + if (elastic) { + startPos = this.getOrigPosition(); + + if (current.openOpacity) { + startPos.opacity = 0.1; + } + + } else if (effect === 'fade') { + startPos.opacity = 0.1; + } + + F.wrap.css(startPos).animate(endPos, { + duration: effect === 'none' ? 0 : current.openSpeed, + easing: current.openEasing, + step: elastic ? this.step : null, + complete: F._afterZoomIn + }); + }, + + zoomOut: function () { + var current = F.current, + effect = current.closeEffect, + elastic = effect === 'elastic', + endPos = {opacity: 0.1}; + + if (elastic) { + endPos = this.getOrigPosition(); + + if (current.closeOpacity) { + endPos.opacity = 0.1; + } + } + + F.wrap.animate(endPos, { + duration: effect === 'none' ? 0 : current.closeSpeed, + easing: current.closeEasing, + step: elastic ? this.step : null, + complete: F._afterZoomOut + }); + }, + + changeIn: function () { + var current = F.current, + effect = current.nextEffect, + startPos = current.pos, + endPos = {opacity: 1}, + direction = F.direction, + distance = 200, + field; + + startPos.opacity = 0.1; + + if (effect === 'elastic') { + field = direction === 'down' || direction === 'up' ? 'top' : 'left'; + + if (direction === 'down' || direction === 'right') { + startPos[field] = getValue(getScalar(startPos[field]) - distance); + endPos[field] = '+=' + distance + 'px'; + + } else { + startPos[field] = getValue(getScalar(startPos[field]) + distance); + endPos[field] = '-=' + distance + 'px'; + } + } + + // Workaround for http://bugs.jquery.com/ticket/12273 + if (effect === 'none') { + F._afterZoomIn(); + + } else { + F.wrap.css(startPos).animate(endPos, { + duration: current.nextSpeed, + easing: current.nextEasing, + complete: F._afterZoomIn + }); + } + }, + + changeOut: function () { + var previous = F.previous, + effect = previous.prevEffect, + endPos = {opacity: 0.1}, + direction = F.direction, + distance = 200; + + if (effect === 'elastic') { + endPos[direction === 'down' || direction === 'up' ? 'top' : 'left'] = ( direction === 'up' || direction === 'left' ? '-' : '+' ) + '=' + distance + 'px'; + } + + previous.wrap.animate(endPos, { + duration: effect === 'none' ? 0 : previous.prevSpeed, + easing: previous.prevEasing, + complete: function () { + $(this).trigger('onReset').remove(); + } + }); + } + }; + + /* + * Overlay helper + */ + + F.helpers.overlay = { + defaults: { + closeClick: true, // if true, fancyBox will be closed when user clicks on the overlay + speedOut: 200, // duration of fadeOut animation + showEarly: true, // indicates if should be opened immediately or wait until the content is ready + css: {}, // custom CSS properties + locked: !isTouch, // if true, the content will be locked into overlay + fixed: true // if false, the overlay CSS position property will not be set to "fixed" + }, + + overlay: null, // current handle + fixed: false, // indicates if the overlay has position "fixed" + el: $('html'), // element that contains "the lock" + + // Public methods + create: function (opts) { + opts = $.extend({}, this.defaults, opts); + + if (this.overlay) { + this.close(); + } + + this.overlay = $('
').appendTo(F.coming ? F.coming.parent : opts.parent); + this.fixed = false; + + if (opts.fixed && F.defaults.fixed) { + this.overlay.addClass('fancybox-overlay-fixed'); + + this.fixed = true; + } + }, + + open: function (opts) { + var that = this; + + opts = $.extend({}, this.defaults, opts); + + if (this.overlay) { + this.overlay.unbind('.overlay').width('auto').height('auto'); + + } else { + this.create(opts); + } + + if (!this.fixed) { + W.bind('resize.overlay', $.proxy(this.update, this)); + + this.update(); + } + + if (opts.closeClick) { + this.overlay.bind('click.overlay', function (e) { + if ($(e.target).hasClass('fancybox-overlay')) { + if (F.isActive) { + F.close(); + } else { + that.close(); + } + + return false; + } + }); + } + + this.overlay.css(opts.css).show(); + }, + + close: function () { + var scrollV, scrollH; + + W.unbind('resize.overlay'); + + if (this.el.hasClass('fancybox-lock')) { + $('.fancybox-margin').removeClass('fancybox-margin'); + + scrollV = W.scrollTop(); + scrollH = W.scrollLeft(); + + this.el.removeClass('fancybox-lock'); + + W.scrollTop(scrollV).scrollLeft(scrollH); + } + + $('.fancybox-overlay').remove().hide(); + + $.extend(this, { + overlay: null, + fixed: false + }); + }, + + // Private, callbacks + + update: function () { + var width = '100%', offsetWidth; + + // Reset width/height so it will not mess + this.overlay.width(width).height('100%'); + + // jQuery does not return reliable result for IE + if (IE) { + offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth); + + if (D.width() > offsetWidth) { + width = D.width(); + } + + } else if (D.width() > W.width()) { + width = D.width(); + } + + this.overlay.width(width).height(D.height()); + }, + + // This is where we can manipulate DOM, because later it would cause iframes to reload + onReady: function (opts, obj) { + var overlay = this.overlay; + + $('.fancybox-overlay').stop(true, true); + + if (!overlay) { + this.create(opts); + } + + if (opts.locked && this.fixed && obj.fixed) { + if (!overlay) { + this.margin = D.height() > W.height() ? $('html').css('margin-right').replace("px", "") : false; + } + + obj.locked = this.overlay.append(obj.wrap); + obj.fixed = false; + } + + if (opts.showEarly === true) { + this.beforeShow.apply(this, arguments); + } + }, + + beforeShow: function (opts, obj) { + var scrollV, scrollH; + + if (obj.locked) { + if (this.margin !== false) { + $('*').filter(function () { + return ($(this).css('position') === 'fixed' && !$(this).hasClass("fancybox-overlay") && !$(this).hasClass("fancybox-wrap") ); + }).addClass('fancybox-margin'); + + this.el.addClass('fancybox-margin'); + } + + scrollV = W.scrollTop(); + scrollH = W.scrollLeft(); + + this.el.addClass('fancybox-lock'); + + W.scrollTop(scrollV).scrollLeft(scrollH); + } + + this.open(opts); + }, + + onUpdate: function () { + if (!this.fixed) { + this.update(); + } + }, + + afterClose: function (opts) { + // Remove overlay if exists and fancyBox is not opening + // (e.g., it is not being open using afterClose callback) + //if (this.overlay && !F.isActive) { + if (this.overlay && !F.coming) { + this.overlay.fadeOut(opts.speedOut, $.proxy(this.close, this)); + } + } + }; + + /* + * Title helper + */ + + F.helpers.title = { + defaults: { + type: 'float', // 'float', 'inside', 'outside' or 'over', + position: 'bottom' // 'top' or 'bottom' + }, + + beforeShow: function (opts) { + var current = F.current, + text = current.title, + type = opts.type, + title, + target; + + if ($.isFunction(text)) { + text = text.call(current.element, current); + } + + if (!isString(text) || $.trim(text) === '') { + return; + } + + title = $('
' + text + '
'); + + switch (type) { + case 'inside': + target = F.skin; + break; + + case 'outside': + target = F.wrap; + break; + + case 'over': + target = F.inner; + break; + + default: // 'float' + target = F.skin; + + title.appendTo('body'); + + if (IE) { + title.width(title.width()); + } + + title.wrapInner(''); + + //Increase bottom margin so this title will also fit into viewport + F.current.margin[2] += Math.abs(getScalar(title.css('margin-bottom'))); + break; + } + + title[(opts.position === 'top' ? 'prependTo' : 'appendTo')](target); + } + }; + + // jQuery plugin initialization + $.fn.fancybox = function (options) { + var index, + that = $(this), + selector = this.selector || '', + run = function (e) { + var what = $(this).blur(), idx = index, relType, relVal; + + if (!(e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) && !what.is('.fancybox-wrap')) { + relType = options.groupAttr || 'data-fancybox-group'; + relVal = what.attr(relType); + + if (!relVal) { + relType = 'rel'; + relVal = what.get(0)[relType]; + } + + if (relVal && relVal !== '' && relVal !== 'nofollow') { + what = selector.length ? $(selector) : that; + what = what.filter('[' + relType + '="' + relVal + '"]'); + idx = what.index(this); + } + + options.index = idx; + + // Stop an event from bubbling if everything is fine + if (F.open(what, options) !== false) { + e.preventDefault(); + } + } + }; + + options = options || {}; + index = options.index || 0; + + if (!selector || options.live === false) { + that.unbind('click.fb-start').bind('click.fb-start', run); + + } else { + D.undelegate(selector, 'click.fb-start').delegate(selector + ":not('.fancybox-item, .fancybox-nav')", 'click.fb-start', run); + } + + this.filter('[data-fancybox-start=1]').trigger('click'); + + return this; + }; + + // Tests that need a body at doc ready + D.ready(function () { + var w1, w2; + + if ($.scrollbarWidth === undefined) { + // http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth + $.scrollbarWidth = function () { + var parent = $('
').appendTo('body'), + child = parent.children(), + width = child.innerWidth() - child.height(99).innerWidth(); + + parent.remove(); + + return width; + }; + } + + if ($.support.fixedPosition === undefined) { + $.support.fixedPosition = (function () { + var elem = $('
').appendTo('body'), + fixed = ( elem[0].offsetTop === 20 || elem[0].offsetTop === 15 ); + + elem.remove(); + + return fixed; + }()); + } + + $.extend(F.defaults, { + scrollbarWidth: $.scrollbarWidth(), + fixed: $.support.fixedPosition, + parent: $('body') + }); + + //Get real width of page scroll-bar + w1 = $(window).width(); + + H.addClass('fancybox-lock-test'); + + w2 = $(window).width(); + + H.removeClass('fancybox-lock-test'); + + $("").appendTo("head"); + }); + +}(window, document, jQuery)); \ No newline at end of file diff --git a/client/index.html b/client/index.html index 74129d2..942ab8d 100644 --- a/client/index.html +++ b/client/index.html @@ -148,7 +148,7 @@ - +