/** * thumbs class * addon to strip gallery */ function UGThumbsStrip(){ var t = this; var g_gallery = new UniteGalleryMain(), g_objGallery, g_objects, g_objWrapper; var g_arrItems, g_objStrip, g_objStripInner; var g_aviaControl, g_touchThumbsControl, g_functions = new UGFunctions(); var g_isVertical = false, g_thumbs = new UGThumbsGeneral(); var g_functions = new UGFunctions(); var g_options = { strip_vertical_type: false, strip_thumbs_align: "left", //left, center, right, top, middle, bottom - the align of the thumbs when they smaller then the strip size. strip_space_between_thumbs:6, //space between thumbs strip_thumb_touch_sensetivity:15, //from 1-100, 1 - most sensetive, 100 - most unsensetive strip_scroll_to_thumb_duration:500, //duration of scrolling to thumb strip_scroll_to_thumb_easing:"easeOutCubic", //easing of scrolling to thumb animation strip_control_avia:true, //avia control - move the strip according strip moseover position strip_control_touch:true, //touch control - move the strip by dragging it strip_padding_top: 0, //add some space from the top strip_padding_bottom: 0, //add some space from the bottom strip_padding_left: 0, //add some space from left strip_padding_right: 0 //add some space from right } var g_temp = { isRunOnce:false, is_placed:false, isNotFixedThumbs: false, handle: null }; var g_sizes = { stripSize:0, //set after position thumbs stripActiveSize:0, //strip size without the padding stripInnerSize:0, thumbSize:0, thumbSecondSize:0 //size of the height and width of the strip } this.events = { //events variables STRIP_MOVE:"stripmove", INNER_SIZE_CHANGE:"size_change" } //the defaults for vertical align var g_defaultsVertical = { strip_thumbs_align: "top", thumb_resize_by: "width" } /** * set the thumbs strip html */ this.setHtml = function(objParent){ if(!objParent){ var objParent = g_objWrapper; if(g_options.parent_container != null) objParent = g_options.parent_container; } objParent.append("
"); g_objStrip = objParent.children(".ug-thumbs-strip"); g_objStripInner = g_objStrip.children(".ug-thumbs-strip-inner"); //put the thumbs to inner strip g_thumbs.setHtmlThumbs(g_objStripInner); //hide thumbs on not fixed mode if(g_temp.isNotFixedThumbs == true) g_thumbs.hideThumbs(); } function ___________GENERAL___________(){}; /** * init the strip */ function initStrip(gallery, customOptions){ g_objects = gallery.getObjects(); g_gallery = gallery; g_gallery.attachThumbsPanel("strip", t); g_objGallery = jQuery(gallery); g_objWrapper = g_objects.g_objWrapper; g_arrItems = g_objects.g_arrItems; g_options = jQuery.extend(g_options, customOptions); g_isVertical = g_options.strip_vertical_type; //set vertical defaults if(g_isVertical == true){ g_options = jQuery.extend(g_options, g_defaultsVertical); g_options = jQuery.extend(g_options, customOptions); customOptions.thumb_resize_by = "width"; } g_thumbs.init(gallery, customOptions); onAfterSetOptions(); } /** * run this funcion after set options. */ function onAfterSetOptions(){ var thumbsOptions = g_thumbs.getOptions(); g_temp.isNotFixedThumbs = (thumbsOptions.thumb_fixed_size === false); g_isVertical = g_options.strip_vertical_type; } /** * run the strip */ function runStrip(){ g_thumbs.setHtmlProperties(); initSizeParams(); fixSize(); positionThumbs(); //run only once if(g_temp.isRunOnce == false){ //init thumbs strip touch if(g_options.strip_control_touch == true){ g_touchThumbsControl = new UGTouchThumbsControl(); g_touchThumbsControl.init(t); } //init thumbs strip avia control if(g_options.strip_control_avia == true){ g_aviaControl = new UGAviaControl(); g_aviaControl.init(t); } checkControlsEnableDisable(); g_thumbs.loadThumbsImages(); initEvents(); } g_temp.isRunOnce = true; } /** * store strip size and strip active size in vars * do after all strip size change */ function storeStripSize(size){ g_sizes.stripSize = size; if(g_isVertical == false) g_sizes.stripActiveSize = g_sizes.stripSize - g_options.strip_padding_left - g_options.strip_padding_right; else g_sizes.stripActiveSize = g_sizes.stripSize - g_options.strip_padding_top - g_options.strip_padding_bottom; if(g_sizes.stripActiveSize < 0) g_sizes.stripActiveSize = 0; } /** * init some size parameters, before size init and after position thumbs */ function initSizeParams(){ //set thumb outer size: var arrThumbs = g_objStripInner.children(".ug-thumb-wrapper"); var firstThumb = jQuery(arrThumbs[0]); var thumbsRealWidth = firstThumb.outerWidth(); var thumbsRealHeight = firstThumb.outerHeight(); var thumbs_options = g_thumbs.getOptions(); if(g_isVertical == false){ //horizontal g_sizes.thumbSize = thumbsRealWidth; if(thumbs_options.thumb_fixed_size == true){ g_sizes.thumbSecondSize = thumbsRealHeight; } else { g_sizes.thumbSecondSize = thumbs_options.thumb_height; } storeStripSize(g_objStrip.width()); g_sizes.stripInnerSize = g_objStripInner.width(); }else{ //vertical g_sizes.thumbSize = thumbsRealHeight; if(thumbs_options.thumb_fixed_size == true){ g_sizes.thumbSecondSize = thumbsRealWidth; } else { g_sizes.thumbSecondSize = thumbs_options.thumb_width; } storeStripSize(g_objStrip.height()); g_sizes.stripInnerSize = g_objStripInner.height(); } } /** * set size of inner strip according the orientation */ function setInnerStripSize(innerSize){ if(g_isVertical == false) g_objStripInner.width(innerSize); else g_objStripInner.height(innerSize); g_sizes.stripInnerSize = innerSize; checkControlsEnableDisable(); jQuery(t).trigger(t.events.INNER_SIZE_CHANGE); } /** * position thumbnails in the thumbs panel */ function positionThumbs(){ var arrThumbs = g_objStripInner.children(".ug-thumb-wrapper"); var posx = 0; var posy = 0; if(g_isVertical == false) posy = g_options.strip_padding_top; for (i = 0; i < arrThumbs.length; i++) { var objThumb = jQuery(arrThumbs[i]); //skip from placing if not loaded yet on non fixed mode if(g_temp.isNotFixedThumbs == true){ objItem = g_thumbs.getItemByThumb(objThumb); if(objItem.isLoaded == false) continue; //the thumb is hidden if not placed objThumb.show(); } g_functions.placeElement(objThumb, posx, posy); if(g_isVertical == false) posx += objThumb.outerWidth() + g_options.strip_space_between_thumbs; else posy += objThumb.outerHeight() + g_options.strip_space_between_thumbs; } //set strip size, width or height if(g_isVertical == false) var innerStripSize = posx - g_options.strip_space_between_thumbs; else var innerStripSize = posy - g_options.strip_space_between_thumbs; setInnerStripSize(innerStripSize); } /** * fix strip and inner size */ function fixSize(){ if(g_isVertical == false){ //fix horizontal var height = g_sizes.thumbSecondSize; var objCssStrip = {}; objCssStrip["height"] = height+"px"; //set inner strip params var objCssInner = {}; objCssInner["height"] = height+"px"; }else{ //fix vertical var width = g_sizes.thumbSecondSize; var objCssStrip = {}; objCssStrip["width"] = width+"px"; //set inner strip params var objCssInner = {}; objCssInner["width"] = width+"px"; } g_objStrip.css(objCssStrip); g_objStripInner.css(objCssInner); } /** * scroll by some number * . */ function scrollBy(scrollStep){ var innerPos = t.getInnerStripPos(); var finalPos = innerPos + scrollStep; finalPos = t.fixInnerStripLimits(finalPos); t.positionInnerStrip(finalPos, true); } /** * scroll to thumb from min. (left or top) position */ function scrollToThumbMin(objThumb){ var objThumbPos = getThumbPos(objThumb); var scrollPos = objThumbPos.min * -1; scrollPos = t.fixInnerStripLimits(scrollPos); t.positionInnerStrip(scrollPos, true); } /** * scroll to thumb from max. (right or bottom) position */ function scrollToThumbMax(objThumb){ var objThumbPos = getThumbPos(objThumb); var scrollPos = objThumbPos.max * -1 + g_sizes.stripSize; scrollPos = t.fixInnerStripLimits(scrollPos); t.positionInnerStrip(scrollPos, true); } /** * scroll to some thumbnail */ function scrollToThumb(objThumb){ if(isStripMovingEnabled() == false) return(false); var objBounds = getThumbsInsideBounds(); var objThumbPos = getThumbPos(objThumb); if(objThumbPos.min < objBounds.minPosThumbs){ var prevThumb = objThumb.prev(); if(prevThumb.length) scrollToThumbMin(prevThumb); else scrollToThumbMin(objThumb); }else if(objThumbPos.max > objBounds.maxPosThumbs){ var nextThumb = objThumb.next(); if(nextThumb.length) scrollToThumbMax(nextThumb); else scrollToThumbMax(objThumb); } } /** * scroll to selected thumb */ function scrollToSelectedThumb(){ var selectedItem = g_gallery.getSelectedItem(); if(selectedItem == null) return(true); var objThumb = selectedItem.objThumbWrapper; if(objThumb) scrollToThumb(objThumb); } /** * check that the inner strip off the limits position, and reposition it if there is a need */ function checkAndRepositionInnerStrip(){ if(isStripMovingEnabled() == false) return(false); var pos = t.getInnerStripPos(); var posFixed = t.fixInnerStripLimits(pos); if(pos != posFixed) t.positionInnerStrip(posFixed, true); } /** * enable / disable controls according inner width (move enabled). */ function checkControlsEnableDisable(){ var isMovingEndbled = isStripMovingEnabled(); if(isMovingEndbled == true){ if(g_aviaControl) g_aviaControl.enable(); if(g_touchThumbsControl) g_touchThumbsControl.enable(); }else{ if(g_aviaControl) g_aviaControl.disable(); if(g_touchThumbsControl) g_touchThumbsControl.disable(); } } /** * align inner strip according the options */ function alignInnerStrip(){ if(isStripMovingEnabled()) return(false); if(g_isVertical == false) g_functions.placeElement(g_objStripInner, g_options.strip_thumbs_align, 0); else g_functions.placeElement(g_objStripInner, 0, g_options.strip_thumbs_align); } function ___________EVENTS___________(){}; /** * on thumb click event. Select the thumb */ function onThumbClick(objThumb){ //cancel click event only if passed significant movement if(t.isTouchMotionActive()){ var isSignificantPassed = g_touchThumbsControl.isSignificantPassed(); if(isSignificantPassed == true) return(true); } //run select item operation var objItem = g_thumbs.getItemByThumb(objThumb); g_gallery.selectItem(objItem); } /** * on some thumb placed, run the resize, but with time passed */ function onThumbPlaced(){ clearTimeout(g_temp.handle); g_temp.handle = setTimeout(function(){ positionThumbs(); },50); } /** * on item change */ function onItemChange(){ var objItem = g_gallery.getSelectedItem(); g_thumbs.setThumbSelected(objItem.objThumbWrapper); scrollToThumb(objItem.objThumbWrapper); } /** * init panel events */ function initEvents(){ g_thumbs.initEvents(); var objThumbs = g_objStrip.find(".ug-thumb-wrapper"); objThumbs.on("click touchend", function(event){ var clickedThumb = jQuery(this); onThumbClick(clickedThumb); }); //on item change, make the thumb selected g_objGallery.on(g_gallery.events.ITEM_CHANGE, onItemChange); //position thumbs after each load on non fixed mode if(g_temp.isNotFixedThumbs){ jQuery(g_thumbs).on(g_thumbs.events.AFTERPLACEIMAGE, onThumbPlaced); } } /** * destroy the strip panel events */ this.destroy = function(){ var objThumbs = g_objStrip.find(".ug-thumb-wrapper"); objThumbs.off("click"); objThumbs.off("touchend"); g_objGallery.off(g_gallery.events.ITEM_CHANGE); jQuery(g_thumbs).off(g_thumbs.events.AFTERPLACEIMAGE); if(g_touchThumbsControl) g_touchThumbsControl.destroy(); if(g_aviaControl) g_aviaControl.destroy(); g_thumbs.destroy(); } function ____________GETTERS___________(){}; /** * check if the inner width is more then strip width */ function isStripMovingEnabled(){ if(g_sizes.stripInnerSize > g_sizes.stripActiveSize) return(true); else return(false); } /** * get bounds, if the thumb not in them, it need to be scrolled * minPosThumbs, maxPosThumbs - the min and max position that the thumbs should be located to be visible */ function getThumbsInsideBounds(){ var obj = {}; var innerPos = t.getInnerStripPos(); //the 1 is gap that avoid exact bounds obj.minPosThumbs = innerPos * -1 + 1; obj.maxPosThumbs = innerPos * -1 + g_sizes.stripSize - 1; return(obj); } /** * get thumb position according the orientation in the inner strip */ function getThumbPos(objThumb){ var objReturn = {}; var objPos = objThumb.position(); if(g_isVertical == false){ objReturn.min = objPos.left; objReturn.max = objPos.left + g_sizes.thumbSize; }else{ objReturn.min = objPos.top; objReturn.max = objPos.top + g_sizes.thumbSize; } return(objReturn); } this.________EXTERNAL_GENERAL___________ = function(){}; /** * init function for avia controls */ this.init = function(gallery, customOptions){ initStrip(gallery, customOptions); } /** * set html and properties */ this.run = function(){ runStrip(); } /** * position inner strip on some pos according the orientation */ this.positionInnerStrip = function(pos, isAnimate){ if(isAnimate === undefined) var isAnimate = false; if(g_isVertical == false) var objPosition = {"left": pos + "px"}; else var objPosition = {"top": pos + "px"}; if(isAnimate == false){ //normal position g_objStripInner.css(objPosition); t.triggerStripMoveEvent(); } else{ //position with animation t.triggerStripMoveEvent(); g_objStripInner.stop(true).animate(objPosition ,{ duration: g_options.strip_scroll_to_thumb_duration, easing: g_options.strip_scroll_to_thumb_easing, queue: false, progress:function(){t.triggerStripMoveEvent()}, always: function(){t.triggerStripMoveEvent()} }); } } /** * trigger event - on strip move */ this.triggerStripMoveEvent = function(){ //trigger onstripmove event jQuery(t).trigger(t.events.STRIP_MOVE); } /** * return true if the touch animation or dragging is active */ this.isTouchMotionActive = function(){ if(!g_touchThumbsControl) return(false); var isActive = g_touchThumbsControl.isTouchActive(); return(isActive); } /** * check if thmb item visible, means inside the visible part of the inner strip */ this.isItemThumbVisible = function(objItem){ var objThumb = objItem.objThumbWrapper; var thumbPos = objThumb.position(); var posMin = t.getInnerStripPos() * -1; if(g_isVertical == false){ var posMax = posMin + g_sizes.stripSize; var thumbPosMin = thumbPos.left; var thumbPosMax = thumbPos.left + objThumb.width(); }else{ var posMax = posMin + g_sizes.stripSize; var thumbPosMin = thumbPos.top; var thumbPosMax = thumbPos.top + objThumb.height(); } var isVisible = false; if(thumbPosMax >= posMin && thumbPosMin <= posMax) isVisible = true; return(isVisible); } /** * get inner strip position according the orientation */ this.getInnerStripPos = function(){ if(g_isVertical == false) return g_objStripInner.position().left; else return g_objStripInner.position().top; } /** * get inner strip limits */ this.getInnerStripLimits = function(){ var output = {}; if(g_isVertical == false) output.maxPos = g_options.strip_padding_left; else output.maxPos = g_options.strip_padding_top; //debugLine(g_sizes.stripActiveSize); output.minPos = -(g_sizes.stripInnerSize - g_sizes.stripActiveSize); return(output); } /** * fix inner position by check boundaries limit */ this.fixInnerStripLimits = function(distPos){ var minPos; var objLimits = t.getInnerStripLimits(); if(distPos > objLimits.maxPos) distPos = objLimits.maxPos; if(distPos < objLimits.minPos) distPos = objLimits.minPos; return(distPos); } /** * scroll left or down */ this.scrollForeward = function(){ scrollBy(-g_sizes.stripSize); } /** * scroll left or down */ this.scrollBack = function(){ scrollBy(g_sizes.stripSize); } this.________EXTERNAL_SETTERS___________ = function(){}; /** * set the options of the strip */ this.setOptions = function(objOptions){ g_options = jQuery.extend(g_options, objOptions); g_thumbs.setOptions(objOptions); onAfterSetOptions(); } /** * set size of the strip * the height size is set automatically from options */ this.setSizeVertical = function(height){ if(g_isVertical == false){ throw new Error("setSizeVertical error, the strip size is not vertical"); return(false); } var width = g_sizes.thumbSecondSize; var objCssStrip = {}; objCssStrip["width"] = width+"px"; objCssStrip["height"] = height+"px"; g_objStrip.css(objCssStrip); storeStripSize(height); //set inner strip params var objCssInner = {}; objCssInner["width"] = width+"px"; objCssInner["left"] = "0px"; objCssInner["top"] = "0px"; g_objStripInner.css(objCssInner); g_temp.is_placed = true; checkControlsEnableDisable(); } /** * set size of the strip * the height size is set automatically from options */ this.setSizeHorizontal = function(width){ if(g_isVertical == true){ throw new Error("setSizeHorizontal error, the strip size is not horizontal"); return(false); } var height = g_sizes.thumbSecondSize + g_options.strip_padding_top + g_options.strip_padding_bottom; var objCssStrip = {}; objCssStrip["width"] = width+"px"; objCssStrip["height"] = height+"px"; g_objStrip.css(objCssStrip); storeStripSize(width); var innerLeft = g_options.strip_padding_left; //set inner strip params var objCssInner = {}; objCssInner["height"] = height+"px"; objCssInner["left"] = innerLeft + "px"; objCssInner["top"] = "0px"; g_objStripInner.css(objCssInner); g_temp.is_placed = true; checkControlsEnableDisable(); } /** * set position of the strip */ this.setPosition = function(left, top, offsetLeft, offsetTop){ g_functions.placeElement(g_objStrip, left, top, offsetLeft, offsetTop); } /** * resize the panel according the orientation */ this.resize = function(newSize){ if(g_isVertical == false){ g_objStrip.width(newSize); g_sizes.stripActiveSize = newSize - g_options.strip_padding_left - g_options.strip_padding_right; }else{ g_objStrip.height(newSize); g_sizes.stripActiveSize = newSize - g_options.strip_padding_top - g_options.strip_padding_bottom; } storeStripSize(newSize); checkControlsEnableDisable(); checkAndRepositionInnerStrip(); alignInnerStrip(); scrollToSelectedThumb(); } /** * set the thumb unselected state */ this.setThumbUnselected = function(objThumbWrapper){ g_thumbs.setThumbUnselected(objThumbWrapper); } /** * set custom thumbs */ this.setCustomThumbs = function(funcSetHtml){ g_thumbs.setCustomThumbs(funcSetHtml); } this.________EXTERNAL_GETTERS___________ = function(){}; /** * get objects */ this.getObjects = function(){ var thumbsOptions = g_thumbs.getOptions(); var commonOpitions = jQuery.extend(g_options, thumbsOptions); var obj = { g_gallery: g_gallery, g_objGallery: g_objGallery, g_objWrapper:g_objWrapper, g_arrItems:g_arrItems, g_objStrip : g_objStrip, g_objStripInner : g_objStripInner, g_aviaControl:g_aviaControl, g_touchThumbsControl:g_touchThumbsControl, isVertical: g_isVertical, g_options: commonOpitions, g_thumbs: g_thumbs }; return(obj); } /** * get thumbs onject */ this.getObjThumbs = function(){ return(g_thumbs); } /** * get selected thumb */ this.getSelectedThumb = function(){ var selectedIndex = g_gallery.getSelectedItemIndex(); if(selectedIndex == -1) return(null); return g_thumbs.getThumbByIndex(selectedIndex); } /** * get strip size and position object */ this.getSizeAndPosition = function(){ var obj = g_functions.getElementSize(g_objStrip); return(obj); } /** * get thumbs strip height */ this.getHeight = function(){ var stripHeight = g_objStrip.outerHeight(); return(stripHeight) } /** * get thumbs strip width */ this.getWidth = function(){ var stripWidth = g_objStrip.outerWidth(); return(stripWidth); } /** * get all stored sizes object */ this.getSizes = function(){ return(g_sizes); } /** * return if vertical orientation or not */ this.isVertical = function(){ return(g_isVertical); } /** * return if the strip is placed or not */ this.isPlaced = function(){ return(g_temp.is_placed); } /** * return if the strip moving enabled or not */ this.isMoveEnabled = function(){ var isEnabled = isStripMovingEnabled(); return(isEnabled); } }