You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1315 lines
58 KiB
1315 lines
58 KiB
$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 = $('<div></div>');
|
|
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 = $('<div></div>');
|
|
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 = $('<div></div>');
|
|
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 = $('<div></div>');
|
|
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 = $('<div></div>');
|
|
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';
|
|
|
|
});
|