visibility.js 57 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291
  1. $axure.internal(function($ax) {
  2. var document = window.document;
  3. var _visibility = {};
  4. $ax.visibility = _visibility;
  5. var _defaultHidden = {};
  6. var _defaultLimbo = {};
  7. // ****************** Visibility and State Functions ****************** //
  8. var _isIdVisible = $ax.visibility.IsIdVisible = function(id) {
  9. return $ax.visibility.IsVisible(window.document.getElementById(id));
  10. };
  11. $ax.visibility.IsVisible = function(element) {
  12. //cannot use css('visibility') because that gets the effective visiblity
  13. //e.g. won't be able to set visibility on panels inside hidden panels
  14. return element.style.visibility != 'hidden';
  15. };
  16. $ax.visibility.SetIdVisible = function(id, visible) {
  17. $ax.visibility.SetVisible(window.document.getElementById(id), visible);
  18. // Hide lightbox if necessary
  19. if(!visible) {
  20. $jobj($ax.repeater.applySuffixToElementId(id, '_lightbox')).remove();
  21. $ax.flyoutManager.unregisterPanel(id, true);
  22. }
  23. };
  24. var _setAllVisible = function(query, visible) {
  25. for(var i = 0; i < query.length; i++) {
  26. _visibility.SetVisible(query[i], visible);
  27. }
  28. }
  29. $ax.visibility.SetVisible = function (element, visible) {
  30. //not setting display to none to optimize measuring
  31. if(visible) {
  32. if($(element).hasClass(HIDDEN_CLASS)) $(element).removeClass(HIDDEN_CLASS);
  33. if($(element).hasClass(UNPLACED_CLASS)) $(element).removeClass(UNPLACED_CLASS);
  34. element.style.display = '';
  35. element.style.visibility = 'inherit';
  36. } else {
  37. element.style.display = 'none';
  38. element.style.visibility = 'hidden';
  39. }
  40. };
  41. var _setWidgetVisibility = $ax.visibility.SetWidgetVisibility = function (elementId, options) {
  42. var visible = $ax.visibility.IsIdVisible(elementId);
  43. // If limboed, just fire the next action then leave.
  44. if(visible == options.value || _limboIds[elementId]) {
  45. if(!_limboIds[elementId]) options.onComplete && options.onComplete();
  46. $ax.action.fireAnimationFromQueue(elementId, $ax.action.queueTypes.fade);
  47. return;
  48. }
  49. options.containInner = true;
  50. var query = $jobj(elementId);
  51. var parentId = query.parent().attr('id');
  52. var axObj = $obj(elementId);
  53. var preserveScroll = false;
  54. var isPanel = $ax.public.fn.IsDynamicPanel(axObj.type);
  55. var isLayer = $ax.public.fn.IsLayer(axObj.type);
  56. if(!options.noContainer && (isPanel || isLayer)) {
  57. //if dp has scrollbar, save its scroll position
  58. if(isPanel && axObj.scrollbars != 'none') {
  59. var shownState = $ax.dynamicPanelManager.getShownState(elementId);
  60. preserveScroll = true;
  61. //before hiding, try to save scroll location
  62. if(!options.value && shownState) {
  63. DPStateAndScroll[elementId] = {
  64. shownId: shownState.attr('id'),
  65. left: shownState.scrollLeft(),
  66. top: shownState.scrollTop()
  67. }
  68. }
  69. }
  70. _pushContainer(elementId, isPanel);
  71. if(isPanel && !options.value) _tryResumeScrollForDP(elementId);
  72. var complete = options.onComplete;
  73. options.onComplete = function () {
  74. if(complete) complete();
  75. _popContainer(elementId, isPanel);
  76. //using containers stops mouseleave from firing on IE/Edge and FireFox
  77. if(!options.value && $ax.event.mouseOverObjectId && (FIREFOX || $axure.browser.isEdge || IE)) {
  78. var mouseOveredElement = $('#' + $ax.event.mouseOverObjectId);
  79. if(mouseOveredElement && !mouseOveredElement.is(":visible")) {
  80. var axObj = $obj($ax.event.mouseOverObjectId);
  81. if(($ax.public.fn.IsDynamicPanel(axObj.type) || $ax.public.fn.IsLayer(axObj.type)) && axObj.propagate) {
  82. mouseOveredElement.trigger('mouseleave');
  83. } else mouseOveredElement.trigger('mouseleave.ixStyle');
  84. }
  85. }
  86. //after showing dp, restore the scoll position
  87. if(isPanel && options.value) _tryResumeScrollForDP(elementId, true);
  88. }
  89. options.containerExists = true;
  90. }
  91. _setVisibility(parentId, elementId, options, preserveScroll);
  92. //set the visibility of the annotation box as well if it exists
  93. var ann = document.getElementById(elementId + "_ann");
  94. if(ann) _visibility.SetVisible(ann, options.value);
  95. //set ref visibility for ref of flow shape, if that exists
  96. var ref = document.getElementById(elementId + '_ref');
  97. if(ref) _visibility.SetVisible(ref, options.value);
  98. };
  99. var _setVisibility = function(parentId, childId, options, preserveScroll) {
  100. var wrapped = $jobj(childId);
  101. var completeTotal = 1;
  102. var visible = $ax.visibility.IsIdVisible(childId);
  103. if(visible == options.value) {
  104. options.onComplete && options.onComplete();
  105. $ax.action.fireAnimationFromQueue(childId, $ax.action.queueTypes.fade);
  106. return;
  107. }
  108. var child = $jobj(childId);
  109. var size = options.size || (options.containerExists ? $(child.children()[0]) : child);
  110. var isIdFitToContent = $ax.dynamicPanelManager.isIdFitToContent(parentId);
  111. //fade and resize won't work together when there is a container... but we still needs the container for fit to content DPs
  112. var needContainer = options.easing && options.easing != 'none' && (options.easing != 'fade' || isIdFitToContent);
  113. var cullPosition = options.cull ? options.cull.css('position') : '';
  114. var containerExists = options.containerExists;
  115. var isFullWidth = $ax.dynamicPanelManager.isPercentWidthPanel($obj(childId));
  116. // 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.
  117. var needSetSize = false;
  118. var sizeObj = {};
  119. if(needContainer) {
  120. var sizeId = '';
  121. if($ax.dynamicPanelManager.isIdFitToContent(childId)) sizeId = childId;
  122. else {
  123. var panelId = $ax.repeater.removeSuffixFromElementId(childId);
  124. if($ax.dynamicPanelManager.isIdFitToContent(panelId)) sizeId = panelId;
  125. }
  126. if(sizeId) {
  127. needSetSize = true;
  128. sizeObj = $jobj(sizeId);
  129. var newSize = options.cull || sizeObj;
  130. var newAxSize = $ax('#' + newSize.attr('id'));
  131. sizeObj.width(newAxSize.width());
  132. sizeObj.height(newAxSize.height());
  133. }
  134. }
  135. var wrappedOffset = { left: 0, top: 0 };
  136. var visibleWrapped = wrapped;
  137. if(needContainer) {
  138. var childObj = $obj(childId);
  139. if (options.cull) {
  140. var axCull = $ax('#' + options.cull.attr('id'));
  141. var containerWidth = axCull.width();
  142. var containerHeight = axCull.height();
  143. } else {
  144. if (childObj && ($ax.public.fn.IsLayer(childObj.type))) {// || childObj.generateCompound)) {
  145. var boundingRectangle = $ax('#' + childId).offsetBoundingRect();
  146. //var boundingRectangle = $ax.public.fn.getWidgetBoundingRect(childId);
  147. wrappedOffset.left = boundingRectangle.left;
  148. wrappedOffset.top = boundingRectangle.top;
  149. containerWidth = boundingRectangle.width;
  150. containerHeight = boundingRectangle.height;
  151. } else if (childObj && childObj.generateCompound) {
  152. var image = $jobj(childId + '_img');
  153. containerWidth = $ax.getNumFromPx(image.css('width'));
  154. containerHeight = $ax.getNumFromPx(image.css('height'));
  155. wrappedOffset.left = $ax.getNumFromPx(image.css('left'));
  156. wrappedOffset.top = $ax.getNumFromPx(image.css('top'));
  157. } else {
  158. containerWidth = $ax('#' + childId).width();
  159. containerHeight = $ax('#' + childId).height();
  160. }
  161. }
  162. var containerId = $ax.visibility.applyWidgetContainer(childId);
  163. // var container = _makeContainer(containerId, options.cull || boundingRectangle, isFullWidth, options.easing == 'flip', wrappedOffset, options.containerExists);
  164. var container = _makeContainer(containerId, containerWidth, containerHeight, isFullWidth, options.easing == 'flip', wrappedOffset, options.containerExists);
  165. if(options.containInner) {
  166. wrapped = _wrappedChildren(containerExists ? $(child.children()[0]) : child);
  167. // Filter for visibile wrapped children
  168. visibleWrapped = [];
  169. for (var i = 0; i < wrapped.length; i++) if($ax.visibility.IsVisible(wrapped[i])) visibleWrapped.push(wrapped[i]);
  170. visibleWrapped = $(visibleWrapped);
  171. completeTotal = visibleWrapped.length;
  172. if(!containerExists) container.prependTo(child);
  173. // Offset items if necessary
  174. if(!containerExists && (wrappedOffset.left != 0 || wrappedOffset.top != 0)) {
  175. for(var i = 0; i < wrapped.length; i++) {
  176. var inner = $(wrapped[i]);
  177. inner.css('left', $ax.getNumFromPx(inner.css('left')) - wrappedOffset.left);
  178. inner.css('top', $ax.getNumFromPx(inner.css('top')) - wrappedOffset.top);
  179. // Parent layer is now size 0, so have to have to use conatiner since it's the real size.
  180. // Should we use container all the time? This may make things easier for fit panels too.
  181. size = container;
  182. }
  183. }
  184. } else if(!containerExists) container.insertBefore(child);
  185. if(!containerExists) wrapped.appendTo(container);
  186. if (options.value && options.containInner) {
  187. //has to set children first because flip to show needs children invisible
  188. _setAllVisible(visibleWrapped, false);
  189. //_updateChildAlignment(childId);
  190. _setAllVisible(child, true);
  191. }
  192. }
  193. var completeCount = 0;
  194. var onComplete = function () {
  195. completeCount++;
  196. if (needContainer && completeCount == completeTotal) {
  197. if ($ax.public.fn.isCompoundVectorHtml(container.parent()[0])) {
  198. wrappedOffset.left = $ax.getNumFromPx(container.css('left'));
  199. wrappedOffset.top = $ax.getNumFromPx(container.css('top'));
  200. }
  201. if (options.containInner && !containerExists) {
  202. if (wrappedOffset.left != 0 || wrappedOffset.top != 0) {
  203. for (i = 0; i < wrapped.length; i++) {
  204. inner = $(wrapped[i]);
  205. if (!inner.hasClass('text')) {
  206. inner.css('left', $ax.getNumFromPx(inner.css('left')) + wrappedOffset.left);
  207. inner.css('top', $ax.getNumFromPx(inner.css('top')) + wrappedOffset.top);
  208. }
  209. }
  210. }
  211. wrapped.filter('.text').css({ 'left': '', 'top': '' });
  212. }
  213. if(options.containInner && !options.value) {
  214. _setAllVisible(child, false);
  215. _setAllVisible(visibleWrapped, true);
  216. }
  217. if(containerExists) {
  218. if(!options.settingChild) container.css('position', 'relative;');
  219. } else {
  220. wrapped.insertBefore(container);
  221. container.remove();
  222. }
  223. if(childObj && $ax.public.fn.IsDynamicPanel(childObj.type) && window.modifiedDynamicPanleParentOverflowProp) {
  224. child.css('overflow', 'hidden');
  225. window.modifiedDynamicPanleParentOverflowProp = false;
  226. }
  227. }
  228. //if(options.value) _updateChildAlignment(childId);
  229. if(!needContainer || completeTotal == completeCount) {
  230. if(options.cull) options.cull.css('position', cullPosition);
  231. if(needSetSize) {
  232. sizeObj.css('width', 'auto');
  233. sizeObj.css('height', 'auto');
  234. }
  235. options.onComplete && options.onComplete();
  236. if(options.fire) {
  237. $ax.event.raiseSyntheticEvent(childId, options.value ? 'onShow' : 'onHide');
  238. $ax.action.fireAnimationFromQueue(childId, $ax.action.queueTypes.fade);
  239. }
  240. }
  241. };
  242. // Nothing actually being animated, all wrapped elements invisible
  243. if(!visibleWrapped.length) {
  244. if(!options.easing || options.easing == 'none') {
  245. $ax.visibility.SetIdVisible(childId, options.value);
  246. completeTotal = 1;
  247. onComplete();
  248. } else {
  249. window.setTimeout(function() {
  250. completeCount = completeTotal - 1;
  251. onComplete();
  252. },options.duration);
  253. }
  254. return;
  255. }
  256. if(!options.easing || options.easing == 'none') {
  257. $ax.visibility.SetIdVisible(childId, options.value);
  258. completeTotal = 1;
  259. onComplete();
  260. } else if(options.easing == 'fade') {
  261. if(options.value) {
  262. if(preserveScroll) {
  263. visibleWrapped.css('opacity', 0);
  264. visibleWrapped.css('visibility', 'inherit');
  265. visibleWrapped.css('display', 'block');
  266. //was hoping we could just use fadein here, but need to set display before set scroll position
  267. _tryResumeScrollForDP(childId);
  268. visibleWrapped.animate({ opacity: 1 }, {
  269. duration: options.duration,
  270. easing: 'swing',
  271. queue: false,
  272. complete: function() {
  273. $ax.visibility.SetIdVisible(childId, true);
  274. visibleWrapped.css('opacity', '');
  275. onComplete();
  276. }
  277. });
  278. } else {
  279. // Can't use $ax.visibility.SetIdVisible, because we only want to set visible, we don't want to set display, fadeIn will handle that.
  280. visibleWrapped.css('visibility', 'inherit');
  281. visibleWrapped.fadeIn({
  282. queue: false,
  283. duration: options.duration,
  284. complete: onComplete
  285. });
  286. }
  287. } else {
  288. // Fading here is being strange...
  289. visibleWrapped.animate({ opacity: 0 }, { duration: options.duration, easing: 'swing', queue: false, complete: function() {
  290. $ax.visibility.SetIdVisible(childId, false);
  291. visibleWrapped.css('opacity', '');
  292. onComplete();
  293. }});
  294. }
  295. } else if (options.easing == 'flip') {
  296. //this container will hold
  297. var trapScroll = _trapScrollLoc(childId);
  298. var innerContainer = $('<div></div>');
  299. innerContainer.attr('id', containerId + "_inner");
  300. innerContainer.data('flip', options.direction == 'left' || options.direction == 'right' ? 'y' : 'x');
  301. innerContainer.css({
  302. position: 'relative',
  303. 'width': containerWidth,
  304. 'height': containerHeight,
  305. 'display': 'flex'
  306. });
  307. innerContainer.appendTo(container);
  308. wrapped.appendTo(innerContainer);
  309. if(childObj && $ax.public.fn.IsDynamicPanel(childObj.type)) var containerDiv = child;
  310. else containerDiv = parentId ? $jobj(parentId) : child.parent();
  311. completeTotal = 1;
  312. var flipdegree;
  313. var originForFlip = containerWidth / 2 + 'px ' + containerHeight / 2 + 'px';
  314. if (options.value) {
  315. innerContainer.css({
  316. '-webkit-transform-origin': originForFlip,
  317. '-ms-transform-origin': originForFlip,
  318. 'transform-origin': originForFlip,
  319. });
  320. //options.value == true means in or show, note to get here, the element must be currently hidden to show,
  321. // we need to first flip it +/- 90deg without animation (180 if we want to show the back of the flip)
  322. switch(options.direction) {
  323. case 'right':
  324. case 'left':
  325. _setRotateTransformation(innerContainer, _getRotateString(true, options.direction === 'right', options.showFlipBack));
  326. flipdegree = 'rotateY(0deg)';
  327. break;
  328. case 'up':
  329. case 'down':
  330. _setRotateTransformation(innerContainer, _getRotateString(false, options.direction === 'up', options.showFlipBack));
  331. flipdegree = 'rotateX(0deg)';
  332. break;
  333. }
  334. var onFlipShowComplete = function() {
  335. var trapScroll = _trapScrollLoc(childId);
  336. $ax.visibility.SetIdVisible(childId, true);
  337. wrapped.insertBefore(innerContainer);
  338. innerContainer.remove();
  339. trapScroll();
  340. onComplete();
  341. };
  342. innerContainer.css({
  343. '-webkit-backface-visibility': 'hidden',
  344. 'backface-visibility': 'hidden'
  345. });
  346. child.css({
  347. 'display': '',
  348. 'visibility': 'inherit'
  349. });
  350. visibleWrapped.css({
  351. 'display': '',
  352. 'visibility': 'inherit'
  353. });
  354. innerContainer.css({
  355. '-webkit-transition-duration': options.duration + 'ms',
  356. 'transition-duration': options.duration + 'ms'
  357. });
  358. if(preserveScroll) _tryResumeScrollForDP(childId);
  359. _setRotateTransformation(innerContainer, flipdegree, containerDiv, onFlipShowComplete, options.duration, true);
  360. } else { //hide or out
  361. innerContainer.css({
  362. '-webkit-transform-origin': originForFlip,
  363. '-ms-transform-origin': originForFlip,
  364. 'transform-origin': originForFlip,
  365. });
  366. switch(options.direction) {
  367. case 'right':
  368. case 'left':
  369. flipdegree = _getRotateString(true, options.direction !== 'right', options.showFlipBack);
  370. break;
  371. case 'up':
  372. case 'down':
  373. flipdegree = _getRotateString(false, options.direction !== 'up', options.showFlipBack);
  374. break;
  375. }
  376. var onFlipHideComplete = function() {
  377. var trapScroll = _trapScrollLoc(childId);
  378. wrapped.insertBefore(innerContainer);
  379. $ax.visibility.SetIdVisible(childId, false);
  380. innerContainer.remove();
  381. trapScroll();
  382. onComplete();
  383. };
  384. innerContainer.css({
  385. '-webkit-backface-visibility': 'hidden',
  386. 'backface-visibility': 'hidden',
  387. '-webkit-transition-duration': options.duration + 'ms',
  388. 'transition-duration': options.duration + 'ms'
  389. });
  390. if(preserveScroll) _tryResumeScrollForDP(childId);
  391. _setRotateTransformation(innerContainer, flipdegree, containerDiv, onFlipHideComplete, options.duration, true);
  392. }
  393. trapScroll();
  394. } else {
  395. // Because the move is gonna fire on annotation and ref too, need to update complete total
  396. completeTotal = $addAll(visibleWrapped, childId).length;
  397. if(options.value) {
  398. _slideStateIn(childId, childId, options, size, false, onComplete, visibleWrapped, preserveScroll);
  399. } else {
  400. var tops = [];
  401. var lefts = [];
  402. for(var i = 0; i < visibleWrapped.length; i++) {
  403. var currWrapped = $(visibleWrapped[i]);
  404. tops.push(fixAuto(currWrapped, 'top'));
  405. lefts.push(fixAuto(currWrapped, 'left'));
  406. }
  407. var onOutComplete = function () {
  408. //bring back SetIdVisible on childId for hiding lightbox
  409. $ax.visibility.SetIdVisible(childId, false);
  410. for(i = 0; i < visibleWrapped.length; i++) {
  411. currWrapped = $(visibleWrapped[i]);
  412. $ax.visibility.SetVisible(currWrapped[0], false);
  413. currWrapped.css('top', tops[i]);
  414. currWrapped.css('left', lefts[i]);
  415. }
  416. onComplete();
  417. };
  418. _slideStateOut(size, childId, options, onOutComplete, visibleWrapped);
  419. }
  420. }
  421. // If showing, go through all rich text objects inside you, and try to redo alignment of them
  422. //if(options.value && !options.containInner) {
  423. // _updateChildAlignment(childId);
  424. //}
  425. };
  426. // 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
  427. var fixAuto = function (jobj, prop) {
  428. var val = jobj.css(prop);
  429. return val == 'auto' ? '0px' : val;
  430. };
  431. var _getRotateString = function (y, neg, showFlipBack) {
  432. // y means flip on y axis, or left/right, neg means flipping it left/down, and show back is for set panel state
  433. // and will show the back of the widget (transparent) for the first half of a show, or second half of a hide.
  434. return 'rotate' + (y ? 'Y' : 'X') + '(' + (neg ? '-' : '') + (showFlipBack ? 180 : IE ? 91 : 90) + 'deg)';
  435. }
  436. //var _updateChildAlignment = function(childId) {
  437. // var descendants = $jobj(childId).find('.text');
  438. // for(var i = 0; i < descendants.length; i++) $ax.style.updateTextAlignmentForVisibility(descendants[i].id);
  439. //};
  440. var _wrappedChildren = function (child) {
  441. return child.children();
  442. //var children = child.children();
  443. //var valid = [];
  444. //for(var i = 0; i < children.length; i++) if($ax.visibility.IsVisible(children[i])) valid.push(children[i]);
  445. //return $(valid);
  446. };
  447. var requestAnimationFrame = window.requestAnimationFrame ||
  448. window.webkitRequestAnimationFrame ||
  449. window.mozRequestAnimationFrame || window.msRequestAnimationFrame ||
  450. function (callback) {
  451. window.setTimeout(callback, 1000 / 60);
  452. };
  453. var _setRotateTransformation = function(elementsToSet, transformValue, elementParent, flipCompleteCallback, flipDurationMs, useAnimationFrame) {
  454. if(flipCompleteCallback) {
  455. //here we didn't use 'transitionend' event to fire callback
  456. //when show/hide on one element, changing transition property will stop the event from firing
  457. window.setTimeout(flipCompleteCallback, flipDurationMs);
  458. }
  459. var trasformCss = {
  460. '-webkit-transform': transformValue,
  461. '-moz-transform': transformValue,
  462. '-ms-transform': transformValue,
  463. '-o-transform': transformValue,
  464. 'transform': transformValue
  465. };
  466. if(useAnimationFrame) {
  467. if(FIREFOX || CHROME) $('body').hide().show(0); //forces FF to render the animation
  468. requestAnimationFrame(function() {
  469. elementsToSet.css(trasformCss);
  470. });
  471. } else elementsToSet.css(trasformCss);
  472. //when deal with dynamic panel, we need to set it's parent's overflow to visible to have the 3d effect
  473. //NOTE: we need to set this back when both flips finishes in DP, to prevents one animation finished first and set this back
  474. if(elementParent && elementParent.css('overflow') === 'hidden') {
  475. elementParent.css('overflow', 'visible');
  476. window.modifiedDynamicPanleParentOverflowProp = true;
  477. }
  478. };
  479. $ax.visibility.GetPanelState = function(id) {
  480. var children = $ax.visibility.getRealChildren($jobj(id).children());
  481. for(var i = 0; i < children.length; i++) {
  482. if(children[i].style && $ax.visibility.IsVisible(children[i])) return children[i].id;
  483. }
  484. return '';
  485. };
  486. var containerCount = {};
  487. $ax.visibility.SetPanelState = function(id, stateId, easingOut, directionOut, durationOut, easingIn, directionIn, durationIn, showWhenSet) {
  488. var show = !$ax.visibility.IsIdVisible(id) && showWhenSet;
  489. if(show) $ax.visibility.SetIdVisible(id, true);
  490. // Exit here if already at desired state.
  491. if($ax.visibility.IsIdVisible(stateId)) {
  492. if(show) {
  493. $ax.event.raiseSyntheticEvent(id, 'onShow');
  494. // If showing size changes and need to update parent panels
  495. $ax.dynamicPanelManager.fitParentPanel(id);
  496. }
  497. $ax.action.fireAnimationFromQueue(id, $ax.action.queueTypes.setState);
  498. return;
  499. }
  500. var hasEasing = easingIn != 'none' || easingOut != 'none';
  501. if(hasEasing) _pushContainer(id, true);
  502. var state = $jobj(stateId);
  503. var oldStateId = $ax.visibility.GetPanelState(id);
  504. var oldState = $jobj(oldStateId);
  505. var isFixed = $jobj(id).css('position') == 'fixed';
  506. //pin to browser
  507. if(isFixed) $ax.dynamicPanelManager.adjustFixed(id, oldState.width(), oldState.height(), state.width(), state.height());
  508. _bringPanelStateToFront(id, stateId, oldStateId, easingIn == 'none' || durationIn == '0');
  509. var fitToContent = $ax.dynamicPanelManager.isIdFitToContent(id);
  510. var resized = false;
  511. if(fitToContent) {
  512. // Set resized
  513. //var width = state.width();
  514. //var height = state.height();
  515. var newBoundingRect = $ax('#' + stateId).childrenBoundingRect();
  516. var width = newBoundingRect.right;
  517. var height = newBoundingRect.bottom;
  518. var oldBoundingRect = $ax('#' + id).size();
  519. var oldWidth = oldBoundingRect.right;
  520. var oldHeight = oldBoundingRect.bottom;
  521. resized = width != oldWidth || height != oldHeight;
  522. //resized = width != oldState.width() || height != oldState.height();
  523. $ax.visibility.setResizedSize(id, $obj(id).percentWidth ? oldWidth : width, height);
  524. }
  525. //edge case for sliding
  526. var movement = (directionOut == 'left' || directionOut == 'up' || state.children().length == 0) && oldState.children().length != 0 ? oldState : state;
  527. var onCompleteCount = 0;
  528. var onComplete = function () {
  529. //move this call from _setVisibility() for animate out.
  530. //Because this will make the order of dp divs consistence: the showing panel is always in front after both animation finished
  531. //tested in the cases where one panel is out/show slower/faster/same time/instantly.
  532. _bringPanelStateToFront(id, stateId, oldStateId, false);
  533. if (window.modifiedDynamicPanleParentOverflowProp) {
  534. var parent = id ? $jobj(id) : child.parent();
  535. parent.css('overflow', 'hidden');
  536. window.modifiedDynamicPanleParentOverflowProp = false;
  537. }
  538. $ax.dynamicPanelManager.fitParentPanel(id);
  539. $ax.dynamicPanelManager.updatePanelPercentWidth(id);
  540. $ax.dynamicPanelManager.updatePanelContentPercentWidth(id);
  541. $ax.action.fireAnimationFromQueue(id, $ax.action.queueTypes.setState);
  542. $ax.event.raiseSyntheticEvent(id, "onPanelStateChange");
  543. $ax.event.leavingState(oldStateId);
  544. if (hasEasing) _popContainer(id, true);
  545. $ax.dynamicPanelManager.updateMobileScroll(id, stateId);
  546. };
  547. // Must do state out first, so if we cull by new state, location is correct
  548. _setVisibility(id, oldStateId, {
  549. value: false,
  550. easing: easingOut,
  551. direction: directionOut,
  552. duration: durationOut,
  553. containerExists: true,
  554. onComplete: function() {
  555. // if(easingIn !== 'flip') _bringPanelStateToFront(id, stateId);
  556. if (++onCompleteCount == 2) onComplete();
  557. },
  558. settingChild: true,
  559. size: movement,
  560. //cull for
  561. cull: easingOut == 'none' || state.children().length == 0 ? oldState : state,
  562. showFlipBack: true
  563. });
  564. _setVisibility(id, stateId, {
  565. value: true,
  566. easing: easingIn,
  567. direction: directionIn,
  568. duration: durationIn,
  569. containerExists: true,
  570. onComplete: function () {
  571. // if (easingIn === 'flip') _bringPanelStateToFront(id, stateId);
  572. if (++onCompleteCount == 2) onComplete();
  573. },
  574. settingChild: true,
  575. //size for offset
  576. size: movement,
  577. showFlipBack: true
  578. });
  579. if(show) $ax.event.raiseSyntheticEvent(id, 'onShow');
  580. if(resized) $ax.event.raiseSyntheticEvent(id, 'onResize');
  581. };
  582. var containedFixed = {};
  583. var _pushContainer = _visibility.pushContainer = function(id, panel) {
  584. var count = containerCount[id];
  585. if(count) containerCount[id] = count + 1;
  586. else {
  587. var trapScroll = _trapScrollLoc(id);
  588. var jobj = $jobj(id);
  589. var children = jobj.children();
  590. var css = {
  591. position: 'relative',
  592. top: 0,
  593. left: 0
  594. };
  595. if(!panel) {
  596. var boundingRect = $ax('#' + id).offsetBoundingRect();
  597. //var boundingRect = $axure.fn.getWidgetBoundingRect(id);
  598. css.top = boundingRect.top;
  599. css.left = boundingRect.left;
  600. }
  601. var container = $('<div></div>');
  602. container.attr('id', ''); // Placeholder id, so we won't try to recurse the container until it is ready
  603. container.css(css);
  604. //container.append(jobj.children());
  605. jobj.append(container);
  606. containerCount[id] = 1;
  607. // Panel needs to wrap children
  608. if(panel) {
  609. for(var i = 0; i < children.length; i++) {
  610. var child = $(children[i]);
  611. var childContainer = $('<div></div>');
  612. childContainer.attr('id', $ax.visibility.applyWidgetContainer(child.attr('id')));
  613. childContainer.css(css);
  614. child.after(childContainer);
  615. childContainer.append(child);
  616. container.append(childContainer);
  617. }
  618. } else {
  619. var focus = _getCurrFocus();
  620. if(focus) $ax.event.addSuppressedEvent($ax.repeater.removeSuffixFromElementId(focus), 'OnLostFocus');
  621. // Layer needs to fix top left
  622. var childIds = $ax('#' + id).getChildren()[0].children;
  623. for(var i = 0; i < childIds.length; i++) {
  624. var childId = childIds[i];
  625. var childObj = $jobj(childId);
  626. var fixedInfo = $ax.dynamicPanelManager.getFixedInfo(childId);
  627. if(fixedInfo.fixed) {
  628. var axObj = $ax('#' + childId);
  629. var viewportLocation = axObj.viewportLocation();
  630. var left = viewportLocation.left;
  631. var top = viewportLocation.top;
  632. //var left = axObj.left();
  633. //var top = axObj.top();
  634. containedFixed[childId] = { left: left, top: top, fixed: fixedInfo };
  635. childObj.css('left', left);
  636. childObj.css('top', top);
  637. childObj.css('margin-left', 0);
  638. childObj.css('margin-top', 0);
  639. childObj.css('right', 'auto');
  640. childObj.css('bottom', 'auto');
  641. childObj.css('position', 'absolute');
  642. }
  643. var cssChange = {
  644. left: '-=' + css.left,
  645. top: '-=' + css.top
  646. };
  647. if($ax.getTypeFromElementId(childId) == $ax.constants.LAYER_TYPE) {
  648. _pushContainer(childId, false);
  649. $ax.visibility.applyWidgetContainer(childId, true).css(cssChange);
  650. } else {
  651. //if ($ax.public.fn.isCompoundVectorHtml(jobj[0])) {
  652. // var grandChildren = jobj[0].children;
  653. // //while (grandChildren.length > 0 && grandChildren[0].id.indexOf('container') >= 0) grandChildren = grandChildren[0].children;
  654. // for (var j = 0; j < grandChildren.length; j++) {
  655. // var grandChildId = grandChildren[j].id;
  656. // if (grandChildId.indexOf(childId + 'p') >= 0 || grandChildId.indexOf('_container') >= 0) $jobj(grandChildId).css(cssChange);
  657. // }
  658. //} else
  659. // Need to include ann and ref in move.
  660. childObj = $addAll(childObj, childId);
  661. childObj.css(cssChange);
  662. }
  663. container.append(childObj);
  664. }
  665. _setCurrFocus(focus);
  666. }
  667. container.attr('id', $ax.visibility.applyWidgetContainer(id)); // Setting the correct final id for the container
  668. trapScroll();
  669. }
  670. };
  671. var _popContainer = _visibility.popContainer = function (id, panel) {
  672. var count = containerCount[id];
  673. if(!count) return;
  674. count--;
  675. containerCount[id] = count;
  676. if(count != 0) return;
  677. var trapScroll = _trapScrollLoc(id);
  678. var jobj = $jobj(id);
  679. var container = $ax.visibility.applyWidgetContainer(id, true);
  680. // If layer is at bottom or right of page, unwrapping could change scroll by temporarily reducting page size.
  681. // To avoid this, we let container persist on page, with the size it is at this point, and don't remove container completely
  682. // until the children are back to their proper locations.
  683. var size = $ax('#' + id).size();
  684. container.css('width', size.width);
  685. container.css('height', size.height);
  686. var focus = _getCurrFocus();
  687. if(focus) $ax.event.addSuppressedEvent($ax.repeater.removeSuffixFromElementId(focus), 'OnLostFocus');
  688. jobj.append(container.children());
  689. _setCurrFocus(focus);
  690. $('body').first().append(container);
  691. // Layer doesn't have children containers to clean up
  692. if(panel) {
  693. var children = jobj.children();
  694. for(var i = 0; i < children.length; i++) {
  695. var childContainer = $(children[i]);
  696. var child = $(childContainer.children()[0]);
  697. childContainer.after(child);
  698. childContainer.remove();
  699. }
  700. } else {
  701. var left = container.css('left');
  702. var top = container.css('top');
  703. var childIds = $ax('#' + id).getChildren()[0].children;
  704. for (var i = 0; i < childIds.length; i++) {
  705. var childId = childIds[i];
  706. var cssChange = {
  707. left: '+=' + left,
  708. top: '+=' + top
  709. };
  710. if($ax.getTypeFromElementId(childId) == $ax.constants.LAYER_TYPE) {
  711. $ax.visibility.applyWidgetContainer(childId, true).css(cssChange);
  712. _popContainer(childId, false);
  713. } else {
  714. var childObj = $jobj(childId);
  715. // if ($ax.public.fn.isCompoundVectorHtml(jobj[0])) {
  716. // var grandChildren = jobj[0].children;
  717. // //while (grandChildren.length > 0 && grandChildren[0].id.indexOf('container') >= 0) grandChildren = grandChildren[0].children;
  718. // for (var j = 0; j < grandChildren.length; j++) {
  719. // var grandChildId = grandChildren[j].id;
  720. // if (grandChildId.indexOf(childId + 'p') >= 0 || grandChildId.indexOf('_container') >= 0) $jobj(grandChildId).css(cssChange);
  721. // }
  722. //} else
  723. var allObjs = $addAll(childObj, childId); // Just include other objects for initial css. Fixed panels need to be dealt with separately.
  724. allObjs.css(cssChange);
  725. var fixedInfo = containedFixed[childId];
  726. if(fixedInfo) {
  727. delete containedFixed[childId];
  728. childObj.css('position', 'fixed');
  729. var deltaX = $ax.getNumFromPx(childObj.css('left')) - fixedInfo.left;
  730. var deltaY = $ax.getNumFromPx(childObj.css('top')) - fixedInfo.top;
  731. fixedInfo = fixedInfo.fixed;
  732. if(fixedInfo.horizontal == 'left') childObj.css('left', fixedInfo.x + deltaX);
  733. else if(fixedInfo.horizontal == 'center') {
  734. childObj.css('left', '50%');
  735. childObj.css('margin-left', fixedInfo.x + deltaX);
  736. } else {
  737. childObj.css('left', 'auto');
  738. childObj.css('right', fixedInfo.x - deltaX);
  739. }
  740. if(fixedInfo.vertical == 'top') childObj.css('top', fixedInfo.y + deltaY);
  741. else if(fixedInfo.vertical == 'middle') {
  742. childObj.css('top', '50%');
  743. childObj.css('margin-top', fixedInfo.y + deltaY);
  744. } else {
  745. childObj.css('top', 'auto');
  746. childObj.css('bottom', fixedInfo.y - deltaY);
  747. }
  748. $ax.dynamicPanelManager.updatePanelPercentWidth(childId);
  749. $ax.dynamicPanelManager.updatePanelContentPercentWidth(childId);
  750. }
  751. }
  752. }
  753. }
  754. container.remove();
  755. trapScroll();
  756. };
  757. var _trapScrollLoc = function(id) {
  758. var locs = {};
  759. var states = $jobj(id).find('.panel_state');
  760. for(var i = 0; i < states.length; i++) {
  761. var state = $(states[i]);
  762. locs[state.attr('id')] = { x: state.scrollLeft(), y: state.scrollTop() };
  763. }
  764. return function() {
  765. for(var key in locs) {
  766. var state = $jobj(key);
  767. state.scrollLeft(locs[key].x);
  768. state.scrollTop(locs[key].y);
  769. }
  770. };
  771. }
  772. var _getCurrFocus = function () {
  773. // Only care about focused a tags and inputs
  774. var id = window.lastFocusedClickable && window.lastFocusedClickable.id;
  775. if(!id) return id;
  776. var jobj = $(window.lastFocusedClickable);
  777. return jobj.is('a') || jobj.is('input') ? id : '';
  778. }
  779. var _setCurrFocus = function(id) {
  780. if(id) {
  781. // This is really just needed for IE, so if this causes issues on other browsers, try adding that check here
  782. var trap = $ax.event.blockEvent($ax.repeater.removeSuffixFromElementId(id), 'OnFocus');
  783. window.setTimeout(function () {
  784. $jobj(id).focus();
  785. trap();
  786. }, 0);
  787. }
  788. }
  789. //use this to save & restore DP's scroll position when show/hide
  790. //key => dp's id (not state's id, because it seems we can change state while hiding)
  791. //value => first state's id & scroll position
  792. //we only need to store one scroll position for one DP, and remove the key after shown.
  793. var DPStateAndScroll = {}
  794. var _tryResumeScrollForDP = function (dpId, deleteId) {
  795. var scrollObj = DPStateAndScroll[dpId];
  796. if(scrollObj) {
  797. var shownState = document.getElementById(scrollObj.shownId);
  798. if(scrollObj.left) shownState.scrollLeft = scrollObj.left;
  799. if(scrollObj.top) shownState.scrollTop = scrollObj.top;
  800. if(deleteId) delete DPStateAndScroll[dpId];
  801. }
  802. };
  803. // var _makeContainer = function (containerId, rect, isFullWidth, isFlip, offset, containerExists) {
  804. var _makeContainer = function (containerId, width, height, isFullWidth, isFlip, offset, containerExists) {
  805. if(containerExists) var container = $jobj(containerId);
  806. else {
  807. container = $('<div></div>');
  808. container.attr('id', containerId);
  809. }
  810. var css = {
  811. position: 'absolute',
  812. width: width,
  813. height: height,
  814. display: 'flex'
  815. };
  816. if(!containerExists) {
  817. // If container exists, may be busy updating location. Will init and update it correctly.
  818. css.top = offset.top;
  819. css.left = offset.left;
  820. }
  821. if(isFlip) {
  822. css.perspective = '800px';
  823. css.webkitPerspective = "800px";
  824. css.mozPerspective = "800px";
  825. //adding this to make Edge happy
  826. css['transform-style'] = 'preserve-3d';
  827. } else css.overflow = 'hidden';
  828. //perspective on container will give us 3d effect when flip
  829. //if(!isFlip) css.overflow = 'hidden';
  830. // Rect should be a jquery not axquery obj
  831. //_getFixedCss(css, rect.$ ? rect.$() : rect, fixedInfo, isFullWidth);
  832. container.css(css);
  833. return container;
  834. };
  835. var CONTAINER_SUFFIX = _visibility.CONTAINER_SUFFIX = '_container';
  836. var CONTAINER_INNER = CONTAINER_SUFFIX + '_inner';
  837. _visibility.getWidgetFromContainer = function(id) {
  838. var containerIndex = id.indexOf(CONTAINER_SUFFIX);
  839. if(containerIndex == -1) return id;
  840. return id.substr(0, containerIndex) + id.substr(containerIndex + CONTAINER_SUFFIX.length);
  841. };
  842. // Apply container to widget id if necessary.
  843. // returnJobj: True if you want the jquery object rather than id returned
  844. // skipCheck: True if you want the query returned reguardless of container existing
  845. // checkInner: True if inner container should be checked
  846. _visibility.applyWidgetContainer = function (id, returnJobj, skipCheck, checkInner) {
  847. // If container exists, just return (return query if requested)
  848. if(id.indexOf(CONTAINER_SUFFIX) != -1) return returnJobj ? $jobj(id) : id;
  849. // Get desired id, and return it if query is not desired
  850. var containerId = $ax.repeater.applySuffixToElementId(id, checkInner ? CONTAINER_INNER : CONTAINER_SUFFIX);
  851. if(!returnJobj) return containerId;
  852. // If skipping check or container exists, just return innermost container requested
  853. var container = $jobj(containerId);
  854. if(skipCheck || container.length) return container;
  855. // If inner container was not checked, then no more to check, return query for widget
  856. if(!checkInner) return $jobj(id);
  857. // If inner container was checked, check for regular container still
  858. container = $jobj($ax.repeater.applySuffixToElementId(id, CONTAINER_SUFFIX));
  859. return container.length ? container : $jobj(id);
  860. };
  861. _visibility.isContainer = function(id) {
  862. return id.indexOf(CONTAINER_SUFFIX) != -1;
  863. };
  864. _visibility.getRealChildren = function(query) {
  865. while(query.length && $(query[0]).attr('id').indexOf(CONTAINER_SUFFIX) != -1) query = query.children();
  866. return query;
  867. };
  868. //var _getFixedCss = function(css, rect, fixedInfo, isFullWidth) {
  869. // // todo: **mas** make sure this is ok
  870. // if(fixedInfo.fixed) {
  871. // css.position = 'fixed';
  872. // if(fixedInfo.horizontal == 'left') css.left = fixedInfo.x;
  873. // else if(fixedInfo.horizontal == 'center') {
  874. // css.left = isFullWidth ? '0px' : '50%';
  875. // css['margin-left'] = fixedInfo.x;
  876. // } else if(fixedInfo.horizontal == 'right') {
  877. // css.left = 'auto';
  878. // css.right = fixedInfo.x;
  879. // }
  880. // if(fixedInfo.vertical == 'top') css.top = fixedInfo.y;
  881. // else if(fixedInfo.vertical == 'middle') {
  882. // css.top = '50%';
  883. // css['margin-top'] = fixedInfo.y;
  884. // } else if(fixedInfo.vertical == 'bottom') {
  885. // css.top = 'auto';
  886. // css.bottom = fixedInfo.y;
  887. // }
  888. // } else {
  889. // css.left = Number(rect.css('left').replace('px', '')) || 0;
  890. // css.top = Number(rect.css('top').replace('px', '')) || 0;
  891. // }
  892. //};
  893. var _slideStateOut = function (container, stateId, options, onComplete, jobj) {
  894. var directionOut = options.direction;
  895. var axObject = $ax('#' + container.attr('id'));
  896. var width = axObject.width();
  897. var height = axObject.height();
  898. _blockSetMoveIds = true;
  899. if(directionOut == "right") {
  900. $ax.move.MoveWidget(stateId, width, 0, options, false, onComplete, false, jobj, true);
  901. } else if(directionOut == "left") {
  902. $ax.move.MoveWidget(stateId, -width, 0, options, false, onComplete, false, jobj, true);
  903. } else if(directionOut == "up") {
  904. $ax.move.MoveWidget(stateId, 0, -height, options, false, onComplete, false, jobj, true);
  905. } else if(directionOut == "down") {
  906. $ax.move.MoveWidget(stateId, 0, height, options, false, onComplete, false, jobj, true);
  907. }
  908. _blockSetMoveIds = false;
  909. };
  910. var _slideStateIn = function (id, stateId, options, container, makePanelVisible, onComplete, jobj, preserveScroll) {
  911. var directionIn = options.direction;
  912. var axObject = $ax('#' +container.attr('id'));
  913. var width = axObject.width();
  914. var height = axObject.height();
  915. if (makePanelVisible) $ax.visibility.SetIdVisible(id, true);
  916. for (i = 0; i < jobj.length; i++) $ax.visibility.SetVisible(jobj[i], true);
  917. for(var i = 0; i < jobj.length; i++) {
  918. var child = $(jobj[i]);
  919. var oldTop = $ax.getNumFromPx(fixAuto(child, 'top'));
  920. var oldLeft = $ax.getNumFromPx(fixAuto(child, 'left'));
  921. if (directionIn == "right") {
  922. child.css('left', oldLeft - width + 'px');
  923. } else if(directionIn == "left") {
  924. child.css('left', oldLeft + width + 'px');
  925. } else if(directionIn == "up") {
  926. child.css('top', oldTop + height + 'px');
  927. } else if(directionIn == "down") {
  928. child.css('top', oldTop - height + 'px');
  929. }
  930. }
  931. if(preserveScroll) _tryResumeScrollForDP(id);
  932. _blockSetMoveIds = true;
  933. if(directionIn == "right") {
  934. $ax.move.MoveWidget(stateId, width, 0, options, false, onComplete, false, jobj, true);
  935. } else if(directionIn == "left") {
  936. $ax.move.MoveWidget(stateId, -width, 0, options, false, onComplete, false, jobj, true);
  937. } else if(directionIn == "up") {
  938. $ax.move.MoveWidget(stateId, 0, -height, options, false, onComplete, false, jobj, true);
  939. } else if(directionIn == "down") {
  940. $ax.move.MoveWidget(stateId, 0, height, options, false, onComplete, false, jobj, true);
  941. }
  942. _blockSetMoveIds = false;
  943. };
  944. $ax.visibility.GetPanelStateId = function(dpId, index) {
  945. var itemNum = $ax.repeater.getItemIdFromElementId(dpId);
  946. var panelStateId = $ax.repeater.getScriptIdFromElementId(dpId) + '_state' + index;
  947. return $ax.repeater.createElementId(panelStateId, itemNum);
  948. };
  949. $ax.visibility.GetPanelStateCount = function(id) {
  950. return $ax.visibility.getRealChildren($jobj(id).children()).filter("[id*='_state']").length;
  951. };
  952. var _bringPanelStateToFront = function (dpId, stateId, oldStateId, oldInFront) {
  953. var panel = $jobj(dpId);
  954. var frontId = oldInFront ? oldStateId : stateId;
  955. if(containerCount[dpId]) {
  956. frontId = $ax.visibility.applyWidgetContainer(frontId);
  957. panel = $ax.visibility.applyWidgetContainer(dpId, true, false, true);
  958. }
  959. $jobj(frontId).appendTo(panel);
  960. //when bring a panel to front, it will be focused, and the previous front panel should fire blur event if it's lastFocusedClickableSelector
  961. //ie(currently 11) and firefox(currently 34) doesn't fire blur event, this is the hack to fire it manually
  962. if((IE || FIREFOX) && window.lastFocusedClickable && $ax.event.getFocusableWidgetOrChildId(window.lastFocusedControl) == window.lastFocusedClickable.id) {
  963. // Only need to do this if the currently focused widget is in the panel state that is being hidden.
  964. if($jobj(oldStateId).find('#' + window.lastFocusedClickable.id.split('_')[0]).length) $(window.lastFocusedClickable).triggerHandler('blur');
  965. }
  966. };
  967. var _limboIds = _visibility.limboIds = {};
  968. // limboId's is a dictionary of id->true, essentially a set.
  969. var _addLimboAndHiddenIds = $ax.visibility.addLimboAndHiddenIds = function(newLimboIds, newHiddenIds, query, skipRepeater) {
  970. var limboedByMaster = {};
  971. for(var key in newLimboIds) {
  972. if (!$ax.public.fn.IsReferenceDiagramObject($ax.getObjectFromElementId(key).type)) continue;
  973. var ids = $ax.model.idsInRdoToHideOrLimbo(key);
  974. for(var i = 0; i < ids.length; i++) limboedByMaster[ids[i]] = true;
  975. }
  976. var hiddenByMaster = {};
  977. for(key in newHiddenIds) {
  978. if (!$ax.public.fn.IsReferenceDiagramObject($ax.getObjectFromElementId(key).type)) continue;
  979. ids = $ax.model.idsInRdoToHideOrLimbo(key);
  980. for(i = 0; i < ids.length; i++) hiddenByMaster[ids[i]] = true;
  981. }
  982. // Extend with children of rdos
  983. newLimboIds = $.extend(newLimboIds, limboedByMaster);
  984. newHiddenIds = $.extend(newHiddenIds, hiddenByMaster);
  985. // something is only visible if it's not hidden and limboed
  986. query.each(function(diagramObject, elementId) {
  987. // Rdos already handled, contained widgets are limboed by the parent, and sub menus should be ignored
  988. if(diagramObject.isContained || $ax.public.fn.IsReferenceDiagramObject(diagramObject.type) || $ax.public.fn.IsTableCell(diagramObject.type) || $jobj(elementId).hasClass('sub_menu')) return;
  989. if(diagramObject.type == 'table' && $jobj(elementId).parent().hasClass('ax_menu')) return;
  990. if(skipRepeater) {
  991. // Any item in a repeater should return
  992. if($ax.getParentRepeaterFromElementIdExcludeSelf(elementId)) return;
  993. }
  994. var scriptId = $ax.repeater.getScriptIdFromElementId(elementId);
  995. var shouldBeVisible = Boolean(!newLimboIds[scriptId] && !newHiddenIds[scriptId]);
  996. var isVisible = Boolean(_isIdVisible(elementId));
  997. if(shouldBeVisible != isVisible) {
  998. _setWidgetVisibility(elementId, { value: shouldBeVisible, noContainer: true });
  999. }
  1000. });
  1001. _limboIds = _visibility.limboIds = $.extend(_limboIds, newLimboIds);
  1002. };
  1003. var _clearLimboAndHidden = $ax.visibility.clearLimboAndHidden = function(ids) {
  1004. _limboIds = _visibility.limboIds = {};
  1005. };
  1006. $ax.visibility.clearLimboAndHiddenIds = function(ids) {
  1007. for(var i = 0; i < ids.length; i++) {
  1008. var scriptId = $ax.repeater.getScriptIdFromElementId(ids[i]);
  1009. delete _limboIds[scriptId];
  1010. }
  1011. };
  1012. $ax.visibility.resetLimboAndHiddenToDefaults = function (query) {
  1013. if(!query) query = $ax('*');
  1014. _clearLimboAndHidden();
  1015. _addLimboAndHiddenIds(_defaultLimbo, _defaultHidden, query);
  1016. };
  1017. $ax.visibility.isScriptIdLimbo = function(scriptId) {
  1018. if(_limboIds[scriptId]) return true;
  1019. var repeater = $ax.getParentRepeaterFromScriptId(scriptId);
  1020. if(!repeater) return false;
  1021. var itemId = $ax.getItemIdsForRepeater(repeater)[0];
  1022. return _limboIds[$ax.repeater.createElementId(scriptId, itemId)];
  1023. }
  1024. $ax.visibility.isElementIdLimboOrInLimboContainer = function (elementId) {
  1025. var parent = document.getElementById(elementId);
  1026. while(parent) {
  1027. var scriptId = $ax.repeater.getScriptIdFromElementId($(parent).attr('id'));
  1028. if(_limboIds[scriptId]) return true;
  1029. parent = parent.parentElement;
  1030. }
  1031. return false;
  1032. }
  1033. var _blockSetMoveIds = false;
  1034. var _movedIds = _visibility.movedIds = {};
  1035. var _resizedIds = _visibility.resizedIds = {};
  1036. var _rotatedIds = _visibility.rotatedIds = {};
  1037. $ax.visibility.getMovedLocation = function(scriptId) {
  1038. return _movedIds[scriptId];
  1039. //var repeater = $ax.getParentRepeaterFromScriptId(scriptId);
  1040. //if (!repeater) return false;
  1041. //var itemId = $ax.getItemIdsForRepeater(repeater)[0];
  1042. //return _movedIds[$ax.repeater.createElementId(scriptId, itemId)];
  1043. };
  1044. $ax.visibility.setMovedLocation = function (scriptId, left, top) {
  1045. if ($jobj(scriptId).css('position') == 'fixed') return;
  1046. _movedIds[scriptId] = { left: left, top: top };
  1047. };
  1048. $ax.visibility.moveMovedLocation = function (scriptId, deltaLeft, deltaTop) {
  1049. if(_blockSetMoveIds) return false;
  1050. var offsetLocation = $ax('#' + scriptId).offsetLocation();
  1051. $ax.visibility.setMovedLocation(scriptId, offsetLocation.x + deltaLeft, offsetLocation.y + deltaTop);
  1052. if($ax.getTypeFromElementId(scriptId) == $ax.constants.LAYER_TYPE) {
  1053. var childIds = $ax('#' + scriptId).getChildren()[0].children;
  1054. for (var i = 0; i < childIds.length; i++) {
  1055. $ax.visibility.moveMovedLocation(childIds[i], deltaLeft, deltaTop);
  1056. }
  1057. }
  1058. };
  1059. $ax.visibility.getResizedSize = function(scriptId) {
  1060. return _resizedIds[scriptId];
  1061. //var repeater = $ax.getParentRepeaterFromScriptId(scriptId);
  1062. //if (!repeater) return false;
  1063. //var itemId = $ax.getItemIdsForRepeater(repeater)[0];
  1064. //return _resizedIds[$ax.repeater.createElementId(scriptId, itemId)];
  1065. };
  1066. $ax.visibility.setResizedSize = function(scriptId, width, height) {
  1067. _resizedIds[scriptId] = { width: width, height: height };
  1068. };
  1069. $ax.visibility.getRotatedAngle = function (scriptId) {
  1070. return _rotatedIds[scriptId];
  1071. };
  1072. $ax.visibility.setRotatedAngle = function (scriptId, rotation) {
  1073. _rotatedIds[scriptId] = rotation;
  1074. };
  1075. $ax.visibility.clearMovedAndResized = function () {
  1076. _movedIds = _visibility.movedIds = {};
  1077. _resizedIds = _visibility.resizedIds = {};
  1078. _rotatedIds = _visibility.rotatedIds = {};
  1079. };
  1080. $ax.visibility.clearMovedAndResizedIds = function (elementIds) {
  1081. for (var i = 0; i < elementIds.length; i++) {
  1082. var id = elementIds[i];
  1083. delete _movedIds[id];
  1084. delete _resizedIds[id];
  1085. delete _rotatedIds[id];
  1086. }
  1087. };
  1088. $ax.visibility.initialize = function() {
  1089. // initialize initial visible states
  1090. $('.' + HIDDEN_CLASS).each(function (index, diagramObject) {
  1091. _defaultHidden[$ax.repeater.getScriptIdFromElementId(diagramObject.id)] = true;
  1092. });
  1093. $('.' + UNPLACED_CLASS).each(function (index, diagramObject) {
  1094. _defaultLimbo[$ax.repeater.getScriptIdFromElementId(diagramObject.id)] = true;
  1095. });
  1096. _addLimboAndHiddenIds(_defaultLimbo, _defaultHidden, $ax('*'), true);
  1097. };
  1098. _visibility.initRepeater = function(repeaterId) {
  1099. var html = $('<div></div>');
  1100. html.append($jobj(repeaterId + '_script').html());
  1101. html.find('.' + HIDDEN_CLASS).each(function (index, element) {
  1102. _defaultHidden[$ax.repeater.getScriptIdFromElementId(element.id)] = true;
  1103. });
  1104. html.find('.' + UNPLACED_CLASS).each(function (index, element) {
  1105. _defaultLimbo[$ax.repeater.getScriptIdFromElementId(element.id)] = true;
  1106. });
  1107. }
  1108. var HIDDEN_CLASS = _visibility.HIDDEN_CLASS = 'ax_default_hidden';
  1109. var UNPLACED_CLASS = _visibility.UNPLACED_CLASS = 'ax_default_unplaced';
  1110. });