vendor/assets/javascripts/fotorama.js in fotoramajs-4.3.4.1 vs vendor/assets/javascripts/fotorama.js in fotoramajs-4.4.1

- old
+ new

@@ -1,10 +1,96 @@ /*! - * Fotorama 4.3.4.1 | http://fotorama.io/license/ + * Fotorama 4.4.1 | http://fotorama.io/license/ */ (function (window, document, location, $, undefined) { "use strict"; +var _fotoramaClass = 'fotorama', + _fullscreenClass = 'fullscreen', + + wrapClass = _fotoramaClass + '__wrap', + wrapCss3Class = wrapClass + '--css3', + wrapVideoClass = wrapClass + '--video', + wrapFadeClass = wrapClass + '--fade', + wrapSlideClass = wrapClass + '--slide', + wrapNoControlsClass = wrapClass + '--no-controls', + wrapNoShadowsClass = wrapClass + '--no-shadows', + wrapPanYClass = wrapClass + '--pan-y', + wrapRtlClass = wrapClass + '--rtl', + + stageClass = _fotoramaClass + '__stage', + stageFrameClass = stageClass + '__frame', + stageFrameVideoClass = stageFrameClass + '--video', + stageShaftClass = stageClass + '__shaft', + stageOnlyActiveClass = stageClass + '--only-active', + + grabClass = _fotoramaClass + '__grab', + pointerClass = _fotoramaClass + '__pointer', + + arrClass = _fotoramaClass + '__arr', + arrDisabledClass = arrClass + '--disabled', + arrPrevClass = arrClass + '--prev', + arrNextClass = arrClass + '--next', + arrArrClass = arrClass + '__arr', + + navClass = _fotoramaClass + '__nav', + navWrapClass = navClass + '-wrap', + navShaftClass = navClass + '__shaft', + navDotsClass = navClass + '--dots', + navThumbsClass = navClass + '--thumbs', + navFrameClass = navClass + '__frame', + navFrameDotClass = navFrameClass + '--dot', + navFrameThumbClass = navFrameClass + '--thumb', + + fadeClass = _fotoramaClass + '__fade', + fadeFrontClass = fadeClass + '-front', + fadeRearClass = fadeClass + '-rear', + + shadowClass = _fotoramaClass + '__shadow', + shadowsClass = shadowClass + 's', + shadowsLeftClass = shadowsClass + '--left', + shadowsRightClass = shadowsClass + '--right', + + activeClass = _fotoramaClass + '__active', + selectClass = _fotoramaClass + '__select', + + hiddenClass = _fotoramaClass + '--hidden', + + fullscreenClass = _fotoramaClass + '--fullscreen', + fullscreenIconClass = _fotoramaClass + '__fullscreen-icon', + + errorClass = _fotoramaClass + '__error', + loadingClass = _fotoramaClass + '__loading', + loadedClass = _fotoramaClass + '__loaded', + loadedFullClass = loadedClass + '--full', + loadedImgClass = loadedClass + '--img', + + grabbingClass = _fotoramaClass + '__grabbing', + + imgClass = _fotoramaClass + '__img', + imgFullClass = imgClass + '--full', + + dotClass = _fotoramaClass + '__dot', + thumbClass = _fotoramaClass + '__thumb', + thumbBorderClass = thumbClass + '-border', + + htmlClass = _fotoramaClass + '__html', + + videoClass = _fotoramaClass + '__video', + videoPlayClass = videoClass + '-play', + videoCloseClass = videoClass + '-close', + + captionClass = _fotoramaClass + '__caption', + + ooooClass = _fotoramaClass + '__oooo'; +var JQUERY_VERSION = $ && $.fn.jquery.split('.'); + +if (!JQUERY_VERSION + || JQUERY_VERSION[0] < 1 + || (JQUERY_VERSION[0] == 1 && JQUERY_VERSION[1] < 8)) { + window.console && console['error']('Fotorama requires jQuery 1.8 or later and will not run without it.'); + return; +} // My Underscore :-) var _ = {}; /* Modernizr 2.6.2 (Custom Build) | MIT & BSD * Build: http://modernizr.com/download/#-csstransforms3d-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes */ @@ -366,87 +452,10 @@ return c * polyBez([coOrdArray[0], coOrdArray[1]], [coOrdArray[2], coOrdArray[3]])(t / d) + b; } } return encodedFuncName; } -var _fotoramaClass = 'fotorama', - _fullscreenClass = 'fullscreen', - - wrapClass = _fotoramaClass + '__wrap', - wrapCss3Class = wrapClass + '--css3', - wrapVideoClass = wrapClass + '--video', - wrapFadeClass = wrapClass + '--fade', - wrapSlideClass = wrapClass + '--slide', - wrapNoControlsClass = wrapClass + '--no-controls', - wrapNoShadowsClass = wrapClass + '--no-shadows', - wrapPanYClass = wrapClass + '--pan-y', - - stageClass = _fotoramaClass + '__stage', - stageFrameClass = stageClass + '__frame', - stageFrameVideoClass = stageFrameClass + '--video', - stageShaftClass = stageClass + '__shaft', - stageOnlyActiveClass = stageClass + '--only-active', - - grabClass = _fotoramaClass + '__grab', - pointerClass = _fotoramaClass + '__pointer', - - arrClass = _fotoramaClass + '__arr', - arrDisabledClass = arrClass + '--disabled', - arrPrevClass = arrClass + '--prev', - arrNextClass = arrClass + '--next', - arrArrClass = arrClass + '__arr', - - navClass = _fotoramaClass + '__nav', - navWrapClass = navClass + '-wrap', - navShaftClass = navClass + '__shaft', - navDotsClass = navClass + '--dots', - navThumbsClass = navClass + '--thumbs', - navFrameClass = navClass + '__frame', - navFrameDotClass = navFrameClass + '--dot', - navFrameThumbClass = navFrameClass + '--thumb', - - fadeClass = _fotoramaClass + '__fade', - fadeFrontClass = fadeClass + '-front', - fadeRearClass = fadeClass + '-rear', - - shadowClass = _fotoramaClass + '__shadow', - shadowsClass = shadowClass + 's', - shadowsLeftClass = shadowsClass + '--left', - shadowsRightClass = shadowsClass + '--right', - - activeClass = _fotoramaClass + '__active', - selectClass = _fotoramaClass + '__select', - - hiddenClass = _fotoramaClass + '--hidden', - - fullscreenClass = _fotoramaClass + '--fullscreen', - fullscreenIconClass = _fotoramaClass + '__fullscreen-icon', - - errorClass = _fotoramaClass + '__error', - loadingClass = _fotoramaClass + '__loading', - loadedClass = _fotoramaClass + '__loaded', - loadedFullClass = loadedClass + '--full', - loadedImgClass = loadedClass + '--img', - - grabbingClass = _fotoramaClass + '__grabbing', - - imgClass = _fotoramaClass + '__img', - imgFullClass = imgClass + '--full', - - dotClass = _fotoramaClass + '__dot', - thumbClass = _fotoramaClass + '__thumb', - thumbBorderClass = thumbClass + '-border', - - htmlClass = _fotoramaClass + '__html', - - videoClass = _fotoramaClass + '__video', - videoPlayClass = videoClass + '-play', - videoCloseClass = videoClass + '-close', - - captionClass = _fotoramaClass + '__caption', - - ooooClass = _fotoramaClass + '__oooo'; var $WINDOW = $(window), $DOCUMENT = $(document), $HTML, $BODY, @@ -457,22 +466,28 @@ FULLSCREEN = fullScreenApi.ok, MOBILE = navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i), SLOW = !CSS3 || MOBILE, + ADD_EVENT_LISTENER = 'addEventListener', + MS_POINTER = window.navigator.msPointerEnabled, + WHEEL = "onwheel" in document.createElement("div") ? "wheel" : document.onmousewheel !== undefined ? "mousewheel" : "DOMMouseScroll", + TOUCH_TIMEOUT = 250, TRANSITION_DURATION = 300, + + SCROLL_LOCK_TIMEOUT = 1400, + AUTOPLAY_INTERVAL = 5000, MARGIN = 2, THUMB_SIZE = 64, WIDTH = 500, HEIGHT = 333, - STAGE_FRAME_KEY = '$stageFrame', NAV_DOT_FRAME_KEY = '$navDotFrame', NAV_THUMB_FRAME_KEY = '$navThumbFrame', BEZIER = bez([.1, 0, .25, 1]); @@ -645,11 +660,11 @@ if ((!id || !type) && forceVideo) { id = href.href; type = 'custom'; } - return id ? {id: id, type: type} : false; + return id ? {id: id, type: type, s: href.search.replace(/^\?/, '')} : false; } function getVideoThumbs (dataFrame, data, fotorama) { var img, thumb, video = dataFrame.video; if (video.type === 'youtube') { @@ -937,10 +952,19 @@ } else { ratio = _ratio.split('/'); return +ratio[0] / +ratio[1] || undefined; } } + +function stopEvent (e, stopPropagation) { + e.preventDefault(); + stopPropagation && e.stopPropagation(); +} + +function getDirectionSign (forward) { + return forward ? '>' : '<'; +} function slide ($el, options) { var elPos = Math.round(options.pos), onEndFn = options.onEnd || noop; if (typeof options.overPos !== 'undefined' && options.overPos !== options.pos) { @@ -1005,22 +1029,20 @@ (_$el1 && crossfadeFLAG) || _$el2 || onEndFn(); } var lastEvent, moveEventType, preventEvent, - preventEventTimeout, - addEventListener = 'addEventListener'; + preventEventTimeout; function extendEvent (e) { var touch = (e.touches || [])[0] || e; e._x = touch.pageX; e._y = touch.clientY; } function touch ($el, options) { var el = $el[0], - docTouchTimeout, tail = {}, touchEnabledFLAG, startEvent, $target, controlTouch, @@ -1050,13 +1072,11 @@ (options.onStart || noop).call(el, e, {control: controlTouch, $target: $target}); touchEnabledFLAG = tail.flow = true; - if (!touchFLAG || tail.go) { - e.preventDefault(); - } + if (!touchFLAG || tail.go) stopEvent(e); } function onMove (e) { if ((e.touches && e.touches.length > 1) || (MS_POINTER && !e.isPrimary) @@ -1074,15 +1094,15 @@ xWin = (tail.go || tail.x || xyDiff > 0) && !tail.noSwipe, yWin = xyDiff < 0; if (touchFLAG && !tail.checked) { if (touchEnabledFLAG = xWin) { - e.preventDefault(); + stopEvent(e); } } else { //console.log('onMove e.preventDefault'); - e.preventDefault(); + stopEvent(e); (options.onMove || noop).call(el, e, {touch: touchFLAG}); } tail.checked = tail.checked || xWin || yWin; } @@ -1095,11 +1115,11 @@ tail.flow = false; } if (!_touchEnabledFLAG || (targetIsLinkFlag && !tail.checked)) return; - e && e.preventDefault(); + e && stopEvent(e); preventEvent = true; clearTimeout(preventEventTimeout); preventEventTimeout = setTimeout(function () { preventEvent = false; @@ -1107,49 +1127,47 @@ (options.onEnd || noop).call(el, {moved: tail.checked, $target: $target, control: controlTouch, touch: touchFLAG, startEvent: startEvent, aborted: !e}); } function onOtherStart () { if (tail.flow) return; - clearTimeout(docTouchTimeout); - docTouchTimeout = setTimeout(function () { + setTimeout(function () { tail.flow = true; }, 10); } function onOtherEnd () { if (!tail.flow) return; - clearTimeout(docTouchTimeout); - docTouchTimeout = setTimeout(function () { + setTimeout(function () { tail.flow = false; }, TOUCH_TIMEOUT); } if (MS_POINTER) { - el[addEventListener]('MSPointerDown', onStart, false); - document[addEventListener]('MSPointerMove', onMove, false); - document[addEventListener]('MSPointerCancel', onEnd, false); - document[addEventListener]('MSPointerUp', onEnd, false); + el[ADD_EVENT_LISTENER]('MSPointerDown', onStart, false); + document[ADD_EVENT_LISTENER]('MSPointerMove', onMove, false); + document[ADD_EVENT_LISTENER]('MSPointerCancel', onEnd, false); + document[ADD_EVENT_LISTENER]('MSPointerUp', onEnd, false); } else { - if (el[addEventListener]) { - el[addEventListener]('touchstart', onStart, false); - el[addEventListener]('touchmove', onMove, false); - el[addEventListener]('touchend', onEnd, false); + if (el[ADD_EVENT_LISTENER]) { + el[ADD_EVENT_LISTENER]('touchstart', onStart, false); + el[ADD_EVENT_LISTENER]('touchmove', onMove, false); + el[ADD_EVENT_LISTENER]('touchend', onEnd, false); - document[addEventListener]('touchstart', onOtherStart, false); - document[addEventListener]('touchend', onOtherEnd, false); - document[addEventListener]('touchcancel', onOtherEnd, false); - window[addEventListener]('scroll', onOtherEnd, false); + document[ADD_EVENT_LISTENER]('touchstart', onOtherStart, false); + document[ADD_EVENT_LISTENER]('touchend', onOtherEnd, false); + document[ADD_EVENT_LISTENER]('touchcancel', onOtherEnd, false); + window[ADD_EVENT_LISTENER]('scroll', onOtherEnd, false); } $el.on('mousedown', onStart); $DOCUMENT .on('mousemove', onMove) .on('mouseup', onEnd); } $el.on('click', 'a', function (e) { - tail.checked && e.preventDefault(); + tail.checked && stopEvent(e); }); return tail; } @@ -1302,11 +1320,11 @@ } } time *= slowFLAG ? 10 : 1; - (options.onEnd || noop).call(el, $.extend(result, {pos: moveElPos, newPos: newPos, overPos: overPos, time: time, moved: (longTouchFLAG && snap) || result.moved})); + (options.onEnd || noop).call(el, $.extend(result, {pos: moveElPos, newPos: newPos, overPos: overPos, time: time, moved: longTouchFLAG ? snap : Math.abs(moveElPos - startElPos) > 3})); } tail = $.extend(touch(options.$wrap, { onStart: onStart, onMove: onMove, @@ -1315,12 +1333,55 @@ control: options.control }), tail); return tail; } +function wheel ($el, options) { + var el = $el[0], + lockFLAG, + lastDirection, + /*unlockTimestamp,*/ + tail = { + prevent: {} + }; + el[ADD_EVENT_LISTENER] && el[ADD_EVENT_LISTENER](WHEEL, function (e) { + var yDelta = e.wheelDeltaY || -1 * e.deltaY || 0, + xDelta = e.wheelDeltaX || -1 * e.deltaX || 0, + xWin = Math.abs(xDelta) > Math.abs(yDelta), + direction = getDirectionSign(xDelta < 0), + sameDirection = lastDirection === direction; + //console.log('direction', direction); + //console.log('lastDirection', lastDirection); + + lastDirection = direction; + + if (!xWin || !tail.ok || tail.prevent[direction] && !lockFLAG) { + return; + } else { + stopEvent(e, true); + if (lockFLAG && sameDirection /*|| $.now() - unlockTimestamp < TOUCH_TIMEOUT / 2*/) return; + } + + if (options.shift) { + lockFLAG = true; + clearTimeout(tail.t); + tail.t = setTimeout(function () { + //unlockTimestamp = $.now(); + lockFLAG = false; + }, SCROLL_LOCK_TIMEOUT); + } + + (options.onEnd || noop)(e, options.shift ? direction : xDelta); + + }, false); + + return tail; +} + + jQuery.Fotorama = function ($fotorama, opts) { $HTML = $HTML || $('html'); $BODY = $BODY || $('body'); var that = this, @@ -1383,17 +1444,20 @@ o_fade, o_thumbSide, o_thumbSide2, o_transitionDuration, o_shadows, + o_rtl, lastOptions = {}, measures = {}, measuresSetFLAG, stageShaftTouchTail = {}, + stageWheelTail = {}, navShaftTouchTail = {}, + navWheelTail = {}, scrollTop, scrollLeft, showedFLAG, @@ -1457,21 +1521,21 @@ if (FLAG) { $DOCUMENT .on(keydownLocal, function (e) { if ($videoPlaying && e.keyCode === 27) { - e.preventDefault(); + stopEvent(e); unloadVideo($videoPlaying, true, true); } else if (that.fullScreen || (opts.keyboard && !that.index)) { if (e.keyCode === 27) { - e.preventDefault(); + stopEvent(e); that.cancelFullScreen(); } else if (e.keyCode === 39 || (e.keyCode === 40 && that.fullScreen)) { - e.preventDefault(); + stopEvent(e); that.show({index: '>', slow: e.altKey, direct: true}); } else if (e.keyCode === 37 || (e.keyCode === 38 && that.fullScreen)) { - e.preventDefault(); + stopEvent(e); that.show({index: '<', slow: e.altKey, direct: true}); } } }); @@ -1558,43 +1622,48 @@ o_loop = opts.loop && (size > 2 || o_fade); o_transitionDuration = +opts.transitionduration || TRANSITION_DURATION; + o_rtl = opts.direction === 'rtl'; + var classes = {add: [], remove: []}; if (size > 1) { o_nav = opts.nav; o_navTop = opts.navposition === 'top'; classes.remove.push(selectClass); $arrs.toggle(opts.arrows); - - arrsUpdate(); } else { o_nav = false; $arrs.hide(); } + arrsUpdate(); + stageWheelUpdate(); + if (opts.autoplay) setAutoplayInterval(opts.autoplay); o_thumbSide = numberFromMeasure(opts.thumbwidth) || THUMB_SIZE; o_thumbSide2 = numberFromMeasure(opts.thumbheight) || THUMB_SIZE; + stageWheelTail.ok = navWheelTail.ok = opts.trackpad && !SLOW; + stageNoMove(); extendMeasures(opts, true); - o_navThumbs = o_nav === 'thumbs' + o_navThumbs = o_nav === 'thumbs'; if (o_navThumbs) { frameDraw(size, 'navThumb'); $navFrame = $navThumbFrame; navFrameKey = NAV_THUMB_FRAME_KEY; - setStyle($style, $.Fotorama.jst.style({w: o_thumbSide, h: o_thumbSide2, m: MARGIN, s: stamp, q: !COMPAT})); + setStyle($style, $.Fotorama.jst.style({w: o_thumbSide, h: o_thumbSide2, b: opts.thumbborderwidth, m: opts.thumbmargin, s: stamp, q: !COMPAT})); $nav .addClass(navThumbsClass) .removeClass(navDotsClass); } else if (o_nav === 'dots') { @@ -1632,15 +1701,20 @@ } classes[addOrRemove(o_fade)].push(wrapFadeClass); classes[addOrRemove(!o_fade)].push(wrapSlideClass); + classes[addOrRemove(o_rtl)].push(wrapRtlClass); + o_shadows = opts.shadows && !SLOW; classes[addOrRemove(!o_shadows)].push(wrapNoShadowsClass); ooooStop(); + // Glimpse + $stageShaft.css({left: opts.glimpse, right: opts.glimpse, width: 'auto'}); + $wrap .addClass(classes.add.join(' ')) .removeClass(classes.remove.join(' ')); lastOptions = $.extend({}, opts); @@ -1665,17 +1739,17 @@ function getNextIndex (index) { return index < size - 1 || o_loop ? index + 1 : false; } function setStageShaftMinmaxAndSnap () { - stageShaftData.min = o_loop ? -Infinity : -getPosByIndex(size - 1, measures.w, MARGIN, repositionIndex); - stageShaftData.max = o_loop ? Infinity : -getPosByIndex(0, measures.w, MARGIN, repositionIndex); - stageShaftData.snap = measures.w + MARGIN; + stageShaftData.min = o_loop ? -Infinity : -getPosByIndex(size - 1, measures.w, opts.margin, repositionIndex); + stageShaftData.max = o_loop ? Infinity : -getPosByIndex(0, measures.w, opts.margin, repositionIndex); + stageShaftData.snap = measures.w + opts.margin; } function setNavShaftMinmax () { - navShaftData.min = Math.min(0, measures.w - $navShaft.width()); + navShaftData.min = Math.min(0, measures.W - $navShaft.width()); navShaftData.max = 0; $navShaft.toggleClass(grabClass, !(navShaftTouchTail.noMove = navShaftData.min === navShaftData.max)); } function eachIndex (indexes, type, fn) { @@ -1712,11 +1786,11 @@ function loadImg (indexes, type, specialMeasures, specialFit, again) { eachIndex(indexes, type, function (i, index, dataFrame, $frame, key, frameData) { if (!$frame) return; - var fullFLAG = that.fullScreen && dataFrame.full && !frameData.$full && type === 'stage'; + var fullFLAG = that.fullScreen && dataFrame.full && dataFrame.full !== dataFrame.img && !frameData.$full && type === 'stage'; if (frameData.$img && !again && !fullFLAG) return; var img = new Image(), $img = $(img), @@ -1746,11 +1820,11 @@ if ((!dataFrame.html || type !== 'stage') && dummy && dummy !== src) { dataFrame[srcKey] = src = dummy; loadImg([index], type, specialMeasures, specialFit, true); } else { - if (src && !dataFrame.html) { + if (src && !dataFrame.html && !fullFLAG) { $frame .trigger('f:error') .removeClass(loadingClass) .addClass(errorClass); @@ -1794,12 +1868,11 @@ .addClass(imgClass + (fullFLAG ? ' ' + imgFullClass : '')) .prependTo($frame); fit($img, specialMeasures || measures, specialFit || dataFrame.fit || opts.fit); - $.Fotorama.cache[src] = 'loaded'; - frameData.state = 'loaded'; + $.Fotorama.cache[src] = frameData.state = 'loaded'; setTimeout(function () { $frame .trigger('f:load') .removeClass(loadingClass + ' ' + errorClass) @@ -1842,10 +1915,11 @@ setTimeout(justWait, 100); } })(); } + frameData.state = ''; img.src = src; }); } var $oooo = $(div('', div(ooooClass))), @@ -1930,11 +2004,11 @@ function stageFramePosition (indexes) { eachIndex(indexes, 'stage', function (i, index, dataFrame, $frame, key, frameData) { if (!$frame) return; - toDetach[STAGE_FRAME_KEY][normalizeIndex(index)] = $frame.css($.extend({left: o_fade ? 0 : getPosByIndex(index, measures.w, MARGIN, repositionIndex)}, o_fade && getDuration(0))); + toDetach[STAGE_FRAME_KEY][normalizeIndex(index)] = $frame.css($.extend({left: o_fade ? 0 : getPosByIndex(index, measures.w, opts.margin, repositionIndex)}, o_fade && getDuration(0))); if (isDetached($frame[0])) { $frame.appendTo($stageShaft); unloadVideo(dataFrame.$video); } @@ -2004,11 +2078,11 @@ frameData.l = left; frameData.w = thumbwidth; $this.css({width: thumbwidth}); - left += thumbwidth + MARGIN; + left += thumbwidth + opts.thumbmargin; }) ); frameAppend[type] = true; } @@ -2021,18 +2095,26 @@ function disableDirrection (i) { return !o_loop && (!(activeIndex + i) || !(activeIndex - size + i)) && !$videoPlaying; } function arrsUpdate () { - $arrs.each(function (i) { - $(this).toggleClass( - arrDisabledClass, - disableDirrection(i) - ); - }); + $arrPrev.toggleClass( + arrDisabledClass, + disableDirrection(0) + ); + $arrNext.toggleClass( + arrDisabledClass, + disableDirrection(1) + ); } + function stageWheelUpdate () { + if (stageWheelTail.ok) { + stageWheelTail.prevent = {'<': disableDirrection(0), '>': disableDirrection(1)}; + } + } + function getNavFrameBounds ($navFrame) { var navFrameData = $navFrame.data(), left, width; @@ -2044,21 +2126,21 @@ width = $navFrame.width(); } return { c: left + width / 2, - min: -left + MARGIN * 10, - max: -left + measures.w - width - MARGIN * 10 + min: -left + opts.thumbmargin * 10, + max: -left + measures.w - width - opts.thumbmargin * 10 }; } function slideThumbBorder (time) { var navFrameData = that.activeFrame[navFrameKey].data(); slide($thumbBorder, { time: time * .9, pos: navFrameData.l, - width: navFrameData.w - MARGIN * 2 + width: navFrameData.w - opts.thumbborderwidth * 2 }); } function slideNavShaft (options) { var $guessNavFrame = data[options.guessIndex][navFrameKey]; @@ -2205,11 +2287,11 @@ waitFor(function () { return frameData.state || _activeIndex !== activeIndex; }, function () { changeAutoplay.t = setTimeout(function () { if (pausedAutoplayFLAG || _activeIndex !== activeIndex) return; - that.show(o_loop ? '>' : normalizeIndex(activeIndex + 1)); + that.show(o_loop ? getDirectionSign(!o_rtl) : normalizeIndex(activeIndex + (o_rtl ? -1 : 1))); }, opts.autoplay); }); } @@ -2279,19 +2361,20 @@ skipReposition || stageShaftReposition(true); triggerEvent('showend', options.direct); updateTouchTails('go', false); + stageWheelUpdate(); stageCursor(); releaseAutoplay(); changeAutoplay(); }; if (!o_fade) { slide($stageShaft, { - pos: -getPosByIndex(dirtyIndex, measures.w, MARGIN, repositionIndex), + pos: -getPosByIndex(dirtyIndex, measures.w, opts.margin, repositionIndex), overPos: overPos, time: time, onEnd: onEnd, _001: true }); @@ -2350,10 +2433,11 @@ fullScreenApi.request(fotorama); } that.resize(); loadImg(activeIndexes, 'stage'); + updateFotoramaState(); triggerEvent('fullscreenenter'); } return this; @@ -2420,11 +2504,19 @@ windowHeight = $WINDOW.height() - (o_nav ? $nav.height() : 0); if (measureIsValid(width)) { $wrap.css({width: width, minWidth: measures.minwidth, maxWidth: measures.maxwidth}); - width = measures.w = $wrap.width(); + width = measures.W = measures.w = $wrap.width(); + + if (opts.glimpse) { + measures.w -= Math.round((numberFromPercent(opts.glimpse) / 100 * width || numberFromMeasure(opts.glimpse)) * 2); + } + + //console.log('measures.W', measures.W); + //console.log('measures.w', measures.w); + height = numberFromPercent(height) / 100 * windowHeight || numberFromMeasure(height); height = height || (ratio && width / ratio); if (height) { @@ -2548,11 +2640,11 @@ function stageCursor (e) { if (stageShaftTouchTail.flow) return; var x = e ? e.pageX : stageCursor.x, - pointerFLAG = e && !disableDirrection(getDirection(x)) && opts.click; + pointerFLAG = x && !disableDirrection(getDirection(x)) && opts.click; if (stageCursor.p !== pointerFLAG && (o_fade || !opts.swipe) && $stage.toggleClass(pointerClass, pointerFLAG)) { stageCursor.p = pointerFLAG; @@ -2575,11 +2667,11 @@ } else { triggerEvent('stagetap', undefined, function () { if (toggleControlsFLAG) { toggleControlsClass(); } else if (opts.click) { - that.show({index: e.shiftKey || !getDirection(e._x) ? '<' : '>', slow: e.altKey, direct: true}); + that.show({index: e.shiftKey || getDirectionSign(getDirection(e._x)), slow: e.altKey, direct: true}); } }); } } @@ -2598,11 +2690,11 @@ onTouchEnd(); var toggleControlsFLAG = (MS_POINTER && !hoverFLAG || result.touch) && opts.arrows; if (result.moved || (toggleControlsFLAG && result.pos !== result.newPos)) { - var index = getIndexByPos(result.newPos, measures.w, MARGIN, repositionIndex); + var index = getIndexByPos(result.newPos, measures.w, opts.margin, repositionIndex); that.show({ index: index, time: o_fade ? o_transitionDuration : result.time, overPos: result.overPos, direct: true @@ -2610,11 +2702,11 @@ } else if (!result.aborted) { onStageTap(result.startEvent, toggleControlsFLAG); } }, getPos: function () { - return -getPosByIndex(dirtyIndex, measures.w, MARGIN, repositionIndex); + return -getPosByIndex(dirtyIndex, measures.w, opts.margin, repositionIndex); }, _001: true, timeLow: 1, timeHigh: 1, friction: 2, @@ -2646,21 +2738,46 @@ pos: result.newPos, overPos: result.overPos, onEnd: onEnd }); thumbsDraw(result.newPos); - setShadow($nav, findShadowEdge(result.newPos, navShaftData.min, navShaftData.max)); + o_shadows && setShadow($nav, findShadowEdge(result.newPos, navShaftData.min, navShaftData.max)); } else { onEnd(); } }, timeLow: .5, timeHigh: 2, friction: 5, $wrap: $nav }); + stageWheelTail = wheel($stage, { + shift: true, + onEnd: function (e, direction) { + //console.log('wheel $stage onEnd', direction); + onTouchStart(); + that.show({index: direction, slow: e.altKey}) + } + }); + + navWheelTail = wheel($nav, { + onEnd: function (e, direction) { + //console.log('wheel $nav onEnd', direction); + onTouchStart(); + var newPos = stop($navShaft) + direction * .25; + $navShaft.css(getTranslate(minMaxLimit(newPos, navShaftData.min, navShaftData.max))); + o_shadows && setShadow($nav, findShadowEdge(newPos, navShaftData.min, navShaftData.max)); + navWheelTail.prevent = {'<': newPos >= navShaftData.max, '>': newPos <= navShaftData.min}; + clearTimeout(navWheelTail.t); + navWheelTail.t = setTimeout(function () { + thumbsDraw(newPos, true) + }, TOUCH_TIMEOUT); + thumbsDraw(newPos); + } + }); + $wrap.hover( function () { setTimeout(function () { if (touchedFLAG) return; hoverFLAG = true; @@ -2677,11 +2794,11 @@ var index = $(this).data().eq; that.show({index: index, slow: e.altKey, direct: true, coo: e._x - $nav.offset().left, time: time}); } smartClick($arrs, function (e) { - e.preventDefault(); + stopEvent(e); if ($videoPlaying) { unloadVideo($videoPlaying, true, true); } else { onTouchEnd(); that.show({index: $arrs.index(this) ? '>' : '<', slow: e.altKey, direct: true}); @@ -2696,20 +2813,25 @@ function reset () { setData(); setOptions(); - if (!ready.ok) { - var _startindex; - // Only first time - if ((_startindex = opts.startindex) || opts.hash && location.hash) { + if (!reset.i) { + reset.i = true; + // Only once + var _startindex = opts.startindex; + if (_startindex || opts.hash && location.hash) { startIndex = getIndexFromHash(_startindex || location.hash.replace(/^#/, ''), data, that.index === 0 || _startindex, _startindex); } - activeIndex = repositionIndex = dirtyIndex = lastActiveIndex = startIndex = edgeIndex(startIndex) || 0; + activeIndex = repositionIndex = dirtyIndex = lastActiveIndex = startIndex = edgeIndex(startIndex) || 0;/*(o_rtl ? size - 1 : 0)*/; } if (size) { + //console.log('activeIndex', activeIndex); + if (changeToRtl()) return; + //console.log('No changeToRtl, activeIndex is', activeIndex); + if ($videoPlaying) { unloadVideo($videoPlaying, true); } activeIndexes = []; @@ -2720,10 +2842,22 @@ } else { that.destroy(); } } + function changeToRtl () { + //console.log('changeToRtl'); + if (!changeToRtl.f === o_rtl) { + changeToRtl.f = o_rtl; + activeIndex = size - 1 - activeIndex; + //console.log('changeToRtl execute, activeIndex is', activeIndex); + that.reverse(); + + return true; + } + } + $.each('load push pop shift unshift reverse sort splice'.split(' '), function (i, method) { that[method] = function () { data = data || []; if (method !== 'load') { Array.prototype[method].apply(data, arguments); @@ -2773,19 +2907,25 @@ height: null, minheight: null, maxheight: null, ratio: null, // '16/9' || 500/333 || 1.5 + margin: MARGIN, + glimpse: 0, + // navigation, thumbs nav: 'dots', // 'thumbs' || false navposition: 'bottom', // 'top' thumbwidth: THUMB_SIZE, thumbheight: THUMB_SIZE, + thumbmargin: MARGIN, + thumbborderwidth: MARGIN, arrows: true, click: true, swipe: true, + trackpad: true, allowfullscreen: false, // true || 'native' fit: 'contain', // 'cover' || 'scaledown' || 'none' @@ -2804,12 +2944,15 @@ loop: false, shuffle: false, - shadows: true + shadows: true, + + direction: 'ltr' // 'rtl' }, + window.fotoramaDefaults, opts, fotoramaData ) ); }); @@ -2849,26 +2992,26 @@ 'px;\nheight:' + ((__t = ( v.h )) == null ? '' : __t) + 'px}\n.fotorama' + ((__t = ( v.s )) == null ? '' : __t) + ' .fotorama__thumb-border{\nheight:' + -((__t = ( v.h - v.m * (v.q ? 0 : 2) )) == null ? '' : __t) + +((__t = ( v.h - v.b * (v.q ? 0 : 2) )) == null ? '' : __t) + 'px;\nborder-width:' + -((__t = ( v.m )) == null ? '' : __t) + +((__t = ( v.b )) == null ? '' : __t) + 'px;\nmargin-top:' + ((__t = ( v.m )) == null ? '' : __t) + 'px}'; return __p }; $.Fotorama.jst.video = function(v) { var __t, __p = '', __e = _.escape, __j = Array.prototype.join; function print() { __p += __j.call(arguments, '') } __p += '<div class="fotorama__video"><iframe src="'; - print(v.type == 'youtube' ? 'http://youtube.com/embed/' + v.id +'?autoplay=1' : v.type == 'vimeo' ? 'http://player.vimeo.com/video/' + v.id + '?autoplay=1&amp;badge=0' : v.id) ; + print((v.type == 'youtube' ? 'http://youtube.com/embed/' + v.id +'?autoplay=1' : v.type == 'vimeo' ? 'http://player.vimeo.com/video/' + v.id + '?autoplay=1&badge=0' : v.id) + '&' + v.s) ; __p += '" frameborder="0" allowfullscreen></iframe></div>'; return __p }; $(function () { $('.' + _fotoramaClass + ':not([data-auto="false"])').fotorama(); }); -})(window, document, location, jQuery); +})(window, document, location, window.jQuery);