|
|
| Line 24: |
Line 24: |
| | | | |
| | | | |
| − | <script type="text/javascript">var rowcol_arranger = {}; | + | <script type="text/javascript" src="//xprs.imcreator.com/all_js.js?v=1.4.1a"></script> |
| − | | + | |
| − | rowcol_arranger.init = function(container,items,whatsNext){
| + | |
| − | SpimeEngine.DebugPrint("rowcol arranger init for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * HANDLING THE ELEMENTS
| + | |
| − | ********************************************************************/
| + | |
| − | var elements = items.not(".element-box").first().siblings(".element-box");
| + | |
| − | elements.remove();
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * HANDLING THE ITEMS
| + | |
| − | ********************************************************************/
| + | |
| − | var itemsHolder = container.find("#items-holder");
| + | |
| − | var itemsHolderWrapper = container.find("#items-holder-wrapper");
| + | |
| − | //backward compatibility
| + | |
| − | if (itemsHolder.length == 0){
| + | |
| − | items = container.find(".sub.item-box");
| + | |
| − | itemsHolder = $("<div id='items-holder' />");
| + | |
| − | itemsHolderWrapper = $("<div id='items-holder-wrapper' />");
| + | |
| − | itemsHolder.append(items);
| + | |
| − | itemsHolderWrapper.append(itemsHolder);
| + | |
| − | container.find("#children").append(itemsHolderWrapper);
| + | |
| − | }
| + | |
| − |
| + | |
| − | var pagHolder = container.find("#pagination-holder");
| + | |
| − | if (pagHolder.length == 0){
| + | |
| − | rowcol_arranger.initPaginationHolder(container);
| + | |
| − | }
| + | |
| − |
| + | |
| − | if (typeof whatsNext != "undefined"){
| + | |
| − | whatsNext();
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | rowcol_arranger.arrange = function(items,container,whatsNext){
| + | |
| − | SpimeEngine.DebugPrint("rowcol arranger arrange for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * HANDLING THE ELEMENTS
| + | |
| − | ********************************************************************/
| + | |
| − | //var elementsHolder = container.find("#elements-holder");
| + | |
| − | var itemsHolder = container.find("#items-holder");
| + | |
| − | items = itemsHolder.children();
| + | |
| − | var calculatedElementsHeight = 0;
| + | |
| − |
| + | |
| − | var stripe = container.closest(".master.item-box");
| + | |
| − | stripe.css("min-height","initial");
| + | |
| − | var stripeType = stripe.attr("data-preset-type-id");
| + | |
| − | var isFeatures = XPRSHelper.inPresetGroup(stripeType,"FEATURES");
| + | |
| − | | + | |
| − | | + | |
| − | /******************************************************************
| + | |
| − | * LOADING ARRANGER SETTINGS
| + | |
| − | ********************************************************************/
| + | |
| − |
| + | |
| − | var settings = container.closest(".item-wrapper").find(".arranger-settings");
| + | |
| − | var ratio = parseFloat(settings.attr('data-arranger_item_ratio')) ;
| + | |
| − | var colsFromSettings = parseInt(settings.attr('data-arranger_cols'));
| + | |
| − | colsFromSettings = isFeatures ? items.length : colsFromSettings;
| + | |
| − | var itemsMargin = parseInt(settings.attr('data-arranger_item_spacing'));
| + | |
| − | var itemMinWidth = parseInt(settings.attr('data-arranger_item_min_width'));
| + | |
| − | var itemMaxWidth = parseInt(settings.attr('data-arranger_item_max_width'));
| + | |
| − | var itemsPerPage = settings.attr('data-arranger_items_per_page');
| + | |
| − | itemsPerPage = isFeatures ? items.length : itemsPerPage;
| + | |
| − | itemsPerPage = (itemsPerPage == "all") ? items.length : parseInt(itemsPerPage);
| + | |
| − |
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * DEFINE PARTICIPATING DIVS
| + | |
| − | ********************************************************************/
| + | |
| − | //ParentWrapper is the source for our max width
| + | |
| − | var parentWrapper = itemsHolder.closest(".gallery-wrapper");
| + | |
| − |
| + | |
| − | var forcedArrange = (typeof stripe.attr("data-forced-arrange") != "undefined");
| + | |
| − | var fromHeightResize = (typeof stripe.attr("data-height-resize") != "undefined");
| + | |
| − | var fromWidthResize = forcedArrange || (typeof stripe.attr("data-width-resize") != "undefined") || (typeof stripe.attr("data-arranger_cols-from-settings") != "undefined")|| (typeof stripe.attr("data-arranger_item_spacing-from-settings") != "undefined");
| + | |
| − | stripe.removeAttr("data-forced-arrange");
| + | |
| − | var paginationWrapper = container.find("#pagination-wrapper");
| + | |
| − | var paginationHeight = paginationWrapper.is(':visible') ? paginationWrapper.outerHeight(true) : 0;
| + | |
| − | //var stripeHeight = stripe.height() - calculatedElementsHeight - paginationHeight;//- parseInt(stripe.css("padding-top")) - parseInt(stripe.css("padding-bottom"));
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * START CALCULATIONS WITH ITEM MIN WIDTH AND HEIGHT * RATIO AND COLS AS THE NUMBER OF ITEMS
| + | |
| − | ********************************************************************/
| + | |
| − | var percentagePaddingFix = 0;
| + | |
| − | if (parseInt(stripe.css("padding-left")) > 0){
| + | |
| − | percentagePaddingFix = 1;
| + | |
| − | }
| + | |
| − | var wrapperWidth = parentWrapper.width() - percentagePaddingFix;
| + | |
| − | //Min width can not be larger than screen or the max item width
| + | |
| − | itemMinWidth = Math.min(itemMinWidth,itemMaxWidth);
| + | |
| − | itemMinWidth = Math.min(itemMinWidth,wrapperWidth);
| + | |
| − | items.find(".preview-content-holder").css("min-height","");
| + | |
| − |
| + | |
| − | var cols = Math.floor((wrapperWidth + itemsMargin*2) / (itemMinWidth + itemsMargin*2));
| + | |
| − | cols = Math.min(colsFromSettings,cols);
| + | |
| − | if (fromWidthResize){
| + | |
| − | var wrapperWidthForTest = wrapperWidth - colsFromSettings*itemsMargin*2 + itemsMargin*2;
| + | |
| − | itemMinWidth = Math.floor(wrapperWidthForTest / colsFromSettings);
| + | |
| − | itemMinWidth = Math.min(itemMinWidth,itemMaxWidth);
| + | |
| − | itemMinWidth *= 0.7;
| + | |
| − | cols = colsFromSettings;
| + | |
| − | }
| + | |
| − | //cols must be at least 1
| + | |
| − | cols = Math.max(cols,1);
| + | |
| − |
| + | |
| − | if (cols == 2 && colsFromSettings != 2 && items.length == 3){
| + | |
| − | cols = 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | if (cols == 3 && items.length == 4 && colsFromSettings != 3){
| + | |
| − | cols = 2;
| + | |
| − | }
| + | |
| − | if (cols == 5 && items.length == 6 && colsFromSettings != 5){
| + | |
| − | cols = 3;
| + | |
| − | }
| + | |
| − |
| + | |
| − | //The total number of rows we have
| + | |
| − | var rows = Math.ceil(items.length / cols);
| + | |
| − | //Restoring items defaults (if change during previous arrange)
| + | |
| − | items.show();
| + | |
| − | items.css({"clear":""});
| + | |
| − | var itemRow = 0;
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * BREAK THE ITEMS ACCORDING TO CALCULATED COLS AND GIVE EACH ONE ROW IDENTIFIER
| + | |
| − | ********************************************************************/
| + | |
| − |
| + | |
| − | var maxContentHeight = 0;
| + | |
| − | items.removeClass("top-side").removeClass("bottom-side").removeClass("left-side").removeClass("right-side");;
| + | |
| − | items.each(function(idx){
| + | |
| − | if (idx % cols == 0){
| + | |
| − | $(this).css({"clear":"left"});
| + | |
| − | $(this).addClass("left-side");
| + | |
| − | itemRow++;
| + | |
| − | }
| + | |
| − | if (idx % cols == cols-1){
| + | |
| − | $(this).addClass("right-side");
| + | |
| − | }
| + | |
| − | if (itemRow == 1){
| + | |
| − | $(this).addClass("top-side");
| + | |
| − | }
| + | |
| − | if (itemRow == rows){
| + | |
| − | $(this).addClass("bottom-side");
| + | |
| − | }
| + | |
| − | $(this).attr("data-row",itemRow);
| + | |
| − | maxContentHeight = Math.max(maxContentHeight,$(this).find(".preview-content-holder").height());
| + | |
| − | });
| + | |
| − | //maxContentHeight = Math.max(itemsHolder.height(),maxContentHeight);
| + | |
| − |
| + | |
| − |
| + | |
| − | //if we have more space we enlarge the items
| + | |
| − | var extraSpace = Math.floor( (wrapperWidth - (cols*itemMinWidth) - (cols*itemsMargin*2) + (itemsMargin*2) ) /cols );
| + | |
| − | var calculatedItemWidth = Math.floor(itemMinWidth + extraSpace);//Math.round((wrapperWidth)/cols) - ((cols-1)*(itemsMargin*2));
| + | |
| − | calculatedItemWidth = Math.min(calculatedItemWidth,itemMaxWidth);
| + | |
| − |
| + | |
| − | setTimeout(function(){
| + | |
| − | if (wrapperWidth - parentWrapper.width() > 3){
| + | |
| − | extraSpace = Math.floor( (parentWrapper.width() - (cols*itemMinWidth) - (cols*itemsMargin*2) + (itemsMargin*2) ) /cols );
| + | |
| − | calculatedItemWidth = Math.floor(itemMinWidth + extraSpace);//Math.round((wrapperWidth)/cols) - ((cols-1)*(itemsMargin*2));
| + | |
| − | calculatedItemWidth = Math.min(calculatedItemWidth,itemMaxWidth);
| + | |
| − | items.width(calculatedItemWidth);
| + | |
| − | }
| + | |
| − | },10);
| + | |
| − |
| + | |
| − | if (fromWidthResize){
| + | |
| − | //calculatedItemWidth = itemMinWidth;
| + | |
| − | settings.attr('data-arranger_item_min_width',itemMinWidth);
| + | |
| − | stripe.attr("data-items-min-width",itemMinWidth);
| + | |
| − | }
| + | |
| − | | + | |
| − | /******************************************************************
| + | |
| − | * CHANGE ITEMS WIDTH HEIGHT AND SPACING ACCORDING TO CALCULATIONS
| + | |
| − | ********************************************************************/
| + | |
| − | items.width(calculatedItemWidth).css({"margin":itemsMargin});
| + | |
| − | items.filter(".top-side").css("margin-top",itemsMargin*2);
| + | |
| − | items.filter(".bottom-side").css("margin-bottom",itemsMargin*2);
| + | |
| − | items.filter(".left-side").css("margin-left",0);
| + | |
| − | items.filter(".right-side").css("margin-right",0);
| + | |
| − |
| + | |
| − | | + | |
| − | itemsHolder.css({"width":"100%","text-align":""});
| + | |
| − |
| + | |
| − | items.slice(itemsPerPage,items.length).hide();
| + | |
| − |
| + | |
| − | if (fromHeightResize && isFeatures){
| + | |
| − | ratio = (stripe.height() - itemsMargin*4) / calculatedItemWidth;
| + | |
| − | stripe.attr("data-item-ratio",ratio.toFixed(2));
| + | |
| − | settings.attr('data-arranger_item_ratio',ratio);
| + | |
| − | }
| + | |
| − | var calculatedItemHeight = calculatedItemWidth*ratio;
| + | |
| − | items.css({"min-height":calculatedItemHeight});
| + | |
| − | items.find(".item-wrapper").css({"min-height":calculatedItemHeight});
| + | |
| − |
| + | |
| − |
| + | |
| − | items.each(function(idx){
| + | |
| − | maxContentHeight = Math.max(maxContentHeight,$(this).find(".preview-content-holder").height());
| + | |
| − | });
| + | |
| − | //if (items.find(".helper-div.top-center").length == 0){
| + | |
| − | if (items.find(".helper-div.middle-center,.helper-div.bottom-right,.helper-div.bottom-left,.helper-div.top-left,.helper-div.top-right").length == 0){
| + | |
| − | items.find(".preview-content-holder").css("min-height",maxContentHeight);
| + | |
| − | }else{
| + | |
| − | //items.find(".vertical-aligner").css("min-height",maxContentHeight);
| + | |
| − | }
| + | |
| − | //}else{
| + | |
| − | // items.find(".text-side .vertical-aligner").css("min-height",maxContentHeight);
| + | |
| − | //}
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * HANDLE PAGINATION
| + | |
| − | ********************************************************************/
| + | |
| − | // If we need pagination (not all items fit the given height)
| + | |
| − | var inMoreMode = (typeof stripe.attr("data-more-clicked") != "undefined");
| + | |
| − | if (itemsPerPage < items.length ){
| + | |
| − | if (inMoreMode){
| + | |
| − | paginationWrapper.hide();
| + | |
| − | items.show();
| + | |
| − | }else{
| + | |
| − | paginationWrapper.show();
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | //Hide paginator
| + | |
| − | paginationWrapper.hide();
| + | |
| − | }
| + | |
| − |
| + | |
| − |
| + | |
| − | extraSpace = Math.floor( (wrapperWidth - (cols*itemMaxWidth) - (cols*itemsMargin*2) + (itemsMargin*2) ) /cols );
| + | |
| − | if(calculatedItemWidth == itemMaxWidth && extraSpace > 0){
| + | |
| − | itemsHolder.css("text-align","center");
| + | |
| − | var currentRowWidth = (itemMaxWidth * cols) + (cols*itemsMargin*2) - itemsMargin*2;
| + | |
| − | itemsHolder.width(currentRowWidth);
| + | |
| − | }else{
| + | |
| − | itemsHolder.css("width","");
| + | |
| − | }
| + | |
| − | | + | |
| − | if (typeof whatsNext != "undefined"){
| + | |
| − | var originalItemMinWidth = parseInt(settings.attr('data-arranger_item_min_width'));
| + | |
| − | var actualItemMinWidth = itemMinWidth;
| + | |
| − | if (actualItemMinWidth != originalItemMinWidth){
| + | |
| − | stripe.attr("data-items-min-width",actualItemMinWidth);
| + | |
| − | }
| + | |
| − | whatsNext();
| + | |
| − | }
| + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | rowcol_arranger.showMore = function(stripe){
| + | |
| − |
| + | |
| − | var itemsHolder = stripe.find("#items-holder");
| + | |
| − | var items = itemsHolder.children();
| + | |
| − | var paginationWrapper = stripe.find("#pagination-wrapper");
| + | |
| − | paginationWrapper.hide();
| + | |
| − | var itemsWrapper = stripe.find("#items-holder-wrapper");
| + | |
| − | var topMargin = parseInt(itemsWrapper.css("margin-top"));
| + | |
| − | itemsWrapper.css("margin-bottom",topMargin);
| + | |
| − | items.show();
| + | |
| − | SpimeEngine.fitVideos(stripe);
| + | |
| − | stripe.attr("data-more-clicked","true");
| + | |
| − | };
| + | |
| − | | + | |
| − | rowcol_arranger.showLess = function(stripe){
| + | |
| − | var itemsHolder = stripe.find("#items-holder");
| + | |
| − | var items = itemsHolder.children();
| + | |
| − | var paginationWrapper = stripe.find("#pagination-wrapper");
| + | |
| − | var itemsWrapper = stripe.find("#items-holder-wrapper");
| + | |
| − | //var topMargin = parseInt(itemsWrapper.css("margin-top"));
| + | |
| − | itemsWrapper.css("margin-bottom","");
| + | |
| − | var itemsToShow = parseInt(stripe.attr("data-items-to-show"));
| + | |
| − | if (itemsToShow < items.length){
| + | |
| − | paginationWrapper.show();
| + | |
| − | }
| + | |
| − | items.hide();
| + | |
| − | items.slice(0,itemsToShow).show();
| + | |
| − | stripe.removeAttr("data-more-clicked");
| + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | rowcol_arranger.initPaginationHolder = function(container){
| + | |
| − | var paginationBtn = $("<div id='pagination-btn' />");
| + | |
| − | paginationBtn.text("More");
| + | |
| − | var paginationHolder = $("<div id='pagination-holder' />").addClass("magic-circle-holder").attr("data-menu-name","PAGINATION_SETTINGS");
| + | |
| − | var paginationHolderWrapper = $("<div id='pagination-wrapper' class='layer5' />");
| + | |
| − | paginationHolder.append(paginationBtn);
| + | |
| − | paginationHolderWrapper.append(paginationHolder);
| + | |
| − | container.find("#children").append(paginationHolderWrapper);
| + | |
| − | paginationHolder.unbind("click").bind("click",function(e){
| + | |
| − | e.stopPropagation();
| + | |
| − | var stripe = container.closest(".master.item-box");
| + | |
| − | rowcol_arranger.showMore(stripe);
| + | |
| − | });
| + | |
| − | };; var bottom_layout = {};
| + | |
| − | | + | |
| − | bottom_layout.init = function(container,items){
| + | |
| − | SpimeEngine.DebugPrint("bottom layout init for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − | // var originalFontSize = Math.round(parseInt(items.find(".preview-title").css("font-size")));
| + | |
| − | // items.find(".preview-title").attr("data-orig-font-size",originalFontSize);
| + | |
| − | };
| + | |
| − | | + | |
| − | bottom_layout.applyLayout = function(container,items,paramsFromRealTime){
| + | |
| − | var maxContentHeight = 0;
| + | |
| − | var calculatedItemHeight = 0;
| + | |
| − | var innerMaxHeight = 0;
| + | |
| − | items.find(".image-cover").css("height","");
| + | |
| − | items.find(".preview-content-holder").css("min-height","");
| + | |
| − | items.filter(":visible").each(function(){
| + | |
| − | var currentItem = $(this);
| + | |
| − | if ( typeof currentItem.attr("data-height-from-arranger") != "undefined"){
| + | |
| − | calculatedItemHeight = parseInt(currentItem.attr("data-height-from-arranger"));
| + | |
| − | }else{
| + | |
| − | calculatedItemHeight = Math.max(currentItem.height(),calculatedItemHeight);
| + | |
| − | }
| + | |
| − |
| + | |
| − | var contentHolder = currentItem.find(".preview-content-holder");
| + | |
| − | var contentHeight = contentHolder.outerHeight(true);
| + | |
| − | maxContentHeight = Math.max(contentHeight,maxContentHeight);
| + | |
| − | innerMaxHeight = Math.max(innerMaxHeight,$(this).find(".item-details").outerHeight());
| + | |
| − | });
| + | |
| − | var newImageHeight = calculatedItemHeight - maxContentHeight;
| + | |
| − | items.each(function(){
| + | |
| − | var currentItem = $(this);
| + | |
| − | currentItem.find(".image-cover").css("height",newImageHeight);
| + | |
| − |
| + | |
| − | $(this).find(".preview-content-holder").css("min-height",maxContentHeight);
| + | |
| − | // var textElement = currentItem.find(".preview-title");
| + | |
| − | // var contentHolder = currentItem.find(".preview-content-holder");
| + | |
| − | // var contentWrapper = currentItem.find(".preview-content-wrapper");
| + | |
| − | // var originalFontSize = parseInt(textElement.attr("data-orig-font-size"));
| + | |
| − | // textElement.css("font-size",originalFontSize);
| + | |
| − | // if (contentHolder.outerWidth(true) > contentWrapper.width()){
| + | |
| − | // var newFontSize = SpimeEngine.shrinkTextToFit(originalFontSize,contentWrapper,contentHolder,textElement,0,30);
| + | |
| − | // textElement.css("font-size",newFontSize);
| + | |
| − | // }
| + | |
| − | });
| + | |
| − | };; var dual_layout = {};
| + | |
| − | | + | |
| − | dual_layout.init = function(container,items){
| + | |
| − | SpimeEngine.DebugPrint("dual layout init for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − | var originalFontSize = Math.round(parseInt(items.find(".preview-title").css("font-size")));
| + | |
| − | items.find(".preview-title").attr("original-font-size",originalFontSize);
| + | |
| − | items.each(function(){
| + | |
| − | var previewContentHolder = $(this).find(".preview-content-holder");
| + | |
| − | var originalMaxWidth = parseInt(previewContentHolder.css("max-width"));
| + | |
| − | previewContentHolder.attr("data-orig-max-width", originalMaxWidth)
| + | |
| − |
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | dual_layout.applyLayout = function(container,items){
| + | |
| − | SpimeEngine.DebugPrint("dual layout applyLayout for ");
| + | |
| − | //TODO: width for flip should be set in the layout settings
| + | |
| − | if (container.width() < 500){
| + | |
| − | items.each(function(){
| + | |
| − | dual_layout.flipVertically($(this));
| + | |
| − | });
| + | |
| − | }else{
| + | |
| − | items.each(function(){
| + | |
| − | dual_layout.unflip($(this));
| + | |
| − | });
| + | |
| − | }
| + | |
| − |
| + | |
| − | items.each(function(){
| + | |
| − | var previewContentHolder = $(this).find(".preview-content-holder");
| + | |
| − | var margins = parseInt(previewContentHolder.css("margin-left")) + parseInt(previewContentHolder.css("margin-right")) + parseInt(previewContentHolder.css("padding-left")) + parseInt(previewContentHolder.css("padding-right"))
| + | |
| − | var previewContentWrapper = $(this).find(".item-content ");
| + | |
| − | //console.log("--------------------------- > " + previewContentWrapper.width())
| + | |
| − | var maxWidthVal = (previewContentWrapper.width() / 2) - margins;
| + | |
| − | var originalMaxWith = previewContentHolder.attr("data-orig-max-width");
| + | |
| − | maxWidthVal = Math.min(maxWidthVal,originalMaxWith)
| + | |
| − | previewContentHolder.css("max-width",maxWidthVal)
| + | |
| − |
| + | |
| − | });
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | // var originalFontSize = parseInt(items.find(".preview-title").attr("original-font-size"));
| + | |
| − | // var shrinkPlease = true;
| + | |
| − | // if (typeof paramsFromRealTime != "undefined" ){
| + | |
| − | // if (typeof paramsFromRealTime.value != "undefined"){
| + | |
| − | // originalFontSize = parseInt(paramsFromRealTime.value);
| + | |
| − | // items.find(".preview-title").attr("original-font-size",originalFontSize);
| + | |
| − | // shrinkPlease = false;
| + | |
| − | //
| + | |
| − | // }
| + | |
| − | // }
| + | |
| − | // if (shrinkPlease){
| + | |
| − | // items.find(".preview-title").css("font-size",originalFontSize)
| + | |
| − | // var minFontSize = 9999;
| + | |
| − | // items.each(function(){
| + | |
| − | // var itemDetails = $(this).find(".item-details")//.outerHeight(true);
| + | |
| − | // var stripe = itemDetails.closest(".item-wrapper")//.outerHeight(true);
| + | |
| − | // minFontSize = Math.min(minFontSize,dual_layout.shrinker(originalFontSize,itemDetails,$(this).find(".preview-title")));
| + | |
| − | // });
| + | |
| − | // items.each(function(){
| + | |
| − | // $(this).find(".helper-div").css("padding",$(this).css("padding"));
| + | |
| − | // $(this).find(".preview-title").css("font-size",minFontSize)
| + | |
| − | // });
| + | |
| − | // //items.find(".preview-title").css("font-size",minFontSize)
| + | |
| − | // }
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | dual_layout.flipVertically = function(item){
| + | |
| − | if (typeof item.attr("data-flipped") == "undefined"){
| + | |
| − | item.attr("data-flipped","true")
| + | |
| − | var helperDiv = item.find(".helper-div");
| + | |
| − | var itemPreview = helperDiv.children(".item-preview");
| + | |
| − | var itemDetails = helperDiv.children(".item-details");
| + | |
| − | var textWrapper = $("<div id='text-wrapper' />");
| + | |
| − | var imageWrapper = $("<div id='image-wrapper' />");
| + | |
| − | textWrapper.append(itemDetails);
| + | |
| − | imageWrapper.append(itemPreview);
| + | |
| − | helperDiv.append(textWrapper);
| + | |
| − | helperDiv.append(imageWrapper);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | dual_layout.unflip = function(item){
| + | |
| − | if (typeof item.attr("data-flipped") != "undefined"){
| + | |
| − | item.removeAttr("data-flipped","true")
| + | |
| − | var helperDiv = item.find(".helper-div");
| + | |
| − | var itemPreview = helperDiv.find(".item-preview");
| + | |
| − | var itemDetails = helperDiv.find(".item-details");
| + | |
| − | itemPreview.unwrap();
| + | |
| − | itemDetails.unwrap();
| + | |
| − | itemPreview.after(itemDetails);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | dual_layout.shrinker = function(fontSize,parent,content){
| + | |
| − | if (content.width() > parent.width()){
| + | |
| − | //console.log("shrink please")
| + | |
| − | var previewTitle = content.find(".preview-title");
| + | |
| − | var shrinkedFontSize = fontSize * 0.9 ;
| + | |
| − | if (shrinkedFontSize < 15){
| + | |
| − | //console.debug("cant SHRINK no more!");
| + | |
| − | }else{
| + | |
| − | content.find(".preview-title").css("font-size",shrinkedFontSize)
| + | |
| − | return dual_layout.shrinker(shrinkedFontSize,parent,content)
| + | |
| − | }
| + | |
| − |
| + | |
| − | }else{
| + | |
| − | //console.log("dont shrink")
| + | |
| − | return parseInt(content.find(".preview-title").css("font-size"));
| + | |
| − | }
| + | |
| − | }; var right_layout = {};
| + | |
| − | | + | |
| − | right_layout.init = function(container,items){
| + | |
| − | SpimeEngine.DebugPrint("right layout init for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − | //var originalFontSize = Math.round(parseInt(items.find(".preview-title").css("font-size")));
| + | |
| − | //items.find(".preview-title").attr("data-orig-font-size",originalFontSize);
| + | |
| − | items.each(function(){
| + | |
| − | var previewContentHolder = $(this).find(".preview-content-holder");
| + | |
| − | var originalMaxWidth = parseInt(previewContentHolder.css("max-width"));
| + | |
| − | previewContentHolder.attr("data-orig-max-width", originalMaxWidth);
| + | |
| − | });
| + | |
| − | };
| + | |
| − | | + | |
| − | right_layout.applyLayout = function(container,items,paramsFromRealTime){
| + | |
| − | SpimeEngine.DebugPrint("right layout applyLayout for ");
| + | |
| − | //TODO: width for flip should be set in the layout settings
| + | |
| − | if (container.width() < 500){
| + | |
| − | items.each(function(){
| + | |
| − | right_layout.flipVertically($(this));
| + | |
| − | });
| + | |
| − | }else{
| + | |
| − | items.each(function(){
| + | |
| − | right_layout.unflip($(this));
| + | |
| − | });
| + | |
| − | }
| + | |
| − |
| + | |
| − | items.each(function(){
| + | |
| − | var previewContentHolder = $(this).find(".preview-content-holder");
| + | |
| − | var margins = parseInt(previewContentHolder.css("margin-left")) + parseInt(previewContentHolder.css("margin-right")) + parseInt(previewContentHolder.css("padding-left")) + parseInt(previewContentHolder.css("padding-right"));
| + | |
| − | var previewContentWrapper = $(this).find(".item-content ");
| + | |
| − | var maxWidthVal = (previewContentWrapper.width() / 2) - margins;
| + | |
| − | var originalMaxWith = previewContentHolder.attr("data-orig-max-width");
| + | |
| − | maxWidthVal = Math.min(maxWidthVal,originalMaxWith);
| + | |
| − | //previewContentHolder.css("max-width",maxWidthVal)
| + | |
| − |
| + | |
| − | });
| + | |
| − |
| + | |
| − | items.each(function(idx){
| + | |
| − | var currentItem = $(this);
| + | |
| − | //var textElement = currentItem.find(".preview-title");
| + | |
| − | //var contentHolder = currentItem.find(".preview-content-holder");
| + | |
| − | var contentWrapper = currentItem.find(".preview-content-wrapper");
| + | |
| − | //var originalFontSize = parseInt(textElement.attr("data-orig-font-size"));
| + | |
| − | if (typeof currentItem.attr("data-flipped") != "undefined"){
| + | |
| − | contentWrapper.removeClass("shrinker-parent");
| + | |
| − | currentItem.find(".helper-div").addClass("shrinker-parent");
| + | |
| − | }else{
| + | |
| − | contentWrapper.addClass("shrinker-parent");
| + | |
| − | currentItem.find(".helper-div").removeClass("shrinker-parent");
| + | |
| − | }
| + | |
| − | //textElement.css("font-size",originalFontSize);
| + | |
| − | //if (contentHolder.outerWidth(true) > contentWrapper.width()){
| + | |
| − | // var newFontSize = SpimeEngine.shrinkTextToFit(originalFontSize,contentWrapper,contentHolder,textElement,0,30);
| + | |
| − | // textElement.css("font-size",newFontSize);
| + | |
| − | //}
| + | |
| − | });
| + | |
| − |
| + | |
| − |
| + | |
| − | | + | |
| − |
| + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | right_layout.flipVertically = function(item){
| + | |
| − | if (typeof item.attr("data-flipped") == "undefined"){
| + | |
| − | item.attr("data-flipped","true");
| + | |
| − | var helperDiv = item.find(".helper-div");
| + | |
| − | var itemPreview = helperDiv.children(".item-preview");
| + | |
| − | var itemDetails = helperDiv.children(".item-details");
| + | |
| − | var textWrapper = $("<div id='text-wrapper' />");
| + | |
| − | var imageWrapper = $("<div id='image-wrapper' class='preview image-cover' />");
| + | |
| − | textWrapper.append(itemDetails);
| + | |
| − | imageWrapper.append(itemPreview);
| + | |
| − | helperDiv.append(textWrapper);
| + | |
| − | helperDiv.append(imageWrapper);
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | right_layout.unflip = function(item){
| + | |
| − | if (typeof item.attr("data-flipped") != "undefined"){
| + | |
| − | item.removeAttr("data-flipped","true");
| + | |
| − | var helperDiv = item.find(".helper-div");
| + | |
| − | var itemPreview = helperDiv.find(".item-preview");
| + | |
| − | var itemDetails = helperDiv.find(".item-details");
| + | |
| − | itemPreview.unwrap();
| + | |
| − | itemDetails.unwrap();
| + | |
| − | itemPreview.after(itemDetails);
| + | |
| − | }
| + | |
| − | };; var left_layout = {};
| + | |
| − | | + | |
| − | left_layout.init = function(container,items){
| + | |
| − | SpimeEngine.DebugPrint("left layout init for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − | //var originalFontSize = Math.round(parseInt(items.find(".preview-title").css("font-size")));
| + | |
| − | //items.find(".preview-title").attr("data-orig-font-size",originalFontSize);
| + | |
| − | items.each(function(){
| + | |
| − | var previewContentHolder = $(this).find(".preview-content-holder");
| + | |
| − | var originalMaxWidth = parseInt(previewContentHolder.css("max-width"));
| + | |
| − | previewContentHolder.attr("data-orig-max-width", originalMaxWidth);
| + | |
| − | });
| + | |
| − | };
| + | |
| − | | + | |
| − | left_layout.applyLayout = function(container,items,paramsFromRealTime){
| + | |
| − | SpimeEngine.DebugPrint("left layout applyLayout for ");
| + | |
| − | //TODO: width for flip should be set in the layout settings
| + | |
| − | if (container.width() < 500){
| + | |
| − | items.each(function(){
| + | |
| − | left_layout.flipVertically($(this));
| + | |
| − | });
| + | |
| − | }else{
| + | |
| − | items.each(function(){
| + | |
| − | left_layout.unflip($(this));
| + | |
| − | });
| + | |
| − | }
| + | |
| − |
| + | |
| − |
| + | |
| − | items.each(function(){
| + | |
| − | var previewContentHolder = $(this).find(".preview-content-holder");
| + | |
| − | var margins = parseInt(previewContentHolder.css("margin-left")) + parseInt(previewContentHolder.css("margin-right")) + parseInt(previewContentHolder.css("padding-left")) + parseInt(previewContentHolder.css("padding-right"));
| + | |
| − | var previewContentWrapper = $(this).find(".item-content ");
| + | |
| − | var maxWidthVal = (previewContentWrapper.width() / 2) - margins;
| + | |
| − | var originalMaxWith = previewContentHolder.attr("data-orig-max-width");
| + | |
| − | maxWidthVal = Math.min(maxWidthVal,originalMaxWith);
| + | |
| − | // previewContentHolder.css("max-width",maxWidthVal);
| + | |
| − | });
| + | |
| − |
| + | |
| − | | + | |
| − | items.each(function(idx){
| + | |
| − | var currentItem = $(this);
| + | |
| − | //var textElement = currentItem.find(".preview-title");
| + | |
| − | //var contentHolder = currentItem.find(".preview-content-holder");
| + | |
| − | var contentWrapper = currentItem.find(".preview-content-wrapper");
| + | |
| − | //var originalFontSize = parseInt(textElement.attr("data-orig-font-size"));
| + | |
| − | if (typeof currentItem.attr("data-flipped") != "undefined"){
| + | |
| − | contentWrapper.removeClass("shrinker-parent");
| + | |
| − | currentItem.find(".helper-div").addClass("shrinker-parent");
| + | |
| − | }else{
| + | |
| − | contentWrapper.addClass("shrinker-parent");
| + | |
| − | currentItem.find(".helper-div").removeClass("shrinker-parent");
| + | |
| − | }
| + | |
| − | // textElement.css("font-size",originalFontSize);
| + | |
| − | // if (contentHolder.outerWidth(true) > contentWrapper.width()){
| + | |
| − | // var newFontSize = SpimeEngine.shrinkTextToFit(originalFontSize,contentWrapper,contentHolder,textElement,0,30);
| + | |
| − | // textElement.css("font-size",newFontSize);
| + | |
| − | // }
| + | |
| − | });
| + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | left_layout.flipVertically = function(item){
| + | |
| − | if (typeof item.attr("data-flipped") == "undefined"){
| + | |
| − | item.attr("data-flipped","true");
| + | |
| − | var helperDiv = item.find(".helper-div");
| + | |
| − | var itemPreview = helperDiv.children(".item-preview");
| + | |
| − | var itemDetails = helperDiv.children(".item-details");
| + | |
| − | var textWrapper = $("<div id='text-wrapper' />");
| + | |
| − | var imageWrapper = $("<div id='image-wrapper' class='preview image-cover' />");
| + | |
| − | textWrapper.append(itemDetails);
| + | |
| − | imageWrapper.append(itemPreview);
| + | |
| − | helperDiv.append(textWrapper);
| + | |
| − | helperDiv.append(imageWrapper);
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | left_layout.unflip = function(item){
| + | |
| − | if (typeof item.attr("data-flipped") != "undefined"){
| + | |
| − | item.removeAttr("data-flipped","true");
| + | |
| − | var helperDiv = item.find(".helper-div");
| + | |
| − | var itemPreview = helperDiv.find(".item-preview");
| + | |
| − | var itemDetails = helperDiv.find(".item-details");
| + | |
| − | itemPreview.unwrap();
| + | |
| − | itemDetails.unwrap();
| + | |
| − | itemPreview.before(itemDetails);
| + | |
| − | }
| + | |
| − | };; var top_layout = {};
| + | |
| − | | + | |
| − | top_layout.init = function(container,items){
| + | |
| − | SpimeEngine.DebugPrint("top layout init for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − | //var originalFontSize = Math.round(parseInt(items.find(".preview-title").css("font-size")));
| + | |
| − | //items.find(".preview-title").attr("data-orig-font-size",originalFontSize);
| + | |
| − | };
| + | |
| − | | + | |
| − | top_layout.applyLayout = function(container,items,paramsFromRealTime){
| + | |
| − | SpimeEngine.DebugPrint("top layout applyLayout for ");
| + | |
| − | items.find(".item-details").css("height","");
| + | |
| − | items.find(".image-cover").css("height","");
| + | |
| − | items.find(".image-cover").css("min-height","");
| + | |
| − |
| + | |
| − | var maxHeight = 0;
| + | |
| − | var innerMaxHeight = 0;
| + | |
| − | var maxItemBoxHeight = 0;
| + | |
| − | items.each(function(){
| + | |
| − | itemDetailsHeight = $(this).find(".item-details").outerHeight(true);
| + | |
| − | maxHeight = Math.max(maxHeight,itemDetailsHeight);
| + | |
| − | var itemContent = $(this).find(".item-content").andSelf().filter(".item-content");
| + | |
| − | maxItemBoxHeight = Math.max(maxItemBoxHeight,itemContent.height());
| + | |
| − | innerMaxHeight = Math.max(innerMaxHeight,$(this).find(".item-details").outerHeight());
| + | |
| − | });
| + | |
| − |
| + | |
| − | items.each(function(){
| + | |
| − | $(this).find(".item-details").height(innerMaxHeight);
| + | |
| − | var itemContent = $(this).find(".item-content").andSelf().filter(".item-content");
| + | |
| − | itemBoxHeight = itemContent.height();
| + | |
| − | $(this).find(".image-cover").css("height",maxItemBoxHeight - maxHeight ).css("min-height",maxItemBoxHeight - maxHeight );
| + | |
| − | });
| + | |
| − | };; var middle_layout = {};
| + | |
| − | | + | |
| − | middle_layout.init = function(container,items){
| + | |
| − | //var originalFontSize = Math.round(parseInt(items.find(".preview-title").css("font-size")));
| + | |
| − | //items.find(".preview-title").attr("data-orig-font-size",originalFontSize);
| + | |
| − | items.find(".image-cover").css("min-height","inherit");
| + | |
| − | };
| + | |
| − | | + | |
| − | middle_layout.applyLayout = function(container,items,paramsFromRealTime){
| + | |
| − | items.find(".item-content , .item-preview").css("min-height","initial");
| + | |
| − | //container.closest(".master.item-box").removeAttr("data-min-stripe-height");
| + | |
| − | //var originalFontSize = parseInt(items.find(".preview-title").attr("data-orig-font-size"));
| + | |
| − | //var shrinkPlease = true;
| + | |
| − | // if (typeof paramsFromRealTime != "undefined" ){
| + | |
| − | // if (typeof paramsFromRealTime.value != "undefined"){
| + | |
| − | // originalFontSize = parseInt(paramsFromRealTime.value);
| + | |
| − | // items.find(".preview-title").attr("data-orig-font-size",originalFontSize);
| + | |
| − | // shrinkPlease = false;
| + | |
| − | // }
| + | |
| − | // }
| + | |
| − | // if (shrinkPlease){
| + | |
| − | // items.find(".preview-title").css("font-size",originalFontSize);
| + | |
| − | //var minFontSize = 9999;
| + | |
| − | //items.each(function(){
| + | |
| − | // var itemDetails = $(this).find(".item-details");
| + | |
| − | // var stripe = itemDetails.closest(".item-wrapper");
| + | |
| − | // var textElement = $(this).find(".preview-title");
| + | |
| − | // minFontSize = Math.min(minFontSize,SpimeEngine.shrinkTextToFit(originalFontSize,stripe,itemDetails,textElement,0,30));
| + | |
| − | //});
| + | |
| − | items.each(function(){
| + | |
| − | $(this).find(".helper-div").css("padding",$(this).css("padding"));
| + | |
| − | $(this).find(".item-content, .item-preview").css("min-height","inherit");
| + | |
| − | //$(this).find(".preview-title").css("font-size",minFontSize);
| + | |
| − | });
| + | |
| − | // }
| + | |
| − | };; var matrix_arranger = {};
| + | |
| − | | + | |
| − | matrix_arranger.init = function(container,items,whatsNext){
| + | |
| − | SpimeEngine.DebugPrint("rowcol arranger init for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − | var settings = container.closest(".item-wrapper").find(".arranger-settings");
| + | |
| − | /******************************************************************
| + | |
| − | * HANDLING THE ELEMENTS
| + | |
| − | ********************************************************************/
| + | |
| − | // var elements = items.not(".element-box").first().siblings(".element-box");
| + | |
| − | //var stripeHeader
| + | |
| − | // elements.remove();
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * HANDLING THE ITEMS
| + | |
| − | ********************************************************************/
| + | |
| − | var itemsHolder = container.find("#items-holder");
| + | |
| − | var itemsHolderWrapper = container.find("#items-holder-wrapper");
| + | |
| − | //backward compatibility
| + | |
| − | if (itemsHolder.length == 0){
| + | |
| − | items = container.find(".sub.item-box");
| + | |
| − | itemsHolder = $("<div id='items-holder' />");
| + | |
| − | itemsHolderWrapper = $("<div id='items-holder-wrapper' />");
| + | |
| − | itemsHolder.append(items);
| + | |
| − | itemsHolderWrapper.append(itemsHolder);
| + | |
| − | container.find("#children").append(itemsHolderWrapper);
| + | |
| − | }
| + | |
| − | // var itemsHolderWrapper = container.find("#items-holder-wrapper");
| + | |
| − | //Select only children of type item
| + | |
| − | // var onlyItems = items.not(".element-box").not(".stripe_header");
| + | |
| − | // if (itemsHolder.length == 0){
| + | |
| − | // itemsHolder = $("<div id='items-holder' />");
| + | |
| − | // itemsHolderWrapper = $("<div id='items-holder-wrapper' />");
| + | |
| − | // itemsHolder.append(onlyItems);
| + | |
| − | // itemsHolderWrapper.append(itemsHolder);
| + | |
| − | // container.find("#children").append(itemsHolderWrapper);
| + | |
| − | // }
| + | |
| − |
| + | |
| − | var pagHolder = container.find("#pagination-holder");
| + | |
| − | if (pagHolder.length == 0){
| + | |
| − | matrix_arranger.initPaginationHolder(container);
| + | |
| − | }
| + | |
| − |
| + | |
| − | if (typeof whatsNext != "undefined"){
| + | |
| − | whatsNext();
| + | |
| − | }
| + | |
| − |
| + | |
| − | //set original height
| + | |
| − | items.find(".inner-pic").each(function(){
| + | |
| − | SpimeEngine.updateImageRealSize($(this));
| + | |
| − | });
| + | |
| − | };
| + | |
| − | | + | |
| − | matrix_arranger.arrange = function(items,container,whatsNext){
| + | |
| − | SpimeEngine.DebugPrint("rowcol arranger arrange for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * HANDLING THE ELEMENTS
| + | |
| − | ********************************************************************/
| + | |
| − | //var elementsHolder = container.find("#elements-holder");
| + | |
| − | var itemsHolder = container.find("#items-holder");
| + | |
| − | items = itemsHolder.children();
| + | |
| − | var calculatedElementsHeight = 0;
| + | |
| − |
| + | |
| − | var stripe = container.closest(".master.item-box");
| + | |
| − | stripe.css("min-height","initial");
| + | |
| − | var stripeType = stripe.attr("data-preset-type-id");
| + | |
| − | var isFeatures = false//XPRSHelper.inPresetGroup(stripeType,"FEATURES");
| + | |
| − | | + | |
| − | | + | |
| − | /******************************************************************
| + | |
| − | * LOADING ARRANGER SETTINGS
| + | |
| − | ********************************************************************/
| + | |
| − |
| + | |
| − | var settings = container.closest(".item-wrapper").find(".arranger-settings");
| + | |
| − | var ratio = parseFloat(settings.attr('data-arranger_item_ratio')) ;
| + | |
| − | var colsFromSettings = parseInt(settings.attr('data-arranger_cols'));
| + | |
| − | colsFromSettings = isFeatures ? items.length : colsFromSettings;
| + | |
| − | colsFromSettings = Math.min(items.length,colsFromSettings);
| + | |
| − | var itemsMargin = parseInt(settings.attr('data-arranger_item_spacing'));
| + | |
| − | var itemMinWidth = parseInt(settings.attr('data-arranger_item_min_width'));
| + | |
| − | var itemMaxWidth = parseInt(settings.attr('data-arranger_item_max_width'));
| + | |
| − | var itemsPerPage = settings.attr('data-arranger_items_per_page');
| + | |
| − | itemsPerPage = isFeatures ? items.length : itemsPerPage;
| + | |
| − | itemsPerPage = (itemsPerPage == "all") ? items.length : parseInt(itemsPerPage);
| + | |
| − |
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * DEFINE PARTICIPATING DIVS
| + | |
| − | ********************************************************************/
| + | |
| − | //ParentWrapper is the source for our max width
| + | |
| − | var parentWrapper = itemsHolder.closest(".gallery-wrapper");
| + | |
| − |
| + | |
| − | var forcedArrange = (typeof stripe.attr("data-forced-arrange") != "undefined");
| + | |
| − | var fromHeightResize = (typeof stripe.attr("data-height-resize") != "undefined");
| + | |
| − | var fromWidthResize = forcedArrange || (typeof stripe.attr("data-width-resize") != "undefined") || (typeof stripe.attr("data-arranger_cols-from-settings") != "undefined")|| (typeof stripe.attr("data-arranger_item_spacing-from-settings") != "undefined");
| + | |
| − | //fromWidthResize = false
| + | |
| − | stripe.removeAttr("data-forced-arrange");
| + | |
| − | var paginationWrapper = container.find("#pagination-wrapper");
| + | |
| − | var paginationHeight = paginationWrapper.is(':visible') ? paginationWrapper.outerHeight(true) : 0;
| + | |
| − | //var stripeHeight = stripe.height() - calculatedElementsHeight - paginationHeight;//- parseInt(stripe.css("padding-top")) - parseInt(stripe.css("padding-bottom"));
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * START CALCULATIONS WITH ITEM MIN WIDTH AND HEIGHT * RATIO AND COLS AS THE NUMBER OF ITEMS
| + | |
| − | ********************************************************************/
| + | |
| − | var percentagePaddingFix = 0;
| + | |
| − | if (parseInt(stripe.css("padding-left")) > 0){
| + | |
| − | percentagePaddingFix = 1;
| + | |
| − | }
| + | |
| − | var wrapperWidth = parentWrapper.width() - percentagePaddingFix;
| + | |
| − | //Min width can not be larger than screen or the max item width
| + | |
| − | itemMinWidth = Math.min(itemMinWidth,itemMaxWidth);
| + | |
| − | itemMinWidth = Math.min(itemMinWidth,wrapperWidth);
| + | |
| − | items.find(".preview-content-holder").css("min-height","");
| + | |
| − |
| + | |
| − | var cols = Math.floor((wrapperWidth + itemsMargin*2) / (itemMinWidth + itemsMargin*2));
| + | |
| − | cols = Math.min(colsFromSettings,cols);
| + | |
| − | if (forcedArrange){//if (fromWidthResize){
| + | |
| − | var wrapperWidthForTest = wrapperWidth - colsFromSettings*itemsMargin*2 + itemsMargin*2;
| + | |
| − | itemMinWidth = Math.floor(wrapperWidthForTest / colsFromSettings);
| + | |
| − | itemMinWidth = Math.min(itemMinWidth,itemMaxWidth);
| + | |
| − | itemMinWidth *= 0.7;
| + | |
| − | cols = colsFromSettings;
| + | |
| − | }
| + | |
| − | //cols must be at least 1
| + | |
| − | cols = Math.max(cols,1);
| + | |
| − |
| + | |
| − | if (cols == 2 && colsFromSettings != 2 && items.length == 3){
| + | |
| − | cols = 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | if (cols == 3 && items.length == 4 && colsFromSettings != 3){
| + | |
| − | cols = 2;
| + | |
| − | }
| + | |
| − | if (cols == 5 && items.length == 6 && colsFromSettings != 5){
| + | |
| − | cols = 3;
| + | |
| − | }
| + | |
| − |
| + | |
| − | //The total number of rows we have
| + | |
| − | var rows = Math.ceil(items.length / cols);
| + | |
| − | //Restoring items defaults (if change during previous arrange)
| + | |
| − | //items.show();
| + | |
| − | items.css({"clear":"","display":"inline-block"});
| + | |
| − | var itemRow = 0;
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * BREAK THE ITEMS ACCORDING TO CALCULATED COLS AND GIVE EACH ONE ROW IDENTIFIER
| + | |
| − | ********************************************************************/
| + | |
| − |
| + | |
| − | var maxContentHeight = 0;
| + | |
| − | items.removeClass("top-side").removeClass("bottom-side").removeClass("left-side").removeClass("right-side");;
| + | |
| − | items.each(function(idx){
| + | |
| − | if (idx % cols == 0){
| + | |
| − | $(this).css({"clear":"left"});
| + | |
| − | $(this).addClass("left-side");
| + | |
| − | itemRow++;
| + | |
| − | }
| + | |
| − | if (idx % cols == cols-1){
| + | |
| − | $(this).addClass("right-side");
| + | |
| − | }
| + | |
| − | if (itemRow == 1){
| + | |
| − | $(this).addClass("top-side");
| + | |
| − | }
| + | |
| − | if (itemRow == rows){
| + | |
| − | $(this).addClass("bottom-side");
| + | |
| − | }
| + | |
| − | $(this).attr("data-row",itemRow);
| + | |
| − | maxContentHeight = Math.max(maxContentHeight,$(this).find(".preview-content-holder").height());
| + | |
| − | });
| + | |
| − |
| + | |
| − |
| + | |
| − | //maxContentHeight = Math.max(itemsHolder.height(),maxContentHeight);
| + | |
| − |
| + | |
| − |
| + | |
| − | //if we have more space we enlarge the items
| + | |
| − | var extraSpace = Math.floor( (wrapperWidth - (cols*itemMinWidth) - (cols*itemsMargin*2) + (itemsMargin*2) ) /cols );
| + | |
| − | var calculatedItemWidth = Math.floor(itemMinWidth + extraSpace);//Math.round((wrapperWidth)/cols) - ((cols-1)*(itemsMargin*2));
| + | |
| − | calculatedItemWidth = Math.min(calculatedItemWidth,itemMaxWidth);
| + | |
| − |
| + | |
| − | setTimeout(function(){
| + | |
| − | if (wrapperWidth - parentWrapper.width() > 3){
| + | |
| − | extraSpace = Math.floor( (parentWrapper.width() - (cols*itemMinWidth) - (cols*itemsMargin*2) + (itemsMargin*2) ) /cols );
| + | |
| − | calculatedItemWidth = Math.floor(itemMinWidth + extraSpace);//Math.round((wrapperWidth)/cols) - ((cols-1)*(itemsMargin*2));
| + | |
| − | calculatedItemWidth = Math.min(calculatedItemWidth,itemMaxWidth);
| + | |
| − | items.width(calculatedItemWidth);
| + | |
| − | }
| + | |
| − | },10);
| + | |
| − |
| + | |
| − | if (fromWidthResize || forcedArrange){
| + | |
| − | //calculatedItemWidth = itemMinWidth;
| + | |
| − | settings.attr('data-arranger_item_min_width',itemMinWidth);
| + | |
| − | stripe.attr("data-items-min-width",itemMinWidth);
| + | |
| − | }
| + | |
| − | | + | |
| − | /******************************************************************
| + | |
| − | * CHANGE ITEMS WIDTH HEIGHT AND SPACING ACCORDING TO CALCULATIONS
| + | |
| − | ********************************************************************/
| + | |
| − | items.width(calculatedItemWidth).css({"margin":itemsMargin});
| + | |
| − | items.filter(".top-side").css("margin-top",itemsMargin*2);
| + | |
| − | items.filter(".bottom-side").css("margin-bottom",itemsMargin*2);
| + | |
| − | items.filter(".left-side").css("margin-left",0);
| + | |
| − | items.filter(".right-side").css("margin-right",0);
| + | |
| − |
| + | |
| − | | + | |
| − | itemsHolder.css({"text-align":""});
| + | |
| − |
| + | |
| − | items.slice(itemsPerPage,items.length).hide();
| + | |
| − |
| + | |
| − | | + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | /******************************************************************
| + | |
| − | * HANDLE PAGINATION
| + | |
| − | ********************************************************************/
| + | |
| − | // If we need pagination (not all items fit the given height)
| + | |
| − | var inMoreMode = (typeof stripe.attr("data-more-clicked") != "undefined");
| + | |
| − | if (itemsPerPage < items.length ){
| + | |
| − | if (inMoreMode){
| + | |
| − | paginationWrapper.hide();
| + | |
| − | items.css("display","inline-block");
| + | |
| − | }else{
| + | |
| − | paginationWrapper.show();
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | //Hide paginator
| + | |
| − | paginationWrapper.hide();
| + | |
| − | }
| + | |
| − |
| + | |
| − |
| + | |
| − | extraSpace = Math.floor( (wrapperWidth - (cols*itemMaxWidth) - (cols*itemsMargin*2) + (itemsMargin*2) ) /cols );
| + | |
| − | if(calculatedItemWidth == itemMaxWidth && extraSpace > 0){
| + | |
| − | itemsHolder.css("text-align","center");
| + | |
| − | var currentRowWidth = (itemMaxWidth * cols) + (cols*itemsMargin*2) - itemsMargin*2;
| + | |
| − | itemsHolder.width(currentRowWidth);
| + | |
| − | }else{
| + | |
| − | itemsHolder.css("width","");
| + | |
| − | }
| + | |
| − | | + | |
| − | if (typeof whatsNext != "undefined"){
| + | |
| − | var originalItemMinWidth = parseInt(settings.attr('data-arranger_item_min_width'));
| + | |
| − | var actualItemMinWidth = itemMinWidth;
| + | |
| − | if (actualItemMinWidth != originalItemMinWidth){
| + | |
| − | stripe.attr("data-items-min-width",actualItemMinWidth);
| + | |
| − | }
| + | |
| − | whatsNext();
| + | |
| − | }
| + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | matrix_arranger.showMore = function(stripe){
| + | |
| − |
| + | |
| − | var itemsHolder = stripe.find("#items-holder");
| + | |
| − | var items = itemsHolder.children();
| + | |
| − | var paginationWrapper = stripe.find("#pagination-wrapper");
| + | |
| − | paginationWrapper.hide();
| + | |
| − | var itemsWrapper = stripe.find("#items-holder-wrapper");
| + | |
| − | var topMargin = parseInt(itemsWrapper.css("margin-top"));
| + | |
| − | itemsWrapper.css("margin-bottom",topMargin);
| + | |
| − | items.css("display","inline-block");
| + | |
| − | SpimeEngine.fitVideos(stripe);
| + | |
| − | stripe.attr("data-more-clicked","true");
| + | |
| − | };
| + | |
| − | | + | |
| − | matrix_arranger.showLess = function(stripe){
| + | |
| − | var itemsHolder = stripe.find("#items-holder");
| + | |
| − | var items = itemsHolder.children();
| + | |
| − | var paginationWrapper = stripe.find("#pagination-wrapper");
| + | |
| − | var itemsWrapper = stripe.find("#items-holder-wrapper");
| + | |
| − | //var topMargin = parseInt(itemsWrapper.css("margin-top"));
| + | |
| − | itemsWrapper.css("margin-bottom","");
| + | |
| − | var itemsToShow = parseInt(stripe.attr("data-items-to-show"));
| + | |
| − | if (itemsToShow < items.length){
| + | |
| − | paginationWrapper.show();
| + | |
| − | }
| + | |
| − | items.hide();
| + | |
| − | items.slice(0,itemsToShow).css("display","inline-block")
| + | |
| − | stripe.removeAttr("data-more-clicked");
| + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | matrix_arranger.initPaginationHolder = function(container){
| + | |
| − | var paginationBtn = $("<div id='pagination-btn' />");
| + | |
| − | paginationBtn.text("More");
| + | |
| − | var paginationHolder = $("<div id='pagination-holder' />").addClass("magic-circle-holder").attr("data-menu-name","PAGINATION_SETTINGS");
| + | |
| − | var paginationHolderWrapper = $("<div id='pagination-wrapper' class='layer5' />");
| + | |
| − | paginationHolder.append(paginationBtn);
| + | |
| − | paginationHolderWrapper.append(paginationHolder);
| + | |
| − | container.find("#children").append(paginationHolderWrapper);
| + | |
| − | paginationHolder.unbind("click").bind("click",function(e){
| + | |
| − | e.stopPropagation();
| + | |
| − | var stripe = container.closest(".master.item-box");
| + | |
| − | matrix_arranger.showMore(stripe);
| + | |
| − | });
| + | |
| − | };; var stripes_arranger = {};
| + | |
| − | | + | |
| − | stripes_arranger.init = function(container,items,whatsNext){
| + | |
| − | SpimeEngine.DebugPrint("stripes arranger init for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − | items.each(function(){
| + | |
| − | var currentItem = $(this);
| + | |
| − | if (currentItem.hasClass("element-box")){
| + | |
| − | var textElement = currentItem.find(".text-element");
| + | |
| − | if (textElement.length > 0){
| + | |
| − | textElement.each(function(){
| + | |
| − | $(this).attr("data-orig-font-size",parseInt($(this).css("font-size")));
| + | |
| − | });
| + | |
| − | }
| + | |
| − | }
| + | |
| − | });
| + | |
| − | if (typeof whatsNext != "undefined"){
| + | |
| − | whatsNext();
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | stripes_arranger.arrange = function(items,container){
| + | |
| − | SpimeEngine.DebugPrint("stripes arranger arrange for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − | items.each(function(idx){
| + | |
| − | var currentItem = $(this);
| + | |
| − | if (currentItem.hasClass("element-box")){
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | // var currentItem = $(this);
| + | |
| − | // var textElement = currentItem.find(".preview-title");
| + | |
| − | // var contentHolder = currentItem.find(".preview-content-holder");
| + | |
| − | // var contentWrapper = currentItem.find(".preview-content-wrapper");
| + | |
| − | // var originalFontSize = parseInt(textElement.attr("data-orig-font-size"));
| + | |
| − | // if (typeof currentItem.attr("data-flipped") != "undefined"){
| + | |
| − | // contentWrapper = currentItem.find(".helper-div");
| + | |
| − | // }
| + | |
| − | // textElement.css("font-size",originalFontSize);
| + | |
| − | // if (contentHolder.outerWidth(true) > contentWrapper.width()){
| + | |
| − | // var newFontSize = SpimeEngine.shrinkTextToFit(originalFontSize,contentWrapper,contentHolder,textElement,0,30);
| + | |
| − | // textElement.css("font-size",newFontSize);
| + | |
| − | // }
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | var textElement = currentItem.find(".text-element");
| + | |
| − |
| + | |
| − |
| + | |
| − | textElement.each(function(){
| + | |
| − | var originalFontSize = parseInt($(this).attr("data-orig-font-size"));
| + | |
| − | $(this).css("font-size",originalFontSize);
| + | |
| − | var contentHolder = $(this).parent();
| + | |
| − | if ($(this).outerWidth(true) > contentHolder.width()){
| + | |
| − | //var newFontSize = stripes_arranger.shrinker(originalFontSize,currentItem,textElement);
| + | |
| − | var newFontSize = SpimeEngine.shrinkTextToFit(originalFontSize,currentItem,$(this),$(this),0,30);
| + | |
| − | $(this).css("font-size",newFontSize);
| + | |
| − | }
| + | |
| − | });
| + | |
| − |
| + | |
| − |
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | stripes_arranger.shrinker = function(fontSize,parent,content){
| + | |
| − | if (content.outerWidth(true) > parent.width()){
| + | |
| − | var shrinkedFontSize = fontSize * 0.9 ;
| + | |
| − | if (shrinkedFontSize < 15){
| + | |
| − | return 15;
| + | |
| − | }else{
| + | |
| − | content.css("font-size",shrinkedFontSize);
| + | |
| − | return stripes_arranger.shrinker(shrinkedFontSize,parent,content);
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | return parseInt(content.css("font-size"));
| + | |
| − | }
| + | |
| − | };; var flex_arranger = {};
| + | |
| − | | + | |
| − |
| + | |
| − | | + | |
| − | flex_arranger.init = function(container,items,whatsNext,title){
| + | |
| − | SpimeEngine.DebugPrint("flex arranger init for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − | container.css("overflow","hidden")
| + | |
| − | var itemsHolder = container.find("#items-holder");
| + | |
| − | var itemsHolderWrapper = container.find("#items-holder-wrapper");
| + | |
| − | //backward compatibility
| + | |
| − | if (itemsHolder.length == 0){
| + | |
| − | items = container.find(".sub.item-box");
| + | |
| − | itemsHolder = $("<div id='items-holder' />");
| + | |
| − | itemsHolderWrapper = $("<div id='items-holder-wrapper' />");
| + | |
| − | itemsHolder.append(items);
| + | |
| − | itemsHolderWrapper.append(itemsHolder);
| + | |
| − | container.find("#children").append(itemsHolderWrapper);
| + | |
| − | }
| + | |
| − | items = itemsHolder.children();
| + | |
| − | //if we have elements in the container remove them
| + | |
| − | var elements = items.not(".element-box").first().siblings(".element-box");
| + | |
| − | elements.remove();
| + | |
| − | //create the arrows
| + | |
| − | var flexArrows = container.find(".flex-arrows");
| + | |
| − | var leftArrow = flexArrows.filter(".left");
| + | |
| − | var rightArrow = flexArrows.filter(".right");
| + | |
| − | var staticServer = XPRSHelper.getStaticServerPath();
| + | |
| − | if (flexArrows.length == 0){
| + | |
| − | rightArrow = $("<img />");
| + | |
| − | rightArrow.attr("src","https://lh3.googleusercontent.com/6zb8WwTey8418Mlgf5wJomMN_7JjY8T8ULq74HO77G1_wYJQC3o70RMGnRyP_89wZ4jQ93uNwIP82kKRz6AakfxfKA=s50");
| + | |
| − | rightArrow.addClass("flex-arrows").addClass("right").addClass("layer5");
| + | |
| − | leftArrow = $("<img />");
| + | |
| − | leftArrow.attr("src","https://lh3.googleusercontent.com/ZMARmveTg1geksYKXZKdh71KW09XrhDLg8N-XrfXCGsDBEHnuKwhmYpHd55Y2-NwuwLX8qsyx26JNyJWtr1jEcxD=s50");
| + | |
| − | leftArrow.addClass("flex-arrows").addClass("left").addClass("layer5");
| + | |
| − | itemsHolder.parent().prepend(leftArrow).prepend(rightArrow);
| + | |
| − | }
| + | |
| − | rightArrow.unbind("click").bind("click",function(event){
| + | |
| − | event.stopPropagation();
| + | |
| − | if (container.attr("data-interval-id")){
| + | |
| − | clearInterval(parseInt(container.attr("data-interval-id")));
| + | |
| − | }
| + | |
| − | flex_arranger.slide(rightArrow,"right",items,container);
| + | |
| − | });
| + | |
| − | leftArrow.unbind("click").bind("click",function(event){
| + | |
| − | event.stopPropagation();
| + | |
| − | if (container.attr("data-interval-id")){
| + | |
| − | clearInterval(parseInt(container.attr("data-interval-id")));
| + | |
| − | }
| + | |
| − | flex_arranger.slide(leftArrow,"left",items,container);
| + | |
| − | });
| + | |
| − | items.attr("data-child-type","SLIDE");
| + | |
| − |
| + | |
| − | this.handlePagination(items,container);
| + | |
| − | if (typeof whatsNext != "undefined"){
| + | |
| − | whatsNext();
| + | |
| − | }
| + | |
| − |
| + | |
| − | if (typeof container.attr("start-with-slide") != "undefined"){
| + | |
| − | items.filter(".slide-" + container.attr("start-with-slide")).attr("data-visible","visible").css("left",0).addClass("play-effect");
| + | |
| − | }else{
| + | |
| − | items.first().attr("data-visible","visible").css("left",0).addClass("play-effect");
| + | |
| − | }
| + | |
| − |
| + | |
| − | container.unbind("swipeleft").bind("swipeleft",function(){
| + | |
| − | if (items.length > 1){
| + | |
| − | if (container.attr("data-interval-id")){
| + | |
| − | clearInterval(parseInt(container.attr("data-interval-id")));
| + | |
| − | }
| + | |
| − | flex_arranger.slide(rightArrow,"right",items,container);
| + | |
| − | }
| + | |
| − | });
| + | |
| − |
| + | |
| − | container.unbind("swiperight").bind("swiperight",function(){
| + | |
| − | if (items.length > 1){
| + | |
| − | if (container.attr("data-interval-id")){
| + | |
| − | clearInterval(parseInt(container.attr("data-interval-id")));
| + | |
| − | }
| + | |
| − | flex_arranger.slide(leftArrow,"left",items,container);
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | flex_arranger.arrange = function(items,container){
| + | |
| − | SpimeEngine.DebugPrint("flex arranger arrange for " + items.length + " items and container: " + container.width() + " X " + container.height());
| + | |
| − | var itemsHolder = container.find("#items-holder");
| + | |
| − | items = itemsHolder.children();
| + | |
| − | var stripe = container.closest(".master.item-box");
| + | |
| − | var flexArrows = container.find(".flex-arrows");
| + | |
| − | var settings = stripe.find(".arranger-settings");
| + | |
| − | if (stripe.width() < 400){
| + | |
| − | flexArrows.addClass("disabled");
| + | |
| − | }else{
| + | |
| − | flexArrows.removeClass("disabled");
| + | |
| − | }
| + | |
| − | var autoPlay = settings.attr("data-auto_play") == "AUTOPLAY";
| + | |
| − | var autoPlayDuration = parseInt(settings.attr("data-auto_play_duration"));
| + | |
| − | var allowAutoPlay = !($("#xprs").hasClass("in-editor"));
| + | |
| − | allowAutoPlay = allowAutoPlay || (typeof stripe.attr("data-auto_play-from-settings") != "undefined");
| + | |
| − | allowAutoPlay = allowAutoPlay && items.length > 1;
| + | |
| − | stripe.removeAttr("data-auto_play-from-settings");
| + | |
| − |
| + | |
| − | var effectsClass = settings.attr("data-flex_element_effect");
| + | |
| − | if (effectsClass == ""){
| + | |
| − | var newClass = container.find('.preview-content-holder').attr("class").replace(/\seffect-[^\s]*|^effect-[^\s]*\s+/g,"");
| + | |
| − | container.find('.preview-content-holder').attr("class",newClass);
| + | |
| − | }else{
| + | |
| − | container.find('.preview-content-holder').addClass(effectsClass);
| + | |
| − | }
| + | |
| − |
| + | |
| − | var durationSettingsChanged = stripe.attr("data-auto_play_duration-from-settings") || stripe.attr("data-forced-arrange");
| + | |
| − | stripe.removeAttr("data-forced-arrange");
| + | |
| − | if (durationSettingsChanged){
| + | |
| − | stripe.removeAttr("data-auto_play_duration-from-settings");
| + | |
| − | if (container.attr("data-interval-id")){
| + | |
| − | clearInterval(parseInt(container.attr("data-interval-id")));
| + | |
| − | container.removeAttr("data-interval-id");
| + | |
| − | }
| + | |
| − | }
| + | |
| − | if (autoPlay && !container.attr("data-interval-id")){
| + | |
| − |
| + | |
| − | var rightArrow = flexArrows.filter(".right");
| + | |
| − | var intervalId = setInterval(function(){
| + | |
| − | if (!stripe.hasClass("manage-mode") && allowAutoPlay){
| + | |
| − | flex_arranger.slide(rightArrow,"right",items,container);
| + | |
| − | }
| + | |
| − | },autoPlayDuration*1000);
| + | |
| − | container.attr("data-interval-id" , intervalId);
| + | |
| − | }else{
| + | |
| − | if (!autoPlay){
| + | |
| − | if (container.attr("data-interval-id")){
| + | |
| − | clearInterval(parseInt(container.attr("data-interval-id")));
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | if (items.length == 1 ){
| + | |
| − | container.find(".flex-arrows").hide();
| + | |
| − | }else{
| + | |
| − | container.find(".flex-arrows").show();
| + | |
| − | }
| + | |
| − | var rightArrow = container.find(".flex-arrows.right");
| + | |
| − | var leftArrow = container.find(".flex-arrows.left");
| + | |
| − | var newTop = container.height()/2 - rightArrow.height/2;
| + | |
| − | leftArrow.css({"float":"none","left":0,"top":newTop,"position":"absolute"});
| + | |
| − | rightArrow.css({"float":"none","right":0,"top":newTop,"position":"absolute"});
| + | |
| − | container.find("#paginator").css("bottom", 50);
| + | |
| − | items.each(function(){
| + | |
| − | var currentItem = $(this);
| + | |
| − | currentItem.css("width",container.width());
| + | |
| − | });
| + | |
| − | | + | |
| − | container.find("#items-holder").width(parseInt(container.width()) * items.length);
| + | |
| − |
| + | |
| − | var visibleItem = items.filter("[data-visible='visible']");
| + | |
| − | if (visibleItem.length == 0 ){
| + | |
| − | items.removeAttr("data-visible");
| + | |
| − | visibleItem = items.first();
| + | |
| − | visibleItem.attr("data-visible","visible");
| + | |
| − | visibleItem.addClass("play-effect");
| + | |
| − | }
| + | |
| − |
| + | |
| − | items.removeClass("before-visible after-visible")
| + | |
| − | visibleItem.nextAll().addClass("after-visible");
| + | |
| − | visibleItem.prevAll().addClass("before-visible");
| + | |
| − |
| + | |
| − | var itemsNewLeft = visibleItem.index() * -1 * visibleItem.width();
| + | |
| − | items.each(function(){
| + | |
| − | var currentItem = $(this);
| + | |
| − | currentItem.css("left",itemsNewLeft);
| + | |
| − | });
| + | |
| − | | + | |
| − |
| + | |
| − |
| + | |
| − | };
| + | |
| − | | + | |
| − | flex_arranger.slide = function(btn,direction,items,container){
| + | |
| − | var currentVisible = items.filter('[data-visible="visible"]');
| + | |
| − | var nextVisible = currentVisible.prev();
| + | |
| − | if (direction=="left"){
| + | |
| − | if(nextVisible.length==0){
| + | |
| − | nextVisible = items.last();
| + | |
| − | flex_arranger.showPage(nextVisible.attr("data-page-num"),container,items);
| + | |
| − | }else{
| + | |
| − | flex_arranger.showPage(nextVisible.attr("data-page-num"),container,items);
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | nextVisible = currentVisible.next();
| + | |
| − | if(nextVisible.length==0){
| + | |
| − | nextVisible = items.first();
| + | |
| − | flex_arranger.showPage(nextVisible.attr("data-page-num"),container,items);
| + | |
| − | | + | |
| − | }else{
| + | |
| − | flex_arranger.showPage(nextVisible.attr("data-page-num"),container,items);
| + | |
| − | | + | |
| − | }
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | flex_arranger.showItem = function(container,items,itemId){
| + | |
| − | var nextVisible = items.filter("#" + itemId);
| + | |
| − | var itemToShowPageNum = nextVisible.attr("data-page-num");
| + | |
| − | flex_arranger.showPage(itemToShowPageNum,container,items);
| + | |
| − | };
| + | |
| − | | + | |
| − | flex_arranger.showPage = function(pageNum,container,items){
| + | |
| − | container.find(".page-navigator").removeClass("active");
| + | |
| − | //container.find(event.target).addClass("active");
| + | |
| − |
| + | |
| − | container.find(".page-navigator").removeClass("active");
| + | |
| − | container.find("#nav" + pageNum).addClass("active");
| + | |
| − |
| + | |
| − | var pageToShow = items.filter(".slide-" + pageNum);
| + | |
| − | items.removeAttr("data-visible");
| + | |
| − | pageToShow.attr("data-visible","visible");
| + | |
| − | items.removeClass("before-visible after-visible")
| + | |
| − | pageToShow.nextAll().addClass("after-visible");
| + | |
| − | pageToShow.prevAll().addClass("before-visible");
| + | |
| − | //var currentVisibleLeft = parseInt(pageToShow.css("left"));
| + | |
| − | var pageToShowIndex = pageToShow.index();
| + | |
| − | var itemsNewLeft = pageToShowIndex * -1 * pageToShow.width();
| + | |
| − | //if (currentVisibleLeft < 0){
| + | |
| − | items.each(function(){
| + | |
| − | var currentItem = $(this);
| + | |
| − | //var currentLeft = parseInt(currentItem.css("left"));
| + | |
| − | //var newLeft = currentLeft + (currentVisibleLeft * -1);
| + | |
| − | currentItem.css("left",itemsNewLeft);
| + | |
| − | });
| + | |
| − | items.removeClass("play-effect");
| + | |
| − | flex_arranger.emulateTransitionEnd (pageToShow,1050,function(){
| + | |
| − | pageToShow.addClass("play-effect");
| + | |
| − | });
| + | |
| − |
| + | |
| − | //}else{
| + | |
| − | // items.each(function(){
| + | |
| − | // var currentItem = $(this);
| + | |
| − | // var currentLeft = parseInt(currentItem.css("left"));
| + | |
| − | // var newLeft = currentLeft - currentVisibleLeft;
| + | |
| − | // currentItem.css("left",newLeft);
| + | |
| − | // });
| + | |
| − | // }
| + | |
| − | };
| + | |
| − | | + | |
| − | flex_arranger.handlePagination = function(items,container){
| + | |
| − |
| + | |
| − | items.each(function(idx){
| + | |
| − | var currentItem = $(this);
| + | |
| − | currentItem.removeClass (function (index, className) {
| + | |
| − | return (className.match (/(^|\s)slide-\S+/g) || []).join(' ');
| + | |
| − | });
| + | |
| − | currentItem.addClass("slide-" + (idx + 1)).attr("data-page-num",(idx + 1));
| + | |
| − | });
| + | |
| − | var numOfPages = items.length;
| + | |
| − |
| + | |
| − | | + | |
| − | container.find(".page-navigator").remove();
| + | |
| − | container.find("#paginator").remove();
| + | |
| − | var paginator = $("<div />").attr("id","paginator");
| + | |
| − | for(var i=1;i <= numOfPages; i++){
| + | |
| − | var pageNavigator = $("<div />").attr("id","nav"+i).addClass("page-navigator").attr("data-page-num",i).click(function(e){
| + | |
| − | e.stopPropagation();
| + | |
| − | if (container.attr("data-interval-id")){
| + | |
| − | clearInterval(parseInt(container.attr("data-interval-id")));
| + | |
| − | }
| + | |
| − | flex_arranger.showPage($(this).attr("data-page-num"),container,items);
| + | |
| − | });
| + | |
| − | paginator.append(pageNavigator);
| + | |
| − | }
| + | |
| − |
| + | |
| − | //paginator.css("left",parseInt(container.width())/2);
| + | |
| − | //paginator.css("top",parseInt(container.height()) - 40);
| + | |
| − |
| + | |
| − |
| + | |
| − | container.find("#items-holder-wrapper").append(paginator);
| + | |
| − |
| + | |
| − | var paginationWidth = parseInt(paginator.width());
| + | |
| − | paginatorNeMargin = paginationWidth / -2;
| + | |
| − | paginator.css("margin-left",paginatorNeMargin);
| + | |
| − | if (items.length == 1){
| + | |
| − | paginator.hide();
| + | |
| − | }else{
| + | |
| − | paginator.show();
| + | |
| − | }
| + | |
| − |
| + | |
| − | container.find("#nav1").addClass("active");
| + | |
| − |
| + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | flex_arranger.emulateTransitionEnd = function(element,duration,callbackFunc) {
| + | |
| − | var called = false;
| + | |
| − | element.one('webkitTransitionEnd', function() { called = true; callbackFunc();});
| + | |
| − | var callback = function() { if (!called) element.trigger('webkitTransitionEnd'); };
| + | |
| − | setTimeout(callback, duration);
| + | |
| − | };; var menu_layout = {};
| + | |
| − | menu_layout.LEFT_MENU_WIDTH = 270;
| + | |
| − | menu_layout.SCROLLBAR_WIDTH = 0;
| + | |
| − | | + | |
| − | menu_layout.init = function(container,items){
| + | |
| − | var currentPageId = $(".master.container").attr("id");
| + | |
| − | var currentPageSlug = $(".master.container").attr("data-itemslug");
| + | |
| − | if (XPRSHelper.isChrome()){
| + | |
| − | menu_layout.SCROLLBAR_WIDTH = 0;
| + | |
| − | //$(".master.container").addClass("chrome");
| + | |
| − | }
| + | |
| − | items.each(function(){
| + | |
| − | var currentItem = $(this);
| + | |
| − |
| + | |
| − | //Mark link of the current page
| + | |
| − | currentItem.find(".preview-item-links a").each(function(){
| + | |
| − | var linkStr = $(this).attr("href");
| + | |
| − | if (linkStr){
| + | |
| − | //remove query params
| + | |
| − | if (linkStr.indexOf("?") != -1){
| + | |
| − | linkStr = linkStr.substring(0,linkStr.indexOf("?"));
| + | |
| − | }
| + | |
| − | //match slug or vbid
| + | |
| − | var linkToCurrentPage = linkStr.indexOf(currentPageId, linkStr.length - currentPageId.length) !== -1;
| + | |
| − | linkToCurrentPage = linkToCurrentPage || linkStr.indexOf(currentPageSlug, linkStr.length - currentPageSlug.length) !== -1;
| + | |
| − | if (linkToCurrentPage){
| + | |
| − | $(this).addClass("current-page");
| + | |
| − | //do not mark more than one even if found
| + | |
| − | return false;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − | //LEFT MENU
| + | |
| − | var holder = container.closest(".master.item-box");
| + | |
| − | holder.addClass("animated-color")
| + | |
| − | var settings = holder.find(".layout-settings");
| + | |
| − | var menuPosition = settings.attr("data-menu_position");
| + | |
| − | var isProductPage = window.location.href.indexOf("/product/") != -1;
| + | |
| − | if(typeof window["EditorHelper"] == "undefined"){
| + | |
| − | var submenuTitles = currentItem.find(".submenu-title");
| + | |
| − | submenuTitles.each(function(){
| + | |
| − | var submenuTitle = $(this);
| + | |
| − | if (submenuTitle.parent().is("a")){
| + | |
| − | submenuTitle.unwrap()
| + | |
| − | }
| + | |
| − | submenuTitle.unbind("click").bind("click",function(e){
| + | |
| − | e.stopPropagation();
| + | |
| − | var clickedTitle = $(this);
| + | |
| − | menu_layout.toggleSubmenu(clickedTitle);
| + | |
| − | });
| + | |
| − | });
| + | |
| − | // submenuTitles.unbind("click").bind("click",function(e){
| + | |
| − | // e.stopPropagation();
| + | |
| − | // var clickedTitle = $(this);
| + | |
| − | // menu_layout.toggleSubmenu(clickedTitle);
| + | |
| − | // });
| + | |
| − | }
| + | |
| − | | + | |
| − | if (isProductPage && menuPosition == "none"){
| + | |
| − | menuPosition= "top";
| + | |
| − | settings.attr("data-menu_position","top")
| + | |
| − | }
| + | |
| − | holder.removeClass("hidden-menu");
| + | |
| − | if (menuPosition == "none"){
| + | |
| − | holder.css("display","none");
| + | |
| − | }else if (menuPosition == "left"){
| + | |
| − | $(".master.container").find("#children").first().css("width",$(window).innerWidth() - menu_layout.SCROLLBAR_WIDTH - menu_layout.LEFT_MENU_WIDTH);
| + | |
| − | $(".left-menu-placeholder").height($(window).height());
| + | |
| − | }else{
| + | |
| − | $(".master.container").find("#children").first().css("width","");
| + | |
| − | }
| + | |
| − |
| + | |
| − | var previewTitle = currentItem.find(".preview-title");
| + | |
| − | //var previewSubtitle = currentItem.find(".preview-subtitle");
| + | |
| − | var rightSideDiv = currentItem.find('.right-div');
| + | |
| − | var leftSideDiv = currentItem.find('.left-div');
| + | |
| − | var stripe = container.closest(".master.item-box");
| + | |
| − | totalLinksWidth = rightSideDiv.outerWidth(true);
| + | |
| − |
| + | |
| − | //Saving the original links width for unmenufying - only if we are not centered
| + | |
| − | if (!rightSideDiv.hasClass("centerified") && settings.attr("data-menu_align") != "center" && stripe.css("display") != "none"){
| + | |
| − | stripe.attr("data-original-menu-width",totalLinksWidth);
| + | |
| − | }
| + | |
| − |
| + | |
| − | //no shrink if title is not present
| + | |
| − | var originalFontSize = "N/A";
| + | |
| − | if (currentItem.find(".element-placeholder[data-elementtype='TITLE']").length == 0){
| + | |
| − | originalFontSize = Math.round(parseInt(previewTitle.css("font-size")));
| + | |
| − | leftSideDiv.attr("data-orig-font-size",originalFontSize);
| + | |
| − | }
| + | |
| − |
| + | |
| − | //If no subtitle and no title found link will be aligned to center
| + | |
| − | if (currentItem.find(".element-placeholder[data-elementtype='TITLE']").length > 0 && currentItem.find(".element-placeholder[data-elementtype='SUBTITLE']").length > 0){
| + | |
| − | currentItem.find(".helper-div").hide();
| + | |
| − | if (currentItem.find(".element-placeholder[data-elementtype='ICON']").length > 0){
| + | |
| − | menu_layout.centerifyLinks(leftSideDiv,rightSideDiv);
| + | |
| − | }else{
| + | |
| − | menu_layout.uncenterifyLinks(leftSideDiv,rightSideDiv);
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | currentItem.find(".helper-div").show();
| + | |
| − | menu_layout.uncenterifyLinks(leftSideDiv,rightSideDiv);
| + | |
| − | }
| + | |
| − | });
| + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | menu_layout.closeOpenedSubmenus = function(){
| + | |
| − | var openedSubmenus = $(".submenu-title.menu-opened");
| + | |
| − | var wasOpen = openedSubmenus.length > 0;
| + | |
| − | if (wasOpen){
| + | |
| − | var holder = openedSubmenus.closest(".master.item-box");
| + | |
| − | holder.css("z-index","");
| + | |
| − | }
| + | |
| − | openedSubmenus.each(function(){
| + | |
| − | var currentSubmenuTitle = $(this);
| + | |
| − | if (currentSubmenuTitle.parent().is("a")){
| + | |
| − | currentSubmenuTitle.parent().next(".submenu").hide();
| + | |
| − | }else{
| + | |
| − | currentSubmenuTitle.next(".submenu").hide();
| + | |
| − | }
| + | |
| − | currentSubmenuTitle.removeClass("menu-opened");
| + | |
| − | });
| + | |
| − | return wasOpen;
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.toggleSubmenu = function(clickedTitle){
| + | |
| − | var holder = clickedTitle.closest(".master.item-box");
| + | |
| − | var settings = holder.find(".layout-settings");
| + | |
| − | var menuPosition = settings.attr("data-menu_position");
| + | |
| − | var currentSubmenu = clickedTitle.next(".submenu");
| + | |
| − | if (clickedTitle.parent().is("a")){
| + | |
| − | currentSubmenu = clickedTitle.parent().next(".submenu");
| + | |
| − | }
| + | |
| − | var noPlaceMode = holder.find(".preview-item-links.no-place").length == 1;
| + | |
| − | var minifiyType = settings.attr("data-always_minified");
| + | |
| − | if (currentSubmenu.is(":visible")){
| + | |
| − | holder.css("z-index","")
| + | |
| − | if (menuPosition == "left" || minifiyType == "side_screen" || minifiyType == "full_screen" || noPlaceMode){
| + | |
| − | currentSubmenu.slideUp(function(){
| + | |
| − | clickedTitle.removeClass("menu-opened");
| + | |
| − | });
| + | |
| − | }else{
| + | |
| − | currentSubmenu.fadeOut(function(){
| + | |
| − | clickedTitle.removeClass("menu-opened");
| + | |
| − | });
| + | |
| − | }
| + | |
| − |
| + | |
| − | }else{
| + | |
| − | holder.css("z-index","1234567890")
| + | |
| − | menu_layout.calculateSubmenuBG(holder,currentSubmenu);
| + | |
| − | holder.find(".menu-opened").removeClass("menu-opened");
| + | |
| − | clickedTitle.addClass("menu-opened");
| + | |
| − | if (menuPosition == "left" || minifiyType == "side_screen" || minifiyType == "full_screen" || noPlaceMode){
| + | |
| − | holder.find(".submenu:visible").slideUp()
| + | |
| − | currentSubmenu.slideDown();
| + | |
| − | }else{
| + | |
| − | holder.find(".submenu:visible").fadeOut()
| + | |
| − | currentSubmenu.fadeIn(function(){
| + | |
| − | clickedTitle.addClass("menu-opened");
| + | |
| − | });
| + | |
| − | }
| + | |
| − |
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.centerifyLinks = function(leftSideDiv,rightSideDiv){
| + | |
| − | leftSideDiv.css({"width":0,"display":"inline"});
| + | |
| − | rightSideDiv.css({"width":"100%","text-align":"center"}).addClass("centerified");
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.uncenterifyLinks = function(leftSideDiv,rightSideDiv){
| + | |
| − | leftSideDiv.css({"width":"","display":""});
| + | |
| − | rightSideDiv.css({"width":"","text-align":""}).removeClass("centerified");;
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.applyLayout = function(container,items,paramsFromRealTime){
| + | |
| − | var holder = container.closest(".master.item-box");
| + | |
| − | var masterContainer = $(".master.container");
| + | |
| − | items.each(function(){
| + | |
| − | var currentItem = $(this);
| + | |
| − | currentItem.find(".preview-item-links").css("display","");
| + | |
| − | var settings = container.closest(".master.item-box").find(".layout-settings");
| + | |
| − |
| + | |
| − | var alwaysMinify = settings.attr("data-always_minified") != "false";
| + | |
| − | var leftMenuPlaceHolder = masterContainer.find(".left-menu-placeholder");
| + | |
| − | var menuAlign = settings.attr("data-menu_align");
| + | |
| − | if(holder.find(".item-wrapper").innerWidth() < 400 && leftMenuPlaceHolder.length == 0 && holder.css("display") != "none"){
| + | |
| − | menuAlign = "left";
| + | |
| − | holder.addClass("force-min-height50 minimal-design");
| + | |
| − | }else{
| + | |
| − | if (!holder.is(".being-scrolled")){
| + | |
| − | holder.removeClass("force-min-height50 minimal-design");
| + | |
| − | }
| + | |
| − | }
| + | |
| − | var menuPosition = settings.attr("data-menu_position");
| + | |
| − |
| + | |
| − |
| + | |
| − | if (menuPosition == "none"){
| + | |
| − | holder.css("display","none");
| + | |
| − | //return;
| + | |
| − | }else if (menuPosition == "left"){
| + | |
| − | holder.css("display","");
| + | |
| − | holder.removeClass("minimal-design");
| + | |
| − | masterContainer.find("#children").first().css("width",$(window).innerWidth() - menu_layout.SCROLLBAR_WIDTH - menu_layout.LEFT_MENU_WIDTH);
| + | |
| − | $(".left-menu-placeholder").height($(window).height());
| + | |
| − | }else{
| + | |
| − | holder.css("display","");
| + | |
| − | masterContainer.find("#children").first().css("width","");
| + | |
| − | //holder.find('.right-div').css("height",holder.find('.preview-icon-holder').height());
| + | |
| − | if (holder.find('.preview-icon-holder').length > 0){
| + | |
| − | holder.find('.right-div').css("height",holder.find('.preview-icon-holder').height());
| + | |
| − | }else{
| + | |
| − | holder.find('.right-div').css("height","");
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − |
| + | |
| − | var menuRatio = $(window).width()/menu_layout.LEFT_MENU_WIDTH;
| + | |
| − | if (menuPosition == "left" && menuRatio > 4){
| + | |
| − | menuAlign = "center";
| + | |
| − | masterContainer.addClass("left-menu-layout");
| + | |
| − | holder.find(".preview-content-holder").css("height",$(window).height());
| + | |
| − | if (leftMenuPlaceHolder.length == 0){
| + | |
| − | leftMenuPlaceHolder = $("<div />").addClass("left-menu-placeholder");
| + | |
| − | var holderHandle = holder.next(".control-handle");
| + | |
| − | leftMenuPlaceHolder.append(holder);
| + | |
| − | if (holderHandle.length > 0){
| + | |
| − | leftMenuPlaceHolder.append(holderHandle);
| + | |
| − | }
| + | |
| − | $(".master.container > #children").before(leftMenuPlaceHolder);
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | masterContainer.removeClass("left-menu-layout");
| + | |
| − | holder.find(".preview-content-holder").css("height","");
| + | |
| − | masterContainer.find("#children").first().css("width","");
| + | |
| − | menuPosition="top";
| + | |
| − | if (leftMenuPlaceHolder.length != 0){
| + | |
| − | var holderHandle = holder.next(".control-handle");
| + | |
| − | $(".master.container > #children").prepend(holder);
| + | |
| − | if (holderHandle.length > 0){
| + | |
| − | holder.after(holderHandle);
| + | |
| − | }
| + | |
| − |
| + | |
| − | leftMenuPlaceHolder.remove();
| + | |
| − | }
| + | |
| − | }
| + | |
| − | if (menuAlign == "center"){
| + | |
| − | holder.addClass("center-aligned-menu");
| + | |
| − | }else{
| + | |
| − | holder.removeClass("center-aligned-menu");
| + | |
| − | }
| + | |
| − | var previewTitle = currentItem.find(".preview-title");
| + | |
| − | var previewSubtitle = currentItem.find(".preview-subtitle");
| + | |
| − | var rightSideDiv = currentItem.find('.right-div');
| + | |
| − | var leftSideDiv = currentItem.find('.left-div');
| + | |
| − | leftSideDiv.find(".helper-div").show();
| + | |
| − | if (currentItem.find(".element-placeholder[data-elementtype='TITLE']").length > 0 && currentItem.find(".element-placeholder[data-elementtype='SUBTITLE']").length > 0){
| + | |
| − | currentItem.find(".helper-div").hide();
| + | |
| − | if (currentItem.find(".element-placeholder[data-elementtype='ICON']").length > 0){
| + | |
| − | menu_layout.centerifyLinks(leftSideDiv,rightSideDiv);
| + | |
| − | }else{
| + | |
| − | menu_layout.uncenterifyLinks(leftSideDiv,rightSideDiv);
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | currentItem.find(".helper-div").show();
| + | |
| − | menu_layout.uncenterifyLinks(leftSideDiv,rightSideDiv);
| + | |
| − | }
| + | |
| − |
| + | |
| − | var stripe = container.closest(".master.item-box");
| + | |
| − |
| + | |
| − | var textElement = currentItem.find(".preview-title");
| + | |
| − | var contentHolder = currentItem.find(".preview-content-holder");
| + | |
| − | var contentWrapper = currentItem.find(".preview-content-wrapper");
| + | |
| − |
| + | |
| − | var originalFontSize = "N/A";
| + | |
| − | if (currentItem.find(".element-placeholder[data-elementtype='TITLE']").length == 0){
| + | |
| − | originalFontSize = parseInt(leftSideDiv.attr("data-orig-font-size"));
| + | |
| − | if (textElement.attr("data-orig-font-size")){
| + | |
| − | if (originalFontSize != textElement.attr("data-orig-font-size")){
| + | |
| − | originalFontSize = textElement.attr("data-orig-font-size");
| + | |
| − | }
| + | |
| − | }
| + | |
| − | textElement.css("font-size",originalFontSize + "px");
| + | |
| − | }
| + | |
| − |
| + | |
| − | var totalLinksWidth = 0;
| + | |
| − |
| + | |
| − | if (typeof stripe.attr("data-original-menu-width") != "undefined"){
| + | |
| − | totalLinksWidth = parseInt(stripe.attr("data-original-menu-width"));
| + | |
| − | }else{
| + | |
| − | totalLinksWidth = currentItem.find(".preview-item-links").outerWidth(true);
| + | |
| − | if (stripe.css("display") != "none"){
| + | |
| − | stripe.attr("data-original-menu-width",totalLinksWidth)
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − |
| + | |
| − | var textSpace = 0;
| + | |
| − | if (leftSideDiv.length > 0){
| + | |
| − | textSpace = parseInt(leftSideDiv.width());
| + | |
| − | }
| + | |
| − |
| + | |
| − | var shrinkerRelevantContainer = contentWrapper;
| + | |
| − | if (menuAlign == "center"){
| + | |
| − | if (masterContainer.hasClass("left-menu-layout")){
| + | |
| − | totalLinksWidth = 0; //(no shrink at all)
| + | |
| − | shrinkerRelevantContainer = holder.find(".item-wrapper");
| + | |
| − | }else{
| + | |
| − | textSpace = 0; //(shrink and center)
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | //Shrink if needed
| + | |
| − | if (leftSideDiv.outerWidth(true) + totalLinksWidth > shrinkerRelevantContainer.width()){
| + | |
| − | var newFontSize = SpimeEngine.shrinkTextToFit(originalFontSize,shrinkerRelevantContainer,leftSideDiv,textElement,totalLinksWidth,15);
| + | |
| − | if (newFontSize != -1){
| + | |
| − | textElement.css("font-size",newFontSize);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | var atLeastOneLink = holder.find("#sr-basket-widget , .preview-element.Link.item-link").length > 0
| + | |
| − | alwaysMinify = alwaysMinify && menuAlign=="left" && menuPosition=="top";
| + | |
| − |
| + | |
| − | //console.log( contentHolder.width() + " " + totalLinksWidth + " " + textSpace + " " + alwaysMinify + " " +atLeastOneLink)
| + | |
| − |
| + | |
| − | if ((contentHolder.width() <= totalLinksWidth + textSpace || alwaysMinify) && menuPosition=="top" && atLeastOneLink){
| + | |
| − | //if shrink is not working menufyLinks
| + | |
| − | menu_layout.menufyLinks(container,currentItem.find(".preview-item-links"));
| + | |
| − | //if menufy is not enough remove text
| + | |
| − | if (contentHolder.width() < textSpace + rightSideDiv.width()){
| + | |
| − | //console.log("still NO space ");
| + | |
| − | leftSideDiv.find(".helper-div").hide();
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | if (!alwaysMinify || !atLeastOneLink){
| + | |
| − | menu_layout.unmenufyLinks(container,container.next(".preview-item-links"));
| + | |
| − |
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | if (!holder.hasClass("menu-open")){
| + | |
| − | if (settings.attr("data-menu_overlay") == "absolute" && !holder.is(".being-scrolled")){
| + | |
| − | holder.addClass("force-transparency");
| + | |
| − | if (settings.attr("data-menu_overlay") == "absolute" && holder.css("position")!= "absolute"){
| + | |
| − | holder.css("position","absolute");
| + | |
| − | }
| + | |
| − | }
| + | |
| − | if (settings.attr("data-menu_overlay") == "relative" && !holder.is(".being-scrolled")){
| + | |
| − | if (settings.attr("data-menu_overlay") == "relative" && holder.css("position")!= "relative"){
| + | |
| − | holder.css("position","relative");
| + | |
| − | holder.removeClass("force-transparency");
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | menu_layout.updateBurgerColor(stripe.find(".preview-item-links"));
| + | |
| − | menu_layout.adjustMenuScrolling(stripe);
| + | |
| − | });
| + | |
| − |
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.forceRedraw = function(elements){
| + | |
| − | elements.each(function(){
| + | |
| − | var element = $(this)[0];
| + | |
| − | var disp = element.style.display;
| + | |
| − | element.style.display = 'none';
| + | |
| − | var trick = element.offsetHeight;
| + | |
| − | element.style.display = disp;
| + | |
| − | });
| + | |
| − |
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.adjustMenuScrolling = function(stripe){
| + | |
| − | var linksHolder = stripe.find(".preview-item-links");
| + | |
| − | var linksWrapper = linksHolder.find(".preview-links-wrapper");
| + | |
| − | if (stripe.hasClass("full-screen-menu menu-open")){
| + | |
| − | if (linksWrapper.outerHeight(true) + linksWrapper.outerHeight(true)/2 > $(window).innerHeight() - stripe.height() -50){
| + | |
| − | if (!linksHolder.hasClass("transform-disabled")){
| + | |
| − | linksHolder.addClass("transform-disabled")
| + | |
| − | linksWrapper.css({"top":stripe.height()});
| + | |
| − | //linksWrapper.closest(".preview-item-links").css({"overflow-y":"scroll","padding-right": "20px"})//.attr("id","scrolling-menu");
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | linksWrapper.css({"top":""});
| + | |
| − | //linksWrapper.closest(".preview-item-links").css({"overflow-y":"","padding-right": ""});
| + | |
| − | linksHolder.removeClass("transform-disabled")
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | if (linksHolder.hasClass("transform-disabled")){
| + | |
| − | linksHolder.removeClass("transform-disabled")
| + | |
| − | }
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.handleScroll = function(holder,scrollPos){
| + | |
| − | if (holder.hasClass("is-blocked")){
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | var settings = holder.find(".layout-settings");
| + | |
| − | var menuAlign = settings.attr("data-menu_align");
| + | |
| − | var menuPosition = settings.attr("data-menu_position");
| + | |
| − | if(holder.find(".item-wrapper").innerWidth() < 400 && menuPosition!="left"){
| + | |
| − | menuAlign = "left";
| + | |
| − | holder.addClass("force-min-height50 minimal-design");
| + | |
| − | }else{
| + | |
| − | holder.removeClass("minimal-design");
| + | |
| − | }
| + | |
| − | if (settings.attr("data-menu_scroll") == "true"){
| + | |
| − | if (scrollPos == 0){
| + | |
| − | $("#menu-placeholder").remove();
| + | |
| − | if (menuAlign == "center"){
| + | |
| − | holder.addClass("center-aligned-menu");
| + | |
| − | }
| + | |
| − | holder.css({"position":settings.attr("data-menu_overlay")});
| + | |
| − | holder.removeClass("animated-top");
| + | |
| − | holder.css("top","");
| + | |
| − | //holder.find(".preview-subtitle-holder").show();
| + | |
| − | holder.find('.left-div').removeClass("scale-down08");
| + | |
| − | if (holder.find(".item-wrapper").innerWidth() >= 400){
| + | |
| − | holder.removeClass("force-min-height50");
| + | |
| − | }
| + | |
| − | holder.removeClass("being-scrolled");
| + | |
| − | if (!holder.is(".menufied")){
| + | |
| − | //holder.find('.right-div').css("height","");
| + | |
| − | }
| + | |
| − | if (settings.attr("data-menu_overlay") == "absolute"){
| + | |
| − | holder.addClass("force-transparency");
| + | |
| − | }
| + | |
| − | menu_layout.forceRedraw(holder.find(".item-wrapper"))
| + | |
| − | }else if(scrollPos < holder.outerHeight(true)){
| + | |
| − | //console.log("still seen")
| + | |
| − | //if(typeof window["EditorHelper"] != "undefined"){
| + | |
| − | //if (holder.is(".being-scrolled")){
| + | |
| − | // holder.css("top",scrollPos);
| + | |
| − | //}
| + | |
| − | //}
| + | |
| − |
| + | |
| − | }else{
| + | |
| − | if (holder.css("position") != "fixed" ){
| + | |
| − | //Create a menu place holder to prevent the mobile scroll jump
| + | |
| − | var menuHeight = parseInt(holder.css("height"));
| + | |
| − | if (holder.parent().find("#menu-placeholder").length == 0 && !holder.is(".force-transparency")){
| + | |
| − | var menuPlaceHolder = $("<div />").attr("id","menu-placeholder").css({"height":menuHeight,"width":"100%"});
| + | |
| − | holder.after(menuPlaceHolder);
| + | |
| − | }
| + | |
| − | //holder.attr("data-orig-min-height", holder.css("min-height"));
| + | |
| − | holder.removeClass("center-aligned-menu");
| + | |
| − | holder.addClass("being-scrolled");
| + | |
| − | holder.addClass("force-min-height50");
| + | |
| − | holder.css({"position":"fixed","top":menuHeight*-1,"left":"0px"});
| + | |
| − | holder.find('.left-div').addClass("scale-down08");
| + | |
| − | holder.find('.right-div').css("height",holder.find('.left-div').height());
| + | |
| − | //holder.find(".preview-subtitle-holder").hide();
| + | |
| − | holder.addClass("animated-top");
| + | |
| − | holder.removeClass("force-transparency");
| + | |
| − | setTimeout(function(){
| + | |
| − | var offsetFix = 0;
| + | |
| − | //if(typeof window["EditorHelper"] != "undefined"){
| + | |
| − | //offsetFix = scrollPos;
| + | |
| − | // if ($(".site-thumb").lenght > 0){
| + | |
| − | // offsetFix = 0;
| + | |
| − | // }
| + | |
| − | //}
| + | |
| − | holder.css("top",offsetFix);
| + | |
| − | },10);
| + | |
| − | }else{
| + | |
| − | //if(typeof window["EditorHelper"] != "undefined" ){
| + | |
| − | // holder.removeClass("animated-top");
| + | |
| − | // holder.css("top",scrollPos);
| + | |
| − | //}
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | menu_layout.updateBurgerColor = function(linksHolder){
| + | |
| − | var linksColor = linksHolder.find(".item-link").css("color");
| + | |
| − | var styleForBurger = $("head style#for-burger");
| + | |
| − | if (styleForBurger.length == 0){
| + | |
| − | styleForBurger = $("<style>").attr("id","for-burger");
| + | |
| − | }
| + | |
| − | styleForBurger.text(".hamburger-inner:before,.hamburger-inner,.hamburger-inner:after {background-color:"+linksColor+";}")
| + | |
| − | $('head').append(styleForBurger);
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.menufyLinks = function(container,linksHolder){
| + | |
| − | var stripe = container.closest(".master.item-box");
| + | |
| − | var settings = stripe.find(".layout-settings");
| + | |
| − | var minifiyType = settings.attr("data-always_minified");
| + | |
| − |
| + | |
| − | var menuBtn = container.find(".links-menu-btn");
| + | |
| − | //menuBtn.find(".hamburger-inner").css("background-color",linksColor);
| + | |
| − |
| + | |
| − | menuBtn.addClass("shown");
| + | |
| − | if (container.next(".preview-item-links").length == 0){
| + | |
| − | var allLinks = linksHolder.children();
| + | |
| − | var menuBackground = container.find(".item-content").css("background-color");
| + | |
| − | var menuMaxWidth = container.css("max-width");
| + | |
| − | allLinks.addClass("flipped");
| + | |
| − | stripe.addClass("menufied");
| + | |
| − | if (!stripe.hasClass("menu-open")){
| + | |
| − | //linksHolder.css({"max-width":menuMaxWidth,"background-color":menuBackground});
| + | |
| − | linksHolder.hide();
| + | |
| − | }
| + | |
| − |
| + | |
| − | //if (minifiyType != "false"){
| + | |
| − | container.after(linksHolder);
| + | |
| − | //linksHolder.css({"background-color":stripe.css("background-color")});
| + | |
| − | //}
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | stripe.attr("data-original-stripe-height" , stripe.height());
| + | |
| − |
| + | |
| − | menuBtn.unbind('click').bind('click', function(e){
| + | |
| − | e.stopPropagation();
| + | |
| − | menu_layout.burgerClick($(this),stripe,linksHolder);
| + | |
| − | });
| + | |
| − |
| + | |
| − |
| + | |
| − | if(typeof window["EditorHelper"] == "undefined"){
| + | |
| − | linksHolder.unbind("click").bind("click",function(e){
| + | |
| − | e.stopPropagation();
| + | |
| − | menu_layout.burgerClick(menuBtn,stripe,linksHolder);
| + | |
| − | });
| + | |
| − | }
| + | |
| − |
| + | |
| − | stripe.find('.right-div').css("height",stripe.find('.preview-icon-holder').height());
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | menu_layout.burgerClick = function(burger,stripe,linksHolder){
| + | |
| − | if (!burger.hasClass("being-clicked")){
| + | |
| − | burger.addClass("being-clicked")
| + | |
| − | var settings = stripe.find(".layout-settings");
| + | |
| − | var minifiyType = settings.attr("data-always_minified");
| + | |
| − | linksHolder.removeClass("allow-bg-color");
| + | |
| − | switch(minifiyType){
| + | |
| − | case "true":
| + | |
| − | menu_layout.handleMinifiedDefault(burger,stripe,linksHolder,settings);
| + | |
| − | break;
| + | |
| − | case "full_screen":
| + | |
| − | linksHolder.addClass("allow-bg-color");
| + | |
| − | menu_layout.handleMinifiedFullScreen(burger,stripe,linksHolder,settings);
| + | |
| − | break;
| + | |
| − | case "side_screen":
| + | |
| − | linksHolder.addClass("allow-bg-color");
| + | |
| − | menu_layout.handleMinifiedSideScreen(burger,stripe,linksHolder,settings);
| + | |
| − | break;
| + | |
| − | default:
| + | |
| − | menu_layout.handleMinifiedDefault(burger,stripe,linksHolder,settings);
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | menu_layout.adjustMenuScrolling(stripe);
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.handleMinifiedDefault = function(burger,stripe,linksHolder,settings){
| + | |
| − | stripe.addClass("animated");
| + | |
| − | burger.toggleClass("is-active");
| + | |
| − | if (burger.hasClass("is-active")){
| + | |
| − | stripe.removeClass("force-transparency");
| + | |
| − | linksHolder.addClass("flipped");
| + | |
| − | linksHolder.removeClass("no-place");
| + | |
| − | stripe.addClass("menu-open");
| + | |
| − | if (linksHolder.width() >= stripe.width() && !linksHolder.is(".no-place")){
| + | |
| − | linksHolder.addClass("no-place")
| + | |
| − | }
| + | |
| − | stripe.find(".item-content").addClass("flipped");
| + | |
| − | burger.removeClass("being-clicked");
| + | |
| − | linksHolder.slideDown(function(){
| + | |
| − |
| + | |
| − | });
| + | |
| − | }else{
| + | |
| − | linksHolder.slideUp(function(){
| + | |
| − | stripe.removeClass("menu-open");
| + | |
| − | if (settings.attr("data-menu_overlay") == "absolute" && !stripe.is(".being-scrolled")){
| + | |
| − | stripe.addClass("force-transparency");
| + | |
| − | }
| + | |
| − | });
| + | |
| − | burger.removeClass("being-clicked");
| + | |
| − |
| + | |
| − | linksHolder.removeClass("flipped");
| + | |
| − | //linksHolder.css({"background-color":""});
| + | |
| − | }
| + | |
| − |
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.handleMinifiedFullScreen = function(burger,stripe,linksHolder,settings){
| + | |
| − | burger.toggleClass("is-active");
| + | |
| − | if (burger.hasClass("is-active")){
| + | |
| − | //stripe.css("background-color","transparent")
| + | |
| − | var master = $(".master.container");
| + | |
| − | linksHolder.css({"margin-left":master.css("margin-left"),"margin-right":master.css("margin-right")});
| + | |
| − | if (master.is(".narrow-site")){
| + | |
| − | linksHolder.css("width","1000px");
| + | |
| − | }
| + | |
| − | $("body").addClass("noscroll");
| + | |
| − | menu_layout.disableScroll();
| + | |
| − | linksHolder.addClass("flipped");
| + | |
| − | stripe.find(".item-content").addClass("flipped");
| + | |
| − | linksHolder.fadeIn(function(){
| + | |
| − | burger.removeClass("being-clicked")
| + | |
| − | });
| + | |
| − | stripe.addClass("full-screen-menu menu-open");
| + | |
| − | }else{
| + | |
| − | //stripe.css("background-color","")
| + | |
| − | $("body").removeClass("noscroll");
| + | |
| − | menu_layout.enableScroll();
| + | |
| − | linksHolder.removeClass("flipped");
| + | |
| − | linksHolder.fadeOut(function(){
| + | |
| − | burger.removeClass("being-clicked")
| + | |
| − | stripe.removeClass("full-screen-menu menu-open");
| + | |
| − | //linksHolder.css({"background-color":""});
| + | |
| − | linksHolder.css({"margin-left":"","margin-right":"","width":""})
| + | |
| − | });
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.handleMinifiedSideScreen = function(burger,stripe,linksHolder,settings){
| + | |
| − | burger.toggleClass("is-active");
| + | |
| − | if (burger.hasClass("is-active")){
| + | |
| − | var master = $(".master.container");
| + | |
| − | linksHolder.css({"margin-right":master.css("margin-right")})
| + | |
| − | linksHolder.addClass("flipped");
| + | |
| − | stripe.find(".item-content").addClass("flipped");
| + | |
| − | stripe.addClass("side-screen-menu menu-open");
| + | |
| − | linksHolder.show();
| + | |
| − | setTimeout(function(){
| + | |
| − | burger.removeClass("being-clicked")
| + | |
| − | linksHolder.css("right","0px")
| + | |
| − | },10)
| + | |
| − |
| + | |
| − | }else{
| + | |
| − | linksHolder.css({"transition":"none"});
| + | |
| − | linksHolder.animate({
| + | |
| − | right:"-360px"
| + | |
| − | }, 1000, function() {
| + | |
| − | burger.removeClass("being-clicked")
| + | |
| − | linksHolder.hide();
| + | |
| − | stripe.removeClass("side-screen-menu menu-open");
| + | |
| − | linksHolder.css({"margin-right":"","right":"","transition":""});
| + | |
| − | });
| + | |
| − | linksHolder.removeClass("flipped");
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.handleMinifiedBoxed = function(burger,stripe,linksHolder,settings){
| + | |
| − | burger.toggleClass("is-active");
| + | |
| − | if (burger.hasClass("is-active")){
| + | |
| − | stripe.removeClass("force-transparency");
| + | |
| − | linksHolder.addClass("flipped");
| + | |
| − | stripe.find(".item-content").addClass("flipped");
| + | |
| − | linksHolder.css({"top":stripe.height()})
| + | |
| − | linksHolder.fadeIn();
| + | |
| − | stripe.addClass("boxed-menu menu-open");
| + | |
| − | }else{
| + | |
| − | linksHolder.removeClass("flipped");
| + | |
| − | linksHolder.css("right","0px")
| + | |
| − | //linksHolder.fadeOut(function(){stripe.removeClass("boxed-menu menu-open");});
| + | |
| − | //if (settings.attr("data-menu_overlay") == "absolute" && !stripe.is(".being-scrolled")){
| + | |
| − | // stripe.addClass("force-transparency");
| + | |
| − | //}
| + | |
| − |
| + | |
| − |
| + | |
| − | }
| + | |
| − |
| + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | menu_layout.disableScroll = function(){
| + | |
| − | var x=window.scrollX;
| + | |
| − | var y=window.scrollY;
| + | |
| − | window.onscroll=function(){window.scrollTo(x, y);};
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.enableScroll = function(){
| + | |
| − | window.onscroll=function(){};
| + | |
| − | };
| + | |
| − | | + | |
| − | menu_layout.unmenufyLinks = function(container,linksHolder){
| + | |
| − | var holder = container.closest(".master.item-box");
| + | |
| − | if (holder.hasClass("menufied")){//container.next(".preview-item-links").length > 0){
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | var menuLinksHolder = linksHolder.find(".menu-links-holder");
| + | |
| − | //linksHolder.find("span").css({"display":"","margin-right":"","margin-left":""});
| + | |
| − | linksHolder.css({"max-width":"","background-color":"","margin":""});
| + | |
| − | holder.removeClass("menufied");
| + | |
| − | //linksHolder.find(".links-menu-btn").removeClass("shown");
| + | |
| − | container.find(".links-menu-btn").removeClass("shown");
| + | |
| − | var allLinks = menuLinksHolder.children();
| + | |
| − | allLinks.removeClass("flipped");
| + | |
| − | container.find(".item-content").removeClass("flipped");
| + | |
| − | linksHolder.append(allLinks);
| + | |
| − | container.find(".right-div").prepend(linksHolder);
| + | |
| − | var stripe = container.closest(".master.item-box");
| + | |
| − | stripe.removeClass("animated");
| + | |
| − | linksHolder.show();
| + | |
| − | linksHolder.removeClass("flipped");
| + | |
| − | //holder.find('.right-div').css("height","");
| + | |
| − | holder.find('.right-div').css("height",holder.find('.preview-icon-holder').height());
| + | |
| − | linksHolder.removeClass("allow-bg-color");
| + | |
| − | if (holder.hasClass("menu-open")){
| + | |
| − | holder.find(".hamburger").click();
| + | |
| − | setTimeout(function(){
| + | |
| − | holder.find(".preview-item-links").css("display","");
| + | |
| − | },1500);
| + | |
| − | }
| + | |
| − | holder.find(".preview-item-links").css("display","");
| + | |
| − | }
| + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | menu_layout.calculateSubmenuBG = function(container,submenu){
| + | |
| − | var menuBackground = container.find(".item-content").css("background-color");
| + | |
| − | if (menuBackground.indexOf("rgba(") != -1 && menuBackground.indexOf(", 0)") != -1){
| + | |
| − | menuBackground = container.closest(".master.item-box").css("background-color");
| + | |
| − | }
| + | |
| − | submenu.css("background-color",menuBackground);
| + | |
| − | };; var footer_layout = {};
| + | |
| − | | + | |
| − | footer_layout.init = function(container,items){
| + | |
| − | items.each(function(){
| + | |
| − | var currentItem = $(this);
| + | |
| − | var links = currentItem.find(".preview-item-links").children();
| + | |
| − | links.css("clear","");
| + | |
| − | links.each(function(idx){
| + | |
| − | if (idx % 2 == 0 && idx!=0){
| + | |
| − | $(this).css("clear","left");
| + | |
| − | }
| + | |
| − | });
| + | |
| − | });
| + | |
| − |
| + | |
| − | };
| + | |
| − | | + | |
| − | footer_layout.applyLayout = function(container,items){
| + | |
| − | items.each(function(){
| + | |
| − | var currentItem = $(this);
| + | |
| − | var stripe = container.closest(".master.item-box");
| + | |
| − | var rightDivWidth = currentItem.find(".preview-social-wrapper").width();
| + | |
| − | var leftDivWidth = currentItem.find(".helper-div").width();
| + | |
| − | var centerDivWidth = currentItem.find(".preview-item-links").innerWidth();
| + | |
| − | var stripeWidth = stripe.width();
| + | |
| − | if (rightDivWidth + leftDivWidth + centerDivWidth > stripeWidth){
| + | |
| − | footer_layout.flipVertically(currentItem);
| + | |
| − | }else{
| + | |
| − | footer_layout.unflip(currentItem);
| + | |
| − | }
| + | |
| − | });
| + | |
| − | };
| + | |
| − | | + | |
| − | footer_layout.flipVertically = function(item){
| + | |
| − | if (typeof item.attr("data-flipped") == "undefined"){
| + | |
| − | item.attr("data-flipped","true");
| + | |
| − | var rightDiv = item.find(".right-div");
| + | |
| − | var leftDiv = item.find(".left-div");
| + | |
| − | var centerDiv = item.find(".center-div");
| + | |
| − | rightDiv.addClass("flipped");
| + | |
| − | leftDiv.addClass("flipped");
| + | |
| − | centerDiv.addClass("flipped");
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | footer_layout.unflip = function(item){
| + | |
| − | if (typeof item.attr("data-flipped") != "undefined"){
| + | |
| − | item.removeAttr("data-flipped","true");
| + | |
| − | var rightDiv = item.find(".right-div");
| + | |
| − | var leftDiv = item.find(".left-div");
| + | |
| − | var centerDiv = item.find(".center-div");
| + | |
| − | rightDiv.removeClass("flipped");
| + | |
| − | leftDiv.removeClass("flipped");
| + | |
| − | centerDiv.removeClass("flipped");
| + | |
| − | }
| + | |
| − | };; var multi_layout = {};
| + | |
| − | | + | |
| − | multi_layout.init = function(container,items){
| + | |
| − | //items.find(".image-cover").css("min-height","inherit");
| + | |
| − | items = items.not(".stripe-header").not(".stripe-footer");
| + | |
| − | items.each(function(){
| + | |
| − | var helperDiv = $(this).find(".helper-div");
| + | |
| − | //there is no class to helperdiv (usually on switching to multi)
| + | |
| − | // if (helperDiv.attr("class").indexOf("top") == -1 && helperDiv.attr("class").indexOf("middle") == -1 && helperDiv.attr("class").indexOf("bottom") == -1){
| + | |
| − | // helperDiv.addClass()
| + | |
| − | // }
| + | |
| − | var picSide = $(this).find(".pic-side");
| + | |
| − | var textSide = $(this).find(".text-side");
| + | |
| − | if (helperDiv.is(".top-center")){
| + | |
| − | picSide.before(textSide);
| + | |
| − | }else{
| + | |
| − | picSide.after(textSide);
| + | |
| − | }
| + | |
| − | });
| + | |
| − | };
| + | |
| − | | + | |
| − | multi_layout.applyLayout = function(container,items,paramsFromRealTime){
| + | |
| − | items = items.not(".stripe-header").not(".stripe-footer");
| + | |
| − | var textVerticalAligner;//if it is bigger that the pic side we should flip?
| + | |
| − | var helperDiv = items.find(".helper-div");
| + | |
| − | var picSide = items.find(".pic-side");
| + | |
| − | var textSide = items.find(".text-side");
| + | |
| − |
| + | |
| − |
| + | |
| − | items.find(".image-cover , .item-preview").css("min-height","inherit");
| + | |
| − |
| + | |
| − | //Handle Ratio
| + | |
| − | if (container.find(".arranger-settings").length > 0){
| + | |
| − | var arrangerSettings = container.find(".arranger-settings");
| + | |
| − | if (arrangerSettings.attr("data-arranger_type") == "matrix"){
| + | |
| − | var isMazonite = arrangerSettings.attr("data-arranger_order_type") == "mazonite";
| + | |
| − | var ratioFromArranger = parseFloat(arrangerSettings.attr("data-arranger_item_ratio")).toFixed(1);
| + | |
| − | items.each(function(){
| + | |
| − | var currentItem = $(this);
| + | |
| − | var innerPic = currentItem.find(".inner-pic");
| + | |
| − | if (isMazonite){
| + | |
| − | var origHeight = innerPic.attr("data-orig-height");
| + | |
| − | var origWidth = innerPic.attr("data-orig-width");
| + | |
| − | if (origHeight && origWidth){
| + | |
| − | ratioFromArranger = parseInt(origHeight) / parseInt(origWidth)
| + | |
| − | }else{
| + | |
| − | if (innerPic.attr("id") != "no-image"){
| + | |
| − | container.closest(".master.item-box").addClass("rearrange");
| + | |
| − | }
| + | |
| − | ratioFromArranger = 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | }
| + | |
| − | var newPicHeight = currentItem.find(".pic-side").width() * ratioFromArranger;
| + | |
| − | if (currentItem.find(".video-frame").length > 0 && isMazonite){
| + | |
| − | //found video
| + | |
| − | newPicHeight = currentItem.find(".pic-side").width() * (9/16);
| + | |
| − | }
| + | |
| − | if (helperDiv.is(".top-center") || helperDiv.is(".bottom-center")){
| + | |
| − | innerPic.css({"height":newPicHeight});
| + | |
| − | currentItem.find(".helper-div").css({"min-height":""});
| + | |
| − | }else{
| + | |
| − | currentItem.find(".helper-div").css({"min-height":newPicHeight});
| + | |
| − | innerPic.css({"height":""});
| + | |
| − | }
| + | |
| − | });
| + | |
| − |
| + | |
| − | }else{
| + | |
| − | items.find(".item-details").css("height","")
| + | |
| − | if (helperDiv.is(".top-center") || helperDiv.is(".bottom-center")){
| + | |
| − | items.each(function(){
| + | |
| − | var currentItem = $(this)
| + | |
| − | var textHeight = currentItem.find(".item-details").outerHeight(true);
| + | |
| − | var newHeight = currentItem.height() - textHeight
| + | |
| − | currentItem.find(".inner-pic").css("height",newHeight);
| + | |
| − | //if (currentItem.find(".inner-pic").is(".circlize")){
| + | |
| − | // console.log("here")
| + | |
| − | //}
| + | |
| − | });
| + | |
| − | }else{
| + | |
| − | picSide.find(".inner-pic").css({"height":""});
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | items.find(".item-details").css("height","")
| + | |
| − | if (helperDiv.is(".top-center") || helperDiv.is(".bottom-center")){
| + | |
| − | items.each(function(){
| + | |
| − | var currentItem = $(this)
| + | |
| − | var textHeight = currentItem.find(".item-details").outerHeight(true);
| + | |
| − | var newHeight = currentItem.height() - textHeight
| + | |
| − | currentItem.find(".inner-pic").not(".circlize").css("height",newHeight);
| + | |
| − | if (currentItem.find(".inner-pic").is(".circlize")){
| + | |
| − | currentItem.find(".pic-side").not(".circlize").css("height",newHeight);
| + | |
| − | }
| + | |
| − | });
| + | |
| − | }else{
| + | |
| − | picSide.find(".inner-pic").css({"height":""});
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | if (container.width() < 500){
| + | |
| − | //if (!picSide.attr("data-prev-height")){
| + | |
| − | //picSide.attr("data-prev-height",picSide[0].style.height)
| + | |
| − | //picSide.css("min-height","");
| + | |
| − | //picSide.css("height","");
| + | |
| − | //picSide.addClass("reset")
| + | |
| − | //}
| + | |
| − | if (!helperDiv.is(".middle-center") && !helperDiv.is(".top-center") && !helperDiv.is(".bottom-center")){
| + | |
| − | items.each(function(){
| + | |
| − | multi_layout.flipVertically($(this));
| + | |
| − | });
| + | |
| − | }
| + | |
| − | //multi_layout.init(container,items); //cause edited text to loose focus
| + | |
| − |
| + | |
| − | }else{
| + | |
| − | if (helperDiv.attr("data-orig-class")){
| + | |
| − | items.each(function(){
| + | |
| − | multi_layout.unflip($(this));
| + | |
| − | });
| + | |
| − | //multi_layout.init(container,items); //cause edited text to loose focus
| + | |
| − |
| + | |
| − | //picSide.css("min-height",picSide.attr("data-prev-height"));
| + | |
| − | picSide.css("top","")
| + | |
| − | textSide.find(".vertical-aligner").css("min-height","")
| + | |
| − |
| + | |
| − | }
| + | |
| − | //picSide.css("bottom","")
| + | |
| − | //picSide.css("height",picSide.attr("data-prev-height"));
| + | |
| − | //picSide.removeAttr("data-prev-height");
| + | |
| − | //picSide.removeClass("reset")
| + | |
| − | }
| + | |
| − |
| + | |
| − | if (paramsFromRealTime && "force_redraw" in paramsFromRealTime){
| + | |
| − | multi_layout.forceRedraw($(".item-wrapper"));
| + | |
| − | }
| + | |
| − | //items.find(".background-div, .item-preview, .preview-image-holder,.text-side, .vertical-aligner , .inner-pic").css("min-height","inherit");
| + | |
| − | //, .text-side, .vertical-aligner, .inner-pic
| + | |
| − | //textSide.css("height","");
| + | |
| − | if (helperDiv.is(".top-center") || helperDiv.is(".bottom-center")){
| + | |
| − | var insideSlideshow = container.is(".flex");
| + | |
| − | //multi_layout.handleVerticalLayouts(items,insideSlideshow,helperDiv);
| + | |
| − | }
| + | |
| − | if (helperDiv.is(".middle-center")){
| + | |
| − | items.each(function(){
| + | |
| − | var currentItemDetails = $(this).find(".item-details");
| + | |
| − | var draggableImages = $(this).find(".draggable-div-holder");
| + | |
| − | if (currentItemDetails.css("text-align") == "center" || currentItemDetails.css("text-align") == "right"){
| + | |
| − | var divisor = 2;
| + | |
| − | if ( currentItemDetails.css("text-align") == "right"){
| + | |
| − | divisor = 1;
| + | |
| − | }
| + | |
| − | var textSideMaxWidth = $(this).find(".text-side").css("max-width");
| + | |
| − | if (textSideMaxWidth != "none"){
| + | |
| − | textSideMaxWidth = parseInt(textSideMaxWidth);
| + | |
| − | if (draggableImages.width() < textSideMaxWidth ){
| + | |
| − | var newMarginLeft = (textSideMaxWidth - draggableImages.width())/divisor * -1;
| + | |
| − | draggableImages.css("margin-left",newMarginLeft);
| + | |
| − | }else{
| + | |
| − | draggableImages.css("margin-left",0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | if ( currentItemDetails.css("vertical-align") == "top"){
| + | |
| − | draggableImages.css("margin-top",0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | if ( currentItemDetails.css("vertical-align") == "middle" || currentItemDetails.css("vertical-align") == "bottom"){
| + | |
| − | if (currentItemDetails.css("vertical-align") == "bottom"){
| + | |
| − | if (!draggableImages.is(".bottomized")){
| + | |
| − | draggableImages.addClass("bottomized");
| + | |
| − | draggableImages.css({"top":"auto","bottom":0});
| + | |
| − | draggableImages.css("margin-top",0);
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | if (draggableImages.is(".bottomized")){
| + | |
| − | draggableImages.css({"bottom":"","top":""});
| + | |
| − | draggableImages.removeClass("bottomized");
| + | |
| − | }
| + | |
| − | var itemDetailsHeight = parseInt(currentItemDetails.innerHeight());
| + | |
| − | var stripeHeight = parseInt($(this).closest(".master.item-box").height());
| + | |
| − | if (itemDetailsHeight <= stripeHeight ){
| + | |
| − | var newMarginTop = (stripeHeight - draggableImages.height())/2;
| + | |
| − | draggableImages.css("margin-top",newMarginTop);
| + | |
| − | }else{
| + | |
| − | draggableImages.css("margin-top",0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | multi_layout.forceRedraw = function(elements){
| + | |
| − | //setting body height to prevent jitter
| + | |
| − | $("body").css("height",$("body").height())
| + | |
| − | elements.each(function(){
| + | |
| − | var element = $(this)[0];
| + | |
| − | var disp = element.style.display;
| + | |
| − | element.style.display = 'none';
| + | |
| − | var trick = element.offsetHeight;
| + | |
| − | element.style.display = disp;
| + | |
| − | });
| + | |
| − | $("body").css("height","")
| + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | multi_layout.handleVerticalLayouts = function(items,insideSlideshow,helperDiv,fromFlip){
| + | |
| − |
| + | |
| − | // var maxHeight = 0;
| + | |
| − | // var innerMaxHeight = 0;
| + | |
| − | // var maxItemBoxHeight = 0;
| + | |
| − | // if (!insideSlideshow){
| + | |
| − | // items.each(function(){
| + | |
| − | // textSideHeight = $(this).find(".text-side").outerHeight(true);
| + | |
| − | // maxHeight = Math.max(maxHeight,textSideHeight);
| + | |
| − | // var itemContent = $(this).find(".item-content").andSelf().filter(".item-content");
| + | |
| − | // maxItemBoxHeight = Math.max(maxItemBoxHeight,itemContent.height());
| + | |
| − | // innerMaxHeight = Math.max(innerMaxHeight,$(this).find(".text-side").outerHeight());
| + | |
| − | // });
| + | |
| − | // }
| + | |
| − | // var fromWidthResize = items.closest(".master.item-box[data-width-resize=true]").length > 0
| + | |
| − | // items.each(function(){
| + | |
| − | // var currentItem = $(this)
| + | |
| − | // var itemContent = currentItem.find(".item-content").andSelf().filter(".item-content");
| + | |
| − | // if (!insideSlideshow){
| + | |
| − | // //currentItem.find(".text-side").height(innerMaxHeight);
| + | |
| − | // }else{
| + | |
| − | //
| + | |
| − | // maxItemBoxHeight = itemContent.height();
| + | |
| − | // }
| + | |
| − | //
| + | |
| − | // itemBoxHeight = itemContent.height();
| + | |
| − | // });
| + | |
| − | };
| + | |
| − | | + | |
| − | | + | |
| − | multi_layout.flipVertically = function(itemToFlip){
| + | |
| − | var helperDiv = itemToFlip.find(".helper-div");
| + | |
| − | var currentClass = helperDiv.attr("class").replace("helper-div", "").replace(" ","");
| + | |
| − | if (currentClass=="top-left" || currentClass=="middle-left" || currentClass=="bottom-left"){
| + | |
| − | helperDiv.removeClass("top-left top-center top-right middle-left middle-center middle-right bottom-left bottom-center bottom-right");
| + | |
| − | helperDiv.addClass("top-center");
| + | |
| − | helperDiv.attr("data-orig-class",currentClass);
| + | |
| − | helperDiv.addClass("flipped-image")
| + | |
| − | }
| + | |
| − | if (currentClass=="top-right" || currentClass=="middle-right" || currentClass=="bottom-right"){
| + | |
| − | helperDiv.removeClass("top-left top-center top-right middle-left middle-center middle-right bottom-left bottom-center bottom-right");
| + | |
| − | helperDiv.addClass("bottom-center");
| + | |
| − | //multi_layout.handleVerticalLayouts(itemToFlip,itemToFlip.closest(".flex").length > 0,itemToFlip.find(".helper-div"),true);
| + | |
| − | helperDiv.attr("data-orig-class",currentClass);
| + | |
| − | helperDiv.addClass("flipped-image")
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | multi_layout.unflip = function(itemToUnFlip){
| + | |
| − | var helperDiv = itemToUnFlip.find(".helper-div");
| + | |
| − | itemToUnFlip.find(".inner-pic").css({"height":""});
| + | |
| − | if (helperDiv.attr("data-orig-class")){
| + | |
| − | helperDiv.removeClass("top-left top-center top-right middle-left middle-center middle-right bottom-left bottom-center bottom-right");
| + | |
| − | helperDiv.addClass(helperDiv.attr("data-orig-class"));
| + | |
| − | helperDiv.removeAttr("data-orig-class")
| + | |
| − | helperDiv.removeClass("flipped-image")
| + | |
| − | }
| + | |
| − | };; var blocks_layout = {};
| + | |
| − | | + | |
| − | blocks_layout.init = function(container,items){
| + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | blocks_layout.applyLayout = function(container,items,paramsFromRealTime){
| + | |
| − | var helperDiv = container.find(".helper-div");
| + | |
| − | var containerHeight = container.height();
| + | |
| − | var helperDivHeight = helperDiv.height();
| + | |
| − | var center = (containerHeight/2) - (helperDivHeight/2);
| + | |
| − | center = Math.max(0,center);
| + | |
| − | helperDiv.css("top",center)
| + | |
| − | };;</script>
| + | |
| | <script src="//xprs.imcreator.com/js/lib/touchswipe/jquery.mobile.custom.min.js"></script> | | <script src="//xprs.imcreator.com/js/lib/touchswipe/jquery.mobile.custom.min.js"></script> |
| | <script type="text/javascript">IMOS.pageView();</script> | | <script type="text/javascript">IMOS.pageView();</script> |
