$axure.internal(function($ax) { var document = window.document; var _visibility = {}; $ax.visibility = _visibility; var _defaultHidden = {}; var _defaultLimbo = {}; // ****************** Visibility and State Functions ****************** // var _isIdVisible = $ax.visibility.IsIdVisible = function(id) { return $ax.visibility.IsVisible(window.document.getElementById(id)); }; $ax.visibility.IsVisible = function(element) { //cannot use css('visibility') because that gets the effective visiblity //e.g. won't be able to set visibility on panels inside hidden panels return element.style.visibility != 'hidden'; }; $ax.visibility.SetIdVisible = function(id, visible) { $ax.visibility.SetVisible(window.document.getElementById(id), visible); // Hide lightbox if necessary if(!visible) { $jobj($ax.repeater.applySuffixToElementId(id, '_lightbox')).remove(); $ax.flyoutManager.unregisterPanel(id, true); } }; var _setAllVisible = function(query, visible) { for(var i = 0; i < query.length; i++) { _visibility.SetVisible(query[i], visible); } } $ax.visibility.SetVisible = function (element, visible) { //not setting display to none to optimize measuring if(visible) { if($(element).hasClass(HIDDEN_CLASS)) $(element).removeClass(HIDDEN_CLASS); if($(element).hasClass(UNPLACED_CLASS)) $(element).removeClass(UNPLACED_CLASS); element.style.display = ''; element.style.visibility = 'inherit'; } else { element.style.display = 'none'; element.style.visibility = 'hidden'; } }; var _setWidgetVisibility = $ax.visibility.SetWidgetVisibility = function (elementId, options) { var visible = $ax.visibility.IsIdVisible(elementId); // If limboed, just fire the next action then leave. if(visible == options.value || _limboIds[elementId]) { if(!_limboIds[elementId]) options.onComplete && options.onComplete(); $ax.action.fireAnimationFromQueue(elementId, $ax.action.queueTypes.fade); return; } options.containInner = true; var query = $jobj(elementId); var parentId = query.parent().attr('id'); var axObj = $obj(elementId); var preserveScroll = false; var isPanel = $ax.public.fn.IsDynamicPanel(axObj.type); var isLayer = $ax.public.fn.IsLayer(axObj.type); if(!options.noContainer && (isPanel || isLayer)) { //if dp has scrollbar, save its scroll position if(isPanel && axObj.scrollbars != 'none') { var shownState = $ax.dynamicPanelManager.getShownState(elementId); preserveScroll = true; //before hiding, try to save scroll location if(!options.value && shownState) { DPStateAndScroll[elementId] = { shownId: shownState.attr('id'), left: shownState.scrollLeft(), top: shownState.scrollTop() } } } _pushContainer(elementId, isPanel); if(isPanel && !options.value) _tryResumeScrollForDP(elementId); var complete = options.onComplete; options.onComplete = function () { if(complete) complete(); _popContainer(elementId, isPanel); //using containers stops mouseleave from firing on IE/Edge and FireFox if(!options.value && $ax.event.mouseOverObjectId && (FIREFOX || $axure.browser.isEdge || IE)) { var mouseOveredElement = $('#' + $ax.event.mouseOverObjectId); if(mouseOveredElement && !mouseOveredElement.is(":visible")) { var axObj = $obj($ax.event.mouseOverObjectId); if(($ax.public.fn.IsDynamicPanel(axObj.type) || $ax.public.fn.IsLayer(axObj.type)) && axObj.propagate) { mouseOveredElement.trigger('mouseleave'); } else mouseOveredElement.trigger('mouseleave.ixStyle'); } } //after showing dp, restore the scoll position if(isPanel && options.value) _tryResumeScrollForDP(elementId, true); } options.containerExists = true; } _setVisibility(parentId, elementId, options, preserveScroll); //set the visibility of the annotation box as well if it exists var ann = document.getElementById(elementId + "_ann"); if(ann) _visibility.SetVisible(ann, options.value); //set ref visibility for ref of flow shape, if that exists var ref = document.getElementById(elementId + '_ref'); if(ref) _visibility.SetVisible(ref, options.value); if(options.value && !MOBILE_DEVICE && $ax.adaptive.isDeviceMode()) _updateMobileScrollForWidgetShown(axObj); }; var _updateMobileScrollForWidgetShown = function(widget) { var isPanel = $ax.public.fn.IsDynamicPanel(widget.type); var isLayer = $ax.public.fn.IsLayer(widget.type); if (isPanel) { var elementId = $id(widget); var stateId = $ax.repeater.applySuffixToElementId(elementId, '_state0'); $ax.dynamicPanelManager.updateMobileScroll(elementId, stateId, true); if (!widget.diagrams) return; for (var i = 0; i < widget.diagrams.length; ++i) { var diagram = widget.diagrams[i]; if (!diagram.objects) continue; for (var j = 0; j < diagram.objects.length; ++j) { _updateMobileScrollForWidgetShown(diagram.objects[j]); } } } else if (isLayer) { for (var i = 0; i < widget.objs.length; ++i) { _updateMobileScrollForWidgetShown(widget.objs[i]); } } } var _setVisibility = function(parentId, childId, options, preserveScroll) { var wrapped = $jobj(childId); var completeTotal = 1; var visible = $ax.visibility.IsIdVisible(childId); if(visible == options.value) { options.onComplete && options.onComplete(); $ax.action.fireAnimationFromQueue(childId, $ax.action.queueTypes.fade); return; } var child = $jobj(childId); var size = options.size || (options.containerExists ? $(child.children()[0]) : child); var isIdFitToContent = $ax.dynamicPanelManager.isIdFitToContent(parentId); //fade and resize won't work together when there is a container... but we still needs the container for fit to content DPs var needContainer = options.easing && options.easing != 'none' && (options.easing != 'fade' || isIdFitToContent); var cullPosition = options.cull ? options.cull.css('position') : ''; var containerExists = options.containerExists; var isFullWidth = $ax.dynamicPanelManager.isPercentWidthPanel($obj(childId)); // If fixed fit to content panel, then we must set size on it. It will be size of 0 otherwise, because container in it is absolute position. var needSetSize = false; var sizeObj = {}; if(needContainer) { var sizeId = ''; if($ax.dynamicPanelManager.isIdFitToContent(childId)) sizeId = childId; else { var panelId = $ax.repeater.removeSuffixFromElementId(childId); if($ax.dynamicPanelManager.isIdFitToContent(panelId)) sizeId = panelId; } if(sizeId) { needSetSize = true; sizeObj = $jobj(sizeId); var newSize = options.cull || sizeObj; var newAxSize = $ax('#' + newSize.attr('id')); sizeObj.width(newAxSize.width()); sizeObj.height(newAxSize.height()); } } var wrappedOffset = { left: 0, top: 0 }; var visibleWrapped = wrapped; if(needContainer) { var childObj = $obj(childId); if (options.cull) { var axCull = $ax('#' + options.cull.attr('id')); var containerWidth = axCull.width(); var containerHeight = axCull.height(); } else { if (childObj && ($ax.public.fn.IsLayer(childObj.type))) {// || childObj.generateCompound)) { var boundingRectangle = $ax('#' + childId).offsetBoundingRect(); //var boundingRectangle = $ax.public.fn.getWidgetBoundingRect(childId); wrappedOffset.left = boundingRectangle.left; wrappedOffset.top = boundingRectangle.top; containerWidth = boundingRectangle.width; containerHeight = boundingRectangle.height; } else if (childObj && childObj.generateCompound) { var image = $jobj(childId + '_img'); containerWidth = $ax.getNumFromPx(image.css('width')); containerHeight = $ax.getNumFromPx(image.css('height')); wrappedOffset.left = $ax.getNumFromPx(image.css('left')); wrappedOffset.top = $ax.getNumFromPx(image.css('top')); } else { containerWidth = $ax('#' + childId).width(); containerHeight = $ax('#' + childId).height(); } } var containerId = $ax.visibility.applyWidgetContainer(childId); // var container = _makeContainer(containerId, options.cull || boundingRectangle, isFullWidth, options.easing == 'flip', wrappedOffset, options.containerExists); var container = _makeContainer(containerId, containerWidth, containerHeight, isFullWidth, options.easing == 'flip', wrappedOffset, options.containerExists); if(options.containInner) { wrapped = _wrappedChildren(containerExists ? $(child.children()[0]) : child); // Filter for visibile wrapped children visibleWrapped = []; for (var i = 0; i < wrapped.length; i++) if($ax.visibility.IsVisible(wrapped[i])) visibleWrapped.push(wrapped[i]); visibleWrapped = $(visibleWrapped); completeTotal = visibleWrapped.length; if(!containerExists) container.prependTo(child); // Offset items if necessary if(!containerExists && (wrappedOffset.left != 0 || wrappedOffset.top != 0)) { for(var i = 0; i < wrapped.length; i++) { var inner = $(wrapped[i]); inner.css('left', $ax.getNumFromPx(inner.css('left')) - wrappedOffset.left); inner.css('top', $ax.getNumFromPx(inner.css('top')) - wrappedOffset.top); // Parent layer is now size 0, so have to have to use conatiner since it's the real size. // Should we use container all the time? This may make things easier for fit panels too. size = container; } } } else if(!containerExists) container.insertBefore(child); if(!containerExists) wrapped.appendTo(container); if (options.value && options.containInner) { //has to set children first because flip to show needs children invisible _setAllVisible(visibleWrapped, false); //_updateChildAlignment(childId); _setAllVisible(child, true); } } var completeCount = 0; var onComplete = function () { completeCount++; if (needContainer && completeCount == completeTotal) { if ($ax.public.fn.isCompoundVectorHtml(container.parent()[0])) { wrappedOffset.left = $ax.getNumFromPx(container.css('left')); wrappedOffset.top = $ax.getNumFromPx(container.css('top')); } if (options.containInner && !containerExists) { if (wrappedOffset.left != 0 || wrappedOffset.top != 0) { for (i = 0; i < wrapped.length; i++) { inner = $(wrapped[i]); if (!inner.hasClass('text')) { inner.css('left', $ax.getNumFromPx(inner.css('left')) + wrappedOffset.left); inner.css('top', $ax.getNumFromPx(inner.css('top')) + wrappedOffset.top); } } } wrapped.filter('.text').css({ 'left': '', 'top': '' }); } if(options.containInner && !options.value) { _setAllVisible(child, false); _setAllVisible(visibleWrapped, true); } if(containerExists) { if(!options.settingChild) container.css('position', 'relative;'); } else { wrapped.insertBefore(container); container.remove(); } if(childObj && $ax.public.fn.IsDynamicPanel(childObj.type) && window.modifiedDynamicPanleParentOverflowProp) { child.css('overflow', 'hidden'); window.modifiedDynamicPanleParentOverflowProp = false; } } //if(options.value) _updateChildAlignment(childId); if(!needContainer || completeTotal == completeCount) { if(options.cull) options.cull.css('position', cullPosition); if(needSetSize) { sizeObj.css('width', 'auto'); sizeObj.css('height', 'auto'); } options.onComplete && options.onComplete(); if(options.fire) { $ax.event.raiseSyntheticEvent(childId, options.value ? 'onShow' : 'onHide'); $ax.action.fireAnimationFromQueue(childId, $ax.action.queueTypes.fade); } } }; // Nothing actually being animated, all wrapped elements invisible if(!visibleWrapped.length) { if(!options.easing || options.easing == 'none') { $ax.visibility.SetIdVisible(childId, options.value); completeTotal = 1; onComplete(); } else { window.setTimeout(function() { completeCount = completeTotal - 1; onComplete(); },options.duration); } return; } if(!options.easing || options.easing == 'none') { $ax.visibility.SetIdVisible(childId, options.value); completeTotal = 1; onComplete(); } else if(options.easing == 'fade') { if(options.value) { if(preserveScroll) { visibleWrapped.css('opacity', 0); visibleWrapped.css('visibility', 'inherit'); visibleWrapped.css('display', 'block'); //was hoping we could just use fadein here, but need to set display before set scroll position _tryResumeScrollForDP(childId); visibleWrapped.animate({ opacity: 1 }, { duration: options.duration, easing: 'swing', queue: false, complete: function() { $ax.visibility.SetIdVisible(childId, true); visibleWrapped.css('opacity', ''); onComplete(); } }); } else { // Can't use $ax.visibility.SetIdVisible, because we only want to set visible, we don't want to set display, fadeIn will handle that. visibleWrapped.css('visibility', 'inherit'); visibleWrapped.fadeIn({ queue: false, duration: options.duration, complete: onComplete }); } } else { // Fading here is being strange... visibleWrapped.animate({ opacity: 0 }, { duration: options.duration, easing: 'swing', queue: false, complete: function() { $ax.visibility.SetIdVisible(childId, false); visibleWrapped.css('opacity', ''); onComplete(); }}); } } else if (options.easing == 'flip') { //this container will hold var trapScroll = _trapScrollLoc(childId); var innerContainer = $('
'); innerContainer.attr('id', containerId + "_inner"); innerContainer.data('flip', options.direction == 'left' || options.direction == 'right' ? 'y' : 'x'); innerContainer.css({ position: 'relative', 'width': containerWidth, 'height': containerHeight, 'display': 'flex' }); innerContainer.appendTo(container); wrapped.appendTo(innerContainer); if(childObj && $ax.public.fn.IsDynamicPanel(childObj.type)) var containerDiv = child; else containerDiv = parentId ? $jobj(parentId) : child.parent(); completeTotal = 1; var flipdegree; var originForFlip = containerWidth / 2 + 'px ' + containerHeight / 2 + 'px'; if (options.value) { innerContainer.css({ '-webkit-transform-origin': originForFlip, '-ms-transform-origin': originForFlip, 'transform-origin': originForFlip, }); //options.value == true means in or show, note to get here, the element must be currently hidden to show, // we need to first flip it +/- 90deg without animation (180 if we want to show the back of the flip) switch(options.direction) { case 'right': case 'left': _setRotateTransformation(innerContainer, _getRotateString(true, options.direction === 'right', options.showFlipBack)); flipdegree = 'rotateY(0deg)'; break; case 'up': case 'down': _setRotateTransformation(innerContainer, _getRotateString(false, options.direction === 'up', options.showFlipBack)); flipdegree = 'rotateX(0deg)'; break; } var onFlipShowComplete = function() { var trapScroll = _trapScrollLoc(childId); $ax.visibility.SetIdVisible(childId, true); wrapped.insertBefore(innerContainer); innerContainer.remove(); trapScroll(); onComplete(); }; innerContainer.css({ '-webkit-backface-visibility': 'hidden', 'backface-visibility': 'hidden' }); child.css({ 'display': '', 'visibility': 'inherit' }); visibleWrapped.css({ 'display': '', 'visibility': 'inherit' }); innerContainer.css({ '-webkit-transition-duration': options.duration + 'ms', 'transition-duration': options.duration + 'ms' }); if(preserveScroll) _tryResumeScrollForDP(childId); _setRotateTransformation(innerContainer, flipdegree, containerDiv, onFlipShowComplete, options.duration, true); } else { //hide or out innerContainer.css({ '-webkit-transform-origin': originForFlip, '-ms-transform-origin': originForFlip, 'transform-origin': originForFlip, }); switch(options.direction) { case 'right': case 'left': flipdegree = _getRotateString(true, options.direction !== 'right', options.showFlipBack); break; case 'up': case 'down': flipdegree = _getRotateString(false, options.direction !== 'up', options.showFlipBack); break; } var onFlipHideComplete = function() { var trapScroll = _trapScrollLoc(childId); wrapped.insertBefore(innerContainer); $ax.visibility.SetIdVisible(childId, false); innerContainer.remove(); trapScroll(); onComplete(); }; innerContainer.css({ '-webkit-backface-visibility': 'hidden', 'backface-visibility': 'hidden', '-webkit-transition-duration': options.duration + 'ms', 'transition-duration': options.duration + 'ms' }); if(preserveScroll) _tryResumeScrollForDP(childId); _setRotateTransformation(innerContainer, flipdegree, containerDiv, onFlipHideComplete, options.duration, true); } trapScroll(); } else { // Because the move is gonna fire on annotation and ref too, need to update complete total completeTotal = $addAll(visibleWrapped, childId).length; if(options.value) { _slideStateIn(childId, childId, options, size, false, onComplete, visibleWrapped, preserveScroll); } else { var tops = []; var lefts = []; for(var i = 0; i < visibleWrapped.length; i++) { var currWrapped = $(visibleWrapped[i]); tops.push(fixAuto(currWrapped, 'top')); lefts.push(fixAuto(currWrapped, 'left')); } var onOutComplete = function () { //bring back SetIdVisible on childId for hiding lightbox $ax.visibility.SetIdVisible(childId, false); for(i = 0; i < visibleWrapped.length; i++) { currWrapped = $(visibleWrapped[i]); $ax.visibility.SetVisible(currWrapped[0], false); currWrapped.css('top', tops[i]); currWrapped.css('left', lefts[i]); } onComplete(); }; _slideStateOut(size, childId, options, onOutComplete, visibleWrapped); } } // If showing, go through all rich text objects inside you, and try to redo alignment of them //if(options.value && !options.containInner) { // _updateChildAlignment(childId); //} }; // IE/Safari are giving auto here instead of calculating to for us. May need to calculate this eventually, but for now we can assume auto === 0px for the edge case found var fixAuto = function (jobj, prop) { var val = jobj.css(prop); return val == 'auto' ? '0px' : val; }; var _getRotateString = function (y, neg, showFlipBack) { // y means flip on y axis, or left/right, neg means flipping it left/down, and show back is for set panel state // and will show the back of the widget (transparent) for the first half of a show, or second half of a hide. return 'rotate' + (y ? 'Y' : 'X') + '(' + (neg ? '-' : '') + (showFlipBack ? 180 : IE ? 91 : 90) + 'deg)'; } //var _updateChildAlignment = function(childId) { // var descendants = $jobj(childId).find('.text'); // for(var i = 0; i < descendants.length; i++) $ax.style.updateTextAlignmentForVisibility(descendants[i].id); //}; var _wrappedChildren = function (child) { return child.children(); //var children = child.children(); //var valid = []; //for(var i = 0; i < children.length; i++) if($ax.visibility.IsVisible(children[i])) valid.push(children[i]); //return $(valid); }; var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; var _setRotateTransformation = function(elementsToSet, transformValue, elementParent, flipCompleteCallback, flipDurationMs, useAnimationFrame) { if(flipCompleteCallback) { //here we didn't use 'transitionend' event to fire callback //when show/hide on one element, changing transition property will stop the event from firing window.setTimeout(flipCompleteCallback, flipDurationMs); } var trasformCss = { '-webkit-transform': transformValue, '-moz-transform': transformValue, '-ms-transform': transformValue, '-o-transform': transformValue, 'transform': transformValue }; if(useAnimationFrame) { if(FIREFOX || CHROME) $('body').hide().show(0); //forces FF to render the animation requestAnimationFrame(function() { elementsToSet.css(trasformCss); }); } else elementsToSet.css(trasformCss); //when deal with dynamic panel, we need to set it's parent's overflow to visible to have the 3d effect //NOTE: we need to set this back when both flips finishes in DP, to prevents one animation finished first and set this back if(elementParent && elementParent.css('overflow') === 'hidden') { elementParent.css('overflow', 'visible'); window.modifiedDynamicPanleParentOverflowProp = true; } }; $ax.visibility.GetPanelState = function(id) { var children = $ax.visibility.getRealChildren($jobj(id).children()); for(var i = 0; i < children.length; i++) { if(children[i].style && $ax.visibility.IsVisible(children[i])) return children[i].id; } return ''; }; var containerCount = {}; $ax.visibility.SetPanelState = function(id, stateId, easingOut, directionOut, durationOut, easingIn, directionIn, durationIn, showWhenSet) { var show = !$ax.visibility.IsIdVisible(id) && showWhenSet; if(show) $ax.visibility.SetIdVisible(id, true); // Exit here if already at desired state. if($ax.visibility.IsIdVisible(stateId)) { if(show) { $ax.event.raiseSyntheticEvent(id, 'onShow'); // If showing size changes and need to update parent panels $ax.dynamicPanelManager.fitParentPanel(id); } $ax.action.fireAnimationFromQueue(id, $ax.action.queueTypes.setState); return; } var hasEasing = easingIn != 'none' || easingOut != 'none'; if(hasEasing) _pushContainer(id, true); var state = $jobj(stateId); var oldStateId = $ax.visibility.GetPanelState(id); var oldState = $jobj(oldStateId); var isFixed = $jobj(id).css('position') == 'fixed'; //pin to browser if(isFixed) $ax.dynamicPanelManager.adjustFixed(id, oldState.width(), oldState.height(), state.width(), state.height()); _bringPanelStateToFront(id, stateId, oldStateId, easingIn == 'none' || durationIn == '0'); var fitToContent = $ax.dynamicPanelManager.isIdFitToContent(id); var resized = false; if(fitToContent) { // Set resized //var width = state.width(); //var height = state.height(); var newBoundingRect = $ax('#' + stateId).childrenBoundingRect(); var width = newBoundingRect.right; var height = newBoundingRect.bottom; var oldBoundingRect = $ax('#' + id).size(); var oldWidth = oldBoundingRect.right; var oldHeight = oldBoundingRect.bottom; resized = width != oldWidth || height != oldHeight; //resized = width != oldState.width() || height != oldState.height(); $ax.visibility.setResizedSize(id, $obj(id).percentWidth ? oldWidth : width, height); } //edge case for sliding var movement = (directionOut == 'left' || directionOut == 'up' || state.children().length == 0) && oldState.children().length != 0 ? oldState : state; var onCompleteCount = 0; var onComplete = function () { //move this call from _setVisibility() for animate out. //Because this will make the order of dp divs consistence: the showing panel is always in front after both animation finished //tested in the cases where one panel is out/show slower/faster/same time/instantly. _bringPanelStateToFront(id, stateId, oldStateId, false); if (window.modifiedDynamicPanleParentOverflowProp) { var parent = id ? $jobj(id) : child.parent(); parent.css('overflow', 'hidden'); window.modifiedDynamicPanleParentOverflowProp = false; } $ax.dynamicPanelManager.fitParentPanel(id); $ax.dynamicPanelManager.updatePanelPercentWidth(id); $ax.dynamicPanelManager.updatePanelContentPercentWidth(id); $ax.action.fireAnimationFromQueue(id, $ax.action.queueTypes.setState); $ax.event.raiseSyntheticEvent(id, "onPanelStateChange"); $ax.event.leavingState(oldStateId); if (hasEasing) _popContainer(id, true); $ax.dynamicPanelManager.updateMobileScroll(id, stateId); }; // Must do state out first, so if we cull by new state, location is correct _setVisibility(id, oldStateId, { value: false, easing: easingOut, direction: directionOut, duration: durationOut, containerExists: true, onComplete: function() { // if(easingIn !== 'flip') _bringPanelStateToFront(id, stateId); if (++onCompleteCount == 2) onComplete(); }, settingChild: true, size: movement, //cull for cull: easingOut == 'none' || state.children().length == 0 ? oldState : state, showFlipBack: true }); _setVisibility(id, stateId, { value: true, easing: easingIn, direction: directionIn, duration: durationIn, containerExists: true, onComplete: function () { // if (easingIn === 'flip') _bringPanelStateToFront(id, stateId); if (++onCompleteCount == 2) onComplete(); }, settingChild: true, //size for offset size: movement, showFlipBack: true }); if(show) $ax.event.raiseSyntheticEvent(id, 'onShow'); if(resized) $ax.event.raiseSyntheticEvent(id, 'onResize'); }; var containedFixed = {}; var _pushContainer = _visibility.pushContainer = function(id, panel) { var count = containerCount[id]; if(count) containerCount[id] = count + 1; else { var trapScroll = _trapScrollLoc(id); var jobj = $jobj(id); var children = jobj.children(); var css = { position: 'relative', top: 0, left: 0 }; if(!panel) { var boundingRect = $ax('#' + id).offsetBoundingRect(); //var boundingRect = $axure.fn.getWidgetBoundingRect(id); css.top = boundingRect.top; css.left = boundingRect.left; } var container = $('
'); container.attr('id', ''); // Placeholder id, so we won't try to recurse the container until it is ready container.css(css); //container.append(jobj.children()); jobj.append(container); containerCount[id] = 1; // Panel needs to wrap children if(panel) { for(var i = 0; i < children.length; i++) { var child = $(children[i]); var childContainer = $('
'); childContainer.attr('id', $ax.visibility.applyWidgetContainer(child.attr('id'))); childContainer.css(css); child.after(childContainer); childContainer.append(child); container.append(childContainer); } } else { var focus = _getCurrFocus(); if(focus) $ax.event.addSuppressedEvent($ax.repeater.removeSuffixFromElementId(focus), 'OnLostFocus'); // Layer needs to fix top left var childIds = $ax('#' + id).getChildren()[0].children; for(var i = 0; i < childIds.length; i++) { var childId = childIds[i]; var childObj = $jobj(childId); var fixedInfo = $ax.dynamicPanelManager.getFixedInfo(childId); if(fixedInfo.fixed) { var axObj = $ax('#' + childId); var viewportLocation = axObj.viewportLocation(); var left = viewportLocation.left; var top = viewportLocation.top; //var left = axObj.left(); //var top = axObj.top(); containedFixed[childId] = { left: left, top: top, fixed: fixedInfo }; childObj.css('left', left); childObj.css('top', top); childObj.css('margin-left', 0); childObj.css('margin-top', 0); childObj.css('right', 'auto'); childObj.css('bottom', 'auto'); childObj.css('position', 'absolute'); } var cssChange = { left: '-=' + css.left, top: '-=' + css.top }; if($ax.getTypeFromElementId(childId) == $ax.constants.LAYER_TYPE) { _pushContainer(childId, false); $ax.visibility.applyWidgetContainer(childId, true).css(cssChange); } else { //if ($ax.public.fn.isCompoundVectorHtml(jobj[0])) { // var grandChildren = jobj[0].children; // //while (grandChildren.length > 0 && grandChildren[0].id.indexOf('container') >= 0) grandChildren = grandChildren[0].children; // for (var j = 0; j < grandChildren.length; j++) { // var grandChildId = grandChildren[j].id; // if (grandChildId.indexOf(childId + 'p') >= 0 || grandChildId.indexOf('_container') >= 0) $jobj(grandChildId).css(cssChange); // } //} else // Need to include ann and ref in move. childObj = $addAll(childObj, childId); childObj.css(cssChange); } container.append(childObj); } _setCurrFocus(focus); } container.attr('id', $ax.visibility.applyWidgetContainer(id)); // Setting the correct final id for the container trapScroll(); } }; var _popContainer = _visibility.popContainer = function (id, panel) { var count = containerCount[id]; if(!count) return; count--; containerCount[id] = count; if(count != 0) return; var trapScroll = _trapScrollLoc(id); var jobj = $jobj(id); var container = $ax.visibility.applyWidgetContainer(id, true); // If layer is at bottom or right of page, unwrapping could change scroll by temporarily reducting page size. // To avoid this, we let container persist on page, with the size it is at this point, and don't remove container completely // until the children are back to their proper locations. var size = $ax('#' + id).size(); container.css('width', size.width); container.css('height', size.height); var focus = _getCurrFocus(); if(focus) $ax.event.addSuppressedEvent($ax.repeater.removeSuffixFromElementId(focus), 'OnLostFocus'); jobj.append(container.children()); _setCurrFocus(focus); $('body').first().append(container); // Layer doesn't have children containers to clean up if(panel) { var children = jobj.children(); for(var i = 0; i < children.length; i++) { var childContainer = $(children[i]); var child = $(childContainer.children()[0]); childContainer.after(child); childContainer.remove(); } } else { var left = container.css('left'); var top = container.css('top'); var childIds = $ax('#' + id).getChildren()[0].children; for (var i = 0; i < childIds.length; i++) { var childId = childIds[i]; var cssChange = { left: '+=' + left, top: '+=' + top }; if($ax.getTypeFromElementId(childId) == $ax.constants.LAYER_TYPE) { $ax.visibility.applyWidgetContainer(childId, true).css(cssChange); _popContainer(childId, false); } else { var childObj = $jobj(childId); // if ($ax.public.fn.isCompoundVectorHtml(jobj[0])) { // var grandChildren = jobj[0].children; // //while (grandChildren.length > 0 && grandChildren[0].id.indexOf('container') >= 0) grandChildren = grandChildren[0].children; // for (var j = 0; j < grandChildren.length; j++) { // var grandChildId = grandChildren[j].id; // if (grandChildId.indexOf(childId + 'p') >= 0 || grandChildId.indexOf('_container') >= 0) $jobj(grandChildId).css(cssChange); // } //} else var allObjs = $addAll(childObj, childId); // Just include other objects for initial css. Fixed panels need to be dealt with separately. allObjs.css(cssChange); var fixedInfo = containedFixed[childId]; if(fixedInfo) { delete containedFixed[childId]; childObj.css('position', 'fixed'); var deltaX = $ax.getNumFromPx(childObj.css('left')) - fixedInfo.left; var deltaY = $ax.getNumFromPx(childObj.css('top')) - fixedInfo.top; fixedInfo = fixedInfo.fixed; if(fixedInfo.horizontal == 'left') childObj.css('left', fixedInfo.x + deltaX); else if(fixedInfo.horizontal == 'center') { childObj.css('left', '50%'); childObj.css('margin-left', fixedInfo.x + deltaX); } else { childObj.css('left', 'auto'); childObj.css('right', fixedInfo.x - deltaX); } if(fixedInfo.vertical == 'top') childObj.css('top', fixedInfo.y + deltaY); else if(fixedInfo.vertical == 'middle') { childObj.css('top', '50%'); childObj.css('margin-top', fixedInfo.y + deltaY); } else { childObj.css('top', 'auto'); childObj.css('bottom', fixedInfo.y - deltaY); } $ax.dynamicPanelManager.updatePanelPercentWidth(childId); $ax.dynamicPanelManager.updatePanelContentPercentWidth(childId); } } } } container.remove(); trapScroll(); }; var _trapScrollLoc = function(id) { var locs = {}; var states = $jobj(id).find('.panel_state'); for(var i = 0; i < states.length; i++) { var state = $(states[i]); locs[state.attr('id')] = { x: state.scrollLeft(), y: state.scrollTop() }; } return function() { for(var key in locs) { var state = $jobj(key); state.scrollLeft(locs[key].x); state.scrollTop(locs[key].y); } }; } var _getCurrFocus = function () { // Only care about focused a tags and inputs var id = window.lastFocusedClickable && window.lastFocusedClickable.id; if(!id) return id; var jobj = $(window.lastFocusedClickable); return jobj.is('a') || jobj.is('input') ? id : ''; } var _setCurrFocus = function(id) { if(id) { // This is really just needed for IE, so if this causes issues on other browsers, try adding that check here var trap = $ax.event.blockEvent($ax.repeater.removeSuffixFromElementId(id), 'OnFocus'); window.setTimeout(function () { $jobj(id).focus(); trap(); }, 0); } } //use this to save & restore DP's scroll position when show/hide //key => dp's id (not state's id, because it seems we can change state while hiding) //value => first state's id & scroll position //we only need to store one scroll position for one DP, and remove the key after shown. var DPStateAndScroll = {} var _tryResumeScrollForDP = function (dpId, deleteId) { var scrollObj = DPStateAndScroll[dpId]; if(scrollObj) { var shownState = document.getElementById(scrollObj.shownId); if(scrollObj.left) shownState.scrollLeft = scrollObj.left; if(scrollObj.top) shownState.scrollTop = scrollObj.top; if(deleteId) delete DPStateAndScroll[dpId]; } }; // var _makeContainer = function (containerId, rect, isFullWidth, isFlip, offset, containerExists) { var _makeContainer = function (containerId, width, height, isFullWidth, isFlip, offset, containerExists) { if(containerExists) var container = $jobj(containerId); else { container = $('
'); container.attr('id', containerId); } var css = { position: 'absolute', width: width, height: height, display: 'flex' }; if(!containerExists) { // If container exists, may be busy updating location. Will init and update it correctly. css.top = offset.top; css.left = offset.left; } if(isFlip) { css.perspective = '800px'; css.webkitPerspective = "800px"; css.mozPerspective = "800px"; //adding this to make Edge happy css['transform-style'] = 'preserve-3d'; } else css.overflow = 'hidden'; //perspective on container will give us 3d effect when flip //if(!isFlip) css.overflow = 'hidden'; // Rect should be a jquery not axquery obj //_getFixedCss(css, rect.$ ? rect.$() : rect, fixedInfo, isFullWidth); container.css(css); return container; }; var CONTAINER_SUFFIX = _visibility.CONTAINER_SUFFIX = '_container'; var CONTAINER_INNER = CONTAINER_SUFFIX + '_inner'; _visibility.getWidgetFromContainer = function(id) { var containerIndex = id.indexOf(CONTAINER_SUFFIX); if(containerIndex == -1) return id; return id.substr(0, containerIndex) + id.substr(containerIndex + CONTAINER_SUFFIX.length); }; // Apply container to widget id if necessary. // returnJobj: True if you want the jquery object rather than id returned // skipCheck: True if you want the query returned reguardless of container existing // checkInner: True if inner container should be checked _visibility.applyWidgetContainer = function (id, returnJobj, skipCheck, checkInner) { // If container exists, just return (return query if requested) if(id.indexOf(CONTAINER_SUFFIX) != -1) return returnJobj ? $jobj(id) : id; // Get desired id, and return it if query is not desired var containerId = $ax.repeater.applySuffixToElementId(id, checkInner ? CONTAINER_INNER : CONTAINER_SUFFIX); if(!returnJobj) return containerId; // If skipping check or container exists, just return innermost container requested var container = $jobj(containerId); if(skipCheck || container.length) return container; // If inner container was not checked, then no more to check, return query for widget if(!checkInner) return $jobj(id); // If inner container was checked, check for regular container still container = $jobj($ax.repeater.applySuffixToElementId(id, CONTAINER_SUFFIX)); return container.length ? container : $jobj(id); }; _visibility.isContainer = function(id) { return id.indexOf(CONTAINER_SUFFIX) != -1; }; _visibility.getRealChildren = function(query) { while(query.length && $(query[0]).attr('id').indexOf(CONTAINER_SUFFIX) != -1) query = query.children(); return query; }; //var _getFixedCss = function(css, rect, fixedInfo, isFullWidth) { // // todo: **mas** make sure this is ok // if(fixedInfo.fixed) { // css.position = 'fixed'; // if(fixedInfo.horizontal == 'left') css.left = fixedInfo.x; // else if(fixedInfo.horizontal == 'center') { // css.left = isFullWidth ? '0px' : '50%'; // css['margin-left'] = fixedInfo.x; // } else if(fixedInfo.horizontal == 'right') { // css.left = 'auto'; // css.right = fixedInfo.x; // } // if(fixedInfo.vertical == 'top') css.top = fixedInfo.y; // else if(fixedInfo.vertical == 'middle') { // css.top = '50%'; // css['margin-top'] = fixedInfo.y; // } else if(fixedInfo.vertical == 'bottom') { // css.top = 'auto'; // css.bottom = fixedInfo.y; // } // } else { // css.left = Number(rect.css('left').replace('px', '')) || 0; // css.top = Number(rect.css('top').replace('px', '')) || 0; // } //}; var _slideStateOut = function (container, stateId, options, onComplete, jobj) { var directionOut = options.direction; var axObject = $ax('#' + container.attr('id')); var width = axObject.width(); var height = axObject.height(); _blockSetMoveIds = true; if(directionOut == "right") { $ax.move.MoveWidget(stateId, width, 0, options, false, onComplete, false, jobj, true); } else if(directionOut == "left") { $ax.move.MoveWidget(stateId, -width, 0, options, false, onComplete, false, jobj, true); } else if(directionOut == "up") { $ax.move.MoveWidget(stateId, 0, -height, options, false, onComplete, false, jobj, true); } else if(directionOut == "down") { $ax.move.MoveWidget(stateId, 0, height, options, false, onComplete, false, jobj, true); } _blockSetMoveIds = false; }; var _slideStateIn = function (id, stateId, options, container, makePanelVisible, onComplete, jobj, preserveScroll) { var directionIn = options.direction; var axObject = $ax('#' +container.attr('id')); var width = axObject.width(); var height = axObject.height(); if (makePanelVisible) $ax.visibility.SetIdVisible(id, true); for (i = 0; i < jobj.length; i++) $ax.visibility.SetVisible(jobj[i], true); for(var i = 0; i < jobj.length; i++) { var child = $(jobj[i]); var oldTop = $ax.getNumFromPx(fixAuto(child, 'top')); var oldLeft = $ax.getNumFromPx(fixAuto(child, 'left')); if (directionIn == "right") { child.css('left', oldLeft - width + 'px'); } else if(directionIn == "left") { child.css('left', oldLeft + width + 'px'); } else if(directionIn == "up") { child.css('top', oldTop + height + 'px'); } else if(directionIn == "down") { child.css('top', oldTop - height + 'px'); } } if(preserveScroll) _tryResumeScrollForDP(id); _blockSetMoveIds = true; if(directionIn == "right") { $ax.move.MoveWidget(stateId, width, 0, options, false, onComplete, false, jobj, true); } else if(directionIn == "left") { $ax.move.MoveWidget(stateId, -width, 0, options, false, onComplete, false, jobj, true); } else if(directionIn == "up") { $ax.move.MoveWidget(stateId, 0, -height, options, false, onComplete, false, jobj, true); } else if(directionIn == "down") { $ax.move.MoveWidget(stateId, 0, height, options, false, onComplete, false, jobj, true); } _blockSetMoveIds = false; }; $ax.visibility.GetPanelStateId = function(dpId, index) { var itemNum = $ax.repeater.getItemIdFromElementId(dpId); var panelStateId = $ax.repeater.getScriptIdFromElementId(dpId) + '_state' + index; return $ax.repeater.createElementId(panelStateId, itemNum); }; $ax.visibility.GetPanelStateCount = function(id) { return $ax.visibility.getRealChildren($jobj(id).children()).filter("[id*='_state']").length; }; var _bringPanelStateToFront = function (dpId, stateId, oldStateId, oldInFront) { var panel = $jobj(dpId); var frontId = oldInFront ? oldStateId : stateId; if(containerCount[dpId]) { frontId = $ax.visibility.applyWidgetContainer(frontId); panel = $ax.visibility.applyWidgetContainer(dpId, true, false, true); } $jobj(frontId).appendTo(panel); //when bring a panel to front, it will be focused, and the previous front panel should fire blur event if it's lastFocusedClickableSelector //ie(currently 11) and firefox(currently 34) doesn't fire blur event, this is the hack to fire it manually if((IE || FIREFOX) && window.lastFocusedClickable && $ax.event.getFocusableWidgetOrChildId(window.lastFocusedControl) == window.lastFocusedClickable.id) { // Only need to do this if the currently focused widget is in the panel state that is being hidden. if($jobj(oldStateId).find('#' + window.lastFocusedClickable.id.split('_')[0]).length) $(window.lastFocusedClickable).triggerHandler('blur'); } }; var _limboIds = _visibility.limboIds = {}; // limboId's is a dictionary of id->true, essentially a set. var _addLimboAndHiddenIds = $ax.visibility.addLimboAndHiddenIds = function(newLimboIds, newHiddenIds, query, skipRepeater) { var limboedByMaster = {}; for(var key in newLimboIds) { if (!$ax.public.fn.IsReferenceDiagramObject($ax.getObjectFromElementId(key).type)) continue; var ids = $ax.model.idsInRdoToHideOrLimbo(key); for(var i = 0; i < ids.length; i++) limboedByMaster[ids[i]] = true; } var hiddenByMaster = {}; for(key in newHiddenIds) { if (!$ax.public.fn.IsReferenceDiagramObject($ax.getObjectFromElementId(key).type)) continue; ids = $ax.model.idsInRdoToHideOrLimbo(key); for(i = 0; i < ids.length; i++) hiddenByMaster[ids[i]] = true; } // Extend with children of rdos newLimboIds = $.extend(newLimboIds, limboedByMaster); newHiddenIds = $.extend(newHiddenIds, hiddenByMaster); // something is only visible if it's not hidden and limboed query.each(function(diagramObject, elementId) { // Rdos already handled, contained widgets are limboed by the parent, and sub menus should be ignored if(diagramObject.isContained || $ax.public.fn.IsReferenceDiagramObject(diagramObject.type) || $ax.public.fn.IsTableCell(diagramObject.type) || $jobj(elementId).hasClass('sub_menu')) return; if(diagramObject.type == 'table' && $jobj(elementId).parent().hasClass('ax_menu')) return; if(skipRepeater) { // Any item in a repeater should return if($ax.getParentRepeaterFromElementIdExcludeSelf(elementId)) return; } var scriptId = $ax.repeater.getScriptIdFromElementId(elementId); var shouldBeVisible = Boolean(!newLimboIds[scriptId] && !newHiddenIds[scriptId]); var isVisible = Boolean(_isIdVisible(elementId)); if(shouldBeVisible != isVisible) { _setWidgetVisibility(elementId, { value: shouldBeVisible, noContainer: true }); } }); _limboIds = _visibility.limboIds = $.extend(_limboIds, newLimboIds); }; var _clearLimboAndHidden = $ax.visibility.clearLimboAndHidden = function(ids) { _limboIds = _visibility.limboIds = {}; }; $ax.visibility.clearLimboAndHiddenIds = function(ids) { for(var i = 0; i < ids.length; i++) { var scriptId = $ax.repeater.getScriptIdFromElementId(ids[i]); delete _limboIds[scriptId]; } }; $ax.visibility.resetLimboAndHiddenToDefaults = function (query) { if(!query) query = $ax('*'); _clearLimboAndHidden(); _addLimboAndHiddenIds(_defaultLimbo, _defaultHidden, query); }; $ax.visibility.isScriptIdLimbo = function(scriptId) { if(_limboIds[scriptId]) return true; var repeater = $ax.getParentRepeaterFromScriptId(scriptId); if(!repeater) return false; var itemId = $ax.getItemIdsForRepeater(repeater)[0]; return _limboIds[$ax.repeater.createElementId(scriptId, itemId)]; } $ax.visibility.isElementIdLimboOrInLimboContainer = function (elementId) { var parent = document.getElementById(elementId); while(parent) { var scriptId = $ax.repeater.getScriptIdFromElementId($(parent).attr('id')); if(_limboIds[scriptId]) return true; parent = parent.parentElement; } return false; } var _blockSetMoveIds = false; var _movedIds = _visibility.movedIds = {}; var _resizedIds = _visibility.resizedIds = {}; var _rotatedIds = _visibility.rotatedIds = {}; $ax.visibility.getMovedLocation = function(scriptId) { return _movedIds[scriptId]; //var repeater = $ax.getParentRepeaterFromScriptId(scriptId); //if (!repeater) return false; //var itemId = $ax.getItemIdsForRepeater(repeater)[0]; //return _movedIds[$ax.repeater.createElementId(scriptId, itemId)]; }; $ax.visibility.setMovedLocation = function (scriptId, left, top) { if ($jobj(scriptId).css('position') == 'fixed') return; _movedIds[scriptId] = { left: left, top: top }; }; $ax.visibility.moveMovedLocation = function (scriptId, deltaLeft, deltaTop) { if(_blockSetMoveIds) return false; var offsetLocation = $ax('#' + scriptId).offsetLocation(); $ax.visibility.setMovedLocation(scriptId, offsetLocation.x + deltaLeft, offsetLocation.y + deltaTop); if($ax.getTypeFromElementId(scriptId) == $ax.constants.LAYER_TYPE) { var childIds = $ax('#' + scriptId).getChildren()[0].children; for (var i = 0; i < childIds.length; i++) { $ax.visibility.moveMovedLocation(childIds[i], deltaLeft, deltaTop); } } }; $ax.visibility.getResizedSize = function(scriptId) { return _resizedIds[scriptId]; //var repeater = $ax.getParentRepeaterFromScriptId(scriptId); //if (!repeater) return false; //var itemId = $ax.getItemIdsForRepeater(repeater)[0]; //return _resizedIds[$ax.repeater.createElementId(scriptId, itemId)]; }; $ax.visibility.setResizedSize = function(scriptId, width, height) { _resizedIds[scriptId] = { width: width, height: height }; }; $ax.visibility.getRotatedAngle = function (scriptId) { return _rotatedIds[scriptId]; }; $ax.visibility.setRotatedAngle = function (scriptId, rotation) { _rotatedIds[scriptId] = rotation; }; $ax.visibility.clearMovedAndResized = function () { _movedIds = _visibility.movedIds = {}; _resizedIds = _visibility.resizedIds = {}; _rotatedIds = _visibility.rotatedIds = {}; }; $ax.visibility.clearMovedAndResizedIds = function (elementIds) { for (var i = 0; i < elementIds.length; i++) { var id = elementIds[i]; delete _movedIds[id]; delete _resizedIds[id]; delete _rotatedIds[id]; } }; $ax.visibility.initialize = function() { // initialize initial visible states $('.' + HIDDEN_CLASS).each(function (index, diagramObject) { _defaultHidden[$ax.repeater.getScriptIdFromElementId(diagramObject.id)] = true; }); $('.' + UNPLACED_CLASS).each(function (index, diagramObject) { _defaultLimbo[$ax.repeater.getScriptIdFromElementId(diagramObject.id)] = true; }); _addLimboAndHiddenIds(_defaultLimbo, _defaultHidden, $ax('*'), true); }; _visibility.initRepeater = function(repeaterId) { var html = $('
'); html.append($jobj(repeaterId + '_script').html()); html.find('.' + HIDDEN_CLASS).each(function (index, element) { _defaultHidden[$ax.repeater.getScriptIdFromElementId(element.id)] = true; }); html.find('.' + UNPLACED_CLASS).each(function (index, element) { _defaultLimbo[$ax.repeater.getScriptIdFromElementId(element.id)] = true; }); } var HIDDEN_CLASS = _visibility.HIDDEN_CLASS = 'ax_default_hidden'; var UNPLACED_CLASS = _visibility.UNPLACED_CLASS = 'ax_default_unplaced'; });