PATH:
home
/
letacommog
/
supportleta
/
wp-content
/
plugins
/
the-grid
/
frontend
/
assets
/
js
/*! * The Grid Slider v1.0.0 * Copyright © 2015 All Rights Reserved. * @author Themeone [http://theme-one.com/the-grid/] */ /*jslint bitwise: true */ ;(function ($, w, undefined) { 'use strict'; var pluginName = 'TG_Slider', className = 'TG_Slider', namespace = pluginName, // Local WindowAnimationTiming interface cAF = w.cancelAnimationFrame || w.cancelRequestAnimationFrame, rAF = w.requestAnimationFrame, // Support indicators transform, gpuAcceleration, // Other global values $doc = $(document), dragInitEvents = 'touchstart.' + namespace + ' mousedown.' + namespace, dragMouseEvents = 'mousemove.' + namespace + ' mouseup.' + namespace, dragTouchEvents = 'touchmove.' + namespace + ' touchend.' + namespace, wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel.' : 'mousewheel.') + namespace, clickEvent = 'click.' + namespace, mouseDownEvent = 'mousedown.' + namespace, interactiveElements = ['INPUT', 'SELECT', 'BUTTON', 'TEXTAREA'], tmpArray = [], time, // Math shorthands abs = Math.abs, sqrt = Math.sqrt, pow = Math.pow, round = Math.round, max = Math.max, min = Math.min; // Keep track of last fired global wheel event var lastGlobalWheel = 0; $doc.on(wheelEvent, function (event) { var TG_Slider = event.originalEvent[namespace]; var time = +new Date(); // Update last global wheel time, but only when event didn't originate // in TG_Slider frame, or the origin was less than scrollHijack time ago if (!TG_Slider || TG_Slider.options.scrollHijack < time - lastGlobalWheel) lastGlobalWheel = time; }); /** * TG_Slider. * * @class * * @param {Element} frame DOM element of TG_Slider container. * @param {Object} options Object with options. * @param {Object} callbackMap Callbacks map. */ function TG_Slider(frame, options, callbackMap) { // Extend options var o = $.extend({}, TG_Slider.defaults, options), // Private variables self = this, parallax = isNumber(frame), // Frame $frame = $(frame), $slidee = o.slidee ? $(o.slidee).eq(0) : $frame.children().eq(0), frameSize = 0, slideeSize = 0, pos = { start: 0, center: 0, end: 0, cur: 0, dest: 0 }, // Scrollbar $sb = $(o.scrollBar).eq(0), $handle = $sb.children().eq(0), sbSize = 0, handleSize = 0, hPos = { start: 0, end: 0, cur: 0 }, // Pagesbar $pb = $(o.pagesBar), $pages = 0, pages = [], // Items $items = 0, items = [], rel = { firstItem: 0, lastItem: 0, centerItem: 0, activeItem: null, activePage: 0 }, // Styles frameStyles = new StyleRestorer($frame[0]), slideeStyles = new StyleRestorer($slidee[0]), sbStyles = new StyleRestorer($sb[0]), handleStyles = new StyleRestorer($handle[0]), // Navigation type booleans basicNav = o.itemNav === 'basic', forceCenteredNav = o.itemNav === 'forceCentered', centeredNav = o.itemNav === 'centered' || forceCenteredNav, itemNav = !parallax && (basicNav || centeredNav || forceCenteredNav), // Miscellaneous $scrollSource = o.scrollSource ? $(o.scrollSource) : $frame, $dragSource = o.dragSource ? $(o.dragSource) : $frame, $forwardButton = $(o.forward), $backwardButton = $(o.backward), $prevButton = $(o.prev), $nextButton = $(o.next), $prevPageButton = $(o.prevPage), $nextPageButton = $(o.nextPage), callbacks = {}, last = {}, animation = {}, move = {}, dragging = { released: 1 }, scrolling = { last: 0, delta: 0, resetTime: 200 }, renderID = 0, historyID = 0, cycleID = 0, continuousID = 0, i, l; // Normalizing frame if (!parallax) { frame = $frame[0]; } // Expose properties self.initialized = 0; self.frame = frame; self.slidee = $slidee[0]; self.pos = pos; self.rel = rel; self.items = items; self.pages = pages; self.isPaused = 0; self.options = o; self.dragging = dragging; /** * Loading function. * * Populate arrays, set sizes, bind events, ... * * @param {Boolean} [isInit] Whether load is called from within self.init(). * @return {Void} */ function load(isInit) { // Local variables var lastItemsCount = 0, lastPagesCount = pages.length, data = $slidee.data('TG_Layout'), itemGutter = (data) ? data.options[data.options.layoutMode].gutter.offsetWidth : 0; // for backend if (!data) { return false; } // Reset global variables frameSize = $frame.width(); sbSize = $sb.width(); slideeSize = $slidee.outerWidth(); pages.length = 0; // Set position limits & relatives pos.start = 0; pos.end = max(slideeSize - frameSize, 0); // Sizes & offsets for item based navigations if (itemNav) { // Save the number of current items lastItemsCount = items.length; // Reset itemNav related variables $items = $slidee.children(o.itemSelector); items.length = 0; // Needed variables var paddingStart = getPx($slidee, o.horizontal ? 'paddingLeft' : 'paddingTop'), paddingEnd = getPx($slidee, o.horizontal ? 'paddingRight' : 'paddingBottom'), borderBox = $($items).css('boxSizing') === 'border-box', filteredItems = data.filteredItems, ignoredMargin = 0, lastItemIndex = 0, lastItem, max_width = 0, pos_items = [], new_pos_item = []; for (var i = 0; i < filteredItems.length; i++) { var width = parseFloat(getComputedStyle(filteredItems[i].element).width)+itemGutter, pos_x = filteredItems[i].position.x; max_width = (pos_x+width > max_width) ? pos_x+width : max_width; pos_items.push(pos_x); } pos_items.push(max_width); pos_items.sort(function(a,b){return a - b;}); for (var i = 1; i < pos_items.length; i++) { new_pos_item.push(pos_items[i]-pos_items[i-1]); } // Reset slideeSize slideeSize = 0; // Iterate through filtered items $(filteredItems).each(function (i, element) { // set item with and margin (gutter) var itemMarginStart = itemGutter/2, itemMarginEnd = itemGutter/2; var item = {}; item.el = element; item.size = new_pos_item[i]; item.half = item.size / 2; item.start = slideeSize - itemMarginStart; item.center = item.start - round(frameSize / 2 - item.size / 2); item.end = item.start - frameSize + item.size; // Account for slidee padding if (!i) { slideeSize += paddingStart; } // Increment slidee size for size of the active element slideeSize += item.size; // Try to account for vertical margin collapsing in vertical mode if (!o.horizontal) { // Subtract smaller margin, but only when top margin is not 0, and this is not the first element if (itemMarginEnd && itemMarginStart && i > 0) { slideeSize -= min(itemMarginStart, itemMarginEnd); } } // Things to be done on last item if (i === lastItemIndex) { item.end += paddingEnd; slideeSize += paddingEnd; ignoredMargin = itemMarginEnd; } // Add item object to items array if (item.size) { items.push(item); lastItem = item; } }); // Resize SLIDEE to fit all items $slidee[0].style[o.horizontal ? 'width' : 'height'] = (borderBox ? slideeSize: slideeSize - paddingStart - paddingEnd) + 'px'; // Adjust internal SLIDEE size for last margin slideeSize -= ignoredMargin; // Set limits if (items.length) { pos.start = items[0][forceCenteredNav ? 'center' : 'start']; pos.end = forceCenteredNav ? lastItem.center : frameSize < slideeSize ? lastItem.end : pos.start; } else { pos.start = pos.end = 0; } } // Calculate SLIDEE center position pos.center = round(pos.end / 2 + pos.start / 2); // Update relative positions updateRelatives(); // Pages if (!parallax && frameSize > 0) { var tempPagePos = pos.start; var pagesHtml = ''; // Populate pages array if (itemNav) { $.each(items, function (i, item) { if (forceCenteredNav) { pages.push(item.center); } else if (item.start + item.size > tempPagePos && tempPagePos <= pos.end) { tempPagePos = item.start; pages.push(item.size < frameSize && data.options.layoutMode === 'justified' ? item.start+(item.size-frameSize)/2 : item.start); tempPagePos += frameSize; if (tempPagePos > pos.end && tempPagePos < pos.end + frameSize) { pages.push(pos.end); } } }); } else { while (tempPagePos - frameSize < pos.end) { pages.push(tempPagePos); tempPagePos += frameSize; } } // Pages bar if ($pb[0] && lastPagesCount !== pages.length) { for (var i = 0; i < pages.length; i++) { pagesHtml += o.pageBuilder.call(self, i); } if (pages.length === 1) { pagesHtml = null; } $pages = $pb.html(pagesHtml).children(); $pages.eq(rel.activePage).addClass(o.activeClass); } } // Extend relative variables object with some useful info rel.slideeSize = slideeSize; rel.frameSize = frameSize; rel.sbSize = sbSize; rel.handleSize = handleSize; // Activate requested position if (itemNav) { if (isInit && o.startAt != null) { //activate(o.startAt); self[centeredNav ? 'toCenter' : 'toStart'](o.startAt); } // Fix possible overflowing var activeItem = items[rel.activeItem]; slideTo(centeredNav && activeItem ? activeItem.center : within(pos.dest, pos.start, pos.end)); } else { if (isInit) { if (o.startAt != null) slideTo(o.startAt, 1); } else { // Fix possible overflowing slideTo(within(pos.dest, pos.start, pos.end)); } } // Trigger load event trigger('load'); } self.reload = function () { load(); }; /** * Animate to a position. * * @param {Int} newPos New position. * @param {Bool} immediate Reposition immediately without an animation. * @param {Bool} dontAlign Do not align items, use the raw position passed in first argument. * * @return {Void} */ function slideTo(newPos, immediate, dontAlign) { // Align items if (itemNav && dragging.released && !dontAlign) { var tempRel = getRelatives(newPos); var isNotBordering = newPos > pos.start && newPos < pos.end; if (centeredNav) { if (isNotBordering) { newPos = items[tempRel.centerItem].center; } if (forceCenteredNav && o.activateMiddle) { activate(tempRel.centerItem); } } else if (isNotBordering) { newPos = items[tempRel.firstItem].start; } } // Handle overflowing position limits if (dragging.init && dragging.slidee && o.elasticBounds) { if (newPos > pos.end) { newPos = pos.end + (newPos - pos.end) / 6; } else if (newPos < pos.start) { newPos = pos.start + (newPos - pos.start) / 6; } } else { newPos = within(newPos, pos.start, pos.end); } // Update the animation object animation.start = +new Date(); animation.time = 0; animation.from = pos.cur; animation.to = newPos; animation.delta = newPos - pos.cur; animation.tweesing = dragging.tweese || dragging.init && !dragging.slidee; animation.immediate = !animation.tweesing && (immediate || dragging.init && dragging.slidee || !o.speed); // Reset dragging tweesing request dragging.tweese = 0; // Start animation rendering if (newPos !== pos.dest) { pos.dest = newPos; trigger('change'); if (!renderID) { render(); } } // Reset next cycle timeout resetCycle(); // Synchronize states updateRelatives(); updateButtonsState(); syncPagesbar(); } /** * Render animation frame. * * @return {Void} */ function render() { if (!self.initialized) { return; } // If first render call, wait for next animationFrame if (!renderID) { renderID = rAF(render); if (dragging.released) { trigger('moveStart'); } return; } // If immediate repositioning is requested, don't animate. if (animation.immediate) { pos.cur = animation.to; } // Use tweesing for animations without known end point else if (animation.tweesing) { animation.tweeseDelta = animation.to - pos.cur; // Fuck Zeno's paradox if (abs(animation.tweeseDelta) < 0.1) { pos.cur = animation.to; } else { pos.cur += animation.tweeseDelta * (dragging.released ? o.swingSpeed : o.syncSpeed); } } // Use tweening for basic animations with known end point else { animation.time = min(+new Date() - animation.start, o.speed); pos.cur = animation.from + animation.delta * $.easing[o.easing](animation.time/o.speed, animation.time, 0, 1, o.speed); } // If there is nothing more to render break the rendering loop, otherwise request new animation frame. if (animation.to === pos.cur) { pos.cur = animation.to; dragging.tweese = renderID = 0; } else { renderID = rAF(render); } trigger('move'); // Update SLIDEE position if (!parallax) { if (transform) { $slidee[0].style[transform] = gpuAcceleration + (o.horizontal ? 'translateX' : 'translateY') + '(' + (-pos.cur) + 'px)'; } else { $slidee[0].style[o.horizontal ? 'left' : 'top'] = -round(pos.cur) + 'px'; } } // When animation reached the end, and dragging is not active, trigger moveEnd if (!renderID && dragging.released) { trigger('moveEnd'); } } /** * Synchronizes pagesbar with SLIDEE. * * @return {Void} */ function syncPagesbar() { if ($pages[0] && last.page !== rel.activePage) { last.page = rel.activePage; $pages.removeClass(o.activeClass).eq(rel.activePage).addClass(o.activeClass); trigger('activePage', last.page); } } /** * Returns the position object. * * @param {Mixed} item * * @return {Object} */ self.getPos = function (item) { if (itemNav) { var index = getIndex(item); return index !== -1 ? items[index] : false; } else { var $item = $slidee.find(item).eq(0); if ($item[0]) { var offset = o.horizontal ? $item.offset().left - $slidee.offset().left : $item.offset().top - $slidee.offset().top; var size = $item[o.horizontal ? 'outerWidth' : 'outerHeight'](); return { start: offset, center: offset - frameSize / 2 + size / 2, end: offset - frameSize + size, size: size }; } else { return false; } } }; /** * Continuous move in a specified direction. * * @param {Bool} forward True for forward movement, otherwise it'll go backwards. * @param {Int} speed Movement speed in pixels per frame. Overrides options.moveBy value. * * @return {Void} */ self.moveBy = function (speed) { move.speed = speed; // If already initiated, or there is nowhere to move, abort if (dragging.init || !move.speed || pos.cur === (move.speed > 0 ? pos.end : pos.start)) { return; } // Initiate move object move.lastTime = +new Date(); move.startPos = pos.cur; // Set dragging as initiated continuousInit('button'); dragging.init = 1; // Start movement trigger('moveStart'); cAF(continuousID); moveLoop(); }; /** * Continuous movement loop. * * @return {Void} */ function moveLoop() { // If there is nowhere to move anymore, stop if (!move.speed || pos.cur === (move.speed > 0 ? pos.end : pos.start)) { self.stop(); } // Request new move loop if it hasn't been stopped continuousID = dragging.init ? rAF(moveLoop) : 0; // Update move object move.now = +new Date(); move.pos = pos.cur + (move.now - move.lastTime) / 1000 * move.speed; // Slide slideTo(dragging.init ? move.pos : round(move.pos)); // Normally, this is triggered in render(), but if there // is nothing to render, we have to do it manually here. if (!dragging.init && pos.cur === pos.dest) { trigger('moveEnd'); } // Update times for future iteration move.lastTime = move.now; } /** * Stops continuous movement. * * @return {Void} */ self.stop = function () { if (dragging.source === 'button') { dragging.init = 0; dragging.released = 1; } }; /** * Activate previous item. * * @return {Void} */ self.prev = function () { self.activate(rel.activeItem == null ? 0 : rel.activeItem - 1); }; /** * Activate next item. * * @return {Void} */ self.next = function () { self.activate(rel.activeItem == null ? 0 : rel.activeItem + 1); }; /** * Activate previous page. * * @return {Void} */ self.prevPage = function () { self.activatePage(rel.activePage - 1); }; /** * Activate next page. * * @return {Void} */ self.nextPage = function () { self.activatePage(rel.activePage + 1); }; /** * Slide SLIDEE by amount of pixels. * * @param {Int} delta Pixels/Items. Positive means forward, negative means backward. * @param {Bool} immediate Reposition immediately without an animation. * * @return {Void} */ self.slideBy = function (delta, immediate) { if (!delta) { return; } if (itemNav) { self[centeredNav ? 'toCenter' : 'toStart']( within((centeredNav ? rel.centerItem : rel.firstItem) + o.scrollBy * delta, 0, items.length) ); } else { slideTo(pos.dest + delta, immediate); } }; /** * Animate SLIDEE to a specific position. * * @param {Int} pos New position. * @param {Bool} immediate Reposition immediately without an animation. * * @return {Void} */ self.slideTo = function (pos, immediate) { slideTo(pos, immediate); }; /** * Core method for handling `toLocation` methods. * * @param {String} location * @param {Mixed} item * @param {Bool} immediate * * @return {Void} */ function to(location, item, immediate) { // Optional arguments logic if (type(item) === 'boolean') { immediate = item; item = undefined; } if (item === undefined) { slideTo(pos[location], immediate); } else { // You can't align items to sides of the frame // when centered navigation type is enabled if (centeredNav && location !== 'center') { return; } var itemPos = self.getPos(item); if (itemPos) { slideTo(itemPos[location], immediate, !centeredNav); } } } /** * Animate element or the whole SLIDEE to the start of the frame. * * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE. * @param {Bool} immediate Reposition immediately without an animation. * * @return {Void} */ self.toStart = function (item, immediate) { to('start', item, immediate); }; /** * Animate element or the whole SLIDEE to the end of the frame. * * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE. * @param {Bool} immediate Reposition immediately without an animation. * * @return {Void} */ self.toEnd = function (item, immediate) { to('end', item, immediate); }; /** * Animate element or the whole SLIDEE to the center of the frame. * * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE. * @param {Bool} immediate Reposition immediately without an animation. * * @return {Void} */ self.toCenter = function (item, immediate) { to('center', item, immediate); }; /** * Get the index of an item in SLIDEE. * * @param {Mixed} item Item DOM element. * * @return {Int} Item index, or -1 if not found. */ function getIndex(item) { return item != null ? isNumber(item) ? item >= 0 && item < items.length ? item : -1 : $items.index(item) : -1; } // Expose getIndex without lowering the compressibility of it, // as it is used quite often throughout TG_Slider. self.getIndex = getIndex; /** * Get index of an item in SLIDEE based on a variety of input types. * * @param {Mixed} item DOM element, positive or negative integer. * * @return {Int} Item index, or -1 if not found. */ function getRelativeIndex(item) { return getIndex(isNumber(item) && item < 0 ? item + items.length : item); } /** * Activates an item. * * @param {Mixed} item Item DOM element, or index starting at 0. * * @return {Mixed} Activated item index or false on fail. */ /*function activate(item, force) { var index = getIndex(item); if (!itemNav || index < 0) { return false; } // Update classes, last active index, and trigger active event only when there // has been a change. Otherwise just return the current active index. if (last.active !== index || force) { // Update classes $items.eq(rel.activeItem).removeClass(o.activeClass); $items.eq(index).addClass(o.activeClass); last.active = rel.activeItem = index; updateButtonsState(); trigger('active', index); } return index; }*/ /** * Activates an item and helps with further navigation when o.smart is enabled. * * @param {Mixed} item Item DOM element, or index starting at 0. * @param {Bool} immediate Whether to reposition immediately in smart navigation. * * @return {Void} */ /*self.activate = function (item, immediate) { var index = activate(item); // Smart navigation if (o.smart && index !== false) { // When centeredNav is enabled, center the element. // Otherwise, determine where to position the element based on its current position. // If the element is currently on the far end side of the frame, assume that user is // moving forward and animate it to the start of the visible frame, and vice versa. if (centeredNav) { self.toCenter(index, immediate); } else if (index >= rel.lastItem) { self.toStart(index, immediate); } else if (index <= rel.firstItem) { self.toEnd(index, immediate); } else { resetCycle(); } } };*/ /** * Activates a page. * * @param {Int} index Page index, starting from 0. * @param {Bool} immediate Whether to reposition immediately without animation. * * @return {Void} */ self.activatePage = function (index, immediate) { if (isNumber(index)) { slideTo(pages[within(index, 0, pages.length - 1)], immediate); } }; /** * Return relative positions of items based on their visibility within FRAME. * * @param {Int} slideePos Position of SLIDEE. * * @return {Void} */ function getRelatives(slideePos) { slideePos = within(isNumber(slideePos) ? slideePos : pos.dest, pos.start, pos.end); var relatives = {}; var centerOffset = forceCenteredNav ? 0 : frameSize / 2; // Determine active page if (!parallax) { for (var p = 0, pl = pages.length; p < pl; p++) { if (slideePos >= pos.end || p === pages.length - 1) { relatives.activePage = pages.length - 1; break; } if (slideePos <= pages[p] + centerOffset) { relatives.activePage = p; break; } } } // Relative item indexes if (itemNav) { var first = false; var last = false; var center = false; // From start for (var i = 0, il = items.length; i < il; i++) { // First item if (first === false && slideePos <= items[i].start + items[i].half) { first = i; } // Center item if (center === false && slideePos <= items[i].center + items[i].half) { center = i; } // Last item if (i === il - 1 || slideePos <= items[i].end + items[i].half) { last = i; break; } } // Safe assignment, just to be sure the false won't be returned relatives.firstItem = isNumber(first) ? first : 0; relatives.centerItem = isNumber(center) ? center : relatives.firstItem; relatives.lastItem = isNumber(last) ? last : relatives.centerItem; } return relatives; } /** * Update object with relative positions. * * @param {Int} newPos * * @return {Void} */ function updateRelatives(newPos) { $.extend(rel, getRelatives(newPos)); } /** * Disable navigation buttons when needed. * * Adds disabledClass, and when the button is <button> or <input>, activates :disabled state. * * @return {Void} */ function updateButtonsState() { var isStart = pos.dest <= pos.start; var isEnd = pos.dest >= pos.end; var slideePosState = (isStart ? 1 : 0) | (isEnd ? 2 : 0); // Update paging buttons only if there has been a change in SLIDEE position if (last.slideePosState !== slideePosState) { last.slideePosState = slideePosState; if ($prevPageButton.is('button,input')) { $prevPageButton.prop('disabled', isStart); } if ($nextPageButton.is('button,input')) { $nextPageButton.prop('disabled', isEnd); } $prevPageButton.add($backwardButton)[isStart ? 'addClass' : 'removeClass'](o.disabledClass); $nextPageButton.add($forwardButton)[isEnd ? 'addClass' : 'removeClass'](o.disabledClass); } // Forward & Backward buttons need a separate state caching because we cannot "property disable" // them while they are being used, as disabled buttons stop emitting mouse events. if (last.fwdbwdState !== slideePosState && dragging.released) { last.fwdbwdState = slideePosState; if ($backwardButton.is('button,input')) { $backwardButton.prop('disabled', isStart); } if ($forwardButton.is('button,input')) { $forwardButton.prop('disabled', isEnd); } } // Item navigation if (itemNav && rel.activeItem != null) { var isFirst = rel.activeItem === 0; var isLast = rel.activeItem >= items.length - 1; var itemsButtonState = (isFirst ? 1 : 0) | (isLast ? 2 : 0); if (last.itemsButtonState !== itemsButtonState) { last.itemsButtonState = itemsButtonState; if ($prevButton.is('button,input')) { $prevButton.prop('disabled', isFirst); } if ($nextButton.is('button,input')) { $nextButton.prop('disabled', isLast); } $prevButton[isFirst ? 'addClass' : 'removeClass'](o.disabledClass); $nextButton[isLast ? 'addClass' : 'removeClass'](o.disabledClass); } } } /** * Resume cycling. * * @param {Int} priority Resume pause with priority lower or equal than this. Used internally for pauseOnHover. * * @return {Void} */ self.resume = function (priority) { if (!o.cycleBy || !o.cycleInterval || o.cycleBy === 'items' && (!items[0] || rel.activeItem == null) || priority < self.isPaused) { return; } self.isPaused = 0; if (cycleID) { cycleID = clearTimeout(cycleID); } else { trigger('resume'); } cycleID = setTimeout(function () { trigger('cycle'); switch (o.cycleBy) { case 'items': self.activate(rel.activeItem >= items.length - 1 ? 0 : rel.activeItem + 1); break; case 'pages': self.activatePage(rel.activePage >= pages.length - 1 ? 0 : rel.activePage + 1); break; } }, o.cycleInterval); }; /** * Pause cycling. * * @param {Int} priority Pause priority. 100 is default. Used internally for pauseOnHover. * * @return {Void} */ self.pause = function (priority) { if (priority < self.isPaused) { return; } self.isPaused = priority || 100; if (cycleID) { cycleID = clearTimeout(cycleID); trigger('pause'); } }; /** * Toggle cycling. * * @return {Void} */ self.toggle = function () { self[cycleID ? 'pause' : 'resume'](); }; /** * Updates a signle or multiple option values. * * @param {Mixed} name Name of the option that should be updated, or object that will extend the options. * @param {Mixed} value New option value. * * @return {Void} */ /*self.set = function (name, value) { if ($.isPlainObject(name)) { $.extend(o, name); } else if (o.hasOwnProperty(name)) { o[name] = value; } };*/ /** * Registers callbacks. * * @param {Mixed} name Event name, or callbacks map. * @param {Mixed} fn Callback, or an array of callback functions. * * @return {Void} */ self.on = function (name, fn) { // Callbacks map if (type(name) === 'object') { for (var key in name) { if (name.hasOwnProperty(key)) { self.on(key, name[key]); } } // Callback } else if (type(fn) === 'function') { var names = name.split(' '); for (var n = 0, nl = names.length; n < nl; n++) { callbacks[names[n]] = callbacks[names[n]] || []; if (callbackIndex(names[n], fn) === -1) { callbacks[names[n]].push(fn); } } // Callbacks array } else if (type(fn) === 'array') { for (var f = 0, fl = fn.length; f < fl; f++) { self.on(name, fn[f]); } } }; /** * Registers callbacks to be executed only once. * * @param {Mixed} name Event name, or callbacks map. * @param {Mixed} fn Callback, or an array of callback functions. * * @return {Void} */ /*self.one = function (name, fn) { function proxy() { fn.apply(self, arguments); self.off(name, proxy); } self.on(name, proxy); };*/ /** * Remove one or all callbacks. * * @param {String} name Event name. * @param {Mixed} fn Callback, or an array of callback functions. Omit to remove all callbacks. * * @return {Void} */ /*self.off = function (name, fn) { if (fn instanceof Array) { for (var f = 0, fl = fn.length; f < fl; f++) { self.off(name, fn[f]); } } else { var names = name.split(' '); for (var n = 0, nl = names.length; n < nl; n++) { callbacks[names[n]] = callbacks[names[n]] || []; if (fn == null) { callbacks[names[n]].length = 0; } else { var index = callbackIndex(names[n], fn); if (index !== -1) { callbacks[names[n]].splice(index, 1); } } } } };*/ /** * Returns callback array index. * * @param {String} name Event name. * @param {Function} fn Function * * @return {Int} Callback array index, or -1 if isn't registered. */ function callbackIndex(name, fn) { for (var i = 0, l = callbacks[name].length; i < l; i++) { if (callbacks[name][i] === fn) { return i; } } return -1; } /** * Reset next cycle timeout. * * @return {Void} */ function resetCycle() { if (dragging.released && !self.isPaused) { self.resume(); } } /** * Calculate SLIDEE representation of handle position. * * @param {Int} handlePos * * @return {Int} */ function handleToSlidee(handlePos) { return round(within(handlePos, hPos.start, hPos.end) / hPos.end * (pos.end - pos.start)) + pos.start; } /** * Keeps track of a dragging delta history. * * @return {Void} */ function draggingHistoryTick() { // Looking at this, I know what you're thinking :) But as we need only 4 history states, doing it this way // as opposed to a proper loop is ~25 bytes smaller (when minified with GCC), a lot faster, and doesn't // generate garbage. The loop version would create 2 new variables on every tick. Unexaptable! dragging.history[0] = dragging.history[1]; dragging.history[1] = dragging.history[2]; dragging.history[2] = dragging.history[3]; dragging.history[3] = dragging.delta; } /** * Initialize continuous movement. * * @return {Void} */ function continuousInit(source) { dragging.released = 0; dragging.source = source; dragging.slidee = source === 'slidee'; } /** * Dragging initiator. * * @param {Event} event * * @return {Void} */ function dragInit(event) { var isTouch = event.type === 'touchstart'; var source = event.data.source; var isSlidee = source === 'slidee'; // Ignore when already in progress, or interactive element in non-touch navivagion if (dragging.init || !isTouch && isInteractive(event.target)) { return; } // Handle dragging conditions if (source === 'handle' && (!o.dragHandle || hPos.start === hPos.end)) { return; } // SLIDEE dragging conditions if (isSlidee && !(isTouch ? o.touchDragging : o.mouseDragging && event.which < 2)) { return; } if (!isTouch) { // prevents native image dragging in Firefox stopDefault(event); } // Reset dragging object continuousInit(source); // Properties used in dragHandler dragging.init = 0; dragging.$source = $(event.target); dragging.touch = isTouch; dragging.pointer = isTouch ? event.originalEvent.touches[0] : event; dragging.initX = dragging.pointer.pageX; dragging.initY = dragging.pointer.pageY; dragging.initPos = isSlidee ? pos.cur : hPos.cur; dragging.start = +new Date(); dragging.time = 0; dragging.path = 0; dragging.delta = 0; dragging.locked = 0; dragging.history = [0, 0, 0, 0]; dragging.pathToLock = isSlidee ? isTouch ? 30 : 10 : 0; // Bind dragging events $doc.on(isTouch ? dragTouchEvents : dragMouseEvents, dragHandler); // Pause ongoing cycle self.pause(1); // Add dragging class (isSlidee ? $slidee : $handle).addClass(o.draggedClass); // Trigger moveStart event trigger('moveStart'); // Keep track of a dragging path history. This is later used in the // dragging release swing calculation when dragging SLIDEE. if (isSlidee) { historyID = setInterval(draggingHistoryTick, 10); } } /** * Handler for dragging scrollbar handle or SLIDEE. * * @param {Event} event * * @return {Void} */ function dragHandler(event) { dragging.released = event.type === 'mouseup' || event.type === 'touchend'; dragging.pointer = dragging.touch ? event.originalEvent[dragging.released ? 'changedTouches' : 'touches'][0] : event; dragging.pathX = dragging.pointer.pageX - dragging.initX; dragging.pathY = dragging.pointer.pageY - dragging.initY; dragging.path = sqrt(pow(dragging.pathX, 2) + pow(dragging.pathY, 2)); dragging.delta = o.horizontal ? dragging.pathX : dragging.pathY; if (!dragging.released && dragging.path < 1) return; if (!dragging.init) { if (o.horizontal ? abs(dragging.pathX) > abs(dragging.pathY) : abs(dragging.pathX) < abs(dragging.pathY)) { dragging.init = 1; } else { return dragEnd(); } } stopDefault(event); // Disable click on a source element, as it is unwelcome when dragging if (!dragging.locked && dragging.path > dragging.pathToLock && dragging.slidee) { dragging.locked = 1; dragging.$source.on(clickEvent, disableOneEvent); } // Cancel dragging on release if (dragging.released) { dragEnd(); // Adjust path with a swing on mouse release if (o.releaseSwing && dragging.slidee) { dragging.swing = (dragging.delta - dragging.history[0]) / 40 * 300; dragging.delta += dragging.swing; dragging.tweese = abs(dragging.swing) > 10; } } slideTo(dragging.slidee ? round(dragging.initPos - dragging.delta) : handleToSlidee(dragging.initPos + dragging.delta)); } /** * Stops dragging and cleans up after it. * * @return {Void} */ function dragEnd() { clearInterval(historyID); dragging.released = true; $doc.off(dragging.touch ? dragTouchEvents : dragMouseEvents, dragHandler); (dragging.slidee ? $slidee : $handle).removeClass(o.draggedClass); // Make sure that disableOneEvent is not active in next tick. setTimeout(function () { dragging.$source.off(clickEvent, disableOneEvent); }); // Normally, this is triggered in render(), but if there // is nothing to render, we have to do it manually here. if (pos.cur === pos.dest && dragging.init) { trigger('moveEnd'); } // Resume ongoing cycle self.resume(1); dragging.init = 0; } /** * Check whether element is interactive. * * @return {Boolean} */ function isInteractive(element) { return ~$.inArray(element.nodeName, interactiveElements) || $(element).is(o.interactive); } /** * Continuous movement cleanup on mouseup. * * @return {Void} */ function movementReleaseHandler() { self.stop(); $doc.off('mouseup', movementReleaseHandler); } /** * Buttons navigation handler. * * @param {Event} event * * @return {Void} */ function buttonsHandler(event) { /*jshint validthis:true */ stopDefault(event); switch (this) { case $forwardButton[0]: case $backwardButton[0]: self.moveBy($forwardButton.is(this) ? o.moveBy : -o.moveBy); $doc.on('mouseup', movementReleaseHandler); break; case $prevButton[0]: self.prev(); break; case $nextButton[0]: self.next(); break; case $prevPageButton[0]: self.prevPage(); break; case $nextPageButton[0]: self.nextPage(); break; } } /** * Mouse wheel delta normalization. * * @param {Event} event * * @return {Int} */ /*function normalizeWheelDelta(event) { // wheelDelta needed only for IE8- scrolling.curDelta = ((o.horizontal ? event.deltaY || event.deltaX : event.deltaY) || -event.wheelDelta); scrolling.curDelta /= event.deltaMode === 1 ? 3 : 100; if (!itemNav) { return scrolling.curDelta; } time = +new Date(); if (scrolling.last < time - scrolling.resetTime) { scrolling.delta = 0; } scrolling.last = time; scrolling.delta += scrolling.curDelta; if (abs(scrolling.delta) < 1) { scrolling.finalDelta = 0; } else { scrolling.finalDelta = round(scrolling.delta / 1); scrolling.delta %= 1; } return scrolling.finalDelta; }*/ /** * Mouse scrolling handler. * * @param {Event} event * * @return {Void} */ /*function scrollHandler(event) { // Mark event as originating in a TG_Slider instance event.originalEvent[namespace] = self; // Don't hijack global scrolling var time = +new Date(); if (lastGlobalWheel + o.scrollHijack > time && $scrollSource[0] !== document && $scrollSource[0] !== window) { lastGlobalWheel = time; return; } // Ignore if there is no scrolling to be done if (!o.scrollBy || pos.start === pos.end) { return; } var delta = normalizeWheelDelta(event.originalEvent); // Trap scrolling only when necessary and/or requested if (o.scrollTrap || delta > 0 && pos.dest < pos.end || delta < 0 && pos.dest > pos.start) { stopDefault(event, 1); } self.slideBy(o.scrollBy * delta); }*/ /** * Scrollbar click handler. * * @param {Event} event * * @return {Void} */ /*function scrollbarHandler(event) { // Only clicks on scroll bar. Ignore the handle. if (o.clickBar && event.target === $sb[0]) { stopDefault(event); // Calculate new handle position and sync SLIDEE to it slideTo(handleToSlidee((o.horizontal ? event.pageX - $sb.offset().left : event.pageY - $sb.offset().top) - handleSize / 2)); } }*/ /** * Keyboard input handler. * * @param {Event} event * * @return {Void} */ function keyboardHandler(event) { if (!o.keyboardNavBy) { return; } switch (event.which) { // Left or Up case o.horizontal ? 37 : 38: stopDefault(event); self[o.keyboardNavBy === 'pages' ? 'prevPage' : 'prev'](); break; // Right or Down case o.horizontal ? 39 : 40: stopDefault(event); self[o.keyboardNavBy === 'pages' ? 'nextPage' : 'next'](); break; } } /** * Click on item activation handler. * * @param {Event} event * * @return {Void} */ /*function activateHandler(event) { // Ignore clicks on interactive elements. if (isInteractive(this)) { event.originalEvent[namespace + 'ignore'] = true; return; } // Ignore events that: // - are not originating from direct SLIDEE children // - originated from interactive elements if (this.parentNode !== $slidee[0] || event.originalEvent[namespace + 'ignore']) return; self.activate(this); }*/ /** * Click on page button handler. * * @param {Event} event * * @return {Void} */ function activatePageHandler() { /*jshint validthis:true */ // Accept only events from direct pages bar children. if (this.parentNode === $pb[0]) { self.activatePage($pages.index(this)); } } /** * Pause on hover handler. * * @param {Event} event * * @return {Void} */ function pauseOnHoverHandler(event) { if (o.pauseOnHover) { self[event.type === 'mouseenter' ? 'pause' : 'resume'](2); } } /** * Trigger callbacks for event. * * @param {String} name Event name. * @param {Mixed} argX Arguments passed to callbacks. * * @return {Void} */ function trigger(name, arg1) { if (callbacks[name]) { l = callbacks[name].length; // Callbacks will be stored and executed from a temporary array to not // break the execution queue when one of the callbacks unbinds itself. tmpArray.length = 0; for (i = 0; i < l; i++) { tmpArray.push(callbacks[name][i]); } // Execute the callbacks for (i = 0; i < l; i++) { tmpArray[i].call(self, name, arg1); } } } /** * Destroys instance and everything it created. * * @return {Void} */ /*self.destroy = function () { // Unbind all events $scrollSource .add($handle) .add($sb) .add($pb) .add($forwardButton) .add($backwardButton) .add($prevButton) .add($nextButton) .add($prevPageButton) .add($nextPageButton) .off('.' + namespace); // Unbinding specifically as to not nuke out other instances $doc.off('keydown', keyboardHandler); // Remove classes $prevButton .add($nextButton) .add($prevPageButton) .add($nextPageButton) .removeClass(o.disabledClass); if ($items && rel.activeItem != null) { $items.eq(rel.activeItem).removeClass(o.activeClass); } // Remove page items $pb.empty(); if (!parallax) { // Unbind events from frame $frame.off('.' + namespace); // Restore original styles frameStyles.restore(); slideeStyles.restore(); sbStyles.restore(); handleStyles.restore(); // Remove the instance from element data storage $.removeData(frame, namespace); } // Clean up collections items.length = pages.length = 0; last = {}; // Reset initialized status and return the instance self.initialized = 0; return self; };*/ /** * Initialize. * * @return {Object} */ self.init = function () { if (self.initialized) { return; } // Register callbacks map self.on(callbackMap); // Save styles var holderProps = ['overflow', 'position']; var movableProps = ['position', 'webkitTransform', 'msTransform', 'transform', 'left', 'top', 'width', 'height']; frameStyles.save.apply(frameStyles, holderProps); sbStyles.save.apply(sbStyles, holderProps); slideeStyles.save.apply(slideeStyles, movableProps); handleStyles.save.apply(handleStyles, movableProps); // Set required styles var $movables = $handle; if (!parallax) { $movables = $movables.add($slidee); $frame.css('overflow', 'hidden'); if (!transform && $frame.css('position') === 'static') { $frame.css('position', 'relative'); } } if (transform) { if (gpuAcceleration) { $movables.css(transform, gpuAcceleration); } } else { if ($sb.css('position') === 'static') { $sb.css('position', 'relative'); } $movables.css({ position: 'absolute' }); } // Navigation buttons if (o.forward) { $forwardButton.on(mouseDownEvent, buttonsHandler); } if (o.backward) { $backwardButton.on(mouseDownEvent, buttonsHandler); } if (o.prev) { $prevButton.on(clickEvent, buttonsHandler); } if (o.next) { $nextButton.on(clickEvent, buttonsHandler); } if (o.prevPage) { $prevPageButton.on(clickEvent, buttonsHandler); } if (o.nextPage) { $nextPageButton.on(clickEvent, buttonsHandler); } // Scrolling navigation //$scrollSource.on(wheelEvent, scrollHandler); // Clicking on scrollbar navigation /*if ($sb[0]) { $sb.on(clickEvent, scrollbarHandler); }*/ // Click on items navigation /*if (itemNav && o.activateOn) { $frame.on(o.activateOn + '.' + namespace, '*', activateHandler); }*/ // Pages navigation if ($pb[0] && o.activatePageOn) { $pb.on(o.activatePageOn + '.' + namespace, '*', activatePageHandler); } // Dragging navigation $dragSource.on(dragInitEvents, { source: 'slidee' }, dragInit); // Scrollbar dragging navigation if ($handle) { $handle.on(dragInitEvents, { source: 'handle' }, dragInit); } // Keyboard navigation $doc.on('keydown', keyboardHandler); if (!parallax) { // Pause on hover $frame.on('mouseenter.' + namespace + ' mouseleave.' + namespace, pauseOnHoverHandler); // Reset native FRAME element scroll $frame.on('scroll.' + namespace, resetScroll); } // Mark instance as initialized self.initialized = 1; // Load load(true); // Initiate automatic cycling if (o.cycleBy && !parallax) { self[o.startPaused ? 'pause' : 'resume'](); } // Return instance return self; }; } /** * Return type of the value. * * @param {Mixed} value * * @return {String} */ function type(value) { if (value == null) { return String(value); } if (typeof value === 'object' || typeof value === 'function') { return Object.prototype.toString.call(value).match(/\s([a-z]+)/i)[1].toLowerCase() || 'object'; } return typeof value; } /** * Event preventDefault & stopPropagation helper. * * @param {Event} event Event object. * @param {Bool} noBubbles Cancel event bubbling. * * @return {Void} */ function stopDefault(event, noBubbles) { event.preventDefault(); if (noBubbles) { event.stopPropagation(); } } /** * Disables an event it was triggered on and unbinds itself. * * @param {Event} event * * @return {Void} */ function disableOneEvent(event) { /*jshint validthis:true */ stopDefault(event, 1); $(this).off(event.type, disableOneEvent); } /** * Resets native element scroll values to 0. * * @return {Void} */ function resetScroll() { /*jshint validthis:true */ this.scrollLeft = 0; this.scrollTop = 0; } /** * Check if variable is a number. * * @param {Mixed} value * * @return {Boolean} */ function isNumber(value) { return !isNaN(parseFloat(value)) && isFinite(value); } /** * Parse style to pixels. * * @param {Object} $item jQuery object with element. * @param {Property} property CSS property to get the pixels from. * * @return {Int} */ function getPx($item, property) { return 0 | round(String($item.css(property)).replace(/[^\-0-9.]/g, '')); } /** * Make sure that number is within the limits. * * @param {Number} number * @param {Number} min * @param {Number} max * * @return {Number} */ function within(number, min, max) { return number < min ? min : number > max ? max : number; } /** * Saves element styles for later restoration. * * Example: * var styles = new StyleRestorer(frame); * styles.save('position'); * element.style.position = 'absolute'; * styles.restore(); // restores to state before the assignment above * * @param {Element} element */ function StyleRestorer(element) { var self = {}; self.style = {}; self.save = function () { if (!element || !element.nodeType) return; for (var i = 0; i < arguments.length; i++) { self.style[arguments[i]] = element.style[arguments[i]]; } return self; }; self.restore = function () { if (!element || !element.nodeType) return; for (var prop in self.style) { if (self.style.hasOwnProperty(prop)) element.style[prop] = self.style[prop]; } return self; }; return self; } // Local WindowAnimationTiming interface polyfill (function (w) { rAF = w.requestAnimationFrame || w.webkitRequestAnimationFrame || fallback; /** * Fallback implementation. */ var prev = new Date().getTime(); function fallback(fn) { var curr = new Date().getTime(); var ms = Math.max(0, 16 - (curr - prev)); var req = setTimeout(fn, ms); prev = curr; return req; } /** * Cancel. */ var cancel = w.cancelAnimationFrame || w.webkitCancelAnimationFrame || w.clearTimeout; cAF = function(id){ cancel.call(w, id); }; }(window)); // Feature detects (function () { var prefixes = ['', 'Webkit', 'Moz', 'ms', 'O']; var el = document.createElement('div'); function testProp(prop) { for (var p = 0, pl = prefixes.length; p < pl; p++) { var prefixedProp = prefixes[p] ? prefixes[p] + prop.charAt(0).toUpperCase() + prop.slice(1) : prop; if (el.style[prefixedProp] != null) { return prefixedProp; } } } // Global support indicators transform = testProp('transform'); gpuAcceleration = testProp('perspective') ? 'translateZ(0) ' : ''; }()); // Expose class globally w[className] = TG_Slider; // jQuery proxy $.fn[pluginName] = function (options, callbackMap) { var method, methodArgs; // Attributes logic if (!$.isPlainObject(options)) { if (type(options) === 'string' || options === false) { method = options === false ? 'destroy' : options; methodArgs = Array.prototype.slice.call(arguments, 1); } options = {}; } // Apply to all elements return this.each(function (i, element) { // Call with prevention against multiple instantiations var plugin = $.data(element, namespace); if (!plugin && !method) { // Create a new object if it doesn't exist yet plugin = $.data(element, namespace, new TG_Slider(element, options, callbackMap).init()); } else if (plugin && method) { // Call method if (plugin[method]) { plugin[method].apply(plugin, methodArgs); } } }); }; // Default options /*TG_Slider.defaults = { slidee: null, // Selector, DOM element, or jQuery object with DOM element representing SLIDEE. horizontal: false, // Switch to horizontal mode. // Item based navigation itemNav: null, // Item navigation type. Can be: 'basic', 'centered', 'forceCentered'. itemSelector: null, // Select only items that match this selector. smart: false, // Repositions the activated item to help with further navigation. activateOn: null, // Activate an item on this event. Can be: 'click', 'mouseenter', ... activateMiddle: false, // Always activate the item in the middle of the FRAME. forceCentered only. // Scrolling scrollSource: null, // Element for catching the mouse wheel scrolling. Default is FRAME. scrollBy: 0, // Pixels or items to move per one mouse scroll. 0 to disable scrolling. scrollHijack: 300, // Milliseconds since last wheel event after which it is acceptable to hijack global scroll. scrollTrap: false, // Don't bubble scrolling when hitting scrolling limits. // Dragging dragSource: null, // Selector or DOM element for catching dragging events. Default is FRAME. mouseDragging: false, // Enable navigation by dragging the SLIDEE with mouse cursor. touchDragging: false, // Enable navigation by dragging the SLIDEE with touch events. releaseSwing: false, // Ease out on dragging swing release. swingSpeed: 0.2, // Swing synchronization speed, where: 1 = instant, 0 = infinite. elasticBounds: false, // Stretch SLIDEE position limits when dragging past FRAME boundaries. interactive: null, // Selector for special interactive elements. // Scrollbar scrollBar: null, // Selector or DOM element for scrollbar container. dragHandle: false, // Whether the scrollbar handle should be draggable. dynamicHandle: false, // Scrollbar handle represents the ratio between hidden and visible content. minHandleSize: 50, // Minimal height or width (depends on TG_Slider direction) of a handle in pixels. clickBar: false, // Enable navigation by clicking on scrollbar. syncSpeed: 0.5, // Handle => SLIDEE synchronization speed, where: 1 = instant, 0 = infinite. // Pagesbar pagesBar: null, // Selector or DOM element for pages bar container. activatePageOn: null, // Event used to activate page. Can be: click, mouseenter, ... pageBuilder: // Page item generator. function (index) { return '<li>' + (index + 1) + '</li>'; }, // Navigation buttons forward: null, // Selector or DOM element for "forward movement" button. backward: null, // Selector or DOM element for "backward movement" button. prev: null, // Selector or DOM element for "previous item" button. next: null, // Selector or DOM element for "next item" button. prevPage: null, // Selector or DOM element for "previous page" button. nextPage: null, // Selector or DOM element for "next page" button. // Automated cycling cycleBy: null, // Enable automatic cycling by 'items' or 'pages'. cycleInterval: 5000, // Delay between cycles in milliseconds. pauseOnHover: false, // Pause cycling when mouse hovers over the FRAME. startPaused: false, // Whether to start in paused sate. // Mixed options moveBy: 300, // Speed in pixels per second used by forward and backward buttons. speed: 0, // Animations speed in milliseconds. 0 to disable animations. easing: 'swing', // Easing for duration based (tweening) animations. startAt: null, // Starting offset in pixels or items. keyboardNavBy: null, // Enable keyboard navigation by 'items' or 'pages'. // Classes draggedClass: 'dragged', // Class for dragged elements (like SLIDEE or scrollbar handle). activeClass: 'active', // Class for active items and pages. disabledClass: 'disabled' // Class for disabled navigation elements. };*/ }(jQuery, window));
[+]
..
[-] the-grid.js
[edit]
[-] the-grid.min.js
[edit]
[-] the-grid-layout.js
[edit]
[-] the-grid-slider.js
[edit]